/* =============================================================================
   30-woocommerce.css — Shop-Layer
   =============================================================================

   Wird über functions.php nur geladen, wenn WooCommerce aktiv ist.

   Ausrichtung: digitale Produkte (Plugins/Lizenzen), B2B-Kundschaft.
   Deshalb liegt der Schwerpunkt auf Preis-/Steuerdarstellung, Kasse,
   Downloads und Bestellübersicht — nicht auf Lookbook-Optik.

   Alle Werte kommen aus 00-tokens.css. Enthält keine eigenen Farbwerte.
   ========================================================================== */


/* -----------------------------------------------------------------------------
   1. Buttons — Woo bringt eigene .button-Klassen mit
   -------------------------------------------------------------------------- */

#top .woocommerce a.button,
#top .woocommerce button.button,
#top .woocommerce input.button,
#top .woocommerce #respond input#submit,
#top .woocommerce a.button.alt,
#top .woocommerce button.button.alt,
#top .woocommerce input.button.alt {
	/* display/position hier bewusst selbst gesetzt und nicht von WooCommerces
	   eigenem Stylesheet geerbt — sonst kippt das Layout, sobald jemand die
	   Woo-Standard-Styles abschaltet (gängige Performance-Maßnahme). */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	font-family: var(--sp-font-body);
	font-weight: var(--sp-fw-semibold);
	font-size: var(--sp-fs-sm);
	line-height: 1.2;
	padding: 13px 24px;
	border-radius: var(--sp-radius);
	border: var(--sp-border-width) solid var(--sp-rule-strong);
	background-color: transparent;
	color: var(--sp-ink);
	text-shadow: none;
	box-shadow: none;
	transition: background-color var(--sp-transition), color var(--sp-transition), border-color var(--sp-transition);
}

#top .woocommerce a.button:hover,
#top .woocommerce button.button:hover,
#top .woocommerce input.button:hover {
	background-color: var(--sp-ink);
	border-color: var(--sp-ink);
	color: #fff;
}

/* Die Haupt-Aktionen (In den Warenkorb, Zur Kasse, Bestellen) in Orange. */
#top .woocommerce a.button.alt,
#top .woocommerce button.button.alt,
#top .woocommerce input.button.alt,
#top .woocommerce .single_add_to_cart_button,
#top .woocommerce .checkout-button,
#top .woocommerce #place_order {
	background-color: var(--sp-accent);
	border-color: var(--sp-accent);
	color: #fff;
}

#top .woocommerce a.button.alt:hover,
#top .woocommerce button.button.alt:hover,
#top .woocommerce input.button.alt:hover,
#top .woocommerce .single_add_to_cart_button:hover,
#top .woocommerce .checkout-button:hover,
#top .woocommerce #place_order:hover {
	background-color: var(--sp-ink);
	border-color: var(--sp-ink);
	color: #fff;
}

#top .woocommerce a.button.disabled,
#top .woocommerce button.button:disabled,
#top .woocommerce input.button:disabled {
	background-color: var(--sp-panel-alt);
	border-color: var(--sp-rule);
	color: var(--sp-ink-3);
	opacity: 1;
}


/* -----------------------------------------------------------------------------
   2. Produktübersicht (Shop-Loop)
   -------------------------------------------------------------------------- */

#top .woocommerce ul.products li.product {
	position: relative;          /* Bezugspunkt für das Angebots-Badge */
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	background-color: var(--sp-panel);
	border: var(--sp-border);
	border-radius: var(--sp-radius);
	padding: var(--sp-space-5);
	text-align: left;
	transition: border-color var(--sp-transition);
}

/* Der Button sitzt unten bündig, damit unterschiedlich lange
   Pflichtangaben die Kachelhöhen nicht auseinanderziehen. */
#top .woocommerce ul.products li.product > .button {
	margin-top: auto;
}

#top .woocommerce ul.products li.product:hover {
	border-color: var(--sp-rule-strong);
}

#top .woocommerce ul.products li.product .woocommerce-loop-product__title,
#top .woocommerce ul.products li.product h2,
#top .woocommerce ul.products li.product h3 {
	font-family: var(--sp-font-display);
	font-weight: var(--sp-fw-semibold);
	font-size: 17px;
	letter-spacing: 0;
	color: var(--sp-ink);
	padding: 0;
	margin: var(--sp-space-3) 0 var(--sp-space-2) 0;
}

#top .woocommerce ul.products li.product img {
	border-radius: var(--sp-radius);
	margin-bottom: 0;
}

/* "Sale"-Badge: eckig, orange, oben links. */
#top .woocommerce span.onsale,
#top .woocommerce ul.products li.product .onsale {
	position: absolute;
	z-index: 2;
	background-color: var(--sp-accent);
	color: #fff;
	border-radius: var(--sp-radius);
	font-family: var(--sp-font-mono);
	font-size: var(--sp-fs-xs);
	font-weight: var(--sp-fw-semibold);
	text-transform: uppercase;
	letter-spacing: var(--sp-tracking-wide);
	line-height: 1;
	min-height: 0;
	min-width: 0;
	padding: 6px 10px;
	top: 0;
	left: 0;
	right: auto;
	margin: 0;
}

/* Bewertungssterne kommen im B2B-Softwareverkauf selten vor —
   falls doch, in Markenfarbe statt Woo-Lila. */
#top .woocommerce .star-rating span::before,
#top .woocommerce .star-rating::before {
	color: var(--sp-accent);
}


/* -----------------------------------------------------------------------------
   3. Preise
   -----------------------------------------------------------------------------
   Bei B2B zählt die Nettodarstellung plus deutlicher Steuerhinweis.
   -------------------------------------------------------------------------- */

#top .woocommerce .price,
#top .woocommerce ul.products li.product .price,
#top .woocommerce div.product p.price,
#top .woocommerce div.product span.price {
	font-family: var(--sp-font-display);
	font-weight: var(--sp-fw-semibold);
	font-size: var(--sp-fs-lg);
	color: var(--sp-ink);
	font-variant-numeric: tabular-nums;
}

#top .woocommerce .price del {
	color: var(--sp-ink-3);
	font-weight: var(--sp-fw-normal);
	opacity: 1;
}

#top .woocommerce .price ins {
	color: var(--sp-accent);
	text-decoration: none;
	font-weight: var(--sp-fw-semibold);
}

/* Steuerhinweis / Preis-Suffix ("zzgl. MwSt.") klein und ruhig. */
#top .woocommerce .price .woocommerce-price-suffix,
#top .woocommerce .tax_label,
#top .woocommerce .includes_tax {
	display: block;
	font-family: var(--sp-font-mono);
	font-size: var(--sp-fs-xs);
	font-weight: var(--sp-fw-normal);
	text-transform: uppercase;
	letter-spacing: var(--sp-tracking-wide);
	color: var(--sp-ink-3);
	margin-top: var(--sp-space-1);
}


/* -----------------------------------------------------------------------------
   4. Produktdetailseite
   -------------------------------------------------------------------------- */

#top .woocommerce div.product .product_title {
	font-family: var(--sp-font-display);
	font-weight: var(--sp-fw-medium);
	letter-spacing: var(--sp-tracking-tight);
	color: var(--sp-ink);
}

#top .woocommerce div.product .woocommerce-product-details__short-description {
	font-size: var(--sp-fs-md);
	line-height: var(--sp-lh-base);
	color: var(--sp-ink-2);
	max-width: var(--sp-measure);
}

/* Meta-Angaben (SKU, Kategorie) als Monospace-Zeile. */
#top .woocommerce div.product .product_meta {
	font-family: var(--sp-font-mono);
	font-size: var(--sp-fs-xs);
	text-transform: uppercase;
	letter-spacing: var(--sp-tracking-wide);
	color: var(--sp-ink-3);
	border-top: var(--sp-border);
	padding-top: var(--sp-space-4);
	margin-top: var(--sp-space-5);
}

#top .woocommerce div.product .product_meta a {
	color: var(--sp-brand-dark);
}

/* Mengenfeld */
#top .woocommerce .quantity .qty {
	font-family: var(--sp-font-mono);
	border: var(--sp-border-strong);
	border-radius: var(--sp-radius);
	background: var(--sp-panel);
	color: var(--sp-ink);
	padding: 11px 8px;
	height: auto;
}

/* Produkt-Tabs */
#top .woocommerce div.product .woocommerce-tabs ul.tabs {
	padding: 0;
	margin: 0 0 var(--sp-space-5) 0;
	border-bottom: var(--sp-border);
	display: flex;
	gap: 0;
}

#top .woocommerce div.product .woocommerce-tabs ul.tabs::before,
#top .woocommerce div.product .woocommerce-tabs ul.tabs li::before,
#top .woocommerce div.product .woocommerce-tabs ul.tabs li::after {
	display: none;
}

#top .woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: transparent;
	border: 0;
	border-radius: var(--sp-radius);
	margin: 0;
	padding: 0;
	box-shadow: none;
}

#top .woocommerce div.product .woocommerce-tabs ul.tabs li a {
	font-family: var(--sp-font-mono);
	font-size: var(--sp-fs-xs);
	font-weight: var(--sp-fw-semibold);
	text-transform: uppercase;
	letter-spacing: var(--sp-tracking-wide);
	color: var(--sp-ink-3);
	padding: var(--sp-space-3) var(--sp-space-4);
	display: block;
	border-bottom: 2px solid transparent;
}

#top .woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
#top .woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
	color: var(--sp-ink);
	border-bottom-color: var(--sp-accent);
}


/* -----------------------------------------------------------------------------
   5. Hinweise (Meldungen, Fehler, Infos)
   -----------------------------------------------------------------------------
   Gleiche Sprache wie die Prüfbericht-Meldungen: farbige Kante links,
   keine Rundung, ruhiger Hintergrund.
   -------------------------------------------------------------------------- */

#top .woocommerce-message,
#top .woocommerce-info,
#top .woocommerce-error,
#top .woocommerce-notice {
	border-radius: var(--sp-radius);
	border: var(--sp-border);
	border-left: 3px solid var(--sp-brand);
	background-color: var(--sp-panel-alt);
	color: var(--sp-ink);
	font-size: var(--sp-fs-sm);
	line-height: var(--sp-lh-base);
	padding: var(--sp-space-4) var(--sp-space-5);
	list-style: none;
}

#top .woocommerce-message::before,
#top .woocommerce-info::before,
#top .woocommerce-error::before {
	display: none;
}

#top .woocommerce-message {
	border-left-color: var(--sp-ok);
	background-color: var(--sp-ok-bg);
}

#top .woocommerce-info {
	border-left-color: var(--sp-brand);
	background-color: var(--sp-brand-soft);
}

#top .woocommerce-error {
	border-left-color: var(--sp-error);
	background-color: var(--sp-error-bg);
}


/* -----------------------------------------------------------------------------
   6. Formularfelder (Kasse, Adressen, Konto)
   -------------------------------------------------------------------------- */

#top .woocommerce form .form-row label,
#top .woocommerce-page form .form-row label {
	font-family: var(--sp-font-body);
	font-size: var(--sp-fs-sm);
	font-weight: var(--sp-fw-semibold);
	color: var(--sp-ink);
	margin-bottom: var(--sp-space-2);
}

#top .woocommerce form .form-row .required {
	color: var(--sp-error);
	text-decoration: none;
}

#top .woocommerce form .form-row input.input-text,
#top .woocommerce form .form-row textarea,
#top .woocommerce form .form-row select,
#top .woocommerce-page form .form-row input.input-text {
	font-family: var(--sp-font-body);
	font-size: var(--sp-fs-sm);
	color: var(--sp-ink);
	background-color: var(--sp-panel);
	border: var(--sp-border-strong);
	border-radius: var(--sp-radius);
	padding: 11px 12px;
	box-shadow: none;
	transition: border-color var(--sp-transition);
}

#top .woocommerce form .form-row input.input-text:focus,
#top .woocommerce form .form-row textarea:focus,
#top .woocommerce form .form-row select:focus {
	border-color: var(--sp-brand);
	outline: none;
}

#top .woocommerce form .form-row.woocommerce-invalid input.input-text,
#top .woocommerce form .form-row.woocommerce-invalid select {
	border-color: var(--sp-error);
}

#top .woocommerce form .form-row.woocommerce-validated input.input-text {
	border-color: var(--sp-ok);
}

/* Strukturierte Kennungen monospace — USt-IdNr., IBAN, Leitweg-ID.
   Greift automatisch über die Feld-ID, zusätzlich per Klasse .sp-mono-field
   an beliebigen Feldern nachrüstbar. */
#top .woocommerce form .form-row input#billing_vat_id,
#top .woocommerce form .form-row input[id*="vat"],
#top .woocommerce form .form-row input[id*="ust"],
#top .woocommerce form .form-row input[id*="iban"],
#top .woocommerce form .form-row input[id*="leitweg"],
#top .woocommerce form .form-row.sp-mono-field input.input-text {
	font-family: var(--sp-font-mono);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* select2 (Land/Bundesland) an die eckige Optik angleichen. */
#top .woocommerce .select2-container .select2-selection--single,
#top .select2-container .select2-selection--single {
	border: var(--sp-border-strong);
	border-radius: var(--sp-radius);
	height: auto;
	padding: 8px 4px;
	background-color: var(--sp-panel);
}

#top .select2-container--default .select2-selection--single .select2-selection__rendered {
	color: var(--sp-ink);
	font-size: var(--sp-fs-sm);
	line-height: 1.5;
}

#top .select2-dropdown,
#top .select2-container--default .select2-search--dropdown .select2-search__field {
	border-radius: var(--sp-radius);
	border-color: var(--sp-rule-strong);
}

#top .select2-container--default .select2-results__option--highlighted[aria-selected] {
	background-color: var(--sp-brand-dark);
	color: #fff;
}


/* -----------------------------------------------------------------------------
   7. Warenkorb & Kasse
   -------------------------------------------------------------------------- */

#top .woocommerce table.shop_table,
#top .woocommerce table.shop_table_responsive {
	border: var(--sp-border);
	border-radius: var(--sp-radius);
	border-collapse: collapse;
}

#top .woocommerce table.shop_table th {
	background-color: var(--sp-panel-alt);
	font-family: var(--sp-font-mono);
	font-size: var(--sp-fs-xs);
	font-weight: var(--sp-fw-semibold);
	text-transform: uppercase;
	letter-spacing: var(--sp-tracking-wide);
	color: var(--sp-ink-3);
	border-bottom: var(--sp-border);
	padding: var(--sp-space-3) var(--sp-space-4);
}

#top .woocommerce table.shop_table td {
	font-size: var(--sp-fs-sm);
	border-top: var(--sp-border);
	padding: var(--sp-space-4);
	color: var(--sp-ink);
}

#top .woocommerce table.shop_table .product-name a {
	font-weight: var(--sp-fw-semibold);
	color: var(--sp-ink);
}

#top .woocommerce table.shop_table .amount {
	font-variant-numeric: tabular-nums;
	font-weight: var(--sp-fw-semibold);
}

/* Summenblock */
#top .woocommerce .cart_totals,
#top .woocommerce-checkout #order_review {
	background-color: var(--sp-panel);
	border: var(--sp-border);
	border-radius: var(--sp-radius);
	padding: var(--sp-space-5);
}

#top .woocommerce .cart_totals h2,
#top .woocommerce-checkout #order_review_heading {
	font-family: var(--sp-font-display);
	font-weight: var(--sp-fw-semibold);
	font-size: var(--sp-fs-lg);
	margin-bottom: var(--sp-space-4);
}

#top .woocommerce .cart_totals .order-total .amount,
#top .woocommerce-checkout #order_review .order-total .amount {
	font-family: var(--sp-font-display);
	font-size: var(--sp-fs-xl);
	font-weight: var(--sp-fw-bold);
	color: var(--sp-ink);
}

/* Gutschein */
#top .woocommerce .cart .coupon input.input-text {
	border: var(--sp-border-strong);
	border-radius: var(--sp-radius);
	padding: 11px 12px;
	font-family: var(--sp-font-mono);
	text-transform: uppercase;
}

/* Zahlungsarten */
#top .woocommerce-checkout #payment {
	background-color: var(--sp-panel-alt);
	border: var(--sp-border);
	border-radius: var(--sp-radius);
}

#top .woocommerce-checkout #payment ul.payment_methods {
	border-bottom: var(--sp-border);
	padding: var(--sp-space-4);
}

#top .woocommerce-checkout #payment ul.payment_methods li {
	font-size: var(--sp-fs-sm);
}

#top .woocommerce-checkout #payment ul.payment_methods li label {
	font-weight: var(--sp-fw-semibold);
	color: var(--sp-ink);
}

#top .woocommerce-checkout #payment div.payment_box {
	background-color: var(--sp-panel);
	border: var(--sp-border);
	border-radius: var(--sp-radius);
	font-size: var(--sp-fs-sm);
	color: var(--sp-ink-2);
}

#top .woocommerce-checkout #payment div.payment_box::before {
	display: none;
}

/* AGB-/Datenschutz-Checkbox gut sichtbar. */
#top .woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
	font-size: var(--sp-fs-sm);
	color: var(--sp-ink-2);
	border-top: var(--sp-border);
	padding-top: var(--sp-space-4);
	margin-top: var(--sp-space-4);
}


/* -----------------------------------------------------------------------------
   8. Mein Konto — bei digitalen Produkten die wichtigste Seite
   -------------------------------------------------------------------------- */

#top .woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border: var(--sp-border);
	border-radius: var(--sp-radius);
	background-color: var(--sp-panel);
}

#top .woocommerce-account .woocommerce-MyAccount-navigation ul li {
	border-bottom: var(--sp-border);
	margin: 0;
	padding: 0;
}

#top .woocommerce-account .woocommerce-MyAccount-navigation ul li:last-child {
	border-bottom: 0;
}

#top .woocommerce-account .woocommerce-MyAccount-navigation ul li a {
	display: block;
	padding: var(--sp-space-3) var(--sp-space-4);
	font-size: var(--sp-fs-sm);
	font-weight: var(--sp-fw-medium);
	color: var(--sp-ink-2);
}

#top .woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
	background-color: var(--sp-brand-soft);
	color: var(--sp-brand-dark);
	font-weight: var(--sp-fw-semibold);
	box-shadow: inset 3px 0 0 var(--sp-brand);
}

/* Downloads-/Lizenz-Tabelle: Schlüssel und Dateinamen monospace. */
#top .woocommerce table.woocommerce-table--order-downloads td.download-file a,
#top .woocommerce table.my_account_orders td.order-number a,
#top .woocommerce .woocommerce-order-overview__order strong,
#top .woocommerce .sp-license-key {
	font-family: var(--sp-font-mono);
	font-size: var(--sp-fs-sm);
	letter-spacing: 0.02em;
}

/* Bestellstatus als eckiges Label. */
#top .woocommerce table.my_account_orders td.order-status,
#top .woocommerce .sp-order-status {
	font-family: var(--sp-font-mono);
	font-size: var(--sp-fs-xs);
	font-weight: var(--sp-fw-semibold);
	text-transform: uppercase;
	letter-spacing: var(--sp-tracking-wide);
	color: var(--sp-ink-2);
}


/* -----------------------------------------------------------------------------
   9. Sonstiges
   -------------------------------------------------------------------------- */

/* Ergebnis-/Sortierleiste über dem Shop. */
#top .woocommerce .woocommerce-result-count,
#top .woocommerce .woocommerce-ordering select {
	font-family: var(--sp-font-mono);
	font-size: var(--sp-fs-xs);
	text-transform: uppercase;
	letter-spacing: var(--sp-tracking-wide);
	color: var(--sp-ink-3);
}

/* Blätterfunktion */
#top .woocommerce nav.woocommerce-pagination ul,
#top .woocommerce nav.woocommerce-pagination ul li {
	border-color: var(--sp-rule);
	border-radius: var(--sp-radius);
}

#top .woocommerce nav.woocommerce-pagination ul li a,
#top .woocommerce nav.woocommerce-pagination ul li span.current {
	font-family: var(--sp-font-mono);
	font-size: var(--sp-fs-sm);
	padding: var(--sp-space-2) var(--sp-space-3);
}

#top .woocommerce nav.woocommerce-pagination ul li span.current {
	background-color: var(--sp-ink);
	color: #fff;
}

/* Warenkorb-Zähler im Enfold-Header. */
#top #header .cart_dropdown .av-cart-counter {
	background-color: var(--sp-accent);
	border-radius: var(--sp-radius);
	font-family: var(--sp-font-mono);
	font-size: 10px;
	font-weight: var(--sp-fw-bold);
}


/* -----------------------------------------------------------------------------
   10. Responsive
   -------------------------------------------------------------------------- */

@media only screen and (max-width: 767px) {

	#top .woocommerce .cart_totals,
	#top .woocommerce-checkout #order_review {
		padding: var(--sp-space-4);
	}

	#top .woocommerce table.shop_table td {
		padding: var(--sp-space-3);
	}

	#top .woocommerce div.product .woocommerce-tabs ul.tabs {
		flex-wrap: wrap;
	}
}