/* Image Overlay Container - EXACT POSITIONING */
.storefront-child-button-overlay {
	position: absolute !important;
	bottom: 10px !important;
	right: 10px !important;
	z-index: 100 !important;
}

/* Cart Quantity Container - SAME POSITION */
.storefront-child-cart-qty-container {
	position: absolute !important;
	bottom: 10px !important;
	right: 10px !important;
	z-index: 100 !important;
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Expanded Mode - Stretch to image width */
.storefront-child-cart-qty-container.expanded-mode {
	right: 0 !important;
	left: 0 !important;
	bottom: 10px !important;
	width: var(--image-width, 324px) !important;
	max-width: 100% !important;
	transform: none !important;
}

/* Ensure ALL image containers are relative */
.product img.attachment-woocommerce_thumbnail,
.product img.wp-post-image {
	position: relative !important;
}

.product img.attachment-woocommerce_thumbnail + .storefront-child-button-overlay,
.product img.wp-post-image + .storefront-child-button-overlay,
.product img.attachment-woocommerce_thumbnail ~ .storefront-child-cart-qty-container,
.product img.wp-post-image ~ .storefront-child-cart-qty-container {
	position: absolute !important;
	bottom: 10px !important;
	right: 10px !important;
}

/* Modern Circular Add Button */
.storefront-child-add-btn {
	width: 50px !important;
	height: 50px !important;
	border: none !important;
	border-radius: 50% !important;
	background: #22c55e !important;
	color: white !important;
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-size: 24px !important;
	font-weight: 300 !important;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
	box-shadow: 0 4px 20px rgba(34, 197, 94, 0.4) !important;
	position: relative !important;
	line-height: 1 !important;
	padding: 0 !important;
	margin: 0 !important;
	z-index: 101 !important;
}

/* Expand animation for + to quantity button */
.storefront-child-add-btn.expanding-to-qty {
	animation: expandToQty 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes expandToQty {
	0% {
		transform: scale(1);
		border-radius: 50%;
	}
	50% {
		transform: scale(1.2);
		border-radius: 25px;
	}
	100% {
		transform: scale(1);
		border-radius: 50%;
	}
}

/* Circular Cart Quantity Button */
.storefront-child-cart-qty-btn {
	width: 50px !important;
	height: 50px !important;
	border: none !important;
	border-radius: 50% !important;
	background: #3b82f6 !important;
	color: white !important;
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-size: 24px !important;
	font-weight: 300 !important;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
	box-shadow: 0 4px 20px rgba(59, 130, 246, 0.4) !important;
	position: relative !important;
	line-height: 1 !important;
	padding: 0 !important;
	margin: 0 !important;
	z-index: 101 !important;
}

/* Expand animation for quantity button to controls */
.storefront-child-cart-qty-container.expanding-to-controls {
	animation: expandToControls 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes expandToControls {
	0% {
		right: 10px;
		width: 50px;
	}
	100% {
		right: 0;
		left: 0;
		width: var(--image-width, 324px) !important;
	}
}

/* Quantity Controls (Expanded View) */
.storefront-child-quantity-controls {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 8px !important;
	background: rgba(255, 255, 255, 0.95) !important;
	backdrop-filter: blur(10px) !important;
	padding: 12px 16px !important;
	border-radius: 25px !important;
	border: 2px solid rgba(229, 231, 235, 0.8) !important;
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
	margin: 0 auto !important;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	position: relative !important;
	z-index: 102 !important;
	animation: slideInControls 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

@keyframes slideInControls {
	0% {
		opacity: 0;
		transform: scale(0.8);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}

/* Make buttons and input fill available space */
.storefront-child-qty-minus,
.storefront-child-qty-plus {
	flex: 0 0 auto !important;
	width: 40px !important;
	height: 40px !important;
	border: 2px solid #3b82f6 !important;
	background: white !important;
	color: #3b82f6 !important;
	border-radius: 50% !important;
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-weight: 600 !important;
	font-size: 18px !important;
	transition: all 0.2s ease !important;
	padding: 0 !important;
	margin: 0 !important;
	line-height: 1 !important;
}

.storefront-child-qty-input {
	flex: 1 !important;
	width: auto !important;
	min-width: 60px !important;
	height: 40px !important;
	text-align: center !important;
	border: 2px solid #e5e7eb !important;
	border-radius: 10px !important;
	font-weight: 600 !important;
	font-size: 16px !important;
	padding: 0 !important;
	background: white !important;
	transition: all 0.2s ease !important;
	margin: 0 8px !important;
	line-height: 1 !important;
}

/* Hover effects */
.storefront-child-add-btn:hover {
	background: #16a34a !important;
	transform: translateY(-2px) scale(1.05) !important;
	box-shadow: 0 6px 25px rgba(34, 197, 94, 0.5) !important;
}

.storefront-child-cart-qty-btn:hover {
	background: #2563eb !important;
	transform: translateY(-2px) scale(1.05) !important;
	box-shadow: 0 6px 25px rgba(59, 130, 246, 0.5) !important;
}

.storefront-child-qty-minus:hover,
.storefront-child-qty-plus:hover {
	background: #3b82f6 !important;
	color: white !important;
	transform: scale(1.1) !important;
}

.storefront-child-qty-input:focus {
	outline: none !important;
	border-color: #3b82f6 !important;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

/* Remove spinner arrows */
.storefront-child-qty-input::-webkit-outer-spin-button,
.storefront-child-qty-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.storefront-child-qty-input[type=number] {
	-moz-appearance: textfield;
}

/* Loading states */
.storefront-child-add-btn.loading {
	opacity: 0.7;
	pointer-events: none;
}

.storefront-child-add-btn.loading::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20px;
	height: 20px;
	margin: -10px 0 0 -10px;
	border: 2px solid transparent;
	border-top: 2px solid currentColor;
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
}

.storefront-child-cart-qty-container.loading .storefront-child-cart-qty-btn {
	opacity: 0.7;
	pointer-events: none;
}

.storefront-child-cart-qty-container.loading .storefront-child-cart-qty-btn::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20px;
	height: 20px;
	margin: -10px 0 0 -10px;
	border: 2px solid transparent;
	border-top: 2px solid currentColor;
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/* Hide WooCommerce's "View cart" button */
.added_to_cart.wc-forward {
	display: none !important;
}

/* Ensure WooCommerce buttons are hidden but functional */
.add_to_cart_button.ajax_add_to_cart {
	display: none !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.storefront-child-button-overlay,
	.storefront-child-cart-qty-container {
		bottom: 8px !important;
		right: 8px !important;
	}
	
	.storefront-child-add-btn,
	.storefront-child-cart-qty-btn {
		width: 44px !important;
		height: 44px !important;
		font-size: 20px !important;
	}
	
	.storefront-child-cart-qty-btn {
		font-size: 14px !important;
	}
	
	.storefront-child-quantity-controls {
		padding: 10px 12px !important;
	}
	
	.storefront-child-qty-minus,
	.storefront-child-qty-plus {
		width: 36px !important;
		height: 36px !important;
		font-size: 16px !important;
	}
	
	.storefront-child-qty-input {
		height: 36px !important;
		font-size: 15px !important;
		margin: 0 6px !important;
	}
}

/* Force circular shape and center content */
.storefront-child-add-btn *,
.storefront-child-cart-qty-btn *,
.storefront-child-qty-minus *,
.storefront-child-qty-plus * {
	line-height: 1 !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}