/* Palm & Salt — shared layout grid (header, body, footer align at desktop) */

:root {
  --layout-max: 1200px;
  --layout-gutter: clamp(20px, 3vw, 40px);
  --layout-inset: max(var(--layout-gutter), calc((100% - var(--layout-max)) / 2));
  --section-space: clamp(64px, 7vw, 96px);
  --section-space-lg: clamp(80px, 9vw, 112px);
  --section-gap: clamp(40px, 5vw, 56px);
  --nav-offset: clamp(72px, 8vw, 96px);
}

/* ── Prevent horizontal page scroll ── */
html {
  overflow-x: clip;
  max-width: 100%;
}

body {
  overflow-x: clip;
  max-width: 100%;
}

/* Grid/flex children default to min-width:auto and can blow past the viewport */
.checkout-layout,
.checkout-layout > *,
.checkout-main,
.checkout-aside,
.checkout-panel,
.confirm-layout,
.confirm-layout > *,
.confirm-aside,
.confirm-items-row,
.confirm-items-row > *,
.confirm-card,
.order-info-summary,
.account-card-row,
.account-card-row > *,
.detail-grid,
.detail-grid > *,
.help-top,
.help-top > *,
.catalog-grid,
.treat-grid,
.hiw-grid,
.diff-row,
.diff-row > *,
.form-grid,
.card-row,
.summary-panel,
.summary-item,
.confirm-item,
.history-item,
.upcoming-item,
.upcoming-list,
.pickup-item,
.fulfillment-toggle,
.page-promo,
.filter-bar {
  min-width: 0;
  max-width: 100%;
}

.field input,
.field select,
.field textarea,
.filter-search,
.footer-subscribe-input {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* ── Header ── */
.nav {
  padding-left: var(--layout-inset) !important;
  padding-right: var(--layout-inset) !important;
}

.nav.scrolled {
  padding-left: var(--layout-inset) !important;
  padding-right: var(--layout-inset) !important;
}

@media (max-width: 768px) {
  :root {
    --layout-gutter: 16px;
  }

  .nav,
  .nav.scrolled {
    padding-left: var(--layout-gutter) !important;
    padding-right: var(--layout-gutter) !important;
  }

  .checkout-panel,
  .confirm-card,
  .order-info-summary,
  .account-card,
  .help-card,
  .feedback-card {
    padding: 20px 16px !important;
  }

  .form-grid,
  .card-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .card-row .field:first-child {
    grid-column: 1 !important;
  }
}

/* ── Main content shells (same content width as nav/footer) ── */
.section,
.diff-section,
.intro,
.catalog,
.vid-section,
.final-cta,
.checkout-wrap,
.confirm-wrap,
.detail-wrap,
.account-wrap,
.faq-wrap,
.help-wrap,
.feedback-wrap {
  box-sizing: border-box;
  width: 100%;
  max-width: none !important;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--layout-inset) !important;
  padding-right: var(--layout-inset) !important;
}

/* ── Vertical rhythm ── */
.section,
.final-cta {
  padding-top: var(--section-space-lg) !important;
  padding-bottom: var(--section-space-lg) !important;
}

.diff-section,
.intro {
  padding-top: var(--section-space-lg) !important;
  padding-bottom: var(--section-space-lg) !important;
}

.catalog {
  padding-top: var(--section-gap) !important;
  padding-bottom: var(--section-space) !important;
}

.vid-section {
  padding-top: var(--section-space) !important;
  padding-bottom: var(--section-space) !important;
}

.checkout-wrap,
.confirm-wrap,
.detail-wrap,
.account-wrap,
.help-wrap,
.feedback-wrap {
  padding-top: calc(var(--nav-offset) + 8px) !important;
  padding-bottom: var(--section-space) !important;
}

.faq-wrap {
  padding-top: var(--section-gap) !important;
  padding-bottom: var(--section-space) !important;
}

.conc-section {
  padding-top: var(--section-space) !important;
  padding-bottom: var(--section-space) !important;
  padding-left: var(--layout-inset) !important;
  padding-right: var(--layout-inset) !important;
}

#treatments {
  padding-bottom: var(--section-space-lg) !important;
}

#products {
  padding-top: var(--section-space-lg) !important;
}

.section-head {
  margin-bottom: var(--section-gap) !important;
}

.diff-header {
  margin-bottom: clamp(48px, 6vw, 72px) !important;
}

/* ── Subpage hero ── */
.page-hero {
  padding-left: var(--layout-inset) !important;
  padding-right: var(--layout-inset) !important;
}

.page-hero-inner {
  max-width: var(--layout-max) !important;
  width: 100%;
  margin-inline: auto;
}

/* ── In-page promo bands (bento cards) ── */
.page-promo {
  box-sizing: border-box;
  max-width: var(--layout-max) !important;
  width: auto !important;
  margin-left: var(--layout-inset) !important;
  margin-right: var(--layout-inset) !important;
  margin-bottom: var(--section-space) !important;
}

/* ── Media & inner max widths ── */
.vid-card {
  max-width: var(--layout-max) !important;
}

.conc {
  max-width: min(720px, 100%);
  margin-inline: auto;
}

/* ── Footer ── */
.footer {
  padding-top: var(--section-space) !important;
  padding-bottom: 40px !important;
  padding-left: var(--layout-inset) !important;
  padding-right: var(--layout-inset) !important;
}

.footer-top,
.footer-bottom,
.footer-inner {
  max-width: var(--layout-max) !important;
  width: 100%;
  margin-inline: auto;
}