/*
 * Add-to-cart buttons styled to match the homepage CTA button
 * ("Parduotuvė"): purple->pink gradient, pill shape, white text.
 * Targets WooCommerce's own `.add_to_cart_button` / `.single_add_to_cart_button`
 * classes directly so it covers every render context: the shop archive grid,
 * a single product page, and Elementor's "Loop Grid" widget (used for
 * "Panašūs produktai" / related products).
 *
 * No padding/font-size overrides here on purpose — each context sizes its
 * own button differently, and changing that made the button look
 * inconsistent and nudged surrounding content. Only color/shape change.
 *
 * Hover does NOT scale/grow or glow here: the homepage button has room to
 * grow into (large standalone CTA, 40px margin around it), but these
 * buttons sit tight against price text and card edges in a grid. Both
 * scale(1.1) and a box-shadow halo visually spill outside the button's
 * own box and read as the button (or card) resizing. `filter: brightness`
 * only recolors pixels already inside the button's existing box — it
 * cannot extend past its edges, so nothing around it can ever shift.
 */
.add_to_cart_button,
.single_add_to_cart_button,
.added_to_cart {
	background: linear-gradient(313deg, #581953, #CD9BAB) !important;
	color: #FFFFFF !important;
	border: 2px solid #E3E3E3 !important;
	border-radius: 23px !important;
	transition-duration: .3s;
	transition-property: filter;
}

.add_to_cart_button:hover,
.single_add_to_cart_button:hover,
.added_to_cart:hover {
	filter: brightness(1.15);
}

/* The real cause of the button "growing" on hover: the site's global
 * ".elementor-kit-2035 a:hover" rule swaps EVERY link's font on hover
 * (Helvetica 22px -> Bellota 17px here). The add-to-cart control in the
 * loop-grid template is an `<a>`, not a `<button>`, so it's caught by that
 * rule too. It's `display:inline-block` with fixed padding, so changing
 * the font changes the rendered text width — which changes the button's
 * own width. Locking the font on hover to match its normal state removes
 * the real size change, not just an optical one. */
.add_to_cart_button:hover {
	font-family: "Helvetica", Sans-serif !important;
	font-size: 22px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	text-decoration: none !important;
}

/* WooCommerce injects a "View cart" link right after the button on a
 * successful add-to-cart, with no reserved space, which pushed the price
 * and surrounding content. Hiding it removes the shift entirely; the cart
 * icon in the header is still there to reach the cart. */
.added_to_cart.wc-forward {
	display: none !important;
}

/* The actual cause of the button "growing": while the add-to-cart AJAX
 * request is in flight, WooCommerce's own CSS adds a `.loading` class that
 * sets `padding-right: 2.618em` to make room for a spinner — that's a real
 * width change, not a visual effect, and it's what was stretching the
 * button and the card around it. Cancel it back to the button's normal
 * padding so nothing resizes during the add-to-cart click. */
.add_to_cart_button.loading,
.single_add_to_cart_button.loading,
.added_to_cart.loading {
	padding-right: 1em !important; /* WooCommerce's own base .button padding-right */
	opacity: 1 !important;
}

/* The grid/card buttons get 24px right padding from the rule above, so
 * their loading state needs to cancel back to that same value instead. */
.woocommerce ul.products li.product .button.loading,
.elementor-add-to-cart .add_to_cart_button.loading {
	padding-right: 24px !important;
}

/* The "product Loop Item #3487" template (used by both the shop archive
 * and "Panašūs produktai") sets its own explicit padding of 12px 40px on
 * this widget (element-7e95e9d) directly in the editor — 40px right, not
 * 24px — so its loading state has to cancel back to that value specifically,
 * or the button still resizes during the add-to-cart click on those pages. */
.elementor-element-7e95e9d .add_to_cart_button.loading,
.elementor-element-7e95e9d .button.loading {
	padding-right: 40px !important;
}