/* Primary button (.us-btn-style_1) — gradient border corner fix.
 *
 * Impreza draws the border on .w-btn::before using `border-image` with the
 * system gradient (var(--btn-border-color)). `border-image` ignores
 * border-radius, so it renders a square: the white stops at 0%/100% of the
 * gradient poke out as visible corners around the rounded pill.
 *
 * Fix: paint the same system gradient as a background on ::before and mask
 * out the inner box. mask respects border-radius, so the gradient border
 * follows the rounded corners — no square corners. The button fill
 * (var(--btn-background)) is left untouched.
 *
 * The gradient itself stays var(--btn-border-color): per the Figma component
 * (Library, "Stroke/white gradient") the border is meant to be bright white
 * at the left/right ends and fade to near-nothing at the middle — it is a
 * horizontal end-glow, not a uniform ring.
 *
 * Ring thickness = Impreza's --btn-border-width, so it stays editable from
 * the theme (Theme Options / element: Button style → Border width).
 *
 * I bottoni WooCommerce nella grid prodotti (.pmc-product-card a.button:
 * "Add to cart" e "Read more") ricevono da Impreza le stesse --btn-* e lo
 * stesso border-image bianco, ma NON hanno la classe .us-btn-style_1: senza
 * questo fix mostrano il bordo quadrato (angoli bianchi che sporgono dal
 * pill arrotondato). Vanno quindi inclusi negli stessi selettori.
 *
 * Stesso caso per il bottone "Add to cart" della single product
 * (.single_add_to_cart_button): stesso border-image, nessuna .us-btn-style_1. */
.us-btn-style_1::before,
.pmc-product-card a.button::before,
.single_add_to_cart_button::before {
  border: 0 !important;
  border-radius: inherit;
  padding: var(--btn-border-width, 1px); /* editable from Impreza */
  background: var(--btn-border-color) !important;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0) !important;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask-composite: exclude !important;
  pointer-events: none;
}

/* Hover: Impreza switches the border to --btn-hover-border-color (solid
 * white in Theme Options). The base rule above kills the theme's own hover
 * border, so mirror it here on the masked ring. */
.us-btn-style_1:hover::before,
.pmc-product-card a.button:hover::before,
.single_add_to_cart_button:hover::before {
  background: var(--btn-hover-border-color, #fff) !important;
}