/* Shared friends wallpaper with opaque reading surfaces. */

body.smish-site,
body.smish-site:has(> #smish-shop) {
  --site-pattern-wallpaper: url('/img/brand/friends-pattern.webp');
  --site-pattern-wallpaper-size: 640px auto;
  --site-pattern-panel-pad: clamp(22px, 2.5vw, 36px);
  background: #fff var(--site-pattern-wallpaper) repeat center top / var(--site-pattern-wallpaper-size);
}

/* All real page roots share these classes, including the separate app shell,
   generated product/song/seller pages, and the interactive shop catalogue.
   Flow-root keeps section margins inside the patterned page background.
   Do not introduce overflow clipping: 2D characters and sticky song art use it. */
body.smish-site main:is(.site-page, .sm-shop) {
  display: flow-root;
  background: #fff var(--site-pattern-wallpaper) repeat center top / var(--site-pattern-wallpaper-size);
}

/* Opaque surfaces for plain editorial content. Existing coloured panels keep
   their own backgrounds. The friends grid stays transparent between cards.
   These are direct main children, so this does not repaint forms or dialogs. */
body.smish-site main.site-page > .site-wrap:not(:is(
  .site-page-hero,
  .site-release-feature,
  .site-island-invitation,
  .site-island-evening,
  .site-rolce-banner,
  .site-shop-feature,
  .site-ticker,
  .site-app-hero,
  .site-app-promo,
  .site-partner-hero,
  .site-partner-retailer,
  .site-photo-2d-intro,
  .site-character-duo,
  .site-character-grid,
  .site-wish
)) {
  background-color: #fff;
  padding-inline: var(--site-pattern-panel-pad);
}

/* Blocks whose previous transparent surface had no inner vertical spacing.
   Existing coloured hero/duo/intro padding and search-notes rhythm are retained. */
body.smish-site main.site-page > :is(
  .site-legal,
  .site-discography,
  .site-gallery-section,
  .site-song-layout,
  .site-island-chapter,
  .site-partner-directions,
  .sm-product-page-main
),
body.smish-site main.site-page > .site-editorial:not(.site-photo-2d-intro) {
  padding-block: var(--site-pattern-panel-pad);
}

body.smish-site main.site-page > .site-bottom-link {
  padding-block: 18px;
}

/* A separate white card for each friend; retain the 34px space reserved for
   the original miniature character protruding below its photograph.
   Do not set overflow:hidden on the article or its image container. */
body.smish-site .site-character-grid > .site-character {
  background-color: #fff;
}
body.smish-site .site-character-grid > .site-character > .site-character-copy {
  padding-inline: 24px;
  padding-bottom: 28px;
}

/* The shop uses sm-wrap, not site-wrap. Its orange hero, blue values/story,
   yellow collection film and existing modal surfaces remain untouched.
   The catalogue panel protects prices, filters, labels and product captions. */
body.smish-site main.sm-shop > :is(
  .sm-shopbar,
  .sm-catalog,
  .sm-product-page-index,
  .sm-details,
  .sm-partners
) {
  background-color: #fff;
  padding-inline: var(--site-pattern-panel-pad);
}
body.smish-site main.sm-shop > :is(.sm-details, .sm-partners) {
  padding-block: var(--site-pattern-panel-pad);
}

/* The home-page quotation already has an opaque inner paper surface;
   keep the outer section transparent so one continuous pattern remains. */
body.smish-site main.site-home > .site-wish {
  background: transparent;
}

@media (max-width: 700px) {
  body.smish-site {
    --site-pattern-wallpaper-size: 480px auto;
    --site-pattern-panel-pad: 20px;
  }
  body.smish-site .site-character-grid > .site-character > .site-character-copy {
    padding-inline: 22px;
    padding-bottom: 24px;
  }
}

@media (max-width: 374px) {
  body.smish-site { --site-pattern-panel-pad: 16px; }
}