/* bikes.css - styles scoped to #page-bikes */

#page-bikes { --green:#235c45; --green-dark:#173f30; --green-soft:#edf5f0; --yellow:#f4c928; --cream:#fbfcfa; --text:#1d2923; --muted:#68746e; --border:#e4ebe6; --white:#fff; --shadow:0 14px 40px rgba(27,65,48,.08); --radius:22px; font-family:"DM Sans",sans-serif; color:var(--text); background:var(--white); line-height:1.6 }
#page-bikes img { display:block; width:100% }
#page-bikes .hero { background:var(--green-soft); padding:82px 0 78px; position:relative; overflow:hidden }
#page-bikes .hero-grid { display:grid; grid-template-columns:1fr .85fr; gap:65px; align-items:center }
#page-bikes .eyebrow { display:inline-flex; align-items:center; gap:9px; color:var(--green); font-weight:700; font-size:13px; letter-spacing:.12em; text-transform:uppercase }
#page-bikes h1, #page-bikes h2, #page-bikes h3 { font-family:"Manrope",sans-serif; line-height:1.12 }
#page-bikes .btn { display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:13px 20px; border-radius:999px; font-weight:700; transition:.2s }
#page-bikes .btn-primary:hover { background:var(--green-dark); transform:translateY(-2px) }
#page-bikes .hero-image { position:relative }
#page-bikes .bike-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px }
#page-bikes .bike-card { border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; background:#fff; transition:.25s; box-shadow:0 5px 20px rgba(20,55,40,.03) }
#page-bikes .bike-card:hover { transform:translateY(-5px); box-shadow:var(--shadow) }
#page-bikes .bike-info { padding:21px }
#page-bikes .cta { padding:80px 0 }
#page-bikes .eyebrow:before { content:""; width:26px; height:2px; background:var(--yellow); border-radius:5px }
#page-bikes h1 { font-size:clamp(42px,6vw,72px); letter-spacing:-.04em }
#page-bikes h2 { font-size:clamp(31px,4vw,48px); letter-spacing:-.035em }
#page-bikes h3 { font-size:22px }
#page-bikes .btn-light:hover { transform:translateY(-2px); box-shadow:var(--shadow) }
#page-bikes .hero:after { content:""; position:absolute; width:300px; height:300px; border-radius:50%; background:rgba(244,201,40,.13); right:-100px; top:-130px }
#page-bikes .hero-copy p { max-width:620px; margin:22px 0 30px; color:var(--muted); font-size:18px }
#page-bikes .hero-actions { display:flex; gap:12px; flex-wrap:wrap }
#page-bikes .hero-image img { height:440px; object-fit:cover; border-radius:28px; box-shadow:var(--shadow) }
#page-bikes .floating-note { position:absolute; bottom:22px; left:-22px; background:#fff; padding:15px 18px; border-radius:17px; box-shadow:0 12px 35px rgba(0,0,0,.12); font-size:14px }
#page-bikes .floating-note strong { display:block; color:var(--green); font-size:17px }
#page-bikes .fleet { padding:86px 0 }
#page-bikes .section-head { display:flex; align-items:end; justify-content:space-between; gap:30px; margin-bottom:35px }
#page-bikes .section-head p { max-width:520px; color:var(--muted); margin-top:12px }
#page-bikes .filters { display:flex; gap:9px; flex-wrap:wrap; margin-bottom:30px }
#page-bikes .filter { border:1px solid var(--border); background:#fff; padding:9px 17px; border-radius:999px; font:inherit; font-weight:600; color:#59665f; cursor:pointer }
#page-bikes .filter.active, #page-bikes .filter:hover { background:var(--green); border-color:var(--green); color:#fff }
#page-bikes .bike-photo { height:245px; position:relative; overflow:hidden; background:#edf2ee }
#page-bikes .bike-photo img { height:100%; object-fit:cover; transition:.35s }
#page-bikes .bike-card:hover .bike-photo img { transform:scale(1.035) }
#page-bikes .tag { position:absolute; top:15px; left:15px; background:#fff; color:var(--green); font-size:12px; font-weight:800; padding:7px 11px; border-radius:999px }
#page-bikes .bike-top { display:flex; justify-content:space-between; gap:12px; align-items:start }
#page-bikes .bike-top h3 { font-size:21px }
#page-bikes .bike-type { font-size:13px; color:var(--muted); margin-top:3px }
#page-bikes .price { text-align:right; white-space:nowrap }
#page-bikes .price strong { font-family:"Manrope",sans-serif; color:var(--green); font-size:21px }
#page-bikes .price span { display:block; font-size:12px; color:var(--muted) }
#page-bikes .specs { display:flex; gap:7px; flex-wrap:wrap; border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:15px 0; margin:17px 0 }
#page-bikes .spec { font-size:12px; background:var(--green-soft); color:#4d5b54; padding:6px 9px; border-radius:8px }
#page-bikes .card-bottom { display:flex; gap:9px }
#page-bikes .card-bottom .btn { flex:1; padding:11px 13px; font-size:14px }
#page-bikes .trust { background:var(--cream); padding:82px 0 }
#page-bikes .trust-grid { display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center }
#page-bikes .trust-image img { height:450px; object-fit:cover; border-radius:26px }
#page-bikes .benefits { display:grid; gap:22px; margin-top:28px }
#page-bikes .benefit { display:flex; gap:15px }
#page-bikes .benefit-icon { width:44px; height:44px; flex:0 0 44px; border-radius:14px; background:var(--green-soft); display:grid; place-items:center; color:var(--green); font-weight:800 }
#page-bikes .benefit h3 { font-size:18px; margin-bottom:3px }
#page-bikes .benefit p { font-size:14px; color:var(--muted) }
#page-bikes .cta-box { background:var(--green); border-radius:28px; padding:58px 60px; display:flex; justify-content:space-between; align-items:center; gap:30px; color:#fff; position:relative; overflow:hidden }
#page-bikes .cta-box:after { content:""; position:absolute; width:230px; height:230px; border-radius:50%; right:-60px; top:-100px; background:rgba(244,201,40,.14) }
#page-bikes .cta-box p { color:rgba(255,255,255,.76); margin-top:9px }
#page-bikes .cta-box .btn { position:relative; z-index:1; background:var(--yellow); color:#213127 }
#page-bikes .footer p, #page-bikes .footer a { color:var(--muted); font-size:14px }

@media (max-width:900px) {
  #page-bikes .hero-grid, #page-bikes .trust-grid { grid-template-columns:1fr; gap:35px }
  #page-bikes .hero-image img { height:360px }
  #page-bikes .floating-note { left:15px }
  #page-bikes .bike-grid { grid-template-columns:repeat(2,1fr) }
}

@media (max-width:620px) {
  #page-bikes .container { width:min(100% - 28px,1180px) }
  #page-bikes .hero { padding:58px 0 55px }
  #page-bikes .hero-image img { height:300px; border-radius:20px }
  #page-bikes .section-head { display:block }
  #page-bikes .fleet, #page-bikes .trust { padding:60px 0 }
  #page-bikes .bike-grid { grid-template-columns:1fr }
  #page-bikes .bike-photo { height:230px }
  #page-bikes .cta { padding:55px 0 }
  #page-bikes .cta-box .btn { margin-top:23px }
}

/* Used by the fleet filter instead of setting element.style.display from JS. */
#page-bikes .bike-card.is-hidden { display:none }