:root { --accent:#00d4ff; }
body { font-family:"Outfit",system-ui,Segoe UI,Roboto,Arial,sans-serif; }

.fw-800 { font-weight:800; }

.logo-dot{
    width:14px; height:14px; border-radius:999px;
    background: radial-gradient(120% 120% at 30% 20%, var(--accent), #0077ff);
    box-shadow:0 0 12px rgba(0, 180, 255, .6);
    display:inline-block;
}
.brand-text{ letter-spacing:.2px; }
.brand-ebike{ color:var(--accent); font-weight:800; }

.text-accent{ color:var(--accent) !important; }

.hero{
    background: radial-gradient(700px 280px at 10% 0%, rgba(0,212,255,.12), transparent 60%),
                radial-gradient(700px 280px at 90% 0%, rgba(0,119,255,.10), transparent 60%);
}

/* Spec list – bulletproof with Bootstrap */
.speclist{ display:grid; gap:.5rem; }
.spec{
    display:grid;
    grid-template-columns: 130px minmax(0,1fr);
    align-items:center;
    gap:.5rem;
    padding:.6rem .75rem;
    border:1px solid rgba(255,255,255,.08);
    border-radius:.75rem;
    background:rgba(255,255,255,.02);
}
.spec dt{ margin:0; font-weight:700; white-space:nowrap; }
.spec dd{ margin:0; font-weight:600; min-width:0; overflow-wrap:anywhere; }

/* Colour swatches */
.swatches{
    --size:16px;
    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);
}

/* Prevent button overflow in tight card footers */
.btn{ min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Helper */
.object-cover>img{ object-fit:cover; }