/* ==========================================================================
   TB Spreadshop Overrides
   --------------------------------------------------------------------------
   Alle Regeln, die Spreadshop-eigene UI-Elemente betreffen (CSS-Klassen mit
   .sprd- oder .SprdMain Prefix). Vorher im Customizer als "Zusätzliches CSS"
   gepflegt – jetzt versioniert, kommentiert und ohne überzählige Klammer.

   Reihenfolge:
   1. Spreadshop-eigene Elemente verstecken (Header, Footer, Signup, Title)
   2. Layout-Korrekturen (Padding, Negative-Margins, Promo-Header-Spacer)
   3. Buttons + Inputs (Farbe, Größe)
   4. Promo-Header (Farben weiß)
   5. Promo-Banner (eigener Banner über Spreadshop-Page-Load)
   6. Mobile-Anpassungen
   ========================================================================== */

/* 1. Spreadshop-UI-Elemente verstecken (durch BeTheme-UI ersetzt) ---------- */
footer#sprd-footer,
div#sprd-signup-banner,
.sprd-header.sprd-bg-m1.sprd-c-s3,
.sprd-designer__title.sprd-header__title.sprd__headline,
.sprd-designer__back,
a#sprd-basket-button,
#sprd-basket-button {
	display: none !important;
}

nav.sprd-designer__header.sprd-bg-m1.sprd-c-s3 {
	max-height: 0;
}

/* 2. Layout / Spacer ------------------------------------------------------- */
.sprd-basket-page {
	padding-bottom: 40px;
}

.sprd-promo-header.sprd-bg-m2.sprd-c-cta {
	margin-top: -14px;
}

.page-id-4 .sprd-promo-header.sprd-bg-m2.sprd-c-cta {
	margin-top: -45px;
}

.SprdMain .sprd-promo-header + .sprd-designer__header,
.SprdMain .sprd-promo-header + .sprd-header {
	background: #f2f2f2;
}

input.sprd-quantity-control__input.sprd-bg-m3.sprd-c-s2 {
	margin: 0;
}

/* 3. Buttons + Inputs ------------------------------------------------------ */
button.sprd-basket-checkout__button.sprd-button.sprd-btn-primary,
button.sprd-basket-prices__promo__button.sprd-btn.sprd-btn-primary,
a.sprd-button.customButton.sprd-primary {
	color: #fff;
}

button.sprd-button.customButton.sprd-btn-secondary,
a.sprd-button.customButton.sprd-primary {
	font-size: 14px;
}

button.sprd-button.customButton.sprd-btn-secondary:hover {
	color: #fff;
}

.button-animation-slide .button:hover,
.button-animation-slide .widget a.button:hover,
.button-animation-slide .wp-block-button__link:hover,
.button-animation-slide button:hover {
	background-color: #2a8ff3;
}

/* 4. Promo-Header (Spreadshop-internes Banner oben) ------------------------ */
.sprd-promo-header__center,
span.sprd-promo__toggle__text,
svg.sprd-promo-caret {
	color: #fff;
}

/* 5. Eigener Promo-Banner (server-side gerendert vom Plugin) -------------- */
#spreadshop-promo-banner {
	background-color: #0089f7;
	color: #fff;
	font-size: .9em;
	font-weight: bold;
	text-align: center;
	padding: 10px;
	box-shadow: inset 0 10px 10px -10px rgba(0, 0, 0, .5);
	position: relative;
}

#spreadshop-promo-banner .senseOfUrgencyText {
	display: inline-block;
	margin-left: 10px;
	font-weight: 400;
}

#spreadshop-promo-banner .shoppen {
	border: 1px solid #fff;
	padding: 6px 10px;
	display: inline-block;
	color: #fff;
	margin-left: 10px;
	transition: background-color .3s ease, color .3s ease;
	font-weight: 300;
	border-radius: .125em;
	text-decoration: none;
}

#spreadshop-promo-banner a:hover .shoppen {
	background: #fff;
	color: #0089f7;
}

#spreadshop-promo-banner .promo-close {
	position: absolute;
	top: 10px;
	right: 15px;
	font-size: 22px;
	font-weight: bold;
	color: #333;
	cursor: pointer;
	line-height: 1;
	background: transparent;
	border: 0;
	padding: 0;
	transition: color .3s ease;
}

#spreadshop-promo-banner .promo-close:hover {
	color: #000;
}

/* 6. Cart-Notification Toast (Spreadshop) – Position + Größe -------------- */
.sprd-basket-notification.sprd-bg-m3.sprd-lbc-s2.sprd-c-s2 {
	font-size: 14px;
	padding: 18px 10px 0;
	top: -97px;
	right: -602px;
}

/* Header-Cart-Total verstecken: Spreadshop liefert keinen sauberen Wert
   für den Header-Bereich. Counter reicht. */
p.header-cart-total {
	display: none;
}

/* 7. Mobile --------------------------------------------------------------- */
@media only screen and (max-width: 767px) {

	/* BeTheme-Section-Wrapper (33 px Padding + 550 px max-width) auf
	   Spreadshop-Pages auflösen — Spreadshop liefert intern eigenes
	   Padding, der WP-Wrapper drumherum macht das Iframe sonst zu
	   schmal mit weißem Rand. `:has(.SprdMain)` (Descendant-Selektor)
	   wirkt nur auf Wrapper, die irgendwo ein Spreadshop-Iframe
	   enthalten — andere Sections auf der Seite (Promo-Banner,
	   Breadcrumbs) bleiben unangetastet. */
	.section_wrapper:has(.SprdMain),
	.mcb-section-inner:has(.SprdMain) {
		padding: 0 !important;
		max-width: none !important;
		width: 100% !important;
	}

	.SprdMain .sprd-promo-header + .sprd-designer__header,
	.SprdMain .sprd-promo-header + .sprd-header {
		background: #f2f2f2;
		max-height: 0;
	}

	.sprd-basket-notification.sprd-bg-m3.sprd-lbc-s2.sprd-c-s2 {
		top: -20px !important;
		right: -100%;
		position: absolute !important;
		width: 200% !important;
		min-width: 200%;
		padding: 24px !important;
	}

	.SprdMain .sprd-basket-notification--highlight:before {
		right: 2.7em !important;
	}
}