/* ==========================================================================
   Cobalt Aurora - product catalog archive
   Loaded only on the shop archive and product taxonomy archives.
   --------------------------------------------------------------------------
   The previous build let Astra's full-width container through with no gutter,
   so the page heading sat at x=0 and read as clipped, and Astra's #primary
   margin stacked with the header padding for ~132px of dead space. The
   template now owns a .bcp-wrap container; these rules handle the rest.
   ========================================================================== */

/* 1. The grid: 4 / 3 / 2 / 1 -------------------------------------------------- */

.bcp-catgrid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--bcp-md);
}

@media (max-width: 1279px) {
	.bcp-catgrid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 1023px) {
	.bcp-catgrid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Declared collapse: two up on larger phones, one on small ones. */
@media (max-width: 539px) {
	.bcp-catgrid {
		grid-template-columns: 1fr;
	}
}

/* 2. The card ------------------------------------------------------------------ */

.bcp .bcp-pcard2 {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background: var(--bcp-surface);
	border: 1px solid var(--bcp-line);
	border-radius: var(--bcp-r-md);
	box-shadow: var(--bcp-shadow);
	transition: border-color var(--bcp-t), box-shadow var(--bcp-t), transform var(--bcp-t);
}

.bcp .bcp-pcard2:hover {
	border-color: rgba(49, 91, 255, 0.45);
	box-shadow: var(--bcp-shadow-lift);
	transform: translateY(-3px);
}

/* Consistent image height on every card, whatever the source asset. */
.bcp-pcard2__media {
	display: block;
	aspect-ratio: 8 / 5;
	overflow: hidden;
	background: var(--bcp-deep);
	border-bottom: 1px solid var(--bcp-line);
}

.bcp .bcp-pcard2__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.bcp .bcp-pcard2:hover .bcp-pcard2__img {
	transform: scale(1.04);
}

.bcp-pcard2__fallback {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	background: var(--bcp-grad-deep);
}

.bcp-pcard2__body {
	display: flex;
	flex-direction: column;
	gap: 9px;
	padding: var(--bcp-md);
	flex: 1 1 auto;
}

.bcp-pcard2__provider {
	font-size: 0.6875rem;
	letter-spacing: 0.07em;
}

.bcp .bcp-pcard2__title {
	font-size: var(--bcp-text-base);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.25;
	margin: 0;
	padding: 0;
}

.bcp .bcp-pcard2__title a,
.bcp .bcp-pcard2__title a:visited {
	color: var(--bcp-ink);
	text-decoration: none;
}

.bcp .bcp-pcard2__title a:hover {
	color: var(--bcp-accent);
}

.bcp-pcard2__blurb {
	font-size: var(--bcp-text-xs);
	line-height: 1.55;
	color: var(--bcp-muted);
	margin: 0;
}

.bcp-pcard2__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bcp-sm);
	margin-top: auto;
	padding-top: var(--bcp-sm);
	border-top: 1px solid var(--bcp-line);
}

.bcp-pcard2__price .bcp-eyebrow {
	display: block;
	font-size: 0.625rem;
	letter-spacing: 0.07em;
	color: var(--bcp-muted);
}

.bcp-pcard2__price strong {
	font-family: var(--bcp-font-display);
	font-size: var(--bcp-text-lg);
	font-weight: 800;
	letter-spacing: -0.025em;
	color: var(--bcp-accent-deep);
	font-variant-numeric: tabular-nums;
}

.bcp-pcard2__price strong :is(.woocommerce-Price-amount, .woocommerce-Price-currencySymbol, bdi) {
	font: inherit;
	color: inherit;
}

.bcp-pcard2__actions {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 7px;
}

/* Compact buttons inside a card. */
.bcp .bcp-pcard2__actions .bcp-btn,
.bcp .bcp-pcard2 a.bcp-pcard2__cart,
.bcp .bcp-pcard2 a.bcp-pcard2__view,
.bcp .bcp-pcard2 a.bcp-pcard2__tg {
	padding: 10px 14px;
	font-size: var(--bcp-text-xs);
	font-weight: 700;
}

/* WooCommerce adds its own loop-button classes; keep ours winning. */
.bcp .bcp-pcard2 a.bcp-pcard2__cart,
.bcp .bcp-pcard2 a.bcp-pcard2__cart:visited {
	color: var(--bcp-accent-ink);
	background: var(--bcp-grad);
	border-color: transparent;
	box-shadow: 0 6px 16px rgba(49, 91, 255, 0.24);
	text-align: center;
}

.bcp .bcp-pcard2 a.bcp-pcard2__cart:hover {
	color: var(--bcp-accent-ink);
	filter: saturate(1.1) brightness(1.06);
}

.bcp .bcp-pcard2 a.added_to_cart {
	grid-column: 1 / -1;
	font-size: var(--bcp-text-xs);
	font-weight: 600;
	text-align: center;
	text-decoration: underline;
}

/* Telegram action: full width, visually distinct from the cart action. */
.bcp .bcp-pcard2 a.bcp-pcard2__tg,
.bcp .bcp-pcard2 a.bcp-pcard2__tg:visited {
	display: flex;
	width: 100%;
	color: var(--bcp-accent-deep);
	background: var(--bcp-accent-soft);
	border-color: transparent;
}

.bcp .bcp-pcard2 a.bcp-pcard2__tg:hover {
	color: #fff;
	background: var(--bcp-grad-cyan);
}
