/**
 * PI Sticky Cart & Fast Checkout - Floating cart styles.
 * All selectors namespaced with .piscfc- to avoid theme conflicts.
 */

/* Wrapper is display:contents by default so the FAB keeps its own fixed
   positioning and nothing about the existing layout changes. */
.piscfc-fab-wrap {
	display: contents;
}

/* When the subtotal is shown OUTSIDE the button, the wrapper takes over the
   fixed positioning and lays the button + amount side by side. */
.piscfc-fab-wrap--subtotal-outside {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	position: fixed;
	bottom: 24px;
	z-index: var(--piscfc-z, 9999);
}
.piscfc-fab-wrap--subtotal-outside.piscfc-fab-wrap--right {
	right: 24px;
	flex-direction: row-reverse;
}
.piscfc-fab-wrap--subtotal-outside.piscfc-fab-wrap--left {
	left: 24px;
	flex-direction: row;
}
/* Inside the wrapper the button is no longer fixed — the wrapper positions it. */
.piscfc-fab-wrap--subtotal-outside .piscfc-fab {
	position: relative;
	right: auto;
	left: auto;
	bottom: auto;
}
/* The external amount: a discreet, secondary pill next to the button.
   Deliberately smaller and lighter than the FAB so it doesn't compete
   with the primary action. */
.piscfc-fab-wrap--subtotal-outside .piscfc-fab__subtotal {
	display: inline-flex;
	align-items: baseline;
	gap: 3px;
	padding: 5px 11px;
	border-radius: 999px;
	background: #ffffff;
	color: #1f2937;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	border: 1px solid rgba( 0, 0, 0, 0.08 );
	box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.12 );
	transition: opacity 0.2s ease, transform 0.2s ease;
}
.piscfc-fab-wrap--subtotal-outside .piscfc-fab__subtotal-label {
	font-weight: 500;
	opacity: 0.6;
	font-size: 12px;
}

/* Reveal-on-hover for the external amount: hidden until the button (or the
   whole wrapper) is hovered/focused. */
.piscfc-fab-wrap--subtotal-hover .piscfc-fab__subtotal {
	opacity: 0;
	transform: translateX( 6px ) scale( 0.96 );
	pointer-events: none;
}
.piscfc-fab-wrap--subtotal-hover.piscfc-fab-wrap--left .piscfc-fab__subtotal {
	transform: translateX( -6px ) scale( 0.96 );
}
.piscfc-fab-wrap--subtotal-hover:hover .piscfc-fab__subtotal,
.piscfc-fab-wrap--subtotal-hover:focus-within .piscfc-fab__subtotal {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

.piscfc-fab {
	position: fixed;
	bottom: 24px;
	z-index: var(--piscfc-z, 9999);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 12px 16px;
	/* Equal min dimensions so an icon-only button becomes a perfect circle at max radius. */
	min-width: 54px;
	min-height: 54px;
	box-sizing: border-box;
	/* These are user-configured and must win over the active theme's button/link
	   styles (e.g. Hello Elementor restyles <a>/<button>), so they are forced. */
	border: var(--piscfc-border-width, 0) solid var(--piscfc-border-color, transparent) !important;
	border-radius: var(--piscfc-border-radius, 999px) !important;
	background: var(--piscfc-accent, #081541) !important;
	background-image: none !important;
	color: var(--piscfc-accent-text, #fff) !important;
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	text-decoration: none !important;
	box-shadow: 0 6px 20px rgba( 0, 0, 0, 0.18 );
	transition: transform 0.15s ease, box-shadow 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
}

/* When the subtotal is collapsed to zero width, drop the gap so the button stays circular. */
.piscfc-fab--subtotal-hover.piscfc-fab--subtotal-inline:not(:hover):not(:focus-within) {
	gap: 0;
}

/* Icon-only button (no subtotal shown, or subtotal below) keeps a 1:1 aspect for a true circle. */
.piscfc-fab:not(.piscfc-fab--subtotal-inline) {
	padding: 12px !important;
	width: 54px;
	height: 54px;
}

.piscfc-fab--right {
	right: 24px;
}

.piscfc-fab--left {
	left: 24px;
}

.piscfc-fab:hover,
.piscfc-fab:focus-visible {
	transform: translateY( -2px );
	box-shadow: 0 10px 26px rgba( 0, 0, 0, 0.24 );
}

.piscfc-fab:focus-visible {
	outline: 3px solid var(--piscfc-accent-text, #fff);
	outline-offset: 2px;
}

.piscfc-fab__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
}
.piscfc-fab__icon svg {
	width: 22px;
	height: 22px;
	display: block;
}

.piscfc-count {
	position: absolute;
	top: -6px;
	right: -6px;
	left: auto;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	box-sizing: border-box;
	border-radius: 999px !important;
	background: var(--piscfc-badge, #ef4444) !important;
	background-image: none !important;
	color: var(--piscfc-badge-text, #fff) !important;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.piscfc-fab--left .piscfc-count {
	right: auto;
	left: -6px;
}

.piscfc-fab__subtotal {
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
	font-weight: 600;
	white-space: nowrap;
	max-width: 200px;
	overflow: hidden;
	/* Extra separation from the icon so the amount isn't stuck to the cart. */
	padding-left: 4px;
	transition: max-width 0.25s ease, opacity 0.2s ease, margin 0.25s ease;
}

.piscfc-fab__subtotal-label {
	font-weight: 500;
	opacity: 0.85;
}

/* Subtotal below the icon: stack the button contents vertically. */
.piscfc-fab--subtotal-below {
	flex-direction: column;
	gap: 4px;
	padding: 12px 18px;
}

.piscfc-fab--subtotal-below .piscfc-fab__subtotal {
	font-size: 13px;
}

/* Reveal-on-hover behaviour (inline variant only). */
.piscfc-fab--subtotal-hover.piscfc-fab--subtotal-inline .piscfc-fab__subtotal {
	max-width: 0;
	opacity: 0;
}

.piscfc-fab--subtotal-hover.piscfc-fab--subtotal-inline:hover .piscfc-fab__subtotal,
.piscfc-fab--subtotal-hover.piscfc-fab--subtotal-inline:focus-visible .piscfc-fab__subtotal,
.piscfc-fab--subtotal-hover.piscfc-fab--subtotal-inline:focus-within .piscfc-fab__subtotal {
	max-width: 200px;
	opacity: 1;
}

/* Reveal-on-hover for the "below" variant collapses height instead. */
.piscfc-fab--subtotal-hover.piscfc-fab--subtotal-below .piscfc-fab__subtotal {
	max-height: 0;
	opacity: 0;
	transition: max-height 0.25s ease, opacity 0.2s ease;
}

.piscfc-fab--subtotal-hover.piscfc-fab--subtotal-below:hover .piscfc-fab__subtotal,
.piscfc-fab--subtotal-hover.piscfc-fab--subtotal-below:focus-visible .piscfc-fab__subtotal,
.piscfc-fab--subtotal-hover.piscfc-fab--subtotal-below:focus-within .piscfc-fab__subtotal {
	max-height: 40px;
	opacity: 1;
}

/* Overlay ------------------------------------------------------------------ */
.piscfc-overlay {
	position: fixed;
	inset: 0;
	z-index: calc( var(--piscfc-z, 9999) + 1 );
	background: rgba( 0, 0, 0, 0.5 );
	opacity: 0;
	transition: opacity 0.25s ease;
}

.piscfc-overlay.is-visible {
	opacity: 1;
}

/* Drawer ------------------------------------------------------------------- */
.piscfc-drawer {
	position: fixed;
	top: 0;
	bottom: 0;
	z-index: calc( var(--piscfc-z, 9999) + 2 );
	width: min( 420px, 100vw );
	max-width: 100%;
	background: var(--piscfc-drawer-bg, #fff);
	color: var(--piscfc-drawer-text, #1a1a1a);
	/* Secondary tones derived from the panel text so light AND dark themes adapt.
	   Static fallback first for older browsers, then color-mix where supported. */
	--piscfc-drawer-muted: rgba( 90, 90, 90, 0.9 );
	--piscfc-drawer-line: rgba( 128, 128, 128, 0.18 );
	--piscfc-drawer-muted: color-mix( in srgb, var(--piscfc-drawer-text, #1a1a1a) 55%, transparent );
	--piscfc-drawer-line: color-mix( in srgb, var(--piscfc-drawer-text, #1a1a1a) 12%, transparent );
	display: flex;
	flex-direction: column;
	box-shadow: 0 0 40px rgba( 0, 0, 0, 0.2 );
	transition: transform 0.3s ease;
}

.piscfc-drawer--right {
	right: 0;
	transform: translateX( 100% );
}

.piscfc-drawer--left {
	left: 0;
	transform: translateX( -100% );
}

.piscfc-drawer.is-open {
	transform: translateX( 0 );
}

.piscfc-drawer__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 20px;
	border-bottom: 1px solid var(--piscfc-drawer-line, #eee);
}

.piscfc-drawer__title {
	margin: 0;
	font-size: 18px;
	color: inherit;
}

.piscfc-drawer__close {
	border: 0 !important;
	background: transparent !important;
	background-image: none !important;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	color: inherit !important;
	padding: 4px 8px;
	border-radius: 6px !important;
	box-shadow: none !important;
}

.piscfc-drawer__close:focus-visible {
	outline: 2px solid var(--piscfc-accent, #081541);
}

.piscfc-drawer__status {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
}

.piscfc-drawer__body {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 12px 20px;
	-webkit-overflow-scrolling: touch;
}

.piscfc-drawer__empty {
	text-align: center;
	color: var(--piscfc-drawer-muted, #666);
	padding: 40px 0;
}

.piscfc-items {
	list-style: none;
	margin: 0;
	padding: 0;
}

.piscfc-item {
	display: flex;
	gap: 12px;
	padding: 14px 0;
	border-bottom: 1px solid var(--piscfc-drawer-line, #f0f0f0);
	position: relative;
}

.piscfc-item__image img {
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: 8px;
}

.piscfc-item__details {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.piscfc-item__name {
	font-weight: 600;
	font-size: 14px;
}

.piscfc-item__variation {
	font-size: 12px;
	color: var(--piscfc-drawer-muted, #777);
}

.piscfc-item__price {
	font-size: 14px;
	font-weight: 600;
}

.piscfc-qty {
	display: inline-flex;
	align-items: stretch;
	margin-top: 8px;
	border: 1px solid var(--piscfc-drawer-line, #e2e2e2) !important;
	border-radius: 8px;
	overflow: hidden;
	background: color-mix( in srgb, var(--piscfc-drawer-text, #1a1a1a) 3%, transparent );
	width: fit-content;
}

.piscfc-qty__btn {
	width: 30px;
	height: 30px;
	border: 0 !important;
	background: transparent !important;
	background-image: none !important;
	color: inherit !important;
	cursor: pointer;
	font-size: 17px;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
	padding: 0;
	border-radius: 0 !important;
	box-shadow: none !important;
}

.piscfc-qty__btn:hover {
	background: color-mix( in srgb, var(--piscfc-drawer-text, #1a1a1a) 10%, transparent );
}

.piscfc-qty__btn:active {
	background: color-mix( in srgb, var(--piscfc-drawer-text, #1a1a1a) 16%, transparent );
}

.piscfc-qty__btn:focus-visible {
	outline: 2px solid var(--piscfc-accent, #081541);
	outline-offset: -2px;
	border-radius: 6px;
}

.piscfc-qty__value {
	min-width: 34px;
	padding: 0 4px;
	text-align: center;
	font-weight: 600;
	font-size: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-left: 1px solid var(--piscfc-drawer-line, #e2e2e2) !important;
	border-right: 1px solid var(--piscfc-drawer-line, #e2e2e2) !important;
	border-top: 0 !important;
	border-bottom: 0 !important;
	background: transparent !important;
	color: inherit !important;
}

.piscfc-item__remove {
	border: 0 !important;
	background: transparent !important;
	background-image: none !important;
	color: var(--piscfc-drawer-muted, #999) !important;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	align-self: flex-start;
	padding: 2px 6px;
	box-shadow: none !important;
	border-radius: 4px !important;
}

.piscfc-item__remove:hover,
.piscfc-item__remove:focus-visible {
	color: var(--piscfc-badge, #ef4444) !important;
	background: transparent !important;
	outline: none;
}

.piscfc-drawer__footer {
	border-top: 1px solid var(--piscfc-drawer-line, #eee);
	padding: 16px 20px;
}

.piscfc-drawer__subtotal {
	display: flex;
	justify-content: space-between;
	font-size: 16px;
	font-weight: 700;
	margin-bottom: 12px;
}

.piscfc-drawer__actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.piscfc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 18px;
	text-decoration: none !important;
	font-weight: 600;
	font-size: 15px;
	text-align: center;
	cursor: pointer;
	background-image: none !important;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* Secondary = "View cart" */
.piscfc-btn--secondary {
	background: var(--piscfc-cart-bg, #fff) !important;
	color: var(--piscfc-cart-text, #081541) !important;
	border: var(--piscfc-cart-border-width, 2px) solid var(--piscfc-cart-border, #081541) !important;
	border-radius: var(--piscfc-cart-radius, 8px) !important;
}

.piscfc-btn--secondary:hover,
.piscfc-btn--secondary:focus-visible {
	background: var(--piscfc-cart-bg-h, #081541) !important;
	color: var(--piscfc-cart-text-h, #fff) !important;
	border-color: var(--piscfc-cart-border-h, #081541) !important;
}

/* Primary = "Checkout" */
.piscfc-btn--primary {
	background: var(--piscfc-checkout-bg, #081541) !important;
	color: var(--piscfc-checkout-text, #fff) !important;
	border: var(--piscfc-checkout-border-width, 2px) solid var(--piscfc-checkout-border, #081541) !important;
	border-radius: var(--piscfc-checkout-radius, 8px) !important;
}

.piscfc-btn--primary:hover,
.piscfc-btn--primary:focus-visible {
	background: var(--piscfc-checkout-bg-h, #081541) !important;
	color: var(--piscfc-checkout-text-h, #fff) !important;
	border-color: var(--piscfc-checkout-border-h, #081541) !important;
}

.piscfc-btn:focus-visible {
	outline: 3px solid var(--piscfc-accent, #081541);
	outline-offset: 2px;
}

/* Loader ------------------------------------------------------------------- */
.piscfc-drawer__loader {
	position: absolute;
	inset: 0;
	background: rgba( 255, 255, 255, 0.6 );
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
}

.piscfc-spinner {
	width: 32px;
	height: 32px;
	border: 3px solid #ddd;
	border-top-color: var(--piscfc-accent, #081541);
	border-radius: 50%;
	animation: piscfc-spin 0.8s linear infinite;
}

.piscfc-error {
	background: #fdecea;
	color: #b3261e;
	border: 1px solid #f5c2c0;
	border-radius: 8px;
	padding: 10px 12px;
	font-size: 14px;
	margin-bottom: 12px;
}

@keyframes piscfc-spin {
	to {
		transform: rotate( 360deg );
	}
}

/* Responsive --------------------------------------------------------------- */
@media ( max-width: 480px ) {
	.piscfc-drawer {
		width: 100vw;
	}

	.piscfc-fab {
		bottom: 16px;
	}

	.piscfc-fab--right {
		right: 16px;
	}

	.piscfc-fab--left {
		left: 16px;
	}
}

/* Touch / no-hover devices ------------------------------------------------- */
/* There is no hover on touchscreens, so a "reveal on hover" subtotal would stay
   hidden forever. On these devices we always show it instead. */
@media ( hover: none ) {
	.piscfc-fab--subtotal-hover.piscfc-fab--subtotal-inline .piscfc-fab__subtotal {
		max-width: 200px;
		opacity: 1;
	}

	.piscfc-fab--subtotal-hover.piscfc-fab--subtotal-below .piscfc-fab__subtotal {
		max-height: 40px;
		opacity: 1;
	}

	/* Restore the gap since the subtotal is now visible. */
	.piscfc-fab--subtotal-hover.piscfc-fab--subtotal-inline {
		gap: 8px;
	}

	/* External amount: no hover on touch, so always show it. */
	.piscfc-fab-wrap--subtotal-hover .piscfc-fab__subtotal {
		opacity: 1;
		transform: none;
		pointer-events: auto;
	}

	/* Remove hover-only visual shifts that can stick on touch. */
	.piscfc-fab:hover {
		transform: none;
	}
}

/* Reduced motion ----------------------------------------------------------- */
@media ( prefers-reduced-motion: reduce ) {
	.piscfc-fab,
	.piscfc-fab__subtotal,
	.piscfc-overlay,
	.piscfc-drawer {
		transition: none !important;
	}

	.piscfc-spinner {
		animation-duration: 1.6s;
	}
}

/* Elementor cart widget trigger ------------------------------------------- */
.piscfc-ew {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	padding: 4px;
	cursor: pointer;
	color: inherit;
	line-height: 1;
}
.piscfc-ew__icon {
	display: inline-flex;
	font-size: 24px;
}
.piscfc-ew__icon svg {
	width: 24px;
	height: 24px;
}
.piscfc-ew__count {
	position: absolute;
	top: -8px;
	right: -10px;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	box-sizing: border-box;
	border-radius: 999px;
	background: var(--piscfc-badge, #ef4444);
	color: var(--piscfc-badge-text, #fff);
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.piscfc-ew:focus-visible {
	outline: 2px solid var(--piscfc-accent, #081541);
	outline-offset: 2px;
	border-radius: 6px;
}

/* Avoid overlap with the sticky purchase bar (bottom) when both are visible.
   Lift the floating cart above the bar. The bar sets the body classes only
   while it is shown, and only for bottom-positioned bars. */
body.piscfc-has-sticky-bar--bottom .piscfc-fab,
body.piscfc-has-sticky-bar--bottom .piscfc-fab-wrap--subtotal-outside {
	bottom: 96px;
}
/* When the subtotal is shown OUTSIDE, the FAB inside the wrapper is
   position:relative and must NOT receive `bottom` (it would drop out of line
   with the amount pill). The wrapper itself already carries the lift. */
body.piscfc-has-sticky-bar--bottom .piscfc-fab-wrap--subtotal-outside .piscfc-fab {
	bottom: auto;
}
@media ( max-width: 600px ) {
	body.piscfc-has-sticky-bar--bottom .piscfc-fab,
	body.piscfc-has-sticky-bar--bottom .piscfc-fab-wrap--subtotal-outside {
		bottom: 104px;
	}
	body.piscfc-has-sticky-bar--bottom .piscfc-fab-wrap--subtotal-outside .piscfc-fab {
		bottom: auto;
	}
}