/* =========================================================================
   Bargain Bill — main.css
   Conversion-focused clearance store theme.
   Sections: tokens · base · buttons · header · hero · badges · cards ·
             rails · archive/filters · single product · trust · footer · a11y
   ========================================================================= */

/* ---------- Design tokens ------------------------------------------------ */
:root {
	--bb-ink:       #10233d;   /* deep trust navy */
	--bb-ink-2:     #1c3454;
	--bb-text:      #1f2a37;
	--bb-muted:     #5b6b7d;
	--bb-line:      #e3e8ef;
	--bb-bg:        #ffffff;
	--bb-bg-soft:   #f5f7fa;
	--bb-bg-softer: #eef2f7;

	--bb-deal:      #bd3b3b;   /* primary red: buttons, badges, prices, highlights */
	--bb-deal-dark: #9f3131;   /* hover / pressed */
	--bb-deal-ink:  #ffffff;
	--bb-red-soft:  #d98a8a;   /* light red for accents on dark backgrounds */
	--bb-accent:    #bd3b3b;   /* alias to the primary red (legacy references) */
	--bb-green:     #12915a;   /* verified (kept: semantic trust signal) */
	--bb-gold:      #ffb100;   /* star ratings only */

	--bb-radius:    14px;
	--bb-radius-sm: 9px;
	--bb-shadow:    0 1px 2px rgba(16,35,61,.06), 0 6px 20px rgba(16,35,61,.07);
	--bb-shadow-lg: 0 12px 40px rgba(16,35,61,.14);
	--bb-container: 1240px;

	--bb-font:      'Hanken Grotesk', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--bb-font-head: 'Bricolage Grotesque', 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ---------- Base --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body {
	margin: 0;
	font-family: var(--bb-font);
	color: var(--bb-text);
	background: var(--bb-bg);
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--bb-ink); text-decoration: none; }
a:hover { color: var(--bb-deal); }

h1, h2, h3 { font-family: var(--bb-font-head); line-height: 1.12; letter-spacing: -.015em; color: var(--bb-ink); margin: 0 0 .5em; }

.bb-container {
	width: 100%;
	max-width: var(--bb-container);
	margin-inline: auto;
	padding-inline: 20px;
}

.bb-ico { flex: 0 0 auto; vertical-align: middle; }

/* ---------- Buttons ------------------------------------------------------ */
.bb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	font-weight: 700;
	font-size: .95rem;
	line-height: 1;
	padding: .8em 1.3em;
	border-radius: 999px;
	border: 2px solid transparent;
	cursor: pointer;
	transition: transform .08s ease, background .15s ease, box-shadow .15s ease;
	text-align: center;
}
.bb-btn:active { transform: translateY(1px); }
.bb-btn--primary { background: var(--bb-deal); color: #fff; }
.bb-btn--primary:hover { background: var(--bb-deal-dark); color: #fff; box-shadow: 0 8px 20px rgba(189,59,59,.30); }
.bb-btn--ghost { background: transparent; border-color: rgba(255,255,255,.5); color: #fff; }
.bb-btn--ghost:hover { background: rgba(255,255,255,.12); color: #fff; }
.bb-archive__filter-toggle.bb-btn--ghost { border-color: var(--bb-line); color: var(--bb-ink); }
.bb-btn--lg { padding: 1em 1.6em; font-size: 1.05rem; }
.bb-btn--block { width: 100%; }

/* WooCommerce default buttons -> theme buttons */
.woocommerce a.button, .woocommerce button.button, .woocommerce .button,
.woocommerce a.button.alt, .woocommerce button.button.alt,
.woocommerce .single_add_to_cart_button,
.woocommerce #respond input#submit, .woocommerce #respond input#submit.alt {
	background: var(--bb-deal);
	background-color: var(--bb-deal);
	color: #fff;
	border-radius: 999px;
	font-weight: 700;
	padding: .8em 1.3em;
}
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover,
.woocommerce .single_add_to_cart_button:hover,
.woocommerce #respond input#submit.alt:hover { background: var(--bb-deal-dark); background-color: var(--bb-deal-dark); }

/* ---------- Promo bar + header ------------------------------------------ */
.bb-promobar {
	background: var(--bb-ink);
	color: #dbe6f5;
	font-size: .82rem;
	padding: 7px 0;
}
.bb-promobar .bb-container { display: flex; gap: 14px; align-items: center; justify-content: center; flex-wrap: wrap; }
.bb-promobar span { display: inline-flex; align-items: center; gap: 6px; }
.bb-promobar .bb-ico { width: 15px; height: 15px; color: var(--bb-red-soft); }
.bb-promobar__sep { color: rgba(255,255,255,.35); }

.bb-header { background: #fff; border-bottom: 1px solid var(--bb-line); position: sticky; top: 0; z-index: 50; }
.bb-header.is-stuck { box-shadow: var(--bb-shadow); }
.bb-header__inner {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 18px;
	padding-block: 14px;
}
.bb-header__brand { display: flex; align-items: center; }
.bb-logo { font-family: var(--bb-font-head); font-size: 1.5rem; font-weight: 800; color: var(--bb-ink); letter-spacing: -.02em; display: inline-flex; align-items: center; }
.bb-logo__mark {
	background: var(--bb-deal); color: #fff; width: 1.5em; height: 1.5em;
	display: inline-grid; place-items: center; border-radius: 8px; margin-right: .35em; font-weight: 800;
}
.custom-logo { max-height: 54px; width: auto; }

.bb-header__search { max-width: 560px; width: 100%; }
.bb-header__actions { display: flex; align-items: center; gap: 6px; }
.bb-header__account, .bb-header__cart {
	position: relative; display: inline-grid; place-items: center;
	width: 44px; height: 44px; border-radius: 10px; color: var(--bb-ink);
}
.bb-header__account:hover, .bb-header__cart:hover { background: var(--bb-bg-soft); color: var(--bb-ink); }
.bb-header__cart-count {
	position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px;
	background: var(--bb-deal); color: #fff; font-size: .68rem; font-weight: 700;
	border-radius: 999px; display: grid; place-items: center;
}
.bb-nav-toggle { display: none; background: none; border: 0; width: 44px; height: 44px; cursor: pointer; }
.bb-nav-toggle__bars, .bb-nav-toggle__bars::before, .bb-nav-toggle__bars::after {
	content: ""; display: block; width: 22px; height: 2px; background: var(--bb-ink); border-radius: 2px; margin: 0 auto; position: relative;
}
.bb-nav-toggle__bars::before { position: absolute; top: -7px; }
.bb-nav-toggle__bars::after { position: absolute; top: 7px; }

/* Search field */
.bb-search { display: flex; border: 2px solid var(--bb-line); border-radius: 999px; overflow: hidden; background: #fff; transition: border-color .15s ease; }
.bb-search:focus-within { border-color: var(--bb-ink); }
.bb-search__field { flex: 1; border: 0; padding: .7em 1.1em; font-size: .95rem; outline: none; background: transparent; }
.bb-search__submit { border: 0; background: var(--bb-ink); color: #fff; width: 48px; display: grid; place-items: center; cursor: pointer; }
.bb-search__submit:hover { background: var(--bb-deal); }

/* Live search dropdown */
.bb-search-wrap { position: relative; width: 100%; }
.bb-search__results {
	position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 65;
	background: #fff; border: 1px solid var(--bb-line); border-radius: 12px;
	box-shadow: var(--bb-shadow-lg); max-height: 72vh; overflow-y: auto; padding: 6px;
}
.bb-search__results[hidden] { display: none; }
.bb-search-results__list { list-style: none; margin: 0; padding: 0; }
.bb-search-item a { display: flex; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 8px; }
.bb-search-item a:hover { background: var(--bb-bg-soft); }
.bb-search-item__media img { width: 46px; height: 46px; object-fit: contain; background: var(--bb-bg-soft); border-radius: 8px; display: block; }
.bb-search-item__text { min-width: 0; display: flex; flex-direction: column; }
.bb-search-item__title { font-size: .88rem; font-weight: 600; color: var(--bb-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bb-search-item__price { font-weight: 800; color: var(--bb-ink); font-size: .85rem; }
.bb-search-item__price del { color: var(--bb-muted); font-weight: 500; font-size: .78rem; margin-right: 4px; }
.bb-search-item__price ins { text-decoration: none; color: var(--bb-deal); }
.bb-search-results__all { display: block; text-align: center; padding: 11px; font-weight: 700; color: var(--bb-deal); border-top: 1px solid var(--bb-line); margin-top: 6px; }
.bb-search-results__all:hover { color: var(--bb-deal-dark); background: var(--bb-bg-soft); border-radius: 8px; }
.bb-search-results__empty, .bb-search-results__loading { padding: 20px; text-align: center; color: var(--bb-muted); font-size: .9rem; }

/* Primary nav */
.bb-primary-nav { border-top: 1px solid var(--bb-line); background: #fff; }
.bb-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.bb-menu a { display: block; padding: 12px 14px; font-weight: 600; font-size: .92rem; color: var(--bb-ink); border-radius: 8px; }
.bb-menu a:hover { background: var(--bb-bg-soft); color: var(--bb-deal); }
.bb-menu .current-menu-item > a { color: var(--bb-deal); }

/* ---------- Hero --------------------------------------------------------- */
.bb-hero { background: radial-gradient(120% 140% at 15% 0%, var(--bb-ink-2) 0%, var(--bb-ink) 55%); color: #fff; overflow: hidden; }
.bb-hero__inner { display: grid; grid-template-columns: 1.2fr .8fr; gap: 40px; align-items: center; padding-block: 64px; }
.bb-hero__eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; font-weight: 700; color: var(--bb-red-soft); margin: 0 0 14px; }
.bb-hero__title { font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 800; color: #fff; letter-spacing: -.02em; margin: 0 0 18px; }
.bb-hero__title span { color: var(--bb-accent); }
.bb-hero__lead { font-size: 1.12rem; color: #c9d6e8; max-width: 34ch; margin: 0 0 26px; }
.bb-hero__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 26px; }
.bb-hero__proof { list-style: none; margin: 0; padding: 0; display: flex; gap: 22px; flex-wrap: wrap; }
.bb-hero__proof li { display: inline-flex; align-items: center; gap: 7px; font-size: .9rem; color: #c9d6e8; font-weight: 600; }
.bb-hero__proof .bb-ico { color: var(--bb-red-soft); width: 17px; height: 17px; }
.bb-hero__panel { position: relative; min-height: 260px; display: grid; place-items: center; }
.bb-hero__blob { position: absolute; inset: 10% 0; background: radial-gradient(circle, rgba(189,59,59,.32), transparent 65%); filter: blur(10px); }
.bb-hero__ticket {
	position: relative; background: var(--bb-deal); color: #fff; width: 190px; height: 190px; border-radius: 26px;
	display: grid; place-content: center; text-align: center; transform: rotate(-8deg); box-shadow: var(--bb-shadow-lg);
}
.bb-hero__ticket-off { font-size: 3.4rem; font-weight: 800; line-height: 1; }
.bb-hero__ticket-label { text-transform: uppercase; letter-spacing: .1em; font-size: .8rem; opacity: .85; }

/* ---------- Section heads ------------------------------------------------ */
.bb-section-head { margin-bottom: 24px; }
.bb-section-head h2 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; }
.bb-section-head p { color: var(--bb-muted); margin: 0; }
.bb-section-head--center { text-align: center; }

/* ---------- Trust bar ---------------------------------------------------- */
.bb-trustbar { background: var(--bb-bg-soft); border-bottom: 1px solid var(--bb-line); }
.bb-trustbar__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding-block: 22px; }
.bb-trustbar__item { display: flex; gap: 12px; align-items: center; }
.bb-trustbar__item .bb-ico { width: 28px; height: 28px; color: var(--bb-green); }
.bb-trustbar__item strong { display: block; font-size: .95rem; color: var(--bb-ink); }
.bb-trustbar__item span { font-size: .82rem; color: var(--bb-muted); }

/* ---------- Category tiles ---------------------------------------------- */
.bb-cats { padding-block: 54px; }
.bb-cats__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.bb-cats__tile a { position: relative; display: block; border-radius: var(--bb-radius); overflow: hidden; box-shadow: var(--bb-shadow); background: var(--bb-ink); aspect-ratio: 4/3; }
.bb-cats__media { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .85; transition: transform .3s ease; background-color: var(--bb-ink-2); }
.bb-cats__tile a:hover .bb-cats__media { transform: scale(1.06); }
.bb-cats__label { position: absolute; inset: auto 0 0 0; padding: 30px 16px 14px; background: linear-gradient(transparent, rgba(9,18,32,.85)); color: #fff; }
.bb-cats__label strong { display: block; font-size: 1.05rem; font-weight: 700; }
.bb-cats__label em { font-style: normal; font-size: .8rem; color: var(--bb-red-soft); }

/* ---------- Badge system ------------------------------------------------- */
.bb-badge-row { display: flex; flex-wrap: wrap; gap: 6px; }
.bb-badge {
	display: inline-flex; align-items: center; gap: 4px;
	font-size: .72rem; font-weight: 800; letter-spacing: .01em;
	padding: 4px 8px; border-radius: 6px; line-height: 1; text-transform: uppercase;
}
.bb-badge--saving { background: var(--bb-deal); color: #fff; }
.bb-badge--condition { background: var(--bb-bg-softer); color: var(--bb-ink); }
.bb-badge--condition.is-new { background: #e3f6ec; color: #0c6b41; }
.bb-badge--condition.is-new-other { background: #e7f0fb; color: #1c4f96; }
.bb-badge--condition.is-used { background: #fdf0e2; color: #9a5a13; }
.bb-badge--condition.is-refurb { background: #efeafb; color: #5b3ca8; }
.bb-badge--scarcity { background: #fff2f1; color: var(--bb-deal); border: 1px solid #ffd9d6; }
.bb-badge--scarcity.is-low { background: #fff6e6; color: #9a5a13; border-color: #ffe6b8; }
.bb-badge-row--overlay { position: absolute; top: 10px; left: 10px; z-index: 2; }
.bb-badge-row--single { margin-bottom: 12px; }

/* ---------- Product cards ------------------------------------------------ */
ul.products { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }

/* WooCommerce legacy-layout reset.
   On WC pages the body carries .woocommerce, which triggers WooCommerce's old
   float grid (li.product{width:22%;float}, gallery/summary at 48% floats). That
   fights our CSS grid and squashes the cards. Neutralise it so our grid owns
   sizing. Homepage rails are unaffected (that page has no .woocommerce body). */
.woocommerce ul.products,
.woocommerce-page ul.products { display: grid; }
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	width: auto;
	float: none;
	margin: 0;
	clear: none;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; display: none; }
.woocommerce div.product .woocommerce-product-gallery,
.woocommerce div.product div.summary,
.woocommerce div.product .entry-summary,
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .related,
.woocommerce div.product .upsells {
	width: auto;
	float: none;
	margin-left: 0;
	margin-right: 0;
}
.woocommerce div.product::before,
.woocommerce div.product::after { content: none; display: none; }
.bb-archive__grid ul.products,
.bb-shop ul.products { grid-template-columns: repeat(4, 1fr); }

.bb-card {
	position: relative; background: #fff; border: 1px solid var(--bb-line); border-radius: var(--bb-radius);
	overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.bb-card:hover { box-shadow: var(--bb-shadow-lg); transform: translateY(-3px); border-color: #d3dce8; }
.bb-card__media { position: relative; aspect-ratio: 1/1; background: var(--bb-bg-soft); overflow: hidden; }
.bb-card__img { width: 100%; height: 100%; object-fit: contain; padding: 10px; mix-blend-mode: multiply; }
.bb-card__scarcity {
	position: absolute; bottom: 8px; left: 8px; z-index: 2;
	background: rgba(16,35,61,.88); color: #fff; font-size: .7rem; font-weight: 700;
	padding: 4px 8px; border-radius: 6px;
}
.bb-card__body { padding: 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.bb-card__cat, .bb-card__cat a { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--bb-muted); font-weight: 700; }
.bb-card__title { font-family: var(--bb-font); letter-spacing: 0; font-size: .92rem; font-weight: 600; line-height: 1.35; margin: 0; min-height: 2.5em; overflow-wrap: anywhere; }
.bb-card__title a { color: var(--bb-text); }
.bb-card__title a:hover { color: var(--bb-deal); }
.bb-card__price { font-size: 1.2rem; font-weight: 800; color: var(--bb-ink); margin-top: auto; }
.bb-card__price del { color: var(--bb-muted); font-weight: 500; font-size: .85rem; margin-right: 6px; }
.bb-card__price ins { text-decoration: none; color: var(--bb-deal); }
.bb-card__save { margin: -2px 0 0; font-size: .78rem; font-weight: 700; color: var(--bb-green); }
.bb-card__reassure { margin: 0; font-size: .72rem; color: var(--bb-muted); display: flex; align-items: center; gap: 5px; }
.bb-card__reassure .bb-ico { width: 13px; height: 13px; color: var(--bb-green); }
.bb-card__cta { margin-top: 6px; }
.bb-card__cta .added_to_cart { display: none; }

/* ---------- Rails -------------------------------------------------------- */
.bb-rail { padding-block: 48px; }
.bb-rail--accent { background: var(--bb-bg-soft); }
.bb-rail__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.bb-rail__title { font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 800; margin: 0; }
.bb-rail__subtitle { color: var(--bb-muted); margin: 4px 0 0; }
.bb-rail__all { font-weight: 700; color: var(--bb-deal); white-space: nowrap; }
.bb-rail__track.products { grid-template-columns: repeat(4, 1fr); }

/* ---------- Archive / filters ------------------------------------------- */
.bb-woo { padding-block: 28px 60px; }
.bb-archive__head { margin-bottom: 20px; }
.bb-archive__title { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; }
.bb-archive__layout { display: grid; grid-template-columns: 260px 1fr; gap: 28px; align-items: start; }
.bb-archive__filter-toggle { display: none; margin-bottom: 16px; }

.bb-archive__aside { position: sticky; top: 96px; }
.bb-filters { background: #fff; border: 1px solid var(--bb-line); border-radius: var(--bb-radius); padding: 18px; }
.bb-filters__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.bb-filters__head h2 { font-size: 1.05rem; margin: 0; }
.bb-filters__reset { background: none; border: 0; color: var(--bb-deal); font-weight: 700; cursor: pointer; font-size: .82rem; }
.bb-filter-group { border: 0; border-top: 1px solid var(--bb-line); margin: 0; padding: 14px 0 4px; }
.bb-filter-group legend { font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; color: var(--bb-ink); padding: 0; margin-bottom: 8px; }
.bb-check { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: .9rem; cursor: pointer; color: var(--bb-text); }
.bb-check input { width: 17px; height: 17px; accent-color: var(--bb-deal); }
.bb-check--solo { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--bb-line); }
.bb-price-range { display: flex; align-items: center; gap: 8px; }
.bb-price-range input { width: 100%; padding: .5em .6em; border: 1px solid var(--bb-line); border-radius: 8px; font-size: .9rem; }
.bb-filter-group select { width: 100%; padding: .55em .6em; border: 1px solid var(--bb-line); border-radius: 8px; font-size: .9rem; background: #fff; }

.bb-archive__toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.bb-archive__count { margin: 0; color: var(--bb-muted); font-size: .9rem; }
.bb-archive__sort select, .woocommerce-ordering select { padding: .55em 2em .55em .8em; border: 1px solid var(--bb-line); border-radius: 999px; font-weight: 600; font-size: .88rem; background: #fff; }
.bb-archive__grid { transition: opacity .2s ease; }
.bb-archive__grid.is-loading { opacity: .45; pointer-events: none; }
.bb-archive__pagination { grid-column: 1 / -1; margin-top: 30px; }
.woocommerce-pagination ul, .bb-pagination ul { list-style: none; display: flex; gap: 6px; padding: 0; margin: 0; justify-content: center; flex-wrap: wrap; }
.woocommerce-pagination a, .woocommerce-pagination span, .bb-pagination a, .bb-pagination span {
	display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 8px;
	border: 1px solid var(--bb-line); border-radius: 9px; font-weight: 700; color: var(--bb-ink);
}
.woocommerce-pagination .current, .bb-pagination .current { background: var(--bb-ink); color: #fff; border-color: var(--bb-ink); }
.bb-empty { padding: 40px; text-align: center; color: var(--bb-muted); grid-column: 1 / -1; }

/* ---------- Single product ---------------------------------------------- */
/* Two-column product layout. Gallery + summary are placed EXPLICITLY by area
   so plugin-injected children (e.g. CommerceKit's empty #cgkit-pdp-gallery-outside,
   PhotoSwipe, sticky add-to-cart) can't steal a grid cell and displace them. */
.single-product div.product {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	grid-template-areas: "gallery summary";
	column-gap: 44px;
	row-gap: 20px;
	align-items: start;
}
.single-product div.product > .woocommerce-product-gallery,
.single-product div.product > .images {
	grid-area: gallery;
	min-width: 0;
	width: 100%;
	float: none;
	margin: 0;
}
.single-product div.product > .images img { max-width: 100%; height: auto; }

/* Native WooCommerce gallery polish (used once CommerceKit is off) */
.woocommerce-product-gallery { position: relative; }
.woocommerce-product-gallery__wrapper { margin: 0; }
.woocommerce-product-gallery__image img { border-radius: var(--bb-radius); width: 100%; height: auto; }
.woocommerce-product-gallery .flex-viewport { border-radius: var(--bb-radius); margin-bottom: 12px; }
.woocommerce-product-gallery ol.flex-control-thumbs {
	display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none;
}
.woocommerce-product-gallery ol.flex-control-thumbs li { width: 68px; margin: 0; float: none; }
.woocommerce-product-gallery ol.flex-control-thumbs img {
	border-radius: 8px; border: 2px solid var(--bb-line); opacity: .65; cursor: pointer; transition: opacity .15s ease, border-color .15s ease;
}
.woocommerce-product-gallery ol.flex-control-thumbs img.flex-active,
.woocommerce-product-gallery ol.flex-control-thumbs img:hover { opacity: 1; border-color: var(--bb-deal); }
.woocommerce-product-gallery__trigger { position: absolute; top: 12px; right: 12px; z-index: 3; }
.single-product div.product > .summary,
.single-product div.product > .entry-summary {
	grid-area: summary;
	min-width: 0;
	width: auto;
	float: none;
	margin: 0;
}
/* Full-width sections span both columns below the fold. */
.single-product div.product > .woocommerce-tabs,
.single-product div.product > .related,
.single-product div.product > .up-sells,
.single-product div.product > .upsells,
.single-product div.product > .bb-related-fallback {
	grid-column: 1 / -1;
}
/* Empty CommerceKit gallery placeholder: span both columns so it can never
   steal a cell (0 height when empty; still works if the plugin fills it). The
   gallery + summary are explicitly area-placed above, so utility children like
   .pswp and the sticky add-to-cart bar (their own CSS positions them) can't
   displace the two-column row. */
.single-product div.product > #cgkit-pdp-gallery-outside {
	grid-column: 1 / -1;
}
.single-product .woocommerce-product-gallery,
.single-product div.product > .images { position: sticky; top: 96px; }
.single-product .woocommerce-product-gallery img,
.single-product div.product > .images img { border-radius: var(--bb-radius); }
.single-product .product_title { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 800; margin: 0 0 12px; }
.single-product .price { font-size: 2rem; font-weight: 800; color: var(--bb-ink); }
.single-product .price del { color: var(--bb-muted); font-size: 1.1rem; font-weight: 500; margin-right: 8px; }
.single-product .price ins { text-decoration: none; color: var(--bb-deal); }
.bb-you-save { display: inline-block; background: #fff2f1; color: var(--bb-deal); font-weight: 700; padding: 6px 12px; border-radius: 8px; font-size: .9rem; margin: 4px 0 16px; }
.single-product .stock { font-weight: 700; }
.single-product .stock.in-stock { color: var(--bb-green); }

.bb-why-cheap { border: 1px solid var(--bb-line); border-radius: var(--bb-radius-sm); margin: 18px 0; background: var(--bb-bg-soft); }
.bb-why-cheap summary { display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 700; padding: 12px 14px; list-style: none; color: var(--bb-ink); }
.bb-why-cheap summary::-webkit-details-marker { display: none; }
.bb-why-cheap summary .bb-ico { color: var(--bb-deal); }
.bb-why-cheap[open] summary { border-bottom: 1px solid var(--bb-line); }
.bb-why-cheap__body { padding: 12px 14px; font-size: .9rem; color: var(--bb-muted); }
.bb-why-cheap__condition { margin-bottom: 0; color: var(--bb-text); }

.bb-trust-strip { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px; }
.bb-trust-strip li { display: inline-flex; align-items: center; gap: 7px; font-size: .85rem; font-weight: 600; color: var(--bb-text); }
.bb-trust-strip .bb-ico { color: var(--bb-green); width: 18px; height: 18px; }

.single-product .cart { margin: 18px 0; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.single-product .cart .quantity input { width: 68px; padding: .7em; border: 1px solid var(--bb-line); border-radius: 8px; }
.single-product .single_add_to_cart_button { flex: 1; min-width: 200px; font-size: 1.05rem; padding: 1em 1.4em; }
.single-product .product_meta { font-size: .82rem; color: var(--bb-muted); margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--bb-line); }

.woocommerce-tabs { grid-column: 1 / -1; margin-top: 20px; }
.woocommerce-tabs ul.tabs { list-style: none; display: flex; gap: 6px; padding: 0; border-bottom: 2px solid var(--bb-line); margin: 0 0 18px; flex-wrap: wrap; }
.woocommerce-tabs ul.tabs li { }
.woocommerce-tabs ul.tabs a { display: block; padding: 12px 18px; font-weight: 700; color: var(--bb-muted); border-bottom: 3px solid transparent; margin-bottom: -2px; }
.woocommerce-tabs ul.tabs li.active a { color: var(--bb-ink); border-bottom-color: var(--bb-deal); }
.related.products, .up-sells { grid-column: 1 / -1; margin-top: 40px; }
.related.products > h2, .up-sells > h2 { font-size: 1.4rem; font-weight: 800; }

/* WooCommerce notices */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
	border-radius: var(--bb-radius-sm); border-left: 4px solid var(--bb-green); background: var(--bb-bg-soft); padding: 14px 16px; list-style: none;
}
.woocommerce-error { border-left-color: var(--bb-deal); }

/* ---------- Sticky add-to-cart bar -------------------------------------- */
.bb-sticky-atc {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
	background: #fff; border-top: 1px solid var(--bb-line);
	box-shadow: 0 -6px 24px rgba(16,35,61,.12);
	transform: translateY(100%); transition: transform .25s ease;
}
.bb-sticky-atc.is-visible { transform: none; }
.bb-sticky-atc__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 10px; }
.bb-sticky-atc__info { display: flex; align-items: center; gap: 12px; min-width: 0; }
.bb-sticky-atc__img { width: 46px; height: 46px; object-fit: contain; border-radius: 8px; background: var(--bb-bg-soft); flex: 0 0 auto; }
.bb-sticky-atc__text { min-width: 0; display: flex; flex-direction: column; }
.bb-sticky-atc__title { font-family: var(--bb-font); font-weight: 600; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46ch; }
.bb-sticky-atc__price { font-weight: 800; color: var(--bb-ink); font-size: 1.05rem; }
.bb-sticky-atc__price del { color: var(--bb-muted); font-weight: 500; font-size: .82rem; margin-right: 5px; }
.bb-sticky-atc__price ins { text-decoration: none; color: var(--bb-deal); }
.bb-sticky-atc__action { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.bb-sticky-atc__scarcity { font-size: .74rem; font-weight: 700; color: var(--bb-deal); white-space: nowrap; }
@media (max-width: 640px) {
	.bb-sticky-atc__img, .bb-sticky-atc__scarcity { display: none; }
	.bb-sticky-atc__title { max-width: none; font-size: .82rem; }
	.bb-sticky-atc__inner { gap: 10px; }
	.bb-sticky-atc__action .bb-btn { padding: .75em 1.2em; white-space: nowrap; }
}

/* ---------- Stars -------------------------------------------------------- */
.bb-stars { display: inline-flex; gap: 2px; }
.bb-star { color: var(--bb-line); }
.bb-star.is-on { color: var(--bb-gold); }

/* ---------- Reviews (editorial) ----------------------------------------- */
.bb-reviews { padding-block: 54px; }
.bb-reviews__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.bb-review-card { background: #fff; border: 1px solid var(--bb-line); border-radius: var(--bb-radius); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .18s ease, transform .18s ease; }
.bb-review-card:hover { box-shadow: var(--bb-shadow-lg); transform: translateY(-3px); }
.bb-review-card__media { position: relative; aspect-ratio: 16/10; background: var(--bb-bg-soft); display: block; overflow: hidden; }
.bb-review-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bb-review-card__flag { position: absolute; top: 12px; left: 12px; background: var(--bb-ink); color: #fff; font-size: .7rem; font-weight: 800; text-transform: uppercase; padding: 4px 9px; border-radius: 6px; }
.bb-review-card__body { padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.bb-review-card__body h3 { font-size: 1.05rem; margin: 0; }
.bb-review-card__meta { font-size: .78rem; color: var(--bb-muted); margin: 0; }
.bb-review-card__excerpt { font-size: .9rem; color: var(--bb-muted); margin: 0; }
.bb-review-card__more { font-weight: 700; color: var(--bb-deal); margin-top: auto; }

/* ---------- Testimonials ------------------------------------------------- */
.bb-testimonials { padding-block: 54px; background: var(--bb-bg-soft); }
.bb-testimonials__score { display: inline-flex; align-items: center; gap: 10px; justify-content: center; }
.bb-testimonials__score strong { font-size: 1.15rem; }
.bb-testimonials__grid { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.bb-testimonial { background: #fff; border: 1px solid var(--bb-line); border-radius: var(--bb-radius); padding: 18px; }
.bb-testimonial blockquote { margin: 10px 0; font-size: .92rem; color: var(--bb-text); }
.bb-testimonial cite { font-style: normal; font-size: .78rem; color: var(--bb-muted); font-weight: 700; }

/* ---------- Newsletter --------------------------------------------------- */
.bb-newsletter { padding-block: 56px; }
.bb-newsletter__inner { background: var(--bb-ink); color: #fff; border-radius: var(--bb-radius); padding: 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center; }
.bb-newsletter__badge { display: inline-block; background: var(--bb-deal); color: #fff; font-weight: 800; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; padding: 5px 10px; border-radius: 6px; margin-bottom: 12px; }
.bb-newsletter__copy h2 { color: #fff; }
.bb-newsletter__copy p { color: #c9d6e8; margin: 0; }
.bb-newsletter__fields { display: flex; gap: 10px; }
.bb-newsletter__fields input { flex: 1; padding: .9em 1.1em; border: 0; border-radius: 999px; font-size: 1rem; }
.bb-newsletter__note { font-size: .78rem; color: #9fb2cc; margin: 10px 0 0; }

/* ---------- Content area / blog ----------------------------------------- */
.bb-content-area { display: grid; grid-template-columns: 1fr 300px; gap: 36px; padding-block: 40px; }
.bb-post-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.bb-post-card { border: 1px solid var(--bb-line); border-radius: var(--bb-radius); overflow: hidden; background: #fff; }
.bb-post-card__media img { aspect-ratio: 16/10; object-fit: cover; width: 100%; }
.bb-post-card__body { padding: 16px; }
.bb-post-card__title { font-size: 1.1rem; margin: 0 0 6px; }
.bb-page-head { margin-bottom: 24px; }
.bb-page-title { font-size: 2rem; font-weight: 800; }

/* ---------- Footer ------------------------------------------------------- */
.bb-trust-module { background: var(--bb-ink); color: #fff; }
.bb-trust-module__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding-block: 34px; }
.bb-trust-module__item { text-align: center; }
.bb-trust-module__item .bb-ico { width: 30px; height: 30px; color: var(--bb-red-soft); margin-bottom: 8px; }
.bb-trust-module__item strong { display: block; font-size: 1rem; }
.bb-trust-module__item span { font-size: .82rem; color: #9fb2cc; }

.bb-footer { background: #0b1626; color: #b8c6da; }
.bb-footer__main {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
	gap: 40px;
	padding-block: 50px;
	align-items: start;
}
.bb-footer a { color: #b8c6da; }
.bb-footer a:hover { color: #fff; }
.bb-footer ul { list-style: none; padding: 0; margin: 0; }
.bb-footer li { padding: 5px 0; font-size: .9rem; }
.bb-footer__heading { color: #fff; font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 14px; }

.bb-footer__logo { font-family: var(--bb-font-head); font-size: 1.4rem; font-weight: 800; color: #fff; }
.bb-footer .custom-logo { max-height: 48px; width: auto; margin-bottom: 4px; }
.bb-footer__about { font-size: .88rem; line-height: 1.6; margin: 14px 0 16px; max-width: 34ch; }
.bb-footer__rating { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: #9fb2cc; }
.bb-footer__rating .bb-stars { flex: 0 0 auto; }

.bb-footer__contact p { font-size: .88rem; line-height: 1.6; margin: 0 0 12px; }
.bb-footer__email { display: inline-block; font-weight: 700; color: #fff; margin-bottom: 16px; }
.bb-footer__email:hover { color: var(--bb-red-soft); }
.bb-footer__contact-btn { display: inline-flex; margin-bottom: 18px; }
.bb-footer .bb-footer__contact-btn.bb-btn--ghost { border-color: rgba(255,255,255,.25); color: #fff; }
.bb-footer .bb-footer__contact-btn.bb-btn--ghost:hover { background: rgba(255,255,255,.1); }
.bb-footer__pay { display: flex; flex-wrap: wrap; gap: 6px; }
.bb-footer__pay li {
	padding: 4px 9px; font-size: .68rem; font-weight: 700; letter-spacing: .02em;
	color: #cdd8e6; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 5px;
}

.bb-footer__bar { border-top: 1px solid rgba(255,255,255,.08); }
.bb-footer__bar .bb-container { display: flex; align-items: center; justify-content: space-between; padding-block: 18px; flex-wrap: wrap; gap: 10px; }
.bb-footer__bar p { margin: 0; font-size: .82rem; }
.bb-footer__menu { display: flex; gap: 16px; list-style: none; margin: 0; padding: 0; font-size: .82rem; }

/* ---------- AJAX cart drawer -------------------------------------------- */
.bb-cart-overlay { position: fixed; inset: 0; background: rgba(9,18,32,.5); opacity: 0; visibility: hidden; transition: opacity .25s ease; z-index: 70; }
.bb-cart-overlay.is-open { opacity: 1; visibility: visible; }
body.bb-cart-open { overflow: hidden; }
.bb-cart-drawer {
	position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 92vw); background: #fff; z-index: 75;
	display: flex; flex-direction: column; transform: translateX(100%); transition: transform .28s ease; box-shadow: var(--bb-shadow-lg);
}
.bb-cart-drawer.is-open { transform: none; }
.bb-cart-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--bb-line); flex: 0 0 auto; }
.bb-cart-drawer__title { margin: 0; font-size: 1.15rem; }
.bb-cart-drawer__close { background: none; border: 0; cursor: pointer; color: var(--bb-ink); width: 40px; height: 40px; display: grid; place-items: center; border-radius: 8px; }
.bb-cart-drawer__close:hover { background: var(--bb-bg-soft); }
.bb-cart-drawer__content { flex: 1; display: flex; flex-direction: column; min-height: 0; }

.bb-cart-drawer .woocommerce-mini-cart { list-style: none; margin: 0; padding: 8px 20px; overflow-y: auto; flex: 1; min-height: 0; }
.bb-cart-drawer .woocommerce-mini-cart__empty-message { padding: 48px 20px; text-align: center; color: var(--bb-muted); }
.bb-cart-drawer li.woocommerce-mini-cart-item { position: relative; padding: 14px 26px 14px 0; border-bottom: 1px solid var(--bb-line); margin: 0; }
.bb-cart-drawer li.woocommerce-mini-cart-item a:not(.remove) { display: flex; gap: 12px; align-items: center; color: var(--bb-text); font-weight: 600; font-size: .88rem; line-height: 1.35; }
.bb-cart-drawer li.woocommerce-mini-cart-item img { width: 54px; height: 54px; object-fit: contain; border-radius: 8px; background: var(--bb-bg-soft); flex: 0 0 auto; margin: 0 !important; float: none !important; }
.bb-cart-drawer li.woocommerce-mini-cart-item .quantity { display: block; margin: 6px 0 0 66px; color: var(--bb-muted); font-size: .82rem; font-weight: 700; }
.bb-cart-drawer li.woocommerce-mini-cart-item a.remove { position: absolute; top: 14px; right: 0; width: 22px; height: 22px; line-height: 20px; text-align: center; border-radius: 50%; background: var(--bb-bg-soft); color: var(--bb-muted) !important; font-size: 15px; }
.bb-cart-drawer li.woocommerce-mini-cart-item a.remove:hover { background: var(--bb-deal); color: #fff !important; }
.bb-cart-drawer .woocommerce-mini-cart__total { display: flex; align-items: baseline; justify-content: space-between; padding: 16px 20px; border-top: 1px solid var(--bb-line); margin: 0; font-weight: 800; font-size: 1.05rem; }
.bb-cart-drawer .woocommerce-mini-cart__total strong { font-weight: 800; }
.bb-cart-drawer .woocommerce-mini-cart__buttons { display: grid; gap: 10px; padding: 0 20px 20px; margin: 0; }
.bb-cart-drawer .woocommerce-mini-cart__buttons a { display: block; text-align: center; border-radius: 999px; padding: .85em 1.2em; font-weight: 700; }
.bb-cart-drawer .woocommerce-mini-cart__buttons a.button:not(.checkout) { background: var(--bb-bg-soft); color: var(--bb-ink); }
.bb-cart-drawer .woocommerce-mini-cart__buttons a.checkout { background: var(--bb-deal); color: #fff; }
.bb-cart-drawer .woocommerce-mini-cart__buttons a.checkout:hover { background: var(--bb-deal-dark); }

/* ---------- Shared WooCommerce form fields ------------------------------ */
.woocommerce form .form-row { margin: 0 0 14px; padding: 0; }
.woocommerce form .form-row label { font-weight: 600; font-size: .85rem; margin-bottom: 5px; display: inline-block; }
.woocommerce .input-text,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce-page .input-text,
.woocommerce select,
.select2-container--default .select2-selection--single {
	padding: .72em .9em !important; border: 1px solid var(--bb-line) !important; border-radius: 8px !important;
	font-size: .95rem; background: #fff; min-height: 46px; line-height: 1.4; box-shadow: none !important;
}
.woocommerce .input-text:focus,
.woocommerce form .form-row textarea:focus { border-color: var(--bb-ink) !important; outline: none; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 44px; }

/* ---------- Cart page --------------------------------------------------- */
.woocommerce-cart table.shop_table { border: 1px solid var(--bb-line); border-radius: var(--bb-radius); border-collapse: separate; border-spacing: 0; overflow: hidden; }
.woocommerce-cart table.shop_table th { background: var(--bb-bg-soft); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
.woocommerce-cart table.cart img { width: 72px; border-radius: 8px; }
.woocommerce-cart table.cart td.product-name a { font-weight: 600; color: var(--bb-text); }
.woocommerce-cart .product-remove a.remove { color: var(--bb-muted) !important; }
.woocommerce-cart .product-remove a.remove:hover { background: var(--bb-deal) !important; color: #fff !important; }
.woocommerce-cart .cart_totals h2 { font-size: 1.3rem; }
.woocommerce-cart .cart_totals table.shop_table { background: #fff; }
.wc-proceed-to-checkout a.checkout-button { background: var(--bb-deal) !important; font-size: 1.05rem; padding: 1em 1.4em !important; border-radius: 999px !important; }
.wc-proceed-to-checkout a.checkout-button:hover { background: var(--bb-deal-dark) !important; }
.woocommerce .cart-collaterals .cross-sells ul.products { margin-top: 16px; }

/* ---------- Checkout (high-converting two-column) ----------------------- */
.woocommerce-checkout form.checkout.woocommerce-checkout {
	display: grid; grid-template-columns: 1.4fr 1fr; column-gap: 40px; align-items: start;
}
.woocommerce-checkout #customer_details { grid-column: 1; grid-row: 1 / span 2; }
.woocommerce-checkout #order_review_heading { grid-column: 2; grid-row: 1; margin-top: 0; font-size: 1.2rem; }
.woocommerce-checkout #order_review {
	grid-column: 2; grid-row: 2; position: sticky; top: 96px;
	background: #fff; border: 1px solid var(--bb-line); border-radius: var(--bb-radius); padding: 22px;
}
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 { width: 100%; float: none; }
.woocommerce-checkout h3 { font-size: 1.15rem; }
.woocommerce-checkout #order_review table.shop_table { border: 0; margin: 0 0 16px; }
.woocommerce-checkout #order_review table.shop_table th,
.woocommerce-checkout #order_review table.shop_table td { padding: 10px 0; }
.woocommerce-checkout #order_review .order-total .amount { color: var(--bb-deal); font-size: 1.25rem; }
.woocommerce-checkout #payment { background: transparent; border-radius: 0; }
.woocommerce-checkout #payment ul.payment_methods { border: 1px solid var(--bb-line); border-radius: var(--bb-radius-sm); background: var(--bb-bg-soft); padding: 12px 16px; }
.woocommerce-checkout #payment div.payment_box { background: #fff; border: 1px solid var(--bb-line); }
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: #fff; }
.woocommerce #payment #place_order,
.woocommerce-checkout #place_order {
	width: 100%; background: var(--bb-deal); color: #fff; font-size: 1.1rem; font-weight: 700;
	padding: 1em 1.4em; border-radius: 999px; margin-top: 10px;
}
.woocommerce #payment #place_order:hover { background: var(--bb-deal-dark); }
.bb-checkout-trust { margin: 4px 0 16px; padding: 14px 16px; background: var(--bb-bg-soft); border-radius: var(--bb-radius-sm); }
.bb-checkout-trust .bb-trust-strip { margin: 0; gap: 12px 18px; }
.bb-checkout-note { color: var(--bb-muted); font-size: .85rem; margin: 0 0 14px; }

/* ---------- Accessibility ----------------------------------------------- */
.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
	height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute;
}
.bb-skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: #fff; padding: 10px 16px; }
.bb-skip-link:focus { left: 10px; top: 10px; }
:focus-visible { outline: 3px solid var(--bb-ink); outline-offset: 2px; }

/* ---------- Responsive --------------------------------------------------- */
@media (max-width: 1024px) {
	.bb-archive__grid ul.products, .bb-shop ul.products, .bb-rail__track.products { grid-template-columns: repeat(3, 1fr); }
	.bb-cats__grid { grid-template-columns: repeat(3, 1fr); }
	.bb-trustbar__grid, .bb-trust-module__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
	.bb-header__inner { grid-template-columns: auto auto 1fr auto; }
	.bb-header__search { order: 5; grid-column: 1 / -1; max-width: none; }
	.bb-nav-toggle { display: block; }
	.bb-primary-nav { display: none; }
	.bb-primary-nav.is-open { display: block; }
	.bb-menu { flex-direction: column; }
	.bb-hero__inner { grid-template-columns: 1fr; padding-block: 44px; }
	.bb-hero__panel { display: none; }
	.single-product div.product { grid-template-columns: 1fr; grid-template-areas: "gallery" "summary"; gap: 24px; }
	.single-product .woocommerce-product-gallery, .single-product div.product > .images, .single-product .summary { position: static; }
	.bb-newsletter__inner { grid-template-columns: 1fr; }
	.bb-reviews__grid, .bb-testimonials__grid { grid-template-columns: 1fr; }
	.bb-content-area { grid-template-columns: 1fr; }
	.bb-footer__main { grid-template-columns: repeat(2, 1fr); gap: 30px; }

	/* Checkout stacks: details, then order review */
	.woocommerce-checkout form.checkout.woocommerce-checkout { grid-template-columns: 1fr; }
	.woocommerce-checkout #customer_details,
	.woocommerce-checkout #order_review_heading,
	.woocommerce-checkout #order_review { grid-column: 1; }
	.woocommerce-checkout #customer_details { grid-row: auto; }
	.woocommerce-checkout #order_review_heading { grid-row: auto; margin-top: 24px; }
	.woocommerce-checkout #order_review { grid-row: auto; position: static; }

	/* Filters become an off-canvas panel */
	.bb-archive__layout { grid-template-columns: 1fr; }
	.bb-archive__filter-toggle { display: inline-flex; }
	.bb-archive__aside { position: fixed; inset: 0 0 0 auto; width: min(340px, 88vw); background: #fff; z-index: 80; padding: 20px; overflow-y: auto; transform: translateX(100%); transition: transform .25s ease; box-shadow: var(--bb-shadow-lg); }
	.bb-archive__aside.is-open { transform: none; }
}

@media (max-width: 640px) {
	.bb-archive__grid ul.products, .bb-shop ul.products, .bb-rail__track.products, .bb-cats__grid, .bb-post-grid { grid-template-columns: repeat(2, 1fr); }
	.bb-hero__proof { gap: 14px; }
	.bb-newsletter__fields { flex-direction: column; }
	.bb-newsletter__inner { padding: 26px; }
	.bb-rail__track.products { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; -webkit-overflow-scrolling: touch; }
	.bb-rail__track.products > li { flex: 0 0 68%; scroll-snap-align: start; }
}

@media (max-width: 420px) {
	.bb-trustbar__grid { grid-template-columns: 1fr; }
	.bb-promobar { font-size: .74rem; }
	.bb-footer__main { grid-template-columns: 1fr; gap: 26px; }
}

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; scroll-behavior: auto !important; }
}