/**
 * Hyla Unified page rail — AN-Store v11 “Unified page rail” 1:1 (Hyla selectors).
 * Desktop ≥900px: --page-max 1440 + clamp gutter; one padding-box for header/nav/content/footer.
 * Mobile: gutter 0.75rem. Checkout keeps its own --hyla-co-* shell.
 */

:root {
  --page-max: 1600px;
  --page-gutter: 2.5rem;
  --max: var(--page-max);
  /* Prefer % over 100vw to avoid horizontal scroll from scrollbar width */
  --max-wide: min(100% - (2 * var(--page-gutter)), var(--page-max));
}

@media (max-width: 899px) {
  :root {
    --page-gutter: 0.75rem !important;
  }
}

@media (min-width: 900px) {
  :root {
    --page-max: 1440px;
    --page-gutter: clamp(2rem, 4vw, 4rem);
    --max-wide: min(100% - (2 * var(--page-gutter)), var(--page-max));
  }

  /*
   * Single padding-box rail (beats theme .wrap { width: max-wide } + footer-shell max-width:none).
   * .header-shell / .footer-shell are the same node as .wrap.wrap-wide — one padding box.
   * Checkout excluded — keeps --hyla-co-max / --hyla-co-gutter.
   */
  body:not(.woocommerce-checkout) .site-header > .wrap.header-shell,
  body:not(.woocommerce-checkout) .site-header > .wrap-wide.header-shell,
  body:not(.woocommerce-checkout) .site-header > .wrap,
  body:not(.woocommerce-checkout) .site-header > .wrap-wide,
  body:not(.woocommerce-checkout) .site-footer > .wrap.footer-shell,
  body:not(.woocommerce-checkout) .site-footer > .wrap-wide.footer-shell,
  body:not(.woocommerce-checkout) .site-footer > .wrap,
  body:not(.woocommerce-checkout) .site-footer > .wrap-wide,
  body:not(.woocommerce-checkout) .site-footer .footer-shell,
  body:not(.woocommerce-checkout) main > .wrap,
  body:not(.woocommerce-checkout) main > .wrap-wide,
  body:not(.woocommerce-checkout) .page-shell > .wrap,
  body:not(.woocommerce-checkout) .page-shell > .wrap-wide,
  body:not(.woocommerce-checkout) .hyla-woo-page > .wrap,
  body:not(.woocommerce-checkout) .hyla-woo-page > .wrap-wide,
  body:not(.woocommerce-checkout) .section.is-wide > .wrap {
    width: 100% !important;
    max-width: var(--page-max) !important;
    margin-inline: auto !important;
    padding-inline: var(--page-gutter) !important;
    box-sizing: border-box !important;
  }

  /*
   * Home hero / cat slider: was width:var(--max-wide) without padding → at viewport >1440
   * the banner sat left of the logo (logo = rail pad, shell = centered 1440). Same padding-box.
   */
  body:not(.woocommerce-checkout) .hyla-cat-slider-shell,
  body:not(.woocommerce-checkout) .hyla-home-hero .hyla-cat-slider-shell {
    width: 100% !important;
    max-width: var(--page-max) !important;
    margin-inline: auto !important;
    padding-inline: var(--page-gutter) !important;
    box-sizing: border-box !important;
  }

  /* Hero copy: drop extra left pad so H1 flushes with logo (shell already has gutter) */
  body:not(.woocommerce-checkout) .hyla-home-hero .hyla-cat-slide-copy {
    padding-left: 0 !important;
  }
  body:not(.woocommerce-checkout)[dir="rtl"] .hyla-home-hero .hyla-cat-slide-copy,
  html[dir="rtl"] body:not(.woocommerce-checkout) .hyla-home-hero .hyla-cat-slide-copy {
    padding-left: 1.5rem !important;
    padding-right: 0 !important;
  }

  /* Generic storefront wraps (content) — same rail; nested .wrap inside an already-padded
     parent should not add a second gutter (direct-child selectors above cover shells). */
  body:not(.woocommerce-checkout) main .wrap.wrap-wide:not(.header-shell):not(.footer-shell),
  body:not(.woocommerce-checkout) main .wrap:not(.header-shell):not(.footer-shell) {
    width: 100% !important;
    max-width: var(--page-max) !important;
    margin-inline: auto !important;
    padding-inline: var(--page-gutter) !important;
    box-sizing: border-box !important;
  }

  body:not(.woocommerce-checkout) .footer-shell {
    width: 100% !important;
    max-width: var(--page-max) !important;
  }

  /* Category list: no extra horizontal padding — labels share logo/cart rail edges */
  body:not(.woocommerce-checkout) .site-header .hyla-fnav-list {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding-inline: 0 !important;
    box-sizing: border-box !important;
  }

  /* XStore / legacy containers on filler hosts */
  body.hyla-mode-filler:not(.woocommerce-checkout) .container,
  body.hyla-mode-filler:not(.woocommerce-checkout) .et-container,
  body.hyla-mode-filler:not(.woocommerce-checkout) .page-wrapper > .container {
    width: 100% !important;
    max-width: var(--page-max) !important;
    margin-inline: auto !important;
    padding-inline: var(--page-gutter) !important;
    box-sizing: border-box !important;
  }
}

/* Mobile: one gutter; kill header calc((100vw - 24.75rem)/2) */
@media (max-width: 899px) {
  body:not(.woocommerce-checkout) .site-header > .wrap,
  body:not(.woocommerce-checkout) .site-header > .wrap-wide,
  body:not(.woocommerce-checkout) .site-footer > .wrap,
  body:not(.woocommerce-checkout) .site-footer > .wrap-wide,
  body:not(.woocommerce-checkout) .site-footer .footer-shell,
  body:not(.woocommerce-checkout) main > .wrap,
  body:not(.woocommerce-checkout) main > .wrap-wide,
  body:not(.woocommerce-checkout) .hyla-cat-slider-shell {
    width: 100% !important;
    max-width: var(--page-max) !important;
    margin-inline: auto !important;
    padding-inline: var(--page-gutter) !important;
    box-sizing: border-box !important;
  }

  body:not(.woocommerce-checkout) .footer-shell {
    width: 100% !important;
    max-width: var(--page-max) !important;
  }
}

/* Lesetext / Legal: prose may be narrower; site shell stays on the rail */
@media (min-width: 900px) {
  body.hyla-lp-page main.page-shell .lp-doc,
  body.hyla-lp-page main.page-shell .entry-content > .lp:not(.lp-faq) {
    max-width: 52rem;
  }
}

/* Checkout: own narrower shell — marketing rail must not win */
@media (min-width: 900px) {
  body.woocommerce-checkout .site-header > .wrap,
  body.woocommerce-checkout .site-header > .wrap-wide,
  body.woocommerce-checkout .wrap,
  body.woocommerce-checkout .wrap-wide,
  body.woocommerce-checkout .footer-shell {
    max-width: var(--hyla-co-max, var(--page-max)) !important;
    padding-inline: var(--hyla-co-gutter, var(--page-gutter)) !important;
  }
}