/* One mobile spacing scale. Loaded first to override legacy important spacing,
 * but deliberately owns no typography, visibility, icon sizes or desktop rules. */
@layer sg-mobile-spacing {
  @media (max-width: 767.98px) {
    html body {
      --sg-mobile-layout-gutter: 16px;
      --sg-mobile-layout-section-gap: 24px;
      --sg-mobile-layout-card-gap: 12px;
      --sg-mobile-layout-card-padding: 16px;
    }

    /* Homepage sections share a single inset; nested containers must not add
     * another gutter. Flex gap ignores sections hidden by module settings. */
    html body #content.page-content--home {
      gap: var(--sg-mobile-layout-section-gap) !important;
      margin: 0 !important;
      padding: 0 !important;
      min-width: 0 !important;
    }
    html body .SGGLOVES-home {
      box-sizing: border-box !important;
      display: flex !important;
      flex-direction: column !important;
      gap: var(--sg-mobile-layout-section-gap) !important;
      width: 100% !important;
      max-width: none !important;
      min-width: 0 !important;
      margin: 0 !important;
      padding: var(--sg-mobile-layout-section-gap) var(--sg-mobile-layout-gutter) !important;
    }
    html body .SGGLOVES-home > :is(section, .ps-featuredproducts, .SGGLOVES-home-section) {
      box-sizing: border-box !important;
      width: 100% !important;
      max-width: none !important;
      min-width: 0 !important;
      margin: 0 !important;
      padding: 0 !important;
    }
    html body .SGGLOVES-home > section > :is(.container, .container-md, .container-xl),
    html body .SGGLOVES-home .ps-featuredproducts > .module-products {
      box-sizing: border-box !important;
      width: 100% !important;
      max-width: none !important;
      min-width: 0 !important;
      margin: 0 !important;
      padding: 0 !important;
    }
    html body .SGGLOVES-home .SGGLOVES-home-heading__inner {
      padding: var(--sg-mobile-layout-card-padding) !important;
      gap: var(--sg-mobile-layout-card-gap) !important;
    }
    html body .SGGLOVES-home-heading__frame > .sg-module-promises {
      margin-top: var(--sg-mobile-layout-section-gap) !important;
      padding-block: 0 !important;
      gap: var(--sg-mobile-layout-card-gap) !important;
    }
    html body .SGGLOVES-home :is(.SGGLOVES-home-section__title, .module-products__title) {
      margin-block: 0 var(--sg-mobile-layout-card-padding) !important;
    }
    html body .SGGLOVES-home :is(.SGGLOVES-home-categories__grid, .SGGLOVES-home-products__grid, .SGGLOVES-blocks-section__grid, .SGGLOVES-dual-zone__grid, .SGGLOVES-home-blog__grid, .SGGLOVES-home-features, .SGGLOVES-home-promo-row) {
      gap: var(--sg-mobile-layout-card-gap) !important;
    }
    /* A carousel may reveal the next card, but its viewport stays inside the
     * same content edge as the category grid. Keep native scrolling and snap. */
    html body .SGGLOVES-home .products--featured-home {
      width: 100% !important;
      max-width: 100% !important;
      margin-inline: 0 !important;
      padding-inline: 0 !important;
      scroll-padding-inline: 0 !important;
    }
    html body .SGGLOVES-home :is(.SGGLOVES-home-category .sg-studio-caption, .SGGLOVES-dual-card__content, .SGGLOVES-block-card, .SGGLOVES-home-post__body) {
      padding: var(--sg-mobile-layout-card-padding) !important;
    }
    html body .SGGLOVES-home .product-miniature__bottom {
      padding-inline: var(--sg-mobile-layout-card-padding) !important;
    }
    html body .SGGLOVES-home .SGGLOVES-home-hero {
      left: auto !important;
      right: auto !important;
      transform: none !important;
    }

    /* Independent displayHome modules use the same edge as managed sections. */
    html body #content.page-content--home > :is(section, .ps-featuredproducts, .sg-companybox-home, .sg-module-reassurance) {
      box-sizing: border-box !important;
      width: calc(100% - 2 * var(--sg-mobile-layout-gutter)) !important;
      max-width: none !important;
      margin: 0 auto !important;
    }
    html body #content.page-content--home > .ps-featuredproducts > .module-products {
      width: 100% !important;
      padding-inline: 0 !important;
    }

    /* The standard category/product/CMS layout owns the outer inset once.
     * Do not blanket-reset nested Bootstrap rows, dialogs or checkout forms. */
    html body #wrapper > .columns-container {
      box-sizing: border-box !important;
      width: 100% !important;
      max-width: none !important;
      margin-inline: 0 !important;
      padding-inline: var(--sg-mobile-layout-gutter) !important;
    }
    html body #wrapper > .columns-container > .row {
      margin-inline: 0 !important;
      row-gap: var(--sg-mobile-layout-section-gap) !important;
    }
    html body #wrapper > .columns-container > .row > :is(#left-column, #center-column, #right-column) {
      padding-inline: 0 !important;
      min-width: 0 !important;
    }
    html body #wrapper > .columns-container > #center-column {
      padding-inline: 0 !important;
      min-width: 0 !important;
    }
    html body #footer .footer__main > .container {
      box-sizing: border-box !important;
      width: 100% !important;
      max-width: none !important;
      padding-inline: var(--sg-mobile-layout-gutter) !important;
      margin-inline: 0 !important;
    }
  }
}