/* Shop messages such as "added to your basket", on any page, in the Serene style. */
html body .woocommerce-message,
html body .woocommerce-info,
html body .woocommerce-error {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px 14px;
  margin: 0 0 28px;
  padding: 16px 20px;
  list-style: none;
  font-family: Inter, system-ui, sans-serif;
  font-size: .96rem;
  line-height: 1.5;
  color: #24302a;
  background: #fff;
  border: 0;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(36, 48, 42, .05), 0 16px 40px rgba(36, 48, 42, .08);
}
/* WooCommerce moves focus here so screen readers announce the message. That shouldn't draw a box round it. */
html body .woocommerce-message:focus,
html body .woocommerce-info:focus,
html body .woocommerce-error:focus { outline: 0; }

html body .woocommerce-message::before,
html body .woocommerce-info::before,
html body .woocommerce-error::before {
  position: static;
  flex: none;
  display: block;
  width: 26px;
  height: 26px;
  margin: 0;
  font-family: Inter, system-ui, sans-serif;
  font-size: .86rem;
  font-weight: 600;
  line-height: 26px;
  text-align: center;
  color: #3b5f45;
  background: #f1f4ef;
  border-radius: 50%;
}
html body .woocommerce-message::before { content: "\2713"; }
html body .woocommerce-info::before { content: "i"; }
html body .woocommerce-error::before { content: "!"; color: #8a3b2e; background: #f6ebe7; }
html body .woocommerce-message::after,
html body .woocommerce-info::after,
html body .woocommerce-error::after { display: none; }

html body .woocommerce-error li { grid-column: 2; margin: 0; padding: 0; }

html body .woocommerce-message a:not(.button),
html body .woocommerce-info a:not(.button),
html body .woocommerce-error a:not(.button) { color: #3b5f45; text-decoration: underline; text-underline-offset: 2px; }

html body .woocommerce-message a.button,
html body .woocommerce-info a.button,
html body .woocommerce-error a.button {
  order: 2;
  float: none;
  margin: 0;
  padding: 8px 22px;
  font-size: .92rem;
  font-weight: 500;
  line-height: 1.5;
  color: #fff;
  background: #3b5f45;
  border: 0;
  border-radius: 999px;
  text-decoration: none;
  transition: background .2s;
}
html body .woocommerce-message a.button:hover,
html body .woocommerce-info a.button:hover,
html body .woocommerce-error a.button:hover { color: #fff; background: #24302a; }
html body .woocommerce-message a.button:focus-visible,
html body .woocommerce-info a.button:focus-visible,
html body .woocommerce-error a.button:focus-visible { outline: 2px solid #3b5f45; outline-offset: 2px; }

/* In line with the course cards on the Courses page. */
.tmcb-notices { max-width: 980px; margin: 0 auto; text-align: left; }

@media (max-width: 480px) {
  html body .woocommerce-message a.button,
  html body .woocommerce-info a.button,
  html body .woocommerce-error a.button { grid-column: 1 / -1; margin-left: 0; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  html body .woocommerce-message a.button,
  html body .woocommerce-info a.button,
  html body .woocommerce-error a.button { transition: none; }
}