/* ==========================================================================
   MightyChat – Frontend Widget Styles  v2.1
   Scoped to #mc-widget to avoid theme conflicts.
   ========================================================================== */

/* --------------------------------------------------------------------------
   CSS custom properties & root reset
   -------------------------------------------------------------------------- */
#mc-widget {
	--mc-color:    #7c3aed;
	--mc-color-dk: #5b21b6;
	--mc-radius:   16px;
	--mc-shadow:   0 8px 32px rgba(0,0,0,.22), 0 2px 8px rgba(0,0,0,.12);

	/* Reset box model so theme stylesheet resets can't break our layout */
	box-sizing: border-box;
	position: fixed;
	z-index: 999999;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 14px;
	line-height: 1.5;
}

#mc-widget *,
#mc-widget *::before,
#mc-widget *::after {
	box-sizing: inherit;
}

/* Trigger position – respect iOS safe area at the bottom */
#mc-widget.mc-widget--bottom-right {
	bottom: calc(24px + env(safe-area-inset-bottom, 0px));
	right:  24px;
}
#mc-widget.mc-widget--bottom-left {
	bottom: calc(24px + env(safe-area-inset-bottom, 0px));
	left:   24px;
}

/* --------------------------------------------------------------------------
   Trigger button — shared base
   -------------------------------------------------------------------------- */
/* Use #mc-widget prefix on all trigger rules to beat theme button resets */
#mc-widget .mc-widget-trigger {
	height: 48px;
	min-width: 48px;
	/* Explicit background-color so theme "button { background: transparent }" can't win */
	background-color: var(--mc-color);
	border: 2px solid var(--mc-color);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	box-shadow: var(--mc-shadow);
	color: white;
	transition: background-color .18s, color .18s, border-color .18s, transform .15s, box-shadow .18s;
	position: relative;
	z-index: 1;
	touch-action: manipulation;
	white-space: nowrap;
	outline: none;
}
/* Hover: inverse — white fill, brand-colored text/icon/border */
#mc-widget .mc-widget-trigger:hover {
	background-color: white;
	border-color: var(--mc-color);
	color: var(--mc-color);
	transform: translateY(-1px);
	box-shadow: 0 10px 36px rgba(0,0,0,.22), 0 3px 10px rgba(0,0,0,.12);
}
#mc-widget .mc-widget-trigger:active { transform: scale(.96); box-shadow: var(--mc-shadow); }
#mc-widget .mc-widget-trigger:focus-visible {
	outline: 3px solid var(--mc-color);
	outline-offset: 3px;
}
@media (hover: none) {
	/* Touch devices: no hover state flicker */
	#mc-widget .mc-widget-trigger:hover {
		background-color: var(--mc-color);
		border-color: var(--mc-color);
		color: white;
		transform: none;
		box-shadow: var(--mc-shadow);
	}
}

/* Bubble style (icon only) */
#mc-widget.mc-trigger--bubble .mc-widget-trigger {
	width:  52px;
	height: 52px;
	border-radius: 50%;
}

/* Pill style (icon + label) — default */
#mc-widget.mc-trigger--pill .mc-widget-trigger {
	border-radius: 28px;
	padding: 0 18px 0 14px;
	height: 48px;
}

.mc-trigger-label {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: -.1px;
	line-height: 1;
}

/* SVG icon positioning */
.mc-widget-trigger svg {
	width: 22px; height: 22px;
	transition: opacity .2s, transform .2s;
	flex-shrink: 0;
	pointer-events: none;
}
/* For bubble, icons stack absolutely to animate */
.mc-trigger--bubble .mc-widget-trigger svg { position: absolute; }
/* For pill, icon + label sit in flex row; only one icon shown at a time */
#mc-widget.mc-trigger--pill .mc-icon-chat  { display: block; }
#mc-widget.mc-trigger--pill .mc-icon-close { display: none; }
#mc-widget.mc-trigger--pill.mc-widget--open .mc-icon-chat  { display: none; }
#mc-widget.mc-trigger--pill.mc-widget--open .mc-icon-close { display: block; }
/* Hide label text when open (pill shows just the X) */
#mc-widget.mc-trigger--pill.mc-widget--open .mc-trigger-label { display: none; }
/* Bubble animation */
#mc-widget .mc-icon-chat  { opacity: 1;  transform: rotate(0deg); }
#mc-widget .mc-icon-close { opacity: 0;  transform: rotate(-90deg); }
#mc-widget.mc-trigger--bubble.mc-widget--open .mc-icon-chat  { opacity: 0;  transform: rotate(90deg); }
#mc-widget.mc-trigger--bubble.mc-widget--open .mc-icon-close { opacity: 1;  transform: rotate(0deg); }

/* Unread badge */
.mc-widget-badge {
	position: absolute;
	top: -3px; right: -3px;
	background: #ef4444;
	color: white;
	font-size: 11px;
	font-weight: 700;
	min-width: 18px; height: 18px;
	border-radius: 9px;
	display: flex; align-items: center; justify-content: center;
	padding: 0 4px;
	border: 2px solid white;
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   Panel – desktop default
   -------------------------------------------------------------------------- */
.mc-widget-panel {
	position: absolute;
	bottom: 70px;
	width: 340px;
	height: 500px;
	max-height: calc(100vh - 120px);
	background: #ffffff;
	border-radius: var(--mc-radius);
	box-shadow: var(--mc-shadow);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transform-origin: bottom center;
	animation: mc-panel-in .22s cubic-bezier(.34,1.56,.64,1) both;
}

.mc-widget--bottom-right .mc-widget-panel { right: 0; }
.mc-widget--bottom-left  .mc-widget-panel { left:  0; }
.mc-widget-panel[hidden] { display: none !important; animation: none; }

@keyframes mc-panel-in {
	from { opacity: 0; transform: scale(.88) translateY(8px); }
	to   { opacity: 1; transform: scale(1)   translateY(0); }
}

/* --------------------------------------------------------------------------
   Mobile full-screen panel (≤ 480px)
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
	#mc-widget.mc-widget--bottom-right,
	#mc-widget.mc-widget--bottom-left {
		/* Expand widget to cover the full screen so the panel can fill it */
		bottom: 0;
		right:  0;
		left:   0;
		top:    0;
		/* The trigger stays in the corner via absolute positioning below */
	}

	/* Keep the trigger in its original bottom corner (both bubble and pill) */
	.mc-widget-trigger {
		position: fixed;
		bottom: calc(20px + env(safe-area-inset-bottom, 0px));
		z-index: 2;
	}
	#mc-widget.mc-widget--bottom-right .mc-widget-trigger { right: 16px; }
	#mc-widget.mc-widget--bottom-left  .mc-widget-trigger { left:  16px; }
	/* Pill trigger shrinks to icon-only on very small screens */
	.mc-trigger--pill .mc-trigger-label { display: none; }
	.mc-trigger--pill .mc-widget-trigger { border-radius: 50%; width: 52px; height: 52px; padding: 0; }

	/* Panel fills the entire screen */
	.mc-widget-panel {
		position: fixed;
		top:    0;
		left:   0;
		right:  0;
		bottom: 0;
		width:  100%;
		height: 100%;
		max-height: 100%;
		border-radius: 0;
		/* Respect notch / home indicator */
		padding-top:    env(safe-area-inset-top, 0px);
		padding-bottom: env(safe-area-inset-bottom, 0px);
	}

	/* Slightly larger input font on mobile to prevent iOS auto-zoom */
	.mc-widget-input {
		font-size: 16px !important;
	}
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.mc-widget-header {
	background: var(--mc-color);
	color: white;
	padding: 13px 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-shrink: 0;
	gap: 8px;
}

.mc-widget-header-brand {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	flex: 1;
}

.mc-widget-logo {
	max-height: 28px;
	max-width: 100px;
	width: auto;
	object-fit: contain;
	flex-shrink: 0;
	/* Subtle white pill behind the logo makes any colour logo visible
	   on the coloured header background */
	background: rgba(255,255,255,.15);
	border-radius: 5px;
	padding: 2px 6px;
}

.mc-widget-logo-icon { font-size: 18px; flex-shrink: 0; }

.mc-widget-title {
	font-size: 14.5px;
	font-weight: 600;
	letter-spacing: -.2px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mc-widget-close {
	/* Minimum 44×44px touch target — visually 28×28 */
	width: 44px;
	height: 44px;
	margin: -8px -8px -8px 0;
	background: transparent;
	border: none;
	border-radius: 8px;
	color: rgba(255,255,255,.9);
	cursor: pointer;
	font-size: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: background .15s;
	touch-action: manipulation;
}
.mc-widget-close:hover { background: rgba(255,255,255,.15); }

/* --------------------------------------------------------------------------
   Messages area
   -------------------------------------------------------------------------- */
.mc-widget-messages {
	flex: 1;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch; /* Smooth momentum scroll on iOS */
	padding: 16px 14px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	background: #f8f8fc;
	overscroll-behavior: contain; /* Prevent scroll chaining to page */
}
.mc-widget-messages::-webkit-scrollbar { width: 4px; }
.mc-widget-messages::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 2px; }

.mc-widget-welcome {
	background: white;
	border-radius: 12px;
	padding: 14px 16px;
	font-size: 13.5px;
	line-height: 1.6;
	color: #374151;
	border: 1px solid #e5e7eb;
}

/* --------------------------------------------------------------------------
   Message bubbles
   -------------------------------------------------------------------------- */
.mc-wm { display: flex; flex-direction: column; gap: 3px; }
.mc-wm.mc-wm--user { align-items: flex-end; }

.mc-wm-bubble {
	max-width: 272px;
	padding: 10px 14px;
	border-radius: 14px;
	font-size: 13.5px;
	line-height: 1.55;
	word-break: break-word;
	overflow-wrap: break-word;
}
.mc-wm--user      .mc-wm-bubble { background: var(--mc-color); color: white; border-bottom-right-radius: 3px; }
.mc-wm--assistant .mc-wm-bubble { background: white; color: #374151; border: 1px solid #e5e7eb; border-bottom-left-radius: 3px; }

/* Markdown in bubbles */
.mc-wm-bubble p             { margin: 0 0 6px; font-size: 13.5px; }
.mc-wm-bubble p:last-child  { margin-bottom: 0; }
.mc-wm-bubble strong        { font-weight: 700; }
.mc-wm-bubble ul            { margin: 4px 0 6px 16px; padding: 0; }
.mc-wm-bubble li            { margin-bottom: 3px; font-size: 13px; }
.mc-wm-bubble a             { color: var(--mc-color); text-underline-offset: 2px; }
.mc-wm--user .mc-wm-bubble a { color: rgba(255,255,255,.9); }
/* In dark mode, assistant bubble links must be readable regardless of accent colour */
#mc-widget.mc-dark .mc-wm--assistant .mc-wm-bubble a { color: #93c5fd; }

/* Typing indicator */
.mc-wm-typing .mc-wm-bubble { padding: 13px 16px; }
.mc-wm-dots { display: flex; gap: 4px; align-items: center; }
.mc-wm-dots span {
	width: 7px; height: 7px; border-radius: 50%;
	background: #9ca3af;
	animation: mc-wdot 1.4s ease infinite;
}
.mc-wm-dots span:nth-child(2) { animation-delay: .15s; }
.mc-wm-dots span:nth-child(3) { animation-delay: .30s; }
@keyframes mc-wdot { 0%,60%,100% { transform: translateY(0); } 30% { transform: translateY(-5px); } }

.mc-wm-time { font-size: 10.5px; color: #9ca3af; padding: 0 4px; }

/* Error message */
.mc-widget-error {
	background: #fef2f2;
	border: 1px solid #fecaca;
	border-radius: 9px;
	padding: 10px 14px;
	font-size: 13px;
	color: #dc2626;
}

/* Login prompt */
.mc-login-prompt { text-align: center; padding: 16px 12px; }
.mc-login-prompt p { font-size: 13px; color: #6b7280; margin: 0 0 12px; line-height: 1.5; }
.mc-login-btn {
	display: inline-block;
	background: var(--mc-color);
	color: white !important;
	text-decoration: none;
	padding: 10px 22px;
	border-radius: 8px;
	font-size: 13.5px;
	font-weight: 600;
	transition: background .15s;
	touch-action: manipulation;
}
.mc-login-btn:hover { background: var(--mc-color-dk); }

/* --------------------------------------------------------------------------
   Composer
   -------------------------------------------------------------------------- */
.mc-widget-composer {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	padding: 10px 12px;
	background: white;
	border-top: 1px solid #e5e7eb;
	flex-shrink: 0;
}

.mc-widget-input {
	flex: 1;
	background: #f3f4f6;
	border: 1px solid transparent;
	border-radius: 10px;
	padding: 10px 13px;
	/* 16px prevents iOS Safari auto-zoom when input is focused */
	font-size: 16px;
	color: #111827;
	resize: none;
	min-height: 42px;
	max-height: 120px;
	line-height: 1.45;
	outline: none;
	font-family: inherit;
	transition: border-color .15s, background .15s;
	-webkit-appearance: none;
}
.mc-widget-input::placeholder { color: #9ca3af; }
.mc-widget-input:focus { background: white; border-color: var(--mc-color); }

.mc-widget-send {
	/* 44px touch target for iOS */
	width:  44px;
	height: 44px;
	border-radius: 10px;
	flex-shrink: 0;
	background: var(--mc-color);
	border: none;
	cursor: pointer;
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity .15s, transform .1s;
	touch-action: manipulation;
}
.mc-widget-send svg    { width: 17px; height: 17px; pointer-events: none; }
.mc-widget-send:hover  { opacity: .9; }
.mc-widget-send:active { transform: scale(.93); }
.mc-widget-send:disabled { opacity: .35; cursor: default; }

/* --------------------------------------------------------------------------
   Product cards
   -------------------------------------------------------------------------- */
.mc-product-cards {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 4px 0 6px;
}

.mc-product-card {
	display: flex;
	flex-direction: column;
	background: white;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	overflow: hidden;
	transition: box-shadow .15s, border-color .15s;
}
.mc-product-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.1); border-color: var(--mc-color); }

.mc-product-card-link {
	display: flex;
	gap: 0;
	text-decoration: none;
	color: inherit;
}

.mc-product-card-img {
	width: 72px;
	min-width: 72px;
	height: 72px;
	object-fit: cover;
	background: #f3f4f6;
	flex-shrink: 0;
}
.mc-product-card-img--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
}

.mc-product-card-body {
	padding: 10px 12px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 3px;
	min-width: 0;
}

.mc-product-card-name {
	font-size: 13px;
	font-weight: 600;
	color: #111827;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mc-product-card-price {
	font-size: 13px;
	color: var(--mc-color);
	font-weight: 700;
}
.mc-product-card-sale {
	text-decoration: line-through;
	color: #9ca3af;
	font-weight: 400;
	font-size: 12px;
	margin-left: 4px;
}
.mc-product-card-stock { font-size: 11px; color: #6b7280; }
.mc-product-card-stock.out { color: #ef4444; }

.mc-product-card-footer {
	padding: 8px 10px;
	border-top: 1px solid #f3f4f6;
	background: #fafafa;
}

/* --------------------------------------------------------------------------
   Add to Cart button
   -------------------------------------------------------------------------- */
.mc-atc-btn {
	display: block;
	width: 100%;
	min-height: 36px;
	background: var(--mc-color);
	color: white;
	border: none;
	border-radius: 7px;
	padding: 8px 12px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: opacity .15s, background .15s;
	text-align: center;
	touch-action: manipulation;
	-webkit-appearance: none;
}
.mc-atc-btn:hover:not(:disabled) { opacity: .88; }
.mc-atc-btn--disabled  { background: #e5e7eb; color: #9ca3af; cursor: default; }
.mc-atc-btn--options   { background: white; color: var(--mc-color); border: 1px solid var(--mc-color); }
.mc-atc-btn--options:hover { background: var(--mc-color); color: white; }
.mc-atc-btn--added     { background: #16a34a; }
.mc-atc-btn--variation { margin-top: 6px; }

/* --------------------------------------------------------------------------
   Variation picker
   -------------------------------------------------------------------------- */
.mc-variation-picker {
	padding: 10px 10px 8px;
	border-top: 1px solid #f3f4f6;
	background: #fafafa;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.mc-vp-loading { font-size: 12px; color: #9ca3af; padding: 4px 0; }
.mc-vp-error   { font-size: 12px; color: #ef4444; margin: 0; }

.mc-vp-row  { display: flex; flex-direction: column; gap: 5px; }
.mc-vp-label {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .5px;
	color: #6b7280;
}
.mc-vp-options { display: flex; flex-wrap: wrap; gap: 6px; }

.mc-vp-option {
	/* 36px height meets WCAG 2.5.5 touch target guidance */
	min-height: 36px;
	background: white;
	border: 1.5px solid #e5e7eb;
	border-radius: 6px;
	padding: 6px 12px;
	font-size: 13px;
	color: #374151;
	cursor: pointer;
	transition: border-color .15s, background .15s, color .15s;
	touch-action: manipulation;
}
.mc-vp-option:hover            { border-color: var(--mc-color); color: var(--mc-color); }
.mc-vp-option--selected        { background: var(--mc-color); border-color: var(--mc-color); color: white; }

/* --------------------------------------------------------------------------
   Cart feedback strip
   -------------------------------------------------------------------------- */
.mc-atc-feedback {
	padding: 8px 12px;
	font-size: 12.5px;
	border-top: 1px solid #f3f4f6;
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}
.mc-atc-feedback--success { color: #166534; background: #f0fdf4; }
.mc-atc-feedback--error   { color: #991b1b; background: #fef2f2; }
.mc-atc-cart-link { color: var(--mc-color); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }


/* --------------------------------------------------------------------------
   Privacy / cookie notice
   -------------------------------------------------------------------------- */
.mc-privacy-notice {
	background: #fffbeb;
	border-bottom: 1px solid #fde68a;
	padding: 12px 16px;
	flex-shrink: 0;
}
.mc-privacy-text {
	font-size: 12px;
	color: #78350f;
	line-height: 1.5;
	margin: 0 0 10px;
}
.mc-privacy-link {
	color: #92400e;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
	margin-left: 4px;
}
.mc-privacy-accept {
	display: block;
	width: 100%;
	background: var(--mc-color);
	color: white;
	border: none;
	border-radius: 7px;
	padding: 9px 12px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: opacity .15s;
	touch-action: manipulation;
}
.mc-privacy-accept:hover { opacity: .88; }
@keyframes mc-shake {
	0%,100% { transform: translateX(0); }
	20%,60%  { transform: translateX(-4px); }
	40%,80%  { transform: translateX(4px); }
}
.mc-privacy-notice--shake { animation: mc-shake .4s ease; }

/* --------------------------------------------------------------------------
   Dark mode
   -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- 
   Theme toggle button (inside widget header)
   -------------------------------------------------------------------------- */
.mc-theme-toggle {
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 4px;
	border-radius: 5px;
	color: rgba(255,255,255,.7);
	font-size: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: color .15s, background .15s;
}
.mc-theme-toggle:hover { color: #fff; background: rgba(255,255,255,.1); }

/* Dark mode class applied by JS toggle */
#mc-widget.mc-dark .mc-widget-panel          { background: #1f2937; }
#mc-widget.mc-dark .mc-widget-messages       { background: #111827; }
#mc-widget.mc-dark .mc-widget-welcome        { background: #1f2937; color: #e5e7eb; border-color: #374151; }
#mc-widget.mc-dark .mc-wm--assistant .mc-wm-bubble { background: #1f2937; color: #e5e7eb; border-color: #374151; }
#mc-widget.mc-dark .mc-wm-time               { color: #6b7280; }
#mc-widget.mc-dark .mc-widget-composer       { background: #1f2937; border-top-color: #374151; }
#mc-widget.mc-dark .mc-widget-input          { background: #111827; color: #e5e7eb; }
#mc-widget.mc-dark .mc-widget-input:focus    { background: #111827; }
#mc-widget.mc-dark .mc-login-prompt p        { color: #9ca3af; }
#mc-widget.mc-dark .mc-product-card          { background: #1f2937; border-color: #374151; }
#mc-widget.mc-dark .mc-product-card-name     { color: #e5e7eb; }
#mc-widget.mc-dark .mc-product-card-footer   { background: #111827; border-top-color: #374151; }
#mc-widget.mc-dark .mc-variation-picker      { background: #111827; border-top-color: #374151; }
#mc-widget.mc-dark .mc-vp-option             { background: #1f2937; border-color: #4b5563; color: #e5e7eb; }
#mc-widget.mc-dark .mc-atc-btn--options      { background: #1f2937; }
#mc-widget.mc-dark .mc-atc-feedback--success { background: #052e16; color: #86efac; }
#mc-widget.mc-dark .mc-atc-feedback--error   { background: #450a0a; color: #fca5a5; }
#mc-widget.mc-dark .mc-privacy-notice { background: #1c1506; border-bottom-color: #78350f; }
#mc-widget.mc-dark .mc-privacy-text   { color: #fcd34d; }
#mc-widget.mc-dark .mc-privacy-link   { color: #fbbf24; }

@media (prefers-color-scheme: dark) {
	/* Only auto-apply dark when user hasn't explicitly chosen light mode */
	#mc-widget:not(.mc-light) .mc-widget-panel          { background: #1f2937; }
	#mc-widget:not(.mc-light) .mc-widget-messages       { background: #111827; }
	#mc-widget:not(.mc-light) .mc-widget-welcome        { background: #1f2937; color: #e5e7eb; border-color: #374151; }
	#mc-widget:not(.mc-light) .mc-wm--assistant .mc-wm-bubble { background: #1f2937; color: #e5e7eb; border-color: #374151; }
	#mc-widget:not(.mc-light) .mc-wm--assistant .mc-wm-bubble a { color: #93c5fd; }
	#mc-widget:not(.mc-light) .mc-wm-time               { color: #6b7280; }
	#mc-widget:not(.mc-light) .mc-widget-composer       { background: #1f2937; border-top-color: #374151; }
	#mc-widget:not(.mc-light) .mc-widget-input          { background: #111827; color: #e5e7eb; }
	#mc-widget:not(.mc-light) .mc-widget-input:focus    { background: #111827; }
	#mc-widget:not(.mc-light) .mc-login-prompt p        { color: #9ca3af; }
	#mc-widget:not(.mc-light) .mc-product-card          { background: #1f2937; border-color: #374151; }
	#mc-widget:not(.mc-light) .mc-product-card-name     { color: #e5e7eb; }
	#mc-widget:not(.mc-light) .mc-product-card-footer   { background: #111827; border-top-color: #374151; }
	#mc-widget:not(.mc-light) .mc-variation-picker      { background: #111827; border-top-color: #374151; }
	#mc-widget:not(.mc-light) .mc-vp-option             { background: #1f2937; border-color: #4b5563; color: #e5e7eb; }
	#mc-widget:not(.mc-light) .mc-atc-btn--options      { background: #1f2937; }
	#mc-widget:not(.mc-light) .mc-atc-feedback--success { background: #052e16; color: #86efac; }
	#mc-widget:not(.mc-light) .mc-atc-feedback--error   { background: #450a0a; color: #fca5a5; }
	#mc-widget:not(.mc-light) .mc-privacy-notice { background: #1c1506; border-bottom-color: #78350f; }
	#mc-widget:not(.mc-light) .mc-privacy-text   { color: #fcd34d; }
	#mc-widget:not(.mc-light) .mc-privacy-link   { color: #fbbf24; }
}