/* ==========================================================================
   BuyBulk India — Premium Design System
   B2B Clothing & Footwear Auction Platform
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root{
  /* Brand palette — flat, distinct colors (no blended gradients) */
  --bb-red: #B80E0F;
  --bb-red-dark: #8C0B0C;
  --bb-red-deep: #5C0708;
  --bb-red-light: #D93A3B;
  --bb-gold: #FAD08F;
  --bb-gold-dark: #C9861A;
  --bb-black: #0A0A0B;
  --bb-ink: #16161A;
  --bb-white: #FFFFFF;
  --bb-cream: #FFF8F6;
  --bb-gray-50: #FAFAFA;
  --bb-gray-100: #F3F3F5;
  --bb-gray-200: #E7E7EB;
  --bb-gray-400: #9A9AA5;
  --bb-gray-600: #62626D;
  --bb-gray-800: #34343C;

  --font-display: 'Plus Jakarta Sans', sans-serif;
  --font-body: 'Inter', sans-serif;

  --shadow-sm: 0 2px 8px rgba(10,10,11,.06);
  --shadow-md: 0 10px 30px rgba(10,10,11,.08);
  --shadow-lg: 0 20px 60px rgba(10,10,11,.12);
  --shadow-red: 0 14px 34px rgba(184,14,15,.28);
  --shadow-gold: 0 14px 34px rgba(201,134,26,.28);

  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-pill: 100px;

  --ease: cubic-bezier(.22,1,.36,1);
  --dur: .45s;
}

/* ---------- Base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family: var(--font-body);
  color: var(--bb-ink);
  background: var(--bb-white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4,h5,h6{
  font-family: var(--font-display);
  color: var(--bb-black);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
}
p{ margin:0; }
a{ text-decoration:none; color:inherit; }
img{ max-width:100%; display:block; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family: inherit; }
::selection{ background: var(--bb-red); color:#fff; }

.bb-section{ padding: 50px 0; position: relative; }
.bb-section-tight{ padding: 50px 0; }
.bb-overflow-hidden{ overflow:hidden; }
.bb-bg-cream{ background: var(--bb-cream); }
.bb-bg-gray{ background: var(--bb-gray-50); }
.bb-bg-dark{ background: var(--bb-black); color: #fff; }

/* ---------- Typography helpers ---------- */
.bb-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--font-display);
  font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--bb-red);
  background: rgba(184,14,15,.08);
  border: 1px solid rgba(184,14,15,.18);
  padding: 8px 18px 8px 14px;
  border-radius: var(--radius-pill);
}
.bb-eyebrow::before{
  content:''; width:7px; height:7px; border-radius:50%;
  background: var(--bb-red);
  box-shadow: 0 0 0 4px rgba(184,14,15,.12);
}
.bb-eyebrow.light{ color:#fff; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); }

.bb-heading{ font-size: clamp(1.7rem, 4vw, 2.1rem); line-height: 1.18; }
.bb-heading .accent{ color: var(--bb-red); position: relative; }
.bb-subtext{ color: var(--bb-gray-600); font-size: 1.08rem; line-height: 1.7; }
.bb-bg-dark .bb-subtext{ color: rgba(255,255,255,.68); }

.bb-section-head{ max-width: 680px; margin-bottom: 56px; }
.bb-section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.bb-section-head .bb-eyebrow{ margin-bottom: 18px; }
.bb-section-head .bb-heading{ margin-bottom: 18px; }

.text-accent{
  color: var(--bb-red);
}

/* ---------- Buttons ---------- */
.bb-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family: var(--font-display); font-weight: 700; font-size: .95rem;
  padding: 15px 30px; border-radius: 6px;
  border: none; cursor:pointer; white-space: nowrap;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
  position: relative; overflow: hidden;
}
.bb-btn i, .bb-btn svg{ font-size: .95em; }
.bb-btn-primary{ background: var(--bb-red); color:#fff; box-shadow: var(--shadow-red); }
.bb-btn-primary:hover{ transform: translateY(-3px); background: var(--bb-red-dark); box-shadow: 0 20px 40px rgba(184,14,15,.36); color:#fff; }
.bb-btn-dark{ background: var(--bb-black); color:#fff; }
.bb-btn-dark:hover{ transform: translateY(-3px); background: var(--bb-red); box-shadow: var(--shadow-red); color:#fff; }
.bb-btn-gold{ background: var(--bb-gold); color: var(--bb-red-deep); box-shadow: var(--shadow-gold); }
.bb-btn-gold:hover{ transform: translateY(-3px); background: var(--bb-gold-dark); color:#fff; box-shadow: 0 20px 40px rgba(201,134,26,.36); }
.bb-btn-outline{ background: transparent; color: var(--bb-black); border: 1.5px solid var(--bb-gray-200); }
.bb-btn-outline:hover{ border-color: var(--bb-red); color: var(--bb-red); transform: translateY(-3px); }
.bb-btn-white{ background:#fff; color: var(--bb-black); }
.bb-btn-white:hover{ transform: translateY(-3px); box-shadow: 0 16px 32px rgba(0,0,0,.18); }
.bb-btn-ghost-light{ background: rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.28); backdrop-filter: blur(10px); }
.bb-btn-ghost-light:hover{ background: rgba(255,255,255,.18); transform: translateY(-3px); color:#fff; }
.bb-btn-sm{ padding: 10px 20px; font-size: .82rem; }
.bb-btn-block{ width:100%; }
.bb-btn-icon{
  width:46px; height:46px; padding:0; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background: var(--bb-gray-100); color: var(--bb-black); border:none;
  transition: all var(--dur) var(--ease);
}
.bb-btn-icon:hover{ background: var(--bb-red); color:#fff; transform: translateY(-2px); }

/* ---------- Glassmorphism ---------- */
.bb-glass{
  background: rgba(255,255,255,.65);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255,255,255,.5);
}
.bb-glass-dark{
  background: rgba(20,8,9,.55);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255,255,255,.1);
}

/* ---------- Cards ---------- */
.bb-card{
  background:#fff; border-radius: var(--radius-md);
  border: 1px solid var(--bb-gray-200);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.bb-card:hover{ transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: transparent; }

/* ---------- Animations ---------- */
@keyframes bbFadeUp{ from{ opacity:0; transform: translateY(36px);} to{ opacity:1; transform: translateY(0);} }
@keyframes bbFadeIn{ from{ opacity:0;} to{ opacity:1;} }
@keyframes bbFloat{ 0%,100%{ transform: translateY(0) rotate(0deg);} 50%{ transform: translateY(-18px) rotate(2deg);} }
@keyframes bbFloatSlow{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-12px);} }
@keyframes bbPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.5; } }
@keyframes bbBlob{
  0%,100%{ border-radius: 42% 58% 65% 35% / 45% 45% 55% 55%; }
  33%{ border-radius: 62% 38% 45% 55% / 55% 62% 38% 45%; }
  66%{ border-radius: 38% 62% 55% 45% / 35% 42% 58% 65%; }
}
@keyframes bbShimmer{ 0%{ background-position: -200% 0;} 100%{ background-position: 200% 0;} }
@keyframes bbGradientShift{ 0%{ background-position: 0% 50%;} 50%{ background-position: 100% 50%;} 100%{ background-position: 0% 50%;} }
@keyframes bbTicker{ from{ transform: translateX(0);} to{ transform: translateX(-50%);} }

.reveal{ opacity:0; transform: translateY(36px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in-view{ opacity:1; transform: translateY(0); }
.reveal-scale{ opacity:0; transform: scale(.92); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal-scale.in-view{ opacity:1; transform: scale(1); }
.delay-1{ transition-delay: .1s; } .delay-2{ transition-delay: .2s; } .delay-3{ transition-delay: .3s; }
.delay-4{ transition-delay: .4s; } .delay-5{ transition-delay: .5s; } .delay-6{ transition-delay: .6s; }

.float-anim{ animation: bbFloat 6s ease-in-out infinite; }
.float-anim-slow{ animation: bbFloatSlow 8s ease-in-out infinite; }

/* ---------- Badges / chips ---------- */
.bb-badge{
  display:inline-flex; align-items:center; gap:6px;
  font-family: var(--font-display); font-weight:700; font-size:.72rem; letter-spacing:.04em; text-transform:uppercase;
  padding: 6px 13px; border-radius: var(--radius-pill);
}
.bb-badge-live{ background: rgba(184,14,15,.1); color: var(--bb-red); }
.bb-badge-live::before{ content:''; width:6px; height:6px; border-radius:50%; background: var(--bb-red); animation: bbPulse 1.4s infinite; }
.bb-badge-ending{ background: rgba(250,208,143,.12); color: var(--bb-gold-dark); }
.bb-badge-closed{ background: var(--bb-gray-100); color: var(--bb-gray-600); }
.bb-badge-new{ background: var(--bb-black); color:#fff; }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background: var(--bb-gray-50); }
::-webkit-scrollbar-thumb{ background: var(--bb-gray-400); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover{ background: var(--bb-red); }

/* ---------- Preloader ---------- */
#bb-preloader{
  position: fixed; inset:0; z-index: 99999; background: var(--bb-black);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  transition: opacity .6s ease, visibility .6s ease;
}
#bb-preloader.hide{ opacity:0; visibility:hidden; }
#bb-preloader::before{
  content:''; position:absolute; width:520px; height:520px; border-radius:50%;
  background: radial-gradient(circle, rgba(184,14,15,.35), transparent 70%);
  filter: blur(20px); animation: bbPreloaderGlow 3s ease-in-out infinite;
}
.bb-preloader-inner{ position:relative; display:flex; flex-direction:column; align-items:center; gap:24px; }
.bb-preloader-logo{
  width:78px; height:78px; border-radius:22px; background:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 20px 50px rgba(184,14,15,.35);
  animation: bbPreloaderPulse 1.6s ease-in-out infinite;
}
.bb-preloader-logo img{ width:56px; height:56px; object-fit:contain; border-radius:10px; }
.bb-preloader-brand{ font-family: var(--font-display); font-weight:800; color:#fff; letter-spacing:.02em; font-size:1.05rem; }
.bb-preloader-bar{ width:140px; height:4px; border-radius:4px; background: rgba(255,255,255,.1); overflow:hidden; }
.bb-preloader-bar span{
  display:block; height:100%; width:40%; border-radius:4px;
  background: linear-gradient(90deg, var(--bb-red), var(--bb-gold));
  animation: bbPreloaderBar 1.3s ease-in-out infinite;
}
@keyframes bbPreloaderPulse{
  0%, 100%{ transform: scale(1); }
  50%{ transform: scale(1.08); }
}
@keyframes bbPreloaderBar{
  0%{ transform: translateX(-120%); }
  100%{ transform: translateX(320%); }
}
@keyframes bbPreloaderGlow{
  0%, 100%{ opacity:.6; transform: scale(1); }
  50%{ opacity:1; transform: scale(1.15); }
}

/* ---------- Back to top ---------- */
#bb-back-top{
  position: fixed; right: 26px; bottom: 26px; z-index: 900;
  width:50px; height:50px; border-radius:50%;
  background: var(--bb-red); color:#fff; border:none;
  display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow-red);
  opacity:0; visibility:hidden; transform: translateY(16px);
  transition: all var(--dur) var(--ease);
}
#bb-back-top.show{ opacity:1; visibility:visible; transform: translateY(0); }
#bb-back-top:hover{ transform: translateY(-4px); }

/* ---------- Floating WhatsApp button ---------- */
#bb-whatsapp-float{
  position: fixed; right: 26px; bottom: 90px; z-index: 900;
  width:56px; height:56px; border-radius:50%;
  background:#25D366; color:#fff; font-size:28px;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 6px 20px rgba(37,211,102,.45);
  text-decoration:none;
  animation: bbWaFloat 2.6s ease-in-out infinite;
}
#bb-whatsapp-float:hover{ background:#1ebe57; color:#fff; }
.bb-whatsapp-ping{
  position:absolute; inset:0; border-radius:50%;
  background:#25D366; opacity:.6;
  animation: bbWaPing 1.8s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes bbWaFloat{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-6px); }
}
@keyframes bbWaPing{
  0%{ transform: scale(1); opacity:.6; }
  100%{ transform: scale(1.7); opacity:0; }
}
@media (max-width: 575px){
  #bb-whatsapp-float{ right:16px; bottom:80px; width:50px; height:50px; font-size:24px; }
  #bb-back-top{ right:16px; }
}

/* ---------- Cursor glow (subtle premium touch) ---------- */
.bb-cursor-glow{
  position: fixed; width: 420px; height: 420px; border-radius:50%;
  background: radial-gradient(circle, rgba(184,14,15,.10), transparent 70%);
  pointer-events:none; z-index:0; transform: translate(-50%,-50%);
  transition: opacity .3s ease; display:none;
}
@media (min-width: 992px){ .bb-cursor-glow{ display:block; } }

/* ==========================================================================
   ANNOUNCEMENT BAR
   ========================================================================== */
.bb-announce-bar{
  background: linear-gradient(90deg, var(--bb-black), #2a0d0d, var(--bb-black));
  overflow:hidden;
}
.bb-announce-bar .container{ display:flex; justify-content:center; }
.bb-announce-text{
  margin:0; padding:9px 0; display:flex; align-items:center; justify-content:center; gap:8px;
  flex-wrap:wrap; text-align:center; color:#fff; font-size:.82rem; font-weight:600; letter-spacing:.01em;
}
.bb-announce-live{
  display:inline-flex; align-items:center; gap:6px; font-family: var(--font-display); font-weight:800;
  font-size:.78rem; letter-spacing:.06em; color:#fff; background: var(--bb-red);
  padding:3px 10px; border-radius: var(--radius-pill); animation: bbAnnounceBlink 1.4s ease-in-out infinite;
}
.bb-live-dot{ width:7px; height:7px; border-radius:50%; background:#fff; animation: bbDotPulse 1.4s ease-in-out infinite; }
@keyframes bbAnnounceBlink{
  0%, 100% { opacity:1; }
  50% { opacity:.45; }
}
@keyframes bbDotPulse{
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,.6); }
  50% { box-shadow: 0 0 0 5px rgba(255,255,255,0); }
}
@media (max-width:576px){
  .bb-announce-text{ font-size:.74rem; padding:8px 14px; }
}

/* ==========================================================================
   HEADER
   ========================================================================== */
.bb-header {
    position: relative;
    z-index: 999;
    padding: 0;
    background: #fff;
    box-shadow: 0 1px 0 rgba(10, 10, 11, .06);
    transition: box-shadow .3s ease, padding .3s ease;
}
.bb-header.is-fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 0;
    box-shadow: 0 8px 30px rgba(10, 10, 11, .1);
    animation: bbFadeIn .3s ease;
}
.bb-header-spacer{ height:0; }
.bb-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 10px 0;
}

.bb-logo{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.bb-logo img {
    height: 68px;
    width: auto;
    object-fit: contain;
    /* padding: 10px 0; */
}
.bb-logo-chip{ background:#fff; border-radius:14px; padding:10px 14px; display:inline-flex; box-shadow: var(--shadow-sm); }
.bb-logo-chip img{ height:40px; }
.bb-auth-visual .bb-logo-chip{ padding:14px 18px; }
.bb-auth-visual .bb-logo-chip img{ height:64px; }

.bb-header-search{
  flex:1; max-width:560px; margin:0 auto;
  display:flex; align-items:center; gap:10px;
  background: var(--bb-gray-50); border:1.5px solid var(--bb-gray-200);
  border-radius: 6px; padding: 4px 4px 4px 20px;
  transition: border-color .3s ease;
}
.bb-header-search:focus-within{ border-color: var(--bb-red); }
.bb-header-search i{ color: var(--bb-gray-400); font-size:.9rem; }
.bb-header-search input{ flex:1; min-width:0; border:none; background:transparent; font-size:.9rem; font-weight:500; color: var(--bb-ink); outline:none; padding:9px 0; }
.bb-header-search input::placeholder{ color: var(--bb-gray-400); }
.bb-header-search button{
  flex-shrink:0; display:flex; align-items:center; justify-content:center;
  width:40px; height:36px; background:transparent; color: var(--bb-ink); border:none;
  border-radius: 6px; font-size:1rem; transition: color .3s ease;
}
.bb-header-search button:hover{ color: var(--bb-red); }

.bb-nav-strip{ background: var(--bb-gray-50); border-top:1px solid var(--bb-gray-100); border-bottom:1px solid var(--bb-gray-100); }
.bb-nav-strip .bb-nav > ul{ justify-content:center; }
.bb-nav-strip .bb-nav > ul > li > a{ padding-top:12px; padding-bottom:12px; }

.bb-nav > ul{ display:flex; align-items:center; gap:2px; }
.bb-nav > ul > li > a{
  display:flex; align-items:center; gap:6px;
  font-family: var(--font-display); font-weight:600; font-size:19px;
  padding: 6px 16px; border-radius: var(--radius-pill);
  border-bottom: 3px solid transparent;
  color: var(--bb-ink);
  transition: all .3s var(--ease);
}
.bb-nav > ul > li > a i{ font-size:.68rem; opacity:.7; }
.bb-nav > ul > li > a:hover{ background: transparent; color: var(--bb-red); border-bottom-color: var(--bb-red); }
.bb-nav > ul > li > a:hover::before{
  content:''; width:6px; height:6px; border-radius:50%; background: var(--bb-red); flex-shrink:0;
}
.bb-nav > ul > li.bb-active > a{ color: var(--bb-red); }

.bb-has-mega, .bb-has-dropdown{ position: relative; }
.bb-has-mega::after, .bb-has-dropdown::after{ content:''; position:absolute; left:0; right:0; top:100%; height:14px; }
.bb-mega{
  position:absolute; top: calc(100% + 14px); left:50%; transform: translateX(-50%) translateY(10px);
  width: min(880px, 92vw);
  background:#fff; border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  padding: 30px; opacity:0; visibility:hidden; pointer-events:none;
  transition: all .35s var(--ease); z-index: 50;
}
.bb-has-mega:hover .bb-mega{ opacity:1; visibility:visible; pointer-events:auto; transform: translateX(-50%) translateY(0); }
.bb-mega-inner{ display:grid; grid-template-columns: 1fr 1.4fr 1fr; gap:30px; }
.bb-mega-title{ display:block; font-family: var(--font-display); font-weight:700; font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color: var(--bb-gray-400); margin-bottom:14px; }
.bb-mega-links{ display:flex; flex-direction:column; gap:4px; border-right: 1px solid var(--bb-gray-100); padding-right: 20px; }
.bb-mega-links a, .bb-dropdown a{
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px;
  color: var(--bb-ink); font-weight:600; font-size:.9rem; transition: all .25s ease;
}
.bb-mega-links a i, .bb-dropdown a i{ color: var(--bb-red); width:16px; text-align:center; }
.bb-mega-links a:hover, .bb-dropdown a:hover{ background: var(--bb-gray-50); color: var(--bb-red); transform: translateX(4px); }
.bb-mega-cat-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:4px; }
.bb-mega-cat-grid a{ display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:10px; font-size:.86rem; font-weight:600; color: var(--bb-ink); transition: all .25s ease; }
.bb-mega-cat-grid a i{ color: var(--bb-gold-dark); width:16px; }
.bb-mega-cat-grid a:hover{ background: var(--bb-gray-50); color: var(--bb-red); transform: translateX(4px); }
.bb-mega-promo{ background: var(--bb-black); border-radius: var(--radius-md); padding:22px; color:#fff; display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
.bb-mega-promo h5{ color:#fff; font-size:1.05rem; }
.bb-mega-promo p{ color: rgba(255,255,255,.7); font-size:.84rem; line-height:1.6; }

.bb-dropdown{
  position:absolute; top: calc(100% + 14px); left:0; min-width:230px;
  background:#fff; border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  padding:12px; opacity:0; visibility:hidden; pointer-events:none; transform: translateY(10px);
  transition: all .35s var(--ease); z-index:50;
}
.bb-has-dropdown:hover .bb-dropdown{ opacity:1; visibility:visible; pointer-events:auto; transform: translateY(0); }

.bb-header-actions{ display:flex; align-items:center; gap:14px; }
.bb-header-actions .bb-btn-gold, .bb-header-actions .bb-btn-primary{
  border-bottom: 3px solid transparent; padding-bottom: 7px;
}
.bb-header-actions .bb-btn-gold:hover{
  background: var(--bb-gold); color: var(--bb-red-deep); transform:none;
  box-shadow: var(--shadow-gold); border-bottom-color: var(--bb-red-deep);
}
.bb-header-actions .bb-btn-primary:hover{
  background: var(--bb-red); color:#fff; transform:none;
  box-shadow: var(--shadow-red); border-bottom-color: var(--bb-gold);
}
.bb-header-link{ font-family: var(--font-display); font-weight:700; font-size:.92rem; color: var(--bb-ink); padding:8px 4px; transition: color .3s ease; }
.bb-header-link:hover{ color: var(--bb-red); }

.bb-lang-switch{ position:relative; }
.bb-lang-btn{ background: var(--bb-gray-100); border:1px solid var(--bb-gray-200); color: var(--bb-ink); padding:9px 14px; border-radius: var(--radius-pill); font-weight:600; font-size:.84rem; display:flex; align-items:center; gap:8px; transition: all .3s ease; }
.bb-lang-menu{ position:absolute; top:calc(100% + 10px); right:0; background:#fff; border-radius:12px; box-shadow: var(--shadow-lg); padding:8px; min-width:120px; opacity:0; visibility:hidden; transform: translateY(8px); transition: all .3s ease; }
.bb-lang-switch.open .bb-lang-menu{ opacity:1; visibility:visible; transform: translateY(0); }
.bb-lang-menu a{ display:block; padding:8px 12px; border-radius:8px; font-size:.86rem; font-weight:600; color: var(--bb-ink); }
.bb-lang-menu a:hover{ background: var(--bb-gray-50); color: var(--bb-red); }

.bb-burger{ width:44px; height:44px; border-radius:50%; border:none; background: var(--bb-gray-100); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; }
.bb-burger span{ width:18px; height:2px; background: var(--bb-ink); border-radius:2px; transition: all .3s ease; }
.bb-burger.open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.bb-burger.open span:nth-child(2){ opacity:0; }
.bb-burger.open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

.bb-mobile-nav{
  position: fixed; top:0; right:-100%; width:min(340px,86vw); height:100vh; z-index:1100;
  background:#fff; box-shadow: -20px 0 60px rgba(0,0,0,.2);
  padding: 100px 26px 30px; transition: right .45s var(--ease); overflow-y:auto;
}
.bb-mobile-nav.open{ right:0; }
.bb-mobile-nav ul{ display:flex; flex-direction:column; gap:2px; margin-bottom:24px; }
.bb-mobile-nav a{ display:block; padding:13px 14px; border-radius:12px; font-family: var(--font-display); font-weight:700; color: var(--bb-ink); }
.bb-mobile-nav a:hover{ background: var(--bb-gray-50); color: var(--bb-red); }
.bb-mobile-actions{ display:flex; flex-direction:column; gap:12px; }
.bb-mobile-backdrop{ position: fixed; inset:0; background: rgba(10,10,11,.5); z-index:1090; opacity:0; visibility:hidden; transition: all .4s ease; }
.bb-mobile-backdrop.open{ opacity:1; visibility:visible; }

@media (max-width: 1199.98px){
  .bb-mega{ position: static; transform:none; opacity:1; visibility:visible; pointer-events:auto; display:none; box-shadow:none; border:1px solid var(--bb-gray-100); margin-top:10px; }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.bb-footer{ background: #fff; color: var(--bb-gray-600); padding: 90px 0 0; position: relative; overflow:hidden; border-top:1px solid var(--bb-gray-100); }
.bb-footer-glow{ position:absolute; top:-220px; left:50%; transform: translateX(-50%); width:900px; height:500px; background: radial-gradient(circle, rgba(184,14,15,.06), transparent 65%); pointer-events:none; }
.bb-footer-top{ display:grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1.4fr; gap:40px; padding-bottom:60px; border-bottom:1px solid var(--bb-gray-100); }
.bb-footer-brand p{ margin-top:18px; font-size:.92rem; line-height:1.75; color: var(--bb-gray-600); max-width:340px; }
.bb-footer-social{ display:flex; gap:10px; margin-top:24px; }
.bb-footer-social a{ width:40px; height:40px; border-radius:50%; background: var(--bb-gray-50); border:1px solid var(--bb-gray-100); display:flex; align-items:center; justify-content:center; transition: all .3s ease; color: var(--bb-ink); }
.bb-footer-social a:hover{ background: var(--bb-red); border-color:transparent; color:#fff; transform: translateY(-4px); box-shadow: var(--shadow-red); }
.bb-footer-col h6{ color: var(--bb-black); font-family: var(--font-display); font-weight:700; font-size:1rem; margin-bottom:20px; }
.bb-footer-col ul{ display:flex; flex-direction:column; gap:12px; }
.bb-footer-col a{ font-size:.9rem; color: var(--bb-gray-600); transition: all .25s ease; }
.bb-footer-col a:hover{ color: var(--bb-red); padding-left:4px; }
.bb-newsletter-form{ display:flex; margin-top:16px; margin-bottom:22px; border-radius: 6px; background: var(--bb-gray-50); border:1px solid var(--bb-gray-200); padding:5px; }
.bb-newsletter-form input{ flex:1; background:transparent; border:none; outline:none; color: var(--bb-ink); padding:9px 16px; font-size:.88rem; }
.bb-newsletter-form input::placeholder{ color: var(--bb-gray-400); }
.bb-newsletter-form button{ width:38px; height:38px; border-radius:6px; background: var(--bb-red); border:none; color:#fff; flex-shrink:0; transition: background .3s ease; }
.bb-newsletter-form button:hover{ background: var(--bb-red-dark); }
.bb-footer-contact{ display:flex; flex-direction:column; gap:12px; }
.bb-footer-contact li{ display:flex; align-items:flex-start; gap:10px; font-size:.86rem; color: var(--bb-gray-600); }
.bb-footer-contact i{ color: var(--bb-red); margin-top:3px; }
.bb-footer-bottom{ display:flex; align-items:center; justify-content:space-between; padding: 26px 0; flex-wrap:wrap; gap:14px; font-size:.85rem; color: var(--bb-gray-600); }
.bb-footer-legal{ display:flex; gap:26px; }
.bb-footer-legal a{ color: var(--bb-gray-600); }
.bb-footer-legal a:hover{ color: var(--bb-red); }

@media (max-width: 991.98px){
  .bb-footer-top{ grid-template-columns: 1fr 1fr; row-gap:40px; }
  .bb-footer-brand{ grid-column: 1 / -1; }
}
@media (max-width: 575.98px){
  .bb-footer-top{ grid-template-columns: 1fr; }
  .bb-footer-bottom{ flex-direction:column; text-align:center; }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.bb-hero {
    position: relative;
    background: linear-gradient(180deg, #FFFFFF 0%, var(--bb-cream) 100%);
    color: var(--bb-ink);
    padding: 21px 0 23px;
    overflow: hidden;
    isolation: isolate;
    border-bottom: 1px solid var(--bb-gray-200);
}
.bb-hero-grid{
  position:absolute; inset:0; z-index:-2;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(ellipse at 50% 30%, black 20%, transparent 75%);
}
.bb-hero-blob{ position:absolute; z-index:-1; filter: blur(10px); opacity:.5; animation: bbBlob 12s ease-in-out infinite; }
.bb-hero-blob.b1{ width:480px; height:480px; top:-160px; right:-140px; background: var(--bb-red); }
.bb-hero-blob.b2{ width:320px; height:320px; bottom:-140px; left:-100px; background: var(--bb-gold); opacity:.3; animation-delay: -4s; }

/* Light hero overrides (scoped so dark sections reusing .bb-hero-grid/.bb-hero-blob are unaffected) */
.bb-hero .bb-hero-grid{
  background-image: linear-gradient(rgba(10,10,11,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(10,10,11,.045) 1px, transparent 1px);
}
.bb-hero .bb-hero-blob{ filter: blur(60px); opacity:.2; }
.bb-hero .bb-hero-blob.b2{ opacity:.14; }

.bb-hero-row{ display:grid; grid-template-columns: 1.05fr .95fr; gap:50px; align-items:center; }
.bb-hero-copy h1{ color: var(--bb-black); font-size: clamp(1.95rem, 3.2vw, 2.75rem); font-weight:700; letter-spacing:-.02em; line-height:1.18; margin: 16px 0 16px; }
.bb-hero-copy h1 .accent{ color: var(--bb-red); }
.bb-hero-copy p{ color: var(--bb-gray-600); font-size:1rem; font-weight:400; line-height:1.65; max-width:460px; }
.bb-hero-cta{ display:flex; gap:16px; margin-top:28px; flex-wrap:wrap; }
.bb-hero-trust{ display:flex; gap:26px; margin-top:32px; flex-wrap:wrap; }
.bb-hero-trust-item{ display:flex; align-items:center; gap:10px; font-size:.86rem; color: var(--bb-gray-800); font-weight:600; }
.bb-hero-trust-item i{ color: var(--bb-gold-dark); font-size:1.05rem; }

.bb-hero-stats{ display:flex; gap:40px; margin-top:34px; padding-top:28px; border-top:1px solid rgba(255,255,255,.1); flex-wrap:wrap; }
.bb-hero-stat b{ display:block; font-family: var(--font-display); font-size:1.8rem; font-weight:800; color:#fff; }
.bb-hero-stat span{ font-size:.8rem; color: rgba(255,255,255,.55); font-weight:600; }

.bb-hero-visual{ position:relative; height: 460px; }
.bb-hero-frame{
  position:absolute; inset: 24px 34px; border-radius: var(--radius-lg);
  overflow:hidden; box-shadow: 0 30px 70px rgba(10,10,11,.14), 0 0 0 1px rgba(10,10,11,.06);
  border: 1px solid rgba(10,10,11,.06);
}
.bb-hero-frame img{ width:100%; height:100%; object-fit:cover; }
.bb-hero-frame::before{
  content:''; position:absolute; inset:0; z-index:2; pointer-events:none; border-radius:inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}

/* ---------- Hero auto-slide slider ---------- */
.bb-hero-slider{ position:relative; width:100%; height:100%; }
.bb-hero-slide{ position:absolute; inset:0; opacity:0; transition: opacity .8s ease; }
.bb-hero-slide.active{ opacity:1; z-index:1; }
.bb-hero-slide img{ width:100%; height:100%; object-fit:cover; transform: scale(1.08); transition: transform 3.3s ease-out; }
.bb-hero-slide.active img{ transform: scale(1); }
.bb-hero-slider-dots{ position:absolute; z-index:4; bottom:20px; left:50%; transform:translateX(-50%); display:flex; gap:8px; }
.bb-hero-slider-dots span{ width:8px; height:8px; border-radius:50%; background: rgba(255,255,255,.45); border:1px solid rgba(255,255,255,.3); cursor:pointer; transition: all .35s var(--ease); }
.bb-hero-slider-dots span.active{ background: var(--bb-gold); width:26px; border-radius:5px; border-color: var(--bb-gold); }

.bb-float-card{
  position:absolute; z-index:3; padding:14px 18px; border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); display:flex; align-items:center; gap:12px;
  border: 1px solid rgba(255,255,255,.5);
}
.bb-hero .bb-float-card{ background: rgba(255,255,255,.92); border-color: var(--bb-gray-200); }
.bb-float-card.card-1{ top:5%; left:-6%; }
.bb-float-card.card-2{ bottom:15%; right:-8%; animation-delay: -2.4s; }
.bb-float-card.card-3{ bottom:-3%; left:8%; animation-delay: -4.8s; }
.bb-float-card .icon{ width:40px; height:40px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:1.05rem; flex-shrink:0; }
.bb-float-card .icon.red{ background: rgba(184,14,15,.12); color: var(--bb-red); }
.bb-float-card .icon.orange{ background: rgba(250,208,143,.12); color: var(--bb-gold-dark); }
.bb-float-card .icon.green{ background: rgba(30,160,90,.12); color:#1ea05a; }
.bb-float-card b{ display:block; font-family: var(--font-display); font-size:.98rem; color: var(--bb-black); }
.bb-float-card span{ font-size:.74rem; color: var(--bb-gray-600); font-weight:600; }

@media (max-width: 991.98px){
  .bb-hero{ padding-top:40px; }
  .bb-hero-row{ grid-template-columns: 1fr; }
  .bb-hero-visual{ height:360px; margin-top:56px; }
  .bb-float-card{ padding:12px 16px; }
  .bb-float-card.card-1{ left:0; }
  .bb-float-card.card-2{ right:0; }
}
@media (max-width: 575.98px){
  .bb-hero-visual{ height:300px; }
  .bb-float-card span{ display:none; }
}

/* ---------- Split hero (logo-left search-hero replacement) ---------- */
.bb-splithero-row {
    display: grid;
    grid-template-columns: 2fr .8fr;
    gap: 28px;
    align-items: stretch;
}

.bb-splithero-panel{
  position:relative; border-radius: var(--radius-lg); overflow:hidden;
  background-size:cover; background-position:center;
  height:350px; display:flex; align-items:flex-end;
  box-shadow: 0 30px 70px rgba(10,10,11,.25);
}
.bb-splithero-overlay{
  position:absolute; inset:0;
  background: linear-gradient(195deg, rgba(10,10,11,.35) 0%, rgba(10,10,11,.78) 55%, rgba(10,10,11,.95) 100%);
}
.bb-splithero-content{ position:relative; z-index:2; padding:26px 34px 28px; }
.bb-splithero-content h1{
  color:#fff; font-family: var(--font-display); font-weight:700;
  font-size: clamp(1.5rem, 2.1vw, 2.05rem); letter-spacing:-.02em; line-height:1.16;
  margin: 10px 0 8px;
}
.bb-splithero-content h1 .accent{ color: var(--bb-gold); }
.bb-splithero-content p{ color: rgba(255,255,255,.72); font-size:.92rem; line-height:1.5; max-width:460px; }
.bb-splithero-content .bb-hero-cta{ margin-top:18px; }
.bb-splithero-trust{ margin-top:16px; padding-top:14px; border-top:1px solid rgba(255,255,255,.14); }
.bb-splithero-trust .bb-hero-trust-item{ color: rgba(255,255,255,.82); }
.bb-splithero-trust .bb-hero-trust-item i{ color: var(--bb-gold); }

.bb-splithero-cards{ display:flex; flex-direction:column; gap:24px; }
.bb-splithero-card{
  position:relative; flex:1; border-radius: var(--radius-lg); overflow:hidden;
  padding:20px 22px 18px; display:flex; flex-direction:column; justify-content:space-between;
  min-height:150px; box-shadow: var(--shadow-md);
}
.bb-splithero-card.gold{ background: linear-gradient(135deg, #FDEBC3 0%, var(--bb-gold) 100%); }
.bb-splithero-card.red{ background: linear-gradient(135deg, var(--bb-red) 0%, var(--bb-red-dark) 100%); }
.bb-splithero-card-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.bb-splithero-card h3{ font-family: var(--font-display); font-weight:600; font-size:1.28rem; line-height:1.32; }
.bb-splithero-card h3 b{ font-weight:800; }
.bb-splithero-card.gold h3{ color: var(--bb-red-deep); }
.bb-splithero-card.red h3{ color:#fff; }
.bb-splithero-icon{
  flex-shrink:0; width:56px; height:56px; border-radius:16px;
  display:flex; align-items:center; justify-content:center; font-size:1.5rem;
}
.bb-splithero-card.gold .bb-splithero-icon{ background: rgba(255,255,255,.55); color: var(--bb-red-deep); }
.bb-splithero-card.red .bb-splithero-icon{ background: rgba(255,255,255,.16); color:#fff; }
.bb-splithero-btn{
  margin-top:22px; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius: 100px; padding:13px 20px; font-weight:700; font-size:.9rem;
  border:1.5px solid; transition: all .3s ease;
}
.bb-splithero-card.gold .bb-splithero-btn{ border-color: rgba(92,7,8,.3); color: var(--bb-red-deep); }
.bb-splithero-card.gold .bb-splithero-btn:hover{ background: var(--bb-red-deep); color:#fff; border-color: var(--bb-red-deep); transform: translateY(-2px); }
.bb-splithero-card.red .bb-splithero-btn{ border-color: rgba(255,255,255,.5); color:#fff; }
.bb-splithero-card.red .bb-splithero-btn:hover{ background:#fff; color: var(--bb-red-dark); transform: translateY(-2px); }

@media (max-width: 991.98px){
  .bb-splithero-row{ grid-template-columns:1fr; }
  .bb-splithero-panel{ height:400px; }
  .bb-splithero-cards{ flex-direction:row; }
  .bb-splithero-card{ min-height:200px; }
}
@media (max-width: 575.98px){
  .bb-splithero-content{ padding:34px 24px 36px; }
  .bb-splithero-cards{ flex-direction:column; }
}

/* ==========================================================================
   RED STATS STRIP (before trust marquee)
   ========================================================================== */
.bb-stats-strip{
  background: var(--bb-red); color:#fff;
  padding: 30px 0; border-top: 2px solid var(--bb-gold); border-bottom: 2px solid var(--bb-gold);
}
.bb-stats-strip-row{ display:flex; align-items:stretch; justify-content:center; flex-wrap:wrap; }
.bb-stats-strip-item{
  display:flex; align-items:center; gap:14px; padding: 6px 34px;
  border-right: 1px solid rgba(255,255,255,.25);
}
.bb-stats-strip-item:last-child{ border-right:none; }
.bb-stats-strip-item .ico{
  width:44px; height:44px; border-radius:12px; flex-shrink:0;
  background: rgba(255,255,255,.14); color: var(--bb-gold);
  display:flex; align-items:center; justify-content:center; font-size:1.15rem;
}
.bb-stats-strip-item b{ display:block; font-family: var(--font-display); font-weight:800; font-size:1.5rem; line-height:1.1; color:#fff; }
.bb-stats-strip-item span{ font-size:.8rem; color: rgba(255,255,255,.75); font-weight:600; white-space:nowrap; }

@media (max-width: 991.98px){
  .bb-stats-strip-item{ padding: 10px 20px; border-right:none; flex: 0 0 50%; justify-content:center; }
}
@media (max-width: 575.98px){
  .bb-stats-strip-item{ flex: 0 0 100%; justify-content:flex-start; padding: 10px 12px; }
}

/* ==========================================================================
   TRUSTED-BY MARQUEE
   ========================================================================== */
.bb-trust-strip{ padding: 28px 0; }
.bb-trust-marquee-wrap{ display:flex; align-items:center; gap:34px; }
.bb-trust-label{
  flex-shrink:0; font-family: var(--font-display); font-weight:700; font-size:.92rem;
  letter-spacing:.1em; text-transform:uppercase; color: var(--bb-red);
  display:inline-flex; align-items:center; gap:8px;
}
.bb-trust-label::before{ content:''; width:7px; height:7px; border-radius:50%; background: var(--bb-red); flex-shrink:0; }
.bb-marquee{
  flex:1; min-width:0; overflow:hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.bb-marquee-track{ display:flex; align-items:center; width:max-content; animation: bbMarquee 26s linear infinite; }
.bb-marquee:hover .bb-marquee-track{ animation-play-state: paused; }
.bb-trust-item{
  display:inline-flex; align-items:center; gap:10px; white-space:nowrap;
  font-family: var(--font-display); font-weight:700; font-size:.98rem; letter-spacing:.04em; text-transform:uppercase;
  color: var(--bb-gray-600); padding: 0 32px; border-right: 1px solid var(--bb-gray-200);
}
.bb-trust-item i{ color: var(--bb-red); font-size:1.1rem; }
@keyframes bbMarquee{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }

@media (max-width: 767.98px){
  .bb-trust-strip{ padding: 22px 0; }
  .bb-trust-marquee-wrap{ flex-direction:column; align-items:flex-start; gap:14px; }
}

/* ==========================================================================
   ABOUT
   ========================================================================== */
.bb-about-row{ display:grid; grid-template-columns: .95fr 1.05fr; gap:70px; align-items:center; }
.bb-about-visual{ position:relative; }
.bb-about-frame-main{ position:relative; border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4/4.6; }
.bb-about-frame-main img{ width:100%; height:100%; object-fit:cover; }

/* ---------- About visual: abstract "container box" (SaaS-style, replaces photo) ---------- */
.bb-about-box{ overflow:visible; box-shadow:none; }
.bb-about-box-inner{
  position:absolute; inset:0; border-radius: var(--radius-lg); overflow:hidden;
  background:
    linear-gradient(160deg, rgba(10,10,11,.62) 0%, rgba(92,7,8,.8) 140%),
    url('https://images.unsplash.com/photo-1494412574643-ff11b0a5c1c3?w=1000&q=80&auto=format&fit=crop') center/cover no-repeat;
  box-shadow: var(--shadow-lg);
  display:flex; align-items:center; justify-content:center;
}
.bb-about-box-grid{
  position:absolute; inset:0;
  background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(ellipse at 50% 40%, black 25%, transparent 72%);
}
.bb-about-box-glow{
  position:absolute; width:240px; height:240px; border-radius:50%;
  background: radial-gradient(circle, rgba(250,208,143,.35), transparent 70%); filter: blur(20px);
}
.bb-about-box-core{
  position:relative; z-index:2; width:128px; height:128px; border-radius:30px;
  background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); backdrop-filter: blur(6px);
  display:flex; align-items:center; justify-content:center; font-size:3.2rem; color: var(--bb-gold);
  box-shadow: 0 25px 60px rgba(0,0,0,.4);
}
.bb-about-box-chip{
  position:absolute; z-index:3; display:flex; align-items:center; gap:10px;
  background: rgba(255,255,255,.97); border-radius: var(--radius-md); padding:12px 16px;
  box-shadow: var(--shadow-lg); animation: bbFloat 6s ease-in-out infinite;
}
.bb-about-box-chip i{ width:36px; height:36px; border-radius:10px; background: rgba(184,14,15,.1); color: var(--bb-red); display:flex; align-items:center; justify-content:center; font-size:.95rem; flex-shrink:0; }
.bb-about-box-chip b{ display:block; font-family: var(--font-display); font-weight:800; font-size:.98rem; color: var(--bb-black); }
.bb-about-box-chip span{ font-size:.7rem; color: var(--bb-gray-600); font-weight:600; }
.bb-about-box-chip.chip-1{ top:12%; left:-8%; }
.bb-about-box-chip.chip-2{ bottom:16%; right:-10%; animation-delay:-3s; }
@media (max-width: 575.98px){
  .bb-about-box-core{ width:96px; height:96px; border-radius:24px; font-size:2.4rem; }
  .bb-about-box-chip{ padding:10px 12px; }
  .bb-about-box-chip.chip-1{ left:0; }
  .bb-about-box-chip.chip-2{ right:0; }
}
.bb-about-badge-card{
  position:absolute; bottom:-30px; right:-24px; background:#fff; border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); padding:22px 26px; display:flex; align-items:center; gap:16px; max-width:280px;
}
.bb-about-badge-card .ring{
  width:60px; height:60px; border-radius:50%; flex-shrink:0;
  background: var(--bb-red);
  display:flex; align-items:center; justify-content:center;
}
.bb-about-badge-card .ring span{ width:48px; height:48px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:800; color:var(--bb-red); font-size:.92rem; }
.bb-about-badge-card b{ font-family:var(--font-display); font-size:.92rem; display:block; color:var(--bb-black); }
.bb-about-badge-card span.label{ font-size:.78rem; color: var(--bb-gray-600); }
.bb-about-dots{ position:absolute; top:-26px; left:-26px; width:120px; height:120px; background-image: radial-gradient(var(--bb-red) 2px, transparent 2px); background-size:14px 14px; opacity:.25; z-index:-1; }

.bb-about-tabs-nav{ display:flex; gap:8px; margin-bottom:26px; flex-wrap:wrap; }
.bb-about-tabs-nav button{
  font-family: var(--font-display); font-weight:700; font-size:.86rem;
  padding:11px 20px; border-radius: var(--radius-pill); border:1.5px solid var(--bb-gray-200);
  background:#fff; color: var(--bb-gray-600); transition: all .3s ease;
}
.bb-about-tabs-nav button.active{ background: var(--bb-red); border-color:transparent; color:#fff; box-shadow: var(--shadow-red); }
.bb-about-tab-panel{ display:none; }
.bb-about-tab-panel.active{ display:block; animation: bbFadeIn .5s ease; }
.bb-about-tab-panel p{ color: var(--bb-gray-600); line-height:1.8; margin-bottom:20px; font-size:1.02rem; }
.bb-about-list{ display:flex; flex-direction:column; gap:14px; }
.bb-about-list li{ display:flex; align-items:flex-start; gap:12px; font-weight:600; color: var(--bb-ink); font-size:.96rem; }
.bb-about-list i{ width:26px; height:26px; border-radius:50%; background: rgba(184,14,15,.1); color: var(--bb-red); display:flex; align-items:center; justify-content:center; font-size:.72rem; flex-shrink:0; margin-top:2px; }

@media (max-width: 991.98px){
  .bb-about-row{ grid-template-columns: 1fr; gap:80px; }
}
@media (max-width: 767.98px){
  .bb-about-badge-card{ right:0; }
}

/* ==========================================================================
   VERTICAL ALTERNATING TIMELINE — How Auction Works (left/right, modern icons)
   ========================================================================== */
.bb-vstep-line{ position:relative; max-width: 960px; margin: 0 auto; }
.bb-vstep-line::before{
  content:''; position:absolute; left:50%; top:6px; bottom:6px; width:3px;
  background: var(--bb-gray-200); transform: translateX(-50%); border-radius:3px;
}
.bb-vstep{
  display:grid; grid-template-columns: 1fr 88px 1fr; align-items:center;
  margin-bottom: 40px; position:relative;
}
.bb-vstep:last-child{ margin-bottom:0; }
.bb-vstep-card{
  background:#fff; border:1px solid var(--bb-gray-200); border-radius: var(--radius-lg);
  padding: 30px 34px; box-shadow: var(--shadow-md); transition: all .4s var(--ease);
}
.bb-vstep:hover .bb-vstep-card{ box-shadow: var(--shadow-lg); border-color: var(--bb-red); transform: translateY(-4px); }
.bb-vstep.side-left .bb-vstep-card{ grid-column:1; text-align:right; border-right: 3px solid var(--bb-gray-200); }
.bb-vstep.side-left .bb-vstep-spacer{ grid-column:3; }
.bb-vstep.side-right .bb-vstep-card{ grid-column:3; text-align:left; border-left: 3px solid var(--bb-gray-200); }
.bb-vstep.side-right .bb-vstep-spacer{ grid-column:1; }

.bb-vstep-node{
  grid-column:2; width:78px; height:78px; border-radius:50%; margin:0 auto;
  background: rgba(184,14,15,.08); border:2px solid #fff; color: var(--bb-red);
  display:flex; align-items:center; justify-content:center; font-size:1.65rem;
  position:relative; z-index:2; transition: all .4s var(--ease); box-shadow: var(--shadow-md);
}
.bb-vstep:hover .bb-vstep-node{ background: var(--bb-red); color:#fff; transform: scale(1.1); box-shadow: var(--shadow-red); }
.bb-vstep-node .num{
  position:absolute; top:-8px; right:-8px; width:30px; height:30px; border-radius:50%;
  background: var(--bb-black); color:#fff; border:3px solid #fff;
  font-family: var(--font-display); font-weight:800; font-size:.76rem;
  display:flex; align-items:center; justify-content:center;
}
.bb-vstep:hover .bb-vstep-node .num{ background: var(--bb-gold); color: var(--bb-red-deep); }
.bb-vstep-tag{ display:block; font-size:.8rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color: var(--bb-gold-dark); margin-bottom:10px; }
.bb-vstep-card b{ display:block; font-family: var(--font-display); font-weight:700; font-size:1.28rem; color: var(--bb-black); margin-bottom:10px; line-height:1.3; }
.bb-vstep-card p{ font-size:.98rem; color: var(--bb-gray-600); line-height:1.7; margin:0; }

@media (max-width: 767.98px){
  .bb-vstep-line::before{ left:27px; }
  .bb-vstep{ grid-template-columns: 56px 1fr; margin-bottom:28px; }
  .bb-vstep-node{ grid-column:1; width:52px; height:52px; font-size:1.2rem; }
  .bb-vstep-node .num{ width:24px; height:24px; font-size:.66rem; }
  .bb-vstep.side-left .bb-vstep-card,
  .bb-vstep.side-right .bb-vstep-card{ grid-column:2; text-align:left; border-left: 3px solid var(--bb-gray-200); border-right:none; padding:22px 24px; }
  .bb-vstep:hover .bb-vstep-card{ border-left-color: var(--bb-red); }
  .bb-vstep-card b{ font-size:1.1rem; }
  .bb-vstep-spacer{ display:none; }
}

/* ==========================================================================
   HORIZONTAL PROCESS CARDS — How Auction Works (4-step, premium)
   ========================================================================== */
.bb-process-col{ position:relative; }
.bb-process-col:not(:last-child)::after{
  content:'\2192'; position:absolute; top:34px; right:-14px; z-index:3;
  font-size:1.05rem; font-weight:700; color: var(--bb-gray-200);
}
.bb-process-card{
  background:#fff; border-radius: var(--radius-lg); border:1px solid rgba(184,14,15,.16);
  padding: 20px 20px 18px; height:100%; position:relative; overflow:hidden;
  transition: all .4s var(--ease);
}
.bb-process-card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:3px; background: var(--bb-red);
  transform: scaleX(0); transform-origin:left; transition: transform .4s var(--ease);
}
.bb-process-card:hover{ transform: translateY(-6px); border-color: var(--bb-red); box-shadow: var(--shadow-md); }
.bb-process-card:hover::before{ transform: scaleX(1); }
.bb-process-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.bb-process-icon{
  width:42px; height:42px; border-radius:12px;
  background: linear-gradient(135deg, rgba(184,14,15,.1), rgba(250,208,143,.16)); color: var(--bb-red);
  display:flex; align-items:center; justify-content:center; font-size:1.05rem; transition: all .4s var(--ease);
}
.bb-process-card:hover .bb-process-icon{ background: var(--bb-red); color:#fff; transform: rotate(-8deg) scale(1.05); }
.bb-process-num{ font-family: var(--font-display); font-weight:800; font-size:1.35rem; color: var(--bb-gray-100); }
.bb-process-card h5{ font-size:.94rem; margin-bottom:6px; line-height:1.3; }
.bb-process-card > p{ color: var(--bb-gray-600); font-size:.78rem; line-height:1.5; margin-bottom:14px; }
.bb-process-tags{ display:flex; flex-wrap:wrap; gap:6px; }
.bb-process-tags span{
  font-size:.66rem; font-weight:700; color: var(--bb-red); background: rgba(184,14,15,.07);
  border:1px solid rgba(184,14,15,.14); padding:5px 10px; border-radius: var(--radius-pill);
}
@media (max-width: 991.98px){
  .bb-process-col:not(:last-child)::after{ display:none; }
}

/* ==========================================================================
   LIVE NOW PULSE STRIP (premium teaser, below hero)
   ========================================================================== */
.bb-pulse-strip{ padding: 60px 0; background: linear-gradient(180deg, #fff 0%, var(--bb-gray-50) 100%); }
.bb-pulse-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:30px; flex-wrap:wrap; }
.bb-pulse-head-left h3{ font-family: var(--font-display); font-weight:800; font-size:1.5rem; letter-spacing:-.01em; margin:12px 0 6px; color: var(--bb-black); }
.bb-pulse-head-left p{ color: var(--bb-gray-600); font-size:.92rem; margin:0; }
.bb-pulse-viewall{
  display:inline-flex; align-items:center; gap:8px; font-family: var(--font-display);
  font-weight:700; font-size:.88rem; color: var(--bb-red); white-space:nowrap; padding-bottom:6px;
}
.bb-pulse-viewall i{ transition: transform .3s ease; }
.bb-pulse-viewall:hover i{ transform: translateX(4px); }

.bb-pulse-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    border-radius: 21px;
    overflow: hidden;
    background: #ffffff !important;
    border: 1px solid rgba(10, 10, 11, .05);
    padding: 14px;
    height: 100%;
    box-shadow: none;
    transition: all .35s var(--ease);
}
.bb-pulse-card:hover{ transform: translateY(-5px); box-shadow: var(--shadow-md); }
.bb-pulse-card.tint-red{ background: rgba(184,14,15,.055); }
.bb-pulse-card.tint-gold{ background: rgba(250,208,143,.22); }
.bb-pulse-thumb{ position:relative; width:64px; height:64px; border-radius:14px; overflow:hidden; flex-shrink:0; box-shadow: var(--shadow-sm); }
.bb-pulse-thumb img{ width:100%; height:100%; object-fit:cover; transition: transform .5s var(--ease); }
.bb-pulse-card:hover .bb-pulse-thumb img{ transform: scale(1.08); }
.bb-pulse-live{
  position:absolute; z-index:2; top:5px; right:5px; width:10px; height:10px; border-radius:50%;
  background: var(--bb-red); border:2px solid #fff; box-shadow: 0 0 0 2px rgba(184,14,15,.25);
}
.bb-pulse-live i{ position:absolute; inset:-3px; border-radius:50%; border:1.5px solid var(--bb-red); animation: bbPulse 1.4s infinite; }
.bb-pulse-body{ flex:1; min-width:0; }
.bb-pulse-cat{ display:inline-flex; align-items:center; gap:5px; font-size:.66rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color: var(--bb-gold-dark); }
.bb-pulse-cat i{ font-size:.68rem; }
.bb-pulse-body b{
  display:block; font-family: var(--font-display); font-weight:700; font-size:.9rem; color: var(--bb-black);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin: 3px 0 5px;
}
.bb-pulse-bid{ font-size:.78rem; color: var(--bb-gray-600); }
.bb-pulse-bid strong{ display:inline; color: var(--bb-red); font-size:.78rem; font-weight:800; }

@media (max-width: 575.98px){
  .bb-pulse-head{ align-items:flex-start; }
  .bb-pulse-card{ padding:12px; gap:10px; }
  .bb-pulse-thumb{ width:52px; height:52px; }
}

/* ==========================================================================
   AUCTION CARDS
   ========================================================================== */
.bb-auction-card{ background:#fff; border-radius: var(--radius-md); overflow:hidden; border:1px solid var(--bb-gray-200); transition: all .4s var(--ease); height:100%; display:flex; flex-direction:column; }
.bb-auction-card:hover{ transform: translateY(-10px); box-shadow: var(--shadow-lg); border-color:transparent; }
.bb-auction-media{ position:relative; aspect-ratio: 4/3; overflow:hidden; }
.bb-auction-media img{ width:100%; height:100%; object-fit:cover; transition: transform .6s var(--ease); }
.bb-auction-card:hover .bb-auction-media img{ transform: scale(1.08); }
.bb-auction-media .badges{ position:absolute; top:14px; left:14px; right:14px; display:flex; justify-content:space-between; align-items:flex-start; }
.bb-auction-media .cat-tag{ position:absolute; bottom:14px; left:14px; background: rgba(10,10,11,.55); backdrop-filter: blur(6px); color:#fff; font-size:.72rem; font-weight:700; padding:6px 13px; border-radius: var(--radius-pill); }
.bb-auction-wishlist{ width:36px; height:36px; border-radius:50%; background: rgba(255,255,255,.9); border:none; display:flex; align-items:center; justify-content:center; color: var(--bb-gray-600); transition: all .3s ease; }
.bb-auction-wishlist:hover{ background: var(--bb-red); color:#fff; }
.bb-auction-body{ padding:22px 22px 24px; display:flex; flex-direction:column; gap:14px; flex:1; }
.bb-auction-title{ font-family: var(--font-display); font-weight:700; font-size:1.08rem; color: var(--bb-black); }
.bb-auction-meta{ display:flex; flex-wrap:wrap; gap: 8px 18px; font-size:.78rem; color: var(--bb-gray-600); }
.bb-auction-meta span{ display:flex; align-items:center; gap:6px; font-weight:600; }
.bb-auction-meta i{ color: var(--bb-red); }
.bb-auction-price-row{ display:flex; justify-content:space-between; align-items:flex-end; padding-top:12px; border-top:1px dashed var(--bb-gray-200); }
.bb-auction-price-row .lbl{ font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color: var(--bb-gray-400); font-weight:700; display:block; margin-bottom:4px; }
.bb-auction-price-row .val{ font-family: var(--font-display); font-weight:800; font-size:1.12rem; color: var(--bb-black); }
.bb-auction-price-row .val.highlight{ color: var(--bb-red); }
.bb-auction-countdown{ display:flex; gap:8px; background: var(--bb-gray-50); border-radius: 12px; padding:10px 12px; justify-content: space-between; }
.bb-auction-countdown .unit{ text-align:center; flex:1; }
.bb-auction-countdown .unit b{ display:block; font-family: var(--font-display); font-weight:800; font-size:1rem; color: var(--bb-black); }
.bb-auction-countdown .unit small{ font-size:.62rem; text-transform:uppercase; color: var(--bb-gray-400); font-weight:700; }
.bb-auction-actions{ display:flex; gap:10px; margin-top:4px; }
.bb-auction-actions .bb-btn{ flex:1; padding: 12px 16px; font-size:.84rem; }

/* ---------- Small premium live-auction cards (homepage) ---------- */
.bb-live-card{
  background:#fff; border-radius: var(--radius-md); overflow:hidden;
  border:1px solid var(--bb-gray-200); transition: all .35s var(--ease);
  height:100%; display:flex; flex-direction:column;
}
.bb-live-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color:transparent; }
.bb-live-media{ position:relative; aspect-ratio:4/3; overflow:hidden; }
.bb-live-media img{ width:100%; height:100%; object-fit:cover; transition: transform .6s var(--ease); }
.bb-live-card:hover .bb-live-media img{ transform: scale(1.08); }
.bb-live-media::after{ content:''; position:absolute; inset:0; background: linear-gradient(0deg, rgba(10,10,11,.7) 0%, rgba(10,10,11,0) 48%); pointer-events:none; }
.bb-live-top{ position:absolute; top:10px; left:10px; right:10px; z-index:2; display:flex; justify-content:space-between; align-items:flex-start; }
.bb-live-wishlist{
  width:28px; height:28px; border-radius:50%; background: rgba(255,255,255,.92); border:none;
  display:flex; align-items:center; justify-content:center; color: var(--bb-gray-600); font-size:.68rem; transition: all .3s ease;
}
.bb-live-wishlist:hover{ background: var(--bb-red); color:#fff; }
.bb-live-cat{ position:absolute; bottom:10px; left:12px; z-index:2; color:#fff; font-size:.68rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase; }
.bb-live-body{ padding:14px 16px 16px; display:flex; flex-direction:column; gap:9px; flex:1; }
.bb-live-title{
  font-family: var(--font-display); font-weight:700; font-size:.86rem; color: var(--bb-black); line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;
}
.bb-live-meta{ font-size:.72rem; color: var(--bb-gray-600); font-weight:600; display:flex; align-items:center; gap:6px; }
.bb-live-meta i{ color: var(--bb-red); font-size:.68rem; }
.bb-live-countdown{
  display:flex; align-items:center; gap:6px; background: var(--bb-gray-50); border-radius: var(--radius-pill);
  padding:6px 12px; font-size:.7rem; font-weight:700; color: var(--bb-ink); width:fit-content;
}
.bb-live-countdown i{ color: var(--bb-red); font-size:.66rem; }
.bb-live-countdown b{ font-family: var(--font-display); }
.bb-live-price-row{ display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:10px; border-top:1px dashed var(--bb-gray-200); }
.bb-live-price-row .lbl{ display:block; font-size:.58rem; text-transform:uppercase; letter-spacing:.05em; color: var(--bb-gray-400); font-weight:700; }
.bb-live-price-row .val{ font-family: var(--font-display); font-weight:800; font-size:.84rem; color: var(--bb-black); }
.bb-live-price-row .val.highlight{ color: var(--bb-red); }
.bb-live-bid-btn{ width:100%; margin-top:12px; padding:10px; font-size:.78rem; }

/* ==========================================================================
   FEATURED PRODUCTS (small premium cards)
   ========================================================================== */
.bb-products-head{ display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom: 36px; flex-wrap:wrap; }
.bb-heading-sm{ font-size: 2.1rem; line-height:1.25; margin-top:12px; }

.bb-brand-tabs{
  display:flex; align-items:center; gap:10px; flex-wrap:nowrap; overflow-x:auto;
  margin-bottom:32px; padding-bottom:6px; -webkit-overflow-scrolling:touch; scrollbar-width:thin;
}
.bb-brand-tabs::-webkit-scrollbar{ height:5px; }
.bb-brand-tabs::-webkit-scrollbar-thumb{ background: var(--bb-gray-200); border-radius: var(--radius-pill); }
.bb-brand-tabs button{
  flex:0 0 auto; font-family: var(--font-display); font-weight:700; font-size:.84rem;
  padding:10px 18px; border-radius: var(--radius-pill); border:1.5px solid var(--bb-gray-200);
  background:#fff; color: var(--bb-gray-600); white-space:nowrap; transition: all .3s ease;
}
.bb-brand-tabs button:hover{ border-color: var(--bb-red); color: var(--bb-red); }
.bb-brand-tabs button.active{ background: var(--bb-red); border-color:transparent; color:#fff; box-shadow: var(--shadow-red); }
.bb-product-col{ transition: opacity .25s ease; }
.bb-product-col.bb-hide{ display:none !important; }
.bb-brand-item.bb-hide{ display:none !important; }
.bb-brand-tabs.bb-brand-tabs-page{ margin-bottom:26px; }
.bb-brand-option.bb-hide{ display:none !important; }
.bb-product-card{
  background:#fff; border-radius: var(--radius-md); overflow:hidden;
  border:1px solid var(--bb-gray-200); transition: all .35s var(--ease);
  height:100%; display:flex; flex-direction:column; position:relative;
}
.bb-product-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color:transparent; }
.bb-product-media{ position:relative; aspect-ratio:1/1; overflow:hidden; background: var(--bb-gray-100); }
.bb-product-media img{ width:100%; height:100%; object-fit:cover; transition: transform .6s var(--ease); }
.bb-product-card:hover .bb-product-media img{ transform: scale(1.08); }
.bb-product-tag{
  position:absolute; top:10px; left:10px; z-index:2;
  font-family: var(--font-display); font-weight:700; font-size:.6rem; letter-spacing:.05em; text-transform:uppercase;
  padding:5px 10px; border-radius: var(--radius-pill); background: rgba(255,255,255,.94); color: var(--bb-red);
}
.bb-product-wishlist{
  position:absolute; top:8px; right:8px; z-index:2; width:28px; height:28px; border-radius:50%;
  background: rgba(255,255,255,.94); border:none; display:flex; align-items:center; justify-content:center;
  color: var(--bb-gray-600); font-size:.72rem; transition: all .3s ease;
}
.bb-product-wishlist:hover{ background: var(--bb-red); color:#fff; }
.bb-product-body{ padding:12px 14px 14px; flex:1; display:flex; flex-direction:column; }
.bb-product-body .cat{ font-size:.62rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color: var(--bb-gold-dark); }
.bb-product-body h6{ font-family: var(--font-display); font-weight:700; font-size:.86rem; color: var(--bb-black); margin:5px 0 10px; line-height:1.35; }
.bb-product-price-row{ display:flex; align-items:center; justify-content:space-between; margin-top:auto; }
.bb-product-price-row .price{ font-family: var(--font-display); font-weight:800; font-size:.9rem; color: var(--bb-red); }
.bb-product-price-row .price small{ display:block; font-family: var(--font-body); font-weight:600; font-size:.62rem; letter-spacing:.03em; text-transform:uppercase; color: var(--bb-gray-400); }
.bb-product-price-row .arrow{
  width:28px; height:28px; border-radius:50%; background: var(--bb-gray-100); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; color: var(--bb-black); font-size:.68rem; transition: all .3s ease;
}
.bb-product-card:hover .bb-product-price-row .arrow{ background: var(--bb-red); color:#fff; }
@media (max-width: 575.98px){
  .bb-product-body h6{ font-size:.8rem; }
  .bb-product-price-row .price{ font-size:.82rem; }
}

/* ==========================================================================
   CATEGORIES
   ========================================================================== */
.bb-cat-card{
  position:relative; border-radius: var(--radius-md); overflow:hidden; aspect-ratio: 1/1.05;
  display:flex; align-items:flex-end; padding:22px; transition: all .4s var(--ease);
}
.bb-cat-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition: transform .6s var(--ease); z-index:0; }
.bb-cat-card::after{ content:''; position:absolute; inset:0; background: linear-gradient(0deg, rgba(10,10,11,.82) 10%, rgba(10,10,11,.1) 60%); z-index:1; }
.bb-cat-card:hover img{ transform: scale(1.12); }
.bb-cat-card:hover{ box-shadow: var(--shadow-lg); transform: translateY(-8px); }
.bb-cat-content{ position:relative; z-index:2; color:#fff; }
.bb-cat-content .icon{ width:42px; height:42px; border-radius:12px; background: rgba(255,255,255,.14); backdrop-filter: blur(6px); display:flex; align-items:center; justify-content:center; margin-bottom:12px; font-size:1.05rem; }
.bb-cat-content b{ display:block; font-family: var(--font-display); font-weight:700; font-size:1.06rem; }
.bb-cat-content span{ font-size:.76rem; color: rgba(255,255,255,.7); font-weight:600; }

/* ---------- Icon-based category tiles (homepage, one row of 6) ---------- */
.bb-cat-tile{
  position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px;
  padding: 30px 12px 26px; border-radius: var(--radius-lg); height:100%;
  background:#fff; border:1px solid var(--bb-gray-100); box-shadow: var(--shadow-sm);
  transition: all .35s var(--ease);
}
.bb-cat-tile::before{
  content:''; position:absolute; top:-46%; left:50%; transform:translateX(-50%);
  width:150px; height:150px; border-radius:50%;
  background: radial-gradient(circle, rgba(184,14,15,.07), transparent 70%);
  transition: all .4s ease;
}
.bb-cat-tile.tone-gold::before{ background: radial-gradient(circle, rgba(201,134,26,.1), transparent 70%); }
.bb-cat-tile:hover{ border-color:transparent; box-shadow: var(--shadow-lg); transform: translateY(-8px); }
.bb-cat-tile:hover::before{ top:-34%; }
.bb-cat-tile-icon{
  position:relative; z-index:1; display:flex; align-items:center; justify-content:center;
  width:86px; height:86px; border-radius:50%; background: var(--bb-gray-50);
  transition: all .35s var(--ease);
}
.bb-cat-tile.tone-gold .bb-cat-tile-icon{ background: rgba(250,208,143,.2); }
.bb-cat-tile-icon svg{ width:44px; height:44px; }
.bb-cat-tile:hover .bb-cat-tile-icon{ transform: scale(1.1); background: var(--bb-cream); }
.bb-cat-tile b{ position:relative; z-index:1; font-family: var(--font-display); font-weight:700; font-size:1rem; color: var(--bb-black); }
.bb-cat-tile-count{
  position:relative; z-index:1; display:inline-flex; align-items:center; gap:6px;
  font-size:.7rem; font-weight:700; color: var(--bb-red); background: rgba(184,14,15,.08);
  padding:5px 12px; border-radius: var(--radius-pill);
}
.bb-cat-tile-count::before{ content:''; width:5px; height:5px; border-radius:50%; background: var(--bb-red); animation: bbPulse 1.4s infinite; }
@media (max-width: 575.98px){
  .bb-cat-tile{ padding:22px 10px 20px; }
  .bb-cat-tile-icon{ width:60px; height:60px; }
  .bb-cat-tile-icon svg{ width:32px; height:32px; }
}

/* ==========================================================================
   FEATURES — Why Choose Us
   ========================================================================== */
.bb-feature-card{ background:#fff; border:1px solid var(--bb-gray-200); border-radius: var(--radius-md); padding: 32px 28px; height:100%; transition: all .4s var(--ease); position:relative; overflow:hidden; }
.bb-feature-card::before{ content:''; position:absolute; top:0; left:0; right:0; height:3px; background: var(--bb-red); transform: scaleX(0); transform-origin:left; transition: transform .4s var(--ease); }
.bb-feature-card:hover{ transform: translateY(-8px); box-shadow: var(--shadow-md); border-color:transparent; }
.bb-feature-card:hover::before{ transform: scaleX(1); }
.bb-feature-icon{ width:60px; height:60px; border-radius: 16px; background: rgba(184,14,15,.08); color: var(--bb-red); display:flex; align-items:center; justify-content:center; font-size:1.5rem; margin-bottom:22px; transition: all .4s var(--ease); }
.bb-feature-card:hover .bb-feature-icon{ background: var(--bb-red); color:#fff; transform: rotate(-8deg) scale(1.05); }
.bb-feature-card h5{ font-size:1.1rem; margin-bottom:10px; }
.bb-feature-card p{ color: var(--bb-gray-600); font-size:.9rem; line-height:1.7; }
.bb-feature-num{ position:absolute; top:20px; right:26px; font-family: var(--font-display); font-weight:800; font-size:2.2rem; color: var(--bb-gray-100); }

/* ==========================================================================
   STATS BAND
   ========================================================================== */
.bb-stats-band{ background: var(--bb-black); position:relative; overflow:hidden; padding: 70px 0; }
.bb-stats-band .bb-hero-grid{ opacity:.5; }
.bb-stats-band .bb-hero-blob{ opacity:.4; }
.bb-stat-item{
  text-align:center; height:100%; position:relative; overflow:hidden;
  background: rgba(255,255,255,.055); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-lg);
  padding: 34px 20px; transition: all .4s var(--ease);
}
.bb-stat-item::before{ content:''; position:absolute; top:0; left:22%; right:22%; height:3px; border-radius:3px; }
.bb-stat-item.tint-red::before{ background: var(--bb-red); }
.bb-stat-item.tint-gold::before{ background: var(--bb-gold); }
.bb-stat-item:hover{ transform: translateY(-8px); background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.25); box-shadow: 0 24px 50px rgba(0,0,0,.4); }
.bb-stat-item .stat-icon{
  width:56px; height:56px; border-radius:50%; margin:0 auto 18px;
  display:flex; align-items:center; justify-content:center; font-size:1.3rem;
}
.bb-stat-item.tint-red .stat-icon{ background: rgba(184,14,15,.3); color:#fff; }
.bb-stat-item.tint-gold .stat-icon{ background: rgba(250,208,143,.28); color: var(--bb-gold); }
.bb-stat-item b{ display:block; font-family: var(--font-display); font-weight:800; margin-bottom:4px; }
.bb-stat-item b span{ font-size:28px; color:#fff; }
.bb-stat-item > span{ font-size:.8rem; color: rgba(255,255,255,.6); font-weight:600; text-transform:uppercase; letter-spacing:.04em; }

/* ==========================================================================
   FEATURED PRODUCTS SLIDER
   ========================================================================== */
.bb-slider-wrap{ position:relative; }
.bb-slider-track{ display:flex; gap:24px; overflow-x:auto; scroll-snap-type: x mandatory; scrollbar-width:none; padding-bottom:10px; }
.bb-slider-track::-webkit-scrollbar{ display:none; }
.bb-slider-track > *{ scroll-snap-align:start; flex: 0 0 auto; width: 300px; }
.bb-slider-nav{ display:flex; gap:12px; justify-content:flex-end; position:relative; z-index:2; }
.bb-product-card{ background:#fff; border-radius: var(--radius-md); border:1px solid var(--bb-gray-200); overflow:hidden; transition: all .4s var(--ease); }
.bb-product-card:hover{ box-shadow: var(--shadow-md); transform: translateY(-6px); }
.bb-product-media{ position:relative; aspect-ratio:1/1; overflow:hidden; }
.bb-product-media img{ width:100%; height:100%; object-fit:cover; transition: transform .6s ease; }
.bb-product-card:hover .bb-product-media img{ transform: scale(1.1); }
.bb-product-body{ padding:18px 20px 20px; }
.bb-product-body .cat{ font-size:.72rem; font-weight:700; color: var(--bb-red); text-transform:uppercase; letter-spacing:.04em; }
.bb-product-body b{ display:block; font-family: var(--font-display); font-size:1rem; margin: 6px 0 10px; }
.bb-product-body .price{ display:flex; justify-content:space-between; align-items:center; }
.bb-product-body .price b{ margin:0; color: var(--bb-red); }

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
/* ---------- Testimonial Spotlight (interactive switcher) ---------- */
.bb-testi-spotlight{ display:grid; grid-template-columns: 1.6fr 1fr; gap:32px; align-items:stretch; }
.bb-testi-main{
  background:#fff; border:1px solid var(--bb-gray-200); border-radius: var(--radius-lg);
  padding: 50px; position:relative; overflow:hidden; box-shadow: var(--shadow-md);
  display:flex; flex-direction:column; justify-content:center;
  transition: opacity .25s ease, transform .25s ease;
}
.bb-testi-main.is-swapping{ opacity:0; transform: translateY(8px); }
.bb-testi-quote-mark{ position:absolute; top:10px; right:34px; font-size:6rem; color: var(--bb-gray-100); z-index:0; line-height:1; }
.bb-testi-stars{ position:relative; z-index:1; color: var(--bb-gold-dark); font-size:1rem; letter-spacing:3px; margin-bottom:22px; }
.bb-testi-text{ position:relative; z-index:1; font-family: var(--font-display); font-weight:600; font-size:1.3rem; line-height:1.6; color: var(--bb-ink); margin-bottom:32px; }
.bb-testi-person{ position:relative; z-index:1; display:flex; align-items:center; gap:16px; }
.bb-testi-person img{ width:60px; height:60px; border-radius:50%; object-fit:cover; border:3px solid var(--bb-gray-100); }
.bb-testi-person b{ display:block; font-family: var(--font-display); font-size:1.05rem; color: var(--bb-black); }
.bb-testi-person span{ font-size:.85rem; color: var(--bb-gray-600); }

.bb-testi-switcher{ display:flex; flex-direction:column; gap:14px; }
.bb-testi-switch-item{
  display:flex; align-items:center; gap:14px; width:100%; text-align:left;
  background:#fff; border:1.5px solid var(--bb-gray-200); border-radius: var(--radius-md);
  padding:16px 18px; transition: all .3s var(--ease); cursor:pointer;
}
.bb-testi-switch-item img{ width:44px; height:44px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.bb-testi-switch-item b{ display:block; font-family: var(--font-display); font-weight:700; font-size:.9rem; color: var(--bb-black); }
.bb-testi-switch-item span{ font-size:.76rem; color: var(--bb-gray-600); }
.bb-testi-switch-item:hover{ border-color: var(--bb-red); transform: translateX(4px); }
.bb-testi-switch-item.active{ border-color: var(--bb-red); background: rgba(184,14,15,.05); box-shadow: var(--shadow-sm); }
.bb-testi-switch-item.active b{ color: var(--bb-red); }

@media (max-width: 991.98px){
  .bb-testi-spotlight{ grid-template-columns: 1fr; }
  .bb-testi-main{ padding: 36px 28px; }
  .bb-testi-switcher{ flex-direction:row; overflow-x:auto; padding-bottom:6px; }
  .bb-testi-switch-item{ flex:0 0 240px; }
}

/* ==========================================================================
   FAQ ACCORDION
   ========================================================================== */
.bb-faq .accordion-item{ border:1px solid var(--bb-gray-200); border-radius: var(--radius-md) !important; margin-bottom:16px; overflow:hidden; }
.bb-faq .accordion-button{ font-family: var(--font-display); font-weight:700; font-size:1rem; padding:22px 26px; color: var(--bb-black); background:#fff; }
.bb-faq .accordion-button:not(.collapsed){ color: var(--bb-red); background: rgba(184,14,15,.04); box-shadow:none; }
.bb-faq .accordion-button:focus{ box-shadow:none; }
.bb-faq .accordion-button::after{ background-image:none; content:'\f067'; font-family:'Font Awesome 6 Free'; font-weight:900; font-size:.85rem; color: var(--bb-gray-400); transition: all .3s ease; }
.bb-faq .accordion-button:not(.collapsed)::after{ content:'\f068'; color: var(--bb-red); }
.bb-faq .accordion-body{ padding: 4px 26px 24px; color: var(--bb-gray-600); font-size:.92rem; line-height:1.8; }

/* ==========================================================================
   CTA BAND
   ========================================================================== */
.bb-cta-band{ background: var(--bb-red); border-radius: var(--radius-lg); padding: 64px; position:relative; overflow:hidden; }
.bb-cta-band::before{ content:''; position:absolute; width:340px; height:340px; border-radius:50%; background: rgba(255,255,255,.08); top:-140px; right:-80px; }
.bb-cta-band::after{ content:''; position:absolute; width:220px; height:220px; border-radius:50%; background: rgba(255,255,255,.08); bottom:-100px; left:10%; }
.bb-cta-content{ position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap; }
.bb-cta-content h2{ color:#fff; font-size: clamp(1.7rem,3vw,2.4rem); max-width:560px; }
.bb-cta-content p{ color: rgba(255,255,255,.85); margin-top:12px; max-width:520px; }
.bb-cta-actions{ display:flex; gap:14px; flex-wrap:wrap; }

@media (max-width: 767.98px){
  .bb-cta-band{ padding: 40px 26px; }
}

/* ==========================================================================
   PAGE HERO (inner pages banner)
   ========================================================================== */
.bb-page-hero{ background: var(--bb-black); color:#fff; padding: 60px 0 70px; position:relative; overflow:hidden; }
.bb-page-hero .bb-hero-blob{ opacity:.45; }
.bb-page-hero h1{ color:#fff; font-size: clamp(2rem,4vw,2.9rem); margin: 16px 0 14px; }
.bb-breadcrumb{ display:flex; align-items:center; gap:10px; font-size:.86rem; color: rgba(255,255,255,.6); font-weight:600; }
.bb-breadcrumb a{ color: rgba(255,255,255,.85); }
.bb-breadcrumb a:hover{ color: var(--bb-gold); }

/* ==========================================================================
   AUCTION DETAILS
   ========================================================================== */
.bb-gallery-main{ border-radius: var(--radius-md); overflow:hidden; aspect-ratio: 4/3.2; margin-bottom:16px; box-shadow: var(--shadow-md); }
.bb-gallery-main img{ width:100%; height:100%; object-fit:cover; }
.bb-gallery-thumbs{ display:flex; gap:12px; }
.bb-gallery-thumbs img{ width:82px; height:82px; object-fit:cover; border-radius:12px; cursor:pointer; border:2px solid transparent; transition: all .25s ease; opacity:.7; }
.bb-gallery-thumbs img.active,.bb-gallery-thumbs img:hover{ border-color: var(--bb-red); opacity:1; }

.bb-detail-panel{ background:#fff; border:1px solid var(--bb-gray-200); border-radius: var(--radius-md); padding:30px; position: sticky; top: 110px; }
.bb-detail-title{ font-size:1.5rem; margin-bottom:8px; }
.bb-detail-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin: 22px 0; }
.bb-detail-stat{ background: var(--bb-gray-50); border-radius:12px; padding:14px 16px; }
.bb-detail-stat span{ display:block; font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color: var(--bb-gray-400); font-weight:700; margin-bottom:4px; }
.bb-detail-stat b{ font-family: var(--font-display); font-size:1.08rem; color: var(--bb-black); }
.bb-detail-stat.highlight{ background: rgba(184,14,15,.06); }
.bb-detail-stat.highlight b{ color: var(--bb-red); }
.bb-detail-countdown-box{ background: var(--bb-black); border-radius: var(--radius-md); padding:20px; color:#fff; margin-bottom:22px; }
.bb-detail-countdown-box .lbl{ font-size:.78rem; color: rgba(255,255,255,.65); font-weight:600; margin-bottom:12px; display:flex; align-items:center; gap:8px; }
.bb-detail-countdown-box .bb-auction-countdown{ background: rgba(255,255,255,.08); }
.bb-detail-countdown-box .bb-auction-countdown b{ color:#fff; }
.bb-detail-countdown-box .bb-auction-countdown small{ color: rgba(255,255,255,.5); }

.bb-seller-card{ display:flex; align-items:center; gap:14px; padding:16px; background: var(--bb-gray-50); border-radius: var(--radius-md); margin-top:22px; }
.bb-seller-card img{ width:52px; height:52px; border-radius:50%; object-fit:cover; }
.bb-seller-card b{ display:block; font-family: var(--font-display); font-size:.94rem; }
.bb-seller-card span{ font-size:.78rem; color: var(--bb-gray-600); }
.bb-seller-card .verified{ color: #1ea05a; font-size:.72rem; font-weight:700; display:flex; align-items:center; gap:4px; margin-top:2px; }

.bb-detail-tabs .nav-link{ font-family: var(--font-display); font-weight:700; color: var(--bb-gray-600); border:none; border-bottom:3px solid transparent; padding: 14px 6px; margin-right:30px; border-radius:0; }
.bb-detail-tabs .nav-link.active{ color: var(--bb-red); border-color: var(--bb-red); background:transparent; }
.bb-detail-specs{ display:grid; grid-template-columns: repeat(2,1fr); gap: 14px 30px; }
.bb-detail-specs li{ display:flex; justify-content:space-between; padding:12px 0; border-bottom:1px dashed var(--bb-gray-200); font-size:.92rem; }
.bb-detail-specs li span{ color: var(--bb-gray-600); }
.bb-detail-specs li b{ font-family: var(--font-display); }

.bb-bid-history-table{ width:100%; border-collapse: separate; border-spacing:0 10px; }
.bb-bid-history-table thead th{ font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color: var(--bb-gray-400); font-weight:700; padding: 0 16px 8px; text-align:left; }
.bb-bid-history-table tbody tr{ background: var(--bb-gray-50); }
.bb-bid-history-table tbody tr.top-bid{ background: rgba(184,14,15,.06); }
.bb-bid-history-table td{ padding: 16px; font-size:.9rem; font-weight:600; }
.bb-bid-history-table td:first-child{ border-radius: 12px 0 0 12px; }
.bb-bid-history-table td:last-child{ border-radius: 0 12px 12px 0; }
.bb-rank-badge{ width:26px; height:26px; border-radius:50%; background: var(--bb-gray-200); color: var(--bb-gray-600); display:inline-flex; align-items:center; justify-content:center; font-size:.72rem; font-weight:800; }
.top-bid .bb-rank-badge{ background: var(--bb-red); color:#fff; }

/* ---------- Bid Modal ---------- */
.bb-modal .modal-content{ border:none; border-radius: var(--radius-lg); overflow:hidden; }
.bb-modal .modal-header{ background: var(--bb-black); color:#fff; border:none; padding: 26px 30px; }
.bb-modal .modal-header .btn-close{ filter: invert(1); opacity:.8; }
.bb-modal .modal-title{ font-family: var(--font-display); font-weight:700; color:#fff; }
.bb-modal .modal-title small{ display:block; font-family: var(--font-body); font-weight:400; font-size:.78rem; color: rgba(255,255,255,.6); margin-top:4px; }
.bb-modal .modal-body{ padding: 30px; }
.bb-form-label{ font-family: var(--font-display); font-weight:700; font-size:.84rem; margin-bottom:8px; display:block; }
.bb-form-control, .bb-modal .form-control, .bb-modal .form-select{
  border: 1.5px solid var(--bb-gray-200); border-radius: 12px; padding: 12px 16px; font-size:.92rem; transition: all .25s ease;
}
.bb-form-control:focus, .bb-modal .form-control:focus, .bb-modal .form-select:focus{ border-color: var(--bb-red); box-shadow: 0 0 0 4px rgba(184,14,15,.1); }
.bb-input-group{ position:relative; }
.bb-input-group i{ position:absolute; left:16px; top:50%; transform: translateY(-50%); color: var(--bb-gray-400); }
.bb-input-group input, .bb-input-group select{ padding-left: 42px !important; }
.bb-modal .form-check-input:checked{ background-color: var(--bb-red); border-color: var(--bb-red); }

.bb-success-popup .modal-body{ text-align:center; padding: 50px 40px; }
.bb-success-icon{ width:90px; height:90px; border-radius:50%; background: rgba(30,160,90,.1); color:#1ea05a; display:flex; align-items:center; justify-content:center; font-size:2.4rem; margin: 0 auto 26px; animation: bbSuccessPop .6s var(--ease); }
@keyframes bbSuccessPop{ 0%{ transform: scale(0); opacity:0; } 60%{ transform: scale(1.1); opacity:1; } 100%{ transform: scale(1); } }

/* ---------- Offer Popup (on-load) ---------- */
.bb-offer-modal .modal-content{ background:#fff; border-radius: var(--radius-lg); overflow:hidden; border:1px solid var(--bb-gray-200); box-shadow: var(--shadow-lg); }
.bb-offer-modal .modal-body{ padding: 46px 40px 38px; text-align:center; position:relative; }
.bb-offer-close{ position:absolute; top:16px; right:16px; width:34px; height:34px; border-radius:50%; background: var(--bb-gray-100); border:none; color: var(--bb-gray-600); display:flex; align-items:center; justify-content:center; transition: all .3s ease; z-index:2; }
.bb-offer-close:hover{ background: var(--bb-red); color:#fff; }
.bb-offer-ribbon{
  display:inline-flex; align-items:center; gap:8px; background: rgba(184,14,15,.08);
  border:1px solid rgba(184,14,15,.2); color: var(--bb-red); font-family: var(--font-display);
  font-weight:800; font-size:.76rem; letter-spacing:.1em; text-transform:uppercase;
  padding:8px 18px; border-radius: var(--radius-pill); margin-bottom:22px;
}
.bb-offer-modal h3{ color: var(--bb-black); font-size:1.7rem; line-height:1.3; margin-bottom:12px; }
.bb-offer-modal h3 span{ color: var(--bb-red); }
.bb-offer-modal > .modal-body > p{ color: var(--bb-gray-600); font-size:.95rem; line-height:1.65; max-width:380px; margin:0 auto 28px; }

.bb-offer-countdown{ display:flex; justify-content:center; gap:12px; margin-bottom:26px; }
.bb-offer-countdown .unit{ background: var(--bb-gray-50); border:1px solid var(--bb-gray-200); border-radius:12px; padding:12px 16px; min-width:66px; }
.bb-offer-countdown .unit b{ display:block; font-family: var(--font-display); font-weight:800; font-size:1.4rem; color: var(--bb-black); }
.bb-offer-countdown .unit small{ font-size:.62rem; text-transform:uppercase; letter-spacing:.05em; color: var(--bb-gray-400); font-weight:700; }

.bb-offer-progress-label{ display:flex; justify-content:space-between; font-size:.78rem; font-weight:600; color: var(--bb-gray-600); margin-bottom:8px; }
.bb-offer-progress-label b{ color: var(--bb-red); }
.bb-offer-progress{ height:8px; border-radius:8px; background: var(--bb-gray-100); overflow:hidden; margin-bottom:28px; }
.bb-offer-progress-bar{ height:100%; background: var(--bb-red); border-radius:8px; }

.bb-offer-modal .bb-btn-primary{ width:100%; }
.bb-offer-dismiss{ display:block; width:100%; margin-top:16px; padding:0; background:transparent; border:none; font-size:.82rem; color: var(--bb-gray-400); text-decoration: underline; }
.bb-offer-dismiss:hover{ color: var(--bb-gray-600); }
.bb-offer-disclaimer{ font-size:.72rem; color: var(--bb-gray-400); margin-top:18px; }

@media (max-width: 991.98px){
  .bb-detail-panel{ position:static; margin-top:30px; }
  .bb-detail-specs{ grid-template-columns: 1fr; }
}

/* ==========================================================================
   AUCTIONS LISTING (filters/toolbar)
   ========================================================================== */
.bb-filter-panel{ background:#fff; border:1px solid var(--bb-gray-200); border-radius: var(--radius-md); padding:26px; position:sticky; top:110px; }
.bb-filter-panel h6{ font-family: var(--font-display); font-weight:700; margin-bottom:16px; display:flex; align-items:center; gap:8px; }
.bb-filter-group{ margin-bottom:26px; padding-bottom:26px; border-bottom:1px solid var(--bb-gray-100); }
.bb-filter-group:last-child{ border-bottom:none; margin-bottom:0; padding-bottom:0; }
.bb-filter-group .form-check{ margin-bottom:10px; }
.bb-filter-group .form-check-input:checked{ background-color: var(--bb-red); border-color: var(--bb-red); }
.bb-filter-group .form-check-label{ font-size:.88rem; font-weight:500; color: var(--bb-gray-600); }
.bb-price-range{ display:flex; align-items:center; gap:10px; }
.bb-price-range input{ border:1.5px solid var(--bb-gray-200); border-radius:10px; padding:8px 10px; font-size:.84rem; width:100%; }

.bb-toolbar{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; background: var(--bb-gray-50); border-radius: var(--radius-md); padding:16px 22px; margin-bottom:30px; }
.bb-toolbar-tabs{ display:flex; gap:8px; flex-wrap:wrap; }
.bb-toolbar-tabs button{ font-family: var(--font-display); font-weight:700; font-size:.82rem; padding:9px 18px; border-radius: var(--radius-pill); border:1.5px solid var(--bb-gray-200); background:#fff; color: var(--bb-gray-600); transition: all .3s ease; }
.bb-toolbar-tabs button.active{ background: var(--bb-black); border-color: var(--bb-black); color:#fff; }
.bb-toolbar-sort select{ border:1.5px solid var(--bb-gray-200); border-radius: var(--radius-pill); padding:9px 16px; font-size:.84rem; font-weight:600; font-family: var(--font-display); }

/* ==========================================================================
   CATEGORY PAGE HEADER GRID / PRICING / BLOG / SIMPLE CONTENT PAGES
   ========================================================================== */
.bb-icon-block{ display:flex; gap:18px; align-items:flex-start; padding:24px; border:1px solid var(--bb-gray-200); border-radius: var(--radius-md); height:100%; transition: all .35s var(--ease); }
.bb-icon-block:hover{ box-shadow: var(--shadow-md); transform: translateY(-6px); border-color:transparent; }
.bb-icon-block .ico{ width:52px; height:52px; border-radius:14px; background: rgba(184,14,15,.08); color: var(--bb-red); display:flex; align-items:center; justify-content:center; font-size:1.3rem; flex-shrink:0; }
.bb-icon-block h6{ font-family: var(--font-display); font-weight:700; margin-bottom:8px; }
.bb-icon-block p{ font-size:.88rem; color: var(--bb-gray-600); line-height:1.7; margin:0; }

/* ==========================================================================
   CONTACT PAGE — premium split panel
   ========================================================================== */
.bb-contact-panel{ display:grid; grid-template-columns: .85fr 1.15fr; border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-lg); }
.bb-contact-info{
  position:relative; overflow:hidden; isolation:isolate;
  background: var(--bb-black); color:#fff; padding: 54px 46px;
  display:flex; flex-direction:column;
}
.bb-contact-info .bb-hero-blob{ opacity:.5; }
.bb-contact-info h3{ color:#fff; font-size:1.55rem; line-height:1.32; margin: 18px 0 12px; }
.bb-contact-info > p{ color: rgba(255,255,255,.62); line-height:1.75; font-size:.94rem; margin-bottom:36px; max-width:360px; }
.bb-contact-list{ display:flex; flex-direction:column; gap:22px; margin-bottom:38px; }
.bb-contact-list li{ display:flex; align-items:center; gap:16px; }
.bb-contact-list .ico{
  width:46px; height:46px; border-radius:13px; flex-shrink:0;
  background: rgba(250,208,143,.12); color: var(--bb-gold);
  display:flex; align-items:center; justify-content:center; font-size:1.05rem;
}
.bb-contact-list b{ display:block; font-family: var(--font-display); font-weight:700; font-size:.92rem; margin-bottom:3px; }
.bb-contact-list span{ font-size:.83rem; color: rgba(255,255,255,.58); line-height:1.5; }
.bb-contact-social{ display:flex; gap:12px; margin-top:auto; }
.bb-contact-social a{
  width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); color:#fff;
  transition: all .3s var(--ease);
}
.bb-contact-social a:hover{ background: var(--bb-gold); border-color: var(--bb-gold); color: var(--bb-red-deep); transform: translateY(-3px); }

.bb-contact-form-card{ background:#fff; padding: 54px 48px; }
.bb-contact-form-card > .bb-heading{ font-size:1.7rem; }

.bb-contact-map{ border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-lg); height:420px; border:1px solid var(--bb-gray-200); }
.bb-contact-map iframe{ width:100%; height:100%; border:0; display:block; }

@media (max-width: 991.98px){
  .bb-contact-panel{ grid-template-columns: 1fr; }
  .bb-contact-info{ padding: 44px 30px; }
  .bb-contact-form-card{ padding: 44px 30px; }
}
@media (max-width: 575.98px){
  .bb-contact-info, .bb-contact-form-card{ padding: 36px 22px; }
}

/* ==========================================================================
   GLOBAL REACH — left copy / right country cards
   ========================================================================== */
.bb-reach-card{
  display:flex; align-items:center; gap:14px; padding:18px 20px; height:100%;
  border-radius: var(--radius-md); border:1px solid rgba(10,10,11,.05);
  transition: all .35s var(--ease);
}
.bb-reach-card:hover{ transform: translateY(-5px); box-shadow: var(--shadow-md); }
.bb-reach-card.tint-red{ background: rgba(184,14,15,.05); }
.bb-reach-card.tint-gold{ background: rgba(250,208,143,.22); }
.bb-reach-card .ico{
  width:48px; height:48px; border-radius:12px; background:#fff;
  display:flex; align-items:center; justify-content:center; font-size:1.15rem;
  flex-shrink:0; box-shadow: var(--shadow-sm);
}
.bb-reach-card.tint-red .ico{ color: var(--bb-red); }
.bb-reach-card.tint-gold .ico{ color: var(--bb-gold-dark); }
.bb-reach-card b{ display:block; font-family: var(--font-display); font-weight:700; font-size:.98rem; color: var(--bb-black); }
.bb-reach-card span{ font-size:.8rem; color: var(--bb-gray-600); }

/* ==========================================================================
   PERSONA PANELS — Become a Seller / Become a Buyer (compact, image left)
   ========================================================================== */
.bb-persona-panel{
  display:flex; align-items:stretch; background:#fff; border-radius: var(--radius-lg); overflow:hidden;
  border:1px solid var(--bb-gray-200); transition: all .35s var(--ease); height:100%;
}
.bb-persona-panel:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color:transparent; }
.bb-persona-panel .frame{ position:relative; width:38%; flex-shrink:0; overflow:hidden; }
.bb-persona-panel .frame img{ width:100%; height:100%; object-fit:cover; transition: transform .6s var(--ease); }
.bb-persona-panel:hover .frame img{ transform: scale(1.08); }
.bb-persona-panel .tag{
  position:absolute; bottom:10px; left:10px; z-index:2; color:#fff;
  font-family: var(--font-display); font-weight:700; font-size:.66rem; letter-spacing:.03em; text-transform:uppercase;
  padding:6px 12px; border-radius: var(--radius-pill); display:flex; align-items:center; gap:6px;
}
.bb-persona-panel.seller .tag{ background: var(--bb-red); }
.bb-persona-panel.buyer .tag{ background: var(--bb-gold-dark); }
.bb-persona-panel .content{ flex:1; min-width:0; padding:26px 28px; display:flex; flex-direction:column; justify-content:center; }
.bb-persona-panel .content .bb-eyebrow{ align-self:flex-start; font-size:.66rem; padding:5px 12px 5px 10px; }
.bb-persona-panel .content h3{ font-size:1.18rem; margin:8px 0 10px; }
.bb-persona-panel .content > p{ color: var(--bb-gray-600); font-size:.86rem; line-height:1.6; margin-bottom:16px; }
.bb-persona-panel .content .bb-btn{ align-self:flex-start; }
.bb-persona-list{ display:flex; flex-direction:column; gap:9px; margin-bottom:18px; }
.bb-persona-list li{ display:flex; align-items:flex-start; gap:10px; font-weight:600; font-size:.8rem; color: var(--bb-ink); }
.bb-persona-list li i{ width:19px; height:19px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.58rem; flex-shrink:0; margin-top:2px; }
.bb-persona-list.seller li i{ color: var(--bb-red); background: rgba(184,14,15,.1); }
.bb-persona-list.buyer li i{ color: var(--bb-gold-dark); background: rgba(201,134,26,.12); }
@media (max-width: 575.98px){
  .bb-persona-panel{ flex-direction:column; }
  .bb-persona-panel .frame{ width:100%; aspect-ratio:16/9; }
}

.bb-pricing-card{ background:#fff; border:1.5px solid var(--bb-gray-200); border-radius: var(--radius-lg); padding:36px 30px; text-align:center; height:100%; transition: all .4s var(--ease); position:relative; }
.bb-pricing-card:hover{ transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.bb-pricing-card.featured{ border-color: var(--bb-red); box-shadow: var(--shadow-red); transform: scale(1.04); }
.bb-pricing-card .tag{ position:absolute; top:-14px; left:50%; transform: translateX(-50%); background: var(--bb-red); color:#fff; font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; padding:6px 18px; border-radius: var(--radius-pill); }
.bb-pricing-card .plan-name{ font-family: var(--font-display); font-weight:700; font-size:1.1rem; color: var(--bb-gray-600); margin-bottom:10px; }
.bb-pricing-card .plan-price{ font-family: var(--font-display); font-weight:800; font-size:2.6rem; color: var(--bb-black); margin-bottom:6px; }
.bb-pricing-card .plan-price span{ font-size:.9rem; font-weight:600; color: var(--bb-gray-400); }
.bb-pricing-card .plan-desc{ font-size:.86rem; color: var(--bb-gray-600); margin-bottom:26px; }
.bb-pricing-card ul{ text-align:left; display:flex; flex-direction:column; gap:14px; margin-bottom:30px; }
.bb-pricing-card ul li{ display:flex; align-items:center; gap:10px; font-size:.9rem; font-weight:600; }
.bb-pricing-card ul li i{ color: #1ea05a; }
.bb-pricing-card ul li.disabled{ color: var(--bb-gray-400); }
.bb-pricing-card ul li.disabled i{ color: var(--bb-gray-400); }

.bb-blog-card{ background:#fff; border:1px solid var(--bb-gray-200); border-radius: var(--radius-md); overflow:hidden; height:100%; transition: all .4s var(--ease); }
.bb-blog-card:hover{ transform: translateY(-8px); box-shadow: var(--shadow-md); }
.bb-blog-media{ aspect-ratio:16/10; overflow:hidden; position:relative; }
.bb-blog-media img{ width:100%; height:100%; object-fit:cover; transition: transform .6s ease; }
.bb-blog-card:hover .bb-blog-media img{ transform: scale(1.08); }
.bb-blog-media .cat-tag{ position:absolute; top:14px; left:14px; background: var(--bb-red); color:#fff; font-size:.7rem; font-weight:700; padding:6px 14px; border-radius: var(--radius-pill); text-transform:uppercase; }
.bb-blog-body{ padding:22px 24px; }
.bb-blog-meta{ display:flex; gap:16px; font-size:.76rem; color: var(--bb-gray-400); font-weight:600; margin-bottom:12px; }
.bb-blog-body h5{ font-size:1.05rem; margin-bottom:12px; line-height:1.4; }
.bb-blog-readmore{ font-family: var(--font-display); font-weight:700; font-size:.84rem; color: var(--bb-red); display:inline-flex; align-items:center; gap:6px; }

.bb-legal-content h2{ font-size:1.4rem; margin: 36px 0 14px; }
.bb-legal-content h2:first-child{ margin-top:0; }
.bb-legal-content p, .bb-legal-content li{ color: var(--bb-gray-600); line-height:1.85; font-size:.98rem; margin-bottom:14px; }
.bb-legal-content ul{ padding-left:22px; list-style: disc; }
.bb-legal-content ol{ padding-left:22px; list-style: decimal; }

/* ==========================================================================
   SELLER LISTING FORM (multi-item repeater)
   ========================================================================== */
.bb-listing-form-wrap{ background:#fff; border:1px solid var(--bb-gray-200); border-radius: var(--radius-lg); padding: 44px; box-shadow: var(--shadow-md); }
@media (max-width: 575.98px){ .bb-listing-form-wrap{ padding:24px; } }
.bb-listing-form-wrap h5.form-section-title{ font-family: var(--font-display); font-weight:700; font-size:1.05rem; margin: 34px 0 18px; display:flex; align-items:center; gap:10px; }
.bb-listing-form-wrap h5.form-section-title:first-child{ margin-top:0; }
.bb-listing-form-wrap h5.form-section-title i{ color: var(--bb-red); }

.bb-item-row{ background: var(--bb-gray-50); border:1.5px solid var(--bb-gray-200); border-radius: var(--radius-md); padding:24px 20px 20px; position:relative; margin-bottom:20px; }
.bb-item-row .row-number{ position:absolute; top:-13px; left:20px; background: var(--bb-red); color:#fff; font-family:var(--font-display); font-weight:800; font-size:.72rem; letter-spacing:.04em; text-transform:uppercase; padding:5px 14px; border-radius: var(--radius-pill); }
.bb-item-row .remove-item-btn{ position:absolute; top:14px; right:14px; width:30px; height:30px; border-radius:50%; background:#fff; border:1px solid var(--bb-gray-200); color:var(--bb-gray-600); display:flex; align-items:center; justify-content:center; transition: all .25s ease; font-size:.8rem; }
.bb-item-row .remove-item-btn:hover{ background: var(--bb-red); color:#fff; border-color:transparent; }
.bb-add-item-btn{ border:1.5px dashed var(--bb-gray-200); background:transparent; color: var(--bb-red); font-family:var(--font-display); font-weight:700; font-size:.9rem; padding:14px; border-radius: var(--radius-md); width:100%; display:flex; align-items:center; justify-content:center; gap:8px; transition: all .3s ease; }
.bb-add-item-btn:hover{ border-color: var(--bb-red); background: rgba(184,14,15,.04); }
.bb-listing-note{ display:flex; gap:12px; align-items:flex-start; background: rgba(250,208,143,.18); border:1px solid rgba(201,134,26,.3); border-radius: var(--radius-md); padding:16px 18px; margin-bottom:30px; }
.bb-listing-note i{ color: var(--bb-gold-dark); margin-top:2px; }
.bb-listing-note p{ font-size:.88rem; color: var(--bb-gray-800); line-height:1.6; margin:0; }

/* ==========================================================================
   AUTHENTICATION PAGES
   ========================================================================== */
.bb-auth-wrap{ height:100vh; overflow:hidden; display:grid; grid-template-columns: 1fr 1fr; }
.bb-auth-visual{ background: var(--bb-black); position:relative; overflow:hidden; padding: 40px 50px; display:flex; flex-direction:column; justify-content:space-between; color:#fff; }
.bb-auth-visual .bb-hero-blob{ opacity:.5; }
.bb-auth-visual .top a{ display:inline-flex; align-items:center; }
.bb-auth-mid{ position:relative; z-index:2; }
.bb-auth-mid h2{ color:#fff; font-size:2rem; line-height:1.25; max-width:440px; }
.bb-auth-mid p{ color: rgba(255,255,255,.65); margin-top:16px; max-width:420px; line-height:1.7; }
.bb-auth-stats{ display:flex; gap:36px; position:relative; z-index:2; }
.bb-auth-stats div b{ display:block; font-family: var(--font-display); font-weight:800; font-size:1.6rem; }
.bb-auth-stats div span{ font-size:.78rem; color: rgba(255,255,255,.55); }

.bb-auth-form-side{ display:flex; align-items:center; justify-content:center; padding: 28px 40px; background:#fff; height:100vh; overflow-y:auto; }
.bb-auth-form-box{ width:100%; max-width:440px; }
.bb-auth-form-box.bb-auth-form-box-wide{ max-width:560px; }
.bb-checkbox-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap:6px 10px; border:1px solid var(--bb-gray-200); border-radius: var(--radius-md); padding:14px 16px; }
.bb-checkbox-grid .form-check{ margin-bottom:0; }
.bb-checkbox-grid .form-check-label{ font-size:.86rem; }
.bb-checkbox-grid-scroll{ max-height:220px; overflow-y:auto; }
.bb-auth-form-box .step-icon{ width:52px; height:52px; border-radius:16px; background: rgba(184,14,15,.08); color: var(--bb-red); display:flex; align-items:center; justify-content:center; font-size:1.4rem; margin-bottom:16px; }
.bb-auth-form-box h1{ font-size:1.5rem; margin-bottom:6px; }
.bb-auth-form-box > p{ color: var(--bb-gray-600); margin-bottom:20px; font-size:.9rem; }
.bb-auth-form-box .form-check-label a{ color: var(--bb-red); font-weight:600; }
.bb-auth-divider{ display:flex; align-items:center; gap:14px; margin: 26px 0; color: var(--bb-gray-400); font-size:.82rem; font-weight:600; }
.bb-auth-divider::before, .bb-auth-divider::after{ content:''; flex:1; height:1px; background: var(--bb-gray-200); }
.bb-auth-social{ display:flex; gap:12px; }
.bb-auth-social button{ flex:1; border:1.5px solid var(--bb-gray-200); background:#fff; border-radius:12px; padding:11px; font-weight:700; font-size:.86rem; display:flex; align-items:center; justify-content:center; gap:8px; transition: all .3s ease; }
.bb-auth-social button:hover{ border-color: var(--bb-red); color: var(--bb-red); }
.bb-auth-footer-link{ text-align:center; margin-top:28px; font-size:.9rem; color: var(--bb-gray-600); }
.bb-auth-footer-link a{ color: var(--bb-red); font-weight:700; }
.bb-back-link{ display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:.86rem; color: var(--bb-gray-600); margin-bottom:22px; }
.bb-back-link:hover{ color: var(--bb-red); }

.bb-otp-inputs{ display:flex; gap:12px; }
.bb-otp-inputs input{
  width:100%; aspect-ratio:1/1; text-align:center; font-family: var(--font-display); font-weight:800; font-size:1.4rem;
  border:1.5px solid var(--bb-gray-200); border-radius:14px; transition: all .25s ease;
}
.bb-otp-inputs input:focus{ border-color: var(--bb-red); box-shadow: 0 0 0 4px rgba(184,14,15,.1); outline:none; }
.bb-otp-resend{ text-align:center; margin-top:22px; font-size:.9rem; color: var(--bb-gray-600); }
.bb-otp-resend a{ color: var(--bb-red); font-weight:700; }
.bb-otp-timer{ font-weight:700; color: var(--bb-black); }

.bb-password-strength{ display:flex; gap:6px; margin-top:10px; }
.bb-password-strength span{ height:4px; flex:1; border-radius:4px; background: var(--bb-gray-200); }

.bb-verify-success{ text-align:center; max-width:460px; }
.bb-verify-success .bb-success-icon{ margin: 0 auto 30px; }
.bb-progress-steps{ display:flex; align-items:center; justify-content:center; gap:6px; margin-bottom:34px; }
.bb-progress-steps span{ width:34px; height:5px; border-radius:4px; background: var(--bb-gray-200); }
.bb-progress-steps span.done{ background: var(--bb-red); }

@media (max-width: 991.98px){
  .bb-auth-wrap{ grid-template-columns: 1fr; }
  .bb-auth-visual{ display:none; }
  .bb-auth-form-side{ padding: 40px 22px; min-height:100vh; }
}