/* Technicomp Shop-Seiten (Live, technicomp.at): /cart/ und /my-account/
 *   1. Seitenrand fuer alle Seiten ohne Bricks-Aufbau (betrifft auch AGB, Impressum usw.)
 *   2. Seitenueberschrift wie auf der Kasse
 *   3. Warenkorbtabelle auf schmalen Geraeten als Zeilenraster statt gestapelter Zellen
 *
 * Warenkorb (501) und Mein Konto (503) sind nicht mit Bricks gebaut. Bricks gibt solche Seiten
 * als blosses <article id="brx-content"><h1>Seitentitel</h1> + Inhalt aus – es gibt dort also
 * kein Element, an dem sich etwas nativ einstellen liesse. Die Kasse (502) dagegen hat ein
 * eigenes Bricks-Template („Kasse", 13458) mit einem Heading-Element.
 *
 * Diese Datei gleicht die beiden Ueberschriften an die Kasse an: 27 px statt 36 px, fett,
 * zentriert, 40 px Abstand oben und unten. Werte abgelesen am Heading brxe-vjwkrn der Kasse.
 *
 * Faellt weg, sobald die beiden Seiten mit Bricks gebaut sind – dann gehoert das an das
 * Heading-Element selbst.
 *
 * Quelle: C:\Arbeitsdaten\Novamira\technicomp-warenkorb-live\
 */

/* --- Seitenrand ----------------------------------------------------------------------------
 *
 * Bricks gibt jede Seite ohne eigenen Bricks-Aufbau als
 *   #brx-content.wordpress { width: 1100px; max-width: 100%; margin: auto }
 * aus. Unterhalb von 1100 px greift max-width 100% – der Inhalt klebt dann ohne jeden Abstand
 * am Fensterrand. Bricks-Sektionen haben dort 20 px Luft (zu sehen auf der Startseite: Container
 * bei 390 px Fensterbreite x20 / w350). Dieselben 20 px hier.
 *
 * Als max-width statt als padding, damit der Desktop unveraendert bleibt: bei 1280 px ist
 * calc(100% - 40px) = 1240 px und damit groesser als die 1100 px Breite, die Regel greift also
 * gar nicht. Geprueft: 1280 unveraendert 1100 breit, 1120 -> 20/1065, 390 -> 20/350.
 *
 * Gilt bewusst fuer alle solchen Seiten (Warenkorb, Mein Konto, AGB, Impressum …), weil es
 * ueberall dieselbe Ursache ist.
 */
#brx-content.wordpress {
	max-width: calc(100% - 40px);
}

/* --- Seitenueberschrift --------------------------------------------------------------------- */

body.woocommerce-cart #brx-content > h1,
body.woocommerce-account #brx-content > h1 {
	margin: 40px 0;
	font-size: 27px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--tc-ink, #1b1c1d);
	text-align: center;
}

/* --- Warenkorbseite auf schmalen Geraeten --------------------------------------------------
 *
 * WooCommerce schaltet die Warenkorbtabelle unter 768 px auf „responsive": jede Zelle wird eine
 * eigene Zeile mit der Spaltenueberschrift davor (data-title). Das Produktbild bekommt dabei
 * keine Begrenzung und wird fensterbreit – eine einzige Position war dadurch 666 px hoch, auf
 * einem 800-px-Schirm sah man keine zwei Artikel.
 *
 * Statt uebereinander stehen die Zellen jetzt in einem Raster: Bild links (72 px), rechts daneben
 * Name, Preis, Anzahl und Zwischensumme untereinander, das Entfernen-Kreuz oben rechts.
 * Damit ist eine Position rund 165 px hoch. Ab 768 px bleibt die normale Tabelle unveraendert.
 */
@media (max-width: 767px) {
	.woocommerce-cart table.cart tbody tr.cart_item {
		position: relative;
		display: grid;
		grid-template-columns: 72px minmax(0, 1fr);
		column-gap: 12px;
		row-gap: 4px;
		align-items: center;
		padding: 16px 28px 16px 0;
		border-bottom: 1px solid var(--tc-line, #dddedf);
	}

	.woocommerce-cart table.cart tbody tr.cart_item > td,
	.woocommerce-cart table.cart tbody tr.cart_item > th {
		display: flex;
		align-items: center;
		gap: 6px;
		width: auto;
		padding: 0;
		border: 0;
		text-align: left;
	}

	/* Bild ueber alle vier Textzeilen hinweg, oben buendig. */
	.woocommerce-cart table.cart tbody tr.cart_item td.product-thumbnail {
		grid-column: 1;
		grid-row: 1 / span 4;
		align-self: start;
	}
	.woocommerce-cart table.cart tbody tr.cart_item td.product-thumbnail img {
		width: 72px;
		height: 58px;
		max-width: none;
		object-fit: contain;
	}

	.woocommerce-cart table.cart tbody tr.cart_item th.product-name {
		grid-column: 2;
		grid-row: 1;
		font-size: 15px;
		font-weight: 600;
		line-height: 1.35;
	}
	/* „Produkt:" vor dem Namen ist ueberfluessig, der Name steht fuer sich. */
	.woocommerce-cart table.cart tbody tr.cart_item th.product-name::before {
		display: none;
	}

	.woocommerce-cart table.cart tbody tr.cart_item td.product-price {
		grid-column: 2;
		grid-row: 2;
	}
	.woocommerce-cart table.cart tbody tr.cart_item td.product-quantity {
		grid-column: 2;
		grid-row: 3;
	}
	.woocommerce-cart table.cart tbody tr.cart_item td.product-subtotal {
		grid-column: 2;
		grid-row: 4;
		font-weight: 600;
	}

	/* Die Spaltennamen sind hier Beschriftung, nicht Ueberschrift: leiser als der Wert. */
	.woocommerce-cart table.cart tbody tr.cart_item td::before {
		float: none;
		font-size: 14px;
		font-weight: 400;
		color: var(--tc-ink-muted, #6b6d70);
	}

	.woocommerce-cart table.cart tbody tr.cart_item td.product-remove {
		position: absolute;
		top: 16px;
		right: 0;
		justify-content: flex-end;
	}
}

/* Die Abschnittsueberschriften („Warenkorb-Summe", „Anmelden", „Registrieren") stehen auf 31,5 px
   und waeren damit groesser als die Seitenueberschrift – die Rangfolge waere verkehrt herum.
   Auf der Kasse sind Seiten- und Abschnittsueberschrift gleich gross (beide 27 px); genau so hier. */
body.woocommerce-cart #brx-content .woocommerce h2,
body.woocommerce-account #brx-content .woocommerce h2 {
	font-size: 27px;
	line-height: 1.4;
}

/* Auf schmalen Geraeten etwas kompakter, sonst steht die Ueberschrift allein auf dem Schirm. */
@media (max-width: 478px) {
	body.woocommerce-cart #brx-content > h1,
	body.woocommerce-account #brx-content > h1 {
		margin: 24px 0;
		font-size: 24px;
	}
	/* Die Abschnittsueberschriften muessen mit, sonst waeren sie wieder die groesseren. */
	body.woocommerce-cart #brx-content .woocommerce h2,
	body.woocommerce-account #brx-content .woocommerce h2 {
		font-size: 24px;
	}
}