/*
 * Sticky add-to-cart bar. Moved out of the Code Snippet's inline <style> so it
 * is cacheable in the browser and minifiable by WP Rocket, instead of ~200
 * lines re-sent with every product page.
 */
.mib-sticky-atc {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 999;
	background: rgba(255, 255, 255, 0.92);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border-top: 1px solid rgba(0, 0, 0, 0.08);
	box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.06);
	transform: translate3d(0, 100%, 0); opacity: 0; pointer-events: none;
	transition:
		transform .38s cubic-bezier(.22, 1.25, .38, 1),
		opacity  .24s ease-out;
}
.mib-sticky-atc.wpcsb-active {
	transform: translate3d(0, 0, 0); opacity: 1; pointer-events: auto;
}

/* Device targeting. A media query rather than a server-side device check,
   because the page is served from cache: a decision made in PHP would be
   baked in for whoever happened to request it first. */
@media (max-width: 768px)  { .mib-sticky-atc--desktop-only { display: none !important; } }
@media (min-width: 769px)  { .mib-sticky-atc--mobile-only  { display: none !important; } }

.mib-sticky-atc__inner {
	max-width: 1170px; margin: 0 auto;
	/* 21px right padding matches the CFW cart's `right: 21px`, so the ATC
	   button aligns vertically with the cart icon above it on any viewport
	   where the bar spans full width (< 1170px). */
	padding: 10px 21px 10px 16px;
	display: flex; align-items: center; gap: 12px;
	/* Right-aligned: matches the site's page-content right edge on wide
	   desktop, and puts the ATC cluster where users expect it (same spot as
	   the floating mini-cart). */
	justify-content: flex-end;
}
.mib-sticky-atc__thumb,
.mib-sticky-atc__info,
.mib-sticky-atc__btn {
	opacity: 0; transform: translateY(6px);
	transition: opacity .28s ease-out, transform .32s cubic-bezier(.22, 1.2, .36, 1);
}
.mib-sticky-atc.wpcsb-active .mib-sticky-atc__thumb { transition-delay: .08s; }
.mib-sticky-atc.wpcsb-active .mib-sticky-atc__info  { transition-delay: .14s; }
.mib-sticky-atc.wpcsb-active .mib-sticky-atc__btn   { transition-delay: .2s;  }
.mib-sticky-atc.wpcsb-active .mib-sticky-atc__thumb,
.mib-sticky-atc.wpcsb-active .mib-sticky-atc__info,
.mib-sticky-atc.wpcsb-active .mib-sticky-atc__btn {
	opacity: 1; transform: translateY(0);
}
/* The thumbnail is now a <picture>, so size the <img> inside it too. */
.mib-sticky-atc__thumb,
.mib-sticky-atc picture:has(.mib-sticky-atc__thumb) {
	width: 48px; height: 48px; border-radius: 6px;
	object-fit: cover; flex-shrink: 0;
}
.mib-sticky-atc__info {
	/* Don't grow — thumb/info/button should hug each other. Shrinking is fine
	   so long titles still ellipsize. */
	flex: 0 1 auto; min-width: 0; max-width: 40ch;
}
.mib-sticky-atc__title {
	font-weight: 600; font-size: 15px; line-height: 1.3;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mib-sticky-atc__price { font-size: 14px; line-height: 1.3; opacity: .85; }
.mib-sticky-atc__price del { opacity: .6; margin-right: 4px; }
.mib-sticky-atc__price ins { text-decoration: none; }
.mib-sticky-atc__btn {
	/* Theme applies width:100% to .button / .add_to_cart_button. Override so
	   the button sizes to its text, not the row. */
	flex: 0 0 auto !important;
	width: auto !important;
	max-width: 60% !important;
	white-space: nowrap;
	margin: 0 !important;
	transition:
		transform  .18s cubic-bezier(.22, 1.2, .36, 1),
		box-shadow .18s ease-out,
		filter     .18s ease-out;
	will-change: transform;
}
.mib-sticky-atc__btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
	filter: brightness(1.04);
}
.mib-sticky-atc__btn:active {
	transform: translateY(0);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	filter: brightness(.98);
}
@keyframes mib-sticky-atc-pulse {
	0%   { transform: scale(1); }
	40%  { transform: scale(1.04); }
	100% { transform: scale(1); }
}
.mib-sticky-atc.is-added .mib-sticky-atc__btn {
	animation: mib-sticky-atc-pulse .5s cubic-bezier(.34, 1.56, .64, 1);
}
@media (max-width: 768px) {
	/* Below 768px the CFW cart shifts closer to the viewport's right edge, so
	   our right padding tightens to match. Nothing else changes here. */
	.mib-sticky-atc__inner { padding-right: 7px; }
}
@media (max-width: 600px) {
	.mib-sticky-atc__inner { padding: 8px 7px 8px 12px; gap: 10px; }
	.mib-sticky-atc__thumb,
	.mib-sticky-atc picture:has(.mib-sticky-atc__thumb) { width: 40px; height: 40px; border-radius: 5px; }
	.mib-sticky-atc__title { font-size: 13px; }
	.mib-sticky-atc__price { font-size: 13px; }
	.mib-sticky-atc__btn {
		/* Drop the 60% cap on mobile so "IN DEN WARENKORB" never truncates. */
		max-width: none !important;
		font-size: 13px !important;
		padding: 8px 12px !important;
		line-height: 1.2 !important;
	}
}

/* Lift floating widgets above the bar while it is visible. Offsets are a delta
   from the live bar height (measured at ~68px: Tidio 26, cart 80), so when the
   bar grows taller on narrow screens both widgets move with it. Only applied
   when the bar carries --lift, i.e. the setting is on. */
body.mib-sticky-atc-showing .mib-sticky-atc--lift ~ * #cfw-side-cart-floating-button,
body.mib-sticky-atc-showing #cfw-side-cart-floating-button {
	bottom: calc(var(--mib-sticky-atc-height, 68px) + 12px) !important;
	transition: bottom .28s ease-out;
}
body.mib-sticky-atc-showing #tidio-chat {
	bottom: calc(var(--mib-sticky-atc-height, 68px) - 42px) !important;
	transition: bottom .28s ease-out;
}

@media (prefers-reduced-motion: reduce) {
	.mib-sticky-atc,
	.mib-sticky-atc__thumb,
	.mib-sticky-atc__info,
	.mib-sticky-atc__btn {
		transition-duration: .12s !important;
		animation-duration: .12s !important;
	}
	.mib-sticky-atc__btn:hover { transform: none; }
}