/* gerbs-notices.css — GLOBAL branded WooCommerce notice system, 2026-07-10
 * ─────────────────────────────────────────────────────────────────────────────
 * SINGLE SOURCE OF TRUTH for every WooCommerce notice on the front end.
 *
 * WHY THIS FILE EXISTS
 *   Notice styling used to be branded per-surface in four separate stylesheets
 *   (account-auth.css, account.css, checkout-v2.css, subscription-portal.css),
 *   each re-styling .woocommerce-message / -info / -error in its own scope. Any
 *   surface not explicitly covered fell through to the site default, and the
 *   four copies drifted (the subscription portal's confirmation banner rendered
 *   as a saturated solid-blue slab — the bug that prompted this file). This
 *   sheet brands ALL notice types once, site-wide, so every surface — current
 *   and future — inherits the correct look automatically. The four surface
 *   files now keep only their structural bits and defer here for colour.
 *
 * THE LOOK (Gerbs DS)
 *   Soft tinted card + a matching border + a readable dark ink of the same hue
 *   + a small status glyph. NOT a saturated full-colour fill. success=green,
 *   info=blue, error=red, warning=amber. All colours come from gerbs-tokens.css
 *   custom properties — no hardcoded hex in any colour declaration. (The status
 *   glyphs are inline-SVG data-URIs whose fills mirror the token values; a
 *   data-URI cannot read a CSS var(), so those hexes are baked to match.)
 *
 * WHY !important + (0,3,1) SPECIFICITY
 *   Two other sources paint notices and must be overridden:
 *   1. gerbs-skin.css (IHAF-served, injected LATE in the footer) sets
 *        body .woocommerce-notices-wrapper .woocommerce-message { background:#3C70F6 }   (0,2,1)
 *        body.woocommerce .woocommerce-info                     { background:#3C70F6 }   (0,2,1)
 *        body .woocommerce-notices-wrapper .woocommerce-message { padding:14px 8px!important } (0,2,1)
 *      Because the skin loads after this sheet, a specificity TIE loses to it —
 *      so the branded rules run at (0,3,1) (one element + two classes + one
 *      :not()), which strictly out-specifies the skin's base notice rules.
 *   2. Divi's critical inline CSS sets
 *        .woocommerce-message,-error,-info { color:#fff!important; padding:15px!important; font-size:18px!important } (0,1,0)
 *      !important beats non-important regardless of specificity, so colour /
 *      padding / font-size here also carry !important — otherwise the text
 *      renders white-on-tint and disappears.
 *
 * WHAT IS DELIBERATELY LEFT ALONE (do not remove the :not()s / do not raise spec)
 *   • .wc-amazon-payments-advanced-info — the Amazon Pay express banner ("Have
 *     an Amazon account?"). It carries the plain .woocommerce-info class but is a
 *     blue promo bar with white text, not a status notice. Excluded so its white
 *     text never lands on a light tint (the 2026-07-02 invisible-text bug).
 *   • .cart-empty.woocommerce-info — the empty-cart message. gerbs-skin styles it
 *     grey + centred at (0,4,1)!important; excluded so it stays as-is.
 *   • .woocommerce-form-coupon-toggle / -login-toggle .woocommerce-info — the
 *     "Have a coupon?" / "Returning customer?" clickable prompt bars. gerbs-skin
 *     styles these at (0,3,1)/(0,4,1)!important; our rules run at (0,3,1), so a
 *     tie (cart) loses to the later-loading skin and the checkout ones out-spec
 *     us — either way the toggles keep their intended bar treatment. They are
 *     interactive controls, not notices, so this is correct.
 *
 * Enqueued site-wide (front end) as handle `gerbs-notices`, depends on
 * `gerbs-tokens`. See Divi-child/functions.php.
 * ───────────────────────────────────────────────────────────────────────────── */

/* ── Shared frame for all three classic notice types ───────────────────────── */
body :is(.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notice):not(.wc-amazon-payments-advanced-info):not(.cart-empty) {
  list-style:          none !important;
  width:               auto;
  max-width:           var(--container-max, 1140px);
  margin:              0 auto var(--space-4, 16px);
  padding:             var(--space-4, 16px) var(--space-5, 20px) var(--space-4, 16px) 48px !important;
  background-repeat:   no-repeat;
  background-position: 18px center;
  border:              1px solid;      /* colour set per-type below */
  border-radius:       var(--radius-md, 10px);
  font-family:         var(--ff-body, 'Inter', system-ui, -apple-system, sans-serif);
  font-size:           var(--fs-14, 0.875rem) !important;
  line-height:         1.45 !important;
  text-align:          left;
  box-shadow:          none;
}

/* Notice body text: inherit the per-type ink set on the element below. The
   `color: inherit !important` on li/p/strong is what overrides gerbs-skin's
   `… .woocommerce-error *{ color:#e10000 }` descendant rule (up to (0,4,1) on
   checkout) — non-important, so any !important wins it — keeping error text on
   our ink instead of the skin's bright red. .button keeps its own colour (styled
   separately) because it is not one of these tags. */
body :is(.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notice):not(.wc-amazon-payments-advanced-info):not(.cart-empty) li,
body :is(.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notice):not(.wc-amazon-payments-advanced-info):not(.cart-empty) p,
body :is(.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notice):not(.wc-amazon-payments-advanced-info):not(.cart-empty) strong {
  margin-top:    0;
  margin-bottom: 0;
  color:         inherit !important;
}

/* WooCommerce core adds a clearfix via content:" ";display:table on BOTH
   ::before and ::after; left active it boxes the text into an anonymous table
   cell and shoves it hundreds of px right (see checkout-v2.css note). We supply
   our own glyph via background-image, so kill both pseudo-elements. */
body :is(.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notice):not(.wc-amazon-payments-advanced-info):not(.cart-empty)::before,
body :is(.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notice):not(.wc-amazon-payments-advanced-info):not(.cart-empty)::after {
  content: none !important;
  display: none !important;
}

/* ── SUCCESS (green) — .woocommerce-message ────────────────────────────────── */
body .woocommerce-message:not(.wc-amazon-payments-advanced-info):not(.cart-empty) {
  background-color: var(--gerbs-success-tint, #e6f4ea) !important;
  border-color:     var(--gerbs-success, #2f8a4a);
  color:            var(--gerbs-success-ink, #1e5c2a) !important;
  /* circle fill #2f8a4a mirrors --gerbs-success */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='9' fill='%232f8a4a'/%3E%3Cpath d='M8 12.5l2.5 2.5 5.5-6' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ── INFO (blue) — .woocommerce-info (+ legacy .woocommerce-notice) ─────────── */
body .woocommerce-info:not(.wc-amazon-payments-advanced-info):not(.cart-empty),
body .woocommerce-notice:not(.wc-amazon-payments-advanced-info):not(.cart-empty) {
  background-color: var(--gerbs-blue-tint, #eaf1ff) !important;
  border-color:     var(--gerbs-blue, #3C70F6);
  color:            var(--gerbs-info-ink, #1a3f8a) !important;
  /* circle fill #3C70F6 mirrors --gerbs-blue */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='9' fill='%233C70F6'/%3E%3Cpath d='M12 10.5v6' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='7.6' r='1.15' fill='%23ffffff'/%3E%3C/svg%3E");
}

/* ── ERROR (red) — .woocommerce-error ──────────────────────────────────────── */
body .woocommerce-error:not(.wc-amazon-payments-advanced-info):not(.cart-empty) {
  background-color: var(--gerbs-error-tint, #fdecea) !important;
  border-color:     var(--gerbs-error, #c0392b);
  color:            var(--gerbs-error-ink, #a62b1f) !important;
  /* circle fill #c0392b mirrors --gerbs-error */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='9' fill='%23c0392b'/%3E%3Cpath d='M12 7.25v5.5' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='16.1' r='1.15' fill='%23ffffff'/%3E%3C/svg%3E");
}

/* ── Links inside a notice — legible + clearly actionable on the tint ──────── */
body :is(.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notice):not(.wc-amazon-payments-advanced-info):not(.cart-empty) a {
  color:           inherit;
  text-decoration: underline;
  font-weight:     var(--fw-semibold, 600);
}
body :is(.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notice):not(.wc-amazon-payments-advanced-info):not(.cart-empty) a:hover {
  text-decoration: none;
}

/* Button inside a notice (e.g. WC's "Browse products" on an empty-list info):
   render as a readable ghost button on the tint rather than a saturated slab. */
body :is(.woocommerce-message, .woocommerce-info):not(.wc-amazon-payments-advanced-info):not(.cart-empty) .button {
  background:   var(--gerbs-white, #fff) !important;
  color:        var(--gerbs-ink, #111) !important;
  border:       1px solid var(--gerbs-ink-20, #d9d9d9) !important;
  border-radius: var(--radius-sm, 6px);
  text-decoration: none;
}
body :is(.woocommerce-message, .woocommerce-info):not(.wc-amazon-payments-advanced-info):not(.cart-empty) .button:hover {
  border-color: var(--gerbs-ink, #111) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BLOCK NOTICES — WooCommerce Blocks / Store API (Cart & Checkout blocks,
   Mini-Cart). Different class namespace than the classic notices above and NOT
   touched by gerbs-skin.css or Divi's critical CSS, so no specificity war —
   these run at natural specificity. Kept in the same visual family so a store
   that ever switches a surface to the block cart/checkout stays on-brand.
   Ref: .wc-block-components-notice-banner.is-{error,success,info,warning},
        .wc-block-store-notice.
   ═══════════════════════════════════════════════════════════════════════════ */
.wc-block-components-notice-banner {
  border:        1px solid;
  border-radius: var(--radius-md, 10px);
  background-color: var(--gerbs-blue-tint, #eaf1ff);
  border-color:  var(--gerbs-blue, #3C70F6);
  color:         var(--gerbs-info-ink, #1a3f8a);
  font-family:   var(--ff-body, 'Inter', system-ui, -apple-system, sans-serif);
  font-size:     var(--fs-14, 0.875rem);
}
.wc-block-components-notice-banner.is-success {
  background-color: var(--gerbs-success-tint, #e6f4ea);
  border-color:     var(--gerbs-success, #2f8a4a);
  color:            var(--gerbs-success-ink, #1e5c2a);
}
.wc-block-components-notice-banner.is-error {
  background-color: var(--gerbs-error-tint, #fdecea);
  border-color:     var(--gerbs-error, #c0392b);
  color:            var(--gerbs-error-ink, #a62b1f);
}
.wc-block-components-notice-banner.is-warning {
  background-color: var(--gerbs-warn-tint, #fdf3e6);
  border-color:     var(--gerbs-warn, #b05b00);
  color:            var(--gerbs-warn-ink, #8a4700);
}
.wc-block-components-notice-banner.is-info {
  background-color: var(--gerbs-blue-tint, #eaf1ff);
  border-color:     var(--gerbs-blue, #3C70F6);
  color:            var(--gerbs-info-ink, #1a3f8a);
}
/* Tint the SVG glyph WC blocks render inline to match the banner hue. */
.wc-block-components-notice-banner > svg {
  fill: currentColor;
}
.wc-block-components-notice-banner__content,
.wc-block-components-notice-banner a {
  color: inherit;
}

/* Store-wide notice bar (e.g. store-notice/demo-store banner) — soft info tint. */
.wc-block-store-notice,
.woocommerce-store-notice {
  background-color: var(--gerbs-blue-tint, #eaf1ff) !important;
  border:           1px solid var(--gerbs-blue, #3C70F6);
  border-radius:    var(--radius-md, 10px);
  color:            var(--gerbs-info-ink, #1a3f8a) !important;
  font-family:      var(--ff-body, 'Inter', system-ui, -apple-system, sans-serif);
}