/* Shared page shell and top navigation. Inner grids and readable columns
 * retain their component geometry. */
:root {
  --ys-layout-width: 1360px;
  --ys-layout-gutter: 40px;
  --ys-layout-nav-top: 32px;
}
@media (max-width: 767px) {
  :root { --ys-layout-gutter: 20px; --ys-layout-nav-top: 24px; }
}

/* Adapters for the existing PHP, WooCommerce and Gutenberg template shells.
 * Keep this list explicit: a blanket .container rule would affect nested grids. */
body.ys-layout .woo-page > .custom-container,
body.ys-layout.ysp-purchase .woo-page > .custom-container,
body.ys-layout .content-area > .site-main,
body.ys-layout .about-section-page > .container,
body.ys-layout .yc-contact,
body.ys-layout .ya-container,
body.ys-layout .ys-home-products > .container,
body.ys-layout .ys-home-products > .custom-container,
body.ys-layout .ys-home-intro > .custom-container,
body.ys-layout .ys-home-distributor,
body.ys-layout .page-footer > .custom-container {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--ys-layout-width);
  margin-inline: auto;
  padding-inline: var(--ys-layout-gutter);
}

/* The product shell already provides the gutter, including on mobile. */
body.ys-layout .ysp-back { padding-inline: 0; }
/* The catalog used to add the legacy .woo-page 30px to its own 48px.
 * One shell owns this gap, so it matches product and account navigation. */
body.ys-layout.ysp-catalog-page .woo-page { padding-top: 0; }
body.ys-layout.ysp-catalog-page .woo-page > .custom-container,
body.ys-layout.ysp-product-design .content-area > .site-main,
body.ys-layout .ya-container {
  padding-top: var(--ys-layout-nav-top);
}
body.ys-layout .ysp-breadcrumb,
body.ys-layout .ysp-back,
body.ys-layout .ya-breadcrumb {
  font-size: 14px;
  line-height: 24px;
  margin-top: 0;
}
/* Standard page entrances; family-specific content stays inside the shell. */
body.ys-layout .yc-contact,
body.ys-layout.woocommerce-cart.ysp-purchase .woo-page > .custom-container,
body.ys-layout.woocommerce-wishlist .woo-page > .custom-container {
  padding-top: var(--ys-layout-nav-top);
}
body.ys-layout.woocommerce-wishlist .woo-page { padding-top: 0; }
body.ys-layout.woocommerce-cart .ysp-cart-heading > .page-title,
body.ys-layout.woocommerce-wishlist .woo-page .page-title {
  font-size: 28px;
  font-weight: 600;
  line-height: 1.35;
}
@media (max-width: 767px) {
  body.ys-layout.woocommerce-cart .ysp-cart-heading > .page-title,
  body.ys-layout.woocommerce-wishlist .woo-page .page-title {
    font-size: 26px;
  }
}
/* Legacy product-cols headings added a second mobile inset inside the shell. */
body.ys-layout .ys-home-products h2 { padding-inline: 0; }

/* Search has an accessible name but no visible label. Reserve the same label
 * row as sorting, and keep the desktop toolbar in one row at tablet widths. */
@media (min-width: 768px) {
  body.ys-layout .ysp-catalog-layout {
    --ys-catalog-label-height: 20px;
    --ys-catalog-label-gap: 6px;
  }
  body.ys-layout .ysp-filters .ysp-search-group {
    padding-top: calc(var(--ys-catalog-label-height) + var(--ys-catalog-label-gap));
  }
  body.ys-layout .ysp-results-heading,
  body.ys-layout .ysp-sort-controls { flex-wrap: nowrap; }
  body.ys-layout .ysp-sort-controls { min-width: 0; }
  body.ys-layout .ysp-sort-label {
    min-width: 0;
    line-height: var(--ys-catalog-label-height);
    gap: var(--ys-catalog-label-gap);
  }
}

/* Select2's body-level portal is a positioning anchor. Its absolutely
 * positioned dropdown already has the measured field width; letting the
 * empty anchor inherit the viewport width adds the left gutter to scrollWidth. */
body.ys-layout.ysp-product-design > .select2-container--open { width: 0; }

/* Page shells own the gap after the mobile navigation. */
@media (max-width: 991px) {
  body.ys-layout .quick-acc-menu { margin-bottom: 0; }
}