/* ==========================================================
   Custom Banner & Flash Sale Manager - Frontend CSS
   No custom font-family is set anywhere here on purpose, so
   headings/text inherit whatever theme/system font is already
   active on the site. Brand color driven by a CSS variable so
   it can be changed from one place.
   ========================================================== */

:root {
	--cbfs-primary: #e85d9a;
	--cbfs-dark: #23282d;
}

/* =============== Banner Slider =============== */
.cbfs-slider {
	position: relative;
	overflow: hidden;
	border-radius: 8px;
}
.cbfs-slider-track {
	display: flex;
	transition: transform .5s ease;
	touch-action: pan-y;
}
.cbfs-slide {
	position: relative;
	min-width: 100%;
	/* Fallback for very old browsers that can't resolve the calc() below. */
	height: var(--cbfs-h-mobile, 225px);
	/* Height scales proportionally with the actual screen width (using 375px
	   as the reference phone width), so the banner keeps the same shape on
	   every phone instead of a fixed pixel height looking too tall/short on
	   some devices. */
	height: calc(100vw * (var(--cbfs-h-mobile) / 375px));
	max-height: 70vh;
}
@media (min-width: 768px) {
	.cbfs-slide { height: var(--cbfs-h-desktop, 500px); max-height: none; }
}
.cbfs-slide-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.cbfs-slide-content {
	position: absolute;
	top: 0; bottom: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	max-width: 90%;
	padding: 20px 5%;
	color: #fff;
	text-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.cbfs-pos-left { left: 0; align-items: flex-start; text-align: left; }
.cbfs-pos-center { left: 0; right: 0; align-items: center; text-align: center; margin: 0 auto; }
.cbfs-pos-right { right: 0; align-items: flex-end; text-align: right; }
.cbfs-slide-content h2 { font-size: clamp(20px, 4vw, 40px); margin: 0 0 8px; font-weight: 700; }
.cbfs-slide-content p { font-size: clamp(13px, 2vw, 18px); margin: 0 0 16px; }
.cbfs-slide-btn {
	display: inline-block;
	background: var(--cbfs-primary);
	color: #fff;
	padding: 10px 24px;
	border-radius: 6px;
	text-decoration: none;
	font-weight: 600;
	font-size: 14px;
}

/* Dots only - no prev/next arrow buttons, slider is swipe/drag only */
.cbfs-dots {
	position: absolute;
	bottom: 14px;
	left: 0; right: 0;
	display: flex;
	justify-content: center;
	gap: 8px;
	z-index: 5;
}
.cbfs-dot {
	width: 9px; height: 9px;
	border-radius: 50%;
	background: rgba(255,255,255,.6);
	cursor: pointer;
}
.cbfs-dot.active { background: #fff; }

/* =============== Flash Sale Section =============== */
.cbfs-flashsale-section {
	margin: 40px 0;
	padding: 24px 16px;
	background: #fafafa;
	border-radius: 10px;
}
.cbfs-flashsale-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 22px;
}
.cbfs-flashsale-title {
	font-size: clamp(20px, 3vw, 28px);
	margin: 0;
	font-weight: 700;
	color: var(--cbfs-dark);
}

.cbfs-countdown { display: flex; gap: 8px; }
.cbfs-countdown { animation: cbfs-countdown-glow 2.2s ease-in-out infinite; border-radius: 8px; }
.cbfs-count-box {
	background: var(--cbfs-dark);
	color: #fff;
	border-radius: 6px;
	min-width: 52px;
	padding: 6px 4px;
	text-align: center;
	transform: scale(1);
}
.cbfs-count-box span { display: block; font-size: 18px; font-weight: 700; line-height: 1; }
.cbfs-count-box small { font-size: 10px; opacity: .75; text-transform: uppercase; }

/* Whole countdown gently glows to signal urgency. */
@keyframes cbfs-countdown-glow {
	0%, 100% { box-shadow: 0 0 0 rgba(232, 93, 154, 0); }
	50% { box-shadow: 0 0 14px rgba(232, 93, 154, .45); }
}

/* Each box "ticks" with a quick flip/bounce the instant its own value changes
   (JS toggles this class) - only the box(es) that actually changed animate,
   not the whole row, so it reads like a real ticking clock. */
@keyframes cbfs-tick-flip {
	0%   { transform: scale(1) translateY(0); }
	35%  { transform: scale(1.18) translateY(-3px); background: var(--cbfs-primary); }
	100% { transform: scale(1) translateY(0); }
}
.cbfs-count-box.cbfs-tick {
	animation: cbfs-tick-flip .45s ease;
}

/* Swipe/scroll only carousel, no nav arrows */
.cbfs-product-carousel { position: relative; }
.cbfs-carousel-track {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 6px;
}
.cbfs-carousel-track::-webkit-scrollbar { height: 6px; }
.cbfs-carousel-track::-webkit-scrollbar-thumb { background: #ddd; border-radius: 10px; }

/* Product card - matches the floating cart-icon + top-left badge reference design */
.cbfs-product-card {
	flex: 0 0 auto;
	width: 220px;
	scroll-snap-align: start;
	background: #fff;
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid #eee;
	transition: box-shadow .2s ease, transform .2s ease;
}
.cbfs-product-card:hover { box-shadow: 0 10px 25px rgba(0,0,0,.08); transform: translateY(-3px); }

.cbfs-card-image {
	position: relative;
	display: block;
	overflow: hidden;
	background: #f8f8f8;
	aspect-ratio: 1 / 1;
}
.cbfs-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .35s ease;
}
.cbfs-product-card:hover .cbfs-card-image img { transform: scale(1.06); }

.cbfs-sale-badge {
	position: absolute;
	top: 10px; left: 10px;
	background: var(--cbfs-primary);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	padding: 4px 9px;
	border-radius: 20px;
	z-index: 2;
}

/* Floating round cart-icon button, top-right of the image */
.cbfs-cart-btn {
	position: absolute;
	top: 10px; right: 10px;
	z-index: 2;
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	color: var(--cbfs-dark);
	border-radius: 50%;
	box-shadow: 0 2px 8px rgba(0,0,0,.18);
	transition: background .2s ease, color .2s ease, transform .2s ease;
}
.cbfs-cart-btn:hover { background: var(--cbfs-primary); color: #fff; }
.cbfs-cart-btn.loading { opacity: .6; pointer-events: none; }
.cbfs-cart-btn.added { background: var(--cbfs-primary); color: #fff; transform: scale(1.08); }

.cbfs-card-body { padding: 12px 14px 16px; }
.cbfs-card-title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 14px;
	font-weight: 600;
	color: var(--cbfs-dark);
	text-decoration: none;
	min-height: 38px;
	margin-bottom: 6px;
}
.cbfs-card-price { font-size: 15px; }
.cbfs-card-price del { color: #999; font-weight: 400; margin-right: 6px; font-size: 13px; }
.cbfs-card-price ins { color: var(--cbfs-primary); font-weight: 700; text-decoration: none; }

@media (max-width: 480px) {
	.cbfs-product-card { width: 160px; }
	.cbfs-flashsale-header { flex-direction: column; align-items: flex-start; }
}