/* Best Sellers Carousel v1.3 - premium, hover-invert, animated, fully responsive */

.bsc-wrap {
	--bsc-gap: 24px;
	--bsc-c: var(--bsc-cols-d, 4);
	--bsc-pad: clamp(16px, 4vw, 48px);
	--bsc-ease: cubic-bezier(0.22, 0.7, 0.2, 1);
	--bsc-on-accent: #000;

	/* section palette (dark bg default) */
	--bsc-ink: #f4f2ee;
	--bsc-mute: #8b8b86;
	--bsc-line: rgba(255, 255, 255, 0.09);
	--bsc-line-strong: rgba(255, 255, 255, 0.24);
	--bsc-shadow: rgba(255, 255, 255, 0.2);

	/* card palette: normal (n) and hovered / flipped (f) - dark card default */
	--bsc-n-bg: var(--bsc-card, #0e0e0e);
	--bsc-n-ink: #f4f2ee;
	--bsc-n-mute: #8b8b86;
	--bsc-n-line: rgba(255, 255, 255, 0.09);
	--bsc-n-line2: rgba(255, 255, 255, 0.24);
	--bsc-n-star: rgba(255, 255, 255, 0.18);
	--bsc-f-bg: #ffffff;
	--bsc-f-ink: #0a0a0a;
	--bsc-f-mute: #6b6b66;
	--bsc-f-line: rgba(0, 0, 0, 0.09);
	--bsc-f-line2: rgba(0, 0, 0, 0.26);
	--bsc-f-star: rgba(0, 0, 0, 0.16);

	position: relative;
	isolation: isolate;
	box-sizing: border-box;
	width: 100%;
	padding: clamp(52px, 8vw, 110px) 0;
	background: var(--bsc-bg, #000);
	color: var(--bsc-ink);
	font-family: inherit;
	line-height: 1.4;
	overflow: hidden;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
}

/* light section background */
.bsc-wrap.bsc-bg-light {
	--bsc-ink: #0a0a0a;
	--bsc-mute: #6b6b66;
	--bsc-line: rgba(0, 0, 0, 0.1);
	--bsc-line-strong: rgba(0, 0, 0, 0.26);
	--bsc-shadow: rgba(0, 0, 0, 0.3);
}

/* light card: normal = light, hover = dark */
.bsc-wrap.bsc-card-light {
	--bsc-n-ink: #0a0a0a;
	--bsc-n-mute: #6b6b66;
	--bsc-n-line: rgba(0, 0, 0, 0.09);
	--bsc-n-line2: rgba(0, 0, 0, 0.26);
	--bsc-n-star: rgba(0, 0, 0, 0.16);
	--bsc-f-bg: #0a0a0a;
	--bsc-f-ink: #f4f2ee;
	--bsc-f-mute: #9a9a94;
	--bsc-f-line: rgba(255, 255, 255, 0.1);
	--bsc-f-line2: rgba(255, 255, 255, 0.28);
	--bsc-f-star: rgba(255, 255, 255, 0.2);
}

/* invert switched off: hover palette = normal palette */
.bsc-wrap:not(.bsc-invert) {
	--bsc-f-bg: var(--bsc-n-bg);
	--bsc-f-ink: var(--bsc-n-ink);
	--bsc-f-mute: var(--bsc-n-mute);
	--bsc-f-line: var(--bsc-n-line);
	--bsc-f-line2: var(--bsc-n-line2);
	--bsc-f-star: var(--bsc-n-star);
}

.bsc-wrap *,
.bsc-wrap *::before,
.bsc-wrap *::after {
	box-sizing: border-box;
}

.bsc-wrap .bsc-inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 1360px;
	margin: 0 auto;
	padding: 0 var(--bsc-pad);
}

.bsc-wrap .bsc-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- Ambient glow (animations on) ---------- */

.bsc-wrap.bsc-anim::before,
.bsc-wrap.bsc-anim::after {
	content: "";
	position: absolute;
	z-index: 0;
	width: min(70vw, 900px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, var(--bsc-accent) 0%, transparent 65%);
	filter: blur(50px);
	opacity: 0.11;
	pointer-events: none;
}

.bsc-wrap.bsc-anim::before {
	left: -18%;
	top: -35%;
	animation: bsc-drift-a 20s ease-in-out infinite alternate;
}

.bsc-wrap.bsc-anim::after {
	right: -20%;
	bottom: -40%;
	opacity: 0.08;
	animation: bsc-drift-b 26s ease-in-out infinite alternate;
}

@keyframes bsc-drift-a {
	from { transform: translate3d(0, 0, 0) scale(1); }
	to { transform: translate3d(14%, 12%, 0) scale(1.18); }
}

@keyframes bsc-drift-b {
	from { transform: translate3d(0, 0, 0) scale(1.1); }
	to { transform: translate3d(-16%, -10%, 0) scale(0.92); }
}

/* ---------- Header ---------- */

.bsc-wrap .bsc-head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		"eyebrow eyebrow"
		"title link"
		"sub sub";
	align-items: end;
	column-gap: 24px;
	row-gap: 12px;
	margin: 0 0 clamp(26px, 3.6vw, 52px);
}

.bsc-wrap .bsc-eyebrow {
	grid-area: eyebrow;
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	color: var(--bsc-accent);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.26em;
	line-height: 1;
	text-transform: uppercase;
}

.bsc-wrap .bsc-eyebrow::before {
	content: "";
	display: block;
	width: 38px;
	height: 1px;
	background: currentColor;
	transform-origin: left center;
}

.bsc-wrap .bsc-heading {
	grid-area: title;
	margin: 0;
	padding: 0;
	color: var(--bsc-ink);
	font-size: clamp(30px, 4.6vw, 62px);
	font-weight: 600;
	letter-spacing: -0.035em;
	line-height: 1.02;
	text-transform: none;
	overflow-wrap: anywhere;
}

.bsc-wrap .bsc-sub {
	grid-area: sub;
	max-width: 54ch;
	margin: 0;
	color: var(--bsc-mute);
	font-size: clamp(14px, 1.25vw, 16.5px);
	line-height: 1.6;
}

.bsc-wrap a.bsc-viewall {
	position: relative;
	grid-area: link;
	align-self: end;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 13px 22px;
	border: 1px solid var(--bsc-line-strong);
	border-radius: 999px;
	background: transparent;
	box-shadow: none;
	color: var(--bsc-ink);
	font-size: 14.5px;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	isolation: isolate;
	transition: color 0.35s ease, border-color 0.35s ease;
}

.bsc-wrap a.bsc-viewall::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--bsc-accent);
	transform: translateY(101%);
	transition: transform 0.45s var(--bsc-ease);
}

.bsc-wrap a.bsc-viewall svg {
	display: block;
	transition: transform 0.35s var(--bsc-ease);
}

.bsc-wrap a.bsc-viewall:hover,
.bsc-wrap a.bsc-viewall:focus-visible {
	border-color: var(--bsc-accent);
	color: var(--bsc-on-accent);
}

.bsc-wrap a.bsc-viewall:hover::before,
.bsc-wrap a.bsc-viewall:focus-visible::before {
	transform: translateY(0);
}

.bsc-wrap a.bsc-viewall:hover svg {
	transform: translateX(4px);
}

/* ---------- Viewport / track ---------- */

.bsc-wrap .bsc-viewport {
	/* extra room so lifted cards + shadow are not clipped */
	padding: 16px 0 36px;
	margin: -16px 0 -36px;
	overflow: hidden;
	outline: none;
	touch-action: pan-y pinch-zoom;
	cursor: grab;
	-webkit-user-select: none;
	user-select: none;
}

.bsc-wrap .bsc-viewport:focus-visible {
	outline: 1px solid var(--bsc-accent);
	outline-offset: 6px;
}

.bsc-wrap .bsc-viewport.is-dragging {
	cursor: grabbing;
}

.bsc-wrap .bsc-track {
	display: flex;
	gap: var(--bsc-gap);
	will-change: transform;
	transition: transform 0.85s var(--bsc-ease);
}

.bsc-wrap .bsc-viewport.is-dragging .bsc-track {
	transition: none;
}

/* ---------- Card ---------- */

.bsc-wrap .bsc-card {
	--ci: var(--bsc-n-ink);
	--cm: var(--bsc-n-mute);
	--cl: var(--bsc-n-line);
	--cl2: var(--bsc-n-line2);
	--cs: var(--bsc-n-star);
	--cbg: var(--bsc-n-bg);
	--mx: 50%;
	--my: 50%;

	position: relative;
	flex: 0 0 calc((100% - (var(--bsc-c) - 1) * var(--bsc-gap)) / var(--bsc-c));
	min-width: 0;
	display: flex;
	flex-direction: column;
	background-color: var(--cbg);
	color: var(--ci);
	border: 1px solid var(--cl);
	border-radius: clamp(14px, 1.5vw, 22px);
	overflow: hidden;
	transition:
		background-color 0.5s var(--bsc-ease),
		color 0.5s var(--bsc-ease),
		border-color 0.5s var(--bsc-ease),
		transform 0.6s var(--bsc-ease),
		box-shadow 0.6s var(--bsc-ease);
}

/* accent line that sweeps across the top */
.bsc-wrap .bsc-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 4;
	height: 3px;
	background: var(--bsc-accent);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.7s var(--bsc-ease);
	pointer-events: none;
}

/* cursor spotlight */
.bsc-wrap .bsc-card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
	background: radial-gradient(360px circle at var(--mx) var(--my), var(--bsc-accent), transparent 60%);
	opacity: 0;
	mix-blend-mode: soft-light;
	transition: opacity 0.5s ease;
	pointer-events: none;
}

/* the flipped state (mouse hover, keyboard focus, touch press) */
.bsc-wrap .bsc-card:has(:focus-visible) {
	--ci: var(--bsc-f-ink);
	--cm: var(--bsc-f-mute);
	--cl: var(--bsc-f-line);
	--cl2: var(--bsc-f-line2);
	--cs: var(--bsc-f-star);
	--cbg: var(--bsc-f-bg);
}

.bsc-wrap .bsc-card:active {
	--ci: var(--bsc-f-ink);
	--cm: var(--bsc-f-mute);
	--cl: var(--bsc-f-line);
	--cl2: var(--bsc-f-line2);
	--cs: var(--bsc-f-star);
	--cbg: var(--bsc-f-bg);
}

/* Media */
.bsc-wrap .bsc-media {
	position: relative;
	aspect-ratio: var(--bsc-ratio, 4 / 5);
	background: var(--bsc-media, #eceae6);
	overflow: hidden;
}

.bsc-wrap .bsc-thumb {
	position: absolute;
	inset: 0;
	display: block;
}

.bsc-wrap .bsc-thumb img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	object-fit: var(--bsc-fit, cover);
	mix-blend-mode: multiply;
	-webkit-user-drag: none;
	pointer-events: none;
	transition: transform 1.1s var(--bsc-ease), opacity 0.6s ease;
}

.bsc-wrap .bsc-thumb .bsc-img-hover {
	opacity: 0;
}

.bsc-wrap .bsc-card.is-out .bsc-thumb img {
	opacity: 0.55;
}

/* index number, readable on any image */
.bsc-wrap .bsc-idx {
	position: absolute;
	top: clamp(10px, 1.1vw, 14px);
	right: clamp(10px, 1.1vw, 14px);
	z-index: 2;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	font-variant-numeric: tabular-nums;
	mix-blend-mode: difference;
	pointer-events: none;
}

/* quick "view product" pill that slides up */
.bsc-wrap .bsc-quick {
	position: absolute;
	left: 50%;
	bottom: clamp(10px, 1.2vw, 16px);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	border-radius: 999px;
	background: var(--ci);
	color: var(--cbg);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1;
	white-space: nowrap;
	transform: translate(-50%, 220%);
	opacity: 0;
	transition: transform 0.6s var(--bsc-ease), opacity 0.4s ease, background-color 0.5s ease, color 0.5s ease;
	pointer-events: none;
}

/* Tags */
.bsc-wrap .bsc-tags {
	position: absolute;
	top: clamp(10px, 1.1vw, 14px);
	left: clamp(10px, 1.1vw, 14px);
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	pointer-events: none;
}

.bsc-wrap .bsc-tag,
.bsc-wrap .bsc-off {
	position: relative;
	display: inline-block;
	padding: 6px 12px;
	border-radius: 999px;
	overflow: hidden;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.01em;
}

.bsc-wrap .bsc-tag {
	background: rgba(0, 0, 0, 0.8);
	color: #f4f2ee;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.bsc-wrap .bsc-tag-out {
	background: rgba(255, 255, 255, 0.94);
	color: #000;
}

.bsc-wrap .bsc-off {
	background: var(--bsc-accent);
	color: var(--bsc-on-accent);
}

/* shimmer sweep on badges */
.bsc-wrap.bsc-anim .bsc-tag:not(.bsc-tag-out)::after,
.bsc-wrap.bsc-anim .bsc-off::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -60%;
	width: 40%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.45), transparent);
	transform: skewX(-20deg);
	animation: bsc-shine 5.5s ease-in-out infinite;
}

@keyframes bsc-shine {
	0%, 60% { left: -60%; }
	100% { left: 140%; }
}

/* Body */
.bsc-wrap .bsc-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 7px;
	padding: clamp(15px, 1.7vw, 24px);
}

.bsc-wrap .bsc-cat {
	color: var(--cm);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.14em;
	line-height: 1.3;
	text-transform: uppercase;
	transition: color 0.5s var(--bsc-ease);
}

.bsc-wrap .bsc-title {
	margin: 0;
	padding: 0;
	font-size: clamp(14.5px, 1.25vw, 17px);
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: -0.005em;
	text-transform: none;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.7em;
}

.bsc-wrap .bsc-title a {
	color: var(--ci);
	text-decoration: none;
	border: 0;
	box-shadow: none;
	background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
	transition: color 0.5s var(--bsc-ease), background-size 0.6s var(--bsc-ease);
}

.bsc-wrap .bsc-card:hover .bsc-title a,
.bsc-wrap .bsc-title a:focus-visible {
	background-size: 100% 1px;
}

/* Rating */
.bsc-wrap .bsc-rating {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--cm);
	font-size: 12.5px;
	transition: color 0.5s var(--bsc-ease);
}

.bsc-wrap .bsc-stars {
	position: relative;
	display: inline-block;
	font-size: 12px;
	letter-spacing: 2px;
	line-height: 1;
	color: var(--cs);
	transition: color 0.5s var(--bsc-ease);
}

.bsc-wrap .bsc-stars::before,
.bsc-wrap .bsc-stars span::before {
	content: "\2605\2605\2605\2605\2605";
}

.bsc-wrap .bsc-stars span {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	overflow: hidden;
	white-space: nowrap;
	color: var(--bsc-accent);
}

/* Footer: price + cart */
.bsc-wrap .bsc-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: auto;
	padding-top: clamp(12px, 1.4vw, 18px);
}

.bsc-wrap .bsc-price {
	min-width: 0;
	color: var(--ci);
	font-size: clamp(15px, 1.4vw, 19px);
	font-weight: 600;
	line-height: 1.25;
	font-variant-numeric: tabular-nums;
	transition: color 0.5s var(--bsc-ease);
}

.bsc-wrap .bsc-price del {
	display: block;
	margin: 0 0 2px;
	color: var(--cm);
	font-size: 0.75em;
	font-weight: 400;
	opacity: 1;
	transition: color 0.5s var(--bsc-ease);
}

.bsc-wrap .bsc-price ins {
	background: none;
	color: inherit;
	text-decoration: none;
}

.bsc-wrap .bsc-price .woocommerce-Price-amount {
	white-space: nowrap;
}

/* Cart button (round icon) */
.bsc-wrap a.bsc-cart.button {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 46px;
	height: 46px;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 1px solid var(--cl2);
	border-radius: 50%;
	background: transparent;
	box-shadow: none;
	color: var(--ci);
	font-size: 0;
	line-height: 1;
	text-decoration: none;
	transition:
		background-color 0.4s var(--bsc-ease),
		border-color 0.4s var(--bsc-ease),
		color 0.4s var(--bsc-ease),
		transform 0.4s var(--bsc-ease);
}

.bsc-wrap a.bsc-cart.button:hover,
.bsc-wrap a.bsc-cart.button:focus-visible {
	background: var(--bsc-accent);
	border-color: var(--bsc-accent);
	color: var(--bsc-on-accent);
	transform: scale(1.1) rotate(-6deg);
}

.bsc-wrap a.bsc-cart.button::before,
.bsc-wrap a.bsc-cart.button::after {
	display: none;
}

.bsc-wrap a.bsc-cart .bsc-i {
	display: block;
	width: 20px;
	height: 20px;
}

.bsc-wrap a.bsc-cart .bsc-i-check {
	display: none;
}

.bsc-wrap a.bsc-cart.added {
	background: var(--bsc-accent);
	border-color: var(--bsc-accent);
	color: var(--bsc-on-accent);
	animation: bsc-pop 0.6s var(--bsc-ease);
}

.bsc-wrap a.bsc-cart.added .bsc-i-bag,
.bsc-wrap a.bsc-cart.added .bsc-i-arrow {
	display: none;
}

.bsc-wrap a.bsc-cart.added .bsc-i-check {
	display: block;
}

.bsc-wrap a.bsc-cart.loading {
	pointer-events: none;
}

.bsc-wrap a.bsc-cart.loading .bsc-i {
	animation: bsc-pulse 0.8s ease-in-out infinite;
}

/* WooCommerce "View cart" link injected after adding */
.bsc-wrap .added_to_cart {
	display: none;
}

@keyframes bsc-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.25; }
}

@keyframes bsc-pop {
	0% { transform: scale(0.8); }
	55% { transform: scale(1.22); }
	100% { transform: scale(1); }
}

/* ---------- Controls: counter + progress + arrows ---------- */

.bsc-wrap .bsc-controls {
	display: flex;
	align-items: center;
	gap: clamp(18px, 3vw, 40px);
	margin-top: clamp(28px, 3.4vw, 48px);
}

.bsc-wrap .bsc-controls.is-static {
	display: none;
}

.bsc-wrap .bsc-counter {
	display: flex;
	align-items: baseline;
	gap: 8px;
	flex-shrink: 0;
	color: var(--bsc-mute);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.1em;
	font-variant-numeric: tabular-nums;
}

.bsc-wrap .bsc-counter .bsc-cur {
	color: var(--bsc-ink);
	font-size: clamp(20px, 2vw, 26px);
	font-weight: 600;
	letter-spacing: -0.01em;
}

.bsc-wrap .bsc-counter .bsc-sep {
	display: inline-block;
	width: 18px;
	height: 1px;
	background: currentColor;
	transform: translateY(-4px);
}

.bsc-wrap .bsc-progress {
	position: relative;
	flex: 1;
	height: 24px;
	cursor: pointer;
}

.bsc-wrap .bsc-progress::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 2px;
	margin-top: -1px;
	border-radius: 2px;
	background: var(--bsc-line-strong);
	opacity: 0.6;
}

.bsc-wrap .bsc-bar {
	position: absolute;
	top: 50%;
	left: 0;
	width: 25%;
	height: 2px;
	margin-top: -1px;
	border-radius: 2px;
	background: var(--bsc-accent);
	transition: left 0.85s var(--bsc-ease), width 0.4s ease;
}

.bsc-wrap .bsc-viewport.is-dragging ~ .bsc-controls .bsc-bar {
	transition: none;
}

.bsc-wrap .bsc-arrows {
	display: flex;
	gap: 10px;
	flex-shrink: 0;
}

.bsc-wrap button.bsc-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 1px solid var(--bsc-line-strong);
	border-radius: 50%;
	background: transparent;
	box-shadow: none;
	color: var(--bsc-ink);
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.4s var(--bsc-ease);
}

.bsc-wrap button.bsc-arrow:hover,
.bsc-wrap button.bsc-arrow:focus-visible {
	background: var(--bsc-accent);
	border-color: var(--bsc-accent);
	color: var(--bsc-on-accent);
}

.bsc-wrap button.bsc-prev:hover svg {
	transform: translateX(-3px);
}

.bsc-wrap button.bsc-next:hover svg {
	transform: translateX(3px);
}

.bsc-wrap button.bsc-arrow svg {
	transition: transform 0.35s var(--bsc-ease);
}

.bsc-wrap button.bsc-arrow:active {
	transform: scale(0.92);
}

.bsc-wrap a:focus-visible,
.bsc-wrap button:focus-visible {
	outline: 2px solid var(--bsc-accent);
	outline-offset: 3px;
}

/* ---------- Entrance animation (only when JS adds .bsc-anim) ---------- */

.bsc-wrap.bsc-anim:not(.is-in) .bsc-head > *,
.bsc-wrap.bsc-anim:not(.is-in) .bsc-card,
.bsc-wrap.bsc-anim:not(.is-in) .bsc-controls {
	opacity: 0;
	/* fail-safe: reveal anyway if JS never marks the section as visible */
	animation: bsc-failsafe 0.01s linear 3s forwards;
}

@keyframes bsc-failsafe {
	to { opacity: 1; }
}

@keyframes bsc-rise {
	from { opacity: 0; translate: 0 46px; }
	to { opacity: 1; translate: 0 0; }
}

@keyframes bsc-fade-up {
	from { opacity: 0; translate: 0 26px; }
	to { opacity: 1; translate: 0 0; }
}

@keyframes bsc-line-grow {
	from { transform: scaleX(0); }
	to { transform: scaleX(1); }
}

.bsc-wrap.bsc-anim.is-in .bsc-eyebrow {
	animation: bsc-fade-up 0.8s var(--bsc-ease) both;
}

.bsc-wrap.bsc-anim.is-in .bsc-eyebrow::before {
	animation: bsc-line-grow 1s var(--bsc-ease) 0.2s both;
}

.bsc-wrap.bsc-anim.is-in .bsc-heading {
	animation: bsc-fade-up 0.95s var(--bsc-ease) 0.1s both;
}

.bsc-wrap.bsc-anim.is-in a.bsc-viewall {
	animation: bsc-fade-up 0.95s var(--bsc-ease) 0.22s both;
}

.bsc-wrap.bsc-anim.is-in .bsc-sub {
	animation: bsc-fade-up 0.95s var(--bsc-ease) 0.3s both;
}

.bsc-wrap.bsc-anim.is-in .bsc-card {
	animation: bsc-rise 1s var(--bsc-ease) both;
	animation-delay: calc(0.35s + var(--i, 0) * 0.09s);
}

.bsc-wrap.bsc-anim.is-in .bsc-controls {
	animation: bsc-fade-up 0.9s var(--bsc-ease) 0.9s both;
}

/* ---------- Hover-capable devices only ---------- */

@media (hover: hover) and (pointer: fine) {
	.bsc-wrap .bsc-card:hover {
		--ci: var(--bsc-f-ink);
		--cm: var(--bsc-f-mute);
		--cl: var(--bsc-f-line);
		--cl2: var(--bsc-f-line2);
		--cs: var(--bsc-f-star);
		--cbg: var(--bsc-f-bg);
		transform: translateY(-9px);
		box-shadow: 0 34px 70px -34px var(--bsc-shadow);
	}

	.bsc-wrap .bsc-card:hover::before {
		transform: scaleX(1);
	}

	.bsc-wrap .bsc-card:hover::after {
		opacity: 0.55;
	}

	.bsc-wrap .bsc-card:hover .bsc-thumb:not(.has-hover) img {
		transform: scale(1.07);
	}

	.bsc-wrap .bsc-card:hover .bsc-thumb.has-hover .bsc-img-main {
		opacity: 0;
	}

	.bsc-wrap .bsc-card:hover .bsc-thumb.has-hover .bsc-img-hover {
		opacity: 1;
		transform: scale(1.04);
	}

	.bsc-wrap .bsc-card:hover .bsc-quick {
		transform: translate(-50%, 0);
		opacity: 1;
	}

	/* flipped card: cart button becomes a solid inverse disc */
	.bsc-wrap .bsc-card:hover a.bsc-cart.button:not(:hover):not(.added) {
		background: var(--ci);
		border-color: var(--ci);
		color: var(--cbg);
	}
}

@media (hover: none) {
	.bsc-wrap .bsc-viewport {
		cursor: default;
	}

	.bsc-wrap .bsc-quick,
	.bsc-wrap .bsc-card::after {
		display: none;
	}
}

/* ---------- Large screens ---------- */

@media (min-width: 1600px) {
	.bsc-wrap .bsc-inner {
		max-width: 1480px;
	}

	.bsc-wrap {
		--bsc-gap: 28px;
	}
}

/* ---------- Tablet ---------- */

@media (max-width: 1100px) {
	.bsc-wrap {
		--bsc-c: var(--bsc-cols-t, 3);
		--bsc-gap: 20px;
	}
}

/* ---------- Mobile ---------- */

@media (max-width: 700px) {
	.bsc-wrap {
		--bsc-c: var(--bsc-cols-m, 1.6);
		--bsc-gap: 12px;
	}

	.bsc-wrap .bsc-head {
		row-gap: 10px;
		column-gap: 14px;
	}

	.bsc-wrap .bsc-eyebrow {
		font-size: 11px;
		letter-spacing: 0.22em;
	}

	.bsc-wrap a.bsc-viewall {
		padding: 10px 16px;
		gap: 8px;
		font-size: 13.5px;
	}

	.bsc-wrap .bsc-tag,
	.bsc-wrap .bsc-off {
		padding: 5px 10px;
		font-size: 11px;
	}

	.bsc-wrap .bsc-cat {
		font-size: 11px;
	}

	.bsc-wrap .bsc-rating {
		font-size: 11.5px;
	}

	.bsc-wrap .bsc-foot {
		gap: 8px;
	}

	.bsc-wrap a.bsc-cart.button,
	.bsc-wrap button.bsc-arrow {
		width: 42px;
		height: 42px;
	}

	.bsc-wrap a.bsc-cart .bsc-i {
		width: 18px;
		height: 18px;
	}

	.bsc-wrap .bsc-controls {
		gap: 14px;
	}

	.bsc-wrap .bsc-counter .bsc-sep {
		width: 12px;
	}
}

/* ---------- Small phones ---------- */

@media (max-width: 380px) {
	.bsc-wrap .bsc-head {
		grid-template-columns: 1fr;
		grid-template-areas:
			"eyebrow"
			"title"
			"sub"
			"link";
		row-gap: 12px;
	}

	.bsc-wrap a.bsc-viewall {
		justify-self: start;
		margin-top: 4px;
	}

	.bsc-wrap a.bsc-cart.button,
	.bsc-wrap button.bsc-arrow {
		width: 40px;
		height: 40px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bsc-wrap *,
	.bsc-wrap *::before,
	.bsc-wrap *::after {
		animation: none !important;
		transition-duration: 0.01ms !important;
	}

	.bsc-wrap.bsc-anim:not(.is-in) .bsc-head > *,
	.bsc-wrap.bsc-anim:not(.is-in) .bsc-card,
	.bsc-wrap.bsc-anim:not(.is-in) .bsc-controls {
		opacity: 1;
	}
}