/* ==========================================================================
   BS Marquee – core styles
   ========================================================================== */

/* --------------------------------------------------------------------------
   Keyframes
   -------------------------------------------------------------------------- */
@keyframes bs-mq-h {
	from { transform: translateX(0); }
	to   { transform: translateX(var(--bs-mq-tx, -1000px)); }
}

@keyframes bs-mq-v {
	from { transform: translateY(0); }
	to   { transform: translateY(var(--bs-mq-ty, -1000px)); }
}

/* --------------------------------------------------------------------------
   Wrapper
   -------------------------------------------------------------------------- */
.bs-marquee-wrapper {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	width: 100%;
}

/* --------------------------------------------------------------------------
   Track  –  clips the scrolling content
   -------------------------------------------------------------------------- */
.bs-marquee-track {
	display: flex;
	overflow: hidden;
	width: 100%;
	flex: 1 1 auto;
}

/* --------------------------------------------------------------------------
   List  –  the animated strip (created + cloned by JS)
   -------------------------------------------------------------------------- */
.bs-marquee-list {
	display: flex;
	flex-shrink: 0;
	will-change: transform;
}

/* Horizontal (default) */
.bs-marquee--horizontal .bs-marquee-list {
	flex-direction: row;
	animation: bs-mq-h var(--bs-mq-dur, 20s) linear infinite;
}

.bs-marquee--dir-right .bs-marquee-list {
	animation-direction: reverse;
}

/* Vertical */
.bs-marquee--vertical .bs-marquee-track {
	flex-direction: column;
	height: var(--bs-mq-track-h, 300px);
}

.bs-marquee--vertical .bs-marquee-list {
	flex-direction: column;
	animation: bs-mq-v var(--bs-mq-dur, 20s) linear infinite;
}

.bs-marquee--dir-down .bs-marquee-list {
	animation-direction: reverse;
}

/* Pause / reverse on hover */
.bs-marquee--pause-hover:hover   .bs-marquee-list { animation-play-state: paused; }
.bs-marquee--reverse-hover:hover .bs-marquee-list { animation-direction: reverse; }

/* --------------------------------------------------------------------------
   Items group  –  one original set of items (JS clones this)
   -------------------------------------------------------------------------- */
.bs-marquee-items {
	display: flex;
	flex-shrink: 0;
}

.bs-marquee--horizontal .bs-marquee-items {
	flex-direction: row;
	align-items: center;
}

.bs-marquee--vertical .bs-marquee-items {
	flex-direction: column;
}

/* --------------------------------------------------------------------------
   Single item
   -------------------------------------------------------------------------- */
.bs-marquee-item {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	white-space: nowrap;
	cursor: default;
	text-decoration: none;
	gap: 8px;
}

a.bs-marquee-item {
	cursor: pointer;
}

a.bs-marquee-item:hover {
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   Separator
   -------------------------------------------------------------------------- */
.bs-marquee-separator {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
}

.bs-marquee-separator-dot {
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
}

.bs-marquee-separator-line {
	display: inline-block;
	width: 1px;
	height: 1em;
	background: currentColor;
}

/* --------------------------------------------------------------------------
   Gradient overlays
   -------------------------------------------------------------------------- */
.bs-marquee-gradient {
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 2;
	pointer-events: none;
	width: 100px; /* overridden by Elementor selector */
}

.bs-marquee--horizontal .bs-marquee-gradient--start {
	left: 0;
	background: linear-gradient(to right, var(--bs-mq-gc, #fff) 0%, transparent 100%);
}

.bs-marquee--horizontal .bs-marquee-gradient--end {
	right: 0;
	background: linear-gradient(to left, var(--bs-mq-gc, #fff) 0%, transparent 100%);
}

.bs-marquee--vertical .bs-marquee-gradient {
	left: 0;
	right: 0;
	width: auto;
	height: 80px; /* overridden by Elementor selector */
}

.bs-marquee--vertical .bs-marquee-gradient--start {
	top: 0;
	bottom: auto;
	background: linear-gradient(to bottom, var(--bs-mq-gc, #fff) 0%, transparent 100%);
}

.bs-marquee--vertical .bs-marquee-gradient--end {
	bottom: 0;
	top: auto;
	background: linear-gradient(to top, var(--bs-mq-gc, #fff) 0%, transparent 100%);
}

/* --------------------------------------------------------------------------
   Image Marquee
   -------------------------------------------------------------------------- */
.bs-marquee-image-item {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.bs-marquee-image-item img {
	display: block;
	max-width: none;
	width: auto;
	height: var(--bs-mq-img-h, 60px);
	object-fit: contain;
	transition: filter 0.35s ease, opacity 0.35s ease, transform 0.35s ease;
}

/* Grayscale effect */
.bs-image-marquee--grayscale .bs-marquee-image-item img {
	filter: grayscale(100%);
	opacity: 0.65;
}

.bs-image-marquee--grayscale .bs-marquee-image-item:hover img {
	filter: grayscale(0%);
	opacity: 1;
}

/* Scale on hover */
.bs-image-marquee--scale-hover .bs-marquee-image-item:hover img {
	transform: scale(1.08);
}

/* --------------------------------------------------------------------------
   Post / Product Card Marquee
   -------------------------------------------------------------------------- */
.bs-marquee-card {
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	overflow: hidden;
	text-decoration: none;
	width: var(--bs-mq-card-w, 260px);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.bs-marquee-card:hover {
	text-decoration: none;
	transform: translateY(-3px);
}

.bs-marquee-card__thumb {
	position: relative;
	overflow: hidden;
	height: var(--bs-mq-card-img-h, 180px);
	flex-shrink: 0;
	background: #f5f5f5;
}

.bs-marquee-card__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.35s ease;
}

.bs-marquee-card:hover .bs-marquee-card__thumb img {
	transform: scale(1.05);
}

.bs-marquee-card__badge {
	position: absolute;
	top: 10px;
	left: 10px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	padding: 4px 8px;
	border-radius: 3px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

.bs-marquee-card__badge--sale {
	background: #e44c4c;
	color: #fff;
}

.bs-marquee-card__badge--category {
	background: rgba(0,0,0,.55);
	color: #fff;
}

.bs-marquee-card__body {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: 14px 16px 16px;
}

.bs-marquee-card__title {
	margin: 0 0 6px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.bs-marquee-card__meta {
	font-size: 12px;
	color: #888;
	margin-bottom: 6px;
}

.bs-marquee-card__excerpt {
	font-size: 13px;
	color: #666;
	line-height: 1.5;
	margin-bottom: 10px;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

/* Price */
.bs-marquee-card__price {
	font-size: 15px;
	font-weight: 700;
	color: #333;
	margin-bottom: 8px;
}

.bs-marquee-card__price del {
	font-size: 12px;
	font-weight: 400;
	color: #aaa;
	margin-inline-end: 4px;
}

/* Star rating */
.bs-marquee-card__rating {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-bottom: 8px;
}

.bs-marquee-card__stars {
	display: inline-flex;
	color: #f5a623;
	font-size: 13px;
}

.bs-marquee-card__stars svg {
	width: 13px;
	height: 13px;
	fill: currentColor;
}

.bs-marquee-card__rating-count {
	font-size: 12px;
	color: #888;
}

/* Add to cart / read more button */
.bs-marquee-card__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: auto;
	padding: 8px 14px;
	border-radius: 4px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	border: none;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease;
	white-space: nowrap;
	background: #333;
	color: #fff;
}

.bs-marquee-card__btn:hover {
	background: #555;
	color: #fff;
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   Prevent interference with WooCommerce global styles
   -------------------------------------------------------------------------- */
.bs-marquee-wrapper *,
.bs-marquee-wrapper *::before,
.bs-marquee-wrapper *::after {
	box-sizing: border-box;
}

.bs-marquee-wrapper img {
	max-width: none;
}

/* ==========================================================================
   BS Marquee – Extended Widget Styles (v1.1.0)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Shared scroll-trigger hidden state
   -------------------------------------------------------------------------- */
.bs-marquee-wrapper[data-scroll-trigger="true"] .bs-marquee-list {
	animation-play-state: paused;
}
.bs-marquee-wrapper.bs-mq--triggered .bs-marquee-list {
	animation-play-state: running;
}

/* --------------------------------------------------------------------------
   Testimonial Marquee  .bs-mq-tc
   -------------------------------------------------------------------------- */
.bs-mq-tc {
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	overflow: hidden;
	text-decoration: none;
	width: 320px;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 2px 16px rgba(0,0,0,.08);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.bs-mq-tc:hover { transform: translateY(-3px); text-decoration: none; }
.bs-mq-tc__body { padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.bs-mq-tc__stars { color: #f5a623; font-size: 14px; letter-spacing: 1px; }
.bs-mq-tc__review { margin: 0; font-size: 14px; line-height: 1.6; color: #444; }
.bs-mq-tc__footer { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.bs-mq-tc__avatar {
	width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
	display: flex; align-items: center; justify-content: center;
	font-size: 18px; font-weight: 700; background: #7c3aed; color: #fff;
}
.bs-mq-tc__info { flex: 1; min-width: 0; }
.bs-mq-tc__name { font-size: 13px; font-weight: 700; color: #1e293b; display: flex; align-items: center; gap: 4px; }
.bs-mq-tc__verified { color: #10b981; font-size: 11px; }
.bs-mq-tc__desig { font-size: 12px; color: #64748b; margin-top: 1px; }
.bs-mq-tc__source-icon { margin-left: auto; font-size: 18px; color: #94a3b8; }

/* --------------------------------------------------------------------------
   Video Marquee  .bs-mq-vc
   -------------------------------------------------------------------------- */
.bs-mq-vc {
	display: flex; flex-direction: column; flex-shrink: 0; cursor: pointer;
	width: 280px; overflow: hidden; border-radius: 12px;
	background: #000; transition: transform 0.25s ease;
}
.bs-mq-vc:hover { transform: scale(1.02); }
.bs-mq-vc__thumb {
	position: relative; height: 160px; overflow: hidden;
	display: flex; align-items: center; justify-content: center;
}
.bs-mq-vc__thumb img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.bs-mq-vc__play {
	position: relative; z-index: 1;
	width: 52px; height: 52px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: rgba(0,0,0,.55); color: #fff;
	transition: background 0.2s ease, transform 0.2s ease;
}
.bs-mq-vc:hover .bs-mq-vc__play { background: rgba(124,58,237,.9); transform: scale(1.1); }
.bs-mq-vc__duration {
	position: absolute; bottom: 8px; right: 8px;
	background: rgba(0,0,0,.7); color: #fff; font-size: 11px;
	padding: 2px 6px; border-radius: 3px;
}
.bs-mq-vc__title { padding: 10px 12px; font-size: 13px; font-weight: 600; color: #fff; }

/* Lightbox overlay */
.bs-lightbox-overlay {
	position: fixed; inset: 0; z-index: 999999;
	background: rgba(0,0,0,.92);
	display: flex; align-items: center; justify-content: center;
	opacity: 0; pointer-events: none;
	transition: opacity 0.3s ease;
}
.bs-lightbox-overlay.is-open { opacity: 1; pointer-events: auto; }
.bs-lightbox-overlay iframe { max-width: 90vw; max-height: 85vh; width: 960px; height: 540px; border: 0; border-radius: 8px; }
.bs-lightbox-close {
	position: absolute; top: 20px; right: 24px;
	font-size: 32px; color: #fff; cursor: pointer;
	background: none; border: none; line-height: 1;
	transition: color 0.2s;
}
.bs-lightbox-close:hover { color: #7c3aed; }

/* --------------------------------------------------------------------------
   News Ticker  .bs-nt
   -------------------------------------------------------------------------- */
.bs-nt-bar {
	display: flex; align-items: stretch;
	overflow: hidden; position: relative;
	background: #1a1a2e;
}
.bs-nt-label {
	display: flex; align-items: center; gap: 6px;
	padding: 10px 16px; font-size: 12px; font-weight: 700;
	text-transform: uppercase; letter-spacing: 0.5px;
	background: #e74c3c; color: #fff; flex-shrink: 0; white-space: nowrap;
}
.bs-nt-bar .bs-marquee-wrapper { flex: 1; min-width: 0; }
.bs-nt-item { font-size: 14px; white-space: nowrap; cursor: pointer; color: #fff; }
a.bs-nt-item:hover { text-decoration: underline; }
.bs-nt-sep { padding: 0 16px; color: rgba(255,255,255,.4); user-select: none; }
.bs-nt-badge {
	display: inline-block; padding: 2px 6px; border-radius: 3px;
	font-size: 10px; font-weight: 700; text-transform: uppercase;
	background: #f39c12; color: #fff; margin-right: 6px;
}

/* --------------------------------------------------------------------------
   Animated Headline  .bs-ah
   -------------------------------------------------------------------------- */
.bs-ah { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25em; }
.bs-ah__static { display: inline; }
.bs-ah__animated-wrap { display: inline-flex; align-items: center; gap: 2px; position: relative; }
.bs-ah__word { display: inline-block; color: #7c3aed; transition: opacity 0.3s ease; }

/* Cursor blink */
.bs-ah__cursor {
	display: inline-block; width: 2px; height: 1em;
	background: #7c3aed; margin-left: 1px; vertical-align: text-bottom;
	animation: bs-cursor-blink 0.8s step-end infinite;
}
@keyframes bs-cursor-blink { 0%,100%{opacity:1} 50%{opacity:0} }

/* Flip animation */
@keyframes bs-ah-flip-out { from{transform:rotateX(0)} to{transform:rotateX(-90deg);opacity:0} }
@keyframes bs-ah-flip-in  { from{transform:rotateX(90deg);opacity:0} to{transform:rotateX(0)} }
.bs-ah--flip .bs-ah__word { display: inline-block; backface-visibility: hidden; }

/* Fade animation */
@keyframes bs-ah-fade-out { from{opacity:1;transform:translateY(0)} to{opacity:0;transform:translateY(-10px)} }
@keyframes bs-ah-fade-in  { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }

/* Slide Up animation */
@keyframes bs-ah-slide-out { from{opacity:1;transform:translateY(0)} to{opacity:0;transform:translateY(-20px)} }
@keyframes bs-ah-slide-in  { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }

/* --------------------------------------------------------------------------
   Word Roller  .bs-wr
   -------------------------------------------------------------------------- */
.bs-wr { display: flex; justify-content: center; }
.bs-wr__viewport { overflow: hidden; display: flex; }
.bs-wr__word {
	display: inline-block;
	transition: transform 0.4s cubic-bezier(.22,.61,.36,1), opacity 0.4s ease;
}
.bs-wr__word.is-exiting-up    { transform: translateY(-100%); opacity: 0; }
.bs-wr__word.is-exiting-down  { transform: translateY(100%); opacity: 0; }
.bs-wr__word.is-entering-up   { transform: translateY(100%); opacity: 0; }
.bs-wr__word.is-entering-down { transform: translateY(-100%); opacity: 0; }

/* --------------------------------------------------------------------------
   Marquee Button  .bs-mb
   -------------------------------------------------------------------------- */
.bs-mb-wrap { display: flex; }
.bs-mb {
	position: relative; overflow: hidden;
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 16px 36px; border-radius: 100px;
	font-weight: 600; font-size: 14px; cursor: pointer;
	text-decoration: none; transition: color 0.3s ease;
	background: #7c3aed; color: #fff;
}
.bs-mb--outline { background: transparent; border: 2px solid currentColor; }
.bs-mb--ghost   { background: transparent; }
.bs-mb__label { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; transition: opacity 0.3s ease; }
.bs-mb__scroll {
	position: absolute; inset: 0; z-index: 0;
	display: flex; align-items: center;
	white-space: nowrap; font-size: 13px; font-weight: 600;
	opacity: 0; transform: translateX(60%);
	transition: opacity 0.35s ease, transform 0.35s ease;
}
.bs-mb:hover .bs-mb__label { opacity: 0; }
.bs-mb:hover .bs-mb__scroll { opacity: 1; transform: translateX(-100%); transition: opacity 0.35s ease, transform 3s linear; }
.bs-mb__icon { display: inline-flex; }

/* --------------------------------------------------------------------------
   Image Accordion  .bs-ia
   -------------------------------------------------------------------------- */
.bs-ia {
	display: flex; gap: 4px; overflow: hidden;
	height: 420px; border-radius: 16px;
}
.bs-ia__panel {
	flex: 1; position: relative; overflow: hidden; cursor: pointer;
	transition: flex 0.55s cubic-bezier(.22,.61,.36,1);
	border-radius: 16px;
}
.bs-ia__panel.is-active { flex: 4; }
.bs-ia__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.55s ease; }
.bs-ia__panel.is-active .bs-ia__img { transform: scale(1.03); }
.bs-ia__overlay {
	position: absolute; inset: 0;
	background: var(--bs-ia-ov, rgba(0,0,0,.5));
	transition: opacity 0.4s ease;
}
.bs-ia__panel:not(.is-active) .bs-ia__overlay { opacity: 0.7; }
.bs-ia__content {
	position: absolute; inset: 0;
	display: flex; flex-direction: column; justify-content: flex-end;
	padding: 20px; z-index: 1;
}
.bs-ia__title {
	font-size: 18px; font-weight: 700; color: #fff; white-space: nowrap;
	overflow: hidden; text-overflow: ellipsis;
	transform: translateY(10px); opacity: 0; transition: opacity 0.4s ease 0.1s, transform 0.4s ease 0.1s;
}
.bs-ia__desc {
	font-size: 13px; color: rgba(255,255,255,.8); margin-top: 4px;
	transform: translateY(10px); opacity: 0; transition: opacity 0.4s ease 0.2s, transform 0.4s ease 0.2s;
}
.bs-ia__panel.is-active .bs-ia__title,
.bs-ia__panel.is-active .bs-ia__desc { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   Stacked Slider  .bs-ss
   -------------------------------------------------------------------------- */
.bs-ss { position: relative; }
.bs-ss__deck { position: relative; }
.bs-ss__card {
	position: absolute; inset: 0; height: 420px; border-radius: 20px;
	background-size: cover; background-position: center;
	overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end;
	transition: transform 0.5s cubic-bezier(.22,.61,.36,1), opacity 0.5s ease;
}
.bs-ss__card:nth-child(1) { position: relative; }
.bs-ss__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.8) 0%, transparent 60%); }
.bs-ss__body { position: relative; z-index: 1; padding: 24px; }
.bs-ss__tag {
	display: inline-block; padding: 4px 10px; border-radius: 20px;
	font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
	background: rgba(255,255,255,.2); color: #fff; margin-bottom: 8px;
}
.bs-ss__title { font-size: 20px; font-weight: 700; color: #fff; margin-bottom: 6px; line-height: 1.3; }
.bs-ss__excerpt { font-size: 13px; color: rgba(255,255,255,.75); }
.bs-ss__link { display: inline-block; margin-top: 10px; color: #fff; font-size: 13px; font-weight: 600; text-decoration: none; }
.bs-ss__nav {
	display: flex; justify-content: center; gap: 12px; margin-top: 16px;
}
.bs-ss__prev, .bs-ss__next {
	width: 44px; height: 44px; border-radius: 50%; border: 2px solid rgba(0,0,0,.15);
	background: #fff; cursor: pointer; font-size: 18px;
	display: flex; align-items: center; justify-content: center;
	transition: background 0.2s, color 0.2s;
}
.bs-ss__prev:hover, .bs-ss__next:hover { background: #7c3aed; color: #fff; border-color: #7c3aed; }

/* --------------------------------------------------------------------------
   Card Marquee  .bs-cm-card
   -------------------------------------------------------------------------- */
.bs-cm-card {
	display: flex; flex-direction: column; flex-shrink: 0;
	width: 240px; border-radius: 16px; overflow: hidden;
	background: #fff; box-shadow: 0 2px 12px rgba(0,0,0,.07);
	text-decoration: none; transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.bs-cm-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.bs-cm-card__thumb img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.bs-cm-card__icon-wrap {
	padding: 20px; display: flex; justify-content: center; align-items: center;
}
.bs-cm-card__icon { color: #fff; font-size: 32px; display: flex; }
.bs-cm-card__body { padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 6px; }
.bs-cm-card__title { font-size: 15px; font-weight: 700; color: #1e293b; }
.bs-cm-card__desc  { font-size: 13px; color: #64748b; line-height: 1.5; }
.bs-cm-card__cta   { font-size: 13px; font-weight: 600; color: #7c3aed; margin-top: 4px; }

/* --------------------------------------------------------------------------
   3D Grid Marquee  .bs-3dg
   -------------------------------------------------------------------------- */
.bs-3dg { perspective: 800px; overflow: hidden; height: 500px; }
.bs-3dg__inner {
	display: grid; gap: 12px; height: 100%;
	transform-style: preserve-3d; transform: rotateX(20deg);
}
.bs-3dg__col { overflow: hidden; display: flex; flex-direction: column; }
.bs-3dg__item { flex-shrink: 0; }
.bs-3dg__img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 12px; display: block; }

/* --------------------------------------------------------------------------
   Circular Text  .bs-ct
   -------------------------------------------------------------------------- */
.bs-ct {
	position: relative; display: inline-flex;
	align-items: center; justify-content: center;
	width: 200px; height: 200px;
}
.bs-ct__svg { position: absolute; inset: 0; }
@keyframes bs-ct-spin { to { transform: rotate(360deg); } }
.bs-ct--pause-hover:hover .bs-ct__svg { animation-play-state: paused; }
.bs-ct__path-text { fill: #1e293b; font-size: 13px; }
.bs-ct__center {
	position: relative; z-index: 1;
	display: flex; align-items: center; justify-content: center;
	border-radius: 50%;
}
.bs-ct__center img { border-radius: 50%; object-fit: cover; }
.bs-ct__center-icon { display: flex; color: #7c3aed; }

/* --------------------------------------------------------------------------
   Product Carousel  .bs-pc
   -------------------------------------------------------------------------- */
.bs-pc { position: relative; overflow: hidden; }
.bs-pc__track { display: flex; gap: var(--bs-pc-gap, 20px); transition: transform 0.4s cubic-bezier(.22,.61,.36,1); }
.bs-pc__card {
	flex-shrink: 0; width: calc(25% - var(--bs-pc-gap, 20px) * 3 / 4);
	border-radius: 12px; overflow: hidden;
	background: #fff; box-shadow: 0 2px 12px rgba(0,0,0,.07);
}
.bs-pc__thumb-link { display: block; position: relative; overflow: hidden; }
.bs-pc__thumb { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; transition: transform 0.3s ease; }
.bs-pc__card:hover .bs-pc__thumb { transform: scale(1.05); }
.bs-pc__badge-sale {
	position: absolute; top: 8px; left: 8px;
	background: #e44c4c; color: #fff; font-size: 10px; font-weight: 700;
	padding: 3px 8px; border-radius: 3px;
}
.bs-pc__body { padding: 14px 16px 16px; }
.bs-pc__title { display: block; font-size: 14px; font-weight: 600; color: #1e293b; margin-bottom: 6px; text-decoration: none; }
.bs-pc__title:hover { color: #7c3aed; }
.bs-pc__rating { margin-bottom: 6px; }
.bs-pc__price { font-size: 15px; font-weight: 700; color: #1e293b; margin-bottom: 10px; }
.bs-pc__prev, .bs-pc__next {
	position: absolute; top: 50%; transform: translateY(-50%);
	width: 40px; height: 40px; border-radius: 50%; border: none;
	background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.15);
	cursor: pointer; font-size: 16px; z-index: 2;
	display: flex; align-items: center; justify-content: center;
	transition: background 0.2s, color 0.2s;
}
.bs-pc__prev { left: 8px; }
.bs-pc__next { right: 8px; }
.bs-pc__prev:hover, .bs-pc__next:hover { background: #7c3aed; color: #fff; }
.bs-pc__dots { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
.bs-pc__dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(0,0,0,.2); cursor: pointer; }
.bs-pc__dot.is-active { background: #7c3aed; }

/* --------------------------------------------------------------------------
   Product Category Marquee  .bs-pcm-card
   -------------------------------------------------------------------------- */
.bs-pcm-card {
	display: flex; flex-direction: column; flex-shrink: 0;
	width: 160px; border-radius: 12px; overflow: hidden;
	text-decoration: none; transition: transform 0.25s ease;
	background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.07);
}
.bs-pcm-card:hover { transform: translateY(-3px); }
.bs-pcm-card__thumb { height: 140px; overflow: hidden; }
.bs-pcm-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.bs-pcm-card:hover .bs-pcm-card__thumb img { transform: scale(1.05); }
.bs-pcm-card__body { padding: 12px 14px; }
.bs-pcm-card__name  { font-size: 14px; font-weight: 600; color: #1e293b; }
.bs-pcm-card__count { font-size: 12px; color: #64748b; margin-top: 2px; }

/* --------------------------------------------------------------------------
   Social Feed Marquee  .bs-sm-card
   -------------------------------------------------------------------------- */
.bs-sm-card {
	display: flex; flex-direction: column; justify-content: flex-end;
	flex-shrink: 0; width: 220px; height: 280px; border-radius: 16px;
	overflow: hidden; position: relative; text-decoration: none;
	transition: transform 0.25s ease;
}
.bs-sm-card:hover { transform: scale(1.03); }
.bs-sm-card__thumb { position: absolute; inset: 0; }
.bs-sm-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.bs-sm-card__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.7) 0%, transparent 60%); }
.bs-sm-card__meta {
	position: absolute; top: 12px; left: 12px; right: 12px;
	display: flex; justify-content: space-between; align-items: center; z-index: 1;
}
.bs-sm-card__platform { color: #fff; font-size: 20px; drop-shadow: 0 1px 3px rgba(0,0,0,.5); }
.bs-sm-card__likes { color: #fff; font-size: 12px; display: flex; align-items: center; gap: 4px; }
.bs-sm-card__caption {
	position: relative; z-index: 1; padding: 12px;
	font-size: 12px; color: rgba(255,255,255,.9); line-height: 1.4;
	overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
}

/* --------------------------------------------------------------------------
   Smart Tabs  .bs-st
   -------------------------------------------------------------------------- */
.bs-st { display: flex; flex-direction: column; }
.bs-st--pos-left  { flex-direction: row; }
.bs-st--pos-right { flex-direction: row-reverse; }
.bs-st--pos-bottom { flex-direction: column-reverse; }
.bs-st__nav { display: flex; flex-shrink: 0; border-bottom: 2px solid rgba(0,0,0,.1); }
.bs-st--pos-left .bs-st__nav, .bs-st--pos-right .bs-st__nav { flex-direction: column; border-bottom: none; border-right: 2px solid rgba(0,0,0,.1); }
.bs-st__tab {
	display: flex; align-items: center; gap: 8px;
	padding: 12px 20px; cursor: pointer; background: none; border: none;
	font-size: 14px; font-weight: 500; color: #64748b; white-space: nowrap;
	border-bottom: 2px solid transparent; margin-bottom: -2px;
	transition: color 0.2s, border-color 0.2s;
}
.bs-st--pos-left .bs-st__tab, .bs-st--pos-right .bs-st__tab { border-bottom: none; border-right: 2px solid transparent; margin-bottom: 0; margin-right: -2px; }
.bs-st__tab:hover { color: #1e293b; }
.bs-st__tab.is-active { color: #7c3aed; border-color: #7c3aed; }
.bs-st__tab-icon { display: inline-flex; font-size: 16px; }
.bs-st__content { flex: 1; }
.bs-st__panel { padding: 24px; }
.bs-st__panel[hidden] { display: none; }
.bs-st__panel.bs-st--fade { animation: bs-st-fade 0.3s ease; }
@keyframes bs-st-fade { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }

/* --------------------------------------------------------------------------
   Animated List  .bs-al
   -------------------------------------------------------------------------- */
.bs-al { display: flex; flex-direction: column; gap: 16px; }
.bs-al--horizontal { flex-direction: row; flex-wrap: wrap; }
.bs-al--grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); }
.bs-al--grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); }
.bs-al__item {
	display: flex; align-items: flex-start; gap: 12px;
	text-decoration: none; transition: opacity 0.3s, transform 0.3s;
}
.bs-al__item.is-hidden { opacity: 0; transform: translateY(20px); }
.bs-al__icon { display: flex; align-items: center; flex-shrink: 0; font-size: 18px; }
.bs-al__body { display: flex; flex-direction: column; }
.bs-al__text { font-size: 15px; font-weight: 500; color: #1e293b; }
.bs-al__sub  { font-size: 13px; color: #64748b; margin-top: 2px; }
@keyframes bs-al-fade-up    { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:none} }
@keyframes bs-al-fade-right { from{opacity:0;transform:translateX(-20px)} to{opacity:1;transform:none} }
@keyframes bs-al-zoom-in    { from{opacity:0;transform:scale(.85)} to{opacity:1;transform:none} }

/* --------------------------------------------------------------------------
   Text Reveal  .bs-tr
   -------------------------------------------------------------------------- */
.bs-tr { display: block; }
.bs-tr__unit { display: inline-block; }
.bs-tr__unit--hidden { color: rgba(0,0,0,.15); }
.bs-tr__unit.is-revealed {
	animation: bs-tr-up 0.6s cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes bs-tr-up { from{opacity:0;transform:translateY(0.4em)} to{opacity:1;transform:none} }

/* Clip mode */
.bs-tr--clip { position: relative; overflow: hidden; }
.bs-tr__clip-bar {
	position: absolute; inset: 0; background: #7c3aed;
	transform: translateX(0); transition: transform 0.7s cubic-bezier(.22,.61,.36,1);
}
.bs-tr--clip.is-revealed .bs-tr__clip-bar { transform: translateX(101%); }

/* --------------------------------------------------------------------------
   Bento Grid  .bs-bg
   -------------------------------------------------------------------------- */
.bs-bg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; grid-auto-rows: 160px; }
.bs-bg__cell {
	position: relative; overflow: hidden; border-radius: 16px;
	padding: 24px; display: flex; flex-direction: column; justify-content: flex-end;
	background: #f8fafc; transition: transform 0.25s ease, box-shadow 0.25s ease;
}
a.bs-bg__cell:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.1); text-decoration: none; }
.bs-bg__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bs-bg__icon { font-size: 32px; margin-bottom: 12px; display: flex; }
.bs-bg__stat { font-size: 36px; font-weight: 800; color: #fff; line-height: 1; margin-bottom: 6px; }
.bs-bg__title { font-size: 16px; font-weight: 700; color: #1e293b; position: relative; z-index: 1; }
.bs-bg__desc  { font-size: 13px; color: #64748b; margin-top: 4px; position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   Advanced Testimonial Marquee  .bs-atm
   -------------------------------------------------------------------------- */
.bs-atm-multi-wrapper { display: flex; flex-direction: column; gap: 20px; }
.bs-atm-card {
	display: flex; flex-direction: column; flex-shrink: 0;
	width: 340px; border-radius: 16px; overflow: hidden;
	background: #fff; box-shadow: 0 2px 16px rgba(0,0,0,.08);
	padding: 24px; gap: 10px;
	transition: transform 0.25s ease;
}
a.bs-atm-card:hover { transform: translateY(-3px); text-decoration: none; }
.bs-atm-card__stars { color: #f5a623; font-size: 14px; letter-spacing: 1px; }
.bs-atm-card__review { margin: 0; font-size: 14px; line-height: 1.6; color: #444; }
.bs-atm-card__footer { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.bs-atm-card__avatar {
	width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
	display: flex; align-items: center; justify-content: center;
	font-size: 18px; font-weight: 700; background: #7c3aed; color: #fff;
}
.bs-atm-card__info { flex: 1; min-width: 0; }
.bs-atm-card__name { font-size: 13px; font-weight: 700; color: #1e293b; display: flex; align-items: center; gap: 4px; }
.bs-atm-card__verified { color: #10b981; font-size: 11px; }
.bs-atm-card__desig  { font-size: 12px; color: #64748b; }
.bs-atm-card__date   { font-size: 11px; color: #94a3b8; }
.bs-atm-card__source { margin-left: auto; font-size: 18px; color: #94a3b8; display: flex; }

/* --------------------------------------------------------------------------
   Animated Background  .bs-mab
   -------------------------------------------------------------------------- */
.bs-mab { position: relative; overflow: hidden; height: 400px; }
.bs-mab__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Animated Gradient */
.bs-mab--gradient {
	background: linear-gradient(135deg, var(--bs-mab-c1, #7c3aed), var(--bs-mab-c2, #0ea5e9), var(--bs-mab-c3, #10b981));
	background-size: 300% 300%;
	animation: bs-mab-gradient var(--bs-mab-speed, 8s) ease infinite;
}
@keyframes bs-mab-gradient { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }

/* --------------------------------------------------------------------------
   Responsive adjustments
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
	.bs-bg { grid-template-columns: repeat(2, 1fr); }
	.bs-pc__card { width: calc(50% - var(--bs-pc-gap, 20px) / 2); }
	.bs-ia { height: 280px; }
	.bs-ia__panel.is-active { flex: 3; }
	.bs-ss__card { height: 300px; }
	.bs-al--grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
	.bs-bg { grid-template-columns: 1fr; }
	.bs-al--grid-2, .bs-al--grid-3 { grid-template-columns: 1fr; }
	.bs-ia { height: 220px; }
}