/* Native WooCommerce notices only; templates, messages and behavior stay intact. */
#page
  :is(
    .woocommerce-message,
    .woocommerce-error,
    .woocommerce-info,
    .wc-block-components-notice-banner
  ) {
  --ov-notice-bg: var(--color-bg-subtle);
  --ov-notice-ink: var(--color-text-primary);
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  margin-block: var(--spacing-16) var(--spacing-24);
  margin-inline: 0;
  border: 0;
  /* border-inline-start: var(--spacing-4) solid var(--ov-notice-ink); */
  border-radius: var(--radius-16);
  background: var(--ov-notice-bg);
  color: var(--ov-notice-ink);
  box-shadow: none;
  font-family: var(--font-ui);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body);
  letter-spacing: 0;
  overflow-wrap: anywhere;
}
/* Notices receive programmatic focus; their links and buttons keep visible focus. */
#page
  :is(
    .woocommerce-message,
    .woocommerce-error,
    .woocommerce-info,
    .wc-block-components-notice-banner
  ):focus-visible {
  outline: none;
}
#page :is(.woocommerce-message, .wc-block-components-notice-banner.is-success) {
  --ov-notice-bg: var(--color-feedback-success-bg);
  --ov-notice-ink: var(--color-feedback-success-ink);
}
#page :is(.woocommerce-error, .wc-block-components-notice-banner.is-error) {
  --ov-notice-bg: var(--color-feedback-error-bg);
  --ov-notice-ink: var(--color-feedback-error-ink);
}
#page :is(.woocommerce-info, .wc-block-components-notice-banner.is-info) {
  --ov-notice-bg: var(--color-feedback-info-bg);
  --ov-notice-ink: var(--color-feedback-info-ink);
}
#page .wc-block-components-notice-banner.is-warning {
  --ov-notice-bg: var(--color-feedback-warning-bg);
  --ov-notice-ink: var(--color-feedback-warning-ink);
}

/* Keep Storefront's icons and clearfix, including its native error list. */
#page :is(.woocommerce-message, .woocommerce-error, .woocommerce-info) {
  padding: var(--spacing-16);
  padding-inline-start: calc(
    var(--spacing-16) + var(--spacing-24) + var(--spacing-12)
  );
}
#page :is(.woocommerce-message, .woocommerce-error, .woocommerce-info)::before {
  top: var(--spacing-16);
  left: auto;
  inset-inline-start: var(--spacing-16);
  width: var(--spacing-24);
  color: inherit;
  /* These glyphs belong to Storefront's solid Font Awesome face. */
  font-weight: 900;
  line-height: var(--line-height-body);
  text-align: center;
}
#page :is(.woocommerce-message, .woocommerce-info):has(> .button) {
  padding-block: calc(
    var(--spacing-16) + (var(--action-target-min) - var(--line-height-body)) / 2
  );
}
#page :is(.woocommerce-message, .woocommerce-info):has(> .button)::before {
  top: calc(
    var(--spacing-16) + (var(--action-target-min) - var(--line-height-body)) / 2
  );
}
#page .woocommerce-error {
  list-style: none;
}
#page .woocommerce-error > li {
  margin: 0;
}
#page .woocommerce-error > li + li {
  margin-top: var(--spacing-8);
}
/* This native empty-state variant intentionally has no icon. */
#page .woocommerce-info.woocommerce-no-products-found {
  padding-inline-start: var(--spacing-16);
}

#page .wc-block-components-notice-banner {
  gap: var(--spacing-12);
  /* WooCommerce declares banner padding with !important. */
  padding: var(--spacing-16) !important;
}
#page
  .wc-block-components-notice-banner
  > .wc-block-components-notice-banner__content {
  min-width: 0;
}
#page .wc-block-components-notice-banner > svg {
  box-sizing: border-box;
  width: var(--spacing-24);
  height: var(--spacing-24);
  background: var(--ov-notice-ink);
  fill: var(--ov-notice-bg);
}
#page .wc-block-components-notice-banner:has(.wc-forward) > svg {
  align-self: center;
}
#page
  :is(
    .woocommerce-message,
    .woocommerce-error,
    .woocommerce-info,
    .wc-block-components-notice-banner
  )
  a:not(.button):not(.wc-forward) {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Compact secondary actions. Native WC blocks and Storefront force some properties. */
#page
  :is(
    .woocommerce-message,
    .woocommerce-error,
    .woocommerce-info,
    .wc-block-components-notice-banner
  )
  :is(.button, .wc-forward) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-8);
  float: none;
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  min-height: var(--action-target-min);
  margin: 0;
  padding: var(--spacing-8) var(--spacing-16) !important;
  border: 1px solid currentColor;
  border-left-color: currentColor !important;
  border-radius: var(--radius-16);
  background: transparent !important;
  color: var(--ov-notice-ink) !important;
  box-shadow: none;
  font-family: var(--font-ui);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-small);
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  opacity: 1;
  transition:
    background-color var(--transition-interactive),
    color var(--transition-interactive),
    border-color var(--transition-interactive);
}
#page
  :is(
    .woocommerce-message,
    .woocommerce-error,
    .woocommerce-info,
    .wc-block-components-notice-banner
  )
  :is(.button, .wc-forward)::after {
  margin: 0;
  flex-shrink: 0;
}
/* Replace only Storefront's forward arrows, preserving other action icons. */
#page
  :is(
    .woocommerce-message,
    .woocommerce-error,
    .woocommerce-info,
    .wc-block-components-notice-banner
  )
  :is(.wc-forward, .woocommerce-Button--next)::after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 14px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: url("../icons/arrow-right.svg") center / contain no-repeat;
  mask: url("../icons/arrow-right.svg") center / contain no-repeat;
}
#page :is(.woocommerce-message, .woocommerce-info) > .button {
  float: inline-end;
  margin-block: calc((var(--line-height-body) - var(--action-target-min)) / 2);
  margin-inline-start: var(--spacing-16);
}
#page .wc-block-components-notice-banner__content > .wc-forward {
  float: inline-end;
  margin-block: calc((var(--line-height-body) - var(--action-target-min)) / 2);
  margin-inline-start: var(--spacing-16);
}
#page .wc-block-components-notice-banner__content:has(> .wc-forward) {
  padding-block: calc((var(--action-target-min) - var(--line-height-body)) / 2);
}
@media (hover: hover) {
  #page
    :is(
      .woocommerce-message,
      .woocommerce-error,
      .woocommerce-info,
      .wc-block-components-notice-banner
    )
    :is(.button, .wc-forward):hover {
    background: var(--color-text-primary) !important;
    border-color: var(--color-text-primary);
    border-left-color: var(--color-text-primary) !important;
    color: var(--color-text-inverse) !important;
    opacity: 1;
  }
}
#page
  :is(
    .woocommerce-message,
    .woocommerce-error,
    .woocommerce-info,
    .wc-block-components-notice-banner
  )
  :is(.button, .wc-forward):focus-visible {
  outline: var(--focus-width) solid var(--color-text-primary);
  outline-offset: 2px;
}
/* Preserve the block dismiss control; enlarge only its touch target. */
#page .wc-block-components-notice-banner > .wc-block-components-button {
  flex-basis: var(--action-target-min);
  width: var(--action-target-min) !important;
  height: var(--action-target-min) !important;
  margin: 0 0 0 auto !important;
  color: var(--ov-notice-ink) !important;
}
@media (max-width: 767px) {
  #page .wc-block-components-notice-banner__content:has(> .wc-forward) {
    padding-block: 0;
  }
  #page :is(.woocommerce-message, .woocommerce-info) > .button,
  #page .wc-block-components-notice-banner__content > .wc-forward {
    display: flex;
    float: none;
    width: fit-content;
    margin: var(--spacing-8) 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  #page
    :is(
      .woocommerce-message,
      .woocommerce-error,
      .woocommerce-info,
      .wc-block-components-notice-banner
    )
    :is(.button, .wc-forward) {
    transition: none;
  }
}
@media (forced-colors: active) {
  #page
    :is(
      .woocommerce-message,
      .woocommerce-error,
      .woocommerce-info,
      .wc-block-components-notice-banner
    ) {
    border: 1px solid CanvasText;
  }
  #page .wc-block-components-notice-banner > svg {
    fill: CanvasText;
  }
  #page
    :is(
      .woocommerce-message,
      .woocommerce-error,
      .woocommerce-info,
      .wc-block-components-notice-banner
    )
    :is(.wc-forward, .woocommerce-Button--next)::after {
    forced-color-adjust: none;
    background-color: ButtonText;
  }
}