@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

/* ═══════════════════════════════════════════════════════════════════════════
   BBS ECOMMERCE FRONT END — v16 DESIGN SYSTEM
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --n:   #06183A;   /* navy */
  --n2:  #0C2B60;   /* navy mid */
  --n3:  #0A2150;   /* nav hover */
  --blu: #1565C0;   /* blue accent */
  --red: #D32F2F;   /* action red */
  --red2:#F44336;
  --gld: #C8961E;   /* gold accent */
  --gld2:#E8B83A;
  --ink: #111827;
  --mut: #64748B;
  --lne: #E2E8F0;
  --sft: #F7F9FC;
  --wht: #FFFFFF;
  --shd: 0 4px 6px rgba(6,24,58,.04), 0 12px 30px rgba(6,24,58,.08);
  --shd2: 0 8px 16px rgba(6,24,58,.06), 0 24px 56px rgba(6,24,58,.14);
  --r:   8px;
  --r2:  16px;
  --r3:  24px;
  --r4:  32px;
  --trans: 0.2s cubic-bezier(.4,0,.2,1);
}

/* ── BASE ─────────────────────────────────────────────────────────────────── */
.bbs-site {
  font-family: 'Plus Jakarta Sans', Arial, sans-serif;
  color: var(--ink);
  background: #fff;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
.bbs-site *, .bbs-site *::before, .bbs-site *::after { box-sizing: border-box; }
.bbs-site a { text-decoration: none; color: inherit; }
.bbs-site img { display: block; max-width: 100%; }
.bbs-shell { max-width: 1260px; margin: 0 auto; padding: 0 24px; }
.bbs-site h1, .bbs-site h2, .bbs-site h3 {
  font-family: 'DM Serif Display', Georgia, serif;
  font-weight: 400;
}

/* ── ANNOUNCEMENT TICKER ─────────────────────────────────────────────────── */
.bbs-announcement {
  background: var(--n);
  color: rgba(255,255,255,.9);
  overflow: hidden;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .015em;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.bbs-announcement-track {
  display: inline-flex;
  gap: 48px;
  padding: 10px 0;
  animation: bbsScroll 35s linear infinite;
}
.bbs-announcement-track span::before {
  content: '✦';
  margin-right: 14px;
  color: var(--gld2);
  font-size: 9px;
}
@keyframes bbsScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── HEADER SHELL ─────────────────────────────────────────────────────────── */
.bbs-retail-header {
  background: var(--wht);
  box-shadow: 0 1px 0 var(--lne), 0 4px 20px rgba(6,24,58,.05);
  position: sticky;
  top: 0;
  z-index: 120;
}

/* ── TOP ROW: logo / search / actions ─────────────────────────────────────── */
.bbs-retail-head-grid {
  display: grid;
  grid-template-columns: 260px 1fr auto auto;
  gap: 20px;
  align-items: center;
  padding: 16px 24px;
}

/* Logo */
.bbs-logo, .bbs-logo-img-link {
  display: flex;
  align-items: center;
  gap: 0;
  text-decoration: none;
  font-family: 'DM Serif Display', serif;
  font-size: 24px;
  color: var(--n);
  line-height: 1;
  white-space: nowrap;
  flex-shrink: 0;
}
.bbs-logo span { color: var(--red); }
.bbs-logo small {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: var(--mut);
  display: block;
  margin-top: 4px;
  letter-spacing: .01em;
}
.bbs-header-logo-img {
  display: block;
  width: auto;
  max-width: 220px;
  max-height: 64px;
  object-fit: contain;
}

/* Search */
.bbs-search {
  display: flex;
  align-items: center;
  height: 52px;
  background: var(--sft);
  border: 1.5px solid var(--lne);
  border-radius: 999px;
  overflow: hidden;
  transition: var(--trans);
}
.bbs-search:focus-within {
  border-color: var(--blu);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(21,101,192,.1);
}
.bbs-search-icon {
  flex-shrink: 0;
  width: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mut);
  font-size: 22px;
}
.bbs-search input {
  flex: 1;
  border: 0 !important;
  outline: 0 !important;
  background: transparent;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  font-family: 'Plus Jakarta Sans', sans-serif;
  min-width: 0;
}
.bbs-search input::placeholder { color: var(--mut); font-weight: 400; }
.bbs-search button {
  flex-shrink: 0;
  height: 100%;
  border: 0;
  background: var(--n);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  padding: 0 22px;
  cursor: pointer;
  font-family: 'Plus Jakarta Sans', sans-serif;
  transition: var(--trans);
  letter-spacing: .02em;
}
.bbs-search button:hover { background: var(--blu); }

/* Mobile toggle */
.bbs-mobile-toggle {
  display: none;
  align-items: center;
  gap: 8px;
  background: var(--n);
  color: #fff;
  border: 0;
  border-radius: var(--r2);
  padding: 12px 16px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  font-family: 'Plus Jakarta Sans', sans-serif;
  white-space: nowrap;
}

/* Head actions */
.bbs-head-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}
.bbs-advice {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--n);
  padding: 8px 14px;
  border-radius: var(--r2);
  transition: var(--trans);
  text-align: center;
  margin-right: 4px;
  border: 1.5px solid var(--lne);
}
.bbs-advice:hover { background: var(--sft); }
.bbs-advice span { font-size: 11px; color: var(--mut); font-weight: 500; }
.bbs-advice b { font-size: 14px; font-weight: 700; color: var(--n); }
.bbs-head-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 12px;
  border-radius: var(--r2);
  color: var(--ink);
  transition: var(--trans);
  font-size: 11px;
  font-weight: 600;
}
.bbs-head-icon:hover { background: var(--sft); color: var(--n); }
.bbs-head-icon svg { width: 24px; height: 24px; stroke: currentColor; stroke-width: 1.75; fill: none; }

/* ── MEGA-NAV TABS ─────────────────────────────────────────────────────────── */
.bbs-tabs-row {
  border-top: 1px solid var(--lne);
  background: var(--n);
}
.bbs-tabs {
  display: flex;
  align-items: stretch;
  gap: 0;
  max-width: 1260px;
  margin: 0 auto;
  padding: 0 24px;
}
.bbs-tab-wrap {
  position: relative;
  flex: 1;
}
.bbs-tab-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 15px 12px;
  color: rgba(255,255,255,.82);
  font-size: 14px;
  font-weight: 700;
  font-family: 'Plus Jakarta Sans', sans-serif;
  letter-spacing: .01em;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: var(--trans);
  position: relative;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  text-decoration: none;
}
.bbs-tab-btn::after {
  content: '';
  position: absolute;
  bottom: -3px; left: 0; right: 0;
  height: 3px;
  background: var(--gld2);
  transform: scaleX(0);
  transition: transform var(--trans);
}
.bbs-tab-btn:hover, .bbs-tab-btn.active {
  color: #fff;
  background: rgba(255,255,255,.07);
}
.bbs-tab-wrap:hover .bbs-tab-btn::after,
.bbs-tab-btn.active::after { transform: scaleX(1); }
.bbs-tab-btn.offers {
  color: var(--gld2);
  font-weight: 800;
}
.bbs-tab-btn.offers::after { background: var(--gld2); }

/* ── MEGA DROPDOWN ─────────────────────────────────────────────────────────── */
.bbs-mega {
  display: none;
  position: absolute;
  left: 0;
  top: calc(100% + 0px);
  min-width: min(1100px, 90vw);
  background: #fff;
  border: 1px solid var(--lne);
  border-top: 3px solid var(--gld);
  border-radius: 0 0 var(--r3) var(--r3);
  box-shadow: 0 20px 60px rgba(6,24,58,.18), 0 4px 16px rgba(6,24,58,.08);
  z-index: 300;
  overflow: hidden;
}
.bbs-tab-wrap:hover .bbs-mega,
.bbs-tab-wrap:focus-within .bbs-mega,
.bbs-tab-wrap.open .bbs-mega { display: block; }
.bbs-tab-wrap:nth-child(4) .bbs-mega,
.bbs-tab-wrap:nth-child(5) .bbs-mega { left: auto; right: 0; }

.bbs-mega-inner {
  display: grid;
  grid-template-columns: 220px 1fr 240px;
}

/* Mega side panel */
.bbs-mega-side {
  background: var(--n);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.bbs-mega-side h3 {
  color: #fff;
  font-size: 20px;
  margin: 0;
  font-style: italic;
}
.bbs-mega-side p {
  color: rgba(255,255,255,.65);
  font-size: 13px;
  line-height: 1.6;
  margin: 0;
  font-weight: 300;
}
.bbs-btn-white {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.12);
  color: #fff;
  border: 1.5px solid rgba(255,255,255,.25);
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 700;
  transition: var(--trans);
  font-family: 'Plus Jakarta Sans', sans-serif;
  margin-top: auto;
  cursor: pointer;
}
.bbs-btn-white:hover { background: rgba(255,255,255,.22); color: #fff; }

/* Mega content area */
.bbs-mega-content { padding: 24px 28px; }
.bbs-mega-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 32px; }
.bbs-mega-col h4 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--mut);
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--lne);
}
.bbs-mega-col a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--r);
  transition: var(--trans);
}
.bbs-mega-col a::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--lne);
  border-radius: 50%;
  flex-shrink: 0;
  transition: var(--trans);
}
.bbs-mega-col a:hover {
  background: var(--sft);
  color: var(--n);
  padding-left: 14px;
}
.bbs-mega-col a:hover::before { background: var(--gld); }

/* Mega promo panel */
.bbs-mega-promo {
  background: var(--sft);
  border-left: 1px solid var(--lne);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.bbs-mega-promo h4 {
  font-family: 'DM Serif Display', serif;
  font-size: 18px;
  font-weight: 400;
  color: var(--n);
  margin: 0;
}
.bbs-mega-promo p {
  color: var(--mut);
  font-size: 13px;
  line-height: 1.6;
  margin: 0;
  font-weight: 300;
}

/* ── SUBNAV ──────────────────────────────────────────────────────────────── */
.bbs-subnav {
  background: var(--sft);
  border-bottom: 1px solid var(--lne);
}
.bbs-subnav .bbs-shell {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-top: 10px;
  padding-bottom: 10px;
}
.bbs-subnav a {
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  white-space: nowrap;
  transition: var(--trans);
}
.bbs-subnav a:hover { background: var(--n); color: #fff; }

/* ── TRUST / BENEFIT STRIP ───────────────────────────────────────────────── */
.bbs-benefit-strip {
  background: var(--n);
}
.bbs-benefit-strip .bbs-shell {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  padding-bottom: 12px;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.bbs-benefit-strip span {
  color: rgba(255,255,255,.8);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 7px;
}
.bbs-benefit-strip span::before {
  content: '✓';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  background: var(--gld);
  color: var(--n);
  border-radius: 50%;
  font-size: 10px;
  font-weight: 900;
  flex-shrink: 0;
}

/* ── MOBILE DRAWER ───────────────────────────────────────────────────────── */
.bbs-mobile-drawer {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(6,24,58,.6);
  z-index: 9999;
  backdrop-filter: blur(4px);
}
.bbs-mobile-drawer.open { display: block; }
.bbs-drawer-panel {
  width: min(400px, 90vw);
  height: 100%;
  background: #fff;
  overflow-y: auto;
  box-shadow: 20px 0 80px rgba(0,0,0,.3);
  display: flex;
  flex-direction: column;
}
.bbs-drawer-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 22px;
  border-bottom: 1px solid var(--lne);
  background: var(--n);
}
.bbs-drawer-head strong { color: #fff; font-size: 16px; }
.bbs-drawer-close {
  border: 0;
  background: rgba(255,255,255,.12);
  color: #fff;
  border-radius: var(--r);
  padding: 8px 14px;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.bbs-drawer-panel a {
  display: flex;
  align-items: center;
  color: var(--ink);
  font-weight: 600;
  padding: 14px 22px;
  border-bottom: 1px solid var(--lne);
  font-size: 15px;
  transition: var(--trans);
}
.bbs-drawer-panel a:hover { background: var(--sft); color: var(--n); padding-left: 28px; }

/* ── BUTTONS ─────────────────────────────────────────────────────────────── */
.bbs-btn, .bbs-btn-outline, .bbs-btn-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  transition: var(--trans);
  border: 0;
  cursor: pointer;
  font-family: 'Plus Jakarta Sans', sans-serif;
  letter-spacing: .01em;
  white-space: nowrap;
}
.bbs-btn {
  background: var(--n);
  color: #fff;
  box-shadow: 0 6px 20px rgba(6,24,58,.25);
}
.bbs-btn:hover { background: var(--blu); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(21,101,192,.3); color: #fff; }
.bbs-btn-gold {
  background: linear-gradient(135deg, var(--gld), var(--gld2));
  color: var(--n);
  box-shadow: 0 6px 20px rgba(200,150,30,.3);
}
.bbs-btn-gold:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(200,150,30,.4); color: var(--n); }
.bbs-btn-outline {
  background: transparent;
  border: 2px solid rgba(255,255,255,.5);
  color: #fff;
}
.bbs-btn-outline:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.8); color: #fff; }

/* ── HERO ─────────────────────────────────────────────────────────────────── */
.bbs-hero {
  background:
    radial-gradient(ellipse 55% 70% at 85% 20%, rgba(200,150,30,.1) 0%, transparent 55%),
    radial-gradient(ellipse 40% 60% at 15% 75%, rgba(21,101,192,.08) 0%, transparent 50%),
    linear-gradient(150deg, #06183A 0%, #0C2B60 55%, #06183A 100%);
  color: #fff;
  padding: 80px 0 72px;
  position: relative;
  overflow: hidden;
}
.bbs-hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.035) 1px, transparent 0);
  background-size: 42px 42px;
  pointer-events: none;
}
.bbs-hero-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 48px;
  align-items: center;
  position: relative;
  z-index: 2;
}
.bbs-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(200,150,30,.15);
  border: 1px solid rgba(200,150,30,.35);
  color: var(--gld2);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.bbs-kicker::before { content: '●'; font-size: 7px; opacity: .8; }
.bbs-hero h1 {
  font-size: clamp(36px, 5vw, 58px);
  line-height: 1.06;
  letter-spacing: -.5px;
  margin: 0 0 18px;
}
.bbs-hero h1 em { font-style: italic; color: var(--gld2); }
.bbs-hero p {
  font-size: 17px;
  line-height: 1.72;
  color: rgba(255,255,255,.76);
  margin: 0 0 28px;
  max-width: 620px;
  font-weight: 300;
}
.bbs-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

.bbs-showcase { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.bbs-show-card {
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--r3);
  padding: 22px;
  transition: var(--trans);
  cursor: default;
}
.bbs-show-card:nth-child(2) { transform: translateY(20px); }
.bbs-show-card:nth-child(3) { transform: translateY(-8px); }
.bbs-show-card:nth-child(4) { transform: translateY(12px); }
.bbs-show-card:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(200,150,30,.4);
}
.bbs-show-card b {
  display: block;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 6px;
}
.bbs-show-card span {
  color: rgba(255,255,255,.55);
  font-size: 13px;
  line-height: 1.5;
  font-weight: 300;
}

/* ── SECTIONS ─────────────────────────────────────────────────────────────── */
.bbs-section { padding: 72px 0; }
.bbs-soft {
  background: var(--sft);
  border-top: 1px solid var(--lne);
  border-bottom: 1px solid var(--lne);
}
.bbs-section h2 {
  font-size: clamp(26px, 3.5vw, 40px);
  line-height: 1.1;
  color: var(--n);
  margin: 0 0 12px;
  letter-spacing: -.3px;
}
.bbs-section h2 em { font-style: italic; color: var(--gld); }
.bbs-intro {
  font-size: 16px;
  line-height: 1.72;
  color: var(--mut);
  max-width: 720px;
  margin: 0 0 32px;
  font-weight: 300;
}

/* ── PROMO TILES ─────────────────────────────────────────────────────────── */
.bbs-home-promo-grid {
  display: grid;
  grid-template-columns: 1.4fr .8fr .8fr;
  gap: 16px;
}
.bbs-promo-tile {
  border-radius: var(--r3);
  padding: 28px;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  position: relative;
}
.bbs-promo-tile.main {
  background: linear-gradient(145deg, #EEF6FF 0%, #DBEAFE 100%);
  color: var(--n);
  min-height: 280px;
  border: 1px solid #BFDBFE;
}
.bbs-promo-tile.red {
  background: linear-gradient(145deg, var(--n) 0%, var(--n2) 100%);
  color: #fff;
  border: 1px solid rgba(255,255,255,.06);
}
.bbs-promo-tile.dark {
  background: linear-gradient(145deg, #0F2347 0%, #1A3A6E 100%);
  color: #fff;
  border: 1px solid rgba(255,255,255,.06);
}
.bbs-promo-tile h3 {
  font-size: 24px;
  margin: 0 0 10px;
  color: inherit;
}
.bbs-promo-tile p {
  font-size: 14px;
  line-height: 1.6;
  color: inherit;
  opacity: .82;
  margin: 0 0 16px;
  font-weight: 300;
}

/* ── CATEGORY TILES ──────────────────────────────────────────────────────── */
.bbs-category-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}
.bbs-cat-tile {
  background: var(--wht);
  border: 1.5px solid var(--lne);
  border-radius: var(--r2);
  overflow: hidden;
  color: var(--n);
  transition: var(--trans);
  display: flex;
  flex-direction: column;
}
.bbs-cat-tile:hover {
  transform: translateY(-4px);
  border-color: var(--gld);
  box-shadow: var(--shd);
}
.bbs-cat-img {
  height: 90px;
  background: linear-gradient(135deg, #EEF2F7, #E8F0FE);
  background-size: cover;
  background-position: center;
}
.bbs-cat-body {
  padding: 14px;
}
.bbs-cat-body b { font-size: 14px; font-weight: 700; display: block; line-height: 1.3; }
.bbs-cat-body span {
  display: block;
  color: var(--mut);
  font-size: 12px;
  line-height: 1.4;
  margin-top: 4px;
  font-weight: 400;
}

/* ── PRODUCT GRID ────────────────────────────────────────────────────────── */
.bbs-product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.bbs-product-card {
  background: var(--wht);
  border: 1.5px solid var(--lne);
  border-radius: var(--r2);
  overflow: hidden;
  transition: var(--trans);
  display: flex;
  flex-direction: column;
}
.bbs-product-card:hover {
  transform: translateY(-5px);
  border-color: rgba(200,150,30,.4);
  box-shadow: var(--shd2);
}
.bbs-product-img {
  height: 196px;
  background: var(--sft);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border-bottom: 1px solid var(--lne);
}
.bbs-product-body { padding: 16px; display: flex; flex-direction: column; flex: 1; }
.bbs-badge {
  display: inline-flex;
  align-items: center;
  background: rgba(200,150,30,.1);
  color: var(--gld);
  border: 1px solid rgba(200,150,30,.25);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 10px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.bbs-product-body h4 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--n);
  margin: 0 0 6px;
}
.bbs-price {
  font-size: 17px;
  font-weight: 800;
  color: var(--n);
  margin: 0 0 8px;
}
.bbs-product-body p {
  color: var(--mut);
  font-size: 13px;
  line-height: 1.5;
  margin: 0 0 14px;
  flex: 1;
  font-weight: 300;
}
.bbs-link {
  font-size: 13px;
  font-weight: 700;
  color: var(--n);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: var(--trans);
}
.bbs-link:hover { color: var(--blu); gap: 8px; }

/* ── CARD GRID ───────────────────────────────────────────────────────────── */
.bbs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.bbs-card {
  background: var(--wht);
  border: 1.5px solid var(--lne);
  border-radius: var(--r3);
  padding: 24px;
  transition: var(--trans);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.bbs-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gld), var(--gld2));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--trans);
}
.bbs-card:hover { transform: translateY(-4px); box-shadow: var(--shd2); border-color: rgba(200,150,30,.3); }
.bbs-card:hover::after { transform: scaleX(1); }
a.bbs-card:hover { color: inherit; }
.bbs-card h3 {
  font-size: 20px;
  color: var(--n);
  margin: 0 0 10px;
}
.bbs-card p {
  color: var(--mut);
  font-size: 14px;
  line-height: 1.65;
  margin: 0 0 16px;
  flex: 1;
  font-weight: 300;
}

/* ── ROOM / FINISH GRIDS ─────────────────────────────────────────────────── */
.bbs-room-grid, .bbs-finish-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.bbs-room, .bbs-finish {
  background: var(--wht);
  border: 1.5px solid var(--lne);
  border-radius: var(--r2);
  padding: 18px;
  color: var(--n);
  transition: var(--trans);
}
.bbs-room:hover, .bbs-finish:hover {
  transform: translateY(-4px);
  border-color: var(--n);
  box-shadow: var(--shd);
}
.bbs-room b, .bbs-finish b { display: block; font-size: 15px; font-weight: 700; margin-bottom: 5px; }
.bbs-room span, .bbs-finish span { color: var(--mut); font-size: 13px; line-height: 1.5; font-weight: 300; }

/* ── PAGE HERO ───────────────────────────────────────────────────────────── */
.bbs-page-hero {
  background:
    radial-gradient(ellipse 50% 60% at 90% 50%, rgba(200,150,30,.09) 0%, transparent 55%),
    linear-gradient(150deg, #06183A, #0C2B60 60%, #06183A);
  color: #fff;
  padding: 72px 0 64px;
  position: relative;
  overflow: hidden;
}
.bbs-page-hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.03) 1px, transparent 0);
  background-size: 38px 38px;
}
.bbs-page-hero .bbs-shell { position: relative; z-index: 2; }
.bbs-page-hero h1 {
  font-size: clamp(30px, 4.5vw, 50px);
  line-height: 1.08;
  margin: 0 0 16px;
  letter-spacing: -.3px;
}
.bbs-page-hero h1 em { font-style: italic; color: var(--gld2); }
.bbs-page-hero p {
  font-size: 17px;
  line-height: 1.72;
  color: rgba(255,255,255,.75);
  max-width: 820px;
  margin: 0;
  font-weight: 300;
}
.bbs-subcats {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 24px;
}
.bbs-subcat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 8px;
  padding: 9px 16px;
  color: rgba(255,255,255,.88);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  cursor: pointer;
  transition: var(--trans);
}
.bbs-subcat:hover { background: rgba(255,255,255,.16); border-color: rgba(200,150,30,.5); color: #fff; text-decoration: none; }
.bbs-subcat:focus-visible { outline: 3px solid rgba(255,255,255,.9); outline-offset: 3px; }

/* ── SPLIT / PANEL ────────────────────────────────────────────────────────── */
.bbs-split { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; }
.bbs-panel {
  background: var(--sft);
  border: 1.5px solid var(--lne);
  border-radius: var(--r3);
  padding: 32px;
}
.bbs-panel.dark { background: var(--n); border-color: transparent; }
.bbs-panel.dark h2, .bbs-panel.dark h3 { color: #fff; }
.bbs-panel.dark p { color: rgba(255,255,255,.72); }
.bbs-checks { display: grid; gap: 14px; margin-top: 20px; }
.bbs-check {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  color: rgba(255,255,255,.82);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 300;
}
.bbs-check i {
  width: 22px; height: 22px;
  background: linear-gradient(135deg, var(--gld), var(--gld2));
  color: var(--n);
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
  font-size: 12px;
  font-weight: 900;
  flex-shrink: 0;
}

/* ── FAQ ──────────────────────────────────────────────────────────────────── */
.bbs-faq { display: grid; gap: 10px; }
.bbs-faq details {
  background: var(--wht);
  border: 1.5px solid var(--lne);
  border-radius: var(--r2);
  overflow: hidden;
  transition: var(--trans);
}
.bbs-faq details[open] { border-color: rgba(200,150,30,.4); box-shadow: var(--shd); }
.bbs-faq summary {
  font-weight: 700;
  color: var(--n);
  cursor: pointer;
  padding: 18px 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
  list-style: none;
  font-size: 15px;
}
.bbs-faq summary::after { content: '+'; font-size: 20px; font-weight: 300; color: var(--gld); transition: var(--trans); flex-shrink: 0; }
.bbs-faq details[open] summary::after { content: '−'; }
.bbs-faq p { color: var(--mut); line-height: 1.7; padding: 0 22px 18px; margin: 0; font-weight: 300; font-size: 14px; }

/* ── COPY ─────────────────────────────────────────────────────────────────── */
.bbs-copy {
  columns: 2;
  column-gap: 44px;
  color: #334155;
  line-height: 1.78;
  font-size: 15px;
  font-weight: 300;
}
.bbs-copy p { break-inside: avoid; margin-top: 0; }

/* ── FOOTER ──────────────────────────────────────────────────────────────── */
.bbs-footer {
  background: #040E1C;
  color: #fff;
  padding: 56px 0 36px;
}
.bbs-footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 36px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  margin-bottom: 24px;
}
.bbs-footer h3 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(255,255,255,.35);
  margin: 0 0 16px;
}
.bbs-footer p, .bbs-footer a {
  color: rgba(255,255,255,.58);
  line-height: 1.72;
  font-size: 14px;
  font-weight: 300;
  transition: var(--trans);
}
.bbs-footer a:hover { color: var(--gld2); }
.bbs-footer-brand p { max-width: 300px; }
.bbs-footer-logo {
  font-family: 'DM Serif Display', serif;
  font-size: 22px;
  color: #fff;
  margin-bottom: 14px;
  display: block;
}
.bbs-footer-logo em { font-style: italic; color: var(--gld2); }

/* ── FLOAT CTA ───────────────────────────────────────────────────────────── */
.bbs-float-cta {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 80;
  background: var(--n);
  color: #fff;
  border-radius: 999px;
  padding: 13px 24px;
  font-weight: 700;
  font-size: 14px;
  box-shadow: 0 8px 28px rgba(6,24,58,.3);
  transition: var(--trans);
  font-family: 'Plus Jakarta Sans', sans-serif;
  border: 0;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.bbs-float-cta:hover { background: var(--gld); color: var(--n); transform: translateY(-2px); }
.bbs-float-cta::after { content: '→'; }

/* ── HIDE WP PAGE TITLES ─────────────────────────────────────────────────── */
.entry-title, .page-title, h1.entry-title { display: none !important; }

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .bbs-retail-head-grid { grid-template-columns: 1fr auto auto; gap: 14px; }
  .bbs-category-grid { grid-template-columns: repeat(3, 1fr); }
  .bbs-product-grid { grid-template-columns: repeat(3, 1fr); }
  .bbs-benefit-strip .bbs-shell { gap: 4px; }
  .bbs-home-promo-grid { grid-template-columns: 1fr 1fr; }
  .bbs-promo-tile.main { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .bbs-mobile-toggle { display: inline-flex; }
  .bbs-tabs-row { display: none; }
  .bbs-subnav { display: none; }
  .bbs-hero-grid, .bbs-split { grid-template-columns: 1fr; }
  .bbs-showcase { transform: none; }
  .bbs-show-card:nth-child(2),
  .bbs-show-card:nth-child(3),
  .bbs-show-card:nth-child(4) { transform: none; }
  .bbs-grid, .bbs-room-grid, .bbs-finish-grid { grid-template-columns: 1fr 1fr; }
  .bbs-home-promo-grid { grid-template-columns: 1fr; }
  .bbs-copy { columns: 1; }
  .bbs-product-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .bbs-retail-head-grid { grid-template-columns: 1fr auto; }
  .bbs-head-actions { display: none; }
  .bbs-hero h1, .bbs-page-hero h1 { font-size: 32px; }
  .bbs-section h2 { font-size: 26px; }
  .bbs-category-grid, .bbs-product-grid, .bbs-grid,
  .bbs-room-grid, .bbs-finish-grid, .bbs-footer-grid { grid-template-columns: 1fr; }
  .bbs-benefit-strip .bbs-shell { display: grid; grid-template-columns: 1fr 1fr; }
  .bbs-float-cta { display: none; }
  .bbs-search button { display: none; }
}

/* ═══ v17 ADDITIONS ════════════════════════════════════════════════════════ */

/* Breadcrumbs */
.bbs-crumbs { background: var(--sft); border-bottom: 1px solid var(--lne); }
.bbs-crumbs ol {
  list-style: none;
  margin: 0; padding: 12px 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font-size: 13px;
}
.bbs-crumbs li { display: flex; align-items: center; gap: 6px; }
.bbs-crumbs li:not(:last-child)::after { content: '/'; color: var(--mut); opacity: .5; }
.bbs-crumbs a { color: var(--mut); font-weight: 500; transition: var(--trans); }
.bbs-crumbs a:hover { color: var(--n); }
.bbs-crumbs li[aria-current] span { color: var(--n); font-weight: 700; }

/* Was / sale price */
.bbs-was { color: var(--mut); font-weight: 500; font-size: 14px; margin-left: 6px; text-decoration: line-through; }
.bbs-price-cta { color: var(--blu); font-weight: 700; font-size: 14px; }

/* Internal links block */
.bbs-ilink-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.bbs-ilink {
  display: flex; flex-direction: column;
  background: var(--wht);
  border: 1.5px solid var(--lne);
  border-radius: var(--r2);
  padding: 22px;
  transition: var(--trans);
}
.bbs-ilink:hover { transform: translateY(-3px); border-color: var(--gld); box-shadow: var(--shd); }
.bbs-ilink b { font-size: 16px; color: var(--n); margin-bottom: 6px; font-weight: 700; }
.bbs-ilink span { font-size: 13px; color: var(--mut); line-height: 1.55; font-weight: 300; margin-bottom: 12px; flex: 1; }
.bbs-ilink em { font-style: normal; font-size: 13px; font-weight: 700; color: var(--blu); }

/* Drawer accordion + top/foot */
.bbs-drawer-top {
  font-weight: 800 !important;
  color: var(--n) !important;
  background: var(--sft);
}
.bbs-drawer-acc { border-bottom: 1px solid var(--lne); }
.bbs-drawer-acc summary {
  list-style: none;
  cursor: pointer;
  padding: 15px 22px;
  font-weight: 700;
  font-size: 15px;
  color: var(--n);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.bbs-drawer-acc summary::after { content: '+'; font-size: 20px; font-weight: 300; color: var(--gld); }
.bbs-drawer-acc[open] summary::after { content: '−'; }
.bbs-drawer-acc-body { padding: 0 0 8px; background: var(--sft); }
.bbs-drawer-acc-body a {
  padding: 11px 30px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  border-bottom: 0 !important;
}
.bbs-drawer-foot { padding: 16px 0; }
.bbs-drawer-foot a { font-size: 14px; }

/* Product image accessible role tweak */
.bbs-product-img[role="img"] { background-color: var(--sft); }

@media (max-width: 900px) {
  .bbs-ilink-grid { grid-template-columns: 1fr; }
}

/* v18 refinements */
.bbs-mega-img-link{display:grid!important;grid-template-columns:54px 1fr;gap:12px;align-items:center;padding:10px 0!important;border-bottom:1px solid #edf2f7!important;color:#243044!important}
.bbs-mega-img-link b{display:block;color:var(--bbs-navy);font-size:14px;line-height:1.2}.bbs-mega-img-link em{display:block;color:var(--bbs-muted);font-style:normal;font-size:12px;line-height:1.3;margin-top:3px}.bbs-mega-thumb{width:54px;height:44px;border-radius:12px;background:#f3f8fc;background-size:cover;background-position:center;border:1px solid var(--bbs-line);display:block}.bbs-mega-img-link:hover{background:#f8fbff;color:var(--bbs-red)!important;transform:translateX(3px)}
.bbs-crumbs{background:#fff;border-bottom:1px solid var(--bbs-line)}.bbs-crumbs ol{display:flex;gap:8px;flex-wrap:wrap;list-style:none;margin:0;padding:12px 0;font-size:13px}.bbs-crumbs li:after{content:'›';margin-left:8px;color:var(--bbs-muted)}.bbs-crumbs li:last-child:after{content:''}.bbs-crumbs a{color:var(--bbs-blue);font-weight:800}.bbs-crumbs span{color:var(--bbs-muted);font-weight:800}
.bbs-ilink-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.bbs-ilink{display:block;background:#fff;border:1px solid var(--bbs-line);border-radius:24px;padding:22px;box-shadow:0 14px 34px rgba(6,32,73,.07);transition:.18s ease}.bbs-ilink:hover{transform:translateY(-4px);box-shadow:0 22px 45px rgba(6,32,73,.12)}.bbs-ilink b{display:block;color:var(--bbs-navy);font-size:19px;margin-bottom:7px}.bbs-ilink span{display:block;color:var(--bbs-muted);line-height:1.5;margin-bottom:10px}.bbs-ilink em{font-style:normal;color:var(--bbs-red);font-weight:950}
.bbs-was{font-size:13px;color:var(--bbs-muted);margin-left:8px}.bbs-price-cta{font-size:15px;color:var(--bbs-blue)}
.bbs-search + datalist{display:none}
@media(max-width:900px){.bbs-ilink-grid{grid-template-columns:1fr}.bbs-mega-img-link{grid-template-columns:44px 1fr}.bbs-mega-thumb{width:44px;height:38px}}


/* v18.1 Menu and link visibility fix
   Goal: all navigation, hover cards and CTA links must be readable before hover. */

.bbs-site a {
  text-decoration: none;
}

.bbs-retail-header {
  overflow: visible;
}

/* Clearer header spacing */
.bbs-retail-head-grid {
  gap: 22px;
}

/* Main tab menu: visible, readable, less odd */
.bbs-tabs {
  align-items: end;
  gap: 6px;
}

.bbs-tab-wrap {
  position: relative;
}

.bbs-tab-btn {
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  padding: 15px 18px !important;
  color: #ffffff !important;
  background: var(--bbs-navy) !important;
  border: 2px solid rgba(255,255,255,.12);
  box-shadow: none !important;
  line-height: 1.15;
}

.bbs-tab-btn.active,
.bbs-tab-wrap:hover .bbs-tab-btn,
.bbs-tab-wrap:focus-within .bbs-tab-btn {
  background: var(--bbs-blue) !important;
  color: #ffffff !important;
  transform: none !important;
}

.bbs-tab-btn.offers {
  background: var(--bbs-red) !important;
}

.bbs-tab-btn::after {
  content: "⌄";
  font-size: 16px;
  margin-left: 8px;
  opacity: .95;
}

/* Mega menu: make the default state look like a proper menu, not odd hidden text */
.bbs-mega {
  border-radius: 0 0 22px 22px !important;
  box-shadow: 0 22px 65px rgba(6,32,73,.22) !important;
  background: #ffffff !important;
  color: var(--bbs-ink) !important;
  overflow: hidden;
}

.bbs-mega-inner {
  display: grid;
  grid-template-columns: 230px 1fr 260px;
  min-height: 330px;
}

.bbs-mega-side {
  background: linear-gradient(180deg, var(--bbs-navy), #0c3564) !important;
  color: #ffffff !important;
}

.bbs-mega-side h3,
.bbs-mega-side p {
  color: #ffffff !important;
}

.bbs-mega-content {
  background: #ffffff !important;
}

.bbs-mega-cols {
  gap: 18px !important;
}

/* Mega links should be readable before hover */
.bbs-mega-col a,
.bbs-mega a:not(.bbs-btn):not(.bbs-btn-white):not(.bbs-btn-outline) {
  color: #142033 !important;
  background: #ffffff !important;
  border: 1px solid var(--bbs-line) !important;
  border-radius: 14px !important;
  padding: 12px 14px !important;
  margin-bottom: 8px !important;
  font-weight: 850 !important;
  line-height: 1.3 !important;
  display: block !important;
}

.bbs-mega-col a:hover,
.bbs-mega a:not(.bbs-btn):not(.bbs-btn-white):not(.bbs-btn-outline):hover {
  color: var(--bbs-navy) !important;
  background: #f3f8fc !important;
  border-color: rgba(212,175,55,.35) !important;
  transform: translateX(3px);
}

/* If the v18 image mega menu uses thumbnails, make them visible */
.bbs-mega-img,
.bbs-mega-thumb,
.bbs-mega-image,
.bbs-menu-thumb {
  width: 46px !important;
  height: 46px !important;
  border-radius: 12px !important;
  background-size: cover !important;
  background-position: center !important;
  flex: 0 0 46px !important;
  border: 1px solid var(--bbs-line);
}

/* Promo panel readable */
.bbs-mega-promo {
  background: #f3f8fc !important;
  color: var(--bbs-ink) !important;
}

.bbs-mega-promo h4 {
  color: var(--bbs-navy) !important;
}

.bbs-mega-promo p {
  color: var(--bbs-muted) !important;
}

/* Category strip visibility */
.bbs-subnav a {
  color: #ffffff !important;
  opacity: 1 !important;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
}

.bbs-subnav a:hover {
  color: #ffffff !important;
  border-bottom-color: #ffffff;
}

/* Buttons and card links must look clickable without hover */
.bbs-link,
.bbs-card .bbs-link,
.bbs-product-card .bbs-link,
.bbs-cat-tile .bbs-link {
  color: var(--bbs-red) !important;
  font-weight: 950 !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.bbs-card a:not(.bbs-btn):not(.bbs-btn-white):not(.bbs-btn-outline),
.bbs-product-card a:not(.bbs-btn):not(.bbs-btn-white):not(.bbs-btn-outline) {
  color: var(--bbs-red) !important;
  font-weight: 950 !important;
}

/* Card hover should enhance, not reveal */
.bbs-card,
.bbs-product-card,
.bbs-cat-tile,
.bbs-room,
.bbs-finish {
  border-color: var(--bbs-line) !important;
}

.bbs-card h3,
.bbs-product-card h4,
.bbs-cat-body b,
.bbs-room b,
.bbs-finish b {
  color: var(--bbs-navy) !important;
}

.bbs-card p,
.bbs-product-card p,
.bbs-cat-body span,
.bbs-room span,
.bbs-finish span {
  color: var(--bbs-muted) !important;
}

.bbs-card:hover,
.bbs-product-card:hover,
.bbs-cat-tile:hover,
.bbs-room:hover,
.bbs-finish:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 18px 45px rgba(6,32,73,.13) !important;
}

/* Filters/search suggestions from v18 should be readable too */
.bbs-filter,
.bbs-filters,
.bbs-autocomplete,
.bbs-search-suggestions,
.bbs-suggest-box {
  color: var(--bbs-ink) !important;
  background: #ffffff !important;
}

.bbs-autocomplete a,
.bbs-search-suggestions a,
.bbs-suggest-box a,
.bbs-filter a,
.bbs-filters a {
  color: var(--bbs-navy) !important;
  background: #ffffff !important;
}

.bbs-autocomplete a:hover,
.bbs-search-suggestions a:hover,
.bbs-suggest-box a:hover {
  background: #f3f8fc !important;
  color: var(--bbs-red) !important;
}

/* Mobile menu clarity */
.bbs-mobile-toggle {
  color: #ffffff !important;
  background: var(--bbs-navy) !important;
}

.bbs-drawer-panel {
  color: var(--bbs-ink) !important;
}

.bbs-drawer-panel a {
  color: var(--bbs-navy) !important;
  font-weight: 900 !important;
  background: #ffffff !important;
}

.bbs-drawer-panel a:hover {
  color: var(--bbs-red) !important;
  background: #f3f8fc !important;
}

/* Prevent invisible white-on-white inherited states */
.bbs-site .bbs-card a,
.bbs-site .bbs-product-card a,
.bbs-site .bbs-panel a,
.bbs-site .bbs-section a {
  opacity: 1 !important;
}

/* More consistent desktop menu width */
@media (min-width: 901px) {
  .bbs-tab-wrap:hover .bbs-mega,
  .bbs-tab-wrap:focus-within .bbs-mega {
    display: block !important;
  }

  .bbs-mega {
    top: calc(100% - 1px) !important;
  }
}

/* Mobile: dropdown panels should not look broken */
@media (max-width: 900px) {
  .bbs-tabs {
    display: none !important;
  }

  .bbs-mega,
  .bbs-mega-inner {
    position: static !important;
    width: 100% !important;
    display: block;
    min-height: 0;
  }

  .bbs-mega-side,
  .bbs-mega-promo {
    display: none !important;
  }

  .bbs-mega-content {
    padding: 12px !important;
  }

  .bbs-mega-cols {
    grid-template-columns: 1fr !important;
  }
}

/* Keep page titles hidden if theme outputs them above the plugin header */
.entry-title,
.page-title,
h1.entry-title {
  display: none !important;
}

/* ═══ v19 / TIER 2 ADDITIONS ═══════════════════════════════════════════════ */

/* Trust block (icon row) */
.bbs-trustblock { padding: 28px 0; background: var(--wht); border-bottom: 1px solid var(--lne); }
.bbs-trustcard-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.bbs-trustcard {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 18px 20px;
  background: var(--sft);
  border: 1.5px solid var(--lne);
  border-radius: var(--r2);
  transition: var(--trans);
}
.bbs-trustcard:hover { border-color: var(--gld); transform: translateY(-2px); box-shadow: var(--shd); }
.bbs-trustcard-ic {
  flex-shrink: 0;
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  background: rgba(200,150,30,.12);
  border-radius: 50%;
}
.bbs-trustcard b { display: block; font-size: 15px; font-weight: 700; color: var(--n); margin-bottom: 3px; }
.bbs-trustcard span { font-size: 13px; color: var(--mut); line-height: 1.5; font-weight: 300; }

/* Sticky CTA scroll behaviour — hidden by default, fades in when scrolled */
.bbs-float-cta {
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
  pointer-events: none;
}
.bbs-float-cta.bbs-cta-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.bbs-float-cta.bbs-cta-noanim { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .bbs-float-cta { transition: none; transform: none; }
}

@media (max-width: 900px) {
  .bbs-trustcard-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .bbs-trustcard-grid { grid-template-columns: 1fr; }
}


/* v19.1 content/design polish */
.bbs-promo-tile h3 {
  max-width: 420px;
}

.bbs-promo-tile p {
  font-size: 16px;
  max-width: 520px;
}

.bbs-promo-tile.main:after,
.bbs-promo-tile.red:after,
.bbs-promo-tile.dark:after {
  content:"";
  position:absolute;
  right:-55px;
  top:-55px;
  width:160px;
  height:160px;
  border-radius:50%;
  background:rgba(255,255,255,.22);
}

.bbs-promo-tile {
  position: relative;
  overflow: hidden;
}

.bbs-promo-tile > * {
  position: relative;
  z-index: 1;
}

.bbs-card h3,
.bbs-room b,
.bbs-finish b {
  letter-spacing: -.2px;
}

.bbs-trustcard-grid {
  align-items: stretch;
}

.bbs-trustcard {
  min-height: 118px;
}

.bbs-section .bbs-grid .bbs-card {
  background: linear-gradient(180deg,#fff,#fbfdff);
}

.bbs-page-hero p {
  max-width: 980px;
}

.bbs-product-body h4 {
  min-height: 44px;
}

.bbs-footer h3 {
  letter-spacing: -.2px;
}


/* v19.2.1 safe visual fix: no structural PHP changes */

/* Make all links visible before hover */
.bbs-site a {
  opacity: 1 !important;
}

.bbs-section a:not(.bbs-btn):not(.bbs-btn-white):not(.bbs-btn-outline),
.bbs-product-body a,
.bbs-footer a,
.bbs-card a,
.bbs-panel a {
  color: var(--bbs-red) !important;
  font-weight: 900 !important;
  text-decoration: none;
}

.bbs-section a:not(.bbs-btn):not(.bbs-btn-white):not(.bbs-btn-outline):hover,
.bbs-product-body a:hover,
.bbs-footer a:hover,
.bbs-card a:hover,
.bbs-panel a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Product tiles cleaner */
.bbs-product-card {
  display: flex !important;
  flex-direction: column !important;
  background: #fff !important;
  border: 1px solid var(--bbs-line) !important;
}

.bbs-product-img {
  height: 210px !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-color: #f8fafc !important;
}

.bbs-product-body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  min-height: 245px !important;
}

.bbs-product-body h4 {
  min-height: auto !important;
  margin-bottom: 10px !important;
  color: var(--bbs-navy) !important;
}

.bbs-product-body h4 a {
  color: var(--bbs-navy) !important;
  text-decoration: none !important;
}

.bbs-price {
  color: var(--bbs-red) !important;
  font-size: 20px !important;
  margin: 6px 0 12px !important;
}

.bbs-product-body .bbs-link {
  margin-top: auto !important;
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  background: var(--bbs-navy) !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 12px 16px !important;
  font-weight: 950 !important;
  text-decoration: none !important;
}

.bbs-product-body .bbs-link:hover {
  background: var(--bbs-red) !important;
  color: #fff !important;
}

/* Category tiles more readable */
.bbs-category-grid {
  gap: 18px !important;
}

.bbs-cat-tile {
  background: #fff !important;
  color: var(--bbs-navy) !important;
  border: 1px solid var(--bbs-line) !important;
}

.bbs-cat-img {
  height: 145px !important;
}

.bbs-cat-body {
  min-height: 145px !important;
}

.bbs-cat-body b {
  color: var(--bbs-navy) !important;
  font-size: 19px !important;
  line-height: 1.2 !important;
}

.bbs-cat-body span {
  color: var(--bbs-muted) !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
}

/* Mega/menu link visibility */
.bbs-mega a,
.bbs-subnav a,
.bbs-drawer-panel a {
  opacity: 1 !important;
}

.bbs-mega-col a,
.bbs-mega a:not(.bbs-btn):not(.bbs-btn-white):not(.bbs-btn-outline) {
  color: var(--bbs-navy) !important;
  background: #fff !important;
  border: 1px solid var(--bbs-line) !important;
  border-radius: 14px !important;
  padding: 11px 13px !important;
  margin-bottom: 8px !important;
  display: block !important;
}

.bbs-mega-col a:hover,
.bbs-mega a:not(.bbs-btn):not(.bbs-btn-white):not(.bbs-btn-outline):hover {
  color: var(--bbs-red) !important;
  background: #f3f8fc !important;
}

/* Room and finish cards visible */
.bbs-room,
.bbs-finish,
.bbs-card {
  color: var(--bbs-navy) !important;
  background: #fff !important;
}

.bbs-room b,
.bbs-finish b,
.bbs-card h3 {
  color: var(--bbs-navy) !important;
}

.bbs-room span,
.bbs-finish span,
.bbs-card p {
  color: var(--bbs-muted) !important;
}

/* Better hover should enhance, not reveal */
.bbs-card:hover,
.bbs-product-card:hover,
.bbs-cat-tile:hover,
.bbs-room:hover,
.bbs-finish:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 18px 45px rgba(6,32,73,.13) !important;
}

/* Mobile safer */
@media(max-width:900px) {
  .bbs-product-grid,
  .bbs-category-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media(max-width:620px) {
  .bbs-product-grid,
  .bbs-category-grid {
    grid-template-columns: 1fr !important;
  }
  .bbs-product-body,
  .bbs-cat-body {
    min-height: auto !important;
  }
}


/* v19.2.2 HEADER REDESIGN / DUPLICATE HEADER FIX
   Fixes: duplicated theme header, huge whitespace, broken stacked search/actions,
   mega menu going off screen, unclear menu styling.
*/

/* Hide the theme's own header/navigation on generated pages so only the ecommerce header shows.
   Keep admin bar and plugin header untouched. */
body .site-header:not(.bbs-retail-header),
body header.site-header,
body #masthead,
body .elementor-location-header,
body .wp-site-blocks > header,
body .hfe-site-header,
body .ehf-header,
body .ast-primary-header-bar,
body .main-header-bar,
body .entry-header,
body .page-header {
  display: none !important;
}

/* Pull plugin content to the top cleanly */
.bbs-site {
  margin-top: 0 !important;
}

/* Announcement bar - cleaner and slimmer */
.bbs-announcement {
  height: 38px !important;
  display: flex !important;
  align-items: center !important;
  background: #062049 !important;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.bbs-announcement-track {
  padding: 0 !important;
  height: 38px !important;
  align-items: center !important;
  gap: 42px !important;
  font-size: 13px !important;
}

.bbs-announcement-track span {
  display: inline-flex;
  align-items: center;
}

.bbs-announcement-track span:before {
  content: "◆";
  color: #f3bd2f;
  font-size: 10px;
  margin-right: 14px;
}

/* Header shell */
.bbs-retail-header {
  background: #ffffff !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 999 !important;
  box-shadow: 0 10px 30px rgba(6,32,73,.08) !important;
  border-bottom: 1px solid var(--bbs-line) !important;
}

/* Main top row: logo / search / actions */
.bbs-retail-head-grid {
  display: grid !important;
  grid-template-columns: 190px minmax(360px, 1fr) auto !important;
  gap: 22px !important;
  align-items: center !important;
  padding-top: 14px !important;
  padding-bottom: 14px !important;
  min-height: 92px !important;
}

/* Logo */
.bbs-logo-img-link,
.bbs-logo {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: auto !important;
  min-width: 0 !important;
}

.bbs-header-logo-img {
  max-width: 165px !important;
  max-height: 74px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

/* Search bar */
.bbs-search {
  height: 54px !important;
  max-width: 620px !important;
  width: 100% !important;
  margin: 0 auto !important;
  border: 2px solid #dce6f0 !important;
  box-shadow: 0 6px 20px rgba(6,32,73,.06) !important;
  background: #f8fbfd !important;
}

.bbs-search input {
  font-size: 16px !important;
  color: var(--bbs-navy) !important;
}

.bbs-search button {
  min-width: 105px !important;
  background: var(--bbs-navy) !important;
  border-radius: 0 999px 999px 0 !important;
}

.bbs-search button:hover {
  background: var(--bbs-red) !important;
}

/* Header actions - no more awkward stacked white space */
.bbs-head-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  min-width: 310px !important;
}

.bbs-advice {
  display: inline-flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-width: 110px !important;
  min-height: 54px !important;
  padding: 8px 12px !important;
  border: 1px solid var(--bbs-line) !important;
  border-radius: 16px !important;
  background: #f8fbfd !important;
  text-align: center !important;
  color: var(--bbs-navy) !important;
  text-decoration: none !important;
}

.bbs-advice span {
  font-size: 11px !important;
  line-height: 1.15 !important;
  color: var(--bbs-muted) !important;
}

.bbs-advice b {
  font-size: 14px !important;
  line-height: 1.15 !important;
  color: var(--bbs-navy) !important;
}

.bbs-head-icon {
  min-width: 54px !important;
  min-height: 54px !important;
  padding: 7px 8px !important;
  border: 1px solid var(--bbs-line) !important;
  border-radius: 16px !important;
  background: #ffffff !important;
  color: var(--bbs-navy) !important;
  text-decoration: none !important;
  justify-content: center !important;
  transition: .15s ease !important;
}

.bbs-head-icon:hover,
.bbs-advice:hover {
  border-color: rgba(212,175,55,.35) !important;
  background: #fff9e8 !important;
}

.bbs-head-icon svg {
  width: 23px !important;
  height: 23px !important;
}

.bbs-head-icon span {
  font-size: 11px !important;
  line-height: 1.1 !important;
  color: var(--bbs-navy) !important;
}

/* Mobile menu button hidden on desktop */
.bbs-mobile-toggle {
  display: none !important;
}

/* Menu tabs row */
.bbs-tabs-row {
  position: relative !important;
  background: var(--bbs-navy) !important;
  padding-left: 22px !important;
  padding-right: 22px !important;
}

.bbs-tabs {
  max-width: 1240px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 8px !important;
  align-items: end !important;
  position: static !important;
}

.bbs-tab-wrap {
  position: static !important;
}

.bbs-tab-btn {
  min-height: 58px !important;
  border-radius: 16px 16px 0 0 !important;
  background: #0b2d59 !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-bottom: 0 !important;
  text-decoration: none !important;
  box-shadow: none !important;
  font-size: 18px !important;
  padding: 16px 14px !important;
}

.bbs-tab-btn.active,
.bbs-tab-wrap:hover .bbs-tab-btn,
.bbs-tab-wrap:focus-within .bbs-tab-btn {
  background: #1767ad !important;
  transform: none !important;
  color: #ffffff !important;
}

.bbs-tab-btn.offers {
  background: var(--bbs-red) !important;
}

.bbs-tab-btn::after {
  content: "⌄";
  margin-left: 8px;
  font-size: 14px;
  opacity: .9;
}

/* Mega menu: full-width dropdown contained inside viewport */
.bbs-mega {
  left: 50% !important;
  right: auto !important;
  top: 100% !important;
  transform: translateX(-50%) !important;
  width: min(1180px, calc(100vw - 44px)) !important;
  max-width: calc(100vw - 44px) !important;
  border-radius: 0 0 24px 24px !important;
  overflow: hidden !important;
  box-shadow: 0 24px 70px rgba(6,32,73,.26) !important;
  z-index: 2000 !important;
}

.bbs-tab-wrap:nth-child(4) .bbs-mega,
.bbs-tab-wrap:nth-child(5) .bbs-mega {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
}

.bbs-mega-inner {
  display: grid !important;
  grid-template-columns: 240px minmax(0, 1fr) 260px !important;
  min-height: 300px !important;
  background: #ffffff !important;
}

.bbs-mega-side {
  background: linear-gradient(180deg, #062049, #0f3d72) !important;
  padding: 26px !important;
}

.bbs-mega-side h3 {
  font-size: 28px !important;
  margin-bottom: 10px !important;
  color: #ffffff !important;
}

.bbs-mega-side p {
  color: rgba(255,255,255,.86) !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
}

.bbs-mega-content {
  padding: 24px !important;
  background: #ffffff !important;
  overflow: hidden !important;
}

.bbs-mega-cols {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px !important;
}

.bbs-mega-col h4 {
  color: var(--bbs-navy) !important;
  font-size: 14px !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  margin: 0 0 12px !important;
}

.bbs-mega-col a,
.bbs-mega a:not(.bbs-btn):not(.bbs-btn-white):not(.bbs-btn-outline) {
  display: block !important;
  color: var(--bbs-navy) !important;
  background: #f8fbfd !important;
  border: 1px solid #e3edf6 !important;
  border-radius: 13px !important;
  padding: 11px 13px !important;
  margin-bottom: 8px !important;
  text-decoration: none !important;
  line-height: 1.25 !important;
  font-weight: 900 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

.bbs-mega-col a:hover,
.bbs-mega a:not(.bbs-btn):not(.bbs-btn-white):not(.bbs-btn-outline):hover {
  background: #fff9e8 !important;
  border-color: rgba(212,175,55,.35) !important;
  color: var(--bbs-red) !important;
}

.bbs-mega-promo {
  background: #f3f8fc !important;
  border-left: 1px solid var(--bbs-line) !important;
  padding: 26px !important;
}

.bbs-mega-promo h4 {
  color: var(--bbs-navy) !important;
  font-size: 22px !important;
}

.bbs-mega-promo p {
  color: var(--bbs-muted) !important;
}

/* Secondary nav */
.bbs-subnav {
  background: #1767ad !important;
}

.bbs-subnav .bbs-shell {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  gap: 20px !important;
}

.bbs-subnav a {
  color: #ffffff !important;
  font-size: 14px !important;
  text-decoration: none !important;
  opacity: 1 !important;
  padding: 4px 0 !important;
  border-bottom: 2px solid transparent !important;
}

.bbs-subnav a:hover {
  border-bottom-color: #ffffff !important;
}

/* Benefit strip slimmer */
.bbs-benefit-strip .bbs-shell {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

/* Prevent the page hero being hidden too high after sticky header */
.bbs-page-hero,
.bbs-hero {
  scroll-margin-top: 220px;
}

/* Admin bar offset */
body.admin-bar .bbs-retail-header {
  top: 32px !important;
}

/* Tablet */
@media (max-width: 1180px) {
  .bbs-retail-head-grid {
    grid-template-columns: 170px 1fr auto !important;
    gap: 16px !important;
  }

  .bbs-header-logo-img {
    max-width: 150px !important;
    max-height: 66px !important;
  }

  .bbs-head-actions {
    min-width: 260px !important;
    gap: 8px !important;
  }

  .bbs-advice {
    display: none !important;
  }

  .bbs-tab-btn {
    font-size: 16px !important;
  }

  .bbs-mega-inner {
    grid-template-columns: 220px 1fr !important;
  }

  .bbs-mega-promo {
    display: none !important;
  }
}

/* Mobile */
@media (max-width: 900px) {
  .bbs-retail-head-grid {
    display: grid !important;
    grid-template-columns: 145px 1fr auto !important;
    gap: 10px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    min-height: 78px !important;
  }

  .bbs-header-logo-img {
    max-width: 130px !important;
    max-height: 58px !important;
  }

  .bbs-search {
    height: 46px !important;
    grid-template-columns: 38px 1fr !important;
    min-width: 0 !important;
  }

  .bbs-search button {
    display: none !important;
  }

  .bbs-search input {
    font-size: 14px !important;
  }

  .bbs-head-actions {
    display: none !important;
  }

  .bbs-mobile-toggle {
    display: inline-flex !important;
    height: 46px !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--bbs-navy) !important;
    color: #ffffff !important;
    border: 1px solid rgba(212,175,55,.75) !important;
    border-radius: 12px !important;
    padding: 0 14px !important;
    white-space: nowrap !important;
  }

  .bbs-tabs-row,
  .bbs-subnav,
  .bbs-benefit-strip {
    display: none !important;
  }

  body.admin-bar .bbs-retail-header {
    top: 46px !important;
  }
}

@media (max-width: 620px) {
  .bbs-retail-head-grid {
    grid-template-columns: 120px 1fr 78px !important;
  }

  .bbs-header-logo-img {
    max-width: 112px !important;
    max-height: 52px !important;
  }

  .bbs-announcement {
    height: 34px !important;
  }

  .bbs-announcement-track {
    height: 34px !important;
    font-size: 12px !important;
  }
}


/* v19.2.3 COMPACT HEADER + SMALLER MEGA MENU
   Fixes:
   - logo/search/actions now sit in one compact row
   - removes huge white header space
   - mega menu is smaller and easier to scan
   - removes awkward hover/pill effect from the blue subnav
*/

/* Header is one clean ecommerce row */
.bbs-retail-header {
  background: #ffffff !important;
}

.bbs-retail-head-grid {
  display: grid !important;
  grid-template-columns: 160px minmax(420px, 1fr) auto !important;
  align-items: center !important;
  gap: 18px !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  min-height: 78px !important;
}

/* Keep logo compact */
.bbs-logo,
.bbs-logo-img-link {
  align-items: center !important;
  justify-content: flex-start !important;
}

.bbs-header-logo-img {
  max-width: 128px !important;
  max-height: 62px !important;
}

/* Search should live in the same row, not float */
.bbs-search {
  height: 50px !important;
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  border-radius: 999px !important;
  border: 2px solid #e0eaf3 !important;
  background: #ffffff !important;
  box-shadow: 0 6px 18px rgba(6,32,73,.05) !important;
}

.bbs-search input {
  font-size: 15px !important;
}

.bbs-search button {
  min-width: 100px !important;
  height: 50px !important;
  font-size: 14px !important;
  border-radius: 0 999px 999px 0 !important;
}

/* Header actions compact */
.bbs-head-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: auto !important;
}

.bbs-advice {
  min-width: 96px !important;
  min-height: 48px !important;
  padding: 7px 10px !important;
  border-radius: 14px !important;
}

.bbs-advice span {
  font-size: 10px !important;
}

.bbs-advice b {
  font-size: 13px !important;
}

.bbs-head-icon {
  min-width: 50px !important;
  min-height: 48px !important;
  padding: 6px 7px !important;
  border-radius: 14px !important;
}

.bbs-head-icon svg {
  width: 21px !important;
  height: 21px !important;
}

.bbs-head-icon span {
  font-size: 10px !important;
}

/* Slim main menu tabs */
.bbs-tabs {
  gap: 6px !important;
}

.bbs-tab-btn {
  min-height: 50px !important;
  height: 50px !important;
  padding: 12px 12px !important;
  font-size: 16px !important;
  border-radius: 14px 14px 0 0 !important;
}

.bbs-tab-btn::after {
  display: none !important;
}

/* Smaller, tighter mega menu */
.bbs-mega {
  width: min(920px, calc(100vw - 48px)) !important;
  max-height: none !important;
  overflow: visible !important;
  border-radius: 0 0 20px 20px !important;
}

.bbs-mega-inner {
  grid-template-columns: 185px minmax(0, 1fr) 205px !important;
  min-height: 0 !important;
}

.bbs-mega-side {
  padding: 18px !important;
}

.bbs-mega-side h3 {
  font-size: 22px !important;
  margin: 0 0 8px !important;
}

.bbs-mega-side p {
  font-size: 13px !important;
  line-height: 1.45 !important;
  margin-bottom: 12px !important;
}

.bbs-mega-side .bbs-btn-white,
.bbs-mega-side a.bbs-btn-white {
  padding: 9px 14px !important;
  font-size: 13px !important;
}

.bbs-mega-content {
  padding: 16px !important;
}

.bbs-mega-cols {
  gap: 12px !important;
}

.bbs-mega-col h4 {
  font-size: 12px !important;
  margin-bottom: 8px !important;
  letter-spacing: .07em !important;
}

/* Make menu options plain and readable, not huge hover cards */
.bbs-mega-col a,
.bbs-mega a:not(.bbs-btn):not(.bbs-btn-white):not(.bbs-btn-outline) {
  display: block !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 7px 0 !important;
  margin: 0 !important;
  color: var(--bbs-navy) !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
  font-weight: 850 !important;
  text-decoration: none !important;
  border-bottom: 1px solid #edf2f7 !important;
}

.bbs-mega-col a:hover,
.bbs-mega a:not(.bbs-btn):not(.bbs-btn-white):not(.bbs-btn-outline):hover {
  background: transparent !important;
  color: var(--bbs-red) !important;
  transform: none !important;
  padding-left: 4px !important;
}

/* Smaller mega thumbnails if v18/v19 uses image links */
.bbs-mega-img,
.bbs-mega-thumb,
.bbs-mega-image,
.bbs-menu-thumb {
  width: 34px !important;
  height: 34px !important;
  border-radius: 8px !important;
}

/* Right promo smaller */
.bbs-mega-promo {
  padding: 18px !important;
}

.bbs-mega-promo h4 {
  font-size: 18px !important;
  margin-bottom: 8px !important;
}

.bbs-mega-promo p {
  font-size: 13px !important;
  line-height: 1.45 !important;
}

.bbs-mega-promo .bbs-btn,
.bbs-mega-promo a.bbs-btn {
  padding: 10px 15px !important;
  font-size: 13px !important;
}

/* Remove the ugly hover bubble on the blue subnav */
.bbs-subnav {
  background: #1767ad !important;
}

.bbs-subnav .bbs-shell {
  gap: 22px !important;
  padding-top: 11px !important;
  padding-bottom: 11px !important;
}

.bbs-subnav a {
  color: #ffffff !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  padding: 0 0 4px !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  text-decoration: none !important;
  line-height: 1.2 !important;
}

.bbs-subnav a:hover,
.bbs-subnav a:focus {
  background: transparent !important;
  color: #ffffff !important;
  border-bottom-color: #ffffff !important;
  outline: none !important;
}

/* Slim trust row */
.bbs-benefit-strip .bbs-shell {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

.bbs-benefit-strip span {
  font-size: 13px !important;
}

/* Hero should start closer to header */
.bbs-hero {
  padding-top: 54px !important;
}

/* Tablet behaviour */
@media (max-width: 1180px) {
  .bbs-retail-head-grid {
    grid-template-columns: 140px minmax(320px, 1fr) auto !important;
    gap: 12px !important;
  }

  .bbs-header-logo-img {
    max-width: 118px !important;
    max-height: 56px !important;
  }

  .bbs-advice {
    display: none !important;
  }

  .bbs-mega {
    width: min(860px, calc(100vw - 36px)) !important;
  }

  .bbs-mega-inner {
    grid-template-columns: 170px 1fr !important;
  }

  .bbs-mega-promo {
    display: none !important;
  }
}

/* Mobile: logo + search + menu one line */
@media (max-width: 900px) {
  .bbs-retail-head-grid {
    grid-template-columns: 95px minmax(0, 1fr) 76px !important;
    min-height: 64px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    gap: 8px !important;
  }

  .bbs-header-logo-img {
    max-width: 88px !important;
    max-height: 46px !important;
  }

  .bbs-search {
    height: 42px !important;
    grid-template-columns: 34px 1fr !important;
  }

  .bbs-search input {
    font-size: 13px !important;
  }

  .bbs-mobile-toggle {
    height: 42px !important;
    padding: 0 10px !important;
    font-size: 13px !important;
  }

  .bbs-head-actions,
  .bbs-tabs,
  .bbs-subnav,
  .bbs-benefit-strip {
    display: none !important;
  }

  .bbs-announcement {
    height: 32px !important;
  }

  .bbs-announcement-track {
    height: 32px !important;
    font-size: 12px !important;
  }
}


/* v19.2.4 PRODUCT CARD POLISH
   Better product cards, bordered image frames, clearer buttons and mobile fixes.
*/

/* Product section spacing */
.bbs-product-grid,
.bbs-product-grid-clean {
  gap: 24px !important;
  align-items: stretch !important;
}

/* Main card */
.bbs-product-card {
  background: #ffffff !important;
  border: 1px solid #dfe8f2 !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  box-shadow: 0 12px 32px rgba(6,32,73,.07) !important;
  display: flex !important;
  flex-direction: column !important;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease !important;
}

.bbs-product-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(212,175,55,.35) !important;
  box-shadow: 0 22px 48px rgba(6,32,73,.13) !important;
}

/* Image frame */
.bbs-product-img-wrap,
.bbs-product-card > a:first-child {
  display: block !important;
  padding: 14px !important;
  background: linear-gradient(180deg, #f8fbfd, #ffffff) !important;
  border-bottom: 1px solid #e5edf5 !important;
}

.bbs-product-img {
  height: 220px !important;
  width: 100% !important;
  background-color: #ffffff !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  border: 1px solid #e2ebf4 !important;
  border-radius: 16px !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.7) !important;
}

/* Body layout */
.bbs-product-body {
  padding: 18px 18px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  min-height: 270px !important;
}

/* Category badge */
.bbs-badge {
  align-self: flex-start !important;
  background: #fff7e8 !important;
  border: 1px solid #f0cd8a !important;
  color: #b97700 !important;
  border-radius: 8px !important;
  padding: 7px 11px !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  line-height: 1.1 !important;
  margin-bottom: 16px !important;
  max-width: 100% !important;
}

/* Product title */
.bbs-product-body h4 {
  margin: 0 0 12px !important;
  min-height: 58px !important;
  font-size: 18px !important;
  line-height: 1.22 !important;
  color: var(--bbs-navy) !important;
}

.bbs-product-body h4 a,
.bbs-product-body h4 {
  color: var(--bbs-navy) !important;
  text-decoration: none !important;
}

.bbs-product-body h4 a:hover {
  color: var(--bbs-red) !important;
  text-decoration: none !important;
}

/* Price */
.bbs-price {
  color: var(--bbs-red) !important;
  font-size: 22px !important;
  line-height: 1.15 !important;
  font-weight: 950 !important;
  margin: 0 0 14px !important;
}

.bbs-was {
  color: var(--bbs-muted) !important;
  font-size: 14px !important;
  margin-left: 6px !important;
}

/* Description */
.bbs-product-body p {
  color: #526178 !important;
  line-height: 1.55 !important;
  font-size: 14px !important;
  margin: 0 0 18px !important;
}

/* Product button */
.bbs-product-button,
.bbs-product-body .bbs-link,
.bbs-product-body a.bbs-link {
  margin-top: auto !important;
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 46px !important;
  background: var(--bbs-navy) !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  padding: 12px 18px !important;
  font-weight: 950 !important;
  text-decoration: none !important;
  box-shadow: 0 10px 22px rgba(6,32,73,.16) !important;
  border: 0 !important;
}

.bbs-product-button:hover,
.bbs-product-body .bbs-link:hover,
.bbs-product-body a.bbs-link:hover {
  background: var(--bbs-red) !important;
  color: #ffffff !important;
  text-decoration: none !important;
}

/* Fix the first product red button with invisible text issue */
.bbs-product-body .bbs-link:empty::before,
.bbs-product-button:empty::before {
  content: "View product";
}

/* Make product grids sensible */
@media (min-width: 1181px) {
  .bbs-product-grid,
  .bbs-product-grid-clean {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 1180px) and (min-width: 741px) {
  .bbs-product-grid,
  .bbs-product-grid-clean {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .bbs-product-img {
    height: 200px !important;
  }
}

/* Mobile: two columns where there is room, one column on small phones */
@media (max-width: 740px) {
  .bbs-product-grid,
  .bbs-product-grid-clean {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  .bbs-product-card {
    border-radius: 16px !important;
  }

  .bbs-product-img-wrap,
  .bbs-product-card > a:first-child {
    padding: 9px !important;
  }

  .bbs-product-img {
    height: 150px !important;
    border-radius: 12px !important;
  }

  .bbs-product-body {
    padding: 13px !important;
    min-height: 250px !important;
  }

  .bbs-badge {
    font-size: 9px !important;
    padding: 6px 8px !important;
    margin-bottom: 10px !important;
  }

  .bbs-product-body h4 {
    font-size: 14px !important;
    line-height: 1.25 !important;
    min-height: 54px !important;
    margin-bottom: 8px !important;
  }

  .bbs-price {
    font-size: 18px !important;
    margin-bottom: 10px !important;
  }

  .bbs-product-body p {
    font-size: 12px !important;
    line-height: 1.4 !important;
    margin-bottom: 12px !important;
  }

  .bbs-product-button,
  .bbs-product-body .bbs-link,
  .bbs-product-body a.bbs-link {
    min-height: 40px !important;
    padding: 10px 12px !important;
    font-size: 12px !important;
  }
}

@media (max-width: 480px) {
  .bbs-product-grid,
  .bbs-product-grid-clean {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .bbs-product-img {
    height: 215px !important;
  }

  .bbs-product-body {
    min-height: auto !important;
    padding: 16px !important;
  }

  .bbs-product-body h4 {
    font-size: 17px !important;
    min-height: auto !important;
  }

  .bbs-product-body p {
    font-size: 14px !important;
  }

  .bbs-product-button,
  .bbs-product-body .bbs-link,
  .bbs-product-body a.bbs-link {
    font-size: 14px !important;
  }
}

/* Improve section title spacing around product grids */
.bbs-section h2 + .bbs-intro {
  margin-bottom: 28px !important;
}

/* Add subtle background to product sections */
.bbs-section:has(.bbs-product-grid) {
  position: relative;
}


/* v19.2.6 SAFE CATEGORY GRID FIX
   This intentionally avoids CSS :has() and masonry-style layout.
   It restores a stable retailer-style grid with no blank/tall cards.
*/

/* Stop any earlier broken category overrides */
.bbs-category-grid,
.bbs-category-grid-clean {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 18px !important;
  align-items: stretch !important;
  grid-auto-flow: row !important;
  grid-auto-rows: auto !important;
}

/* Stable card */
.bbs-cat-tile {
  display: flex !important;
  flex-direction: column !important;
  min-height: auto !important;
  height: 100% !important;
  background: #ffffff !important;
  color: var(--bbs-navy) !important;
  border: 1px solid #dfe8f2 !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  box-shadow: 0 10px 26px rgba(6,32,73,.07) !important;
  text-decoration: none !important;
  transform: none !important;
}

.bbs-cat-tile:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 18px 38px rgba(6,32,73,.12) !important;
  border-color: rgba(212,175,55,.35) !important;
  text-decoration: none !important;
}

/* Image area */
.bbs-cat-img {
  display: block !important;
  height: 150px !important;
  width: 100% !important;
  background-color: #f8fbfd !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  border-bottom: 1px solid #e6eef6 !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* remove any pseudo frame that caused odd blank areas */
.bbs-cat-img:before,
.bbs-cat-img:after {
  display: none !important;
  content: none !important;
}

/* Text area */
.bbs-cat-body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  min-height: 145px !important;
  padding: 17px !important;
  gap: 8px !important;
  background: #ffffff !important;
}

.bbs-cat-body b {
  display: block !important;
  color: var(--bbs-navy) !important;
  font-size: 18px !important;
  line-height: 1.16 !important;
  font-weight: 950 !important;
  letter-spacing: -.2px !important;
}

.bbs-cat-body span {
  display: block !important;
  color: #526178 !important;
  font-size: 13px !important;
  line-height: 1.42 !important;
  font-weight: 600 !important;
}

/* Shop cue - only one, not duplicated */
.bbs-cat-body em {
  display: inline-flex !important;
  margin-top: auto !important;
  color: var(--bbs-red) !important;
  font-style: normal !important;
  font-weight: 950 !important;
  font-size: 13px !important;
}

.bbs-cat-body:after {
  content: "Shop range →" !important;
  display: inline-flex !important;
  margin-top: auto !important;
  color: var(--bbs-red) !important;
  font-weight: 950 !important;
  font-size: 13px !important;
}

/* If the template already outputs em, hide the pseudo one */
.bbs-cat-body:has(em):after {
  display: none !important;
  content: none !important;
}

/* Remove accidental empty/tall layout behaviour */
.bbs-cat-tile:empty,
.bbs-category-grid > :empty,
.bbs-category-grid-clean > :empty {
  display: none !important;
}

/* Tablet */
@media (max-width: 1180px) {
  .bbs-category-grid,
  .bbs-category-grid-clean {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }

  .bbs-cat-img {
    height: 140px !important;
  }
}

/* Mobile */
@media (max-width: 760px) {
  .bbs-category-grid,
  .bbs-category-grid-clean {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  .bbs-cat-img {
    height: 120px !important;
  }

  .bbs-cat-body {
    padding: 13px !important;
    min-height: 126px !important;
  }

  .bbs-cat-body b {
    font-size: 15px !important;
  }

  .bbs-cat-body span {
    font-size: 12px !important;
  }
}

/* Small phones */
@media (max-width: 440px) {
  .bbs-category-grid,
  .bbs-category-grid-clean {
    grid-template-columns: 1fr !important;
  }

  .bbs-cat-img {
    height: 170px !important;
  }

  .bbs-cat-body {
    min-height: auto !important;
    padding: 16px !important;
  }

  .bbs-cat-body b {
    font-size: 18px !important;
  }

  .bbs-cat-body span {
    font-size: 14px !important;
  }
}


/* v19.2.7 CATEGORY CAROUSEL
   Turns Shop by category into a swipe/scroll carousel with arrows.
*/

/* Carousel controls */
.bbs-cat-carousel-controls {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin: -8px 0 18px;
}

.bbs-cat-carousel-controls button {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid #dfe8f2;
  background: #ffffff;
  color: var(--bbs-navy);
  font-size: 30px;
  line-height: 1;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(6,32,73,.08);
  transition: .15s ease;
}

.bbs-cat-carousel-controls button:hover {
  background: var(--bbs-navy);
  color: #ffffff;
  border-color: var(--bbs-navy);
}

/* Carousel track */
.bbs-category-grid.bbs-cat-carousel,
.bbs-category-grid-clean.bbs-cat-carousel {
  display: flex !important;
  grid-template-columns: none !important;
  gap: 18px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory !important;
  scroll-padding-left: 2px !important;
  padding: 4px 4px 26px !important;
  margin-left: -4px !important;
  margin-right: -4px !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: thin;
}

/* Cards in carousel */
.bbs-category-grid.bbs-cat-carousel .bbs-cat-tile,
.bbs-category-grid-clean.bbs-cat-carousel .bbs-cat-tile {
  flex: 0 0 calc((100% - 54px) / 4) !important;
  min-width: 240px !important;
  max-width: 310px !important;
  scroll-snap-align: start !important;
  min-height: 315px !important;
}

/* Make cards feel carousel-ready */
.bbs-cat-carousel .bbs-cat-img {
  height: 155px !important;
}

.bbs-cat-carousel .bbs-cat-body {
  min-height: 145px !important;
}

/* Subtle fade edge on carousel section */
.bbs-section:has(.bbs-cat-carousel) .bbs-shell {
  position: relative;
}

/* Tablet: 3-ish visible */
@media (max-width: 1180px) {
  .bbs-category-grid.bbs-cat-carousel .bbs-cat-tile,
  .bbs-category-grid-clean.bbs-cat-carousel .bbs-cat-tile {
    flex-basis: calc((100% - 36px) / 3) !important;
    min-width: 230px !important;
  }
}

/* Mobile: swipe carousel, controls smaller */
@media (max-width: 760px) {
  .bbs-cat-carousel-controls {
    justify-content: flex-start;
    margin-top: -4px;
    margin-bottom: 14px;
  }

  .bbs-cat-carousel-controls button {
    width: 40px;
    height: 40px;
    font-size: 26px;
  }

  .bbs-category-grid.bbs-cat-carousel,
  .bbs-category-grid-clean.bbs-cat-carousel {
    gap: 14px !important;
    padding-bottom: 20px !important;
  }

  .bbs-category-grid.bbs-cat-carousel .bbs-cat-tile,
  .bbs-category-grid-clean.bbs-cat-carousel .bbs-cat-tile {
    flex: 0 0 76% !important;
    min-width: 235px !important;
    max-width: 320px !important;
    min-height: 280px !important;
  }

  .bbs-cat-carousel .bbs-cat-img {
    height: 140px !important;
  }

  .bbs-cat-carousel .bbs-cat-body {
    min-height: 130px !important;
  }
}

/* Small phones: one card almost full width */
@media (max-width: 440px) {
  .bbs-category-grid.bbs-cat-carousel .bbs-cat-tile,
  .bbs-category-grid-clean.bbs-cat-carousel .bbs-cat-tile {
    flex-basis: 88% !important;
    min-width: 245px !important;
  }

  .bbs-cat-carousel .bbs-cat-img {
    height: 155px !important;
  }
}


/* v19.2.8 BROKEN SECTION FIX
   Fixes the red outlined empty links/cards and broken 'complete projects' section.
*/

/* Hide any genuinely empty accidental links/buttons/cards */
.bbs-site a:empty,
.bbs-site button:empty,
.bbs-grid > :empty,
.bbs-card:empty,
.bbs-visible-card:empty {
  display: none !important;
}

/* Stop whole-card links being treated like red underlined text */
.bbs-grid > a,
.bbs-grid > a.bbs-card,
.bbs-grid > a.bbs-visible-card {
  color: var(--bbs-navy) !important;
  text-decoration: none !important;
  border: 1px solid #dfe8f2 !important;
  background: #ffffff !important;
}

/* Neutral card styling */
.bbs-card,
.bbs-visible-card {
  background: #ffffff !important;
  border: 1px solid #dfe8f2 !important;
  border-radius: 24px !important;
  box-shadow: 0 12px 30px rgba(6,32,73,.07) !important;
  color: var(--bbs-navy) !important;
  text-decoration: none !important;
}

/* Remove any red border/pill artefacts from cards */
.bbs-card,
.bbs-visible-card,
.bbs-card *,
.bbs-visible-card * {
  text-decoration-thickness: auto !important;
}

.bbs-card::before,
.bbs-card::after,
.bbs-visible-card::before,
.bbs-visible-card::after {
  border-color: transparent !important;
}

/* Card text should not be red unless it is a button/link cue */
.bbs-card h3,
.bbs-visible-card h3,
.bbs-grid > a h3 {
  color: var(--bbs-navy) !important;
  text-decoration: none !important;
}

.bbs-card p,
.bbs-visible-card p,
.bbs-grid > a p {
  color: #526178 !important;
  text-decoration: none !important;
}

/* If card is a link, make only the final cue/button red or navy, not all copy */
.bbs-visible-card span,
.bbs-card .bbs-link,
.bbs-card a.bbs-link {
  color: #ffffff !important;
  background: var(--bbs-navy) !important;
  border-radius: 999px !important;
  padding: 10px 15px !important;
  display: inline-flex !important;
  align-self: flex-start !important;
  font-weight: 950 !important;
  text-decoration: none !important;
  border: 0 !important;
}

.bbs-visible-card:hover span,
.bbs-card .bbs-link:hover,
.bbs-card a.bbs-link:hover {
  background: var(--bbs-red) !important;
  color: #ffffff !important;
}

/* Fix grid layout in that lower section */
.bbs-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 20px !important;
  align-items: stretch !important;
  grid-auto-flow: row !important;
}

.bbs-grid > .bbs-card,
.bbs-grid > .bbs-visible-card,
.bbs-grid > a.bbs-card,
.bbs-grid > a.bbs-visible-card {
  min-height: 190px !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  padding: 26px !important;
}

/* Stop generic section link rules making footer/card links ugly */
.bbs-section .bbs-card a:not(.bbs-btn):not(.bbs-btn-white):not(.bbs-btn-outline):not(.bbs-link),
.bbs-section .bbs-visible-card a:not(.bbs-btn):not(.bbs-btn-white):not(.bbs-btn-outline):not(.bbs-link) {
  color: inherit !important;
  text-decoration: none !important;
  border: 0 !important;
}

/* Footer links should be clear but not bright red/underlined by default */
.bbs-footer a {
  color: rgba(255,255,255,.78) !important;
  text-decoration: none !important;
  font-weight: 700 !important;
}

.bbs-footer a:hover {
  color: #ffffff !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

/* If a global rule gave all links red borders, kill it inside these areas */
.bbs-card a,
.bbs-visible-card a,
.bbs-footer a {
  border: 0 !important;
}

/* Mobile */
@media (max-width: 900px) {
  .bbs-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 620px) {
  .bbs-grid {
    grid-template-columns: 1fr !important;
  }

  .bbs-grid > .bbs-card,
  .bbs-grid > .bbs-visible-card,
  .bbs-grid > a.bbs-card,
  .bbs-grid > a.bbs-visible-card {
    min-height: auto !important;
    padding: 20px !important;
  }
}


/* v19.2.9 HEADER INLINE FIX
   Forces logo, search and account actions into one proper desktop row.
*/

/* Desktop/tablet header: one row only */
@media (min-width: 901px) {
  .bbs-retail-header .bbs-retail-head-grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 18px !important;
    min-height: 78px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  .bbs-retail-header .bbs-logo,
  .bbs-retail-header .bbs-logo-img-link {
    flex: 0 0 145px !important;
    width: 145px !important;
    min-width: 145px !important;
    max-width: 145px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    margin: 0 !important;
  }

  .bbs-retail-header .bbs-header-logo-img {
    max-width: 125px !important;
    max-height: 58px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
  }

  .bbs-retail-header .bbs-search {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: 620px !important;
    min-width: 320px !important;
    margin: 0 !important;
    height: 50px !important;
    align-self: center !important;
  }

  .bbs-retail-header .bbs-head-actions {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    margin: 0 !important;
    align-self: center !important;
  }

  .bbs-retail-header .bbs-advice,
  .bbs-retail-header .bbs-head-icon {
    margin: 0 !important;
    flex: 0 0 auto !important;
  }

  .bbs-retail-header .bbs-mobile-toggle {
    display: none !important;
  }
}

/* Slightly tighter for smaller laptops */
@media (min-width: 901px) and (max-width: 1180px) {
  .bbs-retail-header .bbs-retail-head-grid {
    gap: 12px !important;
  }

  .bbs-retail-header .bbs-logo,
  .bbs-retail-header .bbs-logo-img-link {
    flex-basis: 118px !important;
    width: 118px !important;
    min-width: 118px !important;
    max-width: 118px !important;
  }

  .bbs-retail-header .bbs-header-logo-img {
    max-width: 105px !important;
    max-height: 52px !important;
  }

  .bbs-retail-header .bbs-search {
    min-width: 260px !important;
    max-width: none !important;
  }

  .bbs-retail-header .bbs-advice {
    display: inline-flex !important;
    min-width: 92px !important;
  }

  .bbs-retail-header .bbs-head-icon {
    min-width: 48px !important;
  }
}

/* Mobile remains compact: logo / search / menu */
@media (max-width: 900px) {
  .bbs-retail-header .bbs-retail-head-grid {
    display: grid !important;
    grid-template-columns: 95px minmax(0, 1fr) 76px !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .bbs-retail-header .bbs-head-actions {
    display: none !important;
  }

  .bbs-retail-header .bbs-mobile-toggle {
    display: inline-flex !important;
  }
}


/* v19.3 FULL-WIDTH + CLEAN HEADER POLISH */

/* Make the whole generated site full bleed, even inside theme containers */
.bbs-site {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  overflow-x: clip !important;
}

body:has(.bbs-site) .site,
body:has(.bbs-site) .site-content,
body:has(.bbs-site) .content-area,
body:has(.bbs-site) .site-main,
body:has(.bbs-site) .entry-content,
body:has(.bbs-site) .wp-site-blocks,
body:has(.bbs-site) main {
  max-width: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Keep content aligned inside full-width sections */
.bbs-shell {
  max-width: 1320px !important;
  padding-left: 32px !important;
  padding-right: 32px !important;
}

/* Full edge section backgrounds */
.bbs-announcement,
.bbs-retail-header,
.bbs-hero,
.bbs-page-hero,
.bbs-section,
.bbs-footer {
  width: 100% !important;
}

/* Bigger but controlled logo */
@media (min-width: 901px) {
  .bbs-retail-header .bbs-retail-head-grid {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 22px !important;
    min-height: 88px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  .bbs-retail-header .bbs-logo,
  .bbs-retail-header .bbs-logo-img-link {
    flex: 0 0 185px !important;
    width: 185px !important;
    min-width: 185px !important;
    max-width: 185px !important;
  }

  .bbs-retail-header .bbs-header-logo-img {
    max-width: 168px !important;
    max-height: 78px !important;
    object-fit: contain !important;
  }

  .bbs-retail-header .bbs-search {
    flex: 1 1 auto !important;
    max-width: 660px !important;
    min-width: 360px !important;
    height: 52px !important;
  }

  .bbs-head-actions-clean {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex: 0 0 auto !important;
  }
}

/* Remove old icon-card look if any remains */
.bbs-head-actions-clean .bbs-head-icon {
  display: none !important;
}

/* Clean action buttons */
.bbs-head-actions-clean .bbs-advice {
  min-width: 116px !important;
  min-height: 50px !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  background: #f8fbfd !important;
  border: 1px solid #dfe8f2 !important;
  color: var(--bbs-navy) !important;
  text-decoration: none !important;
}

.bbs-head-actions-clean .bbs-advice span {
  color: var(--bbs-muted) !important;
  font-size: 11px !important;
}

.bbs-head-actions-clean .bbs-advice b {
  color: var(--bbs-navy) !important;
  font-size: 14px !important;
}

.bbs-header-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 50px !important;
  padding: 0 20px !important;
  border-radius: 999px !important;
  background: var(--bbs-red) !important;
  color: #ffffff !important;
  font-weight: 950 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  box-shadow: 0 12px 24px rgba(212,175,55,.16) !important;
}

.bbs-header-cta.secondary {
  background: var(--bbs-navy) !important;
  box-shadow: 0 12px 24px rgba(6,32,73,.14) !important;
}

.bbs-header-cta:hover,
.bbs-header-cta.secondary:hover {
  filter: brightness(.95);
  color: #ffffff !important;
  text-decoration: none !important;
}

/* Menu sections full width but content aligned */
.bbs-tabs,
.bbs-subnav .bbs-shell,
.bbs-benefit-strip .bbs-shell {
  max-width: 1320px !important;
}

/* Remove the artificial narrow page feeling */
.bbs-hero {
  margin-top: 0 !important;
}

/* Tablet */
@media (min-width: 901px) and (max-width: 1180px) {
  .bbs-retail-header .bbs-logo,
  .bbs-retail-header .bbs-logo-img-link {
    flex-basis: 145px !important;
    width: 145px !important;
    min-width: 145px !important;
    max-width: 145px !important;
  }

  .bbs-retail-header .bbs-header-logo-img {
    max-width: 132px !important;
    max-height: 64px !important;
  }

  .bbs-retail-header .bbs-search {
    min-width: 260px !important;
    max-width: none !important;
  }

  .bbs-head-actions-clean .bbs-advice {
    display: none !important;
  }

  .bbs-header-cta {
    min-height: 46px !important;
    padding: 0 15px !important;
    font-size: 13px !important;
  }
}

/* Mobile: logo remains prominent but not huge */
@media (max-width: 900px) {
  .bbs-shell {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .bbs-retail-header .bbs-retail-head-grid {
    display: grid !important;
    grid-template-columns: 118px minmax(0, 1fr) 76px !important;
    gap: 10px !important;
    min-height: 70px !important;
  }

  .bbs-retail-header .bbs-header-logo-img {
    max-width: 108px !important;
    max-height: 54px !important;
  }

  .bbs-head-actions-clean {
    display: none !important;
  }

  .bbs-mobile-toggle {
    display: inline-flex !important;
  }
}

@media (max-width: 520px) {
  .bbs-retail-header .bbs-retail-head-grid {
    grid-template-columns: 95px minmax(0, 1fr) 68px !important;
  }

  .bbs-retail-header .bbs-header-logo-img {
    max-width: 88px !important;
    max-height: 48px !important;
  }
}


/* v19.3.1 REMOVE WHITE GAP UNDER TRUST STRIP */

/* Trust strip sits tight to the hero/next section */
.bbs-benefit-strip {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  border-bottom: 0 !important;
}

.bbs-benefit-strip .bbs-shell {
  margin-bottom: 0 !important;
}

/* Remove accidental whitespace before hero/page sections */
.bbs-benefit-strip + .bbs-hero,
.bbs-benefit-strip + .bbs-page-hero,
.bbs-retail-header + .bbs-hero,
.bbs-retail-header + .bbs-page-hero {
  margin-top: 0 !important;
}

/* Some themes/plugin CSS add top borders or spacer lines */
.bbs-hero,
.bbs-page-hero {
  margin-top: 0 !important;
  border-top: 0 !important;
}

/* If generated content creates a blank paragraph/text node area after header */
.bbs-site > br,
.bbs-site > p:empty,
.bbs-site > div:empty {
  display: none !important;
}

/* Make the trust strip slightly more compact so it feels attached */
.bbs-benefit-strip .bbs-shell {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

/* Remove white strip caused by header bottom padding/margins */
.bbs-retail-header {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Pull hero up by 1px to avoid hairline white gap */
.bbs-retail-header + .bbs-hero,
.bbs-retail-header + .bbs-page-hero {
  transform: translateY(-1px);
  margin-bottom: -1px;
}


/* v19.3.2 GOLD ACCENT OVERRIDE
   Replaces red styling with a premium gold accent.
*/

:root {
  --bbs-red: #D4AF37 !important;
  --bbs-gold: #D4AF37;
  --bbs-gold-dark: #9A7417;
  --bbs-gold-soft: #fff8df;
}

/* Buttons and accent CTAs */
.bbs-btn,
.bbs-header-cta,
.bbs-tab-btn.offers,
.bbs-product-button:hover,
.bbs-product-body .bbs-link:hover,
.bbs-product-body a.bbs-link:hover,
.bbs-visible-card:hover span,
.bbs-card .bbs-link:hover,
.bbs-card a.bbs-link:hover {
  background: var(--bbs-gold) !important;
  color: #062049 !important;
}

.bbs-btn:hover,
.bbs-header-cta:hover {
  background: var(--bbs-gold-dark) !important;
  color: #ffffff !important;
}

/* Offer tab needs readable navy text on gold */
.bbs-tab-btn.offers {
  color: #062049 !important;
}

.bbs-tab-btn.offers:hover,
.bbs-tab-wrap:hover .bbs-tab-btn.offers {
  background: var(--bbs-gold-dark) !important;
  color: #ffffff !important;
}

/* Links and highlights */
.bbs-link,
.bbs-section a:not(.bbs-btn):not(.bbs-btn-white):not(.bbs-btn-outline),
.bbs-product-body a,
.bbs-card a,
.bbs-panel a,
.bbs-cat-body em,
.bbs-cat-body:after,
.bbs-related-links a:hover,
.bbs-mega-col a:hover,
.bbs-mega a:not(.bbs-btn):not(.bbs-btn-white):not(.bbs-btn-outline):hover {
  color: var(--bbs-gold-dark) !important;
}

/* Badges */
.bbs-badge {
  background: var(--bbs-gold-soft) !important;
  border-color: rgba(212,175,55,.45) !important;
  color: var(--bbs-gold-dark) !important;
}

/* Borders/hover accents */
.bbs-product-card:hover,
.bbs-cat-tile:hover,
.bbs-card:hover,
.bbs-visible-card:hover,
.bbs-room:hover,
.bbs-finish:hover,
.bbs-head-icon:hover,
.bbs-advice:hover,
.bbs-mega-col a:hover,
.bbs-mega a:not(.bbs-btn):not(.bbs-btn-white):not(.bbs-btn-outline):hover {
  border-color: rgba(212,175,55,.65) !important;
}

/* Announcement diamonds and trust ticks */
.bbs-announcement-track span:before,
.bbs-benefit-strip span:before {
  color: var(--bbs-gold) !important;
}

/* Search button remains navy by default; hover gold */
.bbs-search button {
  background: var(--bbs-navy) !important;
  color: #ffffff !important;
}

.bbs-search button:hover {
  background: var(--bbs-gold) !important;
  color: #062049 !important;
}

/* Hero kicker / gold outline highlights */
.bbs-kicker {
  color: var(--bbs-gold) !important;
  border-color: rgba(212,175,55,.55) !important;
  background: rgba(212,175,55,.10) !important;
}

/* Remove red-looking footer/action links */
.bbs-footer a:hover {
  color: var(--bbs-gold) !important;
}

/* Mobile menu border */
.bbs-mobile-toggle {
  border-color: rgba(212,175,55,.75) !important;
}


/* v19.3.3 Interactive Bathroom Planner */

.bbs-planner-section {
  background: #f5f8fb !important;
}

.bbs-planner-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 26px;
}

.bbs-planner-tab {
  border: 1px solid #dfe8f2;
  background: #ffffff;
  color: var(--bbs-navy);
  border-radius: 999px;
  padding: 12px 18px;
  font-weight: 950;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(6,32,73,.06);
  transition: .15s ease;
}

.bbs-planner-tab:hover,
.bbs-planner-tab.active {
  background: var(--bbs-navy);
  color: #ffffff;
  border-color: var(--bbs-navy);
}

.bbs-plan-panels {
  position: relative;
}

.bbs-plan-panel {
  display: none;
  background: #ffffff;
  border: 1px solid #dfe8f2;
  border-radius: 28px;
  box-shadow: 0 18px 48px rgba(6,32,73,.09);
  overflow: hidden;
}

.bbs-plan-panel.active {
  display: block;
}

.bbs-plan-head {
  background: linear-gradient(135deg, var(--bbs-navy), #0f3d72);
  color: #ffffff;
  padding: 28px;
}

.bbs-plan-head h3 {
  color: #ffffff;
  font-size: 30px;
  margin: 0 0 8px;
}

.bbs-plan-head p {
  color: rgba(255,255,255,.82);
  margin: 0;
  font-size: 17px;
  line-height: 1.55;
}

.bbs-checklist-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid #dfe8f2;
}

.bbs-checklist-card {
  padding: 26px;
  border-right: 1px solid #e6eef6;
}

.bbs-checklist-card:last-child {
  border-right: 0;
}

.bbs-checklist-card h4 {
  color: var(--bbs-navy);
  font-size: 20px;
  margin: 0 0 16px;
}

.bbs-checklist-card label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  color: #334155;
  font-weight: 700;
  line-height: 1.35;
  border-bottom: 1px solid #edf2f7;
}

.bbs-checklist-card label:last-child {
  border-bottom: 0;
}

.bbs-checklist-card input {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  accent-color: var(--bbs-gold, #D4AF37);
  flex: 0 0 18px;
}

.bbs-plan-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 22px 26px 26px;
  background: #f8fbfd;
  border-top: 1px solid #e6eef6;
}

.bbs-plan-links a {
  display: inline-flex;
  background: var(--bbs-gold, #D4AF37);
  color: var(--bbs-navy) !important;
  border-radius: 999px;
  padding: 11px 16px;
  font-weight: 950;
  text-decoration: none !important;
}

.bbs-plan-links a:hover {
  background: var(--bbs-navy);
  color: #ffffff !important;
}

@media(max-width:900px) {
  .bbs-checklist-grid {
    grid-template-columns: 1fr;
  }

  .bbs-checklist-card {
    border-right: 0;
    border-bottom: 1px solid #e6eef6;
  }

  .bbs-checklist-card:last-child {
    border-bottom: 0;
  }

  .bbs-plan-head {
    padding: 22px;
  }

  .bbs-plan-head h3 {
    font-size: 24px;
  }
}

@media(max-width:620px) {
  .bbs-planner-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .bbs-planner-tab {
    padding: 11px 12px;
    font-size: 13px;
  }

  .bbs-checklist-card {
    padding: 20px;
  }

  .bbs-plan-links {
    padding: 18px 20px 22px;
  }

  .bbs-plan-links a {
    width: 100%;
    justify-content: center;
  }
}


/* v19.3.4 Working Featured Product Filters */

.bbs-product-filter-bar {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 0 24px !important;
  padding: 16px !important;
  background: #ffffff !important;
  border: 1px solid #dfe8f2 !important;
  border-radius: 20px !important;
  box-shadow: 0 10px 26px rgba(6,32,73,.06) !important;
}

.bbs-filter-group {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
}

.bbs-filter-group strong {
  color: var(--bbs-navy) !important;
  font-weight: 950 !important;
  margin-right: 3px !important;
}

.bbs-product-filter-bar button,
.bbs-product-filter-bar a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid #dfe8f2 !important;
  background: #f8fbfd !important;
  color: var(--bbs-navy) !important;
  border-radius: 999px !important;
  padding: 9px 13px !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: .15s ease !important;
}

.bbs-product-filter-bar button:hover,
.bbs-product-filter-bar a:hover,
.bbs-product-filter-bar button.active,
.bbs-product-filter-bar button.is-active,
.bbs-product-filter-bar a.active,
.bbs-product-filter-bar a.is-active,
.bbs-product-filter-bar [aria-pressed="true"] {
  background: var(--bbs-navy) !important;
  border-color: var(--bbs-navy) !important;
  color: #ffffff !important;
}

.bbs-filter-count {
  margin-left: auto !important;
  color: #526178 !important;
  font-weight: 800 !important;
  font-size: 13px !important;
}

.bbs-product-card[style*="display: none"] {
  display: none !important;
}

@media(max-width:760px) {
  .bbs-product-filter-bar {
    align-items: flex-start !important;
    padding: 14px !important;
  }

  .bbs-filter-group {
    width: 100% !important;
  }

  .bbs-filter-group strong {
    width: 100% !important;
    margin-bottom: 2px !important;
  }

  .bbs-product-filter-bar button,
  .bbs-product-filter-bar a {
    font-size: 12px !important;
    padding: 8px 11px !important;
  }

  .bbs-filter-count {
    width: 100% !important;
    margin-left: 0 !important;
  }
}


/* v19.3.5 MOBILE HEADER VP-STYLE + TRADE BUTTON FIX */

/* Desktop trade button visibility fix */
.bbs-header-cta.secondary,
.bbs-head-actions-clean a.bbs-header-cta.secondary,
.bbs-retail-header .bbs-header-cta.secondary {
  color: #ffffff !important;
  background: var(--bbs-navy) !important;
  font-size: 15px !important;
  min-width: 92px !important;
  text-indent: 0 !important;
  overflow: visible !important;
  position: relative !important;
  z-index: 2 !important;
}

.bbs-header-cta.secondary::before,
.bbs-header-cta.secondary::after {
  display: none !important;
  content: none !important;
}

.bbs-header-cta.secondary:hover {
  color: var(--bbs-navy) !important;
  background: var(--bbs-gold, #D4AF37) !important;
}

/* If global link styles are hiding the text, force the actual text colour */
.bbs-head-actions-clean .bbs-header-cta.secondary {
  -webkit-text-fill-color: #ffffff !important;
}

/* ═══ v19.5.4 MOBILE HEADER — CONSOLIDATED ═══════════════════════════════
   Replaces 5 overlapping v19.3.5–v19.3.9 @media(max-width:900px) blocks that
   kept re-overriding the same header/search/drawer/tab rules with !important.
   This is the resolved end state of that cascade — same computed styles,
   one block instead of five. ═══════════════════════════════════════════ */
@media (max-width: 900px) {
  .bbs-retail-header {
    background: var(--bbs-navy, var(--n, #06183A)) !important;
    border-bottom: 0 !important;
    box-shadow: 0 8px 24px rgba(6,32,73,.16) !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }
  .bbs-retail-header .bbs-retail-head-grid {
    display: block !important;
    grid-template-columns: 68px 68px minmax(110px, 1fr) 74px 74px !important;
    grid-template-areas: "menu search logo contact shop" !important;
    gap: 0 !important;
    align-items: stretch !important;
    min-height: 70px !important;
    padding: 0 !important;
    background: var(--bbs-navy, var(--n, #06183A)) !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    height: 70px !important;
    width: 100% !important;
    max-height: 70px !important;
    margin: 0 !important;
    justify-items: stretch !important;
    position: relative !important;
    overflow: hidden !important;
    max-width: none !important;
  }
  .bbs-announcement {
    height: 30px !important;
  }
  .bbs-announcement-track {
    height: 30px !important;
    font-size: 12px !important;
  }
  .bbs-mobile-toggle {
    grid-area: menu !important;
    display: flex !important;
    width: 100% !important;
    height: 72px !important;
    min-height: 72px !important;
    border-radius: 0 !important;
    border: 0 !important;
    border-right: 1px solid rgba(255,255,255,.16) !important;
    background: var(--bbs-navy) !important;
    color: #ffffff !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    font-size: 0 !important;
    font-weight: 850 !important;
    box-shadow: none !important;
  }
  .bbs-mobile-toggle::before {
    content: "☰";
    display: block;
    font-size: 23px !important;
    line-height: 1;
    margin-bottom: 5px !important;
    color: #ffffff;
  }
  .bbs-mobile-toggle::after {
    content: "Menu";
    display: block;
    font-size: 10px !important;
    line-height: 1 !important;
    color: #ffffff;
  }
  .bbs-retail-header .bbs-search {
    grid-area: search !important;
    width: 68px !important;
    height: 70px !important;
    min-width: 68px !important;
    max-width: 68px !important;
    border-radius: 0 !important;
    border: 0 !important;
    border-right: 1px solid rgba(255,255,255,.16) !important;
    background: var(--bbs-navy, var(--n, #06183A)) !important;
    box-shadow: none !important;
    display: block !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    position: absolute !important;
    order: 2 !important;
    flex: 0 0 68px !important;
    min-height: 70px !important;
    max-height: 70px !important;
    transform: none !important;
    float: none !important;
    align-self: stretch !important;
    justify-self: stretch !important;
    top: 0 !important;
    bottom: auto !important;
    z-index: 10 !important;
    left: 68px !important;
  }
  .bbs-retail-header .bbs-search::before {
    content: "⌕" !important;
    display: block !important;
    font-size: 25px !important;
    line-height: 24px !important;
    color: #fff !important;
    margin-bottom: 5px !important;
    margin: 0 0 18px !important;
    position: absolute !important;
    top: 17px !important;
    left: 0 !important;
    right: 0 !important;
    height: 24px !important;
    text-align: center !important;
  }
  .bbs-retail-header .bbs-search::after {
    content: "Search" !important;
    position: absolute !important;
    bottom: 12px !important;
    left: 0 !important;
    right: 0 !important;
    text-align: center !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    color: #fff !important;
    line-height: 12px !important;
    display: block !important;
  }
  .bbs-retail-header .bbs-search .bbs-search-icon,
  .bbs-retail-header .bbs-search input,
  .bbs-retail-header .bbs-search button,
  .bbs-retail-header .bbs-head-actions-clean .bbs-advice span,
  .bbs-retail-header .bbs-head-actions-clean .bbs-header-cta.secondary,
  .bbs-subnav,
  .bbs-benefit-strip,
  .bbs-tabs::-webkit-scrollbar,
  .bbs-tab-wrap .bbs-mega,
  .bbs-retail-header .bbs-head-actions .bbs-advice span,
  .bbs-retail-header .bbs-head-actions .bbs-header-cta.secondary,
  .bbs-retail-header .bbs-tabs::-webkit-scrollbar,
  .bbs-retail-header .bbs-tab-wrap .bbs-mega,
  .bbs-retail-header .bbs-subnav,
  .bbs-retail-header .bbs-benefit-strip,
  .bbs-retail-header .bbs-head-icon {
    display: none !important;
  }
  .bbs-retail-header .bbs-logo,
  .bbs-retail-header .bbs-logo-img-link {
    grid-area: logo !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 70px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #fff !important;
    border-right: 1px solid rgba(6,32,73,.10) !important;
    order: 3 !important;
    flex: 1 1 auto !important;
    min-height: 70px !important;
    position: absolute !important;
    max-height: 70px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    float: none !important;
    align-self: stretch !important;
    justify-self: stretch !important;
    border: 0 !important;
    top: 0 !important;
    bottom: auto !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    z-index: 10 !important;
    left: 136px !important;
    right: 148px !important;
  }
  .bbs-retail-header .bbs-header-logo-img {
    max-width: 112px !important;
    max-height: 60px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
  }
  .bbs-retail-header .bbs-head-actions-clean {
    display: block !important;
    order: 4 !important;
    flex: 0 0 138px !important;
    width: auto !important;
    height: 0 !important;
    min-height: 0 !important;
    align-items: stretch !important;
    justify-content: flex-end !important;
    gap: 0 !important;
    margin: 0 !important;
    grid-area: contact / contact / shop / shop !important;
    padding: 0 !important;
    position: static !important;
  }
  .bbs-retail-header .bbs-head-actions-clean .bbs-advice {
    grid-area: contact !important;
    display: block !important;
    width: 74px !important;
    height: 70px !important;
    min-width: 74px !important;
    min-height: 70px !important;
    border-radius: 0 !important;
    border: 0 !important;
    border-right: 1px solid rgba(255,255,255,.16) !important;
    background: var(--bbs-navy, var(--n, #06183A)) !important;
    color: #fff !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 0 !important;
    box-shadow: none !important;
    position: absolute !important;
    flex: 0 0 69px !important;
    max-width: 74px !important;
    max-height: 70px !important;
    margin: 0 !important;
    transform: none !important;
    float: none !important;
    flex-direction: column !important;
    top: 0 !important;
    bottom: auto !important;
    z-index: 10 !important;
    right: 74px !important;
  }
  .bbs-retail-header .bbs-head-actions-clean .bbs-advice::before {
    content: "♡" !important;
    display: block !important;
    font-size: 27px !important;
    line-height: 25px !important;
    color: #fff !important;
    margin-bottom: 5px !important;
    margin: 0 0 6px !important;
    position: absolute !important;
    top: 16px !important;
    left: 0 !important;
    right: 0 !important;
    height: 25px !important;
    text-align: center !important;
  }
  .bbs-retail-header .bbs-head-actions-clean .bbs-advice b,
  .bbs-retail-header .bbs-head-actions .bbs-advice b {
    display: block !important;
    font-size: 10px !important;
    line-height: 11px !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    font-weight: 900 !important;
    position: absolute !important;
    bottom: 10px !important;
    left: 3px !important;
    right: 3px !important;
    text-align: center !important;
  }
  .bbs-retail-header .bbs-head-actions-clean .bbs-header-cta:not(.secondary) {
    grid-area: shop !important;
    display: block !important;
    width: 74px !important;
    height: 70px !important;
    min-height: 70px !important;
    min-width: 74px !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: var(--bbs-gold, #D4AF37) !important;
    color: var(--bbs-navy, var(--n, #06183A)) !important;
    -webkit-text-fill-color: var(--bbs-navy, var(--n, #06183A)) !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    flex-direction: column !important;
    box-shadow: none !important;
    font-size: 0 !important;
    font-weight: 950 !important;
    flex: 0 0 69px !important;
    position: absolute !important;
    max-width: 74px !important;
    max-height: 70px !important;
    margin: 0 !important;
    transform: none !important;
    float: none !important;
    border: 0 !important;
    top: 0 !important;
    bottom: auto !important;
    z-index: 10 !important;
    right: 0 !important;
    line-height: 0 !important;
  }
  .bbs-retail-header .bbs-head-actions-clean .bbs-header-cta:not(.secondary)::before {
    content: "🛒" !important;
    display: block !important;
    font-size: 22px !important;
    line-height: 24px !important;
    margin-bottom: 5px !important;
    margin: 0 0 6px !important;
    position: absolute !important;
    top: 17px !important;
    left: 0 !important;
    right: 0 !important;
    height: 24px !important;
    text-align: center !important;
  }
  .bbs-retail-header .bbs-head-actions-clean .bbs-header-cta:not(.secondary)::after,
  .bbs-retail-header .bbs-head-actions .bbs-header-cta:not(.secondary)::after {
    content: "Shop" !important;
    display: block !important;
    font-size: 11px !important;
    line-height: 12px !important;
    font-weight: 950 !important;
    color: var(--bbs-navy, var(--n, #06183A)) !important;
    position: absolute !important;
    bottom: 12px !important;
    left: 0 !important;
    right: 0 !important;
    text-align: center !important;
  }
  .bbs-tabs {
    display: flex !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 0 !important;
    max-width: none !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background: var(--bbs-navy) !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .bbs-mobile-drawer.open {
    display: block !important;
  }
  .bbs-drawer-panel {
    width: min(420px, 94vw) !important;
    background: #ffffff !important;
    padding: 0 !important;
  }
  .bbs-drawer-head {
    background: var(--bbs-navy) !important;
    color: #ffffff !important;
    padding: 18px !important;
    margin: 0 !important;
  }
  .bbs-drawer-close {
    background: var(--bbs-gold, #D4AF37) !important;
    color: var(--bbs-navy) !important;
    border-radius: 999px !important;
  }
  .bbs-drawer-panel a {
    display: block !important;
    padding: 16px 20px !important;
    border-bottom: 1px solid #e6eef6 !important;
    color: var(--bbs-navy) !important;
    font-weight: 950 !important;
    background: #ffffff !important;
  }
  .bbs-drawer-panel a:hover {
    background: #f8fbfd !important;
    color: var(--bbs-gold-dark, #9A7417) !important;
  }
  .bbs-hero,
  .bbs-retail-header + .bbs-hero,
  .bbs-retail-header + .bbs-page-hero,
  .bbs-page-hero {
    margin-top: 0 !important;
    border-top: 0 !important;
  }
  .bbs-retail-header .bbs-mobile-toggle {
    order: 1 !important;
    flex: 0 0 68px !important;
    width: 68px !important;
    height: 70px !important;
    min-height: 70px !important;
    display: block !important;
    border-right: 1px solid rgba(255,255,255,.16) !important;
    border-radius: 0 !important;
    grid-area: menu !important;
    position: absolute !important;
    min-width: 68px !important;
    max-width: 68px !important;
    max-height: 70px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    float: none !important;
    align-self: stretch !important;
    justify-self: stretch !important;
    z-index: 10 !important;
    border: 0 !important;
    background: var(--bbs-navy, var(--n, #06183A)) !important;
    color: #fff !important;
    box-shadow: none !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0 !important;
    top: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    line-height: 0 !important;
    text-align: center !important;
    cursor: pointer !important;
  }
  .bbs-tab-wrap {
    flex: 0 0 auto !important;
    position: relative !important;
  }
  .bbs-tab-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 48px !important;
    min-height: 48px !important;
    min-width: 132px !important;
    padding: 0 18px !important;
    border-radius: 0 !important;
    border: 0 !important;
    border-right: 1px solid rgba(255,255,255,.14) !important;
    background: #0f3d72 !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 950 !important;
    text-decoration: none !important;
    box-shadow: none !important;
    white-space: nowrap !important;
  }
  .bbs-tab-btn.active,
  .bbs-tab-wrap:hover .bbs-tab-btn,
  .bbs-tab-wrap:focus-within .bbs-tab-btn {
    background: #ffffff !important;
    color: var(--bbs-navy) !important;
  }
  .bbs-tab-btn.offers {
    background: var(--bbs-gold, #D4AF37) !important;
    color: var(--bbs-navy) !important;
  }
  .bbs-retail-header > .bbs-shell:first-child {
    max-width: none !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    position: relative !important;
    height: 70px !important;
    min-height: 70px !important;
    background: var(--bbs-navy, var(--n, #06183A)) !important;
    max-height: 70px !important;
    overflow: hidden !important;
  }
  .bbs-retail-header .bbs-mobile-toggle::before {
    content: "☰" !important;
    display: block !important;
    color: #fff !important;
    font-size: 25px !important;
    line-height: 24px !important;
    margin: 0 !important;
    position: absolute !important;
    top: 17px !important;
    left: 0 !important;
    right: 0 !important;
    height: 24px !important;
    text-align: center !important;
  }
  .bbs-retail-header .bbs-mobile-toggle::after {
    content: "Menu" !important;
    display: block !important;
    color: #fff !important;
    font-size: 11px !important;
    line-height: 12px !important;
    font-weight: 900 !important;
    position: absolute !important;
    bottom: 12px !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    text-align: center !important;
  }
  .bbs-retail-header .bbs-head-actions {
    grid-area: contact / contact / shop / shop !important;
    display: block !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
    width: auto !important;
  }
  .bbs-retail-header .bbs-head-actions .bbs-advice {
    grid-area: contact !important;
    display: block !important;
    position: absolute !important;
    width: 74px !important;
    height: 70px !important;
    min-width: 74px !important;
    max-width: 74px !important;
    min-height: 70px !important;
    max-height: 70px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    float: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    border-right: 1px solid rgba(255,255,255,.16) !important;
    background: var(--bbs-navy, var(--n, #06183A)) !important;
    color: #fff !important;
    box-shadow: none !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    top: 0 !important;
    bottom: auto !important;
    z-index: 10 !important;
    right: 74px !important;
    text-align: center !important;
  }
  .bbs-retail-header .bbs-head-actions .bbs-advice::before {
    content: "♡" !important;
    display: block !important;
    color: #fff !important;
    font-size: 27px !important;
    line-height: 25px !important;
    margin: 0 0 6px !important;
    position: absolute !important;
    top: 16px !important;
    left: 0 !important;
    right: 0 !important;
    height: 25px !important;
    text-align: center !important;
  }
  .bbs-retail-header .bbs-head-actions .bbs-header-cta:not(.secondary) {
    grid-area: shop !important;
    display: block !important;
    position: absolute !important;
    width: 74px !important;
    height: 70px !important;
    min-width: 74px !important;
    max-width: 74px !important;
    min-height: 70px !important;
    max-height: 70px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    float: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--bbs-gold, #D4AF37) !important;
    color: var(--bbs-navy, var(--n, #06183A)) !important;
    -webkit-text-fill-color: var(--bbs-navy, var(--n, #06183A)) !important;
    box-shadow: none !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    font-size: 0 !important;
    font-weight: 950 !important;
    top: 0 !important;
    bottom: auto !important;
    z-index: 10 !important;
    right: 0 !important;
    text-align: center !important;
    line-height: 0 !important;
  }
  .bbs-retail-header .bbs-head-actions .bbs-header-cta:not(.secondary)::before {
    content: "🛒" !important;
    display: block !important;
    font-size: 22px !important;
    line-height: 24px !important;
    margin: 0 0 6px !important;
    position: absolute !important;
    top: 17px !important;
    left: 0 !important;
    right: 0 !important;
    height: 24px !important;
    text-align: center !important;
  }
  .bbs-retail-header > .bbs-shell:nth-of-type(2),
  .bbs-retail-header .bbs-shell:has(.bbs-tabs) {
    display: block !important;
    max-width: none !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background: var(--bbs-navy) !important;
    position: relative !important;
    height: 48px !important;
    min-height: 48px !important;
    overflow: hidden !important;
  }
  .bbs-retail-header .bbs-tabs {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 0 !important;
    max-width: none !important;
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: var(--bbs-navy, var(--n, #06183A)) !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    position: relative !important;
  }
  .bbs-retail-header .bbs-tab-wrap {
    display: block !important;
    flex: 0 0 auto !important;
    position: relative !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: 48px !important;
    min-height: 48px !important;
  }
  .bbs-retail-header .bbs-tab-btn {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    justify-content: center !important;
    height: 48px !important;
    min-height: 48px !important;
    min-width: 132px !important;
    padding: 0 18px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border: 0 !important;
    border-right: 1px solid rgba(255,255,255,.14) !important;
    background: #0f3d72 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    font-size: 15px !important;
    font-weight: 950 !important;
    text-decoration: none !important;
    box-shadow: none !important;
    white-space: nowrap !important;
    line-height: 1 !important;
  }
  .bbs-retail-header .bbs-tab-btn.active {
    background: #1f73ad !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
  }
  .bbs-retail-header .bbs-tab-btn.offers {
    background: var(--bbs-gold, #D4AF37) !important;
    color: var(--bbs-navy, var(--n, #06183A)) !important;
    -webkit-text-fill-color: var(--bbs-navy, var(--n, #06183A)) !important;
  }
  .bbs-site,
  .bbs-retail-header * {
    box-sizing: border-box !important;
  }
  .bbs-retail-header .bbs-tabs-row {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    max-width: none !important;
    height: 48px !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: var(--bbs-navy, var(--n, #06183A)) !important;
    overflow: hidden !important;
  }
}

/* v19.5.4 — small-phone (≤430px) header tweaks, consolidated from 5 overlapping
   blocks the same way as above. Only the properties that actually differ from
   the ≤900px block are listed here — no need to repeat what's already set. */
@media (max-width: 430px) {
  .bbs-retail-header .bbs-retail-head-grid {
    grid-template-columns: 58px 58px minmax(90px, 1fr) 62px 62px !important;
    min-height: 64px !important;
    height: 64px !important;
    max-height: 64px !important;
  }
  .bbs-mobile-toggle {
    height: 66px !important;
    min-height: 66px !important;
  }
  .bbs-mobile-toggle::before {
    font-size: 20px !important;
  }
  .bbs-mobile-toggle::after {
    font-size: 9px !important;
  }
  .bbs-retail-header .bbs-search {
    width: 58px !important;
    height: 64px !important;
    min-width: 58px !important;
    max-width: 58px !important;
    min-height: 64px !important;
    flex-basis: 58px !important;
    max-height: 64px !important;
    left: 58px !important;
  }
  .bbs-retail-header .bbs-logo,
  .bbs-retail-header .bbs-logo-img-link {
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
    left: 116px !important;
    right: 124px !important;
  }
  .bbs-retail-header .bbs-header-logo-img {
    max-width: 88px !important;
    max-height: 52px !important;
  }
  .bbs-retail-header .bbs-head-actions-clean {
    flex-basis: 116px !important;
  }
  .bbs-retail-header .bbs-head-actions-clean .bbs-advice {
    width: 62px !important;
    height: 64px !important;
    min-width: 62px !important;
    min-height: 64px !important;
    flex-basis: 58px !important;
    max-width: 62px !important;
    max-height: 64px !important;
    right: 62px !important;
  }
  .bbs-retail-header .bbs-head-actions-clean .bbs-header-cta:not(.secondary) {
    width: 62px !important;
    height: 64px !important;
    min-height: 64px !important;
    min-width: 62px !important;
    flex-basis: 58px !important;
    max-width: 62px !important;
    max-height: 64px !important;
  }
  .bbs-retail-header .bbs-mobile-toggle {
    width: 58px !important;
    height: 64px !important;
    min-height: 64px !important;
    flex-basis: 58px !important;
    min-width: 58px !important;
    max-width: 58px !important;
    max-height: 64px !important;
  }
  .bbs-tab-btn,
  .bbs-retail-header .bbs-tab-btn {
    height: 44px !important;
    min-height: 44px !important;
    min-width: 118px !important;
    font-size: 14px !important;
  }
  .bbs-retail-header > .bbs-shell:first-child {
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
  }
  .bbs-retail-header .bbs-head-actions .bbs-advice {
    width: 62px !important;
    height: 64px !important;
    min-width: 62px !important;
    max-width: 62px !important;
    min-height: 64px !important;
    max-height: 64px !important;
    right: 62px !important;
  }
  .bbs-retail-header .bbs-head-actions .bbs-header-cta:not(.secondary) {
    width: 62px !important;
    height: 64px !important;
    min-width: 62px !important;
    max-width: 62px !important;
    min-height: 64px !important;
    max-height: 64px !important;
  }
  .bbs-retail-header > .bbs-shell:nth-of-type(2),
  .bbs-retail-header .bbs-tabs,
  .bbs-retail-header .bbs-tab-wrap,
  .bbs-retail-header .bbs-shell:has(.bbs-tabs),
  .bbs-retail-header .bbs-tabs-row {
    height: 44px !important;
    min-height: 44px !important;
  }
}

/* v19.3.10 - Desktop secondary category row centred */
@media (min-width: 901px) {
  .bbs-subnav .bbs-shell {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 26px !important;
    max-width: 1320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    text-align: center !important;
    overflow-x: visible !important;
  }

  .bbs-subnav a {
    flex: 0 0 auto !important;
    text-align: center !important;
  }
}


/* v19.3.11 mobile tab click fix: tabs should navigate and not flash/stick white */
@media (max-width: 900px) {
  .bbs-tab-btn,
  .bbs-tab-btn:visited,
  .bbs-tab-btn:focus,
  .bbs-tab-btn:active,
  .bbs-tab-btn.active,
  .bbs-tab-wrap:hover .bbs-tab-btn,
  .bbs-tab-wrap:focus-within .bbs-tab-btn {
    background: #0f3d72 !important;
    color: #ffffff !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
  }

  .bbs-tab-btn.offers,
  .bbs-tab-btn.offers:visited,
  .bbs-tab-btn.offers:focus,
  .bbs-tab-btn.offers:active,
  .bbs-tab-wrap:hover .bbs-tab-btn.offers,
  .bbs-tab-wrap:focus-within .bbs-tab-btn.offers {
    background: var(--bbs-gold, #D4AF37) !important;
    color: var(--bbs-navy, #062049) !important;
  }
}

/* BBS v19.4.0 conversion foundation additions */
.bbs-mobile-bottom{display:none}
.bbs-product-img{position:relative}
.bbs-save-product{position:absolute;top:10px;right:10px;width:38px;height:38px;border-radius:999px;border:1px solid rgba(255,255,255,.7);background:rgba(255,255,255,.92);color:var(--bbs-navy);font-size:22px;line-height:1;cursor:pointer;box-shadow:0 8px 22px rgba(0,0,0,.12)}
.bbs-save-product.active{background:var(--bbs-red);color:var(--bbs-navy);border-color:var(--bbs-red)}
.bbs-rating{font-size:13px;letter-spacing:1px;color:var(--bbs-red);margin:6px 0 8px;font-weight:800}
.bbs-rating span{letter-spacing:0;color:#67758f;font-weight:700;margin-left:4px}
.bbs-stockline{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 10px}
.bbs-stockline span{font-size:12px;font-weight:800;background:#eef5ff;color:var(--bbs-navy);padding:6px 9px;border-radius:999px}
.bbs-product-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:12px}
.bbs-btn.small,.bbs-btn-outline.small{padding:10px 14px;font-size:14px;border-radius:999px}
.bbs-compare-toggle{margin-top:10px;border:0;background:transparent;color:var(--bbs-blue);font-weight:900;text-decoration:underline;cursor:pointer;padding:0}
.bbs-compare-toggle.active{color:var(--bbs-navy)}
.bbs-compare-bar{position:fixed;left:50%;bottom:18px;transform:translateX(-50%) translateY(160%);width:min(920px,calc(100% - 28px));background:#fff;color:var(--bbs-navy);box-shadow:0 18px 55px rgba(0,0,0,.22);border:1px solid #d8e3f2;border-radius:18px;display:flex;align-items:center;gap:14px;padding:14px 16px;z-index:99998;transition:.25s ease}
.bbs-compare-bar.show{transform:translateX(-50%) translateY(0)}
.bbs-compare-bar strong{white-space:nowrap}
.bbs-compare-bar span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;color:#61708a;font-weight:700}
.bbs-compare-bar button{border:0;background:var(--bbs-navy);color:#fff;border-radius:999px;padding:9px 14px;font-weight:900;cursor:pointer}
.bbs-need-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:20px 0 0;padding:0;list-style:none}
.bbs-need-list li{background:#fff;border:1px solid #dbe7f5;border-radius:14px;padding:14px 16px;font-weight:900;color:var(--bbs-navy);box-shadow:0 10px 22px rgba(6,32,73,.06)}
.bbs-lead-form{background:#fff;border:1px solid #dbe7f5;border-radius:24px;padding:26px;box-shadow:0 18px 45px rgba(6,32,73,.08)}
.bbs-lead-form h3{margin-top:0;color:var(--bbs-navy)}
.bbs-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.bbs-form-grid label{font-weight:900;color:var(--bbs-navy);font-size:14px;display:flex;flex-direction:column;gap:7px}
.bbs-form-grid label.wide{grid-column:1/-1}
.bbs-form-grid input,.bbs-form-grid textarea{border:1px solid #d8e3f2;border-radius:14px;padding:13px 14px;font:inherit;color:var(--bbs-navy);background:#f8fbff;outline:none}
.bbs-form-grid input:focus,.bbs-form-grid textarea:focus{border-color:var(--bbs-blue);box-shadow:0 0 0 3px rgba(21,95,166,.12)}
.bbs-form-note{font-size:13px;color:#67758f;margin:12px 0 0}
.bbs-footer a{color:inherit;text-decoration:underline;text-underline-offset:3px}
@media (max-width:900px){
  body{padding-bottom:76px}
  .bbs-mobile-bottom{position:fixed;display:grid;grid-template-columns:repeat(5,1fr);left:0;right:0;bottom:0;background:#fff;border-top:1px solid #dbe7f5;box-shadow:0 -10px 35px rgba(6,32,73,.16);z-index:99999;padding:6px 6px max(6px,env(safe-area-inset-bottom))}
  .bbs-mobile-bottom a,.bbs-mobile-bottom button{appearance:none;border:0;background:transparent;color:var(--bbs-navy);font-weight:900;font-size:11px;text-align:center;text-decoration:none;display:flex;flex-direction:column;align-items:center;gap:3px;padding:5px 2px;cursor:pointer}
  .bbs-mobile-bottom span{font-size:20px;line-height:1}
  .bbs-float-cta{display:none!important}
  .bbs-product-actions{display:grid;grid-template-columns:1fr;gap:8px}
  .bbs-product-actions .bbs-btn,.bbs-product-actions .bbs-btn-outline{text-align:center;justify-content:center}
  .bbs-need-list{grid-template-columns:1fr}
  .bbs-form-grid{grid-template-columns:1fr}
  .bbs-compare-bar{bottom:78px;align-items:flex-start;flex-direction:column}
  .bbs-compare-bar span{white-space:normal;max-height:44px}
}

/* BBS v19.4.1 SEO guide hub additions */
.bbs-guide-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:22px}
.bbs-guide-card{display:block;text-decoration:none;background:#fff;border:1px solid #dbe7f5;border-radius:22px;padding:22px;box-shadow:0 16px 38px rgba(6,32,73,.08);color:var(--bbs-navy);transition:.2s ease}
.bbs-guide-card:hover{transform:translateY(-3px);box-shadow:0 22px 50px rgba(6,32,73,.13)}
.bbs-guide-card span{display:inline-flex;background:#eef5ff;color:var(--bbs-blue);font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;padding:7px 10px;border-radius:999px;margin-bottom:12px}
.bbs-guide-card h3{margin:0 0 8px;color:var(--bbs-navy)}
.bbs-guide-card p{margin:0 0 16px;color:#61708a;font-weight:650;line-height:1.55}
.bbs-guide-card b{color:var(--bbs-blue)}
.bbs-guide-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:28px;align-items:start}
.bbs-guide-copy{background:#fff;border:1px solid #dbe7f5;border-radius:24px;padding:30px;box-shadow:0 16px 42px rgba(6,32,73,.07)}
.bbs-guide-copy h2{margin-top:0;color:var(--bbs-navy)}
.bbs-guide-copy h2:not(:first-child){margin-top:28px}
.bbs-guide-copy p,.bbs-guide-copy li{color:#52627b;line-height:1.7;font-weight:650}
.bbs-guide-copy ol,.bbs-guide-copy ul{padding-left:22px}
.bbs-guide-copy li{margin:8px 0}
.bbs-guide-aside{position:sticky;top:110px;background:var(--bbs-navy);color:#fff;border-radius:24px;padding:24px;box-shadow:0 18px 48px rgba(6,32,73,.2)}
.bbs-guide-aside h3{margin-top:0;color:#fff}
.bbs-guide-aside p{color:rgba(255,255,255,.82);line-height:1.6;font-weight:650}
.bbs-guide-aside .bbs-btn,.bbs-guide-aside .bbs-btn-outline{width:100%;justify-content:center;margin-top:10px}
.bbs-guide-aside .bbs-btn-outline{border-color:rgba(255,255,255,.45);color:#fff}
@media(max-width:900px){.bbs-guide-grid{grid-template-columns:1fr}.bbs-guide-layout{grid-template-columns:1fr}.bbs-guide-copy{padding:22px}.bbs-guide-aside{position:relative;top:auto}.bbs-guide-card:hover{transform:none}}

/* ═══════════════════════════════════════════════════════════════════════════
   v19.4.2 Customer tools: saved list, compare page, recently viewed, no-results
   ═══════════════════════════════════════════════════════════════════════════ */
.bbs-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:18px}.bbs-section-head h2{margin:0}.bbs-tool-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.bbs-tool-card{background:#fff;border:1px solid var(--lne);border-radius:var(--r3);box-shadow:var(--shd);overflow:hidden;display:grid;grid-template-columns:120px 1fr;gap:14px;padding:14px;align-items:center}.bbs-tool-card h3{font-family:'Plus Jakarta Sans',Arial,sans-serif;font-size:15px;font-weight:800;line-height:1.25;margin:0 0 8px;color:var(--n)}.bbs-tool-img{height:112px;border-radius:var(--r2);background:#f1f5f9 center/contain no-repeat;border:1px solid var(--lne)}.bbs-tool-img.wide{height:160px;min-width:160px}.bbs-tool-price{display:block;color:var(--n);font-weight:900;margin-bottom:10px}.bbs-tool-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.bbs-tool-actions button,.bbs-tool-card [data-bbs-remove]{border:1px solid var(--lne);background:#fff;color:var(--mut);border-radius:999px;padding:8px 12px;font-weight:800;cursor:pointer}.bbs-empty-state{background:#fff;border:1px dashed var(--lne);border-radius:var(--r3);padding:24px;color:var(--mut);grid-column:1/-1}.bbs-compare-table-wrap{overflow:auto;border:1px solid var(--lne);border-radius:var(--r3);box-shadow:var(--shd);background:#fff;margin-bottom:18px}.bbs-compare-table{width:100%;border-collapse:collapse;min-width:720px}.bbs-compare-table th,.bbs-compare-table td{padding:16px;border-bottom:1px solid var(--lne);vertical-align:top;text-align:left}.bbs-compare-table thead th{background:var(--n);color:#fff}.bbs-compare-table tbody th{width:130px;color:var(--n);font-weight:900}.bbs-compare-bar{position:fixed;left:50%;bottom:88px;transform:translate(-50%,24px);width:min(900px,calc(100% - 28px));background:var(--n);color:#fff;border-radius:999px;box-shadow:var(--shd2);display:flex;align-items:center;gap:14px;padding:12px 14px;z-index:150;opacity:0;pointer-events:none;transition:.2s}.bbs-compare-bar.show{opacity:1;pointer-events:auto;transform:translate(-50%,0)}.bbs-compare-bar strong{white-space:nowrap;color:var(--gld2)}.bbs-compare-bar span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}.bbs-compare-bar a,.bbs-compare-bar button{border:0;border-radius:999px;background:#fff;color:var(--n);padding:8px 12px;font-weight:900;cursor:pointer;white-space:nowrap}.bbs-filter-empty{display:none;margin-top:18px;background:#fff;border:1px dashed var(--lne);border-radius:var(--r3);padding:22px;text-align:center}.bbs-filter-empty.show{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px}.bbs-filter-empty strong{color:var(--n);font-size:18px}.bbs-filter-empty span{color:var(--mut)}.bbs-filter-empty button{border:0;border-radius:999px;background:var(--n);color:#fff;font-weight:900;padding:10px 16px;cursor:pointer}.bbs-recent-section[data-bbs-recently-section]{display:block}.bbs-product-card[data-image=""] .bbs-product-img,.bbs-tool-img:empty{background-size:cover}
@media(max-width:980px){.bbs-tool-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.bbs-tool-card{grid-template-columns:1fr}.bbs-compare-bar{bottom:74px;border-radius:var(--r2);align-items:flex-start}.bbs-compare-bar span{display:none}.bbs-section-head{align-items:flex-start;flex-direction:column}}
@media(max-width:560px){.bbs-tool-grid{grid-template-columns:1fr}.bbs-tool-card{grid-template-columns:96px 1fr;border-radius:var(--r2);padding:12px}.bbs-tool-img{height:96px}.bbs-tool-card h3{font-size:14px}.bbs-compare-bar{left:10px;right:10px;transform:translateY(24px);width:auto}.bbs-compare-bar.show{transform:translateY(0)}.bbs-compare-bar a,.bbs-compare-bar button{font-size:12px;padding:8px 9px}}

/* v19.4.4 mobile menu fallback fix */
.bbs-mobile-drawer.open {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
.bbs-mobile-drawer.open .bbs-drawer-panel {
  transform: translateX(0) !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.bbs-mobile-toggle,
.bbs-mobile-bottom-menu,
.bbs-drawer-close {
  cursor: pointer !important;
  pointer-events: auto !important;
}


/* v19.4.5 Shopify iframe menu layering fix */
.bbs-mobile-drawer {
  z-index: 2147483647 !important;
}
.bbs-mobile-drawer.open {
  z-index: 2147483647 !important;
}
.bbs-menu-open .bbs-mobile-drawer.open {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
body.bbs-shopify-header-only.bbs-menu-open,
html.bbs-menu-open body.bbs-shopify-header-only {
  min-height: 760px !important;
  height: 760px !important;
  overflow: visible !important;
}
body.bbs-shopify-header-only .bbs-site {
  position: relative !important;
  z-index: 2147483646 !important;
  overflow: visible !important;
}
body.bbs-shopify-header-only .bbs-mobile-drawer.open {
  position: absolute !important;
  inset: 0 auto auto 0 !important;
  width: 100% !important;
  min-height: 760px !important;
  height: 760px !important;
}
body.bbs-shopify-header-only .bbs-drawer-panel {
  min-height: 760px !important;
}

/* v19.4.6 Shopify basket / checkout header actions */
.bbs-header-cart-link,
.bbs-header-checkout-link {
  gap: 7px !important;
}

.bbs-cart-icon {
  line-height: 1 !important;
}

.bbs-cart-count {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 20px !important;
  height: 20px !important;
  padding: 0 6px !important;
  margin-left: 2px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.22) !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

.bbs-cart-count.has-items {
  background: #ffffff !important;
  color: var(--bbs-navy) !important;
}

@media (max-width: 980px) {
  .bbs-head-actions-clean .bbs-advice,
  .bbs-head-actions-clean .bbs-header-cta.secondary:not(.bbs-header-cart-link) {
    display: none !important;
  }

  .bbs-header-cart-link,
  .bbs-header-checkout-link {
    min-height: 42px !important;
    padding: 0 12px !important;
    font-size: 13px !important;
  }
}

@media (max-width: 640px) {
  .bbs-retail-header .bbs-head-actions-clean {
    display: flex !important;
    width: 100% !important;
    justify-content: center !important;
    gap: 8px !important;
    order: 6 !important;
  }

  .bbs-header-cart-link,
  .bbs-header-checkout-link {
    flex: 1 1 0 !important;
    max-width: 170px !important;
  }
}

/* v19.5.0: desktop mega-menu and Shopify iframe reliability */
@media (min-width: 901px) {
  body.bbs-shopify-header-only,
  body.bbs-shopify-header-only .bbs-site,
  body.bbs-shopify-header-only .bbs-retail-header,
  body.bbs-shopify-header-only .bbs-tabs-row,
  body.bbs-shopify-header-only .bbs-tabs,
  body.bbs-shopify-header-only .bbs-tab-wrap {
    overflow: visible !important;
  }

  .bbs-retail-header .bbs-mega {
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
  }

  .bbs-retail-header .bbs-mega-inner {
    height: auto !important;
    min-height: 0 !important;
    align-items: stretch !important;
  }
}

/* Do not show known-bad generic catalogue artwork in menu thumbnails. */
.bbs-mega-thumb.bbs-image-missing,
.bbs-product-card[data-image=""] .bbs-product-img {
  background-image: linear-gradient(135deg, #f4f7fa, #e9eef4) !important;
  position: relative;
}

.bbs-mega-thumb.bbs-image-missing::after {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  margin: 11px auto;
  border: 2px solid rgba(6,32,73,.25);
  border-radius: 3px;
}

.bbs-cat-img.bbs-image-missing {
  background-image: linear-gradient(135deg, #f4f7fa, #e9eef4) !important;
}


/* v19.5.1: reliable category artwork using real image elements. */
.bbs-cat-img,
.bbs-mega-thumb {
  overflow: hidden !important;
}

.bbs-cat-img img,
.bbs-mega-thumb img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.bbs-mega-thumb img {
  object-fit: cover !important;
}

.bbs-cat-img.bbs-image-missing,
.bbs-mega-thumb.bbs-image-missing {
  background: linear-gradient(135deg, #f4f7fa, #e9eef4) !important;
}

/* v19.5.3 — saved-product confirmation */
.bbs-save-notice{position:fixed;left:50%;bottom:94px;transform:translate(-50%,18px);z-index:2147483000;background:var(--n,#062049);color:#fff;border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:11px 18px;font-weight:800;box-shadow:0 16px 44px rgba(0,0,0,.24);opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;white-space:nowrap;max-width:calc(100% - 28px);overflow:hidden;text-overflow:ellipsis}
.bbs-save-notice.show{opacity:1;transform:translate(-50%,0)}
@media (max-width:700px){.bbs-save-notice{bottom:82px;font-size:14px}}

/* ═══ v19.5.4 MOBILE SEARCH TILE INTERACTION FIX ═══════════════════════════
   Below 900px the search bar collapses into an icon-only tile with the real
   input/button hidden (display:none), leaving only decorative ::before/::after
   content — so tapping it did nothing. JS in footer_script() toggles the
   .bbs-search-open class on tap; these rules expand the tile into a full-width,
   usable search bar with a close button. Specificity note: each selector below
   adds the .bbs-search-open class on top of the existing .bbs-retail-header
   .bbs-search chain, so it outranks the earlier !important hide rules regardless
   of source order — no need to touch/remove the older rules. */
.bbs-search-close { display: none; }

@media (max-width: 900px) {
  .bbs-retail-header .bbs-search.bbs-search-open {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0 12px !important;
    background: var(--bbs-navy, #06183A) !important;
    border: 0 !important;
    box-shadow: 0 8px 24px rgba(6,32,73,.24) !important;
    z-index: 500 !important;
  }

  /* Hide the icon-tile's decorative label/icon while it's open — the real
     controls take over. */
  .bbs-retail-header .bbs-search.bbs-search-open::before,
  .bbs-retail-header .bbs-search.bbs-search-open::after {
    content: none !important;
    display: none !important;
  }

  .bbs-retail-header .bbs-search.bbs-search-open .bbs-search-icon {
    display: none !important;
  }

  .bbs-retail-header .bbs-search.bbs-search-open input {
    display: block !important;
    flex: 1 1 auto !important;
    height: 44px !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 12px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    color: var(--bbs-navy, #06183A) !important;
    font-size: 16px !important; /* keep at 16px+ so iOS Safari doesn't zoom on focus */
  }

  .bbs-retail-header .bbs-search.bbs-search-open button[type="submit"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 16px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: var(--bbs-gold, #D4AF37) !important;
    color: var(--bbs-navy, #06183A) !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    white-space: nowrap !important;
  }

  .bbs-retail-header .bbs-search.bbs-search-open .bbs-search-close {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    width: 32px !important;
    height: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,.14) !important;
    color: #ffffff !important;
    font-size: 15px !important;
  }
}