/* Technicomp Warenkorb (Live, technicomp.at)
 *
 * Das Bricks-Warenkorb-Element laeuft jetzt im Off-Canvas-Modus (Einstellung cartDetailsOffCanvas = right).
 * Bricks liefert dafuer das fixierte Panel ueber die volle Hoehe und schiebt die Summe per margin-top:auto
 * nach unten – aber die Artikelliste bekommt keine Hoehenbegrenzung. Bei vollem Warenkorb wuchs sie deshalb
 * ueber den Bildschirm hinaus und die Buttons waren nicht erreichbar.
 *
 * Diese Datei ergaenzt genau drei Dinge:
 *   1. Die Artikelliste scrollt, Summe und Buttons bleiben sichtbar.
 *   2. Die Zeilen bekommen ein festes Raster: Bild links, Titel und Menge rechts daneben.
 *      Woo stellt das Bild per float:left, daher rutschte die Mengenzeile bei laengeren Titeln
 *      unter das Bild. Ausserdem beginnt die Liste unterhalb des Schliessen-Knopfs, sonst
 *      liegen X, Scrollleiste und das Entfernen-Kreuz der ersten Zeile uebereinander.
 *   3. Die beiden Buttons bekommen eine Hierarchie (Kasse = Akzent, Warenkorb = Umriss) und 44 px Hoehe.
 *      Native Bricks-Regler faerben immer beide Buttons gleich, daher hier.
 *
 * Farben kommen aus den --tc-*-Token (tc-search-live-tokens.css), mit Rueckfall auf die Live-Werte.
 * Quelle: C:\Arbeitsdaten\Novamira\technicomp-warenkorb-live\
 */

/* --- 1. Aufbau: Kopf, scrollende Liste, fixierter Fuss ------------------------------------- */

/* Oben bleibt Platz fuer den Schliessen-Knopf (Bricks setzt ihn absolut auf top 12 / right 14).
   Ohne diesen Streifen beginnt die Liste darunter – und X, Scrollleiste und das Entfernen-Kreuz
   der ersten Zeile liegen im selben Eck. */
.brxe-woocommerce-mini-cart .cart-detail.off-canvas .widget_shopping_cart_content {
	padding: 64px 20px 20px;
	gap: 0;
}

.brxe-woocommerce-mini-cart .cart-detail.off-canvas ul.woocommerce-mini-cart {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--tc-line, #dddedf);
	/* Schmale Leiste: laesst dem Entfernen-Kreuz Luft und wirkt ruhiger. */
	scrollbar-width: thin;
	scrollbar-color: #b9babc transparent;
}

/* Summe und Buttons bilden den Fuss: immer unten, optisch abgesetzt. */
.brxe-woocommerce-mini-cart .cart-detail.off-canvas .woocommerce-mini-cart__total {
	flex: none;
	margin: 0;
	padding: 14px 0 0;
	border-top: 1px solid var(--tc-line, #dddedf);
}

.brxe-woocommerce-mini-cart .cart-detail.off-canvas .woocommerce-mini-cart__buttons {
	flex: none;
}

/* Der leere Warenkorb soll nicht am oberen Rand kleben. */
.brxe-woocommerce-mini-cart .cart-detail.off-canvas .woocommerce-mini-cart__empty-message {
	margin: auto 0;
	color: var(--tc-ink-muted, #6b6d70);
}

/* --- 1b. Zeilenraster: Bild links, Titel und Menge rechts ---------------------------------- */

.brxe-woocommerce-mini-cart .cart-detail li.woocommerce-mini-cart-item {
	position: relative;
	display: block;
	min-height: 48px;
	/* links Platz fuer das Bild (60 px + 12 px), rechts fuer das Entfernen-Kreuz samt Abstand
	   zur Scrollleiste: 16 px Luft + 13 px Kreuz + 13 px bis zum Titel */
	padding: 14px 42px 14px 72px;
	margin: 0;
	border-bottom: 1px solid var(--tc-line, #dddedf);
}

.brxe-woocommerce-mini-cart .cart-detail li.woocommerce-mini-cart-item:last-child {
	border-bottom: 0;
}

/* Woo stellt das Bild per float:left – dann flossen laengere Titel darum herum und die
   Mengenzeile landete unter dem Bild. Absolut gesetzt bleibt die Textspalte immer eine Spalte. */
.brxe-woocommerce-mini-cart .cart-detail li.woocommerce-mini-cart-item img {
	position: absolute;
	left: 0;
	top: 14px;
	float: none;
	margin: 0;
	width: 60px;
	height: 48px;
	object-fit: contain;
}

.brxe-woocommerce-mini-cart .cart-detail li.woocommerce-mini-cart-item > a:not(.remove) {
	display: block;
	font-size: 15px;
	line-height: 1.35;
	color: var(--tc-ink, #1b1c1d);
	text-decoration: none;
}

.brxe-woocommerce-mini-cart .cart-detail li.woocommerce-mini-cart-item .quantity {
	display: block;
	margin-top: 4px;
	font-size: 14px;
	line-height: 20px;
	color: var(--tc-ink-muted, #6b6d70);
}

/* 16 px vom rechten Rand weg, sonst steht das Kreuz direkt an der Scrollleiste. */
.brxe-woocommerce-mini-cart .cart-detail li.woocommerce-mini-cart-item a.remove {
	top: 14px;
	right: 16px;
	font-size: 20px;
	line-height: 1;
}

/* --- 2. Buttons ---------------------------------------------------------------------------- */

.brxe-woocommerce-mini-cart .cart-detail .woocommerce-mini-cart__buttons {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 14px 0 0;
	padding: 0;
}

.brxe-woocommerce-mini-cart .cart-detail .woocommerce-mini-cart__buttons .button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 44px;
	margin: 0;
	padding: 0 16px;
	border-radius: var(--tc-radius-md, 4px);
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	transition: background-color .15s, color .15s, border-color .15s;
}

/* Sekundaer: Warenkorb anzeigen */
.brxe-woocommerce-mini-cart .cart-detail .woocommerce-mini-cart__buttons .button:not(.checkout) {
	background: transparent;
	border: 1px solid var(--tc-accent, #0881bc);
	color: var(--tc-accent, #0881bc);
}
.brxe-woocommerce-mini-cart .cart-detail .woocommerce-mini-cart__buttons .button:not(.checkout):hover {
	background: var(--tc-soft, #e8f0f6);
}

/* Primaer: Kasse */
.brxe-woocommerce-mini-cart .cart-detail .woocommerce-mini-cart__buttons .button.checkout {
	background: var(--tc-accent, #0881bc);
	border: 1px solid var(--tc-accent, #0881bc);
	color: #ffffff;
}
.brxe-woocommerce-mini-cart .cart-detail .woocommerce-mini-cart__buttons .button.checkout:hover {
	background: #0a6d9e;
	border-color: #0a6d9e;
}

.brxe-woocommerce-mini-cart .cart-detail .woocommerce-mini-cart__buttons .button:focus-visible {
	outline: 2px solid var(--tc-ink, #1b1c1d);
	outline-offset: 2px;
}

/* --- 3. Schmale Geraete: Panel nutzt die ganze Breite --------------------------------------- */

@media (max-width: 478px) {
	/* Nicht ueber die Breite, sondern ueber beide Kanten: width:100% rechnet gegen das Fenster
	   inklusive Scrollleiste und erzeugt sonst ein paar Pixel Ueberbreite.
	   !important, weil Bricks die Breite per ID-Selektor setzt (Regler „Width"). */
	.brxe-woocommerce-mini-cart .cart-detail.off-canvas.right,
	.brxe-woocommerce-mini-cart .cart-detail.off-canvas.left {
		left: 0 !important;
		right: 0 !important;
		width: auto !important;
		max-width: none;
	}
	.brxe-woocommerce-mini-cart .cart-detail.off-canvas .widget_shopping_cart_content {
		padding: 60px 16px 16px;
	}
}