/* Custom Add to Cart Button – Frontend Styles */

.catc-wrap {
	display: flex;
	flex-direction: column;
	width: 100%;
	position: relative !important;
	z-index: 5 !important;
	pointer-events: auto !important;
}

.catc-wrap > * {
	margin: 0 !important;
}

/* Border-Collapse-Trick: jedes Element (Preis/Mengenfeld/Button/Hinweis)
   behält IMMER seinen vollen, eigenen Rahmen auf allen vier Seiten. Damit
   trotzdem keine doppelte Linie zwischen den Elementen entsteht, zieht jedes
   Element (außer dem ersten) sich um genau eine Rahmenbreite nach oben, so
   dass sich die Ränder exakt überlagern. Das ist robuster als einzelne
   border-top:none-Sonderregeln pro Element. */
.catc-wrap > *:not(:first-child) {
	margin-top: calc(-1 * var(--catc-btn-border-w, 1px)) !important;
}

.catc-price {
	text-align: center;
	padding: 6px 0;
	font-size: inherit;
	position: relative;
	border: var(--catc-btn-border-w, 1px) solid var(--catc-qty-border, #000);
	box-sizing: border-box;
}

.catc-price del {
	opacity: 0.6;
	margin-right: 6px;
}

.catc-form {
	position: relative !important;
	z-index: 5 !important;
	pointer-events: auto !important;
}

/* --- Mengenfeld (funktioniert für unsere Loop-Forms UND für den nativ
   enhancten Single-Product-Stepper, siehe frontend.js) --- */
.catc-qty-row {
	display: flex;
	align-items: stretch;
	width: 100%;
	border: var(--catc-btn-border-w, 1px) solid var(--catc-qty-border, #000);
	box-sizing: border-box;
}

.catc-qty-row > * {
	margin: 0 !important;
}

.catc-qty-row .catc-qty-btn {
	flex: 1 1 auto;
	height: var(--catc-qty-height, 44px) !important;
	background: transparent;
	border: none;
	cursor: pointer;
	font-size: 1.1rem;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	color: inherit;
	touch-action: manipulation;
	appearance: none;
}

.catc-qty-row .catc-qty-btn:hover,
.catc-qty-row .catc-qty-btn:focus-visible {
	background: rgba(0, 0, 0, 0.06) !important;
}

.catc-qty-row .catc-qty-btn:first-child {
	border-right: 1px solid var(--catc-qty-border, #000);
}

.catc-qty-row .catc-qty-btn:last-child {
	border-left: 1px solid var(--catc-qty-border, #000);
}

.catc-qty-row input.qty {
	flex: 0 0 var(--catc-qty-input-width, 60px);
	width: var(--catc-qty-input-width, 60px);
	min-width: 0;
	height: var(--catc-qty-height, 44px) !important;
	min-height: 0 !important;
	max-height: none !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	border: none !important;
	box-shadow: none !important;
	background: transparent;
	text-align: center;
	font: inherit;
	line-height: var(--catc-qty-height, 44px);
	appearance: textfield;
	-moz-appearance: textfield;
	box-sizing: border-box;
}

.catc-qty-row input.qty::-webkit-inner-spin-button,
.catc-qty-row input.qty::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* --- Add-to-Cart-Button ---
   !important auf Farben/Rahmen, weil Theme-CSS (Theme.co Pro) hier oft mit
   eigener, höherer Spezifität arbeitet und unsere Werte sonst überschreibt.
   Archiv (.catc-add-btn / native Fallback-Links) und Single-Produktseite
   nutzen bewusst getrennte Farbvariablen. */
.catc-add-btn,
.woocommerce a.button.add_to_cart_button,
.woocommerce button.single_add_to_cart_button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: var(--catc-btn-height, 44px) !important;
	border: var(--catc-btn-border-w, 1px) solid var(--catc-btn-border, #000) !important;
	border-radius: var(--catc-btn-radius, 0) !important;
	font: inherit;
	text-transform: uppercase;
	text-decoration: none !important;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
	box-sizing: border-box;
	position: relative;
}

.catc-add-btn,
.woocommerce a.button.add_to_cart_button {
	background-color: var(--catc-btn-bg, #000) !important;
	color: var(--catc-btn-text, #fff) !important;
}

.woocommerce button.single_add_to_cart_button {
	background-color: var(--catc-btn-bg-single, #000) !important;
	color: var(--catc-btn-text-single, #fff) !important;
}

.catc-out-of-stock-btn {
	cursor: default;
	opacity: 0.7;
}

.catc-add-btn:hover,
.catc-add-btn:focus-visible,
.woocommerce a.button.add_to_cart_button:hover,
.woocommerce a.button.add_to_cart_button:focus-visible {
	background-color: var(--catc-btn-bg-hover, #fff) !important;
	color: var(--catc-btn-text-hover, #000) !important;
}

.woocommerce button.single_add_to_cart_button:hover,
.woocommerce button.single_add_to_cart_button:focus-visible {
	background-color: var(--catc-btn-bg-hover-single, #fff) !important;
	color: var(--catc-btn-text-hover-single, #000) !important;
}

/* WooCommerce' eigenes Skript setzt "loading" während des Ajax-Requests und
   "added" danach – wir nutzen beide Klassen, kein eigenes Ajax nötig. */
.catc-add-btn.loading,
.add_to_cart_button.loading,
.single_add_to_cart_button.loading {
	pointer-events: none;
}

.catc-add-btn.loading .catc-icon,
.catc-add-btn.loading .catc-add-btn__text,
.add_to_cart_button.loading .catc-icon,
.add_to_cart_button.loading .catc-add-btn__text,
.single_add_to_cart_button.loading .catc-icon,
.single_add_to_cart_button.loading .catc-add-btn__text {
	visibility: hidden;
}

.catc-add-btn.loading::after,
.add_to_cart_button.loading::after,
.single_add_to_cart_button.loading::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px;
	height: 16px;
	margin: -8px 0 0 -8px;
	border: 2px solid var(--catc-btn-text, #000);
	border-top-color: transparent;
	border-radius: 50%;
	animation: catc-spin 0.6s linear infinite;
}

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

/* Icons: echte <svg>/<img>-Elemente (kein CSS-Mask-Hack mehr). Standard-Icon
   ist sichtbar, "Hinzugefügt"-Icon ausgeblendet – Umschaltung über die
   .catc-added-Klasse, die frontend.js nach erfolgreichem Add-to-Cart setzt. */
.catc-icon {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	object-fit: contain;
	color: currentColor;
	margin-left: var(--catc-icon-margin-l, 0);
	margin-right: var(--catc-icon-margin-r, 8px);
}

.catc-icon--added {
	display: none;
}

.catc-added .catc-icon--default,
.added .catc-icon--default {
	display: none;
}

.catc-added .catc-icon--added,
.added .catc-icon--added {
	display: inline-block;
}

/* "Bereits im Warenkorb"-Zustand (nur Archiv, per Backend-Option aktivierbar) */
.catc-in-cart-note {
	display: none;
	text-align: center;
	padding: 10px 0;
	text-decoration: underline;
	border: var(--catc-btn-border-w, 1px) solid var(--catc-qty-border, #000);
	box-sizing: border-box;
}

.catc-wrap.is-in-cart .catc-qty-row,
.catc-wrap.is-in-cart .catc-add-btn {
	display: none !important;
}

.catc-wrap.is-in-cart .catc-in-cart-note {
	display: block;
}

/* --- Single-Produktseite: bestehendes WooCommerce-Formular optisch angleichen ---
   Bei variablen Produkten liegen Mengenfeld/Button nicht direkt im form.cart,
   sondern zusätzlich in .woocommerce-variation-add-to-cart – daher hier
   ebenfalls Flex/Gap 0 setzen, sonst bleibt dort ein Abstand bestehen. */
.woocommerce div.product form.cart.catc-single-enhanced,
.woocommerce div.product form.cart.catc-single-enhanced .woocommerce-variation-add-to-cart {
	display: flex;
	flex-direction: column;
	gap: 0 !important;
}

.woocommerce div.product form.cart.catc-single-enhanced .quantity {
	margin: 0 !important;
	width: 100%;
}

.woocommerce div.product form.cart.catc-single-enhanced button.single_add_to_cart_button {
	margin-top: calc(-1 * var(--catc-btn-border-w, 1px)) !important;
	text-shadow: none;
}

/* Live-Region für Screenreader-Feedback nach Ajax-Add */
.catc-live-region {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

@media (max-width: 480px) {
	.catc-qty-row .catc-qty-btn {
		min-width: 48px;
	}
}