/* headless.css — gap-fill for base CSS that Shopify's runtime provided and the
   headless build lost. theme.css is a 1:1 copy of the theme stylesheet; it never
   contained these rules because Shopify injected them separately via
   content_for_header. Loaded AFTER theme.css on every page so it can patch gaps.
   Keep this small and only for genuine "Shopify base furniture" we removed. */

/* ── Policy pages ──────────────────────────────────────────────────────────
   Verbatim from Shopify's storefront policy stylesheet
   (cdn/shopifycloud/storefront/assets/storefront/policy-*.css), flattened out
   of its nested syntax. Without it .shopify-policy__container has no width
   constraint and the legal text runs edge-to-edge. Vertical padding added so
   the title isn't cramped under the sticky header (the one deviation, marked). */
.shopify-policy__container {
  max-width: 65ch;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 64px;    /* headless addition: breathing room under sticky header */
  padding-bottom: 96px; /* headless addition */
}
.shopify-policy__title { text-align: center; }
.shopify-policy__title h1 { margin-bottom: 20px; }
.shopify-policy__remote-policy-heading-wrapper { text-align: center; }
.shopify-policy__remote-policy-heading-wrapper h1 { margin-bottom: 20px; }
.shopify-policy__remote-policy-body { margin-bottom: 20px; }

/* ── .section-container ────────────────────────────────────────────────────
   NOT a port gap — a genuine bug that exists on the live Shopify theme too
   (Alvar's call 2026-07-18: fix it here rather than on Shopify, since headless
   is where we are heading). The theme defines `.container` (max-width + 24px
   gutters) but NEVER defines `.section-container`, despite ten sections using
   it as their wrapper. Those sections therefore render full-bleed, which is
   what made the Showcase "Made with Alvar" videos run to the screen edges,
   misaligned with every other section on the site.

   Matched to `.container` exactly so the two are interchangeable and the
   showcase grid lines up with the header, footer and every other section.

   Sections this visually changes: showcase .sc-pv + .sc-cv, reviews .rv-hero
   + .rv-all. It does NOT move product-page FAQs (.pf__inner is already
   max-width 760px) or showcase tutorials (.sc-tut inner is 880px) — those are
   constrained by an inner element and merely gain the gutter on narrow screens. */
.section-container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}
@media (max-width: 768px) {
  .section-container { padding: 0 16px; }
}