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

#page-bike { --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:#fff; line-height:1.6 }
#page-bike img { display:block; width:100% }
#page-bike .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-bike .btn { display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:13px 20px; border-radius:999px; font-weight:700; transition:.2s; border:0; cursor:pointer }
#page-bike .btn-primary:hover { background:var(--green-dark); transform:translateY(-2px) }
#page-bike .bike-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:32px }
#page-bike .bike-card { border:1px solid var(--border); border-radius:20px; overflow:hidden; background:#fff; transition:.2s }
#page-bike .bike-card:hover { transform:translateY(-4px); box-shadow:var(--shadow) }
#page-bike .bike-info { padding:19px }
#page-bike .cta { padding:0 0 80px }
#page-bike .check { display:flex; gap:11px; align-items:flex-start }
#page-bike .eyebrow:before { content:""; width:26px; height:2px; background:var(--yellow); border-radius:5px }
#page-bike h1 { font-size:clamp(38px,5vw,62px); letter-spacing:-.04em }
#page-bike h2 { font-size:clamp(30px,4vw,45px); letter-spacing:-.035em }
#page-bike h3 { font-size:21px }
#page-bike .btn-light:hover { transform:translateY(-2px); box-shadow:var(--shadow) }
#page-bike .section-head { margin-bottom:35px }
#page-bike .section-head p { max-width:650px; color:var(--muted); margin-top:12px }
#page-bike .bike-photo { height:220px; background:var(--green-soft); overflow:hidden }
#page-bike .bike-photo img { height:100%; object-fit:cover }
#page-bike .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-bike .cta-box:after { content:""; position:absolute; width:230px; height:230px; border-radius:50%; right:-60px; top:-100px; background:rgba(244,201,40,.14) }
#page-bike .cta-box p { color:rgba(255,255,255,.76); margin-top:9px }
#page-bike .cta-box .btn { position:relative; z-index:1; background:var(--yellow); color:#213127 }
#page-bike h1, #page-bike h2, #page-bike h3, #page-bike h4 { font-family:"Manrope",sans-serif; line-height:1.12 }
#page-bike .breadcrumb { padding:22px 0 0; color:var(--muted); font-size:14px }
#page-bike .breadcrumb a { color:var(--green); font-weight:600 }
#page-bike .detail { padding:35px 0 85px }
#page-bike .detail-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:55px; align-items:start }
#page-bike .gallery-main { height:535px; border-radius:28px; overflow:hidden; background:var(--green-soft); position:relative }
#page-bike .gallery-main img { height:100%; object-fit:cover }
#page-bike .photo-label { position:absolute; left:18px; top:18px; background:#fff; color:var(--green); font-size:12px; font-weight:800; padding:8px 12px; border-radius:999px }
#page-bike .thumbs { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:12px }
#page-bike .thumb { height:105px; border-radius:15px; overflow:hidden; border:2px solid transparent; background:var(--green-soft); cursor:pointer }
#page-bike .thumb.active { border-color:var(--yellow) }
#page-bike .thumb img { height:100%; object-fit:cover }
#page-bike .detail-copy { padding-top:8px }
#page-bike .detail-copy h1 { margin:13px 0 10px }
#page-bike .subtitle { color:var(--muted); font-size:17px; max-width:570px }
#page-bike .rating { display:inline-flex; align-items:center; gap:8px; margin:18px 0 22px; font-size:14px; color:#536058 }
#page-bike .rating span { background:var(--green-soft); color:var(--green); padding:6px 10px; border-radius:999px; font-weight:800 }
#page-bike .price-box { background:var(--green-soft); border-radius:20px; padding:21px 23px; display:flex; align-items:center; justify-content:space-between; gap:15px; margin-bottom:23px }
#page-bike .price-box strong { font-family:"Manrope"; font-size:30px; color:var(--green) }
#page-bike .price-box small { display:block; color:var(--muted); font-size:13px }
#page-bike .price-note { text-align:right; font-size:13px; color:var(--muted) }
#page-bike .spec-grid { display:grid; grid-template-columns:repeat(2,1fr); border:1px solid var(--border); border-radius:20px; overflow:hidden; margin-bottom:25px }
#page-bike .spec-item { padding:17px 18px; border-bottom:1px solid var(--border) }
#page-bike .spec-item:nth-child(odd) { border-right:1px solid var(--border) }
#page-bike .spec-item:nth-last-child(-n + 2) { border-bottom:0 }
#page-bike .spec-label { font-size:12px; color:var(--muted); display:block; margin-bottom:3px }
#page-bike .spec-value { font-weight:700 }
#page-bike .booking-box { border:1px solid var(--border); border-radius:20px; padding:22px; box-shadow:var(--shadow) }
#page-bike .booking-box h3 { margin-bottom:7px }
#page-bike .booking-box p { color:var(--muted); font-size:14px; margin-bottom:17px }
#page-bike .booking-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px }
#page-bike .booking-actions .btn { width:100% }
#page-bike .section { padding:80px 0 }
#page-bike .section.alt { background:var(--cream) }
#page-bike .content-grid { display:grid; grid-template-columns:1fr 1fr; gap:65px }
#page-bike .content-grid p { color:var(--muted); margin-top:15px }
#page-bike .check-list { display:grid; gap:13px; margin-top:20px }
#page-bike .check span { font-size:15px; color:#4f5b55 }
#page-bike .journey-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px }
#page-bike .journey-card { padding:27px; border:1px solid var(--border); border-radius:20px; background:#fff }
#page-bike .journey-number { font-family:"Manrope"; color:var(--green); font-size:14px; font-weight:800; margin-bottom:28px }
#page-bike .journey-card p { color:var(--muted); font-size:14px; margin-top:8px }
#page-bike .related { padding:80px 0 }
#page-bike .bike-info p { color:var(--muted); font-size:13px; margin:4px 0 15px }
#page-bike .bike-row { display:flex; justify-content:space-between; align-items:center; gap:10px }
#page-bike .bike-price { color:var(--green); font-family:"Manrope"; font-weight:800 }
#page-bike .bike-row .btn { padding:9px 14px; font-size:13px }

@media (max-width:900px) {
  #page-bike .detail-grid, #page-bike .content-grid { grid-template-columns:1fr; gap:35px }
  #page-bike .gallery-main { height:440px }
  #page-bike .journey-grid, #page-bike .bike-grid { grid-template-columns:1fr 1fr }
}

@media (max-width:620px) {
  #page-bike .container { width:min(100% - 28px,1180px) }
  #page-bike .cta { padding-bottom:55px }
  #page-bike .cta-box .btn { margin-top:23px }
  #page-bike .detail { padding-top:25px }
  #page-bike .gallery-main { height:310px; border-radius:20px }
  #page-bike .thumb { height:78px }
  #page-bike .spec-grid { grid-template-columns:1fr }
  #page-bike .spec-item:nth-child(odd) { border-right:0 }
  #page-bike .spec-item:nth-last-child(-n + 2) { border-bottom:1px solid var(--border) }
  #page-bike .spec-item:last-child { border-bottom:0 }
  #page-bike .booking-actions { grid-template-columns:1fr }
  #page-bike .section, #page-bike .related { padding:60px 0 }
  #page-bike .journey-grid, #page-bike .bike-grid { grid-template-columns:1fr }
}