/* GOLDEN-LINE homepage spacing on smartphones only.
 * Existing card widths, image crops, carousel scrolling and two-column brand
 * grid are deliberately untouched. Sections have their own padding, so we
 * reset the editorial/brand vertical insets rather than stack empty space.
 */
@media (max-width: 767.98px) {
  #page-home {
    --gl-home-mobile-gap-small: 24px;
    --gl-home-mobile-gap-medium: 32px;
    --gl-home-mobile-gap-large: 40px;
  }

  /* Hero/previous section -> carousel heading: 32px.
     Remove the generic header's extra 20px top inset to avoid 52px total. */
  #page-home > .gl-section--home-products {
    margin-top: var(--gl-home-mobile-gap-medium);
  }
  #page-home > .gl-section--home-products > .gl-section-header {
    padding: 0 20px 14px;
  }

  /* Previous section -> editorial image: 32px. Keep 12px horizontal inset
     and the 2.2-card mobile swipe geometry from the existing CSS. */
  #page-home > .gl-editorial-cards {
    margin-top: var(--gl-home-mobile-gap-medium);
    padding-top: 0;
    padding-bottom: 0;
  }

  /* The wide campaign hero gets a slightly stronger separator. */
  #page-home > .gl-hero-single {
    margin-top: var(--gl-home-mobile-gap-large);
  }

  /* Sale -> brands: 32px. Brand row heights and two-column grid unchanged. */
  #page-home > .gl-home-brands {
    margin-top: var(--gl-home-mobile-gap-medium);
    padding-top: 0;
    padding-bottom: 0;
  }

  /* Brands -> SEO: 24px to the divider and a further 24px to the title;
     also applies when the brand section is absent. */
  #page-home > .gl-home-seo {
    margin-top: var(--gl-home-mobile-gap-small);
    padding-top: var(--gl-home-mobile-gap-small);
    padding-bottom: var(--gl-home-mobile-gap-large);
  }
}