/**
 * BioMyst catalog: title block, sticky chip/sort bar, table rows (desktop),
 * horizontal cards + filter sheet (≤900px).
 *
 * One row markup serves both layouts: the wrappers that group cells for the
 * mobile card are display:contents on desktop (and vice versa), so the flex
 * proportions of the reference table survive untouched.
 */

/* ------------------------------------------------------------------ *
 * Title block
 * ------------------------------------------------------------------ */

.bm-catalog__title {
	padding: 36px 0 24px;
}

.bm-catalog__title .bm-kicker {
	margin-bottom: 10px;
}

.bm-catalog__h1 {
	font-size: clamp(28px, 4vw, 40px);
	font-weight: 600;
	letter-spacing: -0.025em;
	line-height: 1.05;
	margin: 0 0 8px;
}

.bm-catalog__sub {
	font-size: 15px;
	color: var(--bm-text-soft);
	max-width: 560px;
}

.bm-catalog__sub-short {
	display: none;
}

/* ------------------------------------------------------------------ *
 * Compliance band — the catalog tunes the shared component's texture
 * ------------------------------------------------------------------ */

.bm-catalog .bm-compliance--boxed::before {
	background-image: radial-gradient(rgba(18, 175, 203, 0.18) 1px, transparent 1.5px);
	background-size: 26px 26px;
}

.bm-catalog .bm-compliance--boxed .bm-compliance__body {
	max-width: 640px;
}

.bm-catalog .bm-compliance--boxed .bm-kicker {
	margin-bottom: 12px;
}

/* ------------------------------------------------------------------ *
 * Sticky filter + sort bar
 * ------------------------------------------------------------------ */

.bm-catbar {
	position: sticky;
	top: var(--bm-header-h);
	z-index: 15;
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	padding: 12px 0;
	background: rgba(237, 243, 246, 0.9);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--bm-border-header);
}

/* Filter/Sort button pair — mobile only. */
.bm-catbar__mobile {
	display: none;
}

.bm-chips {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	flex: 1;
}

.bm-chip {
	height: 34px;
	padding: 0 16px;
	border-radius: var(--bm-r-md);
	font-size: 13px;
	font-weight: 600;
	display: flex;
	align-items: center;
	white-space: nowrap;
	background: var(--bm-surface);
	color: var(--bm-text-mid);
	border: 1px solid var(--bm-border-strong);
	transition: all var(--bm-t);
}

.bm-chip:hover {
	color: var(--bm-ink);
	border-color: var(--bm-border-hover);
}

.bm-chip.is-active {
	background: var(--bm-teal);
	color: #fff;
	border-color: var(--bm-teal);
}

.bm-chip.is-active:hover {
	background: var(--bm-teal-hover);
	border-color: var(--bm-teal-hover);
	color: #fff;
}

.bm-catbar__right {
	display: flex;
	align-items: center;
	gap: 8px;
}

.bm-catbar__count {
	font-family: var(--bm-mono);
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--bm-text-muted);
	white-space: nowrap;
}

.bm-sort {
	display: flex;
	align-items: center;
	gap: 7px;
	height: 34px;
	padding: 0 14px;
	border: 1px solid var(--bm-border-strong);
	border-radius: var(--bm-r-md);
	background: var(--bm-surface);
	font-size: 13px;
	font-weight: 500;
	color: var(--bm-ink);
	white-space: nowrap;
	transition: border-color var(--bm-t);
}

.bm-sort:hover {
	border-color: var(--bm-border-hover);
	color: var(--bm-ink);
}

.bm-sort__key {
	color: var(--bm-text-muted);
	font-size: 12px;
}

/* Sort dropdown (a native <select> styled to the control). */
.bm-sortform {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 34px;
	padding: 0 12px;
	border: 1px solid var(--bm-border-strong);
	border-radius: var(--bm-r-md);
	background: var(--bm-surface);
	transition: border-color var(--bm-t), box-shadow var(--bm-t);
	min-width: 0;
}

.bm-sortform:hover {
	border-color: var(--bm-border-hover);
}

.bm-sortform:focus-within {
	border-color: var(--bm-teal);
	box-shadow: var(--bm-focus-ring);
}

.bm-sortform__key {
	font-size: 12px;
	color: var(--bm-text-muted);
	white-space: nowrap;
	flex: none;
}

.bm-sortform__select {
	appearance: none;
	-webkit-appearance: none;
	border: none;
	outline: none;
	background: transparent;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%238A969C' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right center;
	background-size: 11px 11px;
	padding: 0 18px 0 0;
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	color: var(--bm-ink);
	cursor: pointer;
	min-width: 0;
	max-width: 100%;
	text-overflow: ellipsis;
}

/* The noscript submit only appears when JavaScript is off. */
.bm-sortform__go {
	height: 26px;
	padding: 0 10px;
	border: none;
	border-radius: var(--bm-r-sm);
	background: var(--bm-ink);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
}

/* Mobile count line. */
.bm-catalog__mcount {
	display: none;
}

/* ------------------------------------------------------------------ *
 * Table head (desktop only)
 * ------------------------------------------------------------------ */

.bm-thead {
	display: flex;
	align-items: center;
	padding: 16px 16px 12px;
	font-family: var(--bm-mono);
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--bm-text-muted);
}

.bm-thead__product {
	flex: 2.4;
}

.bm-thead__cell {
	flex: 1;
	text-align: center;
}

.bm-thead__cell--price {
	text-align: right;
}

.bm-thead__spacer {
	width: 96px;
}

/* ------------------------------------------------------------------ *
 * Product rows
 * ------------------------------------------------------------------ */

.bm-rows {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-bottom: 8px;
}

.bm-row {
	display: flex;
	align-items: center;
	background: var(--bm-surface);
	border: 1px solid var(--bm-border);
	border-radius: var(--bm-r-3xl);
	padding: 18px 20px;
	transition: box-shadow var(--bm-t), border-color var(--bm-t);
}

.bm-row:hover {
	box-shadow: var(--bm-shadow-row);
	border-color: #D6E1E6;
}

/* Groups the mobile card's image+name; on desktop it is the "Product" cell. */
.bm-row__product {
	flex: 2.4;
	display: flex;
	align-items: center;
	gap: 18px;
	min-width: 0;
}

/* Groups the mobile badge row; on desktop its children are their own cells. */
.bm-row__badges {
	display: contents;
}

.bm-row__img {
	width: 76px;
	height: 76px;
	flex: none;
	display: block;
}

.bm-row__frame {
	width: 100%;
	height: 100%;
	border-radius: 13px;
	border: 1px solid var(--bm-border-faintest);
}

.bm-row__title {
	min-width: 0;
}

.bm-row__name {
	display: block;
	font-size: 17px;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--bm-ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.bm-row__name:hover {
	color: var(--bm-teal);
}

.bm-row__meta {
	font-family: var(--bm-mono);
	font-size: 11.5px;
	color: var(--bm-text-muted);
	margin-top: 3px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.bm-row__purity {
	flex: 1;
	text-align: center;
}

/* Supplies carry no purity spec (e.g. bacteriostatic water). */
.bm-row__nopurity {
	font-family: var(--bm-mono);
	font-size: 12px;
	color: var(--bm-text-muted);
}

.bm-row__dosage {
	flex: 1;
	text-align: center;
	font-size: 14px;
	color: var(--bm-text-mid);
}

.bm-row__price {
	flex: 1;
	text-align: right;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.3;
}

.bm-row__price del {
	color: var(--bm-text-strike);
	font-weight: 500;
	font-size: 13px;
	margin-right: 6px;
}

.bm-row__price ins {
	text-decoration: none;
}

.bm-row__stock {
	flex: 1;
	text-align: center;
}

.bm-stock__short {
	display: none;
}

.bm-row__action {
	width: 96px;
	display: flex;
	justify-content: flex-end;
}

.bm-row__view {
	height: 38px;
	padding: 0 20px;
	background: var(--bm-ink);
	color: #fff;
	border-radius: var(--bm-r-md);
	font-weight: 600;
	font-size: 13px;
	display: flex;
	align-items: center;
	gap: 7px;
	white-space: nowrap;
	transition: background var(--bm-t);
}

.bm-row__view:hover {
	background: var(--bm-teal);
	color: #fff;
}

/* ------------------------------------------------------------------ *
 * Empty state & tail
 * ------------------------------------------------------------------ */

.bm-catalog__empty {
	text-align: center;
	padding: 60px 0;
	color: var(--bm-text-muted);
	font-size: 15px;
}

.bm-catalog__tail {
	height: 48px;
}

/* ------------------------------------------------------------------ *
 * Pagination
 * ------------------------------------------------------------------ */

.bm-pagination {
	margin-top: 22px;
}

.bm-pagination .nav-links {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.bm-pagination .page-numbers {
	min-width: 34px;
	height: 34px;
	padding: 0 12px;
	border-radius: var(--bm-r-md);
	border: 1px solid var(--bm-border-strong);
	background: var(--bm-surface);
	color: var(--bm-text-mid);
	font-size: 13px;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	transition: all var(--bm-t);
}

.bm-pagination .page-numbers:hover {
	border-color: var(--bm-border-hover);
	color: var(--bm-ink);
}

.bm-pagination .page-numbers.current {
	background: var(--bm-teal);
	border-color: var(--bm-teal);
	color: #fff;
}

.bm-pagination .page-numbers.dots {
	border-color: transparent;
	background: none;
	color: var(--bm-text-muted);
}

/* ------------------------------------------------------------------ *
 * Mobile filter sheet
 * ------------------------------------------------------------------ */

.bm-drawer {
	position: fixed;
	inset: 0;
	z-index: 60;
	display: none;
}

.bm-drawer.is-open {
	display: block;
}

.bm-drawer__scrim {
	position: absolute;
	inset: 0;
	background: rgba(12, 20, 23, 0.44);
	animation: bm-fade 0.2s ease;
}

.bm-drawer__sheet {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--bm-surface);
	border-radius: 24px 24px 0 0;
	padding: 12px 20px 26px;
	box-shadow: var(--bm-shadow-sheet);
	animation: bm-sheet 0.28s cubic-bezier(0.2, 0.7, 0.2, 1);
	max-height: 88vh;
	overflow-y: auto;
}

@keyframes bm-sheet {
	from { transform: translateY(100%); }
	to   { transform: translateY(0); }
}

.bm-drawer__handle {
	width: 40px;
	height: 4px;
	border-radius: 2px;
	background: #D5DEE3;
	margin: 0 auto 14px;
}

.bm-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 18px;
}

.bm-drawer__title {
	font-size: 18px;
	font-weight: 600;
}

.bm-drawer__reset {
	font-size: 13px;
	font-weight: 500;
	color: var(--bm-teal);
}

.bm-drawer__section {
	margin-bottom: 18px;
}

.bm-drawer__label {
	font-family: var(--bm-mono);
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--bm-text-muted);
	margin-bottom: 10px;
}

.bm-drawer__opts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
	gap: 8px;
}

/* Pill radios — real inputs so the sheet submits without JS. */
.bm-pill {
	position: relative;
	display: block;
}

input.bm-pill__input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.bm-pill__face {
	height: 38px;
	padding: 0 8px;
	border-radius: var(--bm-r-lg);
	font-size: 13.5px;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background: var(--bm-surface);
	color: var(--bm-text-mid);
	border: 1.5px solid var(--bm-border-strong);
	transition: all var(--bm-t);
}

input.bm-pill__input:checked + .bm-pill__face {
	background: var(--bm-teal-tint);
	color: var(--bm-teal-hover);
	border-color: var(--bm-teal);
}

input.bm-pill__input:focus-visible + .bm-pill__face {
	box-shadow: var(--bm-focus-ring);
}

/* In-stock checkbox. */
.bm-cb {
	display: flex;
	align-items: center;
	gap: 11px;
	position: relative;
	cursor: pointer;
}

input.bm-cb__input {
	position: absolute;
	left: 0;
	width: 22px;
	height: 22px;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.bm-cb__box {
	width: 22px;
	height: 22px;
	border-radius: 7px;
	border: 1.5px solid var(--bm-radio-off);
	background: var(--bm-surface);
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	transition: all var(--bm-t);
}

.bm-cb__box svg {
	opacity: 0;
	transition: opacity var(--bm-t);
}

input.bm-cb__input:checked + .bm-cb__box {
	background: var(--bm-teal);
	border-color: var(--bm-teal);
}

input.bm-cb__input:checked + .bm-cb__box svg {
	opacity: 1;
}

input.bm-cb__input:focus-visible + .bm-cb__box {
	box-shadow: var(--bm-focus-ring);
}

.bm-cb__text {
	font-size: 14px;
	font-weight: 500;
	color: var(--bm-text-mid);
}

.bm-drawer__apply {
	width: 100%;
	height: 50px;
	margin-top: 4px;
	border: none;
	border-radius: 13px;
	background: var(--bm-teal);
	color: #fff;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: background var(--bm-t);
}

.bm-drawer__apply:hover {
	background: var(--bm-teal-hover);
}

/* ------------------------------------------------------------------ *
 * ≤900px — rows become horizontal cards
 * ------------------------------------------------------------------ */

@media (max-width: 900px) {

	.bm-catalog__title {
		padding: 18px 0 6px;
	}

	.bm-catalog__title .bm-kicker {
		font-size: 10px;
		margin-bottom: 6px;
	}

	.bm-catalog__h1 {
		font-size: 26px;
		letter-spacing: -0.02em;
	}

	.bm-catalog__sub {
		font-size: 13px;
	}

	/* The swap only exists when the archive uses the design's own copy. */
	.bm-catalog__sub--swap .bm-catalog__sub-long {
		display: none;
	}

	.bm-catalog__sub--swap .bm-catalog__sub-short {
		display: inline;
	}

	.bm-catbar {
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
		padding: 10px 0;
		background: rgba(237, 243, 246, 0.94);
	}

	.bm-catbar__mobile {
		display: flex;
		gap: 8px;
	}

	.bm-catbar__mbtn {
		flex: 1;
		height: 40px;
		padding: 0 12px;
		border: 1px solid var(--bm-border-strong);
		border-radius: var(--bm-r-lg);
		background: var(--bm-surface);
		color: var(--bm-ink);
		font-family: inherit;
		font-size: 13.5px;
		font-weight: 600;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 7px;
		cursor: pointer;
		transition: border-color var(--bm-t);
	}

	.bm-catbar__mbtn:hover {
		border-color: var(--bm-border-hover);
		color: var(--bm-ink);
	}

	.bm-catbar__dot {
		width: 7px;
		height: 7px;
		border-radius: 50%;
		background: var(--bm-teal);
		flex: none;
	}

	.bm-catbar__sortkey {
		color: var(--bm-text-muted);
		font-weight: 500;
	}

	.bm-catbar__right {
		display: none;
	}

	/* Chip rail: single line that scrolls internally. min-width:0 lets the flex item
	   shrink to the viewport instead of expanding to its content and pushing the page
	   wide (which caused the whole shop page to scroll sideways). */
	.bm-chips {
		flex-wrap: nowrap;
		overflow-x: auto;
		min-width: 0;
		max-width: 100%;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.bm-chips::-webkit-scrollbar {
		display: none;
	}

	/* Sort dropdown sits beside Filter, each filling half the row. */
	.bm-sortform--m {
		flex: 1;
		height: 40px;
		border-radius: var(--bm-r-lg);
		justify-content: center;
	}

	.bm-sortform--m .bm-sortform__select {
		font-size: 13.5px;
		font-weight: 600;
	}

	.bm-chip {
		padding: 0 15px;
		flex: none;
	}

	.bm-catalog__mcount {
		display: block;
		font-family: var(--bm-mono);
		font-size: 10px;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: var(--bm-text-muted);
		padding: 4px 0 8px;
	}

	.bm-thead {
		display: none;
	}

	.bm-rows {
		gap: 11px;
		padding-bottom: 24px;
	}

	.bm-row {
		display: grid;
		grid-template-columns: 96px minmax(0, 1fr) auto;
		align-items: start;
		padding: 0;
		overflow: hidden;
		box-shadow: var(--bm-shadow-mobile-card);
	}

	/* The card has no lift state; keep the resting shadow under a stray pointer. */
	.bm-row:hover {
		box-shadow: var(--bm-shadow-mobile-card);
		border-color: var(--bm-border);
	}

	/* Promote image + name to grid children of the card. */
	.bm-row__product {
		display: contents;
	}

	.bm-row__img {
		grid-column: 1;
		grid-row: 1 / 4;
		width: 96px;
		height: 100%;
		align-self: stretch;
	}

	.bm-row__frame {
		border-radius: 0;
		border: none;
	}

	.bm-row__title {
		grid-column: 2;
		grid-row: 1;
		padding: 12px 0 0 13px;
	}

	.bm-row__name {
		font-size: 15px;
	}

	.bm-row__meta {
		font-size: 10.5px;
		margin-top: 2px;
	}

	/* The card shows the category only; the SKU stays on the desktop table. */
	.bm-row__sku,
	.bm-row__sep {
		display: none;
	}

	.bm-row__stock {
		grid-column: 3;
		grid-row: 1;
		padding: 12px 13px 0 8px;
		text-align: right;
	}

	.bm-row__stock .bm-stock {
		font-size: 10px;
	}

	/* The card uses the condensed label wherever one was rendered. */
	.bm-stock--swap .bm-stock__long {
		display: none;
	}

	.bm-stock--swap .bm-stock__short {
		display: inline;
	}

	.bm-row__badges {
		display: flex;
		gap: 6px;
		flex-wrap: wrap;
		grid-column: 2 / -1;
		grid-row: 2;
		padding: 7px 13px 0;
	}

	/* Let the pills themselves be the flex items, so an absent purity adds no gap. */
	.bm-row__purity {
		display: contents;
	}

	.bm-row__nopurity {
		display: none;
	}

	.bm-row__purity .bm-purity-pill {
		font-size: 10.5px;
		border-radius: var(--bm-r-sm);
		padding: 3px 7px;
	}

	.bm-row__dosage {
		flex: none;
		font-family: var(--bm-mono);
		font-size: 10.5px;
		color: var(--bm-text-mid);
		background: #F1F5F7;
		border-radius: var(--bm-r-sm);
		padding: 3px 7px;
		text-align: left;
	}

	.bm-row__dosage:empty {
		display: none;
	}

	.bm-row__price {
		grid-column: 2;
		grid-row: 3;
		padding: 9px 0 12px 13px;
		text-align: left;
		font-size: 17px;
	}

	.bm-row__action {
		grid-column: 3;
		grid-row: 3;
		width: auto;
		padding: 9px 13px 12px 8px;
	}

	.bm-row__view {
		height: 32px;
		padding: 0 13px;
		font-size: 12.5px;
		gap: 6px;
	}
}

/* The sheet is a mobile affordance; the desktop bar exposes the same filters. */
@media (min-width: 901px) {
	.bm-drawer {
		display: none !important;
	}
}

/* ---------- Product grid: cards, 4 across on desktop, 3 on tablets, 2 on phones ---------- */
.bm-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
}
.bm-gcard {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	margin: 0;
	border: 1px solid rgba(12, 34, 48, .08);
	border-radius: 16px;
	background: #fff;
	overflow: hidden;
	transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease;
}
.bm-gcard:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 36px -24px rgba(12, 34, 48, .5);
}
.bm-gcard__media {
	position: relative;
	aspect-ratio: 1 / 1;
	background: #e3ebf0;
	overflow: hidden;
}
.bm-gcard__img {
	display: block;
	width: 100%;
	height: 100%;
}
.bm-gcard__img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .45s cubic-bezier(.2, .8, .2, 1);
}
.bm-gcard:hover .bm-gcard__img img {
	transform: scale(1.04);
}
.bm-gcard.is-out .bm-gcard__img img {
	filter: grayscale(.55);
	opacity: .8;
}
.bm-gcard__off,
.bm-gcard__stock {
	position: absolute;
	top: 10px;
	padding: 4px 9px;
	border-radius: 999px;
	font-family: "IBM Plex Mono", monospace;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.2;
}
.bm-gcard__off {
	right: 10px;
	background: var(--bm-ink);
	color: #ffc08a;
}
.bm-gcard__stock {
	left: 10px;
	background: rgba(255, 255, 255, .94);
	color: var(--bm-low-stock);
}
.bm-gcard__stock--out {
	color: var(--bm-out-stock);
}
.bm-gcard__coa {
	position: absolute;
	left: 10px;
	bottom: 10px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	max-width: calc(100% - 20px);
	padding: 5px 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .94);
	box-shadow: 0 2px 8px rgba(12, 34, 48, .1);
	font-family: "IBM Plex Mono", monospace;
	font-size: 11px;
	font-weight: 500;
	color: var(--bm-ink);
	text-decoration: none;
	white-space: nowrap;
}
.bm-gcard__tick {
	color: var(--bm-teal-hover);
	font-weight: 700;
}
.bm-gcard__coalink {
	font-family: "IBM Plex Sans", Arial, sans-serif;
	color: #5c7480;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.bm-gcard__coa:hover .bm-gcard__coalink {
	color: var(--bm-teal-hover);
}
.bm-gcard__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 7px;
	padding: 14px 14px 16px;
}
.bm-gcard__name {
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--bm-ink);
	text-decoration: none;
}
.bm-gcard__name:hover {
	color: var(--bm-teal-hover);
}
.bm-gcard__meta {
	font-family: "IBM Plex Mono", monospace;
	font-size: 11px;
	letter-spacing: .03em;
	color: var(--bm-text-muted);
}
.bm-gcard__price {
	margin-top: auto;
	padding-top: 5px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--bm-ink);
}
.bm-gcard__price del {
	margin-right: 4px;
	font-size: 12.5px;
	font-weight: 400;
	color: var(--bm-text-strike);
}
.bm-gcard__price ins {
	color: #b84e14;
	text-decoration: none;
}
.bm-gcard__price .bm-codetag {
	display: table;
	margin: 6px 0 0;
}
.bm-gcard__actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	margin-top: 7px;
}
.bm-gcard__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	height: 38px;
	padding: 0 10px;
	border: 1px solid transparent;
	border-radius: 999px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.bm-gcard__btn--ghost {
	border-color: var(--bm-border-strong);
	background: #fff;
	color: var(--bm-ink);
}
.bm-gcard__btn--ghost:hover {
	border-color: var(--bm-ink);
	color: var(--bm-ink);
}
.bm-gcard__btn--add {
	background: var(--bm-ink);
	color: #fff;
}
.bm-gcard__btn--add:hover,
.bm-gcard__btn--add:focus-visible {
	background: var(--bm-teal-hover);
	color: #fff;
}
.bm-gcard__btn--add[disabled] {
	opacity: .7;
	cursor: wait;
}
.bm-gcard__btn--off {
	background: #eef2f4;
	color: #8a9aa3;
	cursor: default;
}
.bm-gcard__btn .bm-spinner {
	width: 14px;
	height: 14px;
}
@media (max-width: 1099px) {
	.bm-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 14px;
	}
}
@media (max-width: 767px) {
	.bm-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
		margin-top: 12px;
	}
	.bm-gcard {
		border-radius: 14px;
	}
	.bm-gcard__off,
	.bm-gcard__stock {
		top: 8px;
		padding: 3px 7px;
		font-size: 10px;
	}
	.bm-gcard__off {
		right: 8px;
	}
	.bm-gcard__stock {
		left: 8px;
	}
	.bm-gcard__coa {
		left: 8px;
		bottom: 8px;
		gap: 5px;
		max-width: calc(100% - 16px);
		padding: 4px 8px;
		font-size: 10px;
	}
	.bm-gcard__body {
		gap: 6px;
		padding: 11px 10px 12px;
	}
	.bm-gcard__name {
		font-size: 14px;
	}
	.bm-gcard__meta {
		font-size: 10px;
	}
	.bm-gcard__price {
		font-size: 15.5px;
	}
	.bm-gcard__price del {
		font-size: 11.5px;
	}
	.bm-gcard__actions {
		gap: 6px;
	}
	.bm-gcard__btn {
		height: 36px;
		padding: 0 6px;
		font-size: 12.5px;
	}
}
@media (max-width: 359px) {
	.bm-gcard__coalink {
		display: none;
	}
}
@media (prefers-reduced-motion: reduce) {
	.bm-gcard,
	.bm-gcard__img img {
		transition: none;
	}
	.bm-gcard:hover,
	.bm-gcard:hover .bm-gcard__img img {
		transform: none;
	}
}