/*
 * S268-w2 — page-edge gutters: header, trust strip, footer (owner feedback S268).
 *
 * Owner: "no breathing space for the viewer on the corners in header and footer" —
 * at desktop widths the cart/account icons sat at the physical left edge and the
 * logo block, the trust strip and the footer brand/columns sat flush against the
 * right edge. One consistent page gutter, applied to the CONTAINER, never the
 * children: GeneratePress nests the whole header row (brand lockup, search,
 * account/cart, mobile toggle) inside .inside-header, the trust strip's pills
 * inside .drjafari-trust-strip-inner, and the footer columns inside the footer
 * .container — so one rule per container insets every leaf at once.
 *
 * Width reuses tokens.css `.drjafari-home .container` (max-width 1180px): chrome
 * aligns to the same 1180 box the body uses. Gutter is 16px on a phone and 24px
 * at >=769px (commission: never less than 16px phone, ~24-32px desktop).
 * RTL-safe: padding-inline / margin-inline only, no physical sides. Block padding
 * is untouched (GP's 20px header block, the strip's 11px, the grid's 30px stay).
 * No colours here — palette still lives in tokens.css alone.
 */

.site-header .inside-header,
.drjafari-trust-strip-inner,
.wd-footer > .container {
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: 16px;
}

@media (min-width: 769px) {
  .site-header .inside-header,
  .drjafari-trust-strip-inner,
  .wd-footer > .container {
    padding-inline: 24px;
  }
}

/* S268 (Operating, class fix at fold): the same defect one layer in. Below the 1180
   box plus two gutters, every homepage section under the hero (headings, categories,
   featured, sale carousel, popular, blog teasers) ran flush to both screen edges on a
   phone. The hero stays full-bleed by design (record D-rules); everything else gets the
   chrome's 16px. Above 1211px the 1180 max-width already leaves room. */
@media (max-width: 1211px) {
  .drjafari-home section:not(.drjafari-hero) > .container {
    padding-inline: 16px;
  }
}