/* Existing page-edge insets are preserved below. New section-to-section spacing
   is applied ONLY to adjacent edges by the final rules in this file.
   Storefront section rhythm, taken from the home page (not component spacing).
   Scoped important declarations beat legacy and asynchronously loaded page styles.
   Keep card/form padding, media sizes, horizontal gutters and fixed-control clearance. */
:root {
  --store-section-space: 38px;
}

@media (max-width: 600px) {
  :root { --store-section-space: 26px; }
}

/* Home retains its existing spacing and is the reference for product sections. */
#main > :is(.campaign-showcase, .category-shortcuts),
#main .commerce-home-section,
.product-page #product-main > :where(#mv-bundle, .pdp-content),
.product-page #product-main > .inspired-commerce-sections > .commerce-home-section {
  margin-block: 0 !important;
  padding-block: var(--store-section-space) !important;
}

.product-page #product-main > .product-hero-layout {
  padding-bottom: var(--store-section-space) !important;
}

.product-page #product-main > .inspired-commerce-sections {
  margin-block: 0 !important;
  padding-block: 0 !important;
}

/* Unboxed content sections use padding, with no extra stacked outer margin. */
.about-page main > :is(.about-intro, .about-pillars, .about-promise),
.career-page main > :is(.career-values, .career-openings),
.policy-page main > :is(.policy-highlights, .policy-layout),
.info-page main > :is(.faq-layout, .contact-grid, .blog-list),
.wishlist-page main > .wishlist-results,
.article-page main > :is(.article-hero, .article-layout, .article-more) {
  margin-block: 0 !important;
  padding-block: var(--store-section-space) !important;
}

/* Boxed/media sections keep their internal padding; only the surrounding gap changes. */
.about-page main > .about-showroom,
.blog-page main > .blog-feature,
.store-page main > .store-location {
  margin-block: var(--store-section-space) !important;
}

.about-page main > .about-stats,
.career-page main > .career-note,
.contact-page main > :is(.contact-connect, .contact-form-section, .contact-note),
.store-page main > :is(.store-details, .store-visit) {
  margin-top: 0 !important;
  margin-bottom: var(--store-section-space) !important;
}

/* Listing content and the space before the footer follow the same rhythm.
   Compact page heroes, filter groups and product cards are deliberately unchanged. */
.catalog-page main > .catalog-layout {
  margin-block: 0 !important;
  padding-block: var(--store-section-space) !important;
}

.all-categories-page .category-directory {
  padding-top: 0 !important;
  padding-bottom: var(--store-section-space) !important;
}

.all-categories-page .category-directory > .category-directory-hero {
  padding-block: var(--store-section-space) !important;
}

.cart-page .commerce-shell,
.checkout-page .checkout-shell,
.customer-page .customer-shell,
.search-page .search-shell,
.track-page .track-shell,
.wholesale-registration-page .wholesale-shell {
  padding-block: var(--store-section-space) !important;
}

.order-confirmation-page .confirmation-shell {
  margin-block: var(--store-section-space) !important;
}

/* Cart suggestions are a new section, not an extra shell + margin + padding stack. */
.cart-page #mv-cart-suggestions {
  margin-top: var(--store-section-space) !important;
  margin-bottom: 0 !important;
  padding-top: var(--store-section-space) !important;
  padding-bottom: 0 !important;
}

/* Checkout has its own fixed mobile purchase bar; preserve its safety inset. */
@media (max-width: 900px) {
  .checkout-page .checkout-shell {
    padding-bottom: max(var(--store-section-space), calc(100px + env(safe-area-inset-bottom, 0px))) !important;
  }
}

/* Home's 38px + 38px insets make a 76px content-to-content gap (52px on phones).
   Apply it once, not margin + padding + another margin. Boxed sections retain
   their internal padding. No marker is placed before the first or after the last
   section, so this layer never changes the start/end of a page. */
:root body[class] main [data-section-after],
body[class] :is(#product-main,#cart-main) [data-section-after],
body.product-page #product-main .inspired-commerce-sections [data-section-after] { margin-bottom: 0 !important; }
:root body[class] main [data-section-after="plain"],
body[class] :is(#product-main,#cart-main) [data-section-after="plain"],
body.product-page #product-main .inspired-commerce-sections [data-section-after="plain"] { padding-bottom: 0 !important; }
:root body[class] main [data-section-before="plain"],
body[class] :is(#product-main,#cart-main) [data-section-before="plain"],
body.product-page #product-main .inspired-commerce-sections [data-section-before="plain"] {
  margin-top: 0 !important;
  padding-top: max(0px, calc(var(--store-section-space) * 2 - var(--section-flow-gap, 0px))) !important;
}
:root body[class] main [data-section-before="boxed"],
body[class] :is(#product-main,#cart-main) [data-section-before="boxed"],
body.product-page #product-main .inspired-commerce-sections [data-section-before="boxed"] {
  margin-top: max(0px, calc(var(--store-section-space) * 2 - var(--section-flow-gap, 0px))) !important;
}