/*
 * Simple Bangla — the product card and the grids that hold it.
 *
 * Loaded wherever a card can appear: homepage rows, shop and category archives, search
 * results, and the related-products strip.
 *
 * The card is intentionally flat — white fill on the page's cream, 15px radius, no border and
 * no shadow. That is measured from the reference, and it is why a row reads as a set of tiles
 * rather than a stack of floating panels.
 */

/* ------------------------------------------------------------------ *
 * Strip — a headed band of cards, used for related and recently-viewed
 * ------------------------------------------------------------------ */

.sb-strip {
	margin-top: var(--sb-space-7);
}

/* ------------------------------------------------------------------ *
 * Grid
 * ------------------------------------------------------------------ */

.sb-products {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sb-space-4);
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 768px) {
	.sb-products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--sb-space-5);
	}
}

@media (min-width: 1024px) {
	.sb-products {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/*
 * Slider variant: one category, one line. Two cards fit on a phone and three on a desktop;
 * the rest are reached by swiping, by the arrows, or by the five-second autoplay in slider.js.
 *
 * Scroll-snap rather than a carousel library — scrollable by touch, trackpad, scrollbar and
 * keyboard for free, and with JavaScript blocked it stays a plain row showing every product.
 */
.sb-products--slider {
	--sb-slide-gap: var(--sb-space-3);
	--sb-per-view: 2;

	display: flex;
	gap: var(--sb-slide-gap);
	scroll-snap-type: x mandatory;
	padding-bottom: var(--sb-space-2);
}

/*
 * The card width is derived from how many should be visible, so the count lives in one
 * custom property and the arithmetic never has to be repeated per breakpoint.
 */
.sb-products--slider > .sb-card {
	flex: 0 0 calc(
		(100% - (var(--sb-per-view) - 1) * var(--sb-slide-gap)) / var(--sb-per-view)
	);
	scroll-snap-align: start;
}

@media (min-width: 1024px) {
	.sb-products--slider {
		--sb-slide-gap: var(--sb-space-4);
		--sb-per-view: 3;
	}
}

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

.sb-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--sb-radius);
	background: var(--sb-bg);
}

.sb-card__media {
	position: relative;
}

.sb-card__link {
	display: block;
}

/*
 * A fixed 4:3 frame, matching the reference — supplier photos arrive at every ratio, and
 * letting that through is what makes a grid look broken. `contain` rather than `cover`, or a
 * crop-to-fill would lose the ends of a cable and the legs of a tripod.
 */
.sb-card__image,
.sb-card__media img {
	aspect-ratio: 4 / 3;
	width: 100%;
	height: auto;
	object-fit: contain;
	background: var(--sb-bg);
	transition: transform var(--sb-transition);
}

.sb-card:hover .sb-card__image {
	transform: scale(1.04);
}

/*
 * The sale ribbon, measured off the reference: orange, white Lato, and rounded on the
 * top-left and bottom-right only — that diagonal pair is what gives it its tag shape.
 */
.sb-card__badge {
	position: absolute;
	top: 7px;
	left: 20px;
	z-index: 1;
	padding: 5px 10px;
	border-radius: 10px 0 10px 0;
	background: var(--sb-sale-badge);
	color: #ffffff;
	font-family: var(--sb-font-body);
	font-size: var(--sb-text-sm);
	font-weight: 500;
	line-height: 1.3;
}

.sb-card__badge--out {
	top: auto;
	bottom: var(--sb-space-2);
	left: 0;
	border-radius: 0 10px 0 10px;
	background: var(--sb-sale);
}

.sb-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--sb-space-2);
	padding: var(--sb-space-3);
}

.sb-card__title {
	margin: 0;
	font-family: var(--sb-font-body);
	font-size: var(--sb-text-base);
	font-weight: 600;
	line-height: 1.35;
	color: var(--sb-ink);

	/* Two lines, so a long title cannot push one card taller than its neighbours. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.sb-card__title a {
	color: inherit;
	text-decoration: none;
}

.sb-card__price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: var(--sb-space-2);

	/* WooCommerce prints the sale price as <del> then <ins>; the reference reads current
	   price first, so the visual order is flipped here rather than in PHP. */
	flex-direction: row-reverse;
	justify-content: flex-end;
}

.sb-card__price .woocommerce-Price-amount {
	white-space: nowrap;
}

.sb-card__price del {
	color: var(--sb-sale);
	font-size: 0.9375rem; /* 15px */
	text-decoration: line-through;
	opacity: 1;
}

.sb-card__price ins {
	background: none;
	color: var(--sb-ink);
	font-size: var(--sb-text-lg);
	font-weight: 700;
	text-decoration: none;
}

/* An unreduced product prints a bare price with no <ins> to carry the weight. */
.sb-card__price > .woocommerce-Price-amount {
	font-size: var(--sb-text-lg);
	font-weight: 700;
}

.sb-card__cta {
	margin-top: auto;
	padding: var(--sb-space-2) var(--sb-space-3);
	font-size: var(--sb-text-sm);
	text-align: center;
}

/*
 * Two cards on a 360px phone leaves each one about 155px wide. At that size the default
 * price pair and the padding around the button are what overflow first, so both step down.
 */
@media (max-width: 479px) {
	.sb-card__body {
		gap: var(--sb-space-1);
		padding: var(--sb-space-2);
	}

	.sb-card__title {
		font-size: var(--sb-text-sm);
	}

	.sb-card__price {
		gap: var(--sb-space-1);
	}

	.sb-card__price del {
		font-size: var(--sb-text-xs);
	}

	.sb-card__price ins,
	.sb-card__price > .woocommerce-Price-amount {
		font-size: var(--sb-text-base);
	}

	.sb-card__badge {
		left: 10px;
		padding: 3px 8px;
		font-size: var(--sb-text-xs);
	}

	.sb-card__cta {
		padding-inline: var(--sb-space-2);
		font-size: var(--sb-text-xs);
	}
}

/* ------------------------------------------------------------------ *
 * Slider chrome — added by assets/js/slider.js
 * ------------------------------------------------------------------ */

.sb-slider {
	position: relative;
}

.sb-slider__nav {
	position: absolute;
	top: calc(50% - 30px);
	z-index: 2;
	display: none;
	place-items: center;
	width: 38px;
	height: 38px;
	border: 1px solid var(--sb-line);
	border-radius: var(--sb-radius-pill);
	background: var(--sb-bg);
	color: var(--sb-ink);
	box-shadow: var(--sb-shadow);
	transition: opacity var(--sb-transition);
}

.sb-slider__nav--prev {
	left: -8px;
}

.sb-slider__nav--next {
	right: -8px;
}

.sb-slider__nav[disabled] {
	opacity: 0;
	pointer-events: none;
}

/* Arrows are a pointer affordance; touch users already have the swipe. */
@media (min-width: 1024px) and (hover: hover) {
	.sb-slider__nav {
		display: grid;
	}
}

/* -- Page dots -- */

.sb-slider__dots {
	display: flex;
	justify-content: center;
	gap: var(--sb-space-2);
	margin-top: var(--sb-space-3);
}

.sb-slider__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: var(--sb-radius-pill);
	background: var(--sb-line);
	transition: background-color var(--sb-transition), transform var(--sb-transition);
}

.sb-slider__dot.is-active {
	background: var(--sb-brand);
	transform: scale(1.25);
}

/* One page of products needs no arrows and no dots. */
.sb-slider--static .sb-slider__nav,
.sb-slider--static .sb-slider__dots {
	display: none;
}