/*
 * Jinbao desktop content system.
 *
 * SHOPLINE injects a runtime #shopline-section-* element around every theme
 * section.  In a flex/grid page host that runtime element may size to its
 * contents, so centering only the descendant .page-width is insufficient.
 * Stretch the exact runtime wrappers used by Jinbao and the native collection
 * grid, then center one explicit inner container.  Mobile remains untouched.
 */
@media (min-width: 960px) {
  #MainContent [id^="shopline-section-"]:has(
      :is(
        .section-featured-collection,
        .trust-strip,
        budget-guide,
        .budget-guide,
        .style-direction,
        .confidence-steps,
        .first-order-faq,
        .whatsapp-help,
        collection-discovery,
        .collection-discovery,
        theme-main-collection-products
      )
    ) {
    width: 100%;
    min-width: 0;
    max-width: none;
    margin-inline: 0;
    align-self: stretch;
    justify-self: stretch;
  }

  :is(
      .section-featured-collection,
      .trust-strip,
      budget-guide,
      .budget-guide,
      .style-direction,
      .confidence-steps,
      .first-order-faq,
      .whatsapp-help,
      collection-discovery,
      .collection-discovery,
      theme-main-collection-products
    ) {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: none;
  }

  .jb-page-width {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: calc(
      var(--jb-desktop-content-max, var(--jb-desktop-content-width, var(--page-width))) +
        var(--jb-desktop-page-padding, var(--page-padding)) * 2
    );
    padding-inline: var(--jb-desktop-page-padding, var(--page-padding));
    margin-left: auto;
    margin-right: auto;
  }
}