/* ==========================================================================
   petrascal — ajax add to cart visuals

   Everything here is painted on elements the script creates and removes, or on
   a class it adds for well under a second. Nothing in this file changes the
   layout or the look of anything that was already on the page.
   ========================================================================== */
/* ===================== mini cart recommendations =========================
   The "You May Also Like" strip swaps the price for the add-to-cart link on
   hover. The original rule slides the link by a fixed 30px, which only hides
   it while the price is exactly one 26px line. A price range, a sale price,
   or the "View cart" link WooCommerce injects after its own ajax button makes
   the strip taller, and from then on the two are printed over each other.

   A fixed strip height with percentage transforms makes the swap exact
   whatever ends up inside it.
   ===================================================================== */
.modal-shopping-cart .tf-minicart-recommendations .list-cart-item .cart-item-bot {
	position: relative;
	overflow: hidden;
	height: 26px;
	margin-top: 2px;
}

.modal-shopping-cart .tf-minicart-recommendations .list-cart-item .cart-item-bot .price,
.modal-shopping-cart .tf-minicart-recommendations .list-cart-item .cart-item-bot > a {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: auto;
	display: block;
	height: 26px;
	line-height: 26px;
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: transform .3s ease, opacity .25s ease;
}

/* Fading as well as sliding. If anything on the page ever makes the strip
   taller again, the hidden one of the pair is still invisible instead of
   sitting on top of the other. */
.modal-shopping-cart .tf-minicart-recommendations .list-cart-item .cart-item-bot .price {
	transform: translateY(0);
	opacity: 1;
}

.modal-shopping-cart .tf-minicart-recommendations .list-cart-item .cart-item-bot > a {
	transform: translateY(100%);
	opacity: 0;
	pointer-events: none;
	text-align: left;
	font-weight: 600;
	color: var(--Primary, #bd6f43);
}

.modal-shopping-cart .tf-minicart-recommendations .list-cart-item:hover .price,
.modal-shopping-cart .tf-minicart-recommendations .list-cart-item:focus-within .price {
	transform: translateY(-100%);
	opacity: 0;
}

.modal-shopping-cart .tf-minicart-recommendations .list-cart-item:hover .cart-item-bot > a,
.modal-shopping-cart .tf-minicart-recommendations .list-cart-item:focus-within .cart-item-bot > a {
	transform: translateY(0);
	opacity: 1;
	pointer-events: auto;
}

/* WooCommerce drops its own "View cart" link in after the ajax button. In a
   strip this size it lands straight on top of the price, and the drawer it
   would open is the one already on screen, so it is left out here only. */
.modal-shopping-cart .tf-minicart-recommendations .cart-item-bot .added_to_cart,
.modal-shopping-cart .tf-minicart-recommendations .cart-item-bot .wc-forward {
	display: none !important;
}

/* A touch screen has no hover, so nothing would ever be swapped in. There the
   price sits on its own line with the link under it, both always readable. */
@media (hover: none) {

	.modal-shopping-cart .tf-minicart-recommendations .list-cart-item .cart-item-bot {
		height: auto;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 2px;
	}

	.modal-shopping-cart .tf-minicart-recommendations .list-cart-item .cart-item-bot .price,
	.modal-shopping-cart .tf-minicart-recommendations .list-cart-item .cart-item-bot > a {
		position: static;
		transform: none !important;
		opacity: 1 !important;
		pointer-events: auto;
		max-width: 100%;
	}

	.modal-shopping-cart .tf-minicart-recommendations .list-cart-item .cart-item-bot > a {
		text-decoration: underline;
	}
}



/* ================== WooCommerce's injected "View cart" link ==============
   After its own ajax button finishes, WooCommerce inserts
   <a class="added_to_cart wc-forward">View cart</a> right after the button.
   In these cards the footer is a two column grid, so that third child lands
   next to the button, spills past the card edge and pushes the quick-view
   button onto a second row, which leaves the cards uneven.

   petrascal-pdp.css already hides it inside .kela-design-card-foot; this
   repeats it from the stylesheet that loads last, marked important, and
   covers the theme's own card markup as well, so a cached or reordered
   stylesheet cannot bring it back. Nothing is lost by hiding it: the basket
   in the header bumps, the counter updates and on the theme's cards the cart
   drawer still opens. */
.kela-design-card .added_to_cart,
.kela-design-card-foot .added_to_cart,
.kela-design-card-foot .wc-forward,
.card-product .added_to_cart,
.list-btn-main .added_to_cart,
.tf-minicart-recommendations .added_to_cart {
	display: none !important;
}

/* The button keeps WooCommerce's "added" state class. Whatever a plugin or a
   stock stylesheet decides to hang off it, the design's button box stays the
   same size so the grid of cards never shifts. */
.kela-design-card-foot .kela-design-btn.added::after,
.card-product .btn-main-product.added::after {
	content: none !important;
}

/* ------------------------------ the parcel ------------------------------ */
.petrascal-fly {
	position: fixed;
	z-index: 9999;
	pointer-events: none;
	will-change: transform;
}

.petrascal-fly__img {
	width: 100%;
	height: 100%;
	border-radius: 14px;
	background-color: #fff;
	background-size: cover;
	background-position: center;
	box-shadow: 0 18px 40px rgba(16, 24, 40, .28), 0 0 0 4px rgba(255, 255, 255, .9);
	will-change: transform, opacity;
}

/* ------------------------------ the bubbles ----------------------------- */
.petrascal-burst {
	position: fixed;
	z-index: 9998;
	width: 0;
	height: 0;
	pointer-events: none;
}

.petrascal-burst__ring {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	border-radius: 999px;
	border: 2px solid var(--Primary, #bd6f43);
	opacity: .55;
	animation: petrascal-ring .65s cubic-bezier(.2, .8, .2, 1) forwards;
}

.petrascal-burst__dot {
	position: absolute;
	left: 0;
	top: 0;
	width: 11px;
	height: 11px;
	margin: -5px 0 0 -5px;
	border-radius: 999px;
	background: var(--Primary, #bd6f43);
	opacity: 0;
	animation: petrascal-bubble .85s cubic-bezier(.2, .7, .3, 1) forwards;
	animation-delay: var(--d, 0ms);
}

.petrascal-burst__dot:nth-child(odd) {
	background: var(--Success, #3dab25);
}

@keyframes petrascal-ring {
	from { transform: translate(-50%, -50%) scale(.72); opacity: .55; }
	to   { transform: translate(-50%, -50%) scale(1.45); opacity: 0; }
}

@keyframes petrascal-bubble {
	0%   { transform: translate(0, 0) scale(.2); opacity: 0; }
	18%  { opacity: .95; }
	100% { transform: translate(var(--x, 0), var(--y, -60px)) scale(var(--s, .7)); opacity: 0; }
}

/* ------------------------------ the basket ------------------------------ */
.petrascal-cart-ring {
	position: fixed;
	z-index: 9997;
	width: 44px;
	height: 44px;
	margin: -22px 0 0 -22px;
	border-radius: 999px;
	border: 2px solid var(--Primary, #bd6f43);
	pointer-events: none;
	animation: petrascal-ring .7s cubic-bezier(.2, .8, .2, 1) forwards;
	transform-origin: center;
}

.petrascal-cart-bump {
	animation: petrascal-bump .62s cubic-bezier(.2, .8, .2, 1);
}

@keyframes petrascal-bump {
	0%   { transform: scale(1); }
	28%  { transform: scale(1.22) rotate(-7deg); }
	55%  { transform: scale(.94) rotate(4deg); }
	100% { transform: scale(1) rotate(0); }
}

.count-box.petrascal-count-pop {
	animation: petrascal-pop .62s cubic-bezier(.2, .8, .2, 1);
}

@keyframes petrascal-pop {
	0%   { transform: scale(1); }
	30%  { transform: scale(1.65); }
	60%  { transform: scale(.88); }
	100% { transform: scale(1); }
}

/* ------------------------------ the button ------------------------------ */
.single_add_to_cart_button.petrascal-atc-loading {
	position: relative;
	color: transparent !important;
	pointer-events: none;
}

.single_add_to_cart_button.petrascal-atc-loading svg {
	opacity: 0;
}

.single_add_to_cart_button.petrascal-atc-loading::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 18px;
	height: 18px;
	margin: -9px 0 0 -9px;
	border-radius: 999px;
	border: 2px solid rgba(255, 255, 255, .45);
	border-top-color: #fff;
	animation: petrascal-spin .6s linear infinite;
}

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

.single_add_to_cart_button.petrascal-atc-done {
	animation: petrascal-settle .5s cubic-bezier(.2, .8, .2, 1);
}

@keyframes petrascal-settle {
	0%   { transform: scale(1); }
	35%  { transform: scale(.96); }
	100% { transform: scale(1); }
}

/* ------------------------------ the message ----------------------------- */
.kela-design-toast.petrascal-atc-error,
.kela-design-root .kela-design-toast.petrascal-atc-error {
	background: var(--Critical, #f03e3e);
}

.kela-design-root .kela-design-toast.petrascal-atc-error svg {
	color: #fff;
}

/* Only used on a page that has no buy box toast of its own. */
.petrascal-atc-toast {
	position: fixed;
	left: 50%;
	bottom: 24px;
	z-index: 9999;
	transform: translate(-50%, 140%);
	padding: 12px 24px;
	margin: 0;
	border-radius: 999px;
	background: #181818;
	color: #fff;
	font-size: 14px;
	box-shadow: 0 12px 32px rgba(16, 24, 40, .22);
	transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}

.petrascal-atc-toast[data-show="true"] {
	transform: translate(-50%, 0);
}

/* --------------------------- motion preferences -------------------------- */
@media (prefers-reduced-motion: reduce) {

	.petrascal-fly,
	.petrascal-burst,
	.petrascal-cart-ring {
		display: none !important;
	}

	.petrascal-cart-bump,
	.count-box.petrascal-count-pop,
	.kela-design-root .single_add_to_cart_button.petrascal-atc-done {
		animation: none !important;
	}
}