/* Merchify God Tool – Shop-Erweiterungen (Frontend) */
	:root { --mf-pink: #ff0080; --mf-pink-soft: rgba(255,0,128,.28); --mf-bg: #121212; --mf-line: #262626; }

/* =================== Badge =================== */
.mf-cart-host { position: relative !important; }
.mf-badge {
	position: absolute; top: -7px; right: -9px; z-index: 2;
	min-width: 19px; height: 19px; padding: 0 5px; box-sizing: border-box;
	border-radius: 10px; background: #fff; color: var(--mf-pink);
	font: 700 11px/19px Poppins, system-ui, sans-serif; text-align: center;
	box-shadow: 0 0 0 2px var(--mf-pink);
	pointer-events: none; transform: scale(0); transition: transform .2s ease;
}
.mf-badge.is-visible { transform: scale(1); }
.mf-badge.mf-bump { animation: mfBump .5s cubic-bezier(.3,1.6,.5,1); }
@keyframes mfBump { 0% { transform: scale(1); } 35% { transform: scale(1.5); } 100% { transform: scale(1); } }

/* =================== Desktop: Lupe neben dem Warenkorb =================== */
button.mf-search-toggle, button.mf-search-toggle:hover, button.mf-search-toggle:focus, button.mf-search-toggle:active {
	display: inline-flex !important; align-items: center !important; justify-content: center !important;
	align-self: flex-start !important;
	width: 32px !important; height: 32px !important; min-width: 0 !important;
	margin: 8px 0 0 !important; padding: 0 !important;
	background: transparent !important; border: 0 !important; border-radius: 0 !important;
	box-shadow: none !important; outline-offset: 4px;
	color: var(--mf-pink) !important; cursor: pointer; transform: none !important;
}
button.mf-search-toggle svg { display: block; width: 26px !important; height: 26px !important; transition: transform .15s ease; }
button.mf-search-toggle:hover svg { transform: scale(1.1); }

/* =================== Mobil: Lupe + Warenkorb neben dem Menü-Button =================== */
.mf-mobile-actions { position: fixed; z-index: 99990; display: none; gap: 8px; }
.mf-mobile-actions.is-ready { display: flex; }
.mf-mobile-actions .mf-sq, .mf-mobile-actions .mf-sq:hover, .mf-mobile-actions .mf-sq:focus, .mf-mobile-actions .mf-sq:active {
	position: relative; display: flex !important; align-items: center !important; justify-content: center !important;
	width: 40px !important; height: 40px !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important;
	background: var(--mf-pink) !important; color: #fff !important; text-decoration: none !important;
	border: 0 !important; border-radius: 4.8px !important; box-shadow: none !important;
	transform: none !important; transition: none !important; line-height: 1 !important; cursor: pointer;
}
.mf-mobile-actions .mf-sq svg { display: block; width: 20px !important; height: 20px !important; }
.mf-mobile-actions .mf-sq i {
	position: relative !important; display: block !important; width: 1em !important; height: 1em !important;
	font-size: 23px !important; line-height: 1 !important; color: #fff !important;
	margin: 0 !important; padding: 0 !important; transform: none !important;
}
/* Die Warenkorb-Glyphe ist in der Icon-Schrift um ~0,19em nach rechts versetzt gezeichnet – hier ausgleichen */
.mf-mobile-actions .mf-sq i::before {
	position: absolute !important; left: 50% !important; top: 50% !important;
	display: block !important; width: auto !important; line-height: 1 !important;
	transform: translate(calc(-50% - .19em), -50%) !important;
}
.mf-mobile-actions .mf-badge { top: -7px; right: -7px; }
@media (min-width: 1025px) { .mf-mobile-actions, .mf-mobile-actions.is-ready { display: none !important; } }

/* =================== Gemeinsame Overlay-Basis =================== */
.mf-backdrop {
	position: fixed; inset: 0; z-index: 2147483600; background: rgba(0,0,0,.7);
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
	opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s;
}
.mf-backdrop.is-open { opacity: 1; visibility: visible; }
html.mf-lock, html.mf-lock body { overflow: hidden !important; }
.mf-search-panel [hidden], .mf-drawer [hidden] { display: none !important; }

button.mf-x, button.mf-x:hover, button.mf-x:focus, button.mf-x:active {
	display: inline-flex !important; align-items: center !important; justify-content: center !important;
	width: 36px !important; height: 36px !important; min-width: 0 !important;
	margin: 0 -6px 0 0 !important; padding: 0 !important;
	background: transparent !important; border: 0 !important; border-radius: 50% !important;
	box-shadow: none !important; color: #8a8a8a !important; cursor: pointer; transform: none !important;
}
button.mf-x:hover { color: #fff !important; background: #222 !important; }
button.mf-x svg { width: 20px; height: 20px; }

.mf-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 14px; }
.mf-title { margin: 0 !important; color: #fff !important; font: 600 20px/1.2 Poppins, system-ui, sans-serif !important; letter-spacing: -.01em; }
.mf-title span { color: var(--mf-pink); }
.mf-label { margin: 18px 2px 10px !important; color: #8a8a8a !important; font: 600 11px/1 Poppins, system-ui, sans-serif !important; letter-spacing: .12em; text-transform: uppercase; }

/* =================== Suche =================== */
.mf-search-panel {
	position: fixed; z-index: 2147483601; left: 50%;
	top: calc(var(--wp-admin--admin-bar--height, 0px) + 10vh);
	width: min(680px, calc(100vw - 32px)); box-sizing: border-box;
	max-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px) - 14vh);
	display: flex; flex-direction: column;
	padding: 24px 24px 18px !important;
	background: var(--mf-bg) !important; border: 1px solid var(--mf-line); border-radius: 20px;
	box-shadow: 0 30px 80px rgba(0,0,0,.6);
	font-family: Poppins, system-ui, sans-serif;
	opacity: 0; visibility: hidden; transform: translate(-50%, -12px) scale(.98);
	transition: opacity .25s, transform .25s cubic-bezier(.2,.8,.2,1), visibility .25s;
}
.mf-search-panel.is-open { opacity: 1; visibility: visible; transform: translate(-50%, 0) scale(1); }

.mf-search-form { position: relative; margin: 0 !important; flex: 0 0 auto; }
.mf-search-form input.mf-search-input {
	display: block; width: 100% !important; height: 56px !important; box-sizing: border-box !important;
	margin: 0 !important; padding: 0 64px 0 22px !important;
	background: #fff !important; color: #111 !important;
	border: 2px solid transparent !important; border-radius: 28px !important;
	font: 500 17px/52px Poppins, system-ui, sans-serif !important;
	box-shadow: none !important; outline: 0 !important; -webkit-appearance: none; appearance: none;
	transition: border-color .15s, box-shadow .15s;
}
.mf-search-form input.mf-search-input:focus { border-color: var(--mf-pink) !important; box-shadow: 0 0 0 5px var(--mf-pink-soft) !important; }
.mf-search-form input.mf-search-input::placeholder { color: #9a9a9a !important; opacity: 1 !important; }
.mf-search-form input.mf-search-input::-webkit-search-cancel-button { display: none; }
button.mf-search-submit, button.mf-search-submit:hover, button.mf-search-submit:focus, button.mf-search-submit:active {
	position: absolute !important; top: 6px !important; right: 6px !important;
	display: flex !important; align-items: center !important; justify-content: center !important;
	width: 44px !important; height: 44px !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important;
	background: var(--mf-pink) !important; color: #fff !important;
	border: 0 !important; border-radius: 50% !important; box-shadow: none !important; cursor: pointer; transform: none !important;
}
button.mf-search-submit svg { width: 20px; height: 20px; }
.mf-search-form.is-loading button.mf-search-submit svg { animation: mfSpin .8s linear infinite; }
@keyframes mfSpin { to { transform: rotate(360deg); } }

.mf-search-body { margin: 0 -8px; padding: 0 8px; overflow-y: auto; overscroll-behavior: contain; }
.mf-results:empty, .mf-suggest:empty { display: none; }
.mf-results { margin-top: 14px; }

/* Vorschlags-Chips */
.mf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
button.mf-chip, button.mf-chip:hover, button.mf-chip:focus, button.mf-chip:active {
	display: inline-flex !important; align-items: center; gap: 6px;
	height: 34px !important; min-width: 0 !important; margin: 0 !important; padding: 0 14px !important;
	background: #1c1c1c !important; color: #ddd !important; border: 1px solid #2c2c2c !important; border-radius: 17px !important;
	font: 500 13px/1 Poppins, system-ui, sans-serif !important; box-shadow: none !important; cursor: pointer; transform: none !important;
	transition: border-color .15s, color .15s !important;
}
button.mf-chip:hover, button.mf-chip:focus-visible { border-color: var(--mf-pink) !important; color: #fff !important; }

/* Logo-Reihe (Fanshops) */
.mf-logos { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; }
.mf-logo-tile {
	display: flex !important; flex-direction: column; align-items: center; gap: 6px;
	padding: 0 !important; text-decoration: none !important; color: #bbb !important;
	font: 500 11px/1.25 Poppins, system-ui, sans-serif; text-align: center;
}
/* Logos sind schwarz auf weiß → invert() macht sie weiß auf schwarz.
   Achtung: invert() dreht auch die Rahmenfarbe um, daher hier die "umgekehrten" Werte
   (#d5d5d5 → erscheint als #2a2a2a, #00ff7f → erscheint als Pink #ff0080). */
.mf-logo-tile__img {
	width: 100%; aspect-ratio: 1; border-radius: 12px; border: 1px solid #d5d5d5;
	background: #fff center / 86% no-repeat; filter: invert(1);
	transition: border-color .15s, transform .15s;
}
.mf-logo-tile:hover .mf-logo-tile__img, .mf-logo-tile.is-active .mf-logo-tile__img { border-color: #00ff7f; transform: translateY(-2px); }
.mf-logo-tile:hover, .mf-logo-tile.is-active { color: #fff !important; }

/* Produkt-Zeilen */
.mf-result {
	display: flex !important; align-items: center; gap: 14px;
	padding: 8px !important; border-radius: 12px;
	color: #fff !important; text-decoration: none !important; transition: background .12s;
}
.mf-result:hover, .mf-result.is-active { background: #1f1f1f; }
.mf-result.is-active { box-shadow: inset 0 0 0 1px rgba(255,0,128,.5); }
.mf-result__img { flex: 0 0 56px; width: 56px; height: 56px; border-radius: 10px; overflow: hidden; background: #fff center / contain no-repeat; }
.mf-result__img--logo { background-size: 86%; filter: invert(1); border: 1px solid #d5d5d5; /* erscheint invertiert als #2a2a2a */ }
.mf-result__body { flex: 1; min-width: 0; }
.mf-result__name { display: block; color: #fff; font: 500 15px/1.35 Poppins, system-ui, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mf-result__name mark { background: none; color: var(--mf-pink); font-weight: 600; }
.mf-result__meta { display: block; margin-top: 2px; color: #9a9a9a; font: 400 13px/1.3 Poppins, system-ui, sans-serif; }
.mf-result__price { flex: 0 0 auto; color: #fff; font: 600 15px/1 Poppins, system-ui, sans-serif; padding-right: 6px; }
.mf-result__go { flex: 0 0 auto; color: var(--mf-pink); padding-right: 6px; display: flex; }
.mf-results__all {
	display: flex !important; align-items: center; justify-content: center; gap: 6px;
	margin: 6px 0 2px; padding: 12px !important; border-radius: 12px;
	background: #1b1b1b; color: var(--mf-pink) !important; text-decoration: none !important;
	font: 600 14px/1 Poppins, system-ui, sans-serif;
}
.mf-results__all:hover, .mf-results__all.is-active { background: #242424; }
.mf-results__empty { padding: 18px 8px; color: #9a9a9a; text-align: center; font: 400 14px/1.4 Poppins, system-ui, sans-serif; }
.mf-results__empty strong { color: #fff; }
.mf-skel { display: flex; align-items: center; gap: 14px; padding: 8px; }
.mf-skel i { display: block; border-radius: 8px; background: linear-gradient(90deg,#1c1c1c,#2a2a2a,#1c1c1c); background-size: 200% 100%; animation: mfShimmer 1.2s infinite; }
@keyframes mfShimmer { to { background-position: -200% 0; } }

.mf-search-hint { margin: 14px 2px 0 !important; color: #777; font: 400 13px/1.4 Poppins, system-ui, sans-serif; flex: 0 0 auto; }
.mf-search-hint kbd {
	display: inline-block; padding: 1px 7px; margin: 0 2px;
	border: 1px solid #333; border-bottom-width: 2px; border-radius: 6px;
	background: #1b1b1b; color: #bbb; font: 500 12px/1.5 Poppins, system-ui, sans-serif;
}

/* =================== Mini-Warenkorb =================== */
.mf-drawer {
	position: fixed; z-index: 2147483602; top: 0; right: 0; bottom: 0;
	width: min(420px, 100vw); box-sizing: border-box;
	display: flex; flex-direction: column;
	background: var(--mf-bg); border-left: 1px solid var(--mf-line);
	box-shadow: -30px 0 80px rgba(0,0,0,.5);
	font-family: Poppins, system-ui, sans-serif; color: #fff;
	transform: translateX(105%); visibility: hidden;
	transition: transform .35s cubic-bezier(.2,.8,.2,1), visibility .35s;
}
.mf-drawer.is-open { transform: none; visibility: visible; }
.mf-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: calc(20px + var(--wp-admin--admin-bar--height, 0px)) 22px 16px; border-bottom: 1px solid var(--mf-line); }
.mf-drawer__items { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 8px 14px; }
.mf-item { display: flex; gap: 14px; padding: 14px 8px; border-bottom: 1px solid #1d1d1d; transition: opacity .2s; }
.mf-item.is-busy { opacity: .45; pointer-events: none; }
.mf-item__img { flex: 0 0 72px; width: 72px; height: 72px; border-radius: 12px; background: #fff center / contain no-repeat; }
.mf-item__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.mf-item__name { color: #fff !important; text-decoration: none !important; font: 500 14px/1.35 Poppins, system-ui, sans-serif; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mf-item__name:hover { color: var(--mf-pink) !important; }
.mf-item__opts { color: #8a8a8a; font: 400 12px/1.4 Poppins, system-ui, sans-serif; }
.mf-item__row { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 6px; }
.mf-item__price { font: 600 15px/1 Poppins, system-ui, sans-serif; }
.mf-qty { display: inline-flex; align-items: center; border: 1px solid #2c2c2c; border-radius: 18px; overflow: hidden; }
.mf-qty span { min-width: 28px; text-align: center; font: 600 14px/1 Poppins, system-ui, sans-serif; }
button.mf-qty__btn, button.mf-qty__btn:hover, button.mf-qty__btn:focus, button.mf-qty__btn:active,
button.mf-item__rm, button.mf-item__rm:hover, button.mf-item__rm:focus, button.mf-item__rm:active {
	display: inline-flex !important; align-items: center !important; justify-content: center !important;
	width: 34px !important; height: 34px !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important;
	background: transparent !important; color: #ccc !important; border: 0 !important; border-radius: 0 !important;
	box-shadow: none !important; cursor: pointer; transform: none !important; font: 500 18px/1 Poppins, system-ui, sans-serif !important;
}
button.mf-qty__btn:hover { color: var(--mf-pink) !important; background: #1d1d1d !important; }
button.mf-item__rm { width: 30px !important; height: 30px !important; color: #666 !important; border-radius: 50% !important; }
button.mf-item__rm:hover { color: #fff !important; background: #222 !important; }
button.mf-item__rm svg { width: 16px; height: 16px; }
.mf-drawer__foot { padding: 18px 22px calc(18px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--mf-line); background: #0e0e0e; }
.mf-sum { display: flex; justify-content: space-between; align-items: baseline; font: 600 17px/1 Poppins, system-ui, sans-serif; }
.mf-sum small { display: block; margin-top: 6px; color: #8a8a8a; font: 400 12px/1.3 Poppins, system-ui, sans-serif; }
a.mf-btn, a.mf-btn:hover, a.mf-btn:focus {
	display: flex !important; align-items: center; justify-content: center; gap: 8px;
	height: 52px; margin-top: 14px; border-radius: 26px; text-decoration: none !important;
	background: var(--mf-pink) !important; color: #fff !important; font: 600 16px/1 Poppins, system-ui, sans-serif;
	box-shadow: 0 8px 24px rgba(255,0,128,.35); transition: transform .15s;
}
a.mf-btn:hover { transform: translateY(-1px); }
a.mf-btn--ghost, a.mf-btn--ghost:hover, a.mf-btn--ghost:focus { height: 44px; margin-top: 8px; background: transparent !important; color: #ccc !important; box-shadow: none; font-weight: 500; font-size: 14px; }
a.mf-btn--ghost:hover { color: #fff !important; }
.mf-empty { padding: 50px 20px; text-align: center; color: #9a9a9a; font: 400 15px/1.5 Poppins, system-ui, sans-serif; }
.mf-empty svg { width: 56px; height: 56px; color: #333; margin-bottom: 10px; }
.mf-empty a.mf-btn { max-width: 240px; margin: 18px auto 0; }
.mf-empty--cart { display: flex; align-items: center; gap: 14px; margin: 6px 2px 4px; padding: 16px 16px; text-align: left; background: #161616; border: 1px solid #242424; border-radius: 14px; }
.mf-empty--cart svg { flex: 0 0 40px; width: 40px; height: 40px; margin: 0; color: var(--mf-pink); }
.mf-empty--cart b { display: block; color: #fff; font-weight: 600; font-size: 15px; }
.mf-empty--cart span { display: block; color: #8a8a8a; font-size: 13px; }
.mf-drawer-discover { padding: 0 2px 16px; }
.mf-drawer-discover .mf-logos { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }

/* =================== Einsaug-Effekt =================== */
.mf-fly {
	position: fixed; left: 0; top: 0; z-index: 2147483646; pointer-events: none;
	border-radius: 18px; background: #fff center / cover no-repeat;
	box-shadow: 0 0 0 3px #fff, 0 10px 40px rgba(255,0,128,.6);
	will-change: transform, opacity, border-radius;
}
.mf-ring {
	position: fixed; z-index: 2147483646; pointer-events: none; width: 16px; height: 16px; margin: -8px 0 0 -8px;
	border-radius: 50%; border: 3px solid var(--mf-pink); box-sizing: border-box;
}
.mf-spark {
	position: fixed; z-index: 2147483646; pointer-events: none; width: 6px; height: 6px; margin: -3px 0 0 -3px;
	border-radius: 50%; background: var(--mf-pink); box-shadow: 0 0 8px var(--mf-pink);
}
.mf-slurp { animation: mfSlurp .6s cubic-bezier(.3,1.5,.5,1); }
@keyframes mfSlurp {
	0% { transform: scale(1) rotate(0); } 20% { transform: scale(1.35, .8) rotate(-8deg); }
	45% { transform: scale(.85, 1.2) rotate(6deg); } 70% { transform: scale(1.08) rotate(-3deg); } 100% { transform: scale(1) rotate(0); }
}

/* =================== Fanshop-Finder =================== */
.mf-fanshops { font-family: Poppins, system-ui, sans-serif; margin: 0 auto; }
.mf-fs-search { position: relative; max-width: 520px; margin: 0 auto 28px; }
.mf-fs-search input {
	display: block; width: 100% !important; height: 52px !important; box-sizing: border-box !important; margin: 0 !important;
	padding: 0 20px 0 50px !important; border: 2px solid #2a2a2a !important; border-radius: 26px !important;
	background: #111 !important; color: #fff !important; font: 500 16px/48px Poppins, system-ui, sans-serif !important;
	outline: 0 !important; box-shadow: none !important; transition: border-color .15s, box-shadow .15s;
}
.mf-fs-search input:focus { border-color: var(--mf-pink) !important; box-shadow: 0 0 0 5px var(--mf-pink-soft) !important; }
.mf-fs-search input::placeholder { color: #777 !important; }
.mf-fs-search svg { position: absolute; left: 18px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); color: var(--mf-pink); pointer-events: none; }
.mf-fs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
.mf-fs {
	position: relative; display: flex !important; flex-direction: column; padding: 12px !important;
	background: #0f0f0f; border: 1px solid #222; border-radius: 18px; text-decoration: none !important;
	transition: transform .2s cubic-bezier(.2,.8,.2,1), border-color .2s, box-shadow .2s;
	opacity: 0; animation: mfIn .4s forwards;
}
.mf-fs:hover, .mf-fs:focus-visible { transform: translateY(-4px); border-color: var(--mf-pink); box-shadow: 0 14px 34px rgba(255,0,128,.25); }
.mf-fs__logo { width: 100%; aspect-ratio: 1; border-radius: 12px; background: #fff center / 82% no-repeat; filter: invert(1); }
.mf-fs__name { margin-top: 10px; color: #fff; font: 600 14px/1.3 Poppins, system-ui, sans-serif; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mf-fs__count { margin-top: 2px; color: #8a8a8a; font: 400 12px/1.3 Poppins, system-ui, sans-serif; text-align: center; }
.mf-fs:hover .mf-fs__name { color: var(--mf-pink); }
.mf-fs-empty { grid-column: 1 / -1; padding: 30px; text-align: center; color: #8a8a8a; }
.mf-fs-skel { aspect-ratio: .82; border-radius: 18px; background: linear-gradient(90deg,#141414,#1f1f1f,#141414); background-size: 200% 100%; animation: mfShimmer 1.2s infinite; }
@keyframes mfIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* =================== Produktseite: Farbe & Größe als Buttons statt Dropdown =================== */
/* Ecwids Dropdown bleibt (unsichtbar) bestehen – Preis, Bild, Lager & Warenkorb laufen weiter über Ecwid */
html#ecwid_html body#ecwid_body .ec-store .mf-opt-enhanced .product-details-module__content > .form-control--select { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; opacity: 0 !important; pointer-events: none !important; }
html#ecwid_html body#ecwid_body .ec-store .mf-opt-sel { display: inline !important; margin: 0 0 0 8px !important; color: #777 !important; font-weight: 400 !important; }
/* Gleichmäßiges Raster über die volle Spaltenbreite (= Breite des Warenkorb-Buttons), Spaltenzahl setzt das JS */
.mf-opts { display: grid; grid-template-columns: repeat(var(--mf-cols, 5), minmax(0, 1fr)); gap: 8px; width: 100%; margin: 2px 0 0; }
html#ecwid_html body#ecwid_body .ec-store button.mf-opt, html#ecwid_html body#ecwid_body .ec-store button.mf-opt:hover, html#ecwid_html body#ecwid_body .ec-store button.mf-opt:focus, html#ecwid_html body#ecwid_body .ec-store button.mf-opt:active {
	display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important;
	width: 100% !important; min-width: 0 !important; height: 42px !important; margin: 0 !important; padding: 0 6px !important; box-sizing: border-box !important; white-space: nowrap !important;
	background: #fff !important; color: #111 !important; border: 1px solid #d4d4d4 !important; border-radius: 8px !important;
	font: 500 14px/1 Poppins, system-ui, sans-serif !important; letter-spacing: 0 !important; text-transform: none !important;
	box-shadow: none !important; cursor: pointer; transform: none !important; transition: border-color .12s, box-shadow .12s, background .12s !important;
}
html#ecwid_html body#ecwid_body .ec-store button.mf-opt:hover { border-color: #111 !important; }
html#ecwid_html body#ecwid_body .ec-store button.mf-opt.is-selected { border-color: #111 !important; box-shadow: inset 0 0 0 1px #111 !important; }
html#ecwid_html body#ecwid_body .ec-store .mf-opts--size button.mf-opt.is-selected { background: #111 !important; color: #fff !important; }
html#ecwid_html body#ecwid_body .ec-store button.mf-opt.is-oos { color: #aaa !important; border-style: dashed !important; text-decoration: line-through !important; }
html#ecwid_html body#ecwid_body .ec-store button.mf-opt.is-oos.is-selected { color: #fff !important; background: #999 !important; border-color: #999 !important; box-shadow: none !important; }
html#ecwid_html body#ecwid_body .ec-store button.mf-opt .mf-dot { flex: 0 0 18px; width: 18px; height: 18px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0,0,0,.18); }
/* Swatch-Variante: nur runde Farbfelder, gewählter Name steht neben der Überschrift */
.mf-opts--swatch { gap: 8px; }
html#ecwid_html body#ecwid_body .ec-store .mf-opts--swatch button.mf-opt, html#ecwid_html body#ecwid_body .ec-store .mf-opts--swatch button.mf-opt:hover, html#ecwid_html body#ecwid_body .ec-store .mf-opts--swatch button.mf-opt:focus, html#ecwid_html body#ecwid_body .ec-store .mf-opts--swatch button.mf-opt:active {
	width: 100% !important; min-width: 0 !important; height: auto !important; aspect-ratio: 1 !important; max-width: 44px !important; padding: 0 !important;
	border: 0 !important; border-radius: 50% !important; background: transparent !important; text-decoration: none !important;
	box-shadow: none !important;
}
html#ecwid_html body#ecwid_body .ec-store .mf-opts--swatch button.mf-opt .mf-dot { flex: 1 1 auto; width: 100%; height: 100%; box-shadow: 0 0 0 1px rgba(0,0,0,.18); transition: box-shadow .15s; }
html#ecwid_html body#ecwid_body .ec-store .mf-opts--swatch button.mf-opt:hover .mf-dot { box-shadow: 0 0 0 2px #fff, 0 0 0 3px #999; }
html#ecwid_html body#ecwid_body .ec-store .mf-opts--swatch button.mf-opt.is-selected .mf-dot { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #111; }
html#ecwid_html body#ecwid_body .ec-store .mf-opts--swatch button.mf-opt.is-oos { opacity: .35; }
/* Tooltip mit Farbnamen */
html#ecwid_html body#ecwid_body .ec-store .mf-opts--swatch button.mf-opt { position: relative !important; overflow: visible !important; }
html#ecwid_html body#ecwid_body .ec-store .mf-opts--swatch button.mf-opt::after {
	content: attr(data-tip); position: absolute; z-index: 20; left: 50%; bottom: calc(100% + 9px);
	padding: 6px 9px; border-radius: 6px; background: #111; color: #fff; white-space: nowrap;
	font: 500 12px/1 Poppins, system-ui, sans-serif; letter-spacing: 0; text-decoration: none;
	opacity: 0; visibility: hidden; transform: translate(-50%, 4px); transition: opacity .12s, transform .12s, visibility .12s; pointer-events: none;
}
html#ecwid_html body#ecwid_body .ec-store .mf-opts--swatch button.mf-opt::before {
	content: ''; position: absolute; z-index: 20; left: 50%; bottom: calc(100% + 4px); border: 5px solid transparent; border-top-color: #111; border-bottom: 0;
	opacity: 0; visibility: hidden; transform: translate(-50%, 4px); transition: opacity .12s, transform .12s, visibility .12s; pointer-events: none;
}
html#ecwid_html body#ecwid_body .ec-store .mf-opts--swatch button.mf-opt:hover::after, html#ecwid_html body#ecwid_body .ec-store .mf-opts--swatch button.mf-opt:hover::before,
html#ecwid_html body#ecwid_body .ec-store .mf-opts--swatch button.mf-opt:focus-visible::after, html#ecwid_html body#ecwid_body .ec-store .mf-opts--swatch button.mf-opt:focus-visible::before { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
@media (hover: none) { html#ecwid_html body#ecwid_body .ec-store .mf-opts--swatch button.mf-opt::after, html#ecwid_html body#ecwid_body .ec-store .mf-opts--swatch button.mf-opt::before { display: none; } }
html#ecwid_html body#ecwid_body .ec-store .mf-opts--swatch button.mf-opt.is-oos.is-selected { background: transparent !important; opacity: .6; }
/* Pflichtfeld vergessen → Ecwid lässt den roten Punkt pulsieren, wir färben zusätzlich die Buttons */
html#ecwid_html body#ecwid_body .ec-store .details-product-option:has(.marker-required--active) .mf-opts button.mf-opt { border-color: #e2001a !important; }
html#ecwid_html body#ecwid_body .ec-store .details-product-option:has(.marker-required--active) .mf-opts--swatch button.mf-opt .mf-dot { box-shadow: 0 0 0 2px #fff, 0 0 0 3px #e2001a; }

/* =================== Farbpunkte auf Produktkarten =================== */
html#ecwid_html body#ecwid_body .ec-store .grid-product .mf-dots {
	order: 1 !important; display: flex !important; flex-wrap: nowrap !important; align-items: center !important; gap: 8px !important;
	height: 26px !important; margin: 10px 0 4px !important; padding: 0 4px 0 7px !important; box-sizing: border-box !important; overflow: hidden !important;
}
html#ecwid_html body#ecwid_body .ec-store .grid-product .mf-dots:empty { display: none !important; }
html#ecwid_html body#ecwid_body .ec-store .mf-dots .mf-dot {
	flex: 0 0 18px !important; display: block !important; box-sizing: border-box !important; width: 18px !important; height: 18px !important;
	margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; outline: 0 !important; cursor: pointer;
	box-shadow: 0 0 0 1px rgba(0,0,0,.18) !important; transform: none !important; transition: box-shadow .15s !important;
}
html#ecwid_html body#ecwid_body .ec-store .mf-dots .mf-dot:hover, html#ecwid_html body#ecwid_body .ec-store .mf-dots .mf-dot.is-active, html#ecwid_html body#ecwid_body .ec-store .mf-dots .mf-dot:focus-visible { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--mf-pink) !important; }
html#ecwid_html body#ecwid_body .ec-store .mf-dots .mf-dots__more { flex: 0 0 auto !important; margin: 0 0 0 1px !important; font: 600 12px/18px Poppins, system-ui, sans-serif !important; color: #8a8a8a !important; }
.mf-dot { display: inline-block; flex: 0 0 auto; box-sizing: border-box; border-radius: 50%; }
@media (max-width: 600px) {
	html#ecwid_html body#ecwid_body .ec-store .mf-dots { gap: 7px !important; }
	html#ecwid_html body#ecwid_body .ec-store .mf-dots .mf-dot { flex-basis: 16px !important; width: 16px !important; height: 16px !important; }
}

@media (max-width: 1024px) {
	button.mf-search-toggle { display: none !important; }
	.mf-search-panel { top: calc(var(--wp-admin--admin-bar--height, 0px) + 12px); max-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px) - 24px); padding: 18px 16px 14px !important; }
	.mf-search-hint { display: none; }
	.mf-result__img { flex-basis: 48px; width: 48px; height: 48px; }
	.mf-fs-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
	.mf-fs { padding: 8px !important; border-radius: 14px; }
	.mf-fs__name { font-size: 12px; }
	.mf-fs__count { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
	.mf-search-panel, .mf-backdrop, .mf-drawer, .mf-badge, .mf-skel i, .mf-fs { transition: none !important; animation: none !important; opacity: 1; }
}