/**
 * Catalog product cards – see inc/catalog-cards.php.
 * Loaded only on catalog pages (body.bb-catalog-cards).
 */

/* Grid: 2 cards per row, 1 on phones. Overrides Flatsome column classes. */
.bb-catalog-cards .products.row > .bb-card-col {
	flex-basis: 50%;
	max-width: 50%;
	padding-bottom: 20px;
}

@media (max-width: 549px) {
	.bb-catalog-cards .products.row > .bb-card-col {
		flex-basis: 100%;
		max-width: 100%;
	}
}

.bb-card-col {
	container-type: inline-size;
}

/* Slider ([bb_product_cards slider="1"]): 2 cards per view, 1 on phones. */
.bb-cards-slider .bb-card-col {
	width: 50%;
	max-width: 50%;
	flex-basis: auto;
	padding-bottom: 0;
}

@media (max-width: 549px) {
	.bb-cards-slider .bb-card-col {
		width: 100%;
		max-width: 100%;
	}
}

.bb-cards-slider .flickity-page-dots {
	position: static;
	margin-top: 16px;
}

/* Card: text column + image column, always side by side. */
.bb-card {
	--bb-card-fg: #fff;
	--bb-card-cta: #ff9900;
	--bb-card-cta-hover: #e68a00;
	display: grid;
	grid-template-columns: 5fr 7fr;
	min-height: clamp(380px, 85cqi, 500px);
	border-radius: 15px;
	overflow: hidden;
	background: var(--bb-card-bg, #2f8049);
	color: var(--bb-card-fg);
	text-align: center;
}

.bb-card a,
.bb-card a:hover,
.bb-card a:focus {
	color: inherit;
}

/* Text column */
.bb-card__panel {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding: 22px 12px 16px;
	min-width: 0;
}

.bb-card__head {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	line-height: 1.05;
}

.bb-card__label {
	font-size: clamp(17px, 4cqi, 24px);
	font-weight: 600;
	text-transform: uppercase;
}

.bb-card__name {
	font-size: clamp(30px, 7.2cqi, 42px);
	font-weight: 600;
}

.bb-card__body {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 10px;
}

.bb-card__body p,
.bb-card__body ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bb-card__number {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
	font-size: clamp(14px, 2.9cqi, 17px);
}

.bb-card__number strong {
	font-size: clamp(42px, 9.5cqi, 55px);
	font-weight: 600;
	line-height: 1;
}

/* Accent lines: second line under the number, contents title, note. */
.bb-card__number span + span,
.bb-card__contents-title,
.bb-card__note {
	color: var(--bb-card-accent, var(--bb-card-fg));
}

.bb-card--accent .bb-card__number span + span {
	font-weight: 700;
}

.bb-card__contents-title {
	font-size: clamp(12px, 2.4cqi, 14px);
	font-weight: 700;
}

.bb-card__contents li {
	display: flex;
	flex-direction: column;
	margin: 0 0 4px;
	line-height: 1.2;
	font-size: clamp(13px, 2.8cqi, 16px);
}

.bb-card__contents small {
	font-size: 0.78em;
	opacity: 0.9;
}

.bb-card__note {
	font-size: clamp(12px, 2.5cqi, 14px);
	font-weight: 700;
	line-height: 1.2;
}

.bb-card__note + .bb-card__note {
	margin-top: -8px;
}

/* Price + add to cart */
.bb-card__buy {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.bb-card__price,
.bb-card__price .amount {
	color: var(--bb-card-fg);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.2;
}

.bb-card__price del,
.bb-card__price del .amount {
	font-size: 14px;
	font-weight: 400;
	opacity: 0.75;
}

.bb-card__price ins {
	text-decoration: none;
}

.bb-card .bb-card__buy .button {
	margin: 0;
	padding: 0 20px;
	min-height: 36px;
	line-height: 36px;
	border: 0;
	border-radius: 99px;
	background: var(--bb-card-cta);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	text-transform: none;
	box-shadow: none;
}

.bb-card .bb-card__buy .button:hover,
.bb-card .bb-card__buy .button:focus-visible {
	background: var(--bb-card-cta-hover);
	color: #fff;
}

.bb-card .bb-card__buy .added_to_cart {
	color: var(--bb-card-fg);
	font-size: 14px;
	text-decoration: underline;
}

/* Image column */
.bb-card__media {
	position: relative;
	display: block;
	overflow: hidden;
	min-height: 100%;
	background: rgba(255, 255, 255, 0.08);
}

.bb-card__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.bb-card:hover .bb-card__img {
	transform: scale(1.05);
}

.bb-card__stock {
	position: absolute;
	inset: auto 0 0;
	padding: 6px 10px;
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	font-size: 14px;
}

/* Narrow card (phones, tablets): equal columns, compact text. */
@container (max-width: 459px) {
	.bb-card {
		grid-template-columns: 1fr 1fr;
		min-height: 320px;
	}

	.bb-card__panel {
		gap: 10px;
		padding: 16px 8px 14px;
	}

	.bb-card__label { font-size: 16px; }
	.bb-card__name { font-size: 26px; }
	.bb-card__body { gap: 8px; }
	.bb-card__number { font-size: 13px; }
	.bb-card__number strong { font-size: 40px; }
	.bb-card__contents-title,
	.bb-card__note { font-size: 12px; }
	.bb-card__contents li { font-size: 13px; }
	.bb-card__price,
	.bb-card__price .amount { font-size: 16px; }

	.bb-card .bb-card__buy .button {
		padding: 0 14px;
		min-height: 32px;
		line-height: 32px;
		font-size: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bb-card__img {
		transition: none;
	}

	.bb-card:hover .bb-card__img {
		transform: none;
	}
}