/* ==========================================================================
   SightQuest Redesign — WooCommerce & Elementor Overrides
   Zielt auf Cart / Checkout / My-Account / Shop / Single-Product.
   Nutzt die Design-Tokens aus assets/css/app.css (:root --teal-*, --accent-*, etc.).
   ========================================================================== */

/* -------- Generischer Wrapper ------------------------------------------------ */
.sqrd-woo main,
.sqrd-generic {
	padding-top: clamp(2rem, 5vw, 4rem);
}

.sqrd-woocommerce .container,
.sqrd-generic .container {
	max-width: 1080px;
}

.sqrd-prose {
	max-width: 820px;
	color: var(--ink-700);
	line-height: 1.65;
}

.sqrd-prose h1,
.sqrd-prose h2,
.sqrd-prose h3,
.sqrd-prose h4 {
	color: var(--ink-900);
	font-family: "Poppins", system-ui, sans-serif;
	font-weight: 700;
	margin: 1.4em 0 0.5em;
}

.sqrd-prose p,
.sqrd-prose li {
	font-family: "Poppins", system-ui, sans-serif;
	font-size: 1rem;
}

.sqrd-prose a {
	color: var(--teal-500, #346861);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* -------- Astra / Elementor-Reset auf WC-Seiten ----------------------------- */
.sqrd-woo #page,
.sqrd-woo #content,
.sqrd-woo .ast-container,
.sqrd-woo .site-content {
	max-width: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* Astra Header/Footer-Relikte unterdrücken, falls Parent-Theme-Hooks doch feuern. */
body.sqrd-woo > #page > .site-header:not(.sqrd-woo *),
body.sqrd-woo > #page > .site-footer:not(.sqrd-woo *) {
	display: none;
}

/* Elementor-Wrapper auf WC-Pages neutralisieren. */
.sqrd-woo .elementor-section-wrap,
.sqrd-woo .elementor-widget-woocommerce-cart,
.sqrd-woo .elementor-widget-woocommerce-checkout-page {
	max-width: 1080px;
	margin-left: auto;
	margin-right: auto;
}

/* -------- Buttons ---------------------------------------------------------- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-page a.button,
.woocommerce-page button.button,
.woocommerce-page input.button,
.woocommerce .button.alt,
.wc-block-components-button:not(.is-link) {
	font-family: "Poppins", system-ui, sans-serif !important;
	font-weight: 600 !important;
	font-size: 0.98rem !important;
	line-height: 1.2 !important;
	padding: 0.85rem 1.5rem !important;
	border-radius: 999px !important;
	border: none !important;
	background: var(--orange-500, #ff8360) !important;
	color: #fff !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	box-shadow: 0 6px 18px -6px rgba(201, 80, 45, 0.45) !important;
	transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease !important;
	cursor: pointer;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.wc-block-components-button:not(.is-link):hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 24px -8px rgba(201, 80, 45, 0.55) !important;
	background: var(--orange-600, #e06840) !important;
}

/* Sekundäre Buttons */
.woocommerce a.button.wc-forward,
.woocommerce-cart .return-to-shop .button,
.wc-block-components-button.wc-block-components-totals-coupon__button {
	background: var(--teal-500, #346861) !important;
	box-shadow: 0 6px 18px -6px rgba(52, 104, 97, 0.35) !important;
}

.woocommerce a.button.wc-forward:hover,
.wc-block-components-button.wc-block-components-totals-coupon__button:hover {
	background: var(--teal-600, #2a5751) !important;
}

/* -------- Form-Inputs ------------------------------------------------------- */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text,
.select2-container--default .select2-selection--single,
.wc-block-components-text-input input,
.wc-block-components-select__select {
	font-family: "Poppins", system-ui, sans-serif !important;
	font-size: 1rem !important;
	padding: 0.8rem 1rem !important;
	border: 1px solid var(--ink-200, #d8dedd) !important;
	border-radius: 12px !important;
	background: #fff !important;
	color: var(--ink-900, #0b1a19) !important;
	transition: border-color 160ms ease, box-shadow 160ms ease !important;
	min-height: 48px;
	box-sizing: border-box;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.select2-container--default.select2-container--focus .select2-selection--single,
.wc-block-components-text-input input:focus {
	border-color: var(--teal-500, #346861) !important;
	outline: none !important;
	box-shadow: 0 0 0 3px rgba(52, 104, 97, 0.15) !important;
}

.woocommerce form .form-row label,
.wc-block-components-text-input label {
	font-family: "Poppins", system-ui, sans-serif;
	font-weight: 500;
	color: var(--ink-700, #1e293b);
	margin-bottom: 0.35rem;
	display: block;
}

.select2-container--default .select2-selection--single {
	height: 48px !important;
	display: flex;
	align-items: center;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 46px !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 46px !important;
	padding-left: 0 !important;
}

/* -------- Tables (Cart, Checkout Order-Review, My-Account) ----------------- */
.woocommerce table.shop_table,
.woocommerce-page table.shop_table {
	border: none !important;
	border-radius: 20px !important;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 2px 8px rgba(15, 42, 39, 0.06);
}

.woocommerce table.shop_table th {
	background: var(--teal-100, #e6f1f0) !important;
	color: var(--ink-900) !important;
	font-family: "Poppins", system-ui, sans-serif !important;
	font-weight: 600 !important;
	padding: 1rem 1.25rem !important;
	border-bottom: 1px solid var(--ink-100, #e6ebeb) !important;
}

.woocommerce table.shop_table td {
	padding: 1rem 1.25rem !important;
	border-top: 1px solid var(--ink-100, #e6ebeb) !important;
	font-family: "Poppins", system-ui, sans-serif !important;
}

.woocommerce table.shop_table tr:first-child td {
	border-top: none !important;
}

/* -------- Messages (Notice / Error / Info) --------------------------------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	font-family: "Poppins", system-ui, sans-serif !important;
	border-radius: 16px !important;
	border: none !important;
	padding: 1rem 1.5rem 1rem 3rem !important;
	background: #fff !important;
	box-shadow: 0 2px 12px rgba(15, 42, 39, 0.08) !important;
}

.woocommerce-message {
	border-left: 4px solid var(--teal-500, #346861) !important;
}

.woocommerce-info {
	border-left: 4px solid var(--gold, #f4c572) !important;
}

.woocommerce-error {
	border-left: 4px solid #c9502d !important;
	color: var(--ink-900);
}

/* "Produkt wurde dem Warenkorb hinzugefügt"-Banner auf der Cart-Seite ausblenden —
   da redundant zum bereits angezeigten Cart-Inhalt. Andere Success-Notices (z.B.
   Coupon erfolgreich angewendet) bleiben sichtbar, weil sie keinen wc-forward-Link
   tragen. */
.woocommerce-cart .woocommerce-message:has(> .button.wc-forward) {
	display: none !important;
}

/* Produktbild auf Cart-Seite + im Off-Canvas-Mini-Cart ausblenden — User-Wunsch,
   Card-Layout liest sich ohne Thumbnail klarer. Beim Mini-Cart muss das Grid
   ebenfalls auf 2 Spalten reduziert werden, sonst rutscht der Name in die
   ehemalige 56px-Thumb-Spalte und wird gestaucht. */
.woocommerce-cart table.cart th.product-thumbnail,
.woocommerce-cart table.cart td.product-thumbnail,
.mini-cart-thumb-wrap {
	display: none !important;
}
.mini-cart-item {
	grid-template-columns: 1fr auto !important;
}

/* "Hast du einen Gutschein?"-Toggle-Box ausblenden — Coupon-Form ist direkt
   darunter immer sichtbar, der Toggle ist redundant. */
.woocommerce-checkout .woocommerce-form-coupon-toggle {
	display: none !important;
}
.woocommerce-checkout form.checkout_coupon.woocommerce-form-coupon {
	display: block !important;
}

/* "Weiter zur Kasse"-Button auf Cart in Marken-Orange (statt teal-secondary).
   Höhere Specificity als der generische wc-forward-Override weiter oben. */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button.wc-forward {
	background: var(--orange-500, #ff8360) !important;
	box-shadow: 0 6px 18px -6px rgba(201, 80, 45, 0.45) !important;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button.wc-forward:hover {
	background: var(--orange-600, #e06840) !important;
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	color: var(--teal-500, #346861) !important;
	top: 1rem !important;
	left: 1rem !important;
}

/* -------- Checkout Layout --------------------------------------------------- */
.woocommerce-checkout form.checkout {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-areas:
		"customer heading"
		"customer review";
	grid-template-rows: auto 1fr;
	column-gap: 2.5rem;
	row-gap: 0;
	align-items: start;
}

/* WooCommerce-Defaults (float + width:48%) neutralisieren. */
.woocommerce-checkout form.checkout #customer_details,
.woocommerce-checkout form.checkout #order_review_heading,
.woocommerce-checkout form.checkout #order_review,
.woocommerce-checkout form.checkout .col2-set,
.woocommerce-checkout form.checkout .col2-set .col-1,
.woocommerce-checkout form.checkout .col2-set .col-2 {
	width: 100% !important;
	float: none !important;
	max-width: none !important;
}

.woocommerce-checkout form.checkout #customer_details {
	grid-area: customer;
}

.woocommerce-checkout form.checkout #order_review_heading {
	grid-area: heading;
}

.woocommerce-checkout form.checkout #order_review {
	grid-area: review;
}

.woocommerce-checkout form.checkout #order_review_heading,
.woocommerce-checkout form.checkout #order_review {
	background: var(--paper, #fefcf8) !important;
	padding: 1.5rem !important;
	border-radius: 20px !important;
	box-sizing: border-box;
}

.woocommerce-checkout form.checkout #order_review_heading {
	margin: 0 !important;
	padding-bottom: 0 !important;
	border-bottom-left-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
	box-shadow: none;
}

.woocommerce-checkout form.checkout #order_review {
	border-top-left-radius: 0 !important;
	border-top-right-radius: 0 !important;
	padding-top: 1rem !important;
	box-shadow: 0 4px 16px rgba(15, 42, 39, 0.08);
	position: sticky;
	top: 6rem;
}

/* Payment-Methods lesbar machen (sonst bleibt Astra-Default mit grauer Sprechblase). */
.woocommerce-checkout #payment {
	background: transparent !important;
}

.woocommerce-checkout #payment ul.payment_methods {
	padding: 0 !important;
	border-bottom: 1px solid var(--ink-100) !important;
	margin: 0 0 1rem !important;
}

.woocommerce-checkout #payment ul.payment_methods li {
	padding: 0.75rem 0 !important;
	list-style: none;
}

.woocommerce-checkout #payment div.payment_box {
	background: var(--teal-100, #e6f1f0) !important;
	color: var(--ink-900) !important;
	border-radius: 12px !important;
	margin: 0.5rem 0 0 !important;
}

.woocommerce-checkout #payment div.payment_box::before {
	border-bottom-color: var(--teal-100, #e6f1f0) !important;
}

.woocommerce-checkout form.checkout #place_order {
	width: 100%;
	padding: 1rem 1.5rem !important;
	font-size: 1.05rem !important;
}

@media (max-width: 900px) {
	/* Block-Layout statt Grid, damit Astra-Inline-Floats nicht das 2-Spalten-Layout
	   gewinnen. !important nötig, weil Astra-Inline `.woocommerce.woocommerce-checkout
	   form #customer_details.col2-set { float:left; width:55% }` höhere Specificity hat. */
	.woocommerce-checkout form.checkout {
		display: block !important;
		grid-template-columns: none !important;
		grid-template-areas: none !important;
	}
	.woocommerce.woocommerce-checkout form.checkout #customer_details,
	.woocommerce.woocommerce-checkout form.checkout #customer_details.col2-set,
	.woocommerce.woocommerce-checkout form.checkout #order_review_heading,
	.woocommerce.woocommerce-checkout form.checkout #order_review {
		width: 100% !important;
		float: none !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		position: static !important;
	}
}

/* -------- Cart Layout ------------------------------------------------------- */
.woocommerce-cart .woocommerce {
	display: grid;
	grid-template-columns: 1fr 340px;
	gap: 2rem;
}

.woocommerce-cart .woocommerce > form {
	grid-column: 1;
}

.woocommerce-cart .cart-collaterals {
	grid-column: 2;
}

.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce-cart .cart-collaterals .cross-sells {
	width: 100% !important;
	float: none !important;
}

.woocommerce-cart .cart-collaterals .cart_totals {
	background: var(--paper, #fefcf8);
	padding: 1.5rem;
	border-radius: 20px;
	box-shadow: 0 2px 12px rgba(15, 42, 39, 0.08);
	position: sticky;
	top: 6rem;
}

.woocommerce-cart .cart-collaterals .cart_totals h2 {
	font-family: "Poppins", system-ui, sans-serif;
	font-size: 1.25rem;
	margin: 0 0 1rem;
	color: var(--ink-900);
}

.woocommerce-cart .cart-collaterals .cart_totals table.shop_table {
	box-shadow: none !important;
	background: transparent !important;
	border-radius: 0 !important;
}

.woocommerce-cart .cart-collaterals .cart_totals table.shop_table {
	width: 100%;
	table-layout: fixed;
}

.woocommerce-cart .cart-collaterals .cart_totals table.shop_table th,
.woocommerce-cart .cart-collaterals .cart_totals table.shop_table td {
	background: transparent !important;
	padding: 0.75rem 0 !important;
	border: none !important;
	border-bottom: 1px solid var(--ink-100, #e6ebeb) !important;
	font-weight: 500;
}

.woocommerce-cart .cart-collaterals .cart_totals table.shop_table th {
	text-align: left !important;
	color: var(--ink-700);
}

.woocommerce-cart .cart-collaterals .cart_totals table.shop_table td {
	text-align: right !important;
	color: var(--ink-900);
	font-weight: 600;
}

.woocommerce-cart .cart-collaterals .cart_totals table.shop_table tr.order-total th,
.woocommerce-cart .cart-collaterals .cart_totals table.shop_table tr.order-total td {
	font-size: 1.1rem;
	font-weight: 700;
}

.woocommerce-cart .cart-collaterals .cart_totals table.shop_table tr:last-child th,
.woocommerce-cart .cart-collaterals .cart_totals table.shop_table tr:last-child td {
	border-bottom: none !important;
}

.woocommerce-cart .cart-collaterals .wc-proceed-to-checkout {
	padding-top: 1rem;
}

.woocommerce-cart .cart-collaterals .wc-proceed-to-checkout .checkout-button {
	display: block;
	width: 100%;
	text-align: center;
}

@media (max-width: 900px) {
	/* Block statt Grid auf Mobile, damit cart-collaterals sauber unter die
	   Items-Tabelle rutscht (nicht nebenan überlappt). */
	.woocommerce-cart .woocommerce {
		display: block !important;
		grid-template-columns: none !important;
	}
	.woocommerce-cart .cart-collaterals {
		width: 100% !important;
		float: none !important;
		margin-top: 1.5rem !important;
	}
	.woocommerce-cart .cart-collaterals .cart_totals {
		position: static !important;
	}
}

/* -------- My-Account -------------------------------------------------------- */
.woocommerce-account .woocommerce {
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: 2rem;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	padding: 0;
	margin: 0;
	background: var(--paper, #fefcf8);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 2px 12px rgba(15, 42, 39, 0.06);
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
	border-bottom: 1px solid var(--ink-100, #e6ebeb);
}

.woocommerce-account .woocommerce-MyAccount-navigation li:last-child {
	border-bottom: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation a {
	display: block;
	padding: 1rem 1.25rem;
	font-family: "Poppins", system-ui, sans-serif;
	font-weight: 500;
	color: var(--ink-700);
	text-decoration: none;
	transition: background 160ms ease, color 160ms ease;
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation a:hover {
	background: var(--teal-100, #e6f1f0);
	color: var(--teal-700, #265149);
}

@media (max-width: 860px) {
	.woocommerce-account .woocommerce {
		grid-template-columns: 1fr;
	}
}

/* -------- Single-Product ---------------------------------------------------- */
.single-product div.product {
	display: grid;
	grid-template-columns: minmax(260px, 1fr) 1fr;
	gap: 2.5rem;
	align-items: start;
}

.single-product div.product .woocommerce-product-gallery {
	width: auto !important;
	float: none !important;
}

.single-product div.product .summary {
	width: auto !important;
	float: none !important;
}

.single-product div.product .summary .price {
	font-family: "Poppins", system-ui, sans-serif !important;
	font-size: 2rem !important;
	font-weight: 700 !important;
	color: var(--ink-900) !important;
}

.single-product div.product .product_title {
	font-family: "Poppins", system-ui, sans-serif !important;
	font-weight: 700 !important;
	color: var(--ink-900) !important;
}

.single-product .woocommerce-product-gallery__image img {
	border-radius: 20px !important;
}

@media (max-width: 820px) {
	.single-product div.product {
		grid-template-columns: 1fr;
	}
}

/* -------- Quantity Inputs --------------------------------------------------- */
.woocommerce .quantity .qty {
	width: 80px !important;
	text-align: center;
	font-family: "Poppins", system-ui, sans-serif !important;
}

/* -------- Sidebar Widgets (Shop-Sidebar) ----------------------------------- */
.widget_shopping_cart_content {
	font-family: "Poppins", system-ui, sans-serif;
}

/* -------- Elementor-CSS das Buttons neu stylt überschreiben ---------------- */
.elementor-button.elementor-button-link,
.elementor-widget-button .elementor-button {
	transition: transform 160ms ease, box-shadow 160ms ease !important;
}

/* -------- Utility: Buttons innerhalb unserer Sections ---------------------- */
.btn[aria-disabled="true"] {
	opacity: 0.55;
	pointer-events: none;
	cursor: not-allowed;
}

/* -------- Stripe-Payment-Box: Verschachtelung flatten --------------------- */
.payment_box.payment_method_stripe,
.payment_box.payment_method_stripe_klarna {
	padding: 0 !important;
	background: transparent !important;
}
.payment_box.payment_method_stripe::before,
.payment_box.payment_method_stripe_klarna::before {
	display: none !important;
}
.payment_box.payment_method_stripe .wc-upe-form,
.payment_box.payment_method_stripe .wc-payment-form {
	padding: 1rem 0.25rem !important;
	border: 0 !important;
	background: transparent !important;
}
.payment_box.payment_method_stripe .wc-upe-form > fieldset,
.payment_box.payment_method_stripe .wc-payment-form > fieldset,
.payment_box.payment_method_stripe fieldset > fieldset {
	border: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	background: transparent !important;
}
/* WooPayments-spezifisch (sieht baugleich aus) */
.payment_box.payment_method_woocommerce_payments {
	padding: 0 !important;
	background: transparent !important;
}
.payment_box.payment_method_woocommerce_payments::before {
	display: none !important;
}

/* -------- Cart + Checkout: weniger Abstand zum Header ---------------------- */
.woocommerce-cart #main.sqrd-shop,
.woocommerce-checkout #main.sqrd-shop {
	padding-top: 24px !important;
}
.woocommerce-cart #main.sqrd-shop > .section,
.woocommerce-checkout #main.sqrd-shop > .section {
	padding-top: 24px !important;
	padding-bottom: 48px !important;
}

/* -------- Express-Checkout (WooPayments / Stripe Apple Pay / Google Pay) ---
 * WooPayments injectet `.wcpay-express-checkout-wrapper` als ERSTES Child
 * der `form.checkout`. Die Form ist aber `display: grid` mit 2 Spalten →
 * das auto-placed den Wrapper unten links. Wir holen ihn nach OBEN und
 * lassen ihn über beide Spalten spannen, damit Apple/Google Pay sofort
 * sichtbar sind (höchste Conversion-Chance).
 */
form.checkout.woocommerce-checkout {
	grid-template-areas: "express express" "billing review" !important;
}
form.checkout.woocommerce-checkout .wcpay-express-checkout-wrapper {
	grid-area: express !important;
	max-width: 720px;
	margin: 0 auto 2rem !important;
	width: 100%;
}
form.checkout.woocommerce-checkout #customer_details,
form.checkout.woocommerce-checkout .col2-set {
	grid-area: billing !important;
}
form.checkout.woocommerce-checkout #order_review_heading,
form.checkout.woocommerce-checkout #order_review,
form.checkout.woocommerce-checkout .woocommerce-checkout-review-order {
	grid-area: review !important;
}

/* "— ODER —" Trenner unter den Express-Buttons */
#wcpay-express-checkout-button-separator {
	text-align: center;
	color: var(--ink-400, #6b7480);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin: 1rem 0 0;
	position: relative;
}

/* -------- Gutschein-Form (Cart + Checkout) --------------------------------- */
/* WC rendert im Checkout die Coupon-Form verschachtelt, wodurch der
   <form class="checkout_coupon">-Wrapper vom Browser entfernt wird.
   Darum Selektoren direkt auf Input/Button. */
input#coupon_code,
.woocommerce input#coupon_code {
	font-family: "Poppins", system-ui, sans-serif !important;
	font-size: 1rem !important;
	padding: 0.8rem 1rem !important;
	border: 1px solid var(--ink-200, #d8dedd) !important;
	border-radius: 999px !important;
	background: #fff !important;
	color: var(--ink-900, #0b1a19) !important;
	min-height: 48px !important;
	height: 48px !important;
	box-sizing: border-box !important;
	min-width: 150px !important;
	max-width: 170px !important;
	width: 170px !important;
}

.woocommerce-checkout input#coupon_code {
	min-width: 0 !important;
	max-width: none !important;
	width: 100% !important;
}

/* Coupon-Zeile im Order-Review: First-Row füllt Restbreite, Last-Row passt
   sich dem Button an. Treffer nur auf direkte .form-row-Kinder von
   #order_review (Billing-Fields liegen in #customer_details, sind nicht betroffen). */
#order_review > p.form-row.form-row-first {
	width: calc(100% - 220px) !important;
	max-width: none !important;
	padding: 0 !important;
	margin: 0 !important;
	float: left !important;
	box-sizing: border-box;
}

#order_review > p.form-row.form-row-last {
	width: auto !important;
	max-width: none !important;
	padding: 0 !important;
	margin: 0 !important;
	float: right !important;
}

/* Apply-Coupon: Orange-Outlined (orangener Text, weißer Hintergrund, dünner
   orangener Rand, Pill-Radius, kein Shadow, Text einzeilig). */
button[name="apply_coupon"],
input[name="apply_coupon"],
.woocommerce button[name="apply_coupon"],
.woocommerce input[name="apply_coupon"] {
	border-radius: 999px !important;
	background: #fff !important;
	color: var(--orange-500, #ff8360) !important;
	border: 1px solid var(--orange-500, #ff8360) !important;
	box-shadow: none !important;
	padding: 0.85rem 1rem !important;
	font-size: 0.95rem !important;
	white-space: nowrap !important;
}

button[name="apply_coupon"]:hover,
input[name="apply_coupon"]:hover,
.woocommerce button[name="apply_coupon"]:hover,
.woocommerce input[name="apply_coupon"]:hover {
	background: rgba(255, 131, 96, 0.08) !important;
	color: var(--orange-600, #e06840) !important;
	border-color: var(--orange-600, #e06840) !important;
	box-shadow: none !important;
	transform: translateY(-1px);
}

/* -------- Cart: Actions-Row (Coupon links, Update-Cart rechts) ------------ */
/* NOTE: td bleibt display: table-cell (flex würde colspan zerstören).
   Coupon als float:left, Update-Cart als float:right. */
.woocommerce-cart table.cart td.actions {
	padding: 1rem 1.25rem !important;
	vertical-align: middle;
}

.woocommerce-cart table.cart td.actions .coupon {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	float: left !important;
	margin: 0 !important;
}

.woocommerce-cart table.cart td.actions button[name="update_cart"] {
	float: right !important;
	margin: 0 !important;
}

.woocommerce-cart table.cart td.actions::after {
	content: "";
	display: table;
	clear: both;
}

/* -------- Cart: Update-Cart-Button als Outlined-Style ---------------------- */
.woocommerce-cart .cart-collaterals ~ * .actions button[name="update_cart"],
.woocommerce-cart button[name="update_cart"],
.woocommerce-cart input[name="update_cart"] {
	background: #fff !important;
	color: var(--teal-500, #346861) !important;
	border: 1px solid var(--teal-500, #346861) !important;
	box-shadow: none !important;
	border-radius: 999px !important;
	white-space: nowrap !important;
	padding: 0.85rem 1.25rem !important;
	font-size: 0.95rem !important;
	font-weight: 600;
	line-height: 1.2 !important;
}

/* Beide Cart-Action-Buttons auf gleiche Höhe + vertikal zentriert. */
.woocommerce-cart table.cart td.actions button[name="apply_coupon"],
.woocommerce-cart table.cart td.actions button[name="update_cart"] {
	min-height: 48px;
	height: 48px;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.woocommerce-cart button[name="update_cart"]:hover,
.woocommerce-cart input[name="update_cart"]:hover,
.woocommerce-cart button[name="update_cart"]:focus,
.woocommerce-cart input[name="update_cart"]:focus {
	background: var(--teal-100, #e6f1f0) !important;
	color: var(--teal-700, #265149) !important;
	border-color: var(--teal-700, #265149) !important;
	box-shadow: none !important;
	transform: translateY(-1px);
}

/* -------- Cart: "Zusammenfassung"-Heading transparent (matcht Card) -------- */
.woocommerce-cart .cart-collaterals .cart_totals h2,
.woocommerce-cart .cart-collaterals .cart_totals > h2 {
	background: transparent !important;
	padding: 0 !important;
	border: none !important;
}

/* -------- Checkout: Zusätzliche-Informationen-Block ausblenden ------------- */
.woocommerce-checkout .woocommerce-additional-fields {
	display: none !important;
}

/* -------- Checkout: „Deine Auswahl"-Heading nahtlos an Card ---------------- */
/* Heading teilt Paper-Bg mit Review-Card, damit kein sichtbarer Absatz entsteht. */
.woocommerce-checkout form.checkout #order_review_heading {
	background: var(--paper, #fefcf8) !important;
	box-shadow: none !important;
}

.woocommerce-checkout form.checkout #order_review {
	box-shadow: 0 10px 24px -10px rgba(15, 42, 39, 0.18) !important;
}

/* -------- Shop-Template (tpl-shop.php) ------------------------------------- */
.sqrd-shop .container {
	max-width: 1120px;
}

.sqrd-shop .shop-head {
	margin-bottom: 2rem;
}

.sqrd-shop .shop-title {
	font-family: "Poppins", system-ui, sans-serif;
	font-size: clamp(1.75rem, 3.5vw, 2.5rem);
	font-weight: 700;
	color: var(--ink-900, #0b1a19);
	margin: 0 0 0.5rem;
	letter-spacing: -0.01em;
}

.sqrd-shop .shop-title::after {
	content: none !important;
}

.sqrd-shop .shop-content > p:first-child:empty {
	display: none;
}

/* Account-Login/Register im Cart-/Checkout-Flow: Spaltenlayout auf Desktop */
.sqrd-shop .u-columns {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
}

@media (max-width: 720px) {
	.sqrd-shop .u-columns {
		grid-template-columns: 1fr;
	}
}

/* Cart-Seite: wenn WC den äußeren .woocommerce in .entry-content packt. */
.sqrd-shop .woocommerce {
	font-family: "Poppins", system-ui, sans-serif;
}

/* Typografie-Reset: keine Wave-Underlines oder ::after-Striche auf WC-H2. */
.sqrd-shop h2::after,
.sqrd-shop h3::after {
	content: none !important;
	display: none !important;
}

/* Headings innerhalb von WC-Markup sauber halten. */
.sqrd-shop .woocommerce h2,
.sqrd-shop .woocommerce h3 {
	font-family: "Poppins", system-ui, sans-serif;
	font-weight: 700;
	color: var(--ink-900, #0b1a19);
	font-size: 1.35rem;
	margin: 0 0 1rem;
}

.sqrd-shop .woocommerce #order_review_heading {
	font-size: 1.35rem;
	margin: 0 0 1rem;
}

/* -------- Mobile: Cart + Checkout overflow fixes --------------------------- */
@media (max-width: 720px) {
	/* Tabellen-Padding kompakter, Inhalte umbrechen lassen */
	.woocommerce table.shop_table th,
	.woocommerce table.shop_table td {
		padding: 0.75rem 0.6rem !important;
		font-size: 0.95rem;
		word-break: break-word;
		overflow-wrap: anywhere;
	}

	/* Cart-Items: Quantity kompakter */
	.woocommerce-cart table.cart .quantity .qty {
		width: 60px !important;
	}

	/* Cart Actions-Row: Coupon-Input + Apply-Button vertikal stacken, dann
	   Update-Cart als dritte Reihe. Eng-Mobile-Viewport hat zu wenig Platz für
	   side-by-side ohne Text-Clip. */
	.woocommerce-cart table.cart td.actions {
		padding: 0.75rem 0.6rem !important;
	}
	.woocommerce-cart table.cart td.actions .coupon {
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
		float: none !important;
		width: 100%;
		margin: 0 0 0.75rem !important;
	}
	.woocommerce-cart table.cart td.actions .coupon input#coupon_code {
		width: 100% !important;
		min-width: 0 !important;
		max-width: none !important;
	}
	.woocommerce-cart table.cart td.actions .coupon button[name="apply_coupon"],
	.woocommerce-cart table.cart td.actions .coupon input[name="apply_coupon"] {
		width: 100%;
	}
	.woocommerce-cart table.cart td.actions button[name="update_cart"],
	.woocommerce-cart table.cart td.actions input[name="update_cart"] {
		float: none !important;
		display: block;
		width: 100%;
	}

	/* Checkout: Order-Review-Card-Padding reduzieren */
	.woocommerce-checkout form.checkout #order_review_heading,
	.woocommerce-checkout form.checkout #order_review {
		padding: 1rem !important;
	}

	/* Checkout: Coupon-Form im Order-Review vertikal stacken. Selektoren ohne
	   Direct-Child-Combinator, damit auch verschachtelte form.checkout_coupon
	   matches (input + button sind dort als <p.form-row> drin, nicht direkt
	   unter #order_review). */
	#order_review p.form-row.form-row-first,
	#order_review p.form-row.form-row-last,
	form.checkout_coupon p.form-row.form-row-first,
	form.checkout_coupon p.form-row.form-row-last {
		width: 100% !important;
		float: none !important;
		margin: 0 0 0.5rem !important;
	}
	form.checkout_coupon p.form-row.form-row-last button[name="apply_coupon"],
	form.checkout_coupon p.form-row.form-row-last input[name="apply_coupon"] {
		width: 100%;
	}

	/* Notice/Info/Error-Messages: weniger Padding (Erfolgs-Banner im Cart) */
	.woocommerce-message,
	.woocommerce-info,
	.woocommerce-error {
		padding: 0.875rem 1rem 0.875rem 2.5rem !important;
	}

	/* Payment-Methods-Liste: weniger Padding */
	.woocommerce-checkout #payment ul.payment_methods,
	.woocommerce-checkout #payment div.payment_box {
		padding: 0.75rem !important;
	}
}

/* ============================================================================
   Checkout-Review: Mengen-Stepper + Remove-Button
   nowrap-Flex damit WC-Defaults (input { width:100% } in .shop_table) den
   Stepper nicht aufblaehen; alle Kontroll-Elemente content-width via flex:0 0 auto.
   ============================================================================ */
.sqrd-checkout-review td.product-name {
	vertical-align: middle !important;
	padding: 0.7rem 0.6rem !important;
}
.sqrd-checkout-review tr.is-loading {
	opacity: 0.5;
	pointer-events: none;
	transition: opacity 0.15s;
}
.sqrd-checkout-row {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 0.45rem 0.5rem !important;
	width: 100% !important;
	text-align: left !important;
}
.sqrd-checkout-name {
	flex: 1 1 100% !important;
	min-width: 0 !important;
	width: 100% !important;
	font-weight: 600;
	color: var(--ink-700, #0b1a19);
	line-height: 1.3;
	word-break: break-word;
	margin-bottom: 0.15rem;
}
.sqrd-checkout-qty {
	display: inline-flex !important;
	flex: 0 0 auto !important;
	align-items: stretch !important;
	width: auto !important;
	background: #fff !important;
	border: 1px solid var(--ink-200, #d8dedd) !important;
	border-radius: 999px !important;
	overflow: hidden;
	height: 30px;
}
.sqrd-checkout-qty .sqrd-qty-btn,
.sqrd-checkout-qty .sqrd-qty-input {
	flex: 0 0 auto !important;
	height: 28px !important;
	box-sizing: border-box;
	margin: 0 !important;
}
.sqrd-qty-btn {
	width: 28px !important;
	min-width: 28px !important;
	max-width: 28px !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	color: var(--teal-500, #178b7a) !important;
	font-size: 1.05rem !important;
	font-weight: 600;
	line-height: 1;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: none !important;
	border-radius: 0 !important;
	transition: background 0.15s, color 0.15s;
}
.sqrd-qty-btn:hover,
.sqrd-qty-btn:focus,
.sqrd-qty-btn:focus-visible {
	background: var(--teal-050, #e6f4f1) !important;
	color: var(--teal-700, #0f6c5d) !important;
	outline: none;
}
.sqrd-qty-btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}
.sqrd-qty-input {
	width: 30px !important;
	min-width: 30px !important;
	max-width: 30px !important;
	border: 0 !important;
	border-left: 1px solid var(--ink-100, #eef1f0) !important;
	border-right: 1px solid var(--ink-100, #eef1f0) !important;
	background: transparent !important;
	text-align: center !important;
	font-weight: 600;
	font-size: 0.92rem !important;
	color: var(--ink-700, #0b1a19) !important;
	padding: 0 !important;
	border-radius: 0 !important;
	-moz-appearance: textfield;
	pointer-events: none;
	box-shadow: none !important;
}
.sqrd-qty-input::-webkit-outer-spin-button,
.sqrd-qty-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.sqrd-checkout-remove {
	flex: 0 0 auto !important;
	width: 26px !important;
	height: 26px !important;
	min-width: 26px !important;
	max-width: 26px !important;
	padding: 0 !important;
	border-radius: 999px !important;
	background: var(--ink-100, #eef1f0) !important;
	color: var(--ink-500, #6b7480) !important;
	border: 0 !important;
	box-shadow: none !important;
	font-size: 0.95rem !important;
	font-weight: 600;
	line-height: 1;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
	margin: 0 !important;
}
.sqrd-checkout-remove:hover,
.sqrd-checkout-remove:focus,
.sqrd-checkout-remove:focus-visible {
	background: var(--orange-100, #ffeae1) !important;
	color: var(--orange-600, #d4633e) !important;
	outline: none;
}