/* Blog canvas template — full-bleed sections.
   The content wrapper spans the full viewport width, so every shop block root
   paints its background edge to edge (full bleed) by simply being 100% wide;
   each block's own __inner stays centered at max-width:1100px. Block roots
   carry no vertical margin so coloured sections stack edge to edge.
   Plain (non-shop) content is then centered within a readable max-width. */

.blog-canvas {
  width: 100%;
  margin: 0 auto;
}

/* Full-width stage: no centering width or vertical padding here — the shop
   blocks manage their own background (root) and centered content (__inner). */
.blog-canvas__content {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

/* Every custom shop block becomes a full-bleed section on the front end.
   Override the blocks' own card margins/radius (and the 100vw breakout some
   blocks use, which can leave a scrollbar-width offset): width:100% aligns
   exactly to the viewport edges. The editor (.is-editor) keeps the card look. */
.blog-canvas__content > [class*="wp-block-shop-"]:not(.is-editor) {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

/* Plain content (paragraphs, headings, images, ...) stays centered and
   readable with side padding instead of touching the viewport edges. */
.blog-canvas__content
  > *:not([class*="wp-block-shop-"]):not(style):not(script) {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(20px, 5vw, 48px);
  padding-right: clamp(20px, 5vw, 48px);
}

/* Default body copy size across the Blog template — paragraphs and inline
   spans inside block content default to 16px. Scope is deliberately tight
   so headings (h1..h6) and buttons keep their own font-size. */
.blog-canvas__content p,
.blog-canvas__content span {
  font-size: 16px;
}