/*
 * Bulk Medya UK - section system.
 *
 * Loaded after brand.css. Everything here is prefixed .bm- and is written from
 * scratch rather than overriding the inherited storefront components, which is
 * why it needs almost no !important.
 *
 * The rhythm rule: no two adjacent sections share a treatment.
 *   --plain  flat page background
 *   --band   raised surface slab with hairline edges
 *   split / table / accordion / numbered columns alternate the internal layout
 */

/* ------------------------------------------------------- 1. Primitives */

.bm-section { padding-block: clamp(56px, 7vw, 96px); }

.bm-section--plain { background: var(--dark-bg); }

.bm-section--band {
	background: var(--surface-bg);
	border-block: 1px solid var(--glass-border);
}

.nt-container { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 20px; }
.bm-narrow { max-width: 820px; }

/* The two-tone display heading from the hero, reused site-wide. */
.bm-display {
	margin: 0;
	font-weight: 800;
	line-height: 1.03;
	letter-spacing: -0.03em;
	font-size: clamp(2.25rem, 5.4vw, 3.75rem);
	color: var(--text-strong);
	text-wrap: balance;
}

.bm-display span { display: block; }
.bm-display__accent { color: var(--primary-color); }

.bm-display--sm { font-size: clamp(1.75rem, 3.6vw, 2.75rem); }

.bm-eyebrow {
	display: block;
	margin-bottom: 14px;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--primary-color);
}

.bm-section__head { margin-bottom: clamp(32px, 4vw, 52px); }
.bm-section__head--center { text-align: center; }
.bm-section__head--center .bm-eyebrow { margin-inline: auto; }

.bm-section__head--split {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}

.bm-section__lead {
	margin: 18px 0 0;
	max-width: 62ch;
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--text-muted);
}

.bm-section__head--center .bm-section__lead { margin-inline: auto; }

/* --------------------------------------------------------- 2. Buttons */

/*
 * Two buttons only: a solid primary and an outlined ghost. Everything else was
 * noise. Both are 8px, both are the same height, so a pair sits level.
 */
.bm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 46px;
	padding: 12px 22px;
	border-radius: var(--radius-btn);
	border: 1px solid transparent;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.bm-btn--primary {
	background: var(--primary-color);
	border-color: var(--primary-color);
	color: #fff;
}

.bm-btn--primary:hover,
.bm-btn--primary:focus-visible {
	background: var(--primary-strong);
	border-color: var(--primary-strong);
	color: #fff;
}

.bm-btn--ghost {
	background: transparent;
	border-color: var(--surface-raised);
	color: var(--text-main);
}

.bm-btn--ghost:hover,
.bm-btn--ghost:focus-visible {
	border-color: var(--primary-color);
	color: var(--text-strong);
}

.bm-btn--disabled {
	background: transparent;
	border-color: var(--glass-border);
	color: var(--text-muted);
	cursor: not-allowed;
}

.bm-btn--lg { min-height: 54px; padding: 15px 32px; font-size: 1rem; }

/* WooCommerce's ajax button states. */
.bm-btn--cart.loading { opacity: .6; pointer-events: none; }
.bm-btn--cart.added::after { content: ""; }

/* ------------------------------------------------------------ 3. Hero */

.bm-hero {
	padding-block: clamp(56px, 8vw, 104px);
	background: var(--dark-bg);
	border-bottom: 1px solid var(--glass-border);
}

.bm-hero__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(32px, 5vw, 64px);
	align-items: center;
}

@media (min-width: 900px) {
	.bm-hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
}

.bm-hero__lead {
	margin: 22px 0 0;
	max-width: 58ch;
	font-size: clamp(1rem, 1.25vw, 1.125rem);
	line-height: 1.75;
	color: var(--text-muted);
}

.bm-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 30px;
}

.bm-hero__proof {
	list-style: none;
	margin: 28px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 26px;
}

.bm-hero__proof li {
	position: relative;
	padding-left: 18px;
	font-size: 0.875rem;
	color: var(--text-muted);
}

.bm-hero__proof li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 6px;
	height: 6px;
	margin-top: -3px;
	border-radius: 50%;
	background: var(--primary-color);
}

.bm-hero__media { position: relative; }

.bm-hero__img,
.bm-hero__placeholder {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--border-radius);
	border: 1px solid var(--glass-border);
}

.bm-hero__placeholder {
	display: grid;
	place-items: center;
	padding: 24px;
	background: var(--surface-bg);
	color: var(--text-muted);
	font-size: 0.875rem;
	text-align: center;
}

.bm-hero--page { padding-block: clamp(48px, 6vw, 80px); }

/* ------------------------------------------------- 4. Category cards */

.bm-cat-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

@media (min-width: 768px) { .bm-cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1100px) { .bm-cat-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.bm-cat {
	display: flex;
	flex-direction: column;
	padding: 22px 18px;
	background: var(--surface-bg);
	border: 1px solid var(--glass-border);
	border-radius: var(--border-radius);
	text-decoration: none;
	color: inherit;
	transition: border-color .18s ease, transform .18s ease;
}

.bm-cat:hover { border-color: var(--primary-color); transform: translateY(-3px); }

.bm-cat__icon {
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	margin-bottom: 16px;
	border-radius: 10px;
	background: rgba(253, 119, 2, .12);
	color: var(--primary-color);
	font-size: 1rem;
}

.bm-cat h3 {
	margin: 0 0 8px;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--text-strong);
}

.bm-cat p {
	margin: 0 0 18px;
	font-size: 0.8125rem;
	line-height: 1.6;
	color: var(--text-muted);
}

.bm-cat__go {
	margin-top: auto;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--primary-color);
}

.bm-cat__go i { font-size: .75rem; transition: transform .18s ease; }
.bm-cat:hover .bm-cat__go i { transform: translateX(3px); }

/* ------------------------------------------ 5. Split + checklist */

.bm-split {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(28px, 4vw, 56px);
	align-items: center;
}

@media (min-width: 900px) { .bm-split { grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); } }

.bm-split__copy p {
	margin: 18px 0 0;
	max-width: 56ch;
	font-size: 1rem;
	line-height: 1.75;
	color: var(--text-muted);
}

.bm-checklist {
	padding: 26px;
	background: var(--surface-bg);
	border: 1px solid var(--glass-border);
	border-radius: var(--border-radius);
}

.bm-checklist h3 {
	margin: 0 0 18px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--glass-border);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--text-muted);
}

.bm-checklist ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }

.bm-checklist li {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--text-main);
}

.bm-checklist i {
	flex: 0 0 auto;
	margin-top: 3px;
	font-size: 0.75rem;
	color: var(--primary-color);
}

/* --------------------------------------------- 6. Numbered steps */

.bm-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	counter-reset: bmstep;
}

@media (min-width: 700px) { .bm-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; } }
@media (min-width: 1024px) { .bm-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.bm-step { padding-top: 20px; border-top: 2px solid var(--primary-color); }

.bm-step__num {
	display: block;
	margin-bottom: 12px;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: .1em;
	color: var(--primary-color);
}

.bm-step h3 {
	margin: 0 0 8px;
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--text-strong);
}

.bm-step p { margin: 0; font-size: 0.9375rem; line-height: 1.65; color: var(--text-muted); }

/* --------------------------------------------------- 7. Point list */

.bm-points {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1px;
	background: var(--glass-border);
	border: 1px solid var(--glass-border);
	border-radius: var(--border-radius);
	overflow: hidden;
}

@media (min-width: 900px) { .bm-points { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.bm-point { padding: 28px 24px; background: var(--dark-bg); }

.bm-point h3 {
	margin: 0 0 10px;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--text-strong);
}

.bm-point p { margin: 0; font-size: 0.9375rem; line-height: 1.7; color: var(--text-muted); }

/* ------------------------------------------------------- 8. Table */

.bm-table-wrap { overflow-x: auto; }

.bm-table { width: 100%; border-collapse: collapse; text-align: left; }

.bm-table th,
.bm-table td {
	padding: 18px 20px 18px 0;
	border-bottom: 1px solid var(--glass-border);
	vertical-align: top;
	font-size: 0.9375rem;
	line-height: 1.65;
}

.bm-table th {
	width: 34%;
	min-width: 190px;
	font-weight: 700;
	color: var(--text-strong);
}

.bm-table td { color: var(--text-muted); }
.bm-table tr:last-child th,
.bm-table tr:last-child td { border-bottom: 0; }

/* --------------------------------------------------------- 9. FAQ */

.bm-faq { border-top: 1px solid var(--glass-border); }
.bm-faq__item { border-bottom: 1px solid var(--glass-border); }
.bm-faq__heading { margin: 0; }

.bm-faq__q {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 22px 0;
	background: none;
	border: 0;
	text-align: left;
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.45;
	color: var(--text-main);
	cursor: pointer;
}

.bm-faq__q:hover { color: var(--primary-color); }
.bm-faq__q[aria-expanded="true"] { color: var(--primary-color); }

.bm-faq__q i {
	flex: 0 0 auto;
	font-size: 0.875rem;
	color: var(--text-muted);
	transition: transform .2s ease;
}

.bm-faq__q[aria-expanded="true"] i { transform: rotate(45deg); color: var(--primary-color); }

.bm-faq__a { padding: 0 0 24px; max-width: 72ch; }
.bm-faq__a p { margin: 0 0 14px; font-size: 0.9375rem; line-height: 1.75; color: var(--text-muted); }
.bm-faq__a p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------- 10. CTA */

.bm-cta { padding-block: clamp(56px, 7vw, 96px); background: var(--dark-bg); }

.bm-cta__inner {
	padding: clamp(36px, 5vw, 64px) clamp(24px, 4vw, 56px);
	background: var(--surface-bg);
	border: 1px solid var(--glass-border);
	border-left: 3px solid var(--primary-color);
	border-radius: var(--border-radius);
	text-align: center;
}

.bm-cta__inner p {
	margin: 20px auto 30px;
	max-width: 56ch;
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--text-muted);
}

/* ------------------------------------------------------ 11. Prose */

.bm-prose h2 { margin: 40px 0 14px; font-size: 1.5rem; color: var(--text-strong); }
.bm-prose h3 { margin: 30px 0 10px; font-size: 1.1875rem; color: var(--text-strong); }
.bm-prose p, .bm-prose li { font-size: 1rem; line-height: 1.75; color: var(--text-muted); }
.bm-prose ul, .bm-prose ol { padding-left: 20px; margin: 0 0 18px; }
.bm-prose li { margin-bottom: 8px; }
.bm-prose a { color: var(--primary-color); }

/* -------------------------------------------- 12. Header trim */

/*
 * The inherited header carried a pill CTA, a currency select, a search button
 * and a balance chip. On a five-item nav that reads as clutter, so the bar is
 * reduced to wordmark, links, and the two controls that actually get used.
 */
/*
 * The inherited header is a floating pill: inset from the edges, 999px radius,
 * drop shadow. It is pinned flat to the top instead. Both the outer bar and the
 * __inner wrapper carry radius rules across several breakpoints, so both are
 * reset here rather than only the outer one.
 */
.nt-floating-header {
	position: fixed !important;
	inset: 0 0 auto 0 !important;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	transform: none !important;
	background: rgba(24, 24, 27, .92) !important;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 0 !important;
	border-bottom: 1px solid var(--glass-border) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
}

.admin-bar .nt-floating-header { top: 32px !important; }
@media (max-width: 782px) { .admin-bar .nt-floating-header { top: 46px !important; } }

.nt-floating-header__inner {
	max-width: 1200px !important;
	width: 100% !important;
	margin-inline: auto !important;
	padding: 12px 20px !important;
	gap: 20px;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
}

/* Fixed header, so content needs matching clearance. */
body { --bm-header-h: 66px; }
.bm-home > :first-child,
.bm-page > :first-child { padding-top: calc(var(--bm-header-h) + clamp(32px, 5vw, 72px)); }

.site-logo {
	font-size: 1.25rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	text-decoration: none;
}

.site-logo__word { color: var(--text-strong); }
.site-logo__accent { color: var(--primary-color); margin-left: .25ch; }

.nt-desktop-nav { gap: 4px !important; }

.nt-desktop-nav a {
	padding: 8px 11px;
	border-radius: var(--radius-sm);
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--text-muted);
	text-decoration: none;
	white-space: nowrap;
	transition: color .16s ease, background-color .16s ease;
}

.nt-desktop-nav a:hover { color: var(--text-strong); background: var(--surface-bg); }
.nt-desktop-nav a[aria-current="page"] { color: var(--primary-color); }

/* Removed from the header: currency select, search button, wallet chip, CTA pill. */
.nt-header-currency,
.nt-header-search,
.nt-header-balance,
.nt-shop-deals-cta { display: none !important; }

.nt-header-actions { gap: 6px !important; }

.nt-header-icon {
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	border-radius: var(--radius-sm);
	color: var(--text-muted);
	background: transparent;
	border: 1px solid transparent;
}

.nt-header-icon:hover { color: var(--text-strong); background: var(--surface-bg); }

/* The nav does not fit on a phone; the drawer button takes over. */
@media (max-width: 1180px) {
	.nt-desktop-nav { display: none !important; }
}

@media (min-width: 1181px) {
	.mobile-nav-toggle { display: none !important; }
}

/* ------------------------------------------------ 13. Reduced motion */

@media (prefers-reduced-motion: reduce) {
	.bm-cat:hover { transform: none; }
	*, *::before, *::after { transition-duration: .001ms !important; }
}

/* ------------------------------------- 14. Footer widgets & archives */

/*
 * The default WordPress Archives / Categories widgets rendered as huge
 * unstyled headings with bulleted links. Rebuilt as compact link lists that
 * match the footer's other columns.
 */
.nt-footer-extra-widgets {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	margin-top: 36px;
	padding-top: 28px;
	border-top: 1px solid var(--glass-border);
}

@media (min-width: 700px) {
	.nt-footer-extra-widgets { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
}

.nt-footer-extra-widgets section,
.nt-footer-extra-widgets .widget {
	background: transparent;
	border: 0;
	padding: 0;
}

.nt-footer-extra-widgets h2,
.nt-footer-extra-widgets h3,
.nt-footer-extra-widgets .wp-block-heading,
.nt-footer-extra-widgets .widget-title,
.nt-footer-extra-widgets .widgettitle {
	margin: 0 0 14px !important;
	font-size: 0.75rem !important;
	font-weight: 700 !important;
	letter-spacing: .12em !important;
	text-transform: uppercase !important;
	line-height: 1.4 !important;
	color: var(--text-muted) !important;
}

.nt-footer-extra-widgets ul {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: grid;
	gap: 9px;
}

.nt-footer-extra-widgets li { margin: 0 !important; padding: 0 !important; }

.nt-footer-extra-widgets a {
	font-size: 0.875rem;
	color: var(--text-muted);
	text-decoration: none;
}

.nt-footer-extra-widgets a:hover { color: var(--primary-color); }

/* --------------------------------- 15. WooCommerce shop & archives */

/*
 * WooCommerce's default loop chrome is the "old WordPress" look: a bare
 * result count, a plain select, and unstyled notices. These are the same
 * native elements and hooks, restyled.
 */
.woocommerce-products-header,
.woocommerce-breadcrumb { max-width: 1200px; margin: 0 auto 8px; padding-inline: 20px; }

.woocommerce-breadcrumb {
	font-size: 0.8125rem;
	color: var(--text-muted);
	padding-block: 10px;
}

.woocommerce-breadcrumb a { color: var(--text-muted); text-decoration: none; }
.woocommerce-breadcrumb a:hover { color: var(--primary-color); }

.woocommerce-products-header__title {
	font-size: clamp(1.75rem, 3.6vw, 2.75rem) !important;
	font-weight: 800;
	letter-spacing: -0.03em;
	color: var(--text-strong);
}

.bm-shop-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 24px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--glass-border);
}

.woocommerce-result-count {
	margin: 0 !important;
	font-size: 0.875rem;
	color: var(--text-muted);
}

.woocommerce-ordering select,
.bm-filter select {
	appearance: none;
	-webkit-appearance: none;
	padding: 10px 38px 10px 14px;
	min-height: 44px;
	background-color: var(--surface-bg);
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23a1a1aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: right 13px center;
	background-size: 14px;
	border: 1px solid var(--surface-raised);
	border-radius: var(--radius-btn);
	color: var(--text-main);
	font-size: 0.875rem;
	cursor: pointer;
}

.woocommerce-ordering select:focus-visible,
.bm-filter select:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }

/* Category filter chips */
.bm-filter-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 24px;
}

.bm-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 14px;
	border: 1px solid var(--surface-raised);
	border-radius: 999px;
	background: transparent;
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--text-muted);
	text-decoration: none;
	transition: color .16s ease, border-color .16s ease, background-color .16s ease;
}

.bm-chip:hover { color: var(--text-strong); border-color: var(--primary-color); }

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

.bm-chip__count { opacity: .7; font-variant-numeric: tabular-nums; }

/* Native WooCommerce notices */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	background: var(--surface-bg) !important;
	border: 1px solid var(--glass-border) !important;
	border-left: 3px solid var(--primary-color) !important;
	border-radius: var(--border-radius) !important;
	color: var(--text-main) !important;
	padding: 16px 20px !important;
	margin: 0 0 24px !important;
	font-size: 0.9375rem;
	list-style: none;
}

.woocommerce-error { border-left-color: var(--danger-color) !important; }
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { display: none !important; }

.woocommerce-message .button,
.woocommerce-info .button {
	background: var(--primary-color) !important;
	color: #fff !important;
	border-radius: var(--radius-btn) !important;
	padding: 8px 16px !important;
	float: right;
}

/* Pagination */
.woocommerce-pagination ul {
	display: flex !important;
	gap: 6px;
	justify-content: center;
	list-style: none !important;
	border: 0 !important;
	margin: 40px 0 0 !important;
	padding: 0 !important;
}

.woocommerce-pagination li { border: 0 !important; margin: 0 !important; }

.woocommerce-pagination a,
.woocommerce-pagination span {
	display: grid !important;
	place-items: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px !important;
	border: 1px solid var(--surface-raised) !important;
	border-radius: var(--radius-btn) !important;
	background: transparent !important;
	color: var(--text-muted) !important;
	font-size: 0.875rem;
	text-decoration: none;
}

.woocommerce-pagination a:hover { color: var(--text-strong) !important; border-color: var(--primary-color) !important; }

.woocommerce-pagination .current {
	background: var(--primary-color) !important;
	border-color: var(--primary-color) !important;
	color: #fff !important;
}

/* Empty state */
.bm-empty {
	padding: 56px 24px;
	text-align: center;
	background: var(--surface-bg);
	border: 1px solid var(--glass-border);
	border-radius: var(--border-radius);
}

.bm-empty h3 { margin: 0 0 10px; font-size: 1.25rem; color: var(--text-strong); }
.bm-empty p { margin: 0 auto 24px; max-width: 46ch; color: var(--text-muted); }

/* ============================ 16. Mobile drawer ============================ */

/*
 * Replaces the inherited multi-panel drawer. main.js still drives it: it adds
 * .is-open here and .is-visible on #mobileMenuOverlay.
 */
.nt-mobile-menu-overlay {
	position: fixed;
	inset: 0;
	/* Above the fixed site header, which storefront.css puts in the 1000s. */
	z-index: 9400;
	background: rgba(0, 0, 0, .6);
	opacity: 0;
	visibility: hidden;
	transition: opacity .25s ease, visibility .25s ease;
}

.nt-mobile-menu-overlay.is-visible { opacity: 1; visibility: visible; }

.bm-drawer {
	position: fixed;
	top: 0;
	right: 0;
	/* Covers the site header so the drawer owns its own wordmark and close
	   button, rather than hiding them behind the header. */
	z-index: 9500;
	width: min(360px, 88vw);
	height: 100dvh;
	background: var(--dark-bg);
	border-left: 1px solid var(--glass-border);
	transform: translateX(100%);
	transition: transform .28s cubic-bezier(.2, .7, .2, 1);
	overscroll-behavior: contain;
}

.bm-drawer.is-open { transform: translateX(0); }

.admin-bar .bm-drawer { top: 32px; height: calc(100dvh - 32px); }
@media (max-width: 782px) { .admin-bar .bm-drawer { top: 46px; height: calc(100dvh - 46px); } }

.bm-drawer__panel {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.bm-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 18px;
	border-bottom: 1px solid var(--glass-border);
	position: sticky;
	top: 0;
	background: var(--dark-bg);
	z-index: 2;
}

.bm-drawer__close {
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	background: transparent;
	border: 1px solid var(--surface-raised);
	border-radius: var(--radius-btn);
	color: var(--text-muted);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

.bm-drawer__close:hover { color: var(--text-strong); border-color: var(--primary-color); }

.bm-drawer__nav { display: flex; flex-direction: column; padding: 10px 0; }

.bm-drawer__nav a {
	display: flex;
	align-items: center;
	gap: 13px;
	/* 52px tall: comfortably above the 44px minimum touch target. */
	min-height: 52px;
	padding: 13px 18px;
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--text-main);
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, .04);
}

.bm-drawer__nav a:active { background: var(--surface-bg); }
.bm-drawer__nav a[aria-current="page"] { color: var(--primary-color); }

.bm-drawer__nav-icon {
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	display: grid;
	place-items: center;
	border-radius: 8px;
	background: rgba(253, 119, 2, .12);
	color: var(--primary-color);
	font-size: 0.8125rem;
}

.bm-drawer__foot {
	margin-top: auto;
	padding: 18px;
	border-top: 1px solid var(--glass-border);
	display: grid;
	gap: 12px;
}

.bm-drawer__foot .bm-btn { width: 100%; }

.bm-drawer__account { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.bm-drawer__account a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 10px;
	border: 1px solid var(--surface-raised);
	border-radius: var(--radius-btn);
	font-size: 0.875rem;
	color: var(--text-main);
	text-decoration: none;
}

.bm-drawer__account a:only-child { grid-column: 1 / -1; }

.bm-drawer__signout {
	text-align: center;
	font-size: 0.875rem;
	color: var(--text-muted);
	text-decoration: none;
	padding: 8px;
}

.bm-drawer__note {
	margin: 0;
	text-align: center;
	font-size: 0.75rem;
	color: var(--text-muted);
}

/* Hamburger button */
.mobile-nav-toggle {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--surface-raised);
	border-radius: var(--radius-btn);
	color: var(--text-main);
	cursor: pointer;
}

.mobile-nav-toggle .nt-menu-label { display: none; }

.nt-menu-icon { display: grid; gap: 5px; width: 18px; }
.nt-menu-icon span {
	display: block;
	height: 2px;
	width: 100%;
	background: currentColor;
	border-radius: 2px;
	transition: transform .2s ease, opacity .2s ease;
}

.mobile-nav-toggle.is-open .nt-menu-icon span:first-child { transform: translateY(3.5px) rotate(45deg); }
.mobile-nav-toggle.is-open .nt-menu-icon span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

/* main.js sets .nav-drawer-open on <body> - that is the real hook. */
body.nav-drawer-open { overflow: hidden; }

/* ========================= 17. Mobile refinements ========================= */

@media (max-width: 639px) {

	/* Cards were too tall and narrow. A 3:2 tile and tighter internals bring
	   the box back to a landscape proportion at 2-up. */
	.nt-product-card-v6 { padding: 8px !important; }
	/* An explicit height beats the pile of competing aspect-ratio rules in
	   storefront.css far more predictably than another aspect-ratio would. */
	.nt-product-card-v6__media {
		aspect-ratio: auto !important;
		height: 84px !important;
		min-height: 84px !important;
		margin-bottom: 8px;
		border-radius: 10px !important;
	}
	.nt-product-icon-fallback { font-size: 1.5rem; }
	.nt-product-card-v6__eyebrow { font-size: 0.625rem; letter-spacing: .04em; }
	.nt-product-card-v6__body h3 { font-size: 0.75rem !important; line-height: 1.3 !important; margin: 3px 0 5px !important; }
	.nt-product-card-v6__price strong { font-size: 0.9375rem; }
	.nt-product-card-v6__price small { display: block; font-size: 0.5625rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; }
	/*
	 * Side by side rather than stacked: two 38px rows plus a gap cost 82px of
	 * card height, which is what made the boxes read as tall and narrow.
	 *
	 * storefront.css carries roughly 28 competing rules for this element across
	 * eight breakpoints, and the class actually on the node is
	 * __actions--commerce. Matching that class and forcing it is the only way to
	 * land ahead of the pile without editing that legacy file.
	 */
	.nt-product-card-v6__actions,
	.nt-product-card-v6__actions--commerce {
		padding-top: 8px !important;
		display: grid !important;
		/* Buy now takes the space; add-to-cart collapses to a 40px icon button.
		   Two equal columns made both labels wrap onto three lines. */
		grid-template-columns: minmax(0, 1fr) 40px !important;
		gap: 6px !important;
	}

	.nt-product-card-v6__actions .bm-btn--cart { padding: 8px !important; }
	.nt-product-card-v6__actions .bm-btn--cart .bm-btn__label { display: none; }
	.nt-product-card-v6__actions .bm-btn--cart .bm-btn__icon { font-size: 0.875rem; }
	.nt-product-card-v6__actions .bm-btn {
		width: 100%;
		min-height: 38px;
		padding: 8px 6px;
		font-size: 0.75rem;
	}
	.nt-product-card-v6__status { font-size: 0.5625rem; padding: 2px 6px !important; }
	.products-grid, .bm-cat-grid { gap: 6px !important; }

	/* Category cards: same treatment, they were equally elongated. */
	.bm-cat { padding: 14px 12px; }
	.bm-cat__icon { width: 34px; height: 34px; margin-bottom: 10px; font-size: 0.875rem; }
	.bm-cat h3 { font-size: 0.8125rem; margin-bottom: 5px; }
	.bm-cat p { font-size: 0.75rem; line-height: 1.5; margin-bottom: 12px; }
	.bm-cat__go { font-size: 0.75rem; }


	/* Typography and rhythm */
	.bm-display { font-size: clamp(1.85rem, 8.5vw, 2.4rem); }
	.bm-display--sm { font-size: clamp(1.5rem, 6.8vw, 1.9rem); }
	.bm-section { padding-block: 44px; }
	.bm-hero { padding-block: 36px 44px; }
	/*
	 * Minimal gutters on mobile. Every pixel taken off the sides goes straight
	 * into card width: at 390px this puts each card at ~184px instead of 163px.
	 * 8px is the floor - below that the cards visually collide with the screen
	 * edge and text loses its breathing room against the bezel.
	 */
	.nt-container, .container {
		padding-inline: 8px !important;
		/* storefront.css also puts a 16px MARGIN on .nt-container, so padding
		   alone left a 24px gutter. Both have to be reset to reclaim the width. */
		margin-inline: auto !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	.bm-hero__actions { display: grid; gap: 10px; }
	.bm-hero__actions .bm-btn { width: 100%; }
	.bm-hero__proof { gap: 8px 18px; }
	.bm-hero__proof li { font-size: 0.8125rem; }
	.bm-hero__img, .bm-hero__placeholder { aspect-ratio: 16 / 10; }

	.bm-checklist { padding: 18px; }
	.bm-checklist li { font-size: 0.875rem; }

	.bm-point { padding: 20px 18px; }
	.bm-step { padding-top: 16px; }

	.bm-faq__q { font-size: 0.9375rem; padding: 18px 0; gap: 14px; }
	.bm-faq__a { padding-bottom: 20px; }

	.bm-cta__inner { padding: 28px 20px; }

	/* The pricing table cannot fit two columns on a phone: stack it. */
	.bm-table th, .bm-table td { display: block; width: auto; min-width: 0; padding: 0; }
	.bm-table th { padding-top: 16px; font-size: 0.9375rem; }
	.bm-table td { padding: 4px 0 16px; border-bottom: 1px solid var(--glass-border); }
	.bm-table tr:last-child td { border-bottom: 0; }

	/* Toolbar stacks so the select gets full width. */
	.bm-shop-toolbar { flex-direction: column; align-items: stretch; gap: 10px; }
	.bm-filter select, .woocommerce-ordering select, .woocommerce-ordering { width: 100%; }

	.bm-filter-chips { gap: 6px; }
	.bm-chip { padding: 7px 11px; font-size: 0.75rem; }
}

/* Very narrow phones: one column reads better than two cramped ones. */
@media (max-width: 359px) {
	.products-grid, .bm-cat-grid { grid-template-columns: 1fr !important; }
}

/* Anything interactive clears the 44px touch minimum. */
@media (pointer: coarse) {
	.bm-btn, .bm-chip, .nt-header-icon, .bm-faq__q { min-height: 44px; }
}

/* The cart label is only hidden on the narrow grid. */
@media (min-width: 640px) { .bm-btn__label { display: inline; } }

/*
 * Explicit grid placement for the card's two actions on mobile.
 *
 * Setting grid-template-columns alone was not enough: a legacy rule in
 * storefront.css places these children explicitly, so both were landing in
 * column 1 on separate rows and the two-column track went unused.
 */
@media (max-width: 639px) {
	.nt-product-card-v6__actions > .bm-btn--buy-now,
	.nt-product-card-v6__actions--commerce > .bm-btn--buy-now {
		grid-column: 1 !important;
		grid-row: 1 !important;
		width: auto !important;
	}

	.nt-product-card-v6__actions > .bm-btn--cart,
	.nt-product-card-v6__actions--commerce > .bm-btn--cart {
		grid-column: 2 !important;
		grid-row: 1 !important;
		width: auto !important;
	}
}

/*
 * The inherited header sits at z-index 9000, so the drawer has to clear it.
 * The header is also hidden outright while the drawer is open: otherwise the
 * page shows two wordmarks and two close affordances at once.
 */
body.nav-drawer-open .nt-floating-header,
body.nav-drawer-open .bm-promobar { opacity: 0; pointer-events: none; }

/* --------------- Card detail restored on the narrow grid --------------- */

@media (max-width: 639px) {
	/* The short description was being dropped entirely. Two clamped lines fit
	   and are what make the listing readable at a glance. */
	.nt-product-card-v6__body > p {
		display: -webkit-box !important;
		-webkit-line-clamp: 2 !important;
		line-clamp: 2 !important;
		-webkit-box-orient: vertical !important;
		overflow: hidden !important;
		max-height: 2.9em;
		margin: 0 0 7px !important;
		font-size: 0.6875rem !important;
		line-height: 1.45 !important;
		color: var(--text-muted);
	}

	.nt-product-card-v6__meta {
		display: flex !important;
		align-items: center;
		gap: 5px;
		margin: 0 0 6px !important;
		font-size: 0.625rem;
		color: var(--text-muted);
	}

	.nt-product-card-v6__rating {
		display: inline-flex !important;
		align-items: center;
		gap: 3px;
		font-size: 0.625rem;
		color: var(--text-muted);
	}

	.nt-product-card-v6__rating i { color: var(--accent-color); font-size: 0.5625rem; }

	.nt-product-card-v6__price-row {
		display: flex !important;
		align-items: baseline;
		justify-content: space-between;
		gap: 6px;
	}

	.nt-product-card-v6__saving {
		font-size: 0.5625rem;
		font-weight: 700;
		color: var(--success-color);
	}
}

/* ------------------- 18. Mobile: tight grids, but not tight text ------------------- */

/*
 * The 8px gutter exists so the card grids get maximum width. Applied to the
 * whole container it also pushed headings, leads and prose hard against the
 * screen edge, which reads as broken rather than spacious.
 *
 * So: the container stays at 8px and the boxes stay wide, while anything that
 * is read as running text gets its own inset back.
 */
@media (max-width: 639px) {
	.bm-section__head,
	.bm-section__lead,
	.bm-split__copy,
	.bm-prose,
	.bm-faq,
	.bm-table-wrap,
	.bm-hero__copy,
	.bm-cta__inner > *:not(.bm-btn) {
		padding-inline: 8px;
	}

	/* The grids themselves stay flush to the 8px container edge. */
	.products-grid,
	.bm-cat-grid,
	.bm-steps,
	.bm-points,
	.bm-filter-chips {
		padding-inline: 0;
	}

	/* A split section's panel is a box, so it keeps the full width too. */
	.bm-checklist { margin-inline: 0; }

	/* Section headers stop being a flex row: on a phone the button below the
	   heading is clearer than a cramped two-column split. */
	.bm-section__head--split {
		display: block;
	}

	.bm-section__head--split > div { margin-bottom: 16px; }
	.bm-section__head--split .bm-btn { width: 100%; }
}

/* ======================== 19. Guides: index and article ======================== */

/* ------------------------------------------------------- Post cards */

.bm-post-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
}

@media (min-width: 700px) { .bm-post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } }
@media (min-width: 1024px) { .bm-post-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }

.bm-post-card {
	display: flex;
	flex-direction: column;
	padding: 24px;
	background: var(--surface-bg);
	border: 1px solid var(--glass-border);
	border-radius: var(--border-radius);
	text-decoration: none;
	color: inherit;
	transition: border-color .18s ease, transform .18s ease;
}

.bm-post-card:hover { border-color: var(--primary-color); transform: translateY(-3px); }

.bm-post-card__meta {
	display: flex;
	gap: 8px;
	margin-bottom: 12px;
	font-size: 0.75rem;
	color: var(--text-muted);
	font-variant-numeric: tabular-nums;
}

.bm-post-card h2,
.bm-post-card h3 {
	margin: 0 0 10px;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--text-strong);
	text-wrap: balance;
}

.bm-post-card p {
	margin: 0 0 20px;
	font-size: 0.875rem;
	line-height: 1.65;
	color: var(--text-muted);
}

.bm-post-card__go {
	margin-top: auto;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--primary-color);
}

.bm-post-card__go i { font-size: .75rem; transition: transform .18s ease; }
.bm-post-card:hover .bm-post-card__go i { transform: translateX(3px); }

/* ------------------------------------------------------- Article head */

.bm-article__head {
	padding-block: clamp(40px, 6vw, 72px) clamp(24px, 3vw, 40px);
	background: var(--dark-bg);
	border-bottom: 1px solid var(--glass-border);
}

.bm-crumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 20px;
	font-size: 0.8125rem;
	color: var(--text-muted);
}

.bm-crumbs a { color: var(--text-muted); text-decoration: none; }
.bm-crumbs a:hover { color: var(--primary-color); }
.bm-crumbs > span[aria-hidden] { opacity: .45; }

.bm-article__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 20px;
	font-size: 0.875rem;
	color: var(--text-muted);
	font-variant-numeric: tabular-nums;
}

/* ------------------------------------------- Article body + contents */

.bm-article__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(28px, 4vw, 56px);
	padding-block: clamp(36px, 5vw, 64px);
	align-items: start;
}

@media (min-width: 1000px) {
	.bm-article__grid { grid-template-columns: 230px minmax(0, 1fr); }
}

.bm-toc {
	position: static;
	padding: 20px;
	background: var(--surface-bg);
	border: 1px solid var(--glass-border);
	border-radius: var(--border-radius);
}

@media (min-width: 1000px) {
	.bm-toc { position: sticky; top: 90px; }
}

.bm-toc h2 {
	margin: 0 0 14px;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--text-muted);
}

.bm-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: toc; }

.bm-toc li { counter-increment: toc; display: flex; gap: 9px; }

.bm-toc li::before {
	content: counter(toc, decimal-leading-zero);
	flex: 0 0 auto;
	font-size: 0.6875rem;
	font-weight: 700;
	color: var(--primary-color);
	padding-top: 2px;
	font-variant-numeric: tabular-nums;
}

.bm-toc a {
	font-size: 0.8125rem;
	line-height: 1.45;
	color: var(--text-muted);
	text-decoration: none;
}

.bm-toc a:hover { color: var(--text-strong); }

/* Anchors need clearance under the fixed header. */
.bm-article__body h2 { scroll-margin-top: 90px; }

/*
 * Article prose. The inherited theme had no table, list or heading styling for
 * post content, which is why the comparison tables in these guides rendered as
 * loose lines of text.
 */
.bm-article__body { max-width: 72ch; }

.bm-prose h2 {
	margin: 44px 0 16px;
	font-size: clamp(1.375rem, 2.4vw, 1.75rem);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.02em;
	color: var(--text-strong);
	text-wrap: balance;
}

.bm-prose h2:first-child { margin-top: 0; }

.bm-prose h3 {
	margin: 32px 0 12px;
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--text-strong);
}

.bm-prose p {
	margin: 0 0 18px;
	font-size: 1.0625rem;
	line-height: 1.75;
	color: var(--text-main);
}

.bm-prose strong { color: var(--text-strong); font-weight: 600; }

.bm-prose a {
	color: var(--primary-color);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

.bm-prose a:hover { color: var(--primary-soft); }

.bm-prose ul,
.bm-prose ol { margin: 0 0 20px; padding-left: 22px; }

.bm-prose li {
	margin-bottom: 9px;
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--text-main);
}

.bm-prose li::marker { color: var(--primary-color); }

/* Tables — the thing that was rendering as plain text. */
.bm-prose table {
	width: 100%;
	margin: 0 0 24px;
	border-collapse: collapse;
	font-size: 0.9375rem;
	display: block;
	overflow-x: auto;
}

@media (min-width: 700px) { .bm-prose table { display: table; } }

.bm-prose thead th {
	text-align: left;
	padding: 12px 16px 12px 0;
	border-bottom: 1px solid var(--surface-raised);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--text-muted);
	white-space: nowrap;
}

.bm-prose tbody td,
.bm-prose tbody th {
	padding: 14px 16px 14px 0;
	border-bottom: 1px solid var(--glass-border);
	vertical-align: top;
	line-height: 1.6;
	color: var(--text-main);
}

.bm-prose tbody th { font-weight: 600; color: var(--text-strong); white-space: nowrap; }
.bm-prose tbody tr:last-child td,
.bm-prose tbody tr:last-child th { border-bottom: 0; }

/* Blockquote — used by the [YOUR EXPERIENCE] prompts. */
.bm-prose blockquote {
	margin: 28px 0;
	padding: 20px 24px;
	background: var(--surface-bg);
	border-left: 3px solid var(--primary-color);
	border-radius: 0 var(--border-radius) var(--border-radius) 0;
}

.bm-prose blockquote p { margin-bottom: 10px; font-size: 1rem; color: var(--text-muted); }
.bm-prose blockquote p:last-child { margin-bottom: 0; }
.bm-prose blockquote strong { color: var(--primary-color); }

.bm-prose hr { margin: 40px 0; border: 0; border-top: 1px solid var(--glass-border); }

/* Pagination on the index reuses the shop's. */
.bm-blog .pagination,
.bm-blog .nav-links {
	display: flex;
	gap: 6px;
	justify-content: center;
	margin-top: 40px;
	flex-wrap: wrap;
}

.bm-blog .page-numbers {
	display: grid;
	place-items: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--surface-raised);
	border-radius: var(--radius-btn);
	color: var(--text-muted);
	font-size: 0.875rem;
	text-decoration: none;
}

.bm-blog .page-numbers:hover { color: var(--text-strong); border-color: var(--primary-color); }
.bm-blog .page-numbers.current { background: var(--primary-color); border-color: var(--primary-color); color: #fff; }

@media (max-width: 639px) {
	.bm-prose p, .bm-prose li { font-size: 1rem; }
	.bm-prose h2 { font-size: 1.25rem; margin-top: 34px; }
	.bm-post-card { padding: 18px; }
	.bm-toc { padding: 16px; }
	.bm-article__grid { padding-block: 28px; }
}

/* ===================== 19. Contact / trust page ====================== */

.bm-contact-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
	gap: 12px;
}

.bm-contact-card {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 22px 20px;
	background: var(--surface-bg);
	border: 1px solid var(--glass-border);
	border-radius: var(--border-radius);
	text-decoration: none;
	color: inherit;
	transition: border-color .18s ease, transform .18s ease;
}

.bm-contact-card:hover { border-color: var(--primary-color); transform: translateY(-2px); }

.bm-contact-card__icon {
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	margin-bottom: 10px;
	border-radius: 10px;
	background: rgba(253, 119, 2, .12);
	color: var(--primary-color);
	font-size: 1.0625rem;
}

.bm-contact-card strong { font-size: .9375rem; color: var(--text-strong); }
.bm-contact-card small { font-size: .8125rem; color: var(--text-muted); word-break: break-word; }

/* Company facts read as a record, so they are a definition list. */
.bm-facts { margin: 0; display: grid; gap: 0; }

.bm-facts dt {
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin-top: 14px;
}

.bm-facts dt:first-child { margin-top: 0; }

.bm-facts dd {
	margin: 3px 0 0;
	font-size: .9375rem;
	color: var(--text-main);
	font-variant-numeric: tabular-nums;
}

.bm-admin-note {
	padding: 14px 18px;
	border: 1px dashed var(--surface-raised);
	border-radius: var(--radius-btn);
	background: transparent;
	font-size: .875rem;
	color: var(--text-muted);
}

.bm-admin-note p { margin: 0; }
.bm-admin-note strong { color: var(--text-main); }

/* ============== 20. Homepage mobile: hero density ============== */

/*
 * Measured at 390x844: the hero was 957px tall, so the entire first screen was
 * headline, paragraph and two buttons - a visitor scrolled a full screen before
 * seeing a single thing that was for sale.
 *
 * The fixes are all density rather than deletion. Nothing is hidden; it is
 * tightened so the image and the top of the next section come into view.
 */
@media (max-width: 639px) {

	.bm-hero { padding-block: 28px 32px; }

	.bm-hero__grid { gap: 22px; }

	/* Five lines of 16px lead is a wall. 15px on tighter leading holds the
	   same copy in three or four. */
	.bm-hero__lead {
		margin-top: 14px;
		font-size: 0.9375rem;
		line-height: 1.6;
	}

	/* The large button modifier is a desktop treatment; at 390px it just
	   makes two 51px buttons into a 112px block. */
	.bm-hero__actions { gap: 8px; margin-top: 20px; }
	.bm-hero__actions .bm-btn--lg { min-height: 46px; padding: 12px 20px; font-size: 0.9375rem; }

	/* Proof points read as a row of short claims rather than a stacked list. */
	.bm-hero__proof { margin-top: 18px; gap: 6px 16px; }
	.bm-hero__proof li { font-size: 0.75rem; }

	.bm-eyebrow { margin-bottom: 10px; font-size: 0.6875rem; }

	/* A 4:3 hero image eats 280px. 16:9 keeps it present without dominating. */
	.bm-hero__img,
	.bm-hero__placeholder { aspect-ratio: 16 / 9; }
}

/*
 * Short viewports - iPhone SE and similar - get one more step of compression,
 * because 844px of height is not a floor.
 */
@media (max-width: 639px) and (max-height: 740px) {
	.bm-hero { padding-block: 22px 26px; }
	.bm-hero__lead { font-size: 0.875rem; }
	.bm-hero__proof { display: none; }
}

/* ============ 21. Scroll clearance under the fixed header ============ */

/*
 * The header is fixed, so any in-page anchor lands with the section top hidden
 * behind it - the "Browse accounts" button jumping to #bm-listings put the
 * heading under the bar. scroll-margin-top reserves the header's height so the
 * target lands where the reader expects.
 *
 * Applied to every anchor target on the site rather than just article headings,
 * which was the only place it had been set.
 */
:where(
	section[id],
	.bm-section[id],
	#bm-categories,
	#bm-listings,
	#bm-service-listings,
	.bm-article__body h2,
	.bm-faq__item
) {
	scroll-margin-top: 86px;
}

@media (max-width: 639px) {
	:where(section[id], .bm-section[id], .bm-article__body h2, .bm-faq__item) {
		scroll-margin-top: 74px;
	}
}

/* ================== 22. Audit fixes ================== */

/*
 * Found by measuring at 390 / 768 / 1280 rather than by eye.
 */

/* 1. The FAQ plus icon escaped its button at every width. The button is a flex
      row, and the icon had no flex basis, so it was sized from content and
      pushed past the padding edge. */
.bm-faq__q {
	align-items: center;
	gap: 16px;
}

.bm-faq__q > span { flex: 1 1 auto; min-width: 0; }

/*
 * The icon is given a fixed box rather than being sized from its glyph. An
 * inherited display:flex was making it 21px wide and pushing it past the
 * button's padding edge - and an icon whose width depends on whether a webfont
 * loaded is a layout that shifts on slow connections.
 */
.bm-faq__q i {
	flex: 0 0 20px !important;
	display: grid !important;
	place-items: center;
	width: 20px !important;
	height: 20px;
	box-sizing: border-box;
	font-size: 0.8125rem;
	line-height: 1;
}

/* 2. The add-to-cart icon button measured 40x38 on mobile - below the 44px
      touch minimum. Widened the track and squared the button. */
@media (max-width: 639px) {
	.nt-product-card-v6__actions,
	.nt-product-card-v6__actions--commerce {
		grid-template-columns: minmax(0, 1fr) 44px !important;
	}

	.nt-product-card-v6__actions .bm-btn--cart {
		min-height: 44px !important;
		padding: 0 !important;
	}

	.nt-product-card-v6__actions .bm-btn--buy-now { min-height: 44px !important; }
}

/*
 * 3. Card micro-labels were rendering at 8.0px, which is below the point most
 *    people can comfortably read and well under the 9px floor iOS uses before
 *    it starts auto-adjusting. Raised to a 10px floor; the em-based sizes were
 *    compounding against a reduced parent font-size.
 */
.nt-product-card-v6__eyebrow,
.nt-product-card-v6__eyebrow span {
	font-size: 0.6875rem !important;
	letter-spacing: .05em;
}

.nt-product-card-v6__status {
	font-size: 0.625rem !important;
}

.nt-product-card-v6__price small,
.bm-cat small,
.nt-product-card-v6 small {
	font-size: 0.625rem;
}

@media (max-width: 639px) {
	.nt-product-card-v6__eyebrow,
	.nt-product-card-v6__eyebrow span { font-size: 0.625rem !important; }
}

/*
 * 4. The category grid was five columns against six categories, so the sixth
 *    sat alone on its own row. Three columns fills two rows evenly, and reads
 *    better than a 5 + 1 orphan.
 */
@media (min-width: 1100px) {
	.bm-cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}