/**
 * Gutenberg / block editor compatibility
 *
 * Do NOT force text-align on heading tags — that fights
 * .has-text-align-center / left / right from the editor.
 * Do NOT zero .is-layout-flex gap globally.
 */

/*
 * Storefront sets `img { border-radius: 3px }` globally, which puts little
 * rounded corners on hero/cover images (visible under the dark search bar).
 * Cabinscape layout chrome should be square.
 */
img,
.wp-block-cover,
.wp-block-cover__image-background,
.wp-block-cover__background,
.wp-block-image img,
.wp-block-media-text__media img,
.wp-block-gallery .wp-block-image img,
#page,
.site,
.site-header,
.site-content,
.hentry,
.entry-content {
  border-radius: 0 !important;
}

/* Honour block alignment controls (beats older theme left-align hacks). */
.entry-content .has-text-align-left,
.entry-content.has-text-align-left {
  text-align: left;
}

.entry-content .has-text-align-center,
.entry-content.has-text-align-center {
  text-align: center;
}

.entry-content .has-text-align-right,
.entry-content.has-text-align-right {
  text-align: right;
}

/* Keep button groups usable without killing default flex gap site-wide. */
.wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
}

/*
 * Mobile: editor “Percentage width” (25/50/75/100) collapses CTAs into
 * skinny wrapped bars. Size buttons to their label instead — not full bleed.
 */
@media screen and (max-width: 781px) {
  .wp-block-button.has-custom-width,
  .wp-block-button[class*="wp-block-button__width-"] {
    width: auto !important;
    max-width: 100%;
  }

  .wp-block-button.has-custom-width .wp-block-button__link,
  .wp-block-button[class*="wp-block-button__width-"] .wp-block-button__link {
    width: auto !important;
    max-width: 100%;
    white-space: nowrap;
  }
}

/* Heading rhythm only — no alignment lock. */
.entry-content h2 {
  margin-bottom: var(--cs-space-4, 32px);
}

/* Related products title stays left without affecting page headings. */
.related.products h2 {
  text-align: left;
}