@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 {
  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;
  transition: var(--trans);
}
.bbs-subcat:hover { background: rgba(255,255,255,.16); border-color: rgba(200,150,30,.5); }

/* ── 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-filterbar{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 24px}.bbs-filterbar button{border:1px solid var(--bbs-line);background:#fff;color:var(--bbs-navy);border-radius:999px;padding:10px 15px;font-weight:900;cursor:pointer;transition:.16s ease}.bbs-filterbar button:hover,.bbs-filterbar button.active{background:var(--bbs-red);border-color:var(--bbs-red);color:#fff}
.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(236,32,36,.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;
}