/* Stickyline – sticky add to cart */
.ssc {
	--ssc-accent: #111827;
	--ssc-bg: rgba(255, 255, 255, 0.92);
	--ssc-fg: #0f172a;
	--ssc-muted: #64748b;
	--ssc-line: rgba(15, 23, 42, 0.08);
	position: fixed;
	left: 0;
	right: 0;
	z-index: 99970;
	padding: 10px 16px;
	color: var(--ssc-fg);
	background: var(--ssc-bg);
	backdrop-filter: saturate(1.6) blur(14px);
	-webkit-backdrop-filter: saturate(1.6) blur(14px);
	box-shadow: 0 -10px 30px -12px rgba(15, 23, 42, 0.25);
	font-size: 15px;
	line-height: 1.3;
	transition: transform 0.35s cubic-bezier(.2, .9, .3, 1), opacity 0.25s;
	opacity: 0;
	pointer-events: none;
}
.ssc *, .ssc *::before, .ssc *::after { box-sizing: border-box; }
.ssc--bottom { bottom: 0; transform: translateY(110%); border-top: 1px solid var(--ssc-line); padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
.ssc--top { top: 0; transform: translateY(-110%); border-bottom: 1px solid var(--ssc-line); box-shadow: 0 10px 30px -12px rgba(15, 23, 42, 0.25); }
body.admin-bar .ssc--top { top: var(--wp-admin--admin-bar--height, 32px); }
.ssc.is-visible { transform: none; opacity: 1; pointer-events: auto; }
.ssc--theme-dark { --ssc-bg: rgba(15, 23, 42, 0.92); --ssc-fg: #f8fafc; --ssc-muted: #94a3b8; --ssc-line: rgba(248, 250, 252, 0.1); }
html.ssc-active body { padding-bottom: var(--ssc-h, 72px); }

@media (max-width: 768px) { .ssc--desktop { display: none; } }
@media (min-width: 769px) { .ssc--mobile { display: none; } }

.ssc__inner { display: flex; align-items: center; gap: 14px; max-width: 1200px; margin: 0 auto; }
.ssc .ssc__img { width: 52px !important; height: 52px !important; max-width: none; object-fit: cover; border-radius: 12px; flex: none; margin: 0 !important; background: var(--ssc-line); }
.ssc__info { flex: 1; min-width: 0; }
.ssc .ssc__name { margin: 0 !important; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ssc__meta { display: flex; align-items: center; gap: 10px; margin-top: 2px; }
.ssc__price { font-weight: 700; font-variant-numeric: tabular-nums; }
.ssc__price del { color: var(--ssc-muted); font-weight: 500; margin-right: 4px; }
.ssc__price ins { text-decoration: none; }
.ssc__rating { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--ssc-muted); }
.ssc__stars {
	letter-spacing: 1px;
	background: linear-gradient(90deg, #f59e0b var(--r), color-mix(in srgb, currentColor 30%, transparent) var(--r));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.ssc__actions { display: flex; align-items: center; gap: 10px; flex: none; }
.ssc__qty { display: inline-flex; align-items: center; height: 46px; border: 1px solid var(--ssc-line); border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--ssc-fg) 4%, transparent); }
.ssc .ssc__step { all: unset; width: 34px; height: 100%; display: grid; place-items: center; cursor: pointer; font-size: 18px; color: var(--ssc-fg); }
.ssc .ssc__step:hover { background: var(--ssc-line); }
.ssc .ssc__step:focus-visible { outline: 2px solid var(--ssc-accent); outline-offset: -2px; }
.ssc .ssc__qty-input { width: 38px; height: 100%; border: 0 !important; background: transparent !important; text-align: center; font: inherit; font-weight: 650; color: inherit; padding: 0 !important; -moz-appearance: textfield; box-shadow: none !important; }
.ssc__qty-input::-webkit-outer-spin-button, .ssc__qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.ssc .ssc__btn {
	all: unset;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 46px;
	padding: 0 22px;
	border-radius: 999px;
	color: #fff;
	background: var(--ssc-accent);
	font-weight: 650;
	font-size: 15px;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: 0 10px 22px -10px var(--ssc-accent);
	transition: transform 0.15s, filter 0.15s;
}
.ssc--theme-dark .ssc__btn { box-shadow: none; }
.ssc .ssc__btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
.ssc .ssc__btn:active { transform: scale(0.97); }
.ssc .ssc__btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--ssc-accent) 45%, transparent); outline-offset: 2px; }
.ssc.is-adding .ssc__btn { opacity: 0.75; }
.ssc.is-added .ssc__btn { background: #16a34a; box-shadow: none; }

@media (max-width: 640px) {
	.ssc { padding: 8px 12px; }
	.ssc__inner { gap: 10px; }
	.ssc .ssc__img { width: 44px !important; height: 44px !important; }
	.ssc .ssc__name { font-size: 14px; }
	.ssc__rating { display: none; }
	.ssc__qty { height: 42px; }
	.ssc .ssc__step { width: 28px; }
	.ssc .ssc__qty-input { width: 28px; }
	.ssc .ssc__btn { height: 42px; padding: 0 16px; font-size: 14px; }
	.ssc .ssc__btn svg { display: none; }
}
@media (max-width: 380px) { .ssc__qty { display: none; } }

/* Highlight the product form when the bar sends the shopper back to it. */
form.cart.ssc-flash { animation: ssc-flash 1.4s ease-out; border-radius: 12px; }
@keyframes ssc-flash { 0%, 30% { box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.55); } 100% { box-shadow: 0 0 0 4px transparent; } }

@media (prefers-reduced-motion: reduce) { .ssc, form.cart.ssc-flash { transition: none; animation: none; } }
@supports not (color: color-mix(in srgb, red 10%, white)) {
	.ssc__qty { background: transparent; }
	.ssc__stars { background: none; color: #f59e0b; }
}