/**
 * Tibitex Compat - CSS
 * Zentrale Stylesheet-Datei fuer den 1:1-Nachbau von tibitex.ch.
 * Werte unten sind via getComputedStyle() vom Live-Shop (tibitex.ch)
 * gemessen (Session 3, 14.08.2026). Wird beim Nachbau von
 * Header/Footer/Navigation/Startseite laufend erweitert.
 */

:root {
	--tibitex-color-body-bg: #ffffff;
	--tibitex-color-body-text: #333333;
	--tibitex-color-topbar-bg: #4d3d1e;   /* .header_subnav - duenne Leiste oben (Newsletter-Link) */
	--tibitex-color-mainnav-bg: #997a3c;  /* .hauptnav_td - Hauptleiste mit Logo/Suche/Konto/Warenkorb */
	--tibitex-color-footer-bg: #4d3d1e;
	--tibitex-color-footer-text: #ffffff;
	--tibitex-color-sidebar-header-bg: #9c8450; /* .ibox_top - "Kategorien"-Titel in der Seitenleiste */
	--tibitex-color-sidebar-header-text: #ffffff;
	--tibitex-font-stack: Nunito, Verdana, Helvetica, Geneva, sans-serif;
}

body {
	background-color: var(--tibitex-color-body-bg);
	color: var(--tibitex-color-body-text);
	font-family: var(--tibitex-font-stack);
}

h1 {
	font-size: 36px;
	font-weight: 500;
}

/* Ab hier: Header/Footer/Navigation/Startseite - folgt in Schritt 3 (Nachbau) */

/* Startseite: doppelten Seitentitel ausblenden (Andrea's H1 liegt bereits im Seiteninhalt) */
body.home .wp-block-post-title {
	display: none;
}

/* ===== Session 4: Produkt-Listing im Stil des alten Shops ===== */

/* Produktkarten: weisse Karte mit feinem Rahmen wie im PepperShop */
.wc-block-grid__product, ul.products li.product {
	background: #ffffff;
	border: 1px solid #e5e5e5;
	border-radius: 4px;
	padding: 10px 10px 16px;
	text-align: center;
}

/* Schriftgroessen 1:1 gemessen: .artikel_box Basis max(12px, 16px*0.8) = 12.8px / 500,
   Preis max(12px, 20px*0.8) = 16px / 300. Fixe Zeilenhoehen wie alter Shop:
   artikel_box_name 48px, kurzbeschr 60px, lager 35px (jeweils overflow:hidden). */
/* Thomas' Wunsch 15.08.: Titel fett und etwas groesser als im alten Shop (12.8px/500). */
ul.products li.product .woocommerce-loop-product__title {
	font-size: 14px !important;
	color: var(--tibitex-color-body-text);
	font-weight: 700;
	height: 48px;
	overflow: hidden;
}

ul.products li.product .price {
	color: #333333;
	font-size: 16px !important;
	font-weight: 300 !important;
	margin: 0;
	display: block;
	text-align: left;
}

/* Listing: Warenkorb-Button sichtbar wie tb-tools (Entscheid Thomas 10.09.2026) */
ul.products li.product .button,
ul.products li.product a.add_to_cart_button {
	display: inline-block;
	background: #997a3c;
	color: #ffffff;
	padding: 8px 14px;
	border-radius: 3px;
	font-size: 14px;
	line-height: 1.2;
	text-decoration: none;
	margin-top: 6px;
}
ul.products li.product .button:hover,
ul.products li.product a.add_to_cart_button:hover {
	background: #7d6330;
	color: #ffffff;
}

/* Produktdetailseite: Preis prominent, Titel wie alter Shop */
.single-product .product_title {
	font-size: 28px;
	font-weight: 500;
}
.single-product p.price {
	color: #333333;
	font-size: 22px;
}

/* Product-Collection-Block (neuer Woo-Grid) - gleiche Karten-Optik */
li.wc-block-product {
	background: #ffffff;
	border: 1px solid #e5e5e5;
	border-radius: 4px;
	padding: 10px 10px 16px;
	text-align: center;
}
/* !important noetig: Preset-Klassen (has-medium-font-size) und Woo-Block-Styles
   setzen Schriftgroessen selbst mit !important bzw. hoeherer Spezifitaet. */
li.wc-block-product .wp-block-post-title, li.wc-block-product .wp-block-post-title a {
	font-size: 14px !important;
	font-weight: 700;
	color: var(--tibitex-color-body-text);
	text-decoration: none;
	height: 48px;
	overflow: hidden;
	margin: 0;
}
li.wc-block-product .wc-block-components-product-price {
	color: #333333;
	font-size: 16px !important;
	font-weight: 300 !important;
}

/* Kategorien-Sidebar: kompakte Liste ohne Punkte wie im alten Shop */
.wp-block-woocommerce-product-categories ul,
.wc-block-product-categories-list {
	list-style: none;
	margin: 0;
	padding-left: 8px;
}
.wc-block-product-categories-list li {
	margin: 6px 0;
}
.wc-block-product-categories-list a {
	text-decoration: none;
	color: var(--tibitex-color-body-text);
}
.wc-block-product-categories-list a:hover {
	text-decoration: underline;
}
.wc-block-product-categories-list ul {
	padding-left: 16px;
}


/* ===== Session 4b: Lagerampel, Grundpreis, Listing-Details ===== */

/* Ampel 1:1 gemessen: lagerampel_symbol 15x15px rund,
   green #84C326 / yellow #FF9933 / red #DA251D (Live-CSS). */
.tibitex-lager {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 12.8px;
	color: #333333;
}
.tibitex-ampel {
	width: 15px;
	height: 15px;
	border-radius: 50%;
	display: inline-block;
	flex: 0 0 auto;
}
.tibitex-ampel-gruen .tibitex-ampel { background: #84C326; }
.tibitex-ampel-orange .tibitex-ampel { background: #FF9933; }
.tibitex-ampel-rot .tibitex-ampel { background: #DA251D; }

.tibitex-loop-kurz {
	font-size: 12.8px;
	color: #333333;
	margin: 5px 0 0;
	line-height: 1.4;
	height: 60px;
	overflow: hidden;
}
.tibitex-loop-lager {
	margin: 4px 0;
}
.tibitex-grundpreis {
	font-size: 14px;
	color: #666666;
	margin: -8px 0 8px;
}
.tibitex-single-lager {
	margin: 0 0 12px;
}

/* Startseiten-Grid: 4 Karten nebeneinander ab Desktop-Breite */
@media (min-width: 900px) {
	ul.products.columns-4 {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 16px;
	}
	ul.products.columns-4 li.product {
		width: auto;
		margin: 0;
	}
}

/* Mobile: Kategorien-Box einklappbar (Ersatz fuer das Burger-Menue des alten Shops) */
@media (max-width: 781px) {
	.tibitex-cat-toggle {
		cursor: pointer;
	}
	.tibitex-cat-toggle::after {
		content: " \25BE";
	}
	.tibitex-cat-collapsed {
		display: none !important;
	}
}

/* Fix Startseiten-Grid: Woo setzt li.product auf Prozent-Breite - im Grid-Kontext
   bezieht sich das auf die Zelle und quetscht die Karten. Staerkerer Selektor. */
@media (min-width: 900px) {
	body .woocommerce ul.products.columns-4 li.product,
	body ul.products.columns-4 li.product {
		width: 100%;
		margin: 0;
		float: none;
	}
}

/* Woo-Clearfix (::before/::after auf ul.products) wird im Grid zum anonymen
   Grid-Item und belegt die erste Zelle - deaktivieren. */
ul.products.columns-4::before,
ul.products.columns-4::after {
	content: none !important;
}

/* Hover-Effekt der Produktkacheln - 1:1 vom Live-Shop gemessen:
   div.artikel_box {border:1px solid #EEEEEE; transition:box-shadow .3s}
   div.artikel_box:hover {box-shadow:0 0 40px -15px #EEEEEE} */
ul.products li.product,
li.wc-block-product {
	border-color: #eeeeee;
	transition: box-shadow ease-in-out .3s;
}
ul.products li.product:hover,
li.wc-block-product:hover {
	box-shadow: 0px 0px 40px -15px #eeeeee;
}

/* Schatten-Boxen wie im alten Shop - gemessen:
 *    nav.katnav_td.shadow / div.content_td.shadow: box-shadow 0 0 15px 0 #DDDDDD, radius 4px
 *    div.artikel_box: background #FAFAFA */
.wp-block-column.tibitex-sidebar {
	align-self: flex-start;
	background: #ffffff;
	border-radius: 4px;
	box-shadow: 0px 0px 15px 0px #dddddd;
	overflow: hidden;
}
.wp-block-column.tibitex-sidebar h3 {
	margin: 0;
}
.wp-block-column.tibitex-sidebar ul,
.wp-block-column.tibitex-sidebar .wp-block-woocommerce-product-categories {
	padding: 10px 14px;
	margin: 0;
}
.wp-block-column.tibitex-content {
	background: #ffffff;
	border-radius: 4px;
	box-shadow: 0px 0px 15px 0px #dddddd;
	padding: 20px;
}
ul.products li.product,
li.wc-block-product {
	background: #fafafa;
}

/* ===== Kachel-Feinschliff (15.08.): Preis und Lagerampel am Kachelboden fixiert =====
   Kachel als Flex-Spalte; die Ampel bekommt margin-top:auto und zieht sich samt
   Preis an den Boden - so sitzen Ampel und Preis in jeder Kachel auf gleicher
   Hoehe von unten, unabhaengig von Titel-/Textlaenge. Ampel linksbuendig wie im
   alten Shop (lagerampel: display:flex, links). */
ul.products li.product {
	display: flex;
	flex-direction: column;
}
ul.products li.product a.woocommerce-LoopProduct-link {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}
ul.products li.product .tibitex-loop-lager {
	margin-top: auto;
	height: 35px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	text-align: left;
}
/* Fallback: Kacheln ohne Lagerampel (z.B. variable Eltern ohne Lagerhinweis)
   pinnen stattdessen den Preis an den Boden. */
ul.products li.product a.woocommerce-LoopProduct-link:not(:has(.tibitex-loop-lager)) .price {
	margin-top: auto;
}

/* Startseite: Woo/Theme setzen li-padding auf 0 - Innenabstand wie Kategorie-Kacheln
   erzwingen (alter Shop: content_wrapper padding 10px). */
body .woocommerce ul.products li.product,
body ul.products li.product {
	padding: 10px 10px 16px !important;
	box-sizing: border-box;
}

/* Product-Collection-Block (Kategorieseiten): gleiche Boden-Fixierung.
   Markup ist flach (Bild, H2, Kurz, Lager, Preis-Div als direkte li-Kinder). */
li.wc-block-product {
	display: flex;
	flex-direction: column;
}
li.wc-block-product .tibitex-loop-lager {
	margin-top: auto;
	height: 35px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	text-align: left;
}
li.wc-block-product:not(:has(.tibitex-loop-lager)) > div:has(.wc-block-components-product-price) {
	margin-top: auto;
}

/* Preis in den Kacheln linksbuendig (Thomas 15.08.) */
li.wc-block-product > div:has(.wc-block-components-product-price) {
	text-align: left !important;
}

/* ===== Kategorien-Navigationsleiste im Header (Vorbild tb-tools.ch):
   weisse Vollbreite-Leiste unter dem braunen Header, Submenues klappen
   bei Hover/Klick auf. Sidebar entfaellt, Inhalt bekommt volle Breite. ===== */
.tibitex-navbar {
	border-bottom: 1px solid #eeeeee;
	padding: 6px 24px;
}
.tibitex-navbar .wp-block-navigation a {
	color: #333333;
	text-decoration: none;
	padding: 8px 10px;
}
.tibitex-navbar .wp-block-navigation a:hover {
	color: #997a3c;
}
.tibitex-navbar .wp-block-navigation .wp-block-navigation__submenu-container {
	background: #ffffff;
	border: 1px solid #eeeeee;
	border-radius: 4px;
	box-shadow: 0px 0px 15px 0px #dddddd;
	min-width: 240px;
	z-index: 100;
}
.tibitex-navbar .wp-block-navigation .wp-block-navigation__submenu-container a {
	padding: 6px 12px;
}

/* Kategorieseiten (3 Spalten): gleiches Grid wie die Startseite, damit alle
   Kacheln einer Reihe gleich hoch sind und die Boden-Fixierung greift. */
@media (min-width: 900px) {
	ul.products.columns-3 {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 16px;
	}
	body .woocommerce ul.products.columns-3 li.product,
	body ul.products.columns-3 li.product {
		width: 100%;
		margin: 0;
		float: none;
	}
	ul.products.columns-3::before,
	ul.products.columns-3::after {
		content: none !important;
	}
}

/* Block-Listing (Kategorieseiten): Button im gleichen Stil wie die Startseite */
li.wc-block-product .wp-block-woocommerce-product-button .wp-block-button__link {
	background: #997a3c;
	color: #ffffff;
	border-radius: 3px;
	font-size: 14px;
	padding: 8px 14px;
}
li.wc-block-product .wp-block-woocommerce-product-button .wp-block-button__link:hover {
	background: #7d6330;
	color: #ffffff;
}