/*
 * ROOSH global responsive gutters and shell width.
 *
 * v1.7.0: the Header/Footer and all Kadence-driven content now share the same
 * maximum site shell. No archive/page is allowed to become wider than the
 * visible Header container. Custom templates already use .rw-container.
 */

/* Custom ROOSH templates use the same source of truth as Header/Footer. */
body.rw-site .rw-container {
  padding-inline: var(--rw-gutter);
}

/*
 * Kadence-driven pages: catalogue/category archives, regular pages, search,
 * cart, checkout and account. Home owns a full-bleed composition; product uses
 * a deliberate narrower content container and is handled separately below.
 */
body.rw-site:not(.home):not(.single-product) .content-container {
  box-sizing: border-box;
  margin-inline: auto !important;
  max-width: var(--rw-container) !important;
  padding-left: var(--rw-gutter) !important;
  padding-right: var(--rw-gutter) !important;
  width: 100% !important;
}

/* Kadence places the native H1 outside .content-container on many archives. */
body.rw-site:not(.home):not(.single-product) .entry-hero .entry-header {
  box-sizing: border-box;
  margin-inline: auto !important;
  max-width: var(--rw-container) !important;
  padding-left: var(--rw-gutter) !important;
  padding-right: var(--rw-gutter) !important;
  width: 100% !important;
}

/* Keep outer Kadence shells from imposing a conflicting wider max-width. */
body.rw-site:not(.home):not(.single-product) .site-container,
body.rw-site:not(.home):not(.single-product) .entry-hero-container-inner {
  max-width: none;
  width: 100%;
}

/* Product page: gallery, summary, tabs and breadcrumb share one safe inset. */
body.rw-site.single-product div.product,
body.rw-site.single-product .rw-product-breadcrumb-wrap {
  box-sizing: border-box;
  padding-left: var(--rw-gutter) !important;
  padding-right: var(--rw-gutter) !important;
  width: 100%;
}

body.rw-site.single-product > .site .woocommerce-breadcrumb,
body.rw-site.single-product .content-area > .woocommerce-breadcrumb {
  box-sizing: border-box;
  padding-left: var(--rw-gutter) !important;
  padding-right: var(--rw-gutter) !important;
}

/* Tablet / small laptop. */
@media (max-width: 1024px) {
  :root {
    --rw-gutter: clamp(24px, 3.6vw, 36px);
  }
}

/* Mobile. */
@media (max-width: 767px) {
  :root {
    --rw-gutter: 20px;
  }
}

/* Compact phones. */
@media (max-width: 479px) {
  :root {
    --rw-gutter: 16px;
  }
}