/**
 * MyWebStore native WordPress block styling foundation.
 *
 * Native blocks provide structure and behaviour. This layer maps common core
 * block output to MyWebStore design tokens without replacing the blocks.
 */

:where(.mws-entry-content, .editor-styles-wrapper) > :where(* + *) {
  margin-block-start: var(--mws-native-block-flow-gap, var(--mws-space-md, 20px));
}

:where(.mws-entry-content, .editor-styles-wrapper) > :where(.wp-block-heading + p, p + .wp-block-buttons, .wp-block-heading + .wp-block-buttons) {
  margin-block-start: var(--mws-space-sm, 12px);
}

:where(.mws-entry-content, .editor-styles-wrapper) > :where(.wp-block-group, .wp-block-cover, .wp-block-media-text, .wp-block-columns, .wp-block-query, .wp-block-woocommerce-product-collection, .wp-block-woocommerce-product-category) {
  margin-block-start: var(--mws-native-section-gap, var(--mws-space-lg, 32px));
}

:where(.mws-entry-content, .editor-styles-wrapper) > :where(.wp-block-group, .wp-block-cover, .wp-block-media-text, .wp-block-columns, .wp-block-query, .wp-block-woocommerce-product-collection, .wp-block-woocommerce-product-category):first-child {
  margin-block-start: 0;
}

.wp-block-group:where(.has-background) {
  padding: var(--mws-native-section-padding, clamp(1.75rem, 4vw, 4rem));
  border-radius: var(--mws-native-section-radius, var(--mws-radius-lg, 22px));
}

.wp-block-group:where(.alignfull.has-background) {
  border-radius: 0;
}

.wp-block-group > :first-child,
.wp-block-column > :first-child,
.wp-block-media-text__content > :first-child,
.wp-block-cover__inner-container > :first-child {
  margin-block-start: 0;
}

.wp-block-group > :last-child,
.wp-block-column > :last-child,
.wp-block-media-text__content > :last-child,
.wp-block-cover__inner-container > :last-child {
  margin-block-end: 0;
}

.wp-block-columns {
  gap: var(--mws-native-columns-gap, var(--mws-space-lg, 32px));
}

.wp-block-column:where(.has-background) {
  padding: var(--mws-native-card-padding, var(--mws-space-md, 20px));
  border-radius: var(--mws-native-card-radius, var(--mws-radius-lg, 22px));
}

.wp-block-cover {
  border-radius: var(--mws-native-media-radius, var(--mws-radius-lg, 22px));
  overflow: clip;
}

.wp-block-cover.alignfull {
  border-radius: 0;
}

.wp-block-cover__inner-container {
  width: min(100%, var(--mws-container, 1180px));
  margin-inline: auto;
}

.wp-block-media-text {
  gap: var(--mws-native-media-text-gap, var(--mws-space-lg, 32px));
}

.wp-block-media-text .wp-block-media-text__content {
  padding: clamp(1rem, 3vw, 2.5rem);
}

.wp-block-media-text .wp-block-media-text__media img,
.wp-block-image img {
  border-radius: var(--mws-native-media-radius, var(--mws-radius-md, 14px));
}

.wp-block-image.alignfull img,
.wp-block-image.alignwide img {
  width: 100%;
}

.wp-block-image figcaption,
.wp-block-gallery figcaption {
  color: var(--mws-color-secondary-text, #666666);
  font-size: var(--mws-font-size-small, 14px);
  line-height: 1.5;
  margin-block-start: var(--mws-space-xs, 8px);
}

.wp-block-separator {
  border: 0;
  border-top: 1px solid var(--mws-color-border, #e5e5e5);
  margin-block: var(--mws-native-separator-gap, var(--mws-space-lg, 32px));
  opacity: 1;
}

.wp-block-separator.is-style-wide {
  width: 100%;
}

.wp-block-buttons {
  gap: var(--mws-button-group-gap, var(--mws-space-sm, 12px));
}

.wp-block-button {
  max-width: 100%;
}

.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-outline .wp-element-button {
  background: transparent;
  color: var(--mws-button-bg, var(--mws-color-primary, #111111));
  border-color: currentColor;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-element-button:hover {
  background: var(--mws-button-bg, var(--mws-color-primary, #111111));
  color: var(--mws-button-text, #ffffff);
  border-color: var(--mws-button-bg, var(--mws-color-primary, #111111));
}

.wp-block-quote,
.wp-block-pullquote {
  border-color: var(--mws-color-border, #e5e5e5);
  color: var(--mws-color-text, #111111);
}

.wp-block-quote {
  border-left: 3px solid var(--mws-color-primary, #111111);
  padding-left: var(--mws-space-md, 20px);
}

.wp-block-pullquote {
  border-top: 1px solid var(--mws-color-border, #e5e5e5);
  border-bottom: 1px solid var(--mws-color-border, #e5e5e5);
  padding-block: var(--mws-space-lg, 32px);
}

.wp-block-details {
  border: 1px solid var(--mws-color-border, #e5e5e5);
  border-radius: var(--mws-native-card-radius, var(--mws-radius-md, 14px));
  padding: var(--mws-space-md, 20px);
  background: var(--mws-color-bg, #ffffff);
}

.wp-block-details summary {
  cursor: pointer;
  font-weight: 700;
}

.wp-block-details summary:not(.has-text-color) {
  color: var(--mws-color-heading, #111111);
}

.wp-block-query .wp-block-post-template {
  gap: var(--mws-native-query-gap, var(--mws-space-lg, 32px));
}

.wp-block-post-template > li {
  margin: 0;
}

.wp-block-post-title a {
  color: var(--mws-color-heading, #111111);
  text-decoration: none;
}

.wp-block-post-title a:hover {
  color: var(--mws-color-link-hover, #333333);
}

.wp-block-post-excerpt,
.wp-block-post-date,
.wp-block-post-author,
.wp-block-post-terms {
  color: var(--mws-color-secondary-text, #666666);
}

@media (max-width: 767px) {
  .wp-block-group:where(.has-background) {
    padding: var(--mws-native-section-padding-mobile, clamp(1.25rem, 6vw, 2rem));
  }

  .wp-block-media-text .wp-block-media-text__content {
    padding-inline: 0;
  }
}