/**
 * JN Add to Cart Icon — base defaults.
 *
 * ARCHITECTURE: for a normal purchasable product, the real click target
 * is WooCommerce's own native .add_to_cart_button (rendered untouched by
 * woocommerce_template_loop_add_to_cart() — see the widget class). It is
 * stretched to fill the wrapper and made invisible (opacity:0, text
 * hidden); a separate, purely decorative icon (.jnw-atc-overlay-icon,
 * pointer-events:none) sits visually on top of it. This way
 * wc-add-to-cart.js's own click handling, AJAX, loading/added states,
 * and the added_to_cart event are 100% native and untouched.
 *
 * Fallback cases (variable/pre-order/out-of-stock products routed to
 * redirect/disabled instead) render their OWN real, clickable element
 * (.jnw-atc-fallback) — no native button involved there, so no overlay
 * trick is needed for those.
 *
 * POSITIONING (v3.2.18 rework — matches how Elementor's own Icon widget
 * positions itself): "Overlay on image" placement is applied directly to
 * .elementor-widget-jnw-add-to-cart-icon — Elementor's own root wrapper
 * element for every instance of this widget — via the 'placement' and
 * 'position' controls' prefix_class in the widget class, NOT to our own
 * inner .jnw-atc-icon-wrap div. Confirmed via live DOM that there is no
 * extra div between that root wrapper and its real parent Container, so
 * anchoring position there (exactly where Elementor's own Advanced
 * "Position" control would anchor it) removes any possibility of some
 * other intermediate wrapper stealing the anchor point — which is what
 * kept happening when position lived on the inner div instead. Style tab
 * controls below still target the inner structure with ordinary
 * {{WRAPPER}} descendant selectors and are unaffected by this.
 */

.elementor-widget-jnw-add-to-cart-icon.jnw-atc-w-overlay {
	position: absolute;
	z-index: 5;
}

/* Static fallback positions — a safety net independent of the Elementor
   "Horizontal/Vertical Offset" controls' generated CSS (in case that
   ever fails to load for any reason), and the guaranteed baseline
   before any custom offset is applied on top. Horizontal and vertical
   sides are independent, so any combination (including e.g. left+bottom)
   reaches any point on the card, not just four fixed corners. */
.elementor-widget-jnw-add-to-cart-icon.jnw-atc-h-left  { left: 12px; }
.elementor-widget-jnw-add-to-cart-icon.jnw-atc-h-right { right: 12px; }
.elementor-widget-jnw-add-to-cart-icon.jnw-atc-v-top    { top: 12px; }
.elementor-widget-jnw-add-to-cart-icon.jnw-atc-v-bottom { bottom: 12px; }

.jnw-atc-icon-wrap {
	position: relative;
	display: inline-flex;
	width: 40px;
	height: 40px;
	-webkit-tap-highlight-color: transparent;
}

/* Visibility modes. Hover/focus-reveal is driven by
   add-to-cart-icon-widget.js, which finds the real containing Container
   for each instance at runtime and toggles ".jnw-atc-hover-active" on
   this inner wrap directly — no guessed theme/Loop-Grid class needed. */
.jnw-atc-icon-wrap.jnw-atc-visibility-hover_desktop,
.jnw-atc-icon-wrap.jnw-atc-visibility-hover_touch_always {
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s ease;
}

.jnw-atc-icon-wrap.jnw-atc-hover-active {
	opacity: 1;
	pointer-events: auto;
}

@media (hover: none) {
	.jnw-atc-icon-wrap.jnw-atc-visibility-hover_touch_always {
		opacity: 1;
		pointer-events: auto;
	}
}

/* The real, native WooCommerce button/link — stretched invisible.
   Selector deliberately broader than just "a.button" / "button.button"
   (any anchor or button inside .jnw-atc-native) as a defensive measure —
   a theme's own loop/add-to-cart.php override might not always keep the
   exact ".button" class, and this covers that without needing to know
   the theme's exact markup. */
.jnw-atc-native {
	position: absolute;
	inset: 0;
}

.jnw-atc-native a,
.jnw-atc-native button {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	opacity: 0;
	font-size: 0;
	line-height: 0;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

/* Purely visual icon layered on top of the real native button. */
.jnw-atc-overlay-icon {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

/* Fallback (variable / pre-order / out-of-stock) — its own real element,
   not layered on anything native. */
.jnw-atc-fallback {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	text-decoration: none;
}

.jnw-atc-fallback.jnw-atc-disabled {
	cursor: not-allowed;
	opacity: .5;
	pointer-events: none;
}

.jnw-atc-icon-inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: #FFFFFF;
	border: 1px solid #E5D9CC;
	border-radius: 50%;
	padding: 10px;
	box-sizing: border-box;
	transition: background-color .15s ease, border-color .15s ease;
}

.jnw-atc-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	line-height: 1;
	color: #231810;
}

.jnw-atc-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* Icon Nudge (Style > Icon controls) AND hover rotation are combined
   into ONE transform, on the SAME element (the glyph itself — i/svg),
   deliberately. FIX: they used to live on two different nested elements
   (nudge on the glyph, rotate on its outer wrapping span) — rotating
   the outer span also rotated everything inside it, including the
   nudge's fixed pixel offset, which flung the glyph toward a corner on
   hover instead of just spinning it in place (confirmed live). Putting
   both in one transform on one element means the nudge offset is
   applied first and the rotation always happens around that already-
   nudged position, in place, matching what you'd expect. --jnw-atc-nudge-x/y
   come from Elementor's Style tab controls; --jnw-atc-rotate is toggled
   by the hover rule further below. */
.jnw-atc-icon i,
.jnw-atc-icon svg {
	--jnw-atc-rotate: 0deg;
	transform: translate(var(--jnw-atc-nudge-x, 0px), var(--jnw-atc-nudge-y, 0px)) rotate(var(--jnw-atc-rotate));
	transition: transform .3s ease;
}

/* Two icon states (default "+" and "already added" check) stacked and
   cross-faded via the .jnw-atc-added class the JS toggles on the
   wrapper after a real added_to_cart event for that exact button. This
   scale-based swap stays on the outer span (not the glyph) — scaling
   uniformly around a centered box doesn't have the same
   direction-flipping problem rotation does, so it's safe to keep
   separate from the nudge+rotate transform above. */
.jnw-atc-icon-default,
.jnw-atc-icon-added {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity .2s ease, transform .2s ease;
}

.jnw-atc-icon-added {
	opacity: 0;
	transform: scale(.6);
}

.jnw-atc-icon-wrap.jnw-atc-added .jnw-atc-icon-default {
	opacity: 0;
	transform: scale(.6);
}

.jnw-atc-icon-wrap.jnw-atc-added .jnw-atc-icon-added {
	opacity: 1;
	transform: scale(1);
}

/* Hover rotation — only sets the --jnw-atc-rotate custom property here;
   the actual 180deg turn is applied above, combined with Nudge, on the
   glyph itself. Scoped to .jnw-atc-icon-default only (not -added), so
   hovering never spins the already-in-cart checkmark. */
.jnw-atc-icon-wrap:hover .jnw-atc-icon-default i,
.jnw-atc-icon-wrap:hover .jnw-atc-icon-default svg {
	--jnw-atc-rotate: 180deg;
}

/* Loading state — wc-add-to-cart.js adds .loading to the real native
   button while its AJAX call is in flight; we mirror that onto our
   decorative icon with a small spinner and dim the icon meanwhile. */
.jnw-atc-icon-wrap:has(.jnw-atc-native .loading) .jnw-atc-overlay-icon {
	opacity: .35;
}

.jnw-atc-icon-wrap:has(.jnw-atc-native .loading) .jnw-atc-icon-inner::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 14px;
	height: 14px;
	border: 2px solid #C9BCA9;
	border-top-color: #CF753F;
	border-radius: 50%;
	animation: jnw-atc-spin .6s linear infinite;
}

@keyframes jnw-atc-spin {
	to { transform: rotate(360deg); }
}

/* Toast notification, appended to document.body by the JS (not scoped
   inside the loop item, since a card can be anywhere in a long grid and
   the toast should always be readable regardless of scroll position). */
.jnw-atc-toast {
	position: fixed;
	z-index: 100000;
	background: #231810;
	color: #FFFFFF;
	padding: 10px 16px;
	border-radius: 8px;
	font-size: 13px;
	box-shadow: 0 4px 16px rgba(0,0,0,.15);
	opacity: 0;
	transform: translateY(6px);
	transition: opacity .2s ease, transform .2s ease;
	pointer-events: none;
}

.jnw-atc-toast.jnw-atc-toast-visible {
	opacity: 1;
	transform: translateY(0);
}

.jnw-atc-toast-top-right    { top: 16px; right: 16px; }
.jnw-atc-toast-top-left     { top: 16px; left: 16px; }
.jnw-atc-toast-bottom-right { bottom: 16px; right: 16px; }
.jnw-atc-toast-bottom-left  { bottom: 16px; left: 16px; }
.jnw-atc-toast-top-center   { top: 16px; left: 50%; transform: translate(-50%, 6px); }
.jnw-atc-toast-top-center.jnw-atc-toast-visible   { transform: translate(-50%, 0); }
.jnw-atc-toast-bottom-center { bottom: 16px; left: 50%; transform: translate(-50%, 6px); }
.jnw-atc-toast-bottom-center.jnw-atc-toast-visible { transform: translate(-50%, 0); }

/* Inline notification style — small bubble anchored to the icon itself. */
.jnw-atc-inline-note {
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%) translateY(4px);
	white-space: nowrap;
	background: #231810;
	color: #FFFFFF;
	padding: 6px 10px;
	border-radius: 6px;
	font-size: 12px;
	opacity: 0;
	transition: opacity .2s ease, transform .2s ease;
	pointer-events: none;
	z-index: 6;
}

.jnw-atc-inline-note.jnw-atc-toast-visible {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}