/* ==========================================================================
   RANCHO EL PALMAR - UNIFIED BUTTON SYSTEM
   File: assets/css/rep-buttons.css   (loaded by inc/button-styles.php)

   One source of truth for every button on the site: native, Gutenberg,
   WooCommerce, Elementor and Forminator - across all interaction states.

   HOW IT WORKS
   1. Brand tokens (--rep-btn-*) define the design.
   2. Those tokens are mapped onto Neve's own button variable API
      (--primarybtn*, --secondarybtn*, --btn*). Neve already routes every
      native + WooCommerce button through these, so one mapping covers
      most of the site without selector fights.
   3. Explicit rules below only fill the gaps Neve leaves:
      focus-visible, active, disabled, loading, and non-Neve button
      families (Elementor, Forminator).

   Do not add button CSS to Appearance > Additional CSS. Edit this file.
   ========================================================================== */

:root{

  /* ---------- Brand tokens ---------- */

  /* Primary - solid teal, the main call to action */
  --rep-btn-bg:#008489;
  --rep-btn-bg-hover:#006E46;
  --rep-btn-fg:#ffffff;
  --rep-btn-fg-hover:#ffffff;

  /* Secondary - white ghost with a light rule, fills teal on hover */
  --rep-btn2-bg:#ffffff;
  --rep-btn2-fg:#1C3750;
  --rep-btn2-border:#DFE6EA;
  --rep-btn2-bg-hover:#008489;
  --rep-btn2-fg-hover:#ffffff;
  --rep-btn2-border-hover:#008489;

  /* Disabled - a real muted colour, not a 50% opacity ghost */
  --rep-btn-off-bg:#C9D4DA;
  --rep-btn-off-fg:#5E6E76;

  /* ---------- Shape and type ---------- */
  --rep-btn-radius:50px;          /* pill - design system rule */
  --rep-btn-pad:14px 32px;
  --rep-btn-pad-2:12px 26px;
  --rep-btn-fs:15px;
  --rep-btn-fw:700;
  --rep-btn-lh:1.4;
  --rep-btn-ls:.4px;
  --rep-btn-tt:none;

  /* ---------- Depth and motion ---------- */
  --rep-btn-shadow:0 4px 14px rgba(0,132,137,.28);
  --rep-btn-shadow-hover:0 8px 22px rgba(0,110,70,.30);
  --rep-btn-ease:.2s ease;

  /* Two-layer focus ring: white inner + teal outer, so it stays visible
     on light page backgrounds AND on dark/teal section backgrounds. */
  --rep-btn-ring:0 0 0 3px #ffffff,0 0 0 6px #008489;


  /* ==========================================================
     MAP ONTO NEVE'S BUTTON API
     Neve routes these through: button, input[type=submit],
     .btn, .button, .wp-block-button__link, and every WooCommerce
     button (a.button / button.button / input.button / .button.alt /
     .checkout-button / #respond input#submit).
     ========================================================== */

  --primarybtnbg:var(--rep-btn-bg);
  --primarybtncolor:var(--rep-btn-fg);
  --primarybtnhoverbg:var(--rep-btn-bg-hover);
  --primarybtnhovercolor:var(--rep-btn-fg-hover);
  --primarybtnborderradius:var(--rep-btn-radius);
  --primarybtnborderwidth:0;
  --primarybtnpadding:var(--rep-btn-pad);
  --primarybtnshadow:var(--rep-btn-shadow);
  --primarybtnhovershadow:var(--rep-btn-shadow-hover);

  --secondarybtnbg:var(--rep-btn2-bg);
  --secondarybtncolor:var(--rep-btn2-fg);
  --secondarybtnhoverbg:var(--rep-btn2-bg-hover);
  --secondarybtnhovercolor:var(--rep-btn2-fg-hover);
  --secondarybtnborderradius:var(--rep-btn-radius);
  --secondarybtnborderwidth:1.5px;
  --secondarybtnpadding:var(--rep-btn-pad-2);
  --secondarybtnshadow:none;
  --secondarybtnhovershadow:none;

  --btnfs:var(--rep-btn-fs);
  --btnfontweight:var(--rep-btn-fw);
  --btnlineheight:var(--rep-btn-lh);
  --btnletterspacing:var(--rep-btn-ls);
  --btntexttransform:var(--rep-btn-tt);
  --btnpadding:var(--rep-btn-pad);
}

/* ==========================================================================
   1. SHARED INTERACTION LAYER
   Neve ships no transition, no :focus, no :active and a broken :disabled.
   Everything below fills those gaps for every button family at once.
   ========================================================================== */

.btn,
.button,
a.button, button.button, input.button,
input[type=submit], input[type=button], input[type=reset],
.wp-block-button__link,
.wp-element-button,
.woocommerce #respond input#submit,
.wc-proceed-to-checkout a.checkout-button,
#place_order,
.single_add_to_cart_button,
.forminator-button,
.elementor-button{
  transition:background var(--rep-btn-ease),
             background-color var(--rep-btn-ease),
             color var(--rep-btn-ease),
             border-color var(--rep-btn-ease),
             box-shadow var(--rep-btn-ease),
             transform var(--rep-btn-ease),
             filter var(--rep-btn-ease);
  text-decoration:none;
  text-align:center;
}


/* ==========================================================================
   2. FOCUS - keyboard visibility (WCAG 2.4.7)
   Neve defines zero focus styling. :focus-visible means mouse users never
   see the ring, keyboard users always do.
   !important is required to beat Neve's box-shadow: var(--primarybtnshadow).
   ========================================================================== */

.btn:focus-visible,
.button:focus-visible,
a.button:focus-visible, button.button:focus-visible, input.button:focus-visible,
input[type=submit]:focus-visible, input[type=button]:focus-visible, input[type=reset]:focus-visible,
.wp-block-button__link:focus-visible,
.wp-element-button:focus-visible,
.woocommerce #respond input#submit:focus-visible,
.wc-proceed-to-checkout a.checkout-button:focus-visible,
#place_order:focus-visible,
.single_add_to_cart_button:focus-visible,
.forminator-button:focus-visible,
.elementor-button:focus-visible{
  outline:none;
  box-shadow:var(--rep-btn-ring) !important;
}

/* Windows High Contrast / forced-colors: box-shadow is dropped, so give
   these users a real outline instead. */
@media (forced-colors:active){
  .button:focus-visible,
  .btn:focus-visible,
  .elementor-button:focus-visible,
  .forminator-button:focus-visible{ outline:3px solid Highlight; outline-offset:2px; }
}


/* ==========================================================================
   3. ACTIVE - press feedback
   brightness() darkens whatever the button's own colour is, so one rule
   gives a correct pressed state for both primary and secondary.
   ========================================================================== */

.btn:active,
.button:active,
a.button:active, button.button:active, input.button:active,
input[type=submit]:active, input[type=button]:active, input[type=reset]:active,
.wp-block-button__link:active,
.wp-element-button:active,
.woocommerce #respond input#submit:active,
.wc-proceed-to-checkout a.checkout-button:active,
#place_order:active,
.single_add_to_cart_button:active,
.forminator-button:active,
.elementor-button:active{
  transform:translateY(1px);
  filter:brightness(.92);
}


/* ==========================================================================
   4. DISABLED
   Fixes a real Neve bug: its WooCommerce CSS applies --primarybtnhoverbg to
   :disabled:hover, so disabled buttons currently light up as if clickable.
   We also replace WooCommerce's opacity:.5 with a proper muted colour, which
   keeps text contrast readable instead of washing it out.
   ========================================================================== */

.btn:disabled, .btn[disabled], .btn.disabled,
.button:disabled, .button[disabled], .button.disabled, .button[aria-disabled="true"],
button.button:disabled, button.button[disabled], button.button.disabled,
a.button.disabled, a.button[aria-disabled="true"],
input.button:disabled, input.button[disabled], input.button.disabled,
input[type=submit]:disabled, input[type=button]:disabled, input[type=reset]:disabled,
.wp-block-button__link:disabled, .wp-block-button__link.disabled,
.woocommerce #respond input#submit:disabled, .woocommerce #respond input#submit.disabled,
.single_add_to_cart_button:disabled, .single_add_to_cart_button.disabled,
.wc-proceed-to-checkout a.checkout-button.disabled,
#place_order:disabled, #place_order.disabled,
.forminator-button:disabled, .forminator-button[disabled],
.elementor-button:disabled, .elementor-button.disabled,
/* and the same set again, on hover, to kill Neve's hover-on-disabled */
.btn:disabled:hover, .btn[disabled]:hover, .btn.disabled:hover,
.button:disabled:hover, .button[disabled]:hover, .button.disabled:hover, .button[aria-disabled="true"]:hover,
button.button:disabled:hover, button.button[disabled]:hover, button.button.disabled:hover,
a.button.disabled:hover, a.button[aria-disabled="true"]:hover,
input.button:disabled:hover, input.button[disabled]:hover, input.button.disabled:hover,
input[type=submit]:disabled:hover, input[type=button]:disabled:hover, input[type=reset]:disabled:hover,
.wp-block-button__link:disabled:hover, .wp-block-button__link.disabled:hover,
.woocommerce #respond input#submit:disabled:hover, .woocommerce #respond input#submit.disabled:hover,
.single_add_to_cart_button:disabled:hover, .single_add_to_cart_button.disabled:hover,
.wc-proceed-to-checkout a.checkout-button.disabled:hover,
#place_order:disabled:hover, #place_order.disabled:hover,
.forminator-button:disabled:hover, .forminator-button[disabled]:hover,
.elementor-button:disabled:hover, .elementor-button.disabled:hover{
  background:var(--rep-btn-off-bg) !important;
  background-color:var(--rep-btn-off-bg) !important;
  color:var(--rep-btn-off-fg) !important;
  border-color:var(--rep-btn-off-bg) !important;
  box-shadow:none !important;
  opacity:1 !important;
  cursor:not-allowed !important;
  transform:none !important;
  filter:none !important;
}


/* ==========================================================================
   5. LOADING / ADDED - WooCommerce AJAX states
   Keep the spinner legible instead of fading the whole control to 25%.
   ========================================================================== */

.woocommerce a.button.loading,
.woocommerce button.button.loading,
.woocommerce input.button.loading,
.woocommerce .button.loading{
  opacity:1 !important;
  cursor:progress;
  filter:brightness(.94);
}
.woocommerce .button.loading::after{ opacity:.9; }

/* ==========================================================================
   6. SECONDARY BORDER COLOUR
   Neve hardcodes border-color:currentColor on secondary buttons, which would
   draw a navy rule. We want the soft grey from the design system.
   These are the selectors Neve itself routes to --secondarybtn*.
   ========================================================================== */

.button.button-secondary,
.is-style-secondary .wp-block-button__link,
.button.button-secondary.more-details,
a.added_to_cart,
.checkout_coupon button.button,
.woocommerce .price_slider_amount button.button,
.woocommerce table.cart td.actions .input-text#coupon_code + .button,
.woocommerce-mini-cart__buttons.buttons a.button.wc-forward:not(.checkout){
  border-color:var(--rep-btn2-border) !important;
}
.button.button-secondary:hover,
.is-style-secondary .wp-block-button__link:hover,
.button.button-secondary.more-details:hover,
a.added_to_cart:hover,
.checkout_coupon button.button:hover,
.woocommerce .price_slider_amount button.button:hover,
.woocommerce table.cart td.actions .input-text#coupon_code + .button:hover,
.woocommerce-mini-cart__buttons.buttons a.button.wc-forward:not(.checkout):hover{
  border-color:var(--rep-btn2-border-hover) !important;
}


/* ==========================================================================
   7. PRODUCT PAGE - primary add-to-cart
   Slightly larger than a default primary, with the design-system chevron.
   Padding is set through Neve's own variable rather than an !important
   override, so it stays editable from one place.
   ========================================================================== */

.single-product form.cart .single_add_to_cart_button,
.single-product form.cart button.single_add_to_cart_button{
  --primarybtnpadding:16px 38px;
  text-transform:uppercase;
  letter-spacing:.8px;
}
.single-product form.cart .single_add_to_cart_button::after{
  content:' \203a';
  font-weight:700;
}


/* ==========================================================================
   8. SHOP LOOP / RELATED / UPSELL CARDS - secondary ghost
   Specificity here already beats Neve's .woocommerce a.button (0,2,1),
   so no !important is needed.
   ========================================================================== */

:is(.woocommerce-shop,.post-type-archive-product,.tax-product_cat) li.product .nv-product-content a.button,
.single-product .products a.button,
.single-product .products a.add_to_cart_button,
.related.products li.product a.button,
.upsells.products li.product a.button{
  margin:0;
  background:var(--rep-btn2-bg);
  background-color:var(--rep-btn2-bg);
  color:var(--rep-btn2-fg);
  border:1.5px solid var(--rep-btn2-border);
  border-radius:var(--rep-btn-radius);
  padding:var(--rep-btn-pad-2);
  font-weight:var(--rep-btn-fw);
  font-size:14px;
  text-transform:none;
  letter-spacing:0;
  box-shadow:none;
}
:is(.woocommerce-shop,.post-type-archive-product,.tax-product_cat) li.product .nv-product-content a.button:hover,
.single-product .products a.button:hover,
.single-product .products a.add_to_cart_button:hover,
.related.products li.product a.button:hover,
.upsells.products li.product a.button:hover{
  background:var(--rep-btn2-bg-hover);
  background-color:var(--rep-btn2-bg-hover);
  color:var(--rep-btn2-fg-hover);
  border-color:var(--rep-btn2-border-hover);
}


/* ==========================================================================
   9. ELEMENTOR - base styling only
   Deliberately plain (0,1,0) specificity and no !important, so any button
   styled per-widget in the Elementor editor keeps its own design. This only
   catches buttons that were never styled, so they match the rest of the site.
   ========================================================================== */

.elementor-button{
  background-color:var(--rep-btn-bg);
  color:var(--rep-btn-fg);
  border-radius:var(--rep-btn-radius);
  padding:var(--rep-btn-pad);
  font-weight:var(--rep-btn-fw);
  font-size:var(--rep-btn-fs);
  line-height:var(--rep-btn-lh);
  letter-spacing:var(--rep-btn-ls);
  text-transform:var(--rep-btn-tt);
}
.elementor-button:hover,
.elementor-button:focus{
  background-color:var(--rep-btn-bg-hover);
  color:var(--rep-btn-fg-hover);
}


/* ==========================================================================
   10. FORMINATOR - contact / booking forms
   Forminator ships very specific design-preset selectors, so !important is
   the only practical way in here.
   ========================================================================== */

.forminator-button,
.forminator-button-submit,
.forminator-ui .forminator-button{
  background:var(--rep-btn-bg) !important;
  background-color:var(--rep-btn-bg) !important;
  color:var(--rep-btn-fg) !important;
  border:0 !important;
  border-radius:var(--rep-btn-radius) !important;
  padding:var(--rep-btn-pad) !important;
  font-weight:var(--rep-btn-fw) !important;
  font-size:var(--rep-btn-fs) !important;
  letter-spacing:var(--rep-btn-ls) !important;
  text-transform:var(--rep-btn-tt) !important;
  box-shadow:var(--rep-btn-shadow) !important;
}
.forminator-button:hover,
.forminator-button-submit:hover,
.forminator-ui .forminator-button:hover{
  background:var(--rep-btn-bg-hover) !important;
  background-color:var(--rep-btn-bg-hover) !important;
  color:var(--rep-btn-fg-hover) !important;
  box-shadow:var(--rep-btn-shadow-hover) !important;
}


/* ==========================================================================
   11. RESPONSIVE
   Tighter padding on small screens. Vertical size stays above the 44px
   minimum touch target at every breakpoint.
   ========================================================================== */

@media (max-width:600px){
  :root{
    --rep-btn-pad:13px 26px;
    --rep-btn-pad-2:11px 22px;
    --rep-btn-fs:14px;
  }
  .single-product form.cart .single_add_to_cart_button,
  .single-product form.cart button.single_add_to_cart_button{
    --primarybtnpadding:15px 28px;
    width:100%;
  }
}


/* ==========================================================================
   12. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion:reduce){
  .btn,.button,.wp-block-button__link,.wp-element-button,
  .single_add_to_cart_button,.forminator-button,.elementor-button,
  input[type=submit],input[type=button],input[type=reset]{
    transition:none !important;
  }
  .btn:active,.button:active,.wp-block-button__link:active,
  .single_add_to_cart_button:active,.forminator-button:active,
  .elementor-button:active{
    transform:none !important;
  }
}

/* end Rancho El Palmar unified button system */

/* ==========================================================================
   13. WOOCOMMERCE BLOCKS - Cart & Checkout block buttons

   The Cart (page 1408) and Checkout (page 1409) pages use the BLOCK versions
   of WooCommerce, not the classic shortcodes. Block buttons live in a totally
   separate class namespace (.wc-block-components-button) that Neve does NOT
   route through its variable API, so sections 1-12 never reached them. That
   is why "Realizar el pedido" and "Proceder al pago" stayed dark grey.

   Woo's own block CSS is heavily !important and is gated on
   body:not(.woocommerce-block-theme-has-button-styles) - a class this site
   does NOT have, so Woo's dark defaults were winning. !important here is
   required, not lazy.

   The :not(...) guards keep the tiny circular X dismiss button inside notice
   banners from being turned into a giant teal pill.
   ========================================================================== */

.wc-block-components-button:not(.is-link):not(.wc-block-components-notice-banner__dismiss),
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.wc-block-mini-cart__footer-actions .wc-block-components-button,
.wp-block-woocommerce-cart .wc-block-components-button:not(.is-link),
.wp-block-woocommerce-checkout .wc-block-components-button:not(.is-link){
  background:var(--rep-btn-bg) !important;
  background-color:var(--rep-btn-bg) !important;
  color:var(--rep-btn-fg) !important;
  border:0 !important;
  border-radius:var(--rep-btn-radius) !important;
  font-weight:var(--rep-btn-fw) !important;
  font-size:var(--rep-btn-fs) !important;
  letter-spacing:var(--rep-btn-ls) !important;
  text-transform:var(--rep-btn-tt) !important;
  box-shadow:var(--rep-btn-shadow) !important;
  opacity:1 !important;
  transition:background-color var(--rep-btn-ease),color var(--rep-btn-ease),
             box-shadow var(--rep-btn-ease),transform var(--rep-btn-ease),
             filter var(--rep-btn-ease) !important;
}

/* Inner text span inherits the blue link colour otherwise */
.wc-block-components-button:not(.is-link) .wc-block-components-button__text,
.wc-block-cart__submit-button .wc-block-components-button__text,
.wc-block-components-checkout-place-order-button .wc-block-components-button__text{
  color:var(--rep-btn-fg) !important;
  opacity:1 !important;
}
.wc-block-components-button:not(.is-link) .wc-block-components-button__text>svg{
  fill:var(--rep-btn-fg) !important;
}

/* hover */
.wc-block-components-button:not(.is-link):not(.wc-block-components-notice-banner__dismiss):hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover,
.wc-block-mini-cart__footer-actions .wc-block-components-button:hover{
  background:var(--rep-btn-bg-hover) !important;
  background-color:var(--rep-btn-bg-hover) !important;
  color:var(--rep-btn-fg-hover) !important;
  box-shadow:var(--rep-btn-shadow-hover) !important;
}

/* focus - replaces Woo's blue #0675c4 ring with the Rancho ring */
.wc-block-components-button:not(.is-link):not(.wc-block-components-notice-banner__dismiss):focus-visible,
.wc-block-cart__submit-button:focus-visible,
.wc-block-components-checkout-place-order-button:focus-visible{
  outline:3px solid transparent !important;
  box-shadow:var(--rep-btn-ring) !important;
}

/* active */
.wc-block-components-button:not(.is-link):not(.wc-block-components-notice-banner__dismiss):active,
.wc-block-cart__submit-button:active,
.wc-block-components-checkout-place-order-button:active{
  transform:translateY(1px);
  filter:brightness(.92);
}

/* disabled - Woo fades only the inner text span to .5, which reads as broken */
.wc-block-components-button:not(.is-link):disabled,
.wc-block-components-button:not(.is-link)[disabled],
.wc-block-cart__submit-button:disabled,
.wc-block-components-checkout-place-order-button:disabled,
.wc-block-components-button:not(.is-link):disabled:hover,
.wc-block-cart__submit-button:disabled:hover,
.wc-block-components-checkout-place-order-button:disabled:hover{
  background:var(--rep-btn-off-bg) !important;
  background-color:var(--rep-btn-off-bg) !important;
  color:var(--rep-btn-off-fg) !important;
  box-shadow:none !important;
  cursor:not-allowed !important;
  transform:none !important;
  filter:none !important;
}
.wc-block-components-button:not(.is-link):disabled .wc-block-components-button__text,
.wc-block-cart__submit-button:disabled .wc-block-components-button__text,
.wc-block-components-checkout-place-order-button:disabled .wc-block-components-button__text{
  color:var(--rep-btn-off-fg) !important;
  opacity:1 !important;
}

/* Secondary block buttons: apply-coupon and outline style */
.wc-block-components-totals-coupon__button,
.wc-block-components-button.is-style-outline:not(.is-link),
.wc-block-components-button.outlined:not(.is-link){
  background:var(--rep-btn2-bg) !important;
  background-color:var(--rep-btn2-bg) !important;
  color:var(--rep-btn2-fg) !important;
  box-shadow:inset 0 0 0 1.5px var(--rep-btn2-border) !important;
}
.wc-block-components-totals-coupon__button .wc-block-components-button__text,
.wc-block-components-button.is-style-outline:not(.is-link) .wc-block-components-button__text{
  color:var(--rep-btn2-fg) !important;
}
.wc-block-components-totals-coupon__button:hover,
.wc-block-components-button.is-style-outline:not(.is-link):hover,
.wc-block-components-button.outlined:not(.is-link):hover{
  background:var(--rep-btn2-bg-hover) !important;
  background-color:var(--rep-btn2-bg-hover) !important;
  color:var(--rep-btn2-fg-hover) !important;
  box-shadow:inset 0 0 0 1.5px var(--rep-btn2-border-hover) !important;
}
.wc-block-components-totals-coupon__button:hover .wc-block-components-button__text,
.wc-block-components-button.is-style-outline:not(.is-link):hover .wc-block-components-button__text{
  color:var(--rep-btn2-fg-hover) !important;
}

/* Keep the notice-banner dismiss X small and quiet - undo the pill above */
.wc-block-components-notice-banner>.wc-block-components-button{
  background:transparent none !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  width:16px !important;
  height:16px !important;
  min-width:0 !important;
  min-height:auto !important;
}

/* ==========================================================================
   14. NOTIFICATIONS / NOTICES

   Neve was painting WooCommerce notices with its own unrelated palette:
   --nv-c-1 #9463ae (purple) for messages, --nv-primary-accent #2f5aae (blue)
   for info, --nv-c-2 #be574b for errors. None of those are Rancho colours.

   Success and info now use brand teal with white text. Errors stay red on
   purpose - colour is the fastest signal that something went wrong, and a
   teal error would read as a success at a glance. Change --rep-notice-error-bg
   below if you want them teal too.

   Covers BOTH notice systems: classic (.woocommerce-message / -info / -error)
   and blocks (.wc-block-components-notice-banner.is-success / .is-info).
   ========================================================================== */

:root{
  --rep-notice-bg:#008489;        /* success + info */
  --rep-notice-fg:#ffffff;
  --rep-notice-error-bg:#C0392B;  /* errors stay red */
  --rep-notice-radius:12px;
}

/* ---- Per-type context colour, so the inner button can match ---- */
.woocommerce-message,
.woocommerce-info,
.wc-block-components-notice-banner.is-success,
.wc-block-components-notice-banner.is-info{ --rep-notice-current:var(--rep-notice-bg); }

.woocommerce-error,
.wc-block-components-notice-banner.is-error{ --rep-notice-current:var(--rep-notice-error-bg); }


/* ---- Classic notices ---- */
.woocommerce .woocommerce-message, .woocommerce-page .woocommerce-message,
.woocommerce .woocommerce-info,    .woocommerce-page .woocommerce-info,
.woocommerce-message, .woocommerce-info{
  background:var(--rep-notice-bg) !important;
  border:0 !important;
  border-radius:var(--rep-notice-radius) !important;
  color:var(--rep-notice-fg) !important;
}
.woocommerce .woocommerce-error, .woocommerce-page .woocommerce-error,
.woocommerce-error{
  background:var(--rep-notice-error-bg) !important;
  border:0 !important;
  border-radius:var(--rep-notice-radius) !important;
  color:var(--rep-notice-fg) !important;
}
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before,
.woocommerce-message a:not(.button), .woocommerce-info a:not(.button), .woocommerce-error a:not(.button){
  color:var(--rep-notice-fg) !important;
}

/* Button inside a notice: white outline, inverts on hover.
   Overrides the primary pill from section 1 - a teal button on a teal bar
   would be invisible. */
.woocommerce-message .button, .woocommerce-message a.button,
.woocommerce-info .button,    .woocommerce-info a.button,
.woocommerce-error .button,   .woocommerce-error a.button{
  background:transparent !important;
  background-color:transparent !important;
  color:var(--rep-notice-fg) !important;
  border:1.5px solid rgba(255,255,255,.8) !important;
  border-radius:var(--rep-btn-radius) !important;
  box-shadow:none !important;
  padding:10px 22px !important;
  font-size:14px !important;
  font-weight:var(--rep-btn-fw) !important;
}
.woocommerce-message .button:hover, .woocommerce-message a.button:hover,
.woocommerce-info .button:hover,    .woocommerce-info a.button:hover,
.woocommerce-error .button:hover,   .woocommerce-error a.button:hover{
  background:var(--rep-notice-fg) !important;
  background-color:var(--rep-notice-fg) !important;
  color:var(--rep-notice-current) !important;
  border-color:var(--rep-notice-fg) !important;
}
.woocommerce-message .button:focus-visible,
.woocommerce-info .button:focus-visible,
.woocommerce-error .button:focus-visible{
  box-shadow:0 0 0 3px var(--rep-notice-current),0 0 0 6px #fff !important;
}


/* ---- Block notices (Cart / Checkout blocks) ---- */
.wc-block-components-notice-banner.is-success,
.wc-block-components-notice-banner.is-info{
  background-color:var(--rep-notice-bg) !important;
  border-color:var(--rep-notice-bg) !important;
  border-radius:var(--rep-notice-radius) !important;
  color:var(--rep-notice-fg) !important;
}
.wc-block-components-notice-banner.is-error{
  background-color:var(--rep-notice-error-bg) !important;
  border-color:var(--rep-notice-error-bg) !important;
  border-radius:var(--rep-notice-radius) !important;
  color:var(--rep-notice-fg) !important;
}
/* icon disc inverts: white circle, coloured glyph */
.wc-block-components-notice-banner.is-success>svg,
.wc-block-components-notice-banner.is-info>svg,
.wc-block-components-notice-banner.is-error>svg{
  background-color:var(--rep-notice-fg) !important;
  fill:var(--rep-notice-current) !important;
}
.wc-block-components-notice-banner.is-success .wc-block-components-notice-banner__content,
.wc-block-components-notice-banner.is-info .wc-block-components-notice-banner__content,
.wc-block-components-notice-banner.is-error .wc-block-components-notice-banner__content,
.wc-block-components-notice-banner.is-success .wc-forward,
.wc-block-components-notice-banner.is-info .wc-forward,
.wc-block-components-notice-banner.is-error .wc-forward,
.wc-block-components-notice-banner.is-success>.wc-block-components-button,
.wc-block-components-notice-banner.is-info>.wc-block-components-button,
.wc-block-components-notice-banner.is-error>.wc-block-components-button{
  color:var(--rep-notice-fg) !important;
  opacity:1 !important;
}


/* ---- Store-wide notice bar ---- */
.woocommerce-store-notice, p.demo_store{
  background:var(--rep-notice-bg) !important;
  color:var(--rep-notice-fg) !important;
}
.woocommerce-store-notice a, p.demo_store a{ color:var(--rep-notice-fg) !important; }

/* end Rancho El Palmar notices */