/* ════════════════════════════════════════════════════════════════════════
   Hackschnitzel — WooCommerce Warenkorb / Kasse / Danke im hs-Design
   Restyle der Standard-Woo-+Germanized-Struktur. Logik bleibt unberührt.
   Alles unter .spp-hs gescoped.
   ════════════════════════════════════════════════════════════════════════ */

.spp-hs-woo { background: var(--hs-bg); }
.spp-hs-woo__inner { max-width: 1140px; margin: 0 auto; padding: 32px 24px 64px; }
.spp-hs-woo__title { font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 700; color: var(--hs-text); margin: 0 0 24px; }

/* Allgemein */
.spp-hs .woocommerce { font-family: var(--font-body); color: var(--hs-text); }
.spp-hs .woocommerce a { color: var(--hs-green); }
.spp-hs .woocommerce h1, .spp-hs .woocommerce h2, .spp-hs .woocommerce h3 { font-family: var(--font-display); color: var(--hs-text); }

/* Buttons → hs */
.spp-hs .woocommerce .button,
.spp-hs .woocommerce button.button,
.spp-hs .woocommerce input.button,
.spp-hs .woocommerce a.button,
.spp-hs .woocommerce .wp-element-button,
.spp-hs .woocommerce #place_order,
.spp-hs .woocommerce button.checkout-button {
	background: var(--hs-green) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 8px !important;
	font-family: var(--font-body) !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	padding: 12px 24px !important;
	text-transform: none !important;
	box-shadow: none !important;
	transition: background .2s !important;
	line-height: 1.2 !important;
}
.spp-hs .woocommerce .button:hover,
.spp-hs .woocommerce #place_order:hover,
.spp-hs .woocommerce button.checkout-button:hover { background: var(--hs-green-dark) !important; }
.spp-hs .woocommerce .checkout-button, .spp-hs .woocommerce #place_order { width: 100%; padding: 15px 24px !important; font-size: 16px !important; }
/* Sekundär-Buttons (z.B. "Warenkorb aktualisieren") dezent */
.spp-hs .woocommerce button[name="update_cart"],
.spp-hs .woocommerce button[name="apply_coupon"] { background: #fff !important; color: var(--hs-green) !important; border: 1.5px solid var(--hs-border) !important; }
.spp-hs .woocommerce button[name="update_cart"]:hover,
.spp-hs .woocommerce button[name="apply_coupon"]:hover { border-color: var(--hs-green) !important; background: var(--hs-green-light) !important; }
.spp-hs .woocommerce button[name="update_cart"][disabled] { opacity: .5 !important; }

/* Inputs/Selects → hs */
.spp-hs .woocommerce form .form-row input.input-text,
.spp-hs .woocommerce form .form-row textarea,
.spp-hs .woocommerce .select2-container .select2-selection,
.spp-hs .woocommerce form .form-row select,
.spp-hs .woocommerce #coupon_code,
.spp-hs .woocommerce input[type="text"],
.spp-hs .woocommerce input[type="email"],
.spp-hs .woocommerce input[type="tel"],
.spp-hs .woocommerce input[type="password"],
.spp-hs .woocommerce input[type="number"] {
	border: 1px solid var(--hs-border) !important;
	border-radius: 8px !important;
	padding: 11px 14px !important;
	font-size: 14px !important;
	font-family: var(--font-body) !important;
	background: #fff !important;
	box-shadow: none !important;
	color: var(--hs-text) !important;
}
.spp-hs .woocommerce form .form-row input.input-text:focus,
.spp-hs .woocommerce form .form-row textarea:focus,
.spp-hs .woocommerce form .form-row select:focus { border-color: var(--hs-green) !important; outline: none !important; }
.spp-hs .woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 26px; padding-left: 0; }

/* ── Warenkorb-Tabelle als Card ─────────────────────────────────────────── */
.spp-hs .woocommerce table.shop_table {
	border: 1px solid var(--hs-border) !important;
	border-radius: var(--hs-radius-lg) !important;
	border-collapse: separate !important;
	border-spacing: 0 !important;
	overflow: hidden;
	background: #fff;
	box-shadow: var(--hs-shadow-sm);
	margin-bottom: 24px;
}
.spp-hs .woocommerce table.shop_table thead th {
	background: var(--hs-bg) !important;
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .5px;
	text-transform: uppercase;
	color: var(--hs-text-secondary);
	padding: 14px 16px;
	border: none !important;
}
.spp-hs .woocommerce table.shop_table td { padding: 18px 16px !important; border-top: 1px solid var(--hs-border-light) !important; vertical-align: middle; }
.spp-hs .woocommerce table.shop_table .product-name a { color: var(--hs-text); font-weight: 600; text-decoration: none; font-family: var(--font-display); }
.spp-hs .woocommerce table.shop_table .product-name a:hover { color: var(--hs-green); }
.spp-hs .woocommerce table.shop_table img { border-radius: 8px; width: 64px; height: auto; }
.spp-hs .woocommerce .product-remove a.remove { color: var(--hs-badge) !important; font-size: 20px; border: none; }
.spp-hs .woocommerce .product-remove a.remove:hover { background: var(--hs-badge) !important; color: #fff !important; }
.spp-hs .woocommerce .quantity input.qty {
	width: 64px; text-align: center; border: 1.5px solid var(--hs-border) !important; border-radius: 8px !important; padding: 8px !important;
}
.spp-hs .woocommerce .woocommerce-Price-amount { font-weight: 600; color: var(--hs-text); }

/* Gutschein-Zeile */
.spp-hs .woocommerce .cart .actions { padding: 16px !important; }
.spp-hs .woocommerce .cart .actions .coupon { display: flex; gap: 8px; align-items: center; }
.spp-hs .woocommerce .cart .actions .coupon #coupon_code { max-width: 200px; }

/* ── Warenkorb-Summen / Cart Totals als Card ───────────────────────────── */
.spp-hs .woocommerce .cart_totals {
	background: #fff;
	border: 1px solid var(--hs-border);
	border-radius: var(--hs-radius-lg);
	padding: 24px;
	box-shadow: var(--hs-shadow-sm);
}
.spp-hs .woocommerce .cart_totals h2 { font-size: 18px; margin: 0 0 16px; }
.spp-hs .woocommerce .cart_totals table.shop_table { border: none !important; box-shadow: none; border-radius: 0 !important; margin: 0; }
.spp-hs .woocommerce .cart_totals table.shop_table th,
.spp-hs .woocommerce .cart_totals table.shop_table td { background: transparent !important; padding: 12px 0 !important; border-top: 1px solid var(--hs-border-light) !important; }
.spp-hs .woocommerce .cart_totals .order-total .woocommerce-Price-amount { font-family: var(--font-display); font-size: 22px; color: var(--hs-green-dark); }
.spp-hs .woocommerce .wc-proceed-to-checkout { padding-top: 18px !important; }

/* Zwei-Spalten-Layout Warenkorb (Tabelle + Summen) auf Desktop */
@media (min-width: 880px) {
	.spp-hs .woocommerce-cart-form { float: none; }
	.spp-hs .woocommerce .cart-collaterals { width: 100%; }
	.spp-hs .woocommerce .cart-collaterals .cart_totals { width: 420px; float: right; }
}

/* ── Kasse ─────────────────────────────────────────────────────────────── */
.spp-hs .woocommerce form.checkout { display: block; }
.spp-hs .woocommerce #customer_details {
	background: #fff; border: 1px solid var(--hs-border); border-radius: var(--hs-radius-lg);
	padding: 28px; box-shadow: var(--hs-shadow-sm); margin-bottom: 24px;
}
.spp-hs .woocommerce #customer_details h3 { font-size: 18px; padding-bottom: 12px; border-bottom: 1px solid var(--hs-border-light); margin-bottom: 18px; }
.spp-hs .woocommerce form .form-row label { font-size: 13px; font-weight: 600; color: var(--hs-text-secondary); margin-bottom: 5px; }
.spp-hs .woocommerce form .form-row { margin-bottom: 14px; }
.spp-hs .woocommerce .woocommerce-checkout-review-order {
	background: #fff; border: 1px solid var(--hs-border); border-radius: var(--hs-radius-lg);
	padding: 24px; box-shadow: var(--hs-shadow-sm);
}
.spp-hs .woocommerce .woocommerce-checkout-review-order-table { border: none !important; box-shadow: none; border-radius: 0 !important; }
.spp-hs .woocommerce .woocommerce-checkout-review-order-table th,
.spp-hs .woocommerce .woocommerce-checkout-review-order-table td { background: transparent !important; border-top: 1px solid var(--hs-border-light) !important; padding: 12px 8px !important; }
.spp-hs .woocommerce .woocommerce-checkout-review-order-table .order-total .woocommerce-Price-amount { font-family: var(--font-display); font-size: 20px; color: var(--hs-green-dark); }

/* Zahlungsbereich */
.spp-hs .woocommerce #payment { background: var(--hs-bg) !important; border-radius: var(--hs-radius) !important; border: 1px solid var(--hs-border); margin-top: 16px; }
.spp-hs .woocommerce #payment ul.payment_methods { border-bottom: 1px solid var(--hs-border-light) !important; padding: 8px 16px !important; }
.spp-hs .woocommerce #payment ul.payment_methods li { margin-bottom: 6px; }
.spp-hs .woocommerce #payment div.payment_box { background: #fff !important; border-radius: 8px; font-size: 13px; color: var(--hs-text-secondary); }
.spp-hs .woocommerce #payment div.payment_box::before { border-bottom-color: #fff !important; }
.spp-hs .woocommerce #payment .place-order { padding: 16px !important; }

/* Desktop: Kasse zweispaltig (Felder links, Übersicht rechts) */
@media (min-width: 980px) {
	.spp-hs .woocommerce .col2-set#customer_details,
	.spp-hs .woocommerce #customer_details { float: left; width: 56%; margin-right: 4%; }
	.spp-hs .woocommerce #order_review_heading,
	.spp-hs .woocommerce #order_review { float: right; width: 40%; }
	.spp-hs .woocommerce form.checkout::after { content: ""; display: table; clear: both; }
	.spp-hs .woocommerce .col2-set .col-1,
	.spp-hs .woocommerce .col2-set .col-2 { float: none; width: 100%; }
}
.spp-hs .woocommerce #order_review_heading { font-family: var(--font-display); font-size: 18px; margin-bottom: 14px; }

/* ── Germanized: AGB/Widerruf/Checkboxen ───────────────────────────────── */
.spp-hs .woocommerce .wc-gzd-premium-overlay { display: none; }
.spp-hs .woocommerce-terms-and-conditions-wrapper { margin: 12px 0; font-size: 13px; color: var(--hs-text-secondary); }
.spp-hs .woocommerce form .form-row.woocommerce-validated input.input-text { border-color: var(--hs-success) !important; }
.spp-hs .woocommerce form .form-row.woocommerce-invalid input.input-text { border-color: var(--hs-badge) !important; }
.spp-hs .wc-gzd-checkbox-placeholder, .spp-hs .checkbox input[type="checkbox"] { accent-color: var(--hs-green); }
.spp-hs .woocommerce .wc-gzd-product-name, .spp-hs .wc-gzd-additional-info { color: var(--hs-text-muted); font-size: 12px; }

/* ── Notices ───────────────────────────────────────────────────────────── */
.spp-hs .woocommerce-message, .spp-hs .woocommerce-info, .spp-hs .woocommerce-error, .spp-hs .woocommerce-noreviews {
	border-radius: var(--hs-radius) !important;
	border-top: none !important;
	font-size: 14px;
	padding: 14px 16px 14px 48px !important;
}
.spp-hs .woocommerce-message { background: var(--hs-green-light) !important; color: var(--hs-green-dark) !important; }
.spp-hs .woocommerce-message::before, .spp-hs .woocommerce-info::before { color: var(--hs-green) !important; }
.spp-hs .woocommerce-info { background: #eef4fb !important; color: #2a4a6b !important; }
.spp-hs .woocommerce-error { background: #fdeaea !important; color: #8a2020 !important; list-style: none; }

/* ── Danke-Seite / Order received ──────────────────────────────────────── */
.spp-hs .woocommerce .woocommerce-order { background: #fff; border: 1px solid var(--hs-border); border-radius: var(--hs-radius-lg); padding: 28px; box-shadow: var(--hs-shadow-sm); }
.spp-hs .woocommerce .woocommerce-thankyou-order-received {
	font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--hs-green-dark);
	background: var(--hs-green-light); border-radius: var(--hs-radius); padding: 18px 20px; margin-bottom: 20px;
}
.spp-hs .woocommerce ul.order_details {
	display: flex; flex-wrap: wrap; gap: 16px; background: var(--hs-bg); border-radius: var(--hs-radius);
	padding: 18px; margin: 0 0 24px; border: 1px solid var(--hs-border-light);
}
.spp-hs .woocommerce ul.order_details li { border: none !important; text-transform: none; font-size: 12px; color: var(--hs-text-muted); }
.spp-hs .woocommerce ul.order_details li strong { font-size: 15px; color: var(--hs-text); }

/* Leerer Warenkorb */
.spp-hs .woocommerce .cart-empty.woocommerce-info { text-align: center; }
.spp-hs .woocommerce .return-to-shop { text-align: center; margin-top: 16px; }

/* Mobil */
@media (max-width: 879px) {
	.spp-hs-woo__inner { padding: 24px 16px 48px; }
	.spp-hs .woocommerce .cart-collaterals .cart_totals { width: 100%; float: none; }
	.spp-hs .woocommerce #customer_details, .spp-hs .woocommerce #order_review { float: none; width: 100%; margin: 0 0 20px; }
}