/* Shared storefront geometry. The homepage is the canonical container:
   1440px maximum width with 24px desktop gutters. */
:root {
  --storefront-container: 1440px;
  --storefront-gutter: 24px;
}

.store-shell {
  box-sizing: border-box;
  max-width: var(--storefront-container) !important;
  padding-right: var(--storefront-gutter) !important;
  padding-left: var(--storefront-gutter) !important;
}

#main-content
  > :is(
    .page,
    .about-page,
    .account-page,
    .brands-page,
    .car-makes-page,
    .vmp-page,
    .cmo-page,
    .vct-page,
    .cart-page,
    .checkout-page,
    .confirmation-page,
    .contact-page,
    .garage-page,
    .fluids-page,
    .catalog-page,
    .category-page,
    .sr-page,
    .tdp-page,
    .shipping-page,
    .hub-page,
    .password-page,
    .track-page,
    .vc-empty-page
  ) {
  box-sizing: border-box;
  width: min(
    var(--storefront-container),
    calc(100% - (var(--storefront-gutter) * 2))
  ) !important;
  max-width: var(--storefront-container) !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

/* These three legacy pages used horizontal padding as their outer gutter.
   The shared wrapper now owns that gutter, so their content must start at the
   same edge as every other page. */
#main-content > :is(.car-makes-page, .garage-page, .track-page) {
  padding-right: 0 !important;
  padding-left: 0 !important;
}

/* Shared breathing room between the storefront header and inner-page content. */
#main-content
  > :is(
    .account-page,
    .brands-page,
    .car-makes-page,
    .vmp-page,
    .cmo-page,
    .vct-page,
    .cart-page,
    .checkout-page,
    .garage-page,
    .fluids-page,
    .catalog-page,
    .category-page,
    .sr-page,
    .tdp-page,
    .track-page,
    .vc-empty-page
  ),
#main-content > .page:not(.home-page) {
  padding-top: 38px !important;
}

@media (max-width: 768px) {
  :root {
    --storefront-gutter: 12px;
  }

  #main-content
    > :is(
      .account-page,
      .brands-page,
      .car-makes-page,
      .vmp-page,
      .cmo-page,
      .vct-page,
      .cart-page,
      .checkout-page,
      .garage-page,
      .fluids-page,
      .catalog-page,
      .category-page,
      .sr-page,
      .tdp-page,
      .track-page,
      .vc-empty-page
    ),
  #main-content > .page:not(.home-page) {
    padding-top: 25px !important;
  }
}

@media (min-width: 769px) and (max-width: 1180px) {
  :root {
    --storefront-gutter: 16px;
  }
}