/* ---------- Site width — one edge for every page ----------
 * Every page shares one frame: at most --page-max wide, with --page-gutter at each side, so the
 * content edge is the same on the nav bar, the homepage sections, the solo market pages (sold,
 * reviews, support), cart, terms, about and the footer (140 px from the window at 1920, 40 px at
 * 1440). --page-inner is the content width inside that frame. Tune these three to move every edge.
 * The legacy --site-* names below follow them. Loaded last so it wins over Tailwind containers.
 * --page-max-site keeps the site-wide value for pages that narrow --page-max for themselves (the homepage
 * on short screens, home-v5-hero.css).
 */
:root {
    --page-max-site: 1720px;
    --page-max: var(--page-max-site);
    --page-gutter: clamp(20px, 3.4vw, 40px);
    --page-inner: calc(var(--page-max) - 2 * var(--page-gutter));
    --site-gutter: var(--page-gutter);
    --site-content: var(--page-inner);
    --site-box: calc(var(--site-content) + 2 * var(--site-gutter)); /* content + gutters */
}

/* Tailwind page containers (hero, platforms, CTA, footer, reviews page, cart) */
.max-w-7xl,
.site-wrap {
    max-width: var(--site-box) !important;
    padding-left: var(--site-gutter) !important;
    padding-right: var(--site-gutter) !important;
}
/* Navbar: full screen width */
#navbar .max-w-7xl { max-width: none !important; }
/* Why Choose Us: the section itself carries the gutter */
.max-w-7xl.hw2__inner { max-width: var(--site-content) !important; padding-left: 0 !important; padding-right: 0 !important; }

/* Full-bleed home sections: gutter on the section, content capped at the shared column */
body.home-bw-theme .hw2,
.mp,
.hx-hiw,
.hx-rev,
.hx-faq {
    padding-left: var(--site-gutter) !important;
    padding-right: var(--site-gutter) !important;
}
.mp__inner,
.hx-hiw__wrap,
.hx-faq__row { max-width: var(--site-content); }

/* Marketplace + Sold */
.mkt-body,
.sv-body {
    max-width: var(--site-box);
    padding-left: var(--site-gutter) !important;
    padding-right: var(--site-gutter) !important;
}
.sv-hero,
.mkt-hero { padding-left: var(--site-gutter); padding-right: var(--site-gutter); }

/* Phone blocks keep their own 20px (16/12px on small screens) inner padding */
@media (max-width: 767px) {
    body.home-bw-theme .hw2, .mp, .hx-hiw, .hx-rev, .hx-faq { padding-left: 0 !important; padding-right: 0 !important; }
    .mp__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1023px) {
    .mp__grid { grid-template-columns: minmax(0, 1fr); }
}

/* Marketplace shows 8 cards per page: 4 columns keeps two full rows on wide screens */
@media (min-width: 1280px) {
    .mkt #productGrid:not(.dash-compact-grid) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}