/*
 * 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__showcase{
	width: 100%;
}

.bm-showcase-card{
	background: var(--surface-bg);
	border: 1px solid var(--glass-border);
	border-radius: var(--border-radius);
	padding: clamp(16px, 3vw, 24px);
	box-shadow: var(--shadow-card);
}

.bm-showcase-card__head{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--glass-border);
	margin-bottom: 16px;
}

.bm-showcase-pill{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: #10b981;
	background: rgba(16, 185, 129, 0.12);
	border: 1px solid rgba(16, 185, 129, 0.25);
	padding: 4px 10px;
	border-radius: 9999px;
}

.bm-showcase-stat{
	font-size: 0.8125rem;
	color: var(--text-muted);
}

.bm-showcase-card__list{
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.bm-showcase-item{
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 14px;
	background: rgba(28, 20, 16, 0.027);
	border: 1px solid var(--glass-border);
	border-radius: 10px;
	text-decoration: none;
	color: inherit;
	transition: background-color .18s ease, border-color .18s ease;
}

.bm-showcase-item:hover{
	background: rgba(28, 20, 16, 0.054);
	border-color: var(--primary-color);
}

.bm-showcase-item__icon{
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	background: rgba(253, 119, 2, 0.12);
	border: 1px solid rgba(253, 119, 2, 0.25);
	border-radius: 8px;
	color: var(--primary-color);
	font-size: 1rem;
	flex-shrink: 0;
}

.bm-showcase-item__info{
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1;
	min-width: 0;
}

.bm-showcase-item__info strong{
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--text-strong);
}

.bm-showcase-item__info small{
	font-size: 0.75rem;
	color: var(--text-muted);
}

.bm-showcase-item__tag{
	font-size: 0.6875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .06em;
	padding: 3px 8px;
	border-radius: 4px;
	background: var(--surface-raised);
	color: var(--text-main);
	flex-shrink: 0;
}

.bm-showcase-card__foot{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 16px;
	margin-top: 16px;
	border-top: 1px solid var(--glass-border);
	font-size: 0.8125rem;
	color: var(--text-muted);
	flex-wrap: wrap;
	gap: 8px;
}

.bm-showcase-card__foot a{
	color: var(--primary-color);
	font-weight: 600;
	text-decoration: none;
}

.bm-showcase-card__foot a:hover{
	color: var(--primary-strong);
}

.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(255, 255, 255, 0.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(28, 20, 16, 0.08);
}

.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: flex  !important;
		align-items: center  !important;
		gap: 6px  !important;
		width: 100%  !important;
	}

	.nt-product-card-v6__actions .bm-btn--buy-now{
		flex: 1 1 auto  !important;
		min-width: 0  !important;
		height: 34px  !important;
		min-height: 34px  !important;
		padding: 0 8px  !important;
		font-size: 0.72rem  !important;
		font-weight: 700  !important;
		white-space: nowrap  !important;
		overflow: hidden  !important;
		text-overflow: ellipsis  !important;
		display: inline-flex  !important;
		align-items: center  !important;
		justify-content: center  !important;
		border-radius: 6px  !important;
	}

	.nt-product-card-v6__actions .bm-btn--cart{
		flex: 0 0 34px  !important;
		width: 34px  !important;
		min-width: 34px  !important;
		height: 34px  !important;
		min-height: 34px  !important;
		padding: 0  !important;
		display: inline-flex  !important;
		align-items: center  !important;
		justify-content: center  !important;
		border-radius: 6px  !important;
	}
	.nt-product-card-v6__actions .bm-btn--cart .bm-btn__icon{ display: inline-block  !important; font-size: 0.8rem  !important; margin: 0  !important; }
	.nt-product-card-v6__actions .bm-btn--cart .bm-btn__label{ display: none  !important; }
	.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; }
}

/* Narrow mobile screens (320px-375px): enforce strict 2-up product grid */
@media (max-width: 375px) {
	.products-grid,
	.products-grid.marketplace-grid,
	.nt-product-grid,
	.woocommerce ul.products,
	.nt-shop-results-v84 ul.products,
	.bm-cat-grid{
		grid-template-columns: repeat(2, minmax(0, 1fr))  !important;
		gap: 6px  !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. Compact, proportional actions and text on mobile */
@media (max-width: 768px) {
	.nt-product-card-v6__body h3,
	.nt-product-card-v6 h3 a{
		font-size: 0.8125rem  !important;
		line-height: 1.25  !important;
		margin: 3px 0 4px  !important;
	}

	body .nt-product-card-v6__price strong,
	.nt-product-card-v6__price strong{
		font-size: 0.9375rem  !important;
		line-height: 1.2  !important;
	}

	.nt-product-card-v6__price small{
		font-size: 0.5625rem  !important;
		margin-bottom: 2px  !important;
	}

	.nt-product-card-v6__actions,
	.nt-product-card-v6__actions--commerce{
		display: flex  !important;
		align-items: center  !important;
		gap: 6px  !important;
		padding-top: 8px  !important;
		width: 100%  !important;
	}

	.nt-product-card-v6__actions .bm-btn--buy-now{
		flex: 1 1 auto  !important;
		min-width: 0  !important;
		height: 34px  !important;
		min-height: 34px  !important;
		padding: 0 8px  !important;
		font-size: 0.72rem  !important;
		font-weight: 700  !important;
		white-space: nowrap  !important;
		overflow: hidden  !important;
		text-overflow: ellipsis  !important;
		display: inline-flex  !important;
		align-items: center  !important;
		justify-content: center  !important;
		border-radius: 6px  !important;
	}

	.nt-product-card-v6__actions .bm-btn--cart{
		flex: 0 0 34px  !important;
		width: 34px  !important;
		min-width: 34px  !important;
		height: 34px  !important;
		min-height: 34px  !important;
		padding: 0  !important;
		display: inline-flex  !important;
		align-items: center  !important;
		justify-content: center  !important;
		border-radius: 6px  !important;
	}
	.nt-product-card-v6__actions .bm-btn--cart .bm-btn__icon{ display: inline-block  !important; font-size: 0.8rem  !important; margin: 0  !important; }
	.nt-product-card-v6__actions .bm-btn--cart .bm-btn__label{ display: none  !important; }
}

/* Tighten desktop card button dimensions for sleek aesthetic */
.nt-product-card-v6__actions .bm-btn{
	min-height: 38px  !important;
	height: 38px  !important;
	padding: 8px 16px  !important;
	font-size: 0.875rem  !important;
}

.nt-product-card-v6__actions .bm-btn--cart{
	width: 100%  !important;
	padding: 8px  !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)); }
}

/* =========================================================
   5. Single Product Purchase Actions (Add to Cart + Buy Now)
   ========================================================= */
.nt-native-purchase-form form.cart{
	display: flex  !important;
	flex-wrap: wrap  !important;
	align-items: center  !important;
	gap: 12px  !important;
	margin-top: 18px  !important;
}

.nt-native-purchase-form form.cart .quantity{
	margin: 0  !important;
	display: inline-flex  !important;
	align-items: center  !important;
}

.nt-native-purchase-form form.cart .quantity .qty{
	min-height: 48px  !important;
	width: 68px  !important;
	padding: 0 10px  !important;
	background: #FFFFFF  !important;
	border: 1px solid rgba(28, 20, 16, 0.168)  !important;
	border-radius: var(--radius-btn, 8px)  !important;
	color: #1C1410  !important;
	font-size: 1rem  !important;
	font-weight: 700  !important;
	text-align: center  !important;
}

.nt-native-purchase-form form.cart button.single_add_to_cart_button{
	flex: 1 1 170px  !important;
	min-height: 48px  !important;
	background: rgba(28, 20, 16, 0.054)  !important;
	border: 1px solid rgba(28, 20, 16, 0.192)  !important;
	color: #f8f8fa  !important;
	border-radius: var(--radius-btn, 8px)  !important;
	font-size: 0.95rem  !important;
	font-weight: 600  !important;
	letter-spacing: 0.01em  !important;
	cursor: pointer  !important;
	display: inline-flex  !important;
	align-items: center  !important;
	justify-content: center  !important;
	gap: 8px  !important;
	transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease  !important;
}

.nt-native-purchase-form form.cart button.single_add_to_cart_button:hover{
	background: rgba(28, 20, 16, 0.108)  !important;
	border-color: rgba(28, 20, 16, 0.2)  !important;
	color: #fff  !important;
	transform: translateY(-1px);
}

.nt-native-purchase-form form.cart button.bm-btn-buy-now{
	flex: 1 1 170px  !important;
	min-height: 48px  !important;
	background: var(--primary-color, #ff4d16)  !important;
	border: 1px solid var(--primary-color, #ff4d16)  !important;
	color: #fff  !important;
	border-radius: var(--radius-btn, 8px)  !important;
	font-size: 0.95rem  !important;
	font-weight: 700  !important;
	letter-spacing: 0.01em  !important;
	cursor: pointer  !important;
	display: inline-flex  !important;
	align-items: center  !important;
	justify-content: center  !important;
	gap: 8px  !important;
	box-shadow: 0 4px 18px rgba(255, 77, 22, 0.28)  !important;
	transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease  !important;
}

.nt-native-purchase-form form.cart button.bm-btn-buy-now:hover{
	background: var(--primary-strong, #e03e0c)  !important;
	border-color: var(--primary-strong, #e03e0c)  !important;
	box-shadow: 0 6px 24px rgba(255, 77, 22, 0.42)  !important;
	transform: translateY(-1px);
}

@media (max-width: 480px) {
	.nt-native-purchase-form form.cart button.single_add_to_cart_button,
	.nt-native-purchase-form form.cart button.bm-btn-buy-now{
		flex: 1 1 100%  !important;
		width: 100%  !important;
	}
}

/* v2.8.2 — final product media geometry. Keep product art wide, full bleed and uncluttered. */
.nt-product-card-v6__media{
  position:relative !important;
  padding:0 !important;
  height:auto !important;
  min-height:0 !important;
  aspect-ratio:16/10 !important;
  overflow:hidden !important;
  background:#FFFFFF !important;
  border-radius:14px !important;
}
.nt-product-card-v6__image{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  display:block !important;
}
.nt-product-card-v6__image img,
.nt-product-card-v6__image .nt-product-image,
.nt-product-card-v6__image .nt-curated-product-img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:cover !important;
  object-position:center !important;
  border-radius:0 !important;
  transform:none !important;
}
.nt-product-card-v6__status{left:10px !important;top:10px !important;bottom:auto !important;right:auto !important;z-index:4 !important;}
@media (max-width:639px){
  .nt-product-card-v6__media{height:auto !important;min-height:0 !important;aspect-ratio:16/10 !important;margin-bottom:8px !important;}
  .nt-product-card-v6__image{min-height:0 !important;}
  .nt-product-card-v6__status{left:8px !important;top:8px !important;bottom:auto !important;}
}

/* =========================================================
   6. Single Product Detail & Description Styling
   ========================================================= */
.nt-single-product-v6{
  padding: 32px 0 64px;
}
.nt-product-breadcrumb{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 28px;
  font-size: 0.8125rem;
  color: var(--text-muted, #6B5E54);
}
.nt-product-breadcrumb a{
  color: var(--text-muted, #6B5E54);
  text-decoration: none;
  transition: color 0.15s ease;
}
.nt-product-breadcrumb a:hover{
  color: #1C1410;
}
.nt-product-breadcrumb i{
  font-size: 0.65rem;
  opacity: 0.6;
}

.nt-product-purchase{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
  margin-bottom: 64px;
}
@media (max-width: 900px) {
  .nt-product-purchase{
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

.nt-product-gallery-v6{
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: #FFFFFF;
  border: 1px solid rgba(28, 20, 16, 0.096);
}
.nt-product-gallery-v6 img{
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: 16px;
}

.nt-product-summary-v6__topline{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.nt-product-summary-v6 h1{
  font-size: clamp(1.6rem, 3.5vw, 2.35rem);
  font-weight: 800;
  line-height: 1.25;
  color: #1C1410;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
}
.nt-product-value-prop{
  font-size: 1rem;
  line-height: 1.6;
  color: #3F352E;
  margin: 0 0 24px;
}

.nt-product-price-v6{
  background: rgba(28, 20, 16, 0.027);
  border: 1px solid rgba(28, 20, 16, 0.084);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 24px;
}
.nt-product-price-v6 .nt-micro-label{
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted, #6B5E54);
  margin-bottom: 6px;
}
.nt-product-price-v6__line{
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.nt-product-price-v6__line strong{
  font-size: 1.85rem;
  font-weight: 800;
  color: #1C1410;
}
.nt-product-price-v6__line strong .woocommerce-Price-currencySymbol{
  color: var(--primary-color, #ff4d16);
}

.nt-product-secondary-actions{
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
  font-size: 0.875rem;
}
.nt-product-secondary-actions a{
  color: #3F352E;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.nt-product-secondary-actions a:hover{
  color: #1C1410;
}

.nt-product-trust-micro{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(28, 20, 16, 0.084);
  font-size: 0.8125rem;
  color: #6B5E54;
}
.nt-product-trust-micro span{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.nt-product-trust-micro i{
  color: var(--primary-color, #ff4d16);
}

/* Product Info Section (What you get, Plan details, Delivery, Conditions) */
.nt-product-information{
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 56px;
  padding-top: 48px;
  border-top: 1px solid rgba(28, 20, 16, 0.096);
}
@media (max-width: 900px) {
  .nt-product-information{
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .nt-product-information__nav{
    display: none;
  }
}

.nt-product-information__nav{
  position: sticky;
  top: 100px;
  align-self: start;
}
.nt-product-information__nav h2{
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.35;
  color: #1C1410;
  margin: 8px 0 24px;
}
.nt-product-information__nav nav{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.nt-product-information__nav nav a{
  font-size: 0.9rem;
  color: #6B5E54;
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 8px;
  transition: all 0.15s ease;
}
.nt-product-information__nav nav a:hover{
  background: rgba(28, 20, 16, 0.036);
  color: #1C1410;
}

.nt-product-info-block{
  display: flex;
  gap: 24px;
  padding: 32px;
  background: #FFFFFF;
  border: 1px solid rgba(28, 20, 16, 0.096);
  border-radius: 18px;
  margin-bottom: 24px;
}
@media (max-width: 600px) {
  .nt-product-info-block{
    flex-direction: column;
    padding: 22px;
    gap: 16px;
  }
}
.nt-product-info-block__index{
  font-size: 1.5rem;
  font-weight: 800;
  font-family: monospace;
  color: var(--primary-color, #ff4d16);
  opacity: 0.85;
  line-height: 1;
  flex-shrink: 0;
}
.nt-product-info-block > div{
  flex: 1 1 auto;
  min-width: 0;
}
.nt-product-info-block h3{
  font-size: 1.15rem;
  font-weight: 700;
  color: #1C1410;
  margin: 6px 0 12px;
  line-height: 1.4;
}
.nt-product-info-block p{
  font-size: 0.92rem;
  line-height: 1.65;
  color: #3F352E;
  margin: 0 0 14px;
}

/* Rich Description Content */
.nt-product-description-content{
  font-size: 0.95rem;
  line-height: 1.75;
  color: #1C1410;
  margin-top: 12px;
  word-break: break-word;
}
.nt-product-description-content p{
  margin: 0 0 14px;
  font-size: 0.95rem;
  line-height: 1.75;
  color: #1C1410;
}
.nt-product-description-content a{
  color: var(--primary-color, #ff4d16)  !important;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  word-break: break-all;
  transition: color 0.15s ease;
}
.nt-product-description-content a:hover{
  color: #1C1410  !important;
}
.nt-product-description-content ul,
.nt-product-description-content ol{
  margin: 8px 0 16px 20px;
  padding: 0;
}
.nt-product-description-content li{
  margin-bottom: 6px;
  color: #1C1410;
}
.nt-product-description-content strong,
.nt-product-description-content b{
  color: #1C1410;
  font-weight: 700;
}
.nt-product-description-content code{
  background: rgba(28, 20, 16, 0.072);
  border: 1px solid rgba(28, 20, 16, 0.144);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.875rem;
  color: #1C1410;
  font-family: monospace;
}



/* 11.0.1 — selected storefront polish: live search + automatic categories. */
.bm-section__head--row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;}.bm-section__head--row>div{min-width:0;}.bm-text-link{flex:0 0 auto;color:var(--text-muted);font-size:.8125rem;font-weight:700;}.bm-text-link:hover{color:var(--text-main);}
.bm-hero-search{position:relative;display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:8px;max-width:720px;margin-top:28px;padding:7px;border:1px solid rgba(28, 20, 16, 0.144);border-radius:16px;background:rgba(28, 20, 16, 0.041);box-shadow:0 14px 34px rgba(28, 20, 16, 0.056);}
.bm-hero-search:focus-within{border-color:rgba(255,77,22,.55);box-shadow:0 0 0 3px rgba(255,77,22,.09),0 16px 38px rgba(28, 20, 16, 0.07);}
.bm-hero-search__icon{display:grid;place-items:center;width:42px;height:42px;color:var(--text-muted);}
.bm-hero-search input{min-width:0;width:100%;height:46px;padding:0 6px;border:0;outline:0;background:transparent;color:var(--text-main);font:inherit;font-size:.94rem;}
.bm-hero-search input::placeholder{color:#6B5E54;}.bm-hero-search__submit{min-height:44px;padding-inline:18px;}
.bm-hero-search__results{top:calc(100% + 10px);left:0;right:0;z-index:70;}.bm-hero-search__categories{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-top:10px;color:var(--text-muted);font-size:.76rem;}.bm-hero-search__categories>span{font-weight:700;}.bm-hero-search__categories a{padding:5px 9px;border:1px solid rgba(28, 20, 16, 0.108);border-radius:999px;background:rgba(28, 20, 16, 0.023);color:#1C1410;}.bm-hero-search__categories a:hover{border-color:rgba(255,77,22,.35);color:#1C1410;}
.bm-cat-grid--auto{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));}.bm-cat__meta{display:block;margin:-4px 0 7px;color:#6B5E54;font-size:.7rem;font-weight:700;letter-spacing:.025em;}.bm-cat-grid--auto .bm-cat{min-height:210px;}
@media(max-width:760px){.bm-section__head--row{align-items:flex-start;flex-direction:column;gap:10px;}.bm-hero-search{grid-template-columns:34px minmax(0,1fr) auto;margin-top:22px;padding:5px;border-radius:14px;}.bm-hero-search__icon{width:34px;height:38px;}.bm-hero-search input{height:42px;font-size:.875rem;}.bm-hero-search__submit{min-height:40px;padding-inline:13px;font-size:.78rem;}.bm-hero-search__categories{gap:6px;}.bm-cat-grid--auto{grid-template-columns:repeat(2,minmax(0,1fr));}.bm-cat-grid--auto .bm-cat{min-height:174px;}}
@media(max-width:380px){.bm-hero-search__submit{padding-inline:11px;}.bm-hero-search__categories a{padding:4px 7px;}.bm-cat-grid--auto{gap:8px;}}

.bm-drawer__search{width:100%;display:flex;align-items:center;gap:10px;padding:12px 0;border:0;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer;}.bm-drawer__search:hover{color:var(--primary-color);}

/* 11.0.2 search discovery: compact, useful, and aligned with the selected storefront. */
.nt-live-search-discovery{display:grid;gap:12px;padding:14px;}
.nt-live-search-discovery__title{color:var(--text-muted);font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;}
.nt-live-search-chips{display:flex;flex-wrap:wrap;gap:7px;}
.nt-live-search-chip{display:inline-flex;align-items:center;min-height:32px;padding:6px 10px;border:1px solid rgba(28, 20, 16, 0.12);border-radius:999px;background:rgba(28, 20, 16, 0.032);color:#1C1410;font:inherit;font-size:.75rem;font-weight:700;cursor:pointer;}
.nt-live-search-chip:hover,.nt-live-search-chip:focus-visible{border-color:rgba(253,119,2,.45);background:rgba(253,119,2,.08);color:#1C1410;outline:none;}
@media(max-width:520px){.nt-live-search-discovery{padding:11px;}.nt-live-search-chip{min-height:30px;padding:5px 8px;font-size:.7rem;}}