/* Base section */
.wp-block-group.is-my-hero {
  /* No rounded corners */
  overflow: hidden;
  transition: background-color .2s ease;
}

/* Show only one state */
.is-my-hero .is-my-hero-expanded { display: block; }
.is-my-hero .is-my-hero-collapsed { display: none; }
.is-my-hero.is-collapsed .is-my-hero-expanded { display: none; }
.is-my-hero.is-collapsed .is-my-hero-collapsed { display: flex; }

/* Collapsed banner: keep it as small as natural padding (no min-height) */
.is-my-hero .is-my-hero-collapsed {
  align-items: center;
  gap: 10px;
  /* height is defined by padding only */
  /* Override WordPress inline styles with !important */
  padding: 4px 8px !important;
}

/* Bottom CTA padding (a bit of space above the button) */
.is-my-bottom-cta { padding-top: 8px; }

/* "Go shopping!" button styles (black background) */
.is-my-bottom-cta .wp-block-button__link,
.is-my-go-shopping .wp-block-button__link,
.is-my-go-shopping.wp-block-button__link {
  background-color: #000000;
  color: #ffffff;
  border-radius: 9999px;
  text-decoration: none;
  padding: 10px 16px;
}

/* Collapsed banner button */
.is-my-hero .is-my-hero-collapsed .wp-block-button__link {
  border-radius: 9999px;
  text-decoration: none;
  padding: 8px 14px;
  background-color: #00000010; /* subtle visible button on light background */
  color: #000000;
}

/* Image styling in hero section */
.is-my-hero .is-my-media-text-brand .wp-block-media-text__media img {
  max-height: 426px !important;
  max-width: 426px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  border-radius: 12px !important;
}

/* Limit the media container width */
.is-my-hero .is-my-media-text-brand .wp-block-media-text__media {
  max-width: 426px !important;
  width: auto !important;
  flex-shrink: 0 !important;
}

/* Additional specificity for WordPress media-text block */
.wp-block-group.is-my-hero .wp-block-media-text.is-my-media-text-brand {
  max-width: 100% !important;
}

.wp-block-group.is-my-hero .wp-block-media-text.is-my-media-text-brand .wp-block-media-text__media {
  max-width: 426px !important;
  width: 426px !important;
  flex: 0 0 426px !important;
}

/* Optional hover effects */
.is-my-bottom-cta .wp-block-button__link:hover,
.is-my-hero .is-my-hero-collapsed .wp-block-button__link:hover {
  filter: brightness(0.95);
}