/* Shared front-end + editor styles */

.bbt-carousel {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.bbt-carousel__viewport {
	overflow: hidden;
	outline: none;
}

.bbt-carousel__track {
	display: flex;
	will-change: transform;
	transform: translate3d(0,0,0);
}

.bbt-carousel__track--smooth {
	transition: transform 300ms ease;
}

.bbt-carousel__slide {
	margin: 0;
	position: relative;
}

.bbt-carousel__slide img {
	display: block;
	width: 100%;
	height: auto;
}

.bbt-carousel__caption {
	padding: 10px 12px;
	font-size: 14px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.bbt-carousel__media {
	position: relative;
}

.bbt-carousel__badge {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	display: inline-block;
	padding: 6px 10px;
	border-radius: 999px;
	font-size: 12px;
	line-height: 1;
	background: rgba(0,0,0,0.8);
	color: #fff;
}

.bbt-carousel__title {
	font-weight: 600;
	margin-bottom: 6px;
}

.bbt-carousel__price {
	margin-bottom: 10px;
	font-size: 14px;
}

.bbt-carousel__cart {
	display: inline-block;
	text-decoration: none;
}

/* Arrows */
.bbt-carousel__prev,
.bbt-carousel__next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 40px;
	height: 40px;
	border-radius: 999px;
	border: 1px solid rgba(0,0,0,0.2);
	background: rgba(255,255,255,0.9);
	cursor: pointer;
}

.bbt-carousel__prev { left: 10px; }
.bbt-carousel__next { right: 10px; }

.bbt-carousel__prev:disabled,
.bbt-carousel__next:disabled {
	opacity: 0.4;
	cursor: default;
}

.bbt-carousel__prev::before,
.bbt-carousel__next::before {
	content: "";
	display: block;
	width: 10px;
	height: 10px;
	border-top: 2px solid rgba(0,0,0,0.8);
	border-right: 2px solid rgba(0,0,0,0.8);
	margin: 0 auto;
}

.bbt-carousel__prev::before { transform: rotate(-135deg); }
.bbt-carousel__next::before { transform: rotate(45deg); }

/* Dots */
.bbt-carousel__dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 10px;
	display: flex;
	gap: 8px;
	justify-content: center;
	z-index: 2;
}

.bbt-carousel__dot {
	width: 10px;
	height: 10px;
	border-radius: 999px;
	border: 1px solid rgba(0,0,0,0.25);
	background: rgba(255,255,255,0.9);
	cursor: pointer;
}

.bbt-carousel__dot[aria-current="true"] {
	transform: scale(1.15);
}

/* Editor UI */
.bbt-carousel-editor {
	border: 1px dashed rgba(0,0,0,0.2);
	padding: 12px;
	border-radius: 8px;
}

.bbt-carousel-editor__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.bbt-carousel-editor__empty {
	margin: 12px 0 0;
}

.bbt-carousel-editor__list {
	margin-top: 12px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.bbt-carousel-editor__item {
	display: grid;
	grid-template-columns: 160px 1fr auto;
	gap: 12px;
	align-items: start;
	padding: 12px;
	border: 1px solid rgba(0,0,0,0.1);
	border-radius: 10px;
	background: #fff;
}

.bbt-carousel-editor__thumb img {
	width: 160px;
	height: auto;
	display: block;
	border-radius: 8px;
	border: 1px solid rgba(0,0,0,0.08);
}

.bbt-carousel-editor__actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.bbt-carousel-editor__hint {
	margin-top: 10px;
	font-size: 12px;
	opacity: 0.75;
}