/* ==========================================================================
   TB Shop-Loop / Catalog Styling
   --------------------------------------------------------------------------
   Geladen nur auf Shop-Archiv-Seiten (siehe class-shop-styling.php).
   Karten-Design für Shop-/Kategorie-/Tag-Listings:
   - keine Sidebar
   - quadratisches Bild (1:1, object-fit: cover)
   - Heart-Outline oben rechts
   - Sterne gold + Average + (Review-Count)
   - Feature-Pills (vom Pills-Modul gerendert)
   - Preis links + Jetzt-gestalten-Button rechts

   SEO-Headline-Texte pro Kategorie kommen ab v1.26 aus den Top/Bottom-Content-
   Feldern der Term-Settings (kein Plugin-Inject mehr).
   ========================================================================== */

/* Breadcrumbs ausblenden — Mockup hat keine */
body.woocommerce.archive #Subheader,
body.tax-product_cat #Subheader,
body.tax-product_tag #Subheader {
	display: none !important;
}

/* === Karten ============================================================ */
body.woocommerce ul.products li.product {
	background: #fff !important;
	border: 1px solid #eef0f3 !important;
	border-radius: 16px !important;
	padding: 18px !important;
	position: relative !important;
	text-align: left !important;
	box-shadow: 0 1px 3px rgba(0,0,0,.03);
	transition: box-shadow .2s ease, transform .2s ease;
}
body.woocommerce ul.products li.product:hover {
	box-shadow: 0 6px 20px rgba(0,0,0,.07);
	transform: translateY(-2px);
}

/* Bild-Frame: 1:1 quadratisch, hellgrauer Background, Bild füllt randlos */
body.woocommerce ul.products li.product .mfn-li-product-row-image,
body.woocommerce ul.products li.product .image_frame {
	aspect-ratio: 1 / 1 !important;
	height: auto !important;
	display: block;
	background: #f6f8fb !important;
	border-radius: 12px !important;
	overflow: hidden;
	margin: 0 0 16px !important;
	padding: 0 !important;
	border: none !important;
}
body.woocommerce ul.products li.product .image_wrapper {
	width: 100% !important;
	height: 100% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: transparent !important;
}
body.woocommerce ul.products li.product .image_wrapper a {
	width: 100% !important;
	height: 100% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 !important;
}
body.woocommerce ul.products li.product .image_wrapper img {
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	max-height: 100% !important;
	object-fit: cover !important;
	padding: 0 !important;
}

/* Hover-Overlay-Buttons (BeTheme Heart/Cart-Icons aufm Bild) komplett weg */
body.woocommerce ul.products li.product .image_wrapper .image_links,
body.woocommerce ul.products li.product .image_wrapper .hover-icons,
body.woocommerce ul.products li.product .image_wrapper .product-loading-icon,
body.woocommerce ul.products li.product .image_wrapper .added-cart {
	display: none !important;
}

/* Excerpt + Beschreibung unter Title weg */
body.woocommerce ul.products li.product .excerpt,
body.woocommerce ul.products li.product .desc > p {
	display: none !important;
}

/* === Title ============================================================= */
body.woocommerce ul.products li.product .mfn-woo-product-title {
	margin: 0 0 6px !important;
	text-align: left !important;
}
body.woocommerce ul.products li.product .mfn-woo-product-title a {
	font-size: 16px !important;
	font-weight: 700 !important;
	color: #1a2330 !important;
}

/* === Rating-Reihe: Stars gold + Avg + (Count) ========================= */
body.woocommerce ul.products li.product .wc-rating-with-text {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	margin: 0 0 10px !important;
}
body.woocommerce ul.products li.product .star-rating,
body.woocommerce ul.products li.product .star-rating::before,
body.woocommerce ul.products li.product .star-rating span::before {
	color: #FFB400 !important;
}
body.woocommerce ul.products li.product .wc-rating-text {
	font-size: 13px !important;
	color: #1a2330 !important;
	font-weight: 600 !important;
}
body.woocommerce ul.products li.product .tb-review-count {
	font-size: 13px;
	color: #5a6270;
	font-weight: 500;
	margin-left: 2px;
}

/* === Feature-Pills (vom Pills-Modul server-side gerendert) ==============
   Generische Selektoren — gelten im Shop-Loop UND auf der Single-Product-Page.
   Loop hatte vorher `body.woocommerce ul.products li.product` als Prefix; das
   matcht auf Single-Product nicht und SVGs werden dann riesig. */
.tb-feature-pills {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 14px;
	margin: 0 0 16px;
	font-size: 13px;
	color: #5a6270;
}
.tb-feature-pills > span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.tb-feature-pills svg {
	width: 16px;
	height: 16px;
	flex: 0 0 16px;
}
.tb-feature-pills .sep {
	color: #d0d4d9;
}

/* Grössentabelle-Link (Single-Product-Summary, unter den Pills) */
.tb-size-table-link {
	margin: -8px 0 16px;
	font-size: 13px;
}
.tb-size-table-link a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: #0089f7;
	text-decoration: none;
}
.tb-size-table-link a:hover {
	text-decoration: underline;
}

/* === Grössentabelle in der Produkt-Beschreibung ====================== */
.tb-size-table-wrap {
	display: flex;
	gap: 32px;
	align-items: flex-start;
	background: linear-gradient(180deg, #f6f9fc 0%, #ffffff 100%) !important;
	padding: 32px;
	border-radius: 6px;
	margin: 24px 0;
}
.tb-size-table-wrap .tb-size-diagram {
	flex: 0 0 200px;
	margin: 0;
}
.tb-size-table-wrap .tb-size-diagram img {
	width: 100%;
	height: auto;
	display: block;
}
.tb-size-table-wrap .tb-size-content {
	flex: 1;
	min-width: 0;
}
.tb-size-table-wrap .tb-size-content h3 {
	margin: 0 0 4px;
	font-size: 22px;
}
.tb-size-table-wrap .tb-size-subtitle {
	margin: 0 0 24px;
	color: #5a6270;
	font-size: 14px;
}
.tb-size-table-wrap .tb-size-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}
.tb-size-table-wrap .tb-size-table th,
.tb-size-table-wrap .tb-size-table td {
	padding: 10px 8px;
	text-align: center;
	border: none;
}
.tb-size-table-wrap .tb-size-table thead th {
	font-weight: 600;
	color: #1a202c;
	border-bottom: 1px solid #d8dde6;
}
.tb-size-table-wrap .tb-size-table tbody tr {
	border-bottom: 1px solid #e6e9ef;
}
.tb-size-table-wrap .tb-size-table tbody tr:last-child {
	border-bottom: none;
}
.tb-size-table-wrap .tb-size-table .tb-row-label {
	text-align: left;
	font-weight: 500;
	color: #5a6270;
	white-space: nowrap;
}
.tb-size-table-wrap .tb-size-table tbody tr:hover .tb-row-label,
.tb-size-table-wrap .tb-size-table tbody tr:hover td {
	color: #0089f7;
}
.tb-size-table-wrap .tb-size-tolerance,
.tb-size-table-wrap .tb-size-fit {
	margin: 16px 0 0;
	font-size: 13px;
	color: #5a6270;
}

/* Mobile: Bild oben, Tabelle drunter */
@media (max-width: 720px) {
	.tb-size-table-wrap {
		flex-direction: column;
		padding: 20px;
		gap: 16px;
	}
	.tb-size-table-wrap .tb-size-diagram {
		flex: 0 0 auto;
		max-width: 160px;
		margin: 0 auto;
	}
}

/* === Preis + CTA ====================================================== */
body.woocommerce ul.products li.product .tb-price-cta-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0 !important;
}
body.woocommerce ul.products li.product .price {
	font-size: 18px !important;
	font-weight: 700 !important;
	color: #1a2330 !important;
	margin: 0 !important;
	text-align: left !important;
	width: auto !important;
	flex: 0 0 auto !important;
}
body.woocommerce ul.products li.product .price * { color: #1a2330 !important; }
body.woocommerce ul.products li.product .mfn-li-product-row-button {
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	display: inline-block !important;
	width: auto !important;
}
body.woocommerce ul.products li.product .mfn-li-product-row-button .button {
	background: #0089f7 !important;
	color: #fff !important;
	border-radius: 10px !important;
	padding: 10px 16px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	text-transform: none !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	margin: 0 !important;
	width: auto !important;
}
body.woocommerce ul.products li.product .mfn-li-product-row-button .button::after {
	content: "›";
	font-size: 16px;
	font-weight: 700;
	margin-left: 2px;
}

/* === Heart oben-rechts in Karte (Outline) ============================= */
body.woocommerce ul.products li.product .mfn-wish-button {
	position: absolute !important;
	top: 14px !important;
	right: 14px !important;
	width: 36px !important;
	height: 36px !important;
	background: #fff !important;
	border: 1px solid #eef0f3 !important;
	border-radius: 50% !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin: 0 !important;
	z-index: 5 !important;
	box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
body.woocommerce ul.products li.product .mfn-wish-button svg {
	width: 18px !important;
	height: 18px !important;
}
body.woocommerce ul.products li.product .mfn-wish-button svg path {
	fill: none !important;
	stroke: #1a2330 !important;
	stroke-width: 1.8px !important;
}
body.woocommerce ul.products li.product .mfn-wish-button:hover svg path {
	stroke: #ef4444 !important;
}
body.woocommerce ul.products li.product .mfn-wish-button.loved svg path {
	fill: #ef4444 !important;
	stroke: #ef4444 !important;
}

/* Grid-Spacing */
body.woocommerce ul.products.columns-3 {
	gap: 24px !important;
}