/* === Brand tokens ======================================================= */
:root{
  /* Accent */
  --accent-300: #3fd8ff;
  --accent-400: #1cc3ff;
  --accent-500: #009dff;
  --accent-600: #007de0;
  --accent-700: #005fc7;
  --accent-800: #004aa2;
  --accent: var(--accent-500);

  /* Light */
  --bg-light: #f7fafc;
  --panel-light: #ffffff;
  --panel-border-light: rgba(0,0,0,.08);
  --text-light: #0b0f13;
  --muted-light: #5b6977;

  /* Dark */
  --bg: #0b0f13;
  --panel: #121820;
  --panel-border: rgba(255,255,255,.06);
  --text: #e7edf3;
  --muted: #9aa7b3;

  /* Media surfaces */
  --media-bg-dark: #ffffff;
  --media-border-dark: rgba(15,23,42,.16);
  --media-bg-light: #ffffff;
  --media-border-light: rgba(15,23,42,.12);
}

body{
  font-family: "Inter", "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
  line-height: 1.65;
  font-size: 1rem;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.navbar .container,
.navbar .container-fluid,
.main-content{
  max-width: 100%;
}

.main-content{
  padding-bottom: clamp(3rem, 6vw, 5rem) !important;
}

/* === Base (dark) ======================================================= */
html[data-bs-theme="dark"] body{
  /* subtle blue-ish glow */
  background:
    radial-gradient(800px 400px at 10% 0%, rgba(0,212,255,.10), transparent 60%),
    radial-gradient(600px 300px at 90% 20%, rgba(0,119,255,.08), transparent 60%),
    var(--bg);
  color: var(--text);
}
.fw-800{ font-weight: 800; }

.btn-whatsapp{
  background-color: #25D366;
  border-color: #25D366;
  color: #fff;
}
.btn-whatsapp:hover,
.btn-whatsapp:focus{
  background-color: #1EBE5B;
  border-color: #1EBE5B;
  color: #fff;
}
.btn-icon svg{
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
}

/* === Base (light) ====================================================== */
html[data-bs-theme="light"] body{
  background:
    radial-gradient(900px 300px at 50% -10%, rgba(0,212,255,.06), transparent 60%),
    var(--bg-light);
  color: var(--text-light);
}
html[data-bs-theme="light"] .navbar{
  background: var(--panel-light);
  color: var(--text-light);
  border-bottom: 1px solid var(--panel-border-light);
  box-shadow: 0 10px 32px rgba(15,23,42,.08);
}
html[data-bs-theme="light"] .card{
  background: var(--panel-light);
  color: var(--text-light);
  border: 1px solid var(--panel-border-light);
  box-shadow: 0 10px 32px rgba(15,23,42,.08);
}
html[data-bs-theme="light"] .form-select,
html[data-bs-theme="light"] .form-control{
  background-color: #fff;
  border-color: var(--panel-border-light);
  color: var(--text-light);
}
html[data-bs-theme="light"] .text-muted{ color: var(--muted-light) !important; }
html[data-bs-theme="light"] .info-grid{
  background: #ffffff;
  border: 1px solid var(--panel-border-light);
  box-shadow: 0 20px 45px rgba(15,23,42,.08);
}
html[data-bs-theme="light"] .info-card{
  background: rgba(14,116,167,.04);
  border: 1px solid rgba(15,23,42,.08);
}
html[data-bs-theme="light"] .code-block{
  background: #f4f7fb;
  border: 1px solid rgba(15,23,42,.12);
  color: var(--text-light);
}

html[data-bs-theme="light"] .list-dash > li::before{
  box-shadow: 0 0 0 3px rgba(15,23,42,.08);
}

/* === Navbar ============================================================ */
html[data-bs-theme="dark"] .navbar{
  background: var(--panel);
  border-bottom: 1px solid var(--panel-border);
}
.theme-switcher{
  font-size: .85rem;
}
.theme-switcher label{
  letter-spacing: .02em;
  text-transform: uppercase;
}
.theme-switcher select{
  min-width: 110px;
}

.navbar .btn-nav{
  border-radius: 999px;
  font-weight: 600;
  padding: .35rem 1rem;
  border: 1px solid var(--panel-border);
  color: var(--text);
  background: rgba(255,255,255,.04);
  transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.navbar .btn-nav:hover,
.navbar .btn-nav:focus-visible{
  color: #fff;
  border-color: var(--accent-500);
  background: linear-gradient(135deg, var(--accent-400), var(--accent-700));
  box-shadow: 0 6px 20px rgba(0,125,224,.35);
}
.navbar .btn-nav:focus-visible{
  outline: none;
}
.navbar .btn-nav-active{
  color: #fff;
  border-color: var(--accent-600);
  background: linear-gradient(135deg, var(--accent-500), var(--accent-800));
  box-shadow: 0 10px 28px rgba(0,125,224,.4);
}
html[data-bs-theme="light"] .navbar .btn-nav{
  color: var(--text-light);
  border-color: var(--panel-border-light);
  background: rgba(255,255,255,.92);
  box-shadow: 0 12px 24px rgba(15,23,42,.08);
}
html[data-bs-theme="light"] .navbar .btn-nav:hover,
html[data-bs-theme="light"] .navbar .btn-nav:focus-visible{
  color: #fff;
  border-color: var(--accent-500);
  background: linear-gradient(135deg, var(--accent-400), var(--accent-700));
  box-shadow: 0 16px 32px rgba(0,125,224,.25);
}
html[data-bs-theme="light"] .navbar .btn-nav-active{
  color: #fff;
  border-color: var(--accent-600);
  background: linear-gradient(135deg, var(--accent-500), var(--accent-800));
  box-shadow: 0 20px 38px rgba(0,125,224,.3);
}

/* === Coupon directory ================================================== */
.coupon-card{
  background: var(--panel);
  border: 1px solid var(--panel-border);
  color: var(--text);
  box-shadow: 0 20px 45px rgba(2,12,24,.45);
}
.coupon-card__header{
  background: linear-gradient(135deg, rgba(0,125,224,.18), rgba(0,125,224,.05));
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.coupon-card__badge{
  background: rgba(0,125,224,.15);
  color: var(--text);
  border: 1px solid rgba(255,255,255,.16);
  padding: .35rem .9rem;
  font-weight: 600;
  letter-spacing: .02em;
}
.coupon-table{
  --bs-table-bg: transparent;
  --bs-table-color: var(--text);
  --bs-table-border-color: rgba(255,255,255,.08);
  --bs-table-striped-bg: rgba(255,255,255,.05);
  --bs-table-striped-color: var(--text);
  --bs-table-hover-color: var(--text);
  --bs-table-hover-bg: rgba(0,125,224,.08);
}
.coupon-table th{
  font-weight: 700;
}
.coupon-pricing{
  display: grid;
  gap: .75rem 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.coupon-pricing__item{
  border-radius: .75rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  padding: .85rem 1rem;
}
.coupon-pricing__item dt{
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: .35rem;
  color: var(--muted);
}
.coupon-pricing__item dd{
  margin: 0;
  font-weight: 600;
}
.coupon-card:last-child{
  margin-bottom: 0;
}
html[data-bs-theme="light"] .coupon-card{
  background: var(--panel-light);
  border: 1px solid var(--panel-border-light);
  color: var(--text-light);
  box-shadow: 0 18px 45px rgba(15,23,42,.08);
}
html[data-bs-theme="light"] .coupon-card__header{
  background: linear-gradient(135deg, rgba(0,125,224,.08), rgba(255,255,255,.85));
  border-bottom: 1px solid rgba(15,23,42,.08);
}
html[data-bs-theme="light"] .coupon-card__badge{
  background: rgba(0,125,224,.18);
  border-color: rgba(0,125,224,.42);
  color: #0c2f55;
}
html[data-bs-theme="light"] .coupon-pricing__item{
  background: rgba(255,255,255,.9);
  border-color: rgba(15,23,42,.12);
  box-shadow: 0 10px 26px rgba(15,23,42,.08);
}
html[data-bs-theme="light"] .coupon-pricing__item dt{
  color: var(--muted-light);
}
html[data-bs-theme="light"] .coupon-table{
  --bs-table-color: var(--text-light);
  --bs-table-border-color: rgba(15,23,42,.12);
  --bs-table-striped-bg: rgba(0,125,224,.08);
  --bs-table-striped-color: var(--text-light);
  --bs-table-hover-bg: rgba(0,125,224,.12);
  --bs-table-hover-color: var(--text-light);
}

/* Brand mark */
.brand-text{ letter-spacing:.2px; text-decoration:none; }
.brand-ebikes{ color: var(--accent); font-weight: 800; }
/* dot on LEFT of the logo text */
.logo-dot{
  width: 12px; height: 12px; border-radius: 999px; display: inline-block;
  margin-right: .45rem; vertical-align: middle;
  background: radial-gradient(120% 120% at 30% 20%, var(--accent-300), var(--accent-800));
  box-shadow: 0 0 10px rgba(0, 125, 224, .55);
}
html[data-bs-theme="dark"] .brand-text{ color: var(--text); }
html[data-bs-theme="light"] .brand-text{ color: var(--text-light); }

/* Links */
a{ color: var(--accent); text-decoration: none; }
a:hover{ color: var(--accent-400); }

/* === Buttons (primary mapped to accent) ================================ */
.btn-primary{
  --bs-btn-color: #fff;                  /* keep text WHITE on both states */
  --bs-btn-bg: var(--accent-600);
  --bs-btn-border-color: var(--accent-600);
  --bs-btn-hover-bg: var(--accent-700);
  --bs-btn-hover-border-color: var(--accent-700);
  --bs-btn-focus-shadow-rgb: 0, 125, 224;
  background-image: linear-gradient(135deg, var(--accent-400), var(--accent-700));
  transition: background-image .15s ease;
}
.btn-primary:hover{
  background-image: linear-gradient(135deg, var(--accent-500), var(--accent-800));
}
.btn-outline-primary{
  --bs-btn-color: var(--accent);
  --bs-btn-border-color: var(--accent);
}
.btn-outline-primary:hover{
  color: #fff; /* switch to white on filled gradient hover */
  background-image: linear-gradient(135deg, var(--accent-500), var(--accent-800));
  border-color: var(--accent-600);
}
.btn{ min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.bike-card__reviews summary{
  cursor: pointer;
  color: var(--accent);
  font-weight: 600;
  list-style: none;
}
.bike-card__reviews summary::-webkit-details-marker{ display:none; }
.bike-card__reviews[open] summary{ color: var(--accent-300); }
.bike-card__reviews-grid{
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* === Forms ============================================================= */
html[data-bs-theme="dark"] .form-label{ color: var(--text); }
html[data-bs-theme="light"] .form-label{ color: var(--text-light); }
html[data-bs-theme="dark"] .form-select,
html[data-bs-theme="dark"] .form-control{
  background-color: #0f141b;
  border-color: var(--panel-border);
  color: var(--text);
}
.feature-filter{
  background: rgba(15,23,33,.6);
  border-radius: 1rem;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.feature-filter__legend{
  letter-spacing: .08em;
}
.feature-filter-grid{
  display: grid;
  gap: .65rem 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.feature-filter .form-check-label{
  font-size: .9rem;
}
.feature-filter .form-check-input:focus{
  box-shadow: none;
}
.feature-filter .form-check-input:checked{
  background-color: var(--accent-600);
  border-color: var(--accent-600);
}

html[data-bs-theme="light"] .feature-filter{
  background: rgba(255,255,255,.85);
  border-color: var(--panel-border-light);
  box-shadow: 0 12px 32px rgba(15,23,42,.08);
}
html[data-bs-theme="light"] .feature-filter .form-check-label{
  color: var(--text-light);
}
.form-select:focus, .form-control:focus{
  border-color: var(--accent-700);
  box-shadow: 0 0 0 .20rem rgba(0, 125, 224, .25);
}

/* === Cards ============================================================= */
.card{ border-radius: 1rem; }
html[data-bs-theme="dark"] .card{
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--panel-border);
  box-shadow: 0 10px 20px rgba(0,0,0,.25);
}
.bike-card{
  display: flex;
  flex-direction: column;
}
.bike-card .card-body{
  flex: 1 1 auto;
}
.bike-card .card-footer{
  margin-top: auto;
}
.bike-card__pricing{
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.bike-card__price-row{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem;
}
.bike-card__price-figure{
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--accent-400);
}
html[data-bs-theme="light"] .bike-card__price-figure{
  color: var(--accent-600);
}
.bike-card__price-label{
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 600;
}
.bike-card__price-rrp{
  font-size: .9rem;
}
.bike-card__price-note{
  font-size: .85rem;
}
.card-body{ line-height: 1.6; }
.card-img-top{
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
  background: var(--media-bg-dark);
  border-bottom: 0;
}
.bike-card__media{
  aspect-ratio: 4 / 3;
  width: 100%;
  max-height: clamp(210px, 52vw, 320px);
  overflow: hidden;
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
  background: var(--media-bg-dark);
  display: flex;
  align-items: stretch;
  justify-content: center;
  box-shadow: 0 18px 36px rgba(7, 14, 26, .25);
}
.bike-card__media-trigger{
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  cursor: zoom-in;
  color: inherit;
  text-align: inherit;
}
.bike-card__media-trigger:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.bike-card__media picture,
.bike-card__media img{
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  flex: 1 0 auto;
}
.bike-card__media img{
  object-fit: cover;
  object-position: center;
}

html[data-bs-theme="light"] .bike-card__media{
  background: var(--media-bg-light);
  box-shadow: 0 18px 36px rgba(15,23,42,.16);
}
html[data-bs-theme="light"] .card-img-top{
  background: var(--media-bg-light);
  border-bottom: 0;
}
html[data-bs-theme="dark"] .bike-card__media{
  box-shadow: 0 18px 36px rgba(0,0,0,.35);
}
html[data-bs-theme="dark"] .card-img-top{
  border-bottom: 0;
}

.compare-card__media{
  aspect-ratio: 4 / 3;
  width: 100%;
  max-height: clamp(210px, 52vw, 340px);
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
  overflow: hidden;
  display: flex;
  align-items: stretch;
  justify-content: center;
  background: var(--media-bg-dark);
  box-shadow: 0 16px 32px rgba(7, 14, 26, .25);
}
.compare-card__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.compare-card__media picture{
  flex: 1 0 auto;
  width: 100%;
  height: 100%;
}
html[data-bs-theme="light"] .compare-card__media{
  background: var(--media-bg-light);
  box-shadow: 0 16px 32px rgba(15,23,42,.14);
}
html[data-bs-theme="dark"] .compare-card__media{
  box-shadow: 0 16px 32px rgba(0,0,0,.35);
}

@media (max-width: 991.98px){
  .bike-card__media,
  .compare-card__media{
    border-top-left-radius: .85rem;
    border-top-right-radius: .85rem;
  }
}

@media (min-width: 1200px){
  .bike-card__media,
  .compare-card__media{
    padding: 0;
  }
}

body.has-bike-gallery-open{
  overflow: hidden;
}

.bike-gallery-overlay{
  position: fixed;
  inset: 0;
  z-index: 1080;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.bike-gallery-overlay[hidden]{
  display: none !important;
}
.bike-gallery-overlay__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(7, 10, 16, .85);
}
.bike-gallery-overlay__dialog{
  position: relative;
  z-index: 1;
  background: rgba(12, 18, 26, .95);
  color: #fff;
  border-radius: 1rem;
  padding: 1.5rem;
  width: min(100%, 960px);
  box-shadow: 0 30px 60px rgba(0,0,0,.45);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.bike-gallery-overlay__body{
  width: 100%;
  max-height: 70vh;
  overflow: auto;
}
.bike-gallery-overlay__body.is-zoomed{
  max-height: none;
}
.bike-gallery-overlay__figure{
  display: flex;
  flex-direction: column;
  gap: .75rem;
  align-items: center;
}
.bike-gallery-overlay__image{
  width: 100%;
  max-height: min(70vh, 720px);
  object-fit: contain;
  border-radius: .75rem;
  background: var(--media-bg-dark);
  border: 1px solid var(--media-border-dark);
  cursor: zoom-in;
  transition: transform .2s ease, box-shadow .2s ease;
}
.bike-gallery-overlay__image.is-zoomed{
  cursor: zoom-out;
  max-height: none;
  max-width: none;
  width: 100%;
  height: min(85vh, 900px);
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(255,255,255,.2);
}
.bike-gallery-overlay__caption{
  align-self: stretch;
}
.bike-gallery-overlay__caption{
  font-size: .95rem;
  color: rgba(255,255,255,.85);
}
.bike-gallery-overlay__controls .btn{
  min-width: 0;
}
.bike-gallery-overlay__counter{
  font-variant-numeric: tabular-nums;
}

/* Bike detail page */
.bike-detail__media{
  border:none;
  background:transparent;
  padding:0;
  cursor:pointer;
  display:block;
}
.bike-detail__media img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  display:block;
  border-radius:0.75rem;
  background:var(--media-bg-dark);
  border:1px solid var(--media-border-dark);
}
.bike-detail__media:focus{
  outline:2px solid var(--bs-primary);
  outline-offset:4px;
}
.bike-detail__summary{
  border:1px solid rgba(255,255,255,0.05);
}
.bike-detail__pricing-figure{
  font-size:2rem;
  font-weight:800;
}
.bike-detail__pricing-rrp{
  margin-left:0.75rem;
}
.bike-detail__spec-grid{
  display:grid;
  gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}
.bike-detail__spec{
  padding:1rem;
  border-radius:0.75rem;
  background:rgba(15,20,27,0.65);
  border:1px solid rgba(255,255,255,0.05);
}
.bike-detail__spec-label{
  letter-spacing:0.02em;
}
.bike-detail__compare{
  padding:1rem;
  border-radius:0.75rem;
  background:rgba(15,20,27,0.45);
  border:1px solid rgba(255,255,255,0.05);
}
.bike-detail__compare .input-group{
  gap:0.5rem;
  flex-wrap:wrap;
}
.bike-detail__compare .form-select{
  min-width:0;
}
.bike-detail__compare .btn{
  white-space:nowrap;
}
.bike-detail__thumbs{
  display:flex;
  flex-wrap:wrap;
  gap:0.75rem;
}
.bike-detail__thumb{
  border:none;
  background:rgba(15,20,27,0.65);
  border-radius:0.75rem;
  padding:0.35rem;
  width:124px;
  aspect-ratio:1/1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.bike-detail__thumb img{
  width:100%;
  height:100%;
  border-radius:0.5rem;
  object-fit:cover;
  display:block;
}
.bike-detail__thumb:focus{
  outline:2px solid var(--bs-primary);
  outline-offset:4px;
}
.bike-detail__video-grid{
  display:grid;
  gap:1.5rem;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
.bike-detail__key-specs dt{
  font-weight:600;
}
.bike-detail__key-specs dd{
  margin-bottom:0.5rem;
}

/* Compare page */
.compare-card{
  background:rgba(15,20,27,0.65);
  border:1px solid rgba(255,255,255,0.05);
}
html[data-bs-theme="light"] .compare-card{
  background:rgba(255,255,255,0.92);
  border-color:rgba(15,23,42,0.08);
}
html[data-bs-theme="dark"] .compare-card{
  border-color:rgba(255,255,255,0.08);
}
.compare-price{
  font-size:1.1rem;
}
.compare-selector .form-select{
  min-width:0;
}
.compare-presets__grid{
  display:grid;
  gap:0.75rem;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
}
.compare-presets__link{
  display:block;
  padding:0.75rem 1rem;
  border-radius:0.75rem;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(15,20,27,0.45);
  color:inherit;
  text-decoration:none;
  font-size:.95rem;
  line-height:1.4;
  word-break:break-word;
  transition:background .2s ease,border-color .2s ease,transform .2s ease;
}
.compare-presets__link:hover,
.compare-presets__link:focus{
  background:rgba(45,112,253,0.15);
  border-color:rgba(45,112,253,0.55);
  transform:translateY(-2px);
}
.compare-presets__link.is-active{
  background:rgba(45,112,253,0.25);
  border-color:rgba(45,112,253,0.75);
}
.compare-presets__link:focus{
  outline:2px solid var(--bs-primary);
  outline-offset:3px;
}

@media (max-width: 576px){
  .bike-detail__video-grid{
    grid-template-columns:1fr;
  }
  .bike-gallery-overlay{
    padding: 1rem;
  }
  .bike-gallery-overlay__dialog{
    padding: 1rem;
    gap: 1rem;
  }
  .bike-gallery-overlay__image{
    max-height: min(60vh, 480px);
  }
  .bike-gallery-overlay__body{
    max-height: 65vh;
  }
  .bike-gallery-overlay__body.is-zoomed{
    max-height: none;
  }
  .bike-gallery-overlay__image.is-zoomed{
    height: min(80vh, 640px);
  }
}

html[data-bs-theme="light"] .bike-gallery-overlay__dialog{
  background: rgba(255,255,255,.96);
  color: var(--text-light);
}
html[data-bs-theme="light"] .bike-gallery-overlay__image{
  background: var(--media-bg-light);
  border-color: var(--media-border-light);
}
html[data-bs-theme="light"] .bike-gallery-overlay__caption{
  color: var(--muted-light);
}

/* Keep images nicely cropped when you wrap them */
.object-cover { aspect-ratio: 16/9; overflow: hidden; }
.object-cover > img{ object-fit: cover; width:100%; height:100%; }

/* === Swatches (if/when rendered) ====================================== */
.swatches{ --size: 18px; display: inline-flex; gap: .4rem; padding: 0; margin: 0; list-style: none; }
.swatches li{
  width: var(--size); height: var(--size); border-radius: 4px;
  background: var(--sw, #888);
  outline: 1px solid rgba(255,255,255,.25);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.35);
}

/* Helpers */
.text-muted{ color: var(--muted) !important; }

/* === Informational sections =========================================== */
.content-section{
  margin-top: clamp(3rem, 6vw, 4.5rem);
}

.info-grid{
  border-radius: 1.75rem;
  padding: clamp(1.5rem, 4vw, 3rem);
  border: 1px solid transparent;
}
html[data-bs-theme="dark"] .info-grid{
  background: rgba(13,23,33,.68);
  border: 1px solid var(--panel-border);
  box-shadow: 0 24px 48px rgba(0,0,0,.35);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

.info-card{
  border-radius: 1.25rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border: 1px solid transparent;
}
html[data-bs-theme="dark"] .info-card{
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.info-subheading{
  font-size: .85rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--muted);
}
html[data-bs-theme="light"] .info-subheading{ color: var(--muted-light); }

.info-card .info-subheading:not(:first-of-type){
  margin-top: 1.75rem;
}

.info-card p{ margin-bottom: 0; }

.list-dash{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .65rem;
}

.motor-glossary{
  border-radius: 1.25rem;
  background: rgba(13,23,33,.68);
  border: 1px solid var(--panel-border);
  box-shadow: 0 18px 40px rgba(0,0,0,.28);
}
.motor-glossary__details{
  display: block;
}
.motor-glossary__summary{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  cursor: pointer;
  padding: 1.1rem 1.25rem;
  border-radius: 1rem;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  font-weight: 600;
  letter-spacing: .02em;
}
.motor-glossary__summary::-webkit-details-marker{
  display: none;
}
.motor-glossary__summary-icon{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.08);
  color: #fff;
  flex-shrink: 0;
}
.motor-glossary__summary-hint{
  font-size: .8rem;
  font-weight: 500;
  color: var(--muted);
}
.motor-glossary__details[open] .motor-glossary__summary{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.16);
}
.motor-glossary__panel{
  margin-top: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.motor-glossary__grid{
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.motor-glossary__grid article{
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 1rem;
  padding: 1.15rem 1.25rem;
}
.motor-glossary__grid h3{
  letter-spacing: .01em;
}

html[data-bs-theme="light"] .motor-glossary{
  background: rgba(255,255,255,.92);
  border: 1px solid var(--panel-border-light);
  box-shadow: 0 18px 45px rgba(15,23,42,.08);
}
html[data-bs-theme="light"] .motor-glossary__summary{
  background: rgba(14,116,167,.08);
  border-color: rgba(15,23,42,.1);
  color: var(--text-light);
}
html[data-bs-theme="light"] .motor-glossary__summary-icon{
  background: linear-gradient(135deg, var(--accent-400), var(--accent-700));
}
html[data-bs-theme="light"] .motor-glossary__summary-hint{
  color: var(--muted-light);
}
html[data-bs-theme="light"] .motor-glossary__details[open] .motor-glossary__summary{
  background: rgba(14,116,167,.12);
  border-color: rgba(15,23,42,.18);
}
html[data-bs-theme="light"] .motor-glossary__grid article{
  background: rgba(14,116,167,.06);
  border: 1px solid rgba(15,23,42,.08);
}

/* === Feedback hub ====================================================== */
.feedback-hero{
  max-width: 720px;
}
.feedback-grid{
  display: grid;
  gap: 1.5rem;
}
.feedback-card{
  border-radius: 1.25rem;
  border: 1px solid var(--panel-border);
  background: rgba(12,18,26,.92);
  box-shadow: 0 20px 44px rgba(0,0,0,.32);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
html[data-bs-theme="light"] .feedback-card{
  background: rgba(255,255,255,.96);
  border-color: var(--panel-border-light);
  box-shadow: 0 24px 52px rgba(15,23,42,.1);
}
.feedback-card__header{
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.feedback-status{
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .25rem .75rem;
  border-radius: 999px;
  font-size: .75rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  font-weight: 700;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
}
.feedback-status--implemented{
  background: rgba(46,204,113,.15);
  border-color: rgba(46,204,113,.35);
  color: #8ef2b9;
}
.feedback-status--pending{
  background: rgba(255,183,3,.18);
  border-color: rgba(255,183,3,.35);
  color: #ffd166;
}
.feedback-status--approved{
  background: rgba(56,189,248,.2);
  border-color: rgba(56,189,248,.35);
  color: #9cd9ff;
}
html[data-bs-theme="light"] .feedback-status{
  background: rgba(14,116,167,.08);
  border-color: rgba(15,23,42,.1);
  color: var(--muted-light);
}
html[data-bs-theme="light"] .feedback-status--implemented{
  background: rgba(76,175,80,.18);
  border-color: rgba(76,175,80,.32);
  color: #2f7d32;
}
.feedback-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: .85rem;
  color: var(--muted);
}
html[data-bs-theme="light"] .feedback-meta{
  color: var(--muted-light);
}
.feedback-vote{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.feedback-vote__button{
  border-radius: 999px;
  border: 1px solid var(--panel-border);
  background: transparent;
  color: inherit;
  padding: .35rem .9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.feedback-vote__button:hover,
.feedback-vote__button:focus-visible{
  background: linear-gradient(135deg, var(--accent-400), var(--accent-700));
  color: #fff;
  border-color: var(--accent-500);
  box-shadow: 0 8px 24px rgba(0,125,224,.35);
}
.feedback-vote__button:focus-visible{
  outline: none;
}
.feedback-vote__button[disabled]{
  cursor: default;
  opacity: .65;
  box-shadow: none;
}
.feedback-comments{
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 1rem;
  display: grid;
  gap: 1rem;
}
.feedback-comment{
  border-radius: .75rem;
  padding: .9rem 1rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
}
html[data-bs-theme="light"] .feedback-comment{
  background: rgba(14,116,167,.06);
  border-color: rgba(15,23,42,.1);
}
.feedback-form textarea{
  min-height: 140px;
}
.feedback-form .form-control:focus{
  box-shadow: 0 0 0 .2rem rgba(0,125,224,.25);
  border-color: var(--accent-600);
}
.feedback-alert{
  border-radius: 1rem;
  padding: 1rem 1.25rem;
  background: rgba(255,183,3,.15);
  border: 1px solid rgba(255,183,3,.35);
  color: #ffe08a;
}
html[data-bs-theme="light"] .feedback-alert{
  background: rgba(255,183,3,.16);
  border-color: rgba(255,183,3,.3);
  color: #8a6000;
}

.feedback-empty{
  border-radius: 1rem;
  padding: 1.25rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  text-align: center;
}
html[data-bs-theme="light"] .feedback-empty{
  background: rgba(14,116,167,.08);
  border-color: rgba(15,23,42,.12);
}

.list-dash > li{
  position: relative;
  padding-left: 1.4rem;
}

.list-dash > li::before{
  content: "";
  position: absolute;
  left: 0;
  top: .5em;
  width: .55rem;
  height: .55rem;
  border-radius: 999px;
  background: linear-gradient(140deg, var(--accent-400), var(--accent-700));
  box-shadow: 0 0 0 3px rgba(12,24,33,.35);
}

.code-block{
  font-family: "JetBrains Mono", "Fira Code", "SFMono-Regular", "Menlo", monospace;
  border-radius: .9rem;
  padding: 1rem 1.25rem;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.4;
  border: 1px solid transparent;
}
html[data-bs-theme="dark"] .code-block{
  background: rgba(4,9,15,.9);
  border: 1px solid rgba(255,255,255,.12);
}

.code-block code{ color: inherit; }

@media (max-width: 576px){
  .theme-switcher{
    width: 100%;
    justify-content: space-between;
  }
  .theme-switcher select{
    flex: 1 1 auto;
  }
}

/* === Responsive utilities ============================================= */
.bb-card-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 0;
  padding: 0;
}
.bb-card-grid > *{
  width: 100%;
  padding: 0;
}
@media (min-width: 576px){
  .bb-card-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 992px){
  .bb-card-grid{
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 1200px){
  .bb-card-grid{
    grid-template-columns: repeat(4, 1fr);
  }
}

.bb-img-fluid{
  max-width: 100%;
  height: auto;
}

.bb-hero{
  width: 100%;
  height: auto;
}

h1,
.bb-h1{
  font-size: 1.75rem;
}
@media (min-width: 768px){
  h1,
  .bb-h1{
    font-size: 2rem;
  }
}
@media (min-width: 1200px){
  h1,
  .bb-h1{
    font-size: 2.25rem;
  }
}

.bb-section{
  padding: 1rem;
}
@media (min-width: 768px){
  .bb-section{
    padding: 2rem;
  }
}

.bb-controls{
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.bb-controls .btn{
  flex: 1 1 auto;
}
@media (min-width: 768px){
  .bb-controls .btn{
    flex: 0 0 auto;
  }
}

.bb-table-wrap{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

table.bb-compare{
  min-width: 640px;
}

.bb-hide-sm{
  display: none;
}
@media (min-width: 768px){
  .bb-hide-sm{
    display: initial;
  }
}

/* --- Responsive base (append; do not remove existing rules) --- */

/* Detection-friendly flag */
@media (max-width: 575.98px) {
    :root {
        --bb-mq-flag: 1;
    }
}

/* Grid helpers for bike cards */
.bb-card-grid {
    --bb-card-grid-columns: 1;
}
.bb-card-grid > * {
    flex: 0 0 calc(100% / var(--bb-card-grid-columns));
    max-width: calc(100% / var(--bb-card-grid-columns));
    min-width: 0;
}
@media (min-width: 576px) {
    .bb-card-grid {
        --bb-card-grid-columns: 2;
    }
}
@media (min-width: 992px) {
    .bb-card-grid {
        --bb-card-grid-columns: 3;
    }
}
@media (min-width: 1200px) {
    .bb-card-grid {
        --bb-card-grid-columns: 4;
    }
}

/* Images */
.bb-img-fluid {
    height: auto;
    max-width: 100%;
}

/* Headings scale */
h1,
.bb-h1 {
    font-size: 1.75rem;
}
@media (min-width: 768px) {
    h1,
    .bb-h1 {
        font-size: 2rem;
    }
}
@media (min-width: 1200px) {
    h1,
    .bb-h1 {
        font-size: 2.25rem;
    }
}

/* Sections pad more on larger screens */
.bb-section {
    padding: 1rem;
}
@media (min-width: 768px) {
    .bb-section {
        padding: 2rem;
    }
}

/* Controls wrap on mobile */
.bb-controls {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
.bb-controls > * {
    flex: 1 1 8rem;
}
@media (min-width: 768px) {
    .bb-controls {
        flex-wrap: nowrap;
    }
    .bb-controls > * {
        flex: 0 0 auto;
    }
}

/* Tables (compare) scroll horizontally on small devices */
.bb-table-wrap {
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
}
.bb-table-wrap table {
    margin-bottom: 0;
}
table.bb-compare {
    min-width: 640px;
}

/* Utility */
.bb-hide-sm {
    display: none !important;
}
@media (min-width: 768px) {
    .bb-hide-sm {
        display: initial !important;
    }
}

/* ——— Safe custom grid (only when NOT using Bootstrap .row/.col-*) ——— */
.bb-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}
@media (min-width: 576px) {
    .bb-card-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
}
@media (min-width: 992px) {
    .bb-card-grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }
}

/* Never apply custom grid on Bootstrap rows */
.row.bb-card-grid {
    display: block;
    grid-template-columns: none;
}

/* Card safety: prevent “vertical letters” due to ultra-narrow widths */
.bb-card, .bike-card, .card {
    min-width: 240px; /* safe floor for titles */
}
.bb-card .card-title, .bike-card .card-title, .card .card-title {
    word-break: break-word;
    hyphens: auto;
}

/* Images already fluid; reiterate for safety */
.bb-img-fluid, .card img {
    max-width: 100%;
    height: auto;
}

/* === Share buttons (theme aware) ====================================== */
.bb-share-group{
    gap: 0.5rem;
}

.bb-share-btn{
    --bs-btn-padding-y: 0.375rem;
    --bs-btn-padding-x: 0.75rem;
    --bs-btn-font-size: 0.875rem;
    --bs-btn-font-weight: 600;
    --bs-btn-line-height: 1.25;
    --bs-btn-border-radius: 999px;
    --bs-btn-border-width: 1px;
    --bs-btn-hover-color: var(--bs-btn-color);
    --bs-btn-hover-bg: var(--bs-btn-bg);
    --bs-btn-hover-border-color: var(--bs-btn-border-color);
    --bs-btn-active-color: var(--bs-btn-color);
    --bs-btn-active-bg: var(--bs-btn-bg);
    --bs-btn-active-border-color: var(--bs-btn-border-color);
    color: var(--bs-btn-color);
    background-color: var(--bs-btn-bg);
    border-color: var(--bs-btn-border-color);
    transition: color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.bb-share-btn:hover,
.bb-share-btn:focus-visible{
    color: var(--bs-btn-hover-color);
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--bs-btn-hover-border-color);
}

.bb-share-btn:focus-visible{
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb, 13,110,253), .35);
}

.bb-share-btn:active{
    color: var(--bs-btn-active-color);
    background-color: var(--bs-btn-active-bg);
    border-color: var(--bs-btn-active-border-color);
}

.bb-share-btn .btn-icon{
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Verification: Share icons inherit currentColor for theme switching. */
.bb-share-btn .btn-icon svg{
    width: 1em;
    height: 1em;
    fill: currentColor;
    stroke: currentColor;
}

.bb-share-btn .btn-label{
    font-weight: 600;
}

.btn-whatsapp{
    --bs-btn-color: #ffffff;
    --bs-btn-bg: #25d366;
    --bs-btn-border-color: #25d366;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: #1ebe5b;
    --bs-btn-hover-border-color: #1ebe5b;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #1aae52;
    --bs-btn-active-border-color: #1aae52;
    --bs-btn-focus-shadow-rgb: 37,211,102;
}

[data-bs-theme="dark"] .btn-whatsapp{
    --bs-btn-color: #0b1f13;
    --bs-btn-bg: #1ebe5b;
    --bs-btn-border-color: #1ebe5b;
    --bs-btn-hover-color: #06140c;
    --bs-btn-hover-bg: #1ab453;
    --bs-btn-hover-border-color: #1ab453;
    --bs-btn-active-color: #06140c;
    --bs-btn-active-bg: #16994a;
    --bs-btn-active-border-color: #16994a;
    --bs-btn-focus-shadow-rgb: 30,190,91;
}

.btn-twitter{
    --bs-btn-color: #ffffff;
    --bs-btn-bg: #0f1419;
    --bs-btn-border-color: #0f1419;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: #111827;
    --bs-btn-hover-border-color: #111827;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #0b1015;
    --bs-btn-active-border-color: #0b1015;
    --bs-btn-focus-shadow-rgb: 15,20,25;
}

[data-bs-theme="dark"] .btn-twitter{
    --bs-btn-color: #111827;
    --bs-btn-bg: #f1f5f9;
    --bs-btn-border-color: #cbd5e1;
    --bs-btn-hover-color: #0f172a;
    --bs-btn-hover-bg: #e2e8f0;
    --bs-btn-hover-border-color: #c4d0dd;
    --bs-btn-active-color: #0f172a;
    --bs-btn-active-bg: #cbd5e1;
    --bs-btn-active-border-color: #cbd5e1;
    --bs-btn-focus-shadow-rgb: 203,213,225;
}

.btn-facebook{
    --bs-btn-color: #ffffff;
    --bs-btn-bg: #0f5bd7;
    --bs-btn-border-color: #0f5bd7;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: #0d52c2;
    --bs-btn-hover-border-color: #0d52c2;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #0c4ab0;
    --bs-btn-active-border-color: #0c4ab0;
    --bs-btn-focus-shadow-rgb: 15,91,215;
}

[data-bs-theme="dark"] .btn-facebook{
    --bs-btn-hover-bg: #1063eb;
    --bs-btn-hover-border-color: #1063eb;
}

.btn-linkedin{
    --bs-btn-color: #ffffff;
    --bs-btn-bg: #0a66c2;
    --bs-btn-border-color: #0a66c2;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: #095cab;
    --bs-btn-hover-border-color: #095cab;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #074f94;
    --bs-btn-active-border-color: #074f94;
    --bs-btn-focus-shadow-rgb: 10,102,194;
}

[data-bs-theme="dark"] .btn-linkedin{
    --bs-btn-hover-bg: #0b74e0;
    --bs-btn-hover-border-color: #0b74e0;
}

/* === Disclosure tweaks ================================================== */
.bb-aff-disclosure{
    max-width: 32rem;
    color: var(--bs-secondary-color);
}

.bb-aff-disclosure small{
    margin-top: 0;
}

/* === Theme contrast sweep ============================================== */
/* Verification: Light/dark contrast adjustments for cards, tables, links, dividers. */
[data-bs-theme="light"] a.link-light{
    color: var(--bs-body-color) !important;
}

[data-bs-theme="light"] a.link-light:hover,
[data-bs-theme="light"] a.link-light:focus{
    color: var(--bs-body-color) !important;
    opacity: 0.8;
}

[data-bs-theme="light"] .card{
    background-color: var(--bs-body-bg);
    border-color: rgba(0,0,0,.1);
}

[data-bs-theme="dark"] .card{
    background-color: var(--bs-dark-bg-subtle);
    border-color: var(--bs-border-color);
}

[data-bs-theme="light"] .text-secondary,
[data-bs-theme="light"] .text-muted{
    color: #6c757d !important;
}

[data-bs-theme="dark"] .text-secondary,
[data-bs-theme="dark"] .text-muted{
    color: var(--bs-secondary-color) !important;
}

[data-bs-theme="light"] table.bb-compare thead th{
    background: #f8f9fa;
}

[data-bs-theme="dark"] table.bb-compare thead th{
    background: #111827;
}

[data-bs-theme] hr,
[data-bs-theme] .border-top,
[data-bs-theme] .border-bottom{
    border-color: var(--bs-border-color) !important;
}

[data-bs-theme] .btn-icon svg,
[data-bs-theme] .bb-icon svg,
[data-bs-theme] .icon svg{
    fill: currentColor;
    stroke: currentColor;
}

/* When adding new components, always supply colors for [data-bs-theme="light"] and [data-bs-theme="dark"], or use Bootstrap variables so they adapt automatically. */
[data-bs-theme="light"] a{
    color: var(--bs-link-color);
}

[data-bs-theme="light"] a:hover,
[data-bs-theme="light"] a:focus{
    color: var(--bs-link-hover-color);
}

/* === Share buttons, compare widget & spec tiles ======================== */
.bb-share-group{
    margin-bottom: 1rem;
}

.bb-share-group .btn-group{
    flex-wrap: wrap;
}

.bb-share-group .btn{
    margin-bottom: 0.5rem;
}

.bb-share-group .btn i{
    font-size: 1em;
    vertical-align: -0.125em;
    margin-right: 0.35rem;
    color: currentColor;
}

.bb-share-group .btn:last-child{
    margin-bottom: 0.5rem;
}

[data-bs-theme="light"] .btn-whatsapp{
    background-color: #25D366;
    border-color: #25D366;
    color: #ffffff;
}

[data-bs-theme="light"] .btn-whatsapp:hover,
[data-bs-theme="light"] .btn-whatsapp:focus{
    background-color: #1EBE5B;
    border-color: #1EBE5B;
    color: #ffffff;
}

[data-bs-theme="dark"] .btn-whatsapp{
    background-color: #1FAA54;
    border-color: #1FAA54;
    color: #ffffff;
}

[data-bs-theme="dark"] .btn-whatsapp:hover,
[data-bs-theme="dark"] .btn-whatsapp:focus{
    background-color: #199647;
    border-color: #199647;
    color: #ffffff;
}

.bb-share-group .btn-outline-secondary{
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}

.bb-share-group .btn-outline-secondary:hover,
.bb-share-group .btn-outline-secondary:focus{
    color: var(--bs-body-color);
    background-color: var(--bs-tertiary-bg);
    border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .bb-share-group .btn-outline-secondary{
    color: var(--bs-light);
    border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .bb-share-group .btn-outline-secondary:hover,
[data-bs-theme="dark"] .bb-share-group .btn-outline-secondary:focus{
    color: var(--bs-light);
    background-color: rgba(255,255,255,0.1);
}

.bb-compare-card{
    border-radius: 1rem;
}

[data-bs-theme="light"] .bb-compare-card{
    background-color: #ffffff;
    border: 1px solid rgba(0,0,0,0.125);
    box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075);
}

[data-bs-theme="dark"] .bb-compare-card{
    background-color: var(--bs-dark-bg-subtle);
    border: 1px solid var(--bs-border-color);
}

.bb-spec-tile{
    padding: 0.875rem 1rem;
    border-radius: 0.75rem;
}

[data-bs-theme="light"] .bb-spec-tile{
    background-color: #f1f3f5;
    color: #212529;
    border: 1px solid rgba(0,0,0,0.08);
}

[data-bs-theme="light"] .bb-spec-tile .bike-detail__spec-label{
    color: #495057 !important;
}

[data-bs-theme="dark"] .bb-spec-tile{
    background-color: #111827;
    color: #e5e7eb;
    border: 1px solid var(--bs-border-color);
}

[data-bs-theme="dark"] .bb-spec-tile .bike-detail__spec-label{
    color: var(--bs-secondary-color) !important;
}

.bb-site-footer{
    background-color: transparent;
}

.bb-site-footer a{
    color: var(--bs-secondary-color);
}

.bb-site-footer a:hover,
.bb-site-footer a:focus{
    color: var(--bs-link-hover-color);
}

/* Share button refinements */
.bb-share-group{
    margin-bottom: 1rem;
}
.bb-share-group .btn{
    margin-bottom: .5rem;
}
.bb-share-group .btn i{
    font-size: 1em;
    vertical-align: -0.125em;
    margin-right: .35rem;
}
.bb-share-group .btn-group,
.bb-share-group{
    flex-wrap: wrap;
}
[data-bs-theme="light"] .btn-whatsapp{
    background-color: #25D366;
    border-color: #25D366;
    color: #ffffff;
}
[data-bs-theme="light"] .btn-whatsapp:hover,
[data-bs-theme="light"] .btn-whatsapp:focus{
    background-color: #1EBE5B;
    border-color: #1EBE5B;
    color: #ffffff;
}
[data-bs-theme="dark"] .btn-whatsapp{
    background-color: #20BD5B;
    border-color: #20BD5B;
    color: #ffffff;
}
[data-bs-theme="dark"] .btn-whatsapp:hover,
[data-bs-theme="dark"] .btn-whatsapp:focus{
    background-color: #19A34D;
    border-color: #19A34D;
    color: #ffffff;
}
.btn-x{
    background-color: #000000;
    border-color: #000000;
    color: #ffffff;
}
.btn-x:hover,
.btn-x:focus{
    background-color: #111111;
    border-color: #111111;
    color: #ffffff;
}
[data-bs-theme="dark"] .btn-x{
    background-color: #000000;
    border-color: #000000;
    color: #ffffff;
}
.btn-facebook{
    background-color: #1877F2;
    border-color: #1877F2;
    color: #ffffff;
}
.btn-facebook:hover,
.btn-facebook:focus{
    background-color: #0F6CE6;
    border-color: #0F6CE6;
    color: #ffffff;
}
.btn-linkedin{
    background-color: #0A66C2;
    border-color: #0A66C2;
    color: #ffffff;
}
.btn-linkedin:hover,
.btn-linkedin:focus{
    background-color: #095AAE;
    border-color: #095AAE;
    color: #ffffff;
}