/*
Theme Name: Betheme Child
Theme URI: https://themes.muffingroup.com/betheme
Author: Muffin group
Author URI: https://muffingroup.com
Description: Child Theme for Betheme – t-shirtbedrucken.ch customizations
Template: betheme
Version: 2.0.6
*/

/* ==========================================================================
   t-shirtbedrucken.ch – Site-Customizations
   --------------------------------------------------------------------------
   Spreadshop-spezifisches CSS lebt im Plugin tb-spreadshop-bridge.
   Hier nur: BeTheme-/WooCommerce-/Site-Anpassungen.
   ========================================================================== */

/* 1. Design-Token (zentrale Stellschrauben) ------------------------------- */
:root {
	--tb-blue:        #0089f7;
	--tb-blue-hover:  #2a8ff3;
	--tb-ink:         #0f1216;
	--tb-ink-soft:    #3a414a;
	--tb-muted:       #6b7280;
	--tb-bg-soft:     #f6f7f9;
	--tb-border:      #e5e7eb;
	--tb-radius:      14px;
	--tb-shadow-sm:   0 1px 2px rgba(15,18,22,.05), 0 1px 3px rgba(15,18,22,.06);
	--tb-shadow-md:   0 6px 18px rgba(15,18,22,.08);
	--tb-shadow-lg:   0 18px 40px rgba(15,18,22,.12);
}

/* 2. Globale Politur ------------------------------------------------------ */
html { -webkit-text-size-adjust: 100%; }
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--tb-blue);
	outline-offset: 2px;
	border-radius: 4px;
}

img { max-width: 100%; height: auto; }

/* 3. BeTheme – Top_bar / Menü --------------------------------------------- */
li#menu-item-6863 span {
	padding-left: 0;
}

#Top_bar .menu > li > a span:not(.description) {
	padding: 0 20px;
}

body.header-shop #Top_bar #menu {
	display: block !important;
	background-color: transparent;
}

.menu_wrapper {
	float: left !important;
	padding-left: 0 !important;
}

.mfn-footer-stickymenu { display: none; }

/* 4. WooCommerce – Produktlisten + Detailseiten --------------------------- */
.woocommerce_after_main_content h1,
.woocommerce_after_main_content h2,
.woocommerce_after_main_content h3 {
	font-size: 20px;
	margin-top: 30px;
}

img.hidden_photo.scale-with-grid { background: #fff; }

.woocommerce ul.products .image_frame .hover-secondary-image a .image-secondary {
	object-fit: cover;
	height: 100%;
	width: 100%;
	background: #fff;
}

.woocommerce .product.style-default .entry-summary {
	text-align: left;
}

section.section.woocommerce_after_main_content {
	margin-bottom: 100px;
}

/* 5. Produkt-Kurzbeschreibung – Haken-Liste ------------------------------- */
.woocommerce-product-details__short-description ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.woocommerce-product-details__short-description ul li {
	position: relative;
	padding-left: 35px;
	margin-bottom: 20px;
	font-size: 15px;
	line-height: 1.6;
	color: #666;
}

.woocommerce-product-details__short-description ul li::before {
	content: '\e841';
	font-family: "mfn-icons";
	position: absolute;
	left: 0;
	top: 2px;
	font-size: 16px;
	color: #000;
}

.woocommerce-product-details__short-description ul li::after {
	content: "";
	width: 70px;
	height: 1px;
	overflow: hidden;
	background: rgba(0, 0, 0, .08);
	position: absolute;
	left: 0;
	bottom: -11px;
}

.woocommerce-product-details__short-description ul li:last-child::after {
	content: none;
}

/* 6. FiboSearch (dgwt-wcas) Styling --------------------------------------- */
.dgwt-wcas-search-wrapp {
	max-width: 100% !important;
}

.dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit {
	background: 0 0;
	border-radius: 100%;
	border: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	margin: 0;
	position: absolute;
	min-height: 23px;
	min-width: 23px;
	height: 23px;
	width: 23px;
	left: 23px;
	top: 21px;
	pointer-events: none;
	transition: none;
}

.dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input {
	padding: 8px 24px 8px 48px;
	line-height: 24px;
	font-size: 15px;
	border: 1px solid #afafaf;
	border-radius: 0;
	height: auto;
	font-family: inherit;
	background-color: #fff;
}

/* 7. Content-Wrapper Spacing --------------------------------------------- */
.the_content_wrapper {
	margin-top: 100px;
}

/* 8. Page-spezifisch (page-id-6853 = Designer-Page) ----------------------- */
.page-id-6853 div#Subheader,
.page-id-6853 div#Action_bar {
	display: none;
}

.page-id-6853 #Content {
	padding-top: 0;
}

/* 8b. Breadcrumbs / Subheader -------------------------------------------- */
div#Subheader {
	background: #fafbfc;
	padding: 0;
	border-bottom: 1px solid #eef0f3;
}
div#Subheader .container { padding: 14px 0; }
div#Subheader ul.breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0;
	margin: 0;
	padding: 0;
	font-size: 13px;
	color: #5b6470;
	letter-spacing: .2px;
	text-align: center;
}
div#Subheader ul.breadcrumbs li {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 0;
}
div#Subheader ul.breadcrumbs li a {
	color: #5b6470;
	text-decoration: none;
	transition: color .15s ease;
}
div#Subheader ul.breadcrumbs li a:hover { color: var(--tb-blue); }
div#Subheader ul.breadcrumbs li:last-child {
	color: #1a2330;
	font-weight: 600;
}
div#Subheader ul.breadcrumbs li span {
	display: inline-flex;
	align-items: center;
	padding: 0 8px;
	color: #c2c8d0;
}
div#Subheader ul.breadcrumbs li span i.icon-right-open { font-size: 11px; }
div#Subheader ul.breadcrumbs li:last-child span { display: none; }

/* 9. Hero – Startseite ---------------------------------------------------- */
.tb-hero {
	background: linear-gradient(180deg, #f6f9fc 0%, #ffffff 100%);
	padding: clamp(24px, 5vw, 64px) clamp(16px, 4vw, 40px);
}

.tb-hero__inner {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: clamp(24px, 4vw, 56px);
	align-items: center;
	min-height: clamp(360px, 60vh, 540px);
}

.tb-hero__content {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.tb-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	width: fit-content;
	padding: 6px 12px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--tb-blue);
	background: rgba(0, 137, 247, .08);
	border-radius: 999px;
}

.tb-hero__eyebrow::before {
	content: "";
	width: 6px; height: 6px;
	background: var(--tb-blue);
	border-radius: 50%;
}

.tb-hero__title {
	font-size: clamp(32px, 5vw, 56px);
	line-height: 1.05;
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--tb-ink);
	margin: 0;
}

.tb-hero__title em {
	font-style: normal;
	color: var(--tb-blue);
}

.tb-hero__sub {
	font-size: clamp(15px, 1.5vw, 18px);
	line-height: 1.5;
	color: var(--tb-ink-soft);
	max-width: 48ch;
	margin: 0;
}

.tb-hero__colors {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.tb-hero__colors-label {
	font-size: 13px;
	color: var(--tb-muted);
	margin-right: 4px;
}

.tb-hero__color {
	width: 26px; height: 26px;
	border-radius: 50%;
	border: 2px solid #fff;
	box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.05);
	transition: transform .15s var(--tb-ease, ease);
}

.tb-hero__color:hover { transform: scale(1.15); }

.tb-hero__cta-row {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 6px;
}

.tb-hero__cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 26px;
	background: var(--tb-blue);
	color: #fff !important;
	font-size: 16px;
	font-weight: 700;
	border-radius: 999px;
	text-decoration: none !important;
	box-shadow: 0 6px 18px rgba(0, 137, 247, .35);
	transition: transform .15s, box-shadow .15s, background-color .15s;
}

.tb-hero__cta:hover {
	background: var(--tb-blue-hover);
	transform: translateY(-1px);
	box-shadow: 0 10px 22px rgba(0, 137, 247, .42);
}

.tb-hero__cta:active { transform: translateY(0); }

.tb-hero__cta svg { transition: transform .15s; }
.tb-hero__cta:hover svg { transform: translateX(3px); }

.tb-hero__cta-secondary {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--tb-ink-soft);
	font-size: 14px;
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-color: rgba(0,0,0,.2);
}
.tb-hero__cta-secondary:hover { text-decoration-color: var(--tb-blue); color: var(--tb-blue); }

.tb-hero__media {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tb-hero__image {
	max-width: 100%;
	height: auto;
	max-height: 540px;
	filter: drop-shadow(0 30px 40px rgba(15, 18, 22, .08));
}

.tb-hero__rating {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--tb-muted);
	margin-top: 4px;
}
.tb-hero__rating-stars { color: #f59e0b; letter-spacing: 1px; }

@media (max-width: 768px) {
	.tb-hero__inner {
		grid-template-columns: 1fr;
		min-height: auto;
		text-align: center;
	}
	.tb-hero__content { align-items: center; }
	.tb-hero__sub { margin: 0 auto; }
	.tb-hero__media { order: -1; }
	.tb-hero__image { max-height: 320px; }
	.tb-hero__cta-row { justify-content: center; }
}

/* 10. Utility-Klassen (für künftige BeBuilder-Sektionen) ------------------ */
.tb-mobile-cta { display: none; }

@media (max-width: 768px) {
	.tb-mobile-cta {
		display: inline-flex !important;
		position: fixed;
		left: 16px;
		right: 16px;
		bottom: 16px;
		z-index: 9000;
		align-items: center;
		justify-content: center;
		padding: 14px 20px;
		background: var(--tb-blue);
		color: #fff !important;
		font-weight: 700;
		border-radius: 999px;
		box-shadow: var(--tb-shadow-lg);
		text-decoration: none !important;
	}
	.tb-mobile-cta:active { transform: translateY(1px); }
}

.tb-trustbar {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	padding: 18px 24px;
	background: #fff;
	border: 1px solid var(--tb-border);
	border-radius: var(--tb-radius);
	box-shadow: var(--tb-shadow-sm);
}
.tb-trustbar__item {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	color: var(--tb-ink-soft);
	line-height: 1.3;
}
.tb-trustbar__item strong { color: var(--tb-ink); font-weight: 700; }
.tb-trustbar__icon {
	flex: 0 0 28px;
	width: 28px; height: 28px;
	display: grid; place-items: center;
	background: rgba(0,137,247,.1);
	color: var(--tb-blue);
	border-radius: 8px;
}
@media (max-width: 900px) { .tb-trustbar { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .tb-trustbar { grid-template-columns: 1fr; padding: 14px; } }

.tb-from-price {
	display: inline-block;
	padding: 4px 10px;
	font-size: 12px;
	font-weight: 600;
	color: var(--tb-blue);
	background: rgba(0,137,247,.12);
	border-radius: 999px;
	letter-spacing: .02em;
}

/* ==========================================================================
   Single Product Page — Galerie & Summary
   --------------------------------------------------------------------------
   - Galerie: Thumbnails links vertikal, Hauptbild rechts mit dezentem Hintergrund
   - Summary-Reihenfolge: Titel → Preis → CTA (Button+Herz) → Beschreibung → Meta
   - SKU/Kategorie als Plain-Text ohne Border-Box
   ========================================================================== */

/* Galerie: Container als Row mit Thumbs links */
.woocommerce-product-gallery {
	display: flex !important;
	flex-direction: row !important;
	align-items: flex-start !important;
	gap: 14px !important;
}
.woocommerce-product-gallery .flex-viewport {
	flex: 1 1 auto !important;
	width: auto !important;
	height: auto !important;
	aspect-ratio: 1 / 1 !important;
	background: #f7f8fa !important;
	border-radius: 14px !important;
	box-sizing: border-box !important;
	overflow: hidden !important;
}
.woocommerce-product-gallery .flex-viewport .woocommerce-product-gallery__wrapper,
.woocommerce-product-gallery .flex-viewport .woocommerce-product-gallery__image {
	height: 100% !important;
}
.woocommerce-product-gallery .flex-viewport img.wp-post-image,
.woocommerce-product-gallery .flex-viewport .woocommerce-product-gallery__image > a > img {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
	padding: 28px !important;
	box-sizing: border-box !important;
}

/* Thumbs-Spalte links */
.woocommerce-product-gallery .mfn-flex-control-thumbs-wrapper {
	order: -1 !important;
	width: 88px !important;
	flex: 0 0 88px !important;
	height: auto !important;
	overflow: visible !important;
	padding: 0 !important;
}
.woocommerce-product-gallery ol.flex-control-nav {
	display: flex !important;
	flex-direction: column !important;
	width: 88px !important;
	height: auto !important;
	gap: 10px !important;
	transform: none !important;
	padding: 0 !important;
	margin: 0 !important;
}
.woocommerce-product-gallery ol.flex-control-nav li {
	width: 88px !important;
	height: 88px !important;
	margin: 0 !important;
	padding: 0 !important;
	transform: none !important;
	border-radius: 10px !important;
	overflow: hidden !important;
	background: #f7f8fa !important;
	border: 2px solid transparent !important;
	cursor: pointer;
	transition: border-color .15s ease, transform .15s ease;
	list-style: none !important;
}
.woocommerce-product-gallery ol.flex-control-nav li:hover { border-color: #d0d6dd !important; }
.woocommerce-product-gallery ol.flex-control-nav li img {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
	padding: 6px !important;
	box-sizing: border-box !important;
	opacity: 1 !important;
}
.woocommerce-product-gallery ol.flex-control-nav li:has(img.flex-active) {
	border-color: var(--tb-blue) !important;
}

/* Zoom-Trigger als weisse Card mit Schatten */
.woocommerce-product-gallery .woocommerce-product-gallery__trigger {
	top: 14px !important;
	right: 14px !important;
	width: 40px !important;
	height: 40px !important;
	background: #fff !important;
	border-radius: 10px !important;
	box-shadow: 0 2px 8px rgba(0,0,0,.06) !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	color: #1a2330 !important;
	font-size: 16px !important;
	transition: transform .15s ease;
}
.woocommerce-product-gallery .woocommerce-product-gallery__trigger:hover { transform: scale(1.05); }

/* === Summary: Reihenfolge & Cleanup === */
.entry-summary > .mcb-column-inner {
	display: flex !important;
	flex-direction: column !important;
}
.entry-summary > .mcb-column-inner > .product_title { order: 1; margin-bottom: 12px !important; }
.entry-summary > .mcb-column-inner > p.price { order: 2; }
.entry-summary > .mcb-column-inner > p.cart { order: 3; }
.entry-summary > .mcb-column-inner > .mfn-wish-button { order: 4; }
.entry-summary > .mcb-column-inner > .woocommerce-product-details__short-description {
	order: 5;
	margin-top: 28px;
	padding-top: 22px;
	border-top: 1px solid #eef0f3;
}
.entry-summary > .mcb-column-inner > .product_meta { order: 6; }
.entry-summary > .mcb-column-inner > .share-simple-wrapper { order: 7; }

/* Bullet-Trennlinien zwischen den Stichpunkten weg */
.entry-summary .woocommerce-product-details__short-description ul li::after {
	display: none !important;
	content: none !important;
}
.entry-summary .woocommerce-product-details__short-description ul li {
	padding-bottom: 6px !important;
	padding-top: 6px !important;
}

/* Preis: dunkel/fett statt knallblau */
.entry-summary p.price,
.entry-summary .price,
.entry-summary .price .woocommerce-Price-amount {
	color: #1a2330 !important;
	font-weight: 700 !important;
	font-size: 28px !important;
}
.entry-summary p.price { margin: 24px 0 14px !important; }

/* CTA-Block: prominenter Button + Herz inline rechts */
.entry-summary p.cart {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	width: 100% !important;
	margin: 0 !important;
}
.entry-summary p.cart .button,
.entry-summary a.button.product_type_external,
.entry-summary .single_add_to_cart_button {
	flex: 1 1 auto !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: auto !important;
	max-width: 320px;
	padding: 14px 28px !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	border-radius: 10px !important;
	background: var(--tb-blue) !important;
	color: #fff !important;
	box-shadow: 0 4px 14px rgba(0,137,247,.25) !important;
	text-transform: none !important;
}
.entry-summary p.cart .button:hover,
.entry-summary a.button.product_type_external:hover,
.entry-summary .single_add_to_cart_button:hover {
	background: var(--tb-blue-hover) !important;
	box-shadow: 0 6px 18px rgba(0,137,247,.35) !important;
	transform: translateY(-1px);
}

/* Herz: visuell neben den Button gezogen (negative margin-top kompensiert
   das vom flex-order erzeugte Stacking) */
.entry-summary > .mcb-column-inner > .mfn-wish-button {
	width: 48px !important;
	height: 48px !important;
	margin: -56px 0 0 calc(320px + 18px) !important;
	background: transparent !important;
	border: none !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}
.entry-summary > .mcb-column-inner > .mfn-wish-button svg {
	width: 24px !important;
	height: 24px !important;
}

/* Meta-Bereich: Kategorie + SKU als Plain-Text, ohne Border-Box */
.entry-summary .product_meta {
	margin-top: 22px !important;
	padding-top: 14px !important;
	border-top: 1px solid #eef0f3 !important;
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 14px !important;
	align-items: center !important;
}
.entry-summary .sku_wrapper,
.entry-summary .posted_in {
	border: none !important;
	padding: 0 !important;
	display: inline !important;
	font-size: 13px !important;
	color: #5b6470 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	background: none !important;
	margin: 0 !important;
}
.entry-summary .sku_wrapper .sku { font-weight: 600; color: #1a2330; }
.entry-summary .posted_in a { color: var(--tb-blue) !important; }

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

	.mobile-header-mini #Top_bar a.responsive-menu-toggle {
		top: 30px !important;
		left: auto;
		right: 10px !important;
		margin-top: -17px;
	}

	div#Subheader { display: none; }

	.page-id-6853 .section_wrapper.mfn-wrapper-for-wraps.mcb-section-inner.mcb-section-inner-kw2vxjdi {
		padding: 0;
	}

	.dgwt-wcas-search-wrapp.dgwt-wcas-is-detail-box.dgwt-wcas-has-submit.woocommerce.dgwt-wcas-style-pirx.js-dgwt-wcas-layout-classic.dgwt-wcas-layout-classic.js-dgwt-wcas-mobile-overlay-enabled.dgwt-wcas-mobile-overlay-trigger-active {
		display: none;
	}
}

/* 12. Mega-Menu (BeTheme .mfn-megamenu) ----------------------------------
   Panel sitzt flush am Menü (kein margin-top). Eine sichtbare Lücke wäre
   eine tote Hover-Zone, die das Menü beim diagonalen Cursorpfad zuklappt
   bevor der User ein Item rechts erreicht. Atemluft kommt aus dem internen
   padding der Box statt aus einem Abstand zum Trigger. */
#Top_bar .menu ul.mfn-megamenu {
	background: #fff;
	border: 1px solid var(--tb-border);
	border-radius: var(--tb-radius);
	box-shadow: var(--tb-shadow-lg);
	padding: 24px 28px !important;
	margin-top: 0 !important;
}

#Top_bar .menu ul.mfn-megamenu > li {
	padding: 0 24px !important;
	border: none !important;
	background: transparent !important;
}
#Top_bar .menu ul.mfn-megamenu > li + li {
	border-left: 1px solid #eef0f3 !important;
}
#Top_bar .menu ul.mfn-megamenu > li:first-child { padding-left: 0 !important; }
#Top_bar .menu ul.mfn-megamenu > li.last-item,
#Top_bar .menu ul.mfn-megamenu > li:last-child {
	padding-right: 0 !important;
}

/* BeTheme-Default-Borders auf inneren Listen explizit zurücksetzen */
#Top_bar .menu ul.mfn-megamenu ul.sub-menu,
#Top_bar .menu ul.mfn-megamenu ul.sub-menu li {
	border: none !important;
	background: transparent !important;
	box-shadow: none !important;
}

#Top_bar .menu ul.mfn-megamenu > li > a.mfn-megamenu-title {
	display: block !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: .14em !important;
	text-transform: uppercase !important;
	color: var(--tb-blue) !important;
	text-align: left !important;
	padding: 4px 12px 10px 12px !important;
	margin-bottom: 6px !important;
	border-bottom: 1px solid #eef0f3;
}

#Top_bar .menu ul.mfn-megamenu > li > a.mfn-megamenu-title:hover {
	color: var(--tb-blue-hover) !important;
	background: transparent !important;
}

#Top_bar .menu ul.mfn-megamenu ul.sub-menu {
	padding: 0 !important;
	margin: 0 !important;
	list-style: none !important;
	text-align: left !important;
}

#Top_bar .menu ul.mfn-megamenu ul.sub-menu li {
	padding: 0 !important;
	margin: 0 !important;
	text-align: left !important;
}

#Top_bar .menu ul.mfn-megamenu ul.sub-menu li > a {
	display: block !important;
	padding: 6px 12px !important;
	color: var(--tb-ink-soft) !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	text-align: left !important;
	border-radius: 8px;
	transition: background-color .15s ease, color .15s ease, padding-left .15s ease;
	line-height: 1.4 !important;
}

#Top_bar .menu ul.mfn-megamenu ul.sub-menu li > a:hover {
	color: var(--tb-blue) !important;
	background: rgba(0, 137, 247, .07) !important;
	padding-left: 16px !important;
}

@media (max-width: 991px) {
	#Top_bar .menu ul.mfn-megamenu {
		padding: 12px !important;
		border-radius: 0;
	}
	#Top_bar .menu ul.mfn-megamenu > li {
		padding: 0 !important;
		border-right: none;
		border-bottom: 1px solid #eef0f3;
	}
	#Top_bar .menu ul.mfn-megamenu > li:last-child { border-bottom: none; }
}

/* ==========================================================================
   Shop / Product Loop Cards
   ========================================================================== */

.woocommerce ul.products li.product {
	background: #fff;
	border: 1px solid var(--tb-border);
	border-radius: var(--tb-radius);
	padding: 16px 16px 20px;
	transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
	position: relative;
	overflow: hidden;
}
.woocommerce ul.products li.product:hover {
	box-shadow: var(--tb-shadow-md);
	transform: translateY(-3px);
	border-color: #d8d8d8;
}

.woocommerce ul.products li.product .mfn-li-product-row-image {
	background: var(--tb-bg-soft);
	border-radius: 8px;
	padding: 12px;
	margin-bottom: 14px;
}
.woocommerce ul.products li.product .mfn-li-product-row-image img {
	background: transparent !important;
	transition: transform .3s ease;
}
.woocommerce ul.products li.product:hover .mfn-li-product-row-image img {
	transform: scale(1.04);
}

/* === Sauberer Cross-Fade wie Pro-Shops ====================================
   BeTheme positioniert das Sekundärbild mit `top/left: ~123px + transform:
   translate(-123px,-123px)` und animiert den Transform auf Hover – das
   produziert ein sichtbares „Reinrutschen". Wir killen den Transform-Quirk,
   stacken beide Bilder absolut an Position 0,0 und cross-faden nur opacity. */
.woocommerce ul.products li.product .image_frame:has(.image-secondary) {
	position: relative !important;
	overflow: hidden;
}
.woocommerce ul.products li.product .image_frame:has(.image-secondary) > a,
.woocommerce ul.products li.product .image_frame:has(.image-secondary) .image_wrapper {
	position: relative !important;
}
.woocommerce ul.products li.product .image_frame:has(.image-secondary) .image_wrapper {
	display: block;
	aspect-ratio: 1 / 1;
}
.woocommerce ul.products li.product .image_frame:has(.image-secondary) .image-secondary,
.woocommerce ul.products li.product .image_frame:has(.image-secondary) .mfn-product-list-gallery-item {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	transform: none !important;
}
.woocommerce ul.products li.product .image_frame:has(.image-secondary) .image-secondary[style] {
	top: 0 !important;
	left: 0 !important;
	transform: none !important;
}
.woocommerce ul.products li.product .image_frame:has(.image-secondary) .image-secondary,
.woocommerce ul.products li.product .image_frame:has(.image-secondary) .mfn-product-list-gallery-item img,
.woocommerce ul.products li.product .image_frame:has(.image-secondary) .attachment-shop_catalog {
	object-fit: contain;
	transition: opacity .45s cubic-bezier(.22,.61,.36,1) !important;
	will-change: opacity;
}
.woocommerce ul.products li.product .image_frame:has(.image-secondary) .image-secondary { opacity: 0; }
.woocommerce ul.products li.product .image_frame:has(.image-secondary) .mfn-product-list-gallery-item,
.woocommerce ul.products li.product .image_frame:has(.image-secondary) .attachment-shop_catalog { opacity: 1; }

.woocommerce ul.products li.product:hover .image_frame:has(.image-secondary) .image-secondary { opacity: 1; }
.woocommerce ul.products li.product:hover .image_frame:has(.image-secondary) .mfn-product-list-gallery-item img,
.woocommerce ul.products li.product:hover .image_frame:has(.image-secondary) .attachment-shop_catalog { opacity: 0; }

/* BeTheme's eigener Hover-Mask-Layer kann hier weg */
.woocommerce ul.products li.product .image_frame:has(.image-secondary) .mask {
	display: none !important;
}

.woocommerce ul.products li.product h4.mfn-woo-product-title {
	font-size: 16px;
	font-weight: 600;
	color: var(--tb-ink);
	margin: 6px 0 8px;
	transition: color .2s ease;
}
.woocommerce ul.products li.product:hover h4.mfn-woo-product-title {
	color: var(--tb-blue);
}

.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .price * {
	color: var(--tb-ink) !important;
	font-weight: 700 !important;
	font-size: 17px !important;
	text-decoration: none !important;
}

.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product .product_type_external {
	display: inline-block !important;
	background: var(--tb-blue) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 6px !important;
	padding: 7px 14px !important;
	font-weight: 500 !important;
	font-size: 13px !important;
	letter-spacing: .2px;
	margin-top: 12px !important;
	transition: background .2s ease, transform .15s ease;
	text-transform: none !important;
}
.woocommerce ul.products li.product a.button:hover,
.woocommerce ul.products li.product .product_type_external:hover {
	background: var(--tb-blue-hover) !important;
	transform: translateY(-1px);
}

/* Wishlist-Herz neben Button: inaktiv grau, aktiv rot, vertikal mittig zum Button.
   margin-top:12px gleicht den margin-top des Buttons aus. */
.mfn-li-product-row-button .mfn-wish-button {
	margin-top: 12px !important;
}
.mfn-wish-button svg path {
	stroke: #9ca3af !important;
	fill: none !important;
}
.mfn-wish-button:hover svg path {
	stroke: #e74c3c !important;
}
.mfn-wish-button.loved svg path {
	fill: #e74c3c !important;
	stroke: #e74c3c !important;
}

.woocommerce ul.products li.product .yith-wcwl-add-to-wishlist,
.woocommerce ul.products li.product .tinv-wishlist {
	position: absolute;
	top: 14px;
	right: 14px;
	margin: 0 !important;
	z-index: 2;
}

/* ==========================================================================
   Shop / Sidebar Filter
   --------------------------------------------------------------------------
   - Ein durchgängiger Block ohne äußeren Rahmen, Sektionen mit Trennlinien
   - „Kategorien" (oben) = WooCommerce Categories Block (mit Icons)
   - „Zielgruppe"        = mfn_woo_attributes (label „Kategorien" wird per
                            CSS überschrieben; Filter-Button ausgeblendet,
                            Auto-Submit via tb-shop.js)
   - „Preis"             = WC price filter, schlanker Slider, Text-Link
                            „Nach Preis filtern" (Text wird per JS gesetzt)
   ========================================================================== */

/* padding-top gleicht den padding-top:30px von main.sections_group aus,
   damit „KATEGORIEN" auf gleicher Höhe wie die obere Kante der Produktkarten startet */
.mcb-sidebar.sidebar { padding-right: 24px; padding-top: 30px; }
.mcb-sidebar .widget-area {
	background: transparent;
	border: none;
	box-shadow: none;
	padding: 0;
}

.mcb-sidebar .widget.mfn_woo_attributes:not(:has(input[type="checkbox"])):not(:has(select)) {
	display: none;
}

.mcb-sidebar .widget {
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 16px 0 !important;
	margin: 0 !important;
	border-bottom: 1px solid var(--tb-border) !important;
}
.mcb-sidebar .widget:first-child { padding-top: 0 !important; }
.mcb-sidebar .widget:last-child  { padding-bottom: 0 !important; border-bottom: none !important; }

/* Section Titles (echte h4 / Pseudo-Titel via ::before) */
.mcb-sidebar .widget h4,
.mcb-sidebar .widget .widgettitle {
	display: block;
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: 1px !important;
	text-transform: uppercase !important;
	color: var(--tb-muted) !important;
	margin: 0 0 14px !important;
	padding: 0 !important;
	border: none !important;
}
.mcb-sidebar .widget_block::before,
.mcb-sidebar .widget.widget_price_filter::before {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--tb-muted);
	margin-bottom: 14px;
}
.mcb-sidebar .widget_block::before              { content: "Kategorien"; }
.mcb-sidebar .widget.widget_price_filter::before { content: "Preis"; }

/* Zielgruppe (das mfn-vr-Label sagt original „Kategorien" → überschreiben) */
.mcb-sidebar .mfn-vr,
.mcb-sidebar .mfn_attr_filters {
	margin: 0 !important;
	padding: 0 !important;
}
.mcb-sidebar .widget .mfn-vr > label {
	display: block !important;
	margin: 0 0 14px !important;
	padding: 0 !important;
	border: none !important;
	font-size: 0 !important;
	line-height: 1.2 !important;
	min-height: 0 !important;
	height: auto !important;
	cursor: default;
}
.mcb-sidebar .widget .mfn-vr > label::before {
	content: "Zielgruppe";
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--tb-muted);
	line-height: 1.2;
}

/* Hauptkategorien-Liste (WC categories block) */
.mcb-sidebar .wc-block-product-categories-list {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}
.mcb-sidebar .wc-block-product-categories-list-item {
	margin: 0 !important;
	padding: 0 !important;
}
.mcb-sidebar .wc-block-product-categories-list-item > a {
	display: block;
	padding: 9px 12px;
	color: var(--tb-ink);
	font-weight: 500;
	font-size: 14px;
	border-radius: 8px;
	transition: background .15s ease, color .15s ease;
	text-decoration: none !important;
}
.mcb-sidebar .wc-block-product-categories-list-item > a:hover {
	background: var(--tb-bg-soft);
	color: var(--tb-blue);
}
.mcb-sidebar .wc-block-product-categories-list--depth-1 {
	padding-left: 12px !important;
	border-left: 2px solid var(--tb-border);
	margin: 4px 0 4px 14px !important;
}
.mcb-sidebar .wc-block-product-categories-list--depth-1 a {
	padding: 6px 10px;
	font-size: 13px;
	font-weight: 400;
	color: var(--tb-muted);
}

/* Icons für Top-Level Kategorien */
.mcb-sidebar .wc-block-product-categories-list--depth-0 > .wc-block-product-categories-list-item > a {
	padding-left: 40px;
	background-repeat: no-repeat;
	background-position: 12px center;
	background-size: 18px 18px;
}
.mcb-sidebar a[href$="/produkt-kategorie/bekleidung/"] {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 4l4 3-2 4-2-1v10H8V10l-2 1-2-4 4-3 2 1h4l2-1z'/%3E%3C/svg%3E");
}
.mcb-sidebar a[href$="/produkt-kategorie/accessoires-bedrucken/"] {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 7h12l-1 13H7L6 7z'/%3E%3Cpath d='M9 7V5a3 3 0 0 1 6 0v2'/%3E%3C/svg%3E");
}
.mcb-sidebar a[href$="/produkt-kategorie/home-living/"] {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-8 9 8v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-9z'/%3E%3C/svg%3E");
}

/* Zielgruppe – Checkbox-Liste */
.mcb-sidebar .mfn-vr-options { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.mcb-sidebar .mfn-vr-options li { margin: 0 !important; padding: 0 !important; }
.mcb-sidebar .mfn-vr-options .label {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 0;
	font-size: 14px;
	color: var(--tb-ink-soft);
	cursor: pointer;
	transition: color .15s ease;
}
.mcb-sidebar .mfn-vr-options .label:hover { color: var(--tb-blue); }
.mcb-sidebar .mfn-vr-options input[type="checkbox"] {
	width: 16px;
	height: 16px;
	accent-color: var(--tb-blue);
	cursor: pointer;
	margin: 0;
}
.mcb-sidebar .mfn_attr_icon { display: flex; align-items: center; gap: 8px; }

/* Filter-Button ausblenden – Auto-Submit übernimmt tb-shop.js bei Checkbox-Change */
.mcb-sidebar .mfn_attr_filters .button.mfn-btn { display: none !important; }

/* Preis-Slider */
.mcb-sidebar .price_slider_wrapper { padding: 0 !important; }
.mcb-sidebar .price_slider.ui-slider {
	position: relative;
	height: 4px;
	background: #e5e7eb;
	border: none !important;
	border-radius: 999px;
	margin: 8px 8px 16px;
}
.mcb-sidebar .price_slider .ui-slider-range {
	background: var(--tb-blue) !important;
	border: none !important;
	height: 4px;
	border-radius: 999px;
	top: 0 !important;
}
.mcb-sidebar .price_slider .ui-slider-handle {
	width: 16px !important;
	height: 16px !important;
	background: #fff !important;
	border: 1px solid #d4d8dd !important;
	border-radius: 50% !important;
	box-shadow: 0 1px 3px rgba(0,0,0,.12) !important;
	top: 50% !important;
	margin-top: -8px !important;
	margin-left: -8px !important;
	cursor: grab;
	transition: box-shadow .15s ease;
}
.mcb-sidebar .price_slider .ui-slider-handle:hover,
.mcb-sidebar .price_slider .ui-slider-handle:focus {
	box-shadow: 0 0 0 6px rgba(0,137,247,.12), 0 1px 3px rgba(0,0,0,.12) !important;
	border-color: var(--tb-blue) !important;
	outline: none;
}

/* Preis – Layout: erst Labels (CHF X — CHF Y), dann „Nach Preis filtern" */
.mcb-sidebar .widget_price_filter .price_slider_amount {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.mcb-sidebar .widget_price_filter .price_label  { order: 1; }
.mcb-sidebar .widget_price_filter .button       { order: 2; }

/* Labels links/rechts; „Preis:" + „—" via font-size:0 ausblenden.
   margin-right/left: auto auf .from/.to schiebt sie an die äußeren Kanten und
   ignoriert die anonymen Text-Flex-Items dazwischen. */
.mcb-sidebar .widget_price_filter .price_label {
	display: flex !important;
	width: 100% !important;
	justify-content: flex-start;
	align-items: center;
	margin: 0 !important;
	padding: 0;
	font-size: 0 !important;
}
.mcb-sidebar .widget_price_filter .price_label .from { margin-right: auto; }
.mcb-sidebar .widget_price_filter .price_label .to   { margin-left:  auto; }
.mcb-sidebar .widget_price_filter .price_label .from,
.mcb-sidebar .widget_price_filter .price_label .to {
	font-size: 12px !important;
	font-weight: 600 !important;
	color: #1a2330 !important;
	background: #f5f7fa !important;
	border: 1px solid #e6e9ee !important;
	border-radius: 10px !important;
	padding: 3px 8px !important;
	letter-spacing: .2px !important;
}

/* „Nach Preis filtern" Text-Link (Text wird per tb-shop.js gesetzt) */
.mcb-sidebar .widget_price_filter .button {
	display: inline-block !important;
	width: auto !important;
	align-self: flex-start;
	background: transparent !important;
	color: var(--tb-blue) !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	font-weight: 500 !important;
	font-size: 13px !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-decoration: underline !important;
	text-underline-offset: 3px;
	text-decoration-color: rgba(0,137,247,.3) !important;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: none !important;
	transition: color .15s ease, text-decoration-color .15s ease;
}
.mcb-sidebar .widget_price_filter .button:hover {
	background: transparent !important;
	color: var(--tb-blue-hover) !important;
	text-decoration-color: currentColor !important;
	transform: none !important;
}