/* Lake Park Bicycles v4 catalog pages: e-bikes, trikes, scooters, new bikes. Loads after /assets/lpb.css. */

/* intro */
.shop-head{padding-bottom:40px}
.shop-head .eyebrow{margin-bottom:12px}
.shop-stats{margin-top:36px}

/* inventory band: reuses the homepage .inv / .chooser / .grid */
.shop-inv{padding:56px 0 90px}
.shop-chooser{grid-template-columns:repeat(var(--n,6),minmax(0,1fr))}

/* catalog cards: colors line + note on the tag */
.card .cols{font-size:13px;color:var(--ink-2);font-weight:600}
.card .tag .s{display:block;font-size:9.5px;margin-top:4px;letter-spacing:.1em}
.card .tag:not(.sale) .s{opacity:.75}
.card.is-out .ph img{opacity:.55;filter:grayscale(.6)}
.card.is-out .tag .p{color:var(--ink-2)}
.outbadge{position:absolute;left:12px;top:12px;z-index:2;font-weight:800;font-size:12px;letter-spacing:.12em;text-transform:uppercase;padding:6px 10px;border-radius:999px;background:var(--ink);color:#fff}

/* brand copy */
.brand-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.bcol{background:var(--surface);border-radius:var(--r-lg);padding:32px 32px 30px;scroll-margin-top:calc(var(--head-h) + 16px)}
.bcol .sub-h{font-size:clamp(24px,2.1vw,32px);margin-bottom:16px}
.bcol p{color:var(--ink-2);font-size:16px}
.bcol p+p{margin-top:12px}
.bcol p .lnk{font-weight:600}

/* text blocks (trikes, scooters, new bikes) */
.shop-copy{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,72px);align-items:start}
.shop-copy h2{font-size:clamp(30px,3.3vw,50px);text-wrap:balance}
.shop-copy .txt p{color:var(--ink-2);font-size:17px}
.shop-copy .txt p+p,.shop-copy .txt ul+p,.shop-copy .txt p+ul{margin-top:14px}
.shop-copy .txt a:not(.btn){color:var(--ink);font-weight:700;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:4px}
.shop-copy .txt .checks{margin-top:14px}
.feat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.feat{background:var(--bg);border:1.5px solid var(--line);border-radius:var(--r-md);padding:24px 24px 22px}
.tint .feat{border-color:transparent}
.feat h3{font-size:19px;margin-bottom:8px;line-height:1.15}
.feat p{color:var(--ink-2);font-size:15px}

/* closing band */
.shop-cta{padding:0 0 100px}
.shop-cta-in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:center;padding:44px 48px}
.shop-cta-in h2{font-size:clamp(28px,3vw,44px);color:#fff;text-wrap:balance}
.shop-cta-in p{margin-top:10px}
.shop-cta-in .ctas{margin:0}

/* intro with a direct answer box (trikes, scooters) */
.head-split{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,64px);align-items:start;margin-top:18px}
.head-split .lead{margin-top:0}
.answer{background:var(--surface);border-left:4px solid var(--detail);border-radius:0 var(--r-md) var(--r-md) 0;padding:20px 24px;font-size:16px;color:var(--ink-2)}
.answer strong{color:var(--ink)}
.answer a{color:var(--ink);font-weight:700}

/* featured model: big stage + text */
.feature{padding:24px 0 100px}
.feature-in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,4vw,64px);align-items:center}
.stage{position:relative;border-radius:var(--r-lg);background:var(--surface-2);overflow:hidden;aspect-ratio:4/3}
.stage::before{content:"";position:absolute;left:0;right:0;top:0;height:8px;background:var(--dark);z-index:1}
.stage>img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.stage .tag-wrap{right:26px;top:30px}
.stage .tag-wrap::before{top:-20px}
.stage .tag-wrap .string{top:-14px;height:26px}
.stage .tag{width:150px;padding:34px 10px 22px}
.stage .tag .p{font-size:34px}
.stage .tag .n{font-size:12.5px;margin-top:6px}
.stage .tag .s{font-size:10px;margin-top:5px}
.stage .salebadge{left:20px;top:24px}
.feature-txt .badge{margin-bottom:18px}
.feature-txt .eyebrow{display:block}
.feature-txt .sub-h{margin-bottom:16px}
.feature-txt p{color:var(--ink-2);font-size:16.5px}
.price-line{display:flex;align-items:baseline;flex-wrap:wrap;gap:12px;margin:22px 0 4px}
.price-line b{font-stretch:125%;font-weight:800;font-size:clamp(40px,4vw,56px);letter-spacing:-.03em;line-height:1;color:var(--price)}
.price-line s{font-size:20px;color:var(--ink-2);font-weight:700}
.price-line span{font-size:15px;color:var(--ink-2);font-weight:600}
.feature-txt p.small{font-size:14.5px;margin-bottom:22px}

/* video + text */
.built{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(28px,5vw,88px);align-items:center}
.built video{width:100%;max-width:420px;aspect-ratio:9/16;object-fit:cover;border-radius:var(--r-lg);background:var(--surface-2)}
.built-txt p{color:var(--ink-2);font-size:17px;max-width:40em}
.built-txt p+p{margin-top:14px}
.built-txt .sub-h{margin-bottom:18px}
.built-txt .ctas{margin-top:26px}

/* 3-up card grid + photo promo card */
.grid.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.card.promo .ph img{left:0;bottom:0;width:100%;height:100%;object-fit:cover;mix-blend-mode:normal}
.card.promo .row .lnk{position:relative;z-index:2}

/* scooters */
.sc-head-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,4vw,64px);align-items:center}
.sc-head h1{max-width:9em}
.sc-head .lead strong{color:var(--ink)}
.sc-ctas{margin-top:28px}
.stage.photo>img{object-fit:cover;mix-blend-mode:normal}
.stage.photo{aspect-ratio:16/10}
.pk-grid.two{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:stretch}
.pk .amt .sub{font-size:18px;font-weight:600;letter-spacing:0;font-stretch:100%;color:var(--on-dark-2);margin-left:10px;vertical-align:middle}
.pk button.btn{align-self:flex-start;margin-top:10px}
.sc-pdp{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,4vw,64px);align-items:start}
.sc-main{border-radius:var(--r-lg);overflow:hidden;background:var(--surface-2);aspect-ratio:4/3}
.sc-main img{width:100%;height:100%;object-fit:cover}
.sc-thumbs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:10px}
.sc-thumbs .th{appearance:none;border:2px solid transparent;border-radius:12px;padding:0;overflow:hidden;cursor:pointer;background:var(--surface-2);aspect-ratio:1}
.sc-thumbs .th img{width:100%;height:100%;object-fit:cover}
.sc-thumbs .th.on{border-color:var(--ink)}
.sc-thumbs .th:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.sc-assure{margin-top:22px}
.sc-note{margin-top:28px}
.sc-locs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.sc-locs figure{margin:0}
.sc-locs img{width:100%;aspect-ratio:5/6;object-fit:cover;border-radius:var(--r-md)}
.sc-locs figcaption{font-size:14px;font-weight:600;margin-top:8px}
.sc-illus{font-size:13px;color:var(--ink-2);margin-top:16px}
.sc-rules-h{font-size:20px;margin-bottom:6px}
.sc-rules li{font-weight:500;color:var(--ink-2);padding-top:7px;padding-bottom:7px}
.sc-rules li strong{color:var(--ink)}

/* reserve modal (markup and ids from v3, opened by openReserve()) */
.rmodal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:16px}
.rmodal[hidden]{display:none}
.rmodal-ov{position:absolute;inset:0;background:rgba(var(--scrim),.6)}
.rmodal-card{position:relative;background:var(--bg);border-radius:var(--r-lg);width:min(560px,100%);max-height:calc(100vh - 32px);overflow:auto;padding:28px 28px 24px;box-shadow:0 30px 80px -20px rgba(var(--scrim),.6)}
.rmodal-x{position:absolute;top:14px;right:14px;width:40px;height:40px;border-radius:50%;border:1.5px solid var(--line);background:var(--bg);font-size:24px;line-height:1;cursor:pointer;color:var(--ink)}
.rmodal-head{display:grid;grid-template-columns:84px minmax(0,1fr);gap:16px;align-items:center;margin-bottom:18px;padding-right:44px}
.rmodal-head img{width:84px;height:84px;object-fit:cover;border-radius:12px;background:var(--surface)}
.rm-eyebrow{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.rmodal-head h3{font-size:24px;margin:2px 0}
.rm-price{font-size:14px;font-weight:700;color:var(--price)}
.rform .lbl-cap{display:block}
.rform .rform-2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
.rform .sms-consent{grid-template-columns:22px minmax(0,1fr);align-items:start;gap:10px;font-weight:500;font-size:12.5px;color:var(--ink-2);line-height:1.45}
.rform .sms-consent input{width:18px;height:18px;margin-top:2px;accent-color:var(--btn)}
.rform .sms-consent a{color:var(--ink)}
.rform button[type=submit]{background:var(--btn);color:var(--btn-ink);border-color:var(--btn);justify-self:start}
.rform-note{font-size:13px;color:var(--ink-2)}

/* new bikes */
.rs-why{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
.rs-why .feature-txt p+p{margin-top:14px}
.rs-why .ctas{margin-top:26px}
.rs-photo img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-lg)}
.shop-pedal{padding:0 0 80px}
.card .tag.msrp .p{font-size:19px;letter-spacing:-.04em}

@media (max-width:1180px){
  .shop-chooser{grid-template-columns:repeat(3,minmax(0,1fr))}
  .brand-grid{grid-template-columns:1fr}
  .feat-grid{grid-template-columns:1fr 1fr}
  .sc-locs{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:900px){
  .rs-why,.shop-copy,.shop-cta-in,.head-split,.feature-in,.built,.sc-head-in,.sc-pdp,.pk-grid.two{grid-template-columns:1fr}
  .built video{max-width:300px}
  .grid.g3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid.g3 .promo{grid-column:1/-1}
  .grid.g3 .promo .ph{padding-bottom:52%}
}
@media (max-width:640px){
  .shop-head{padding-bottom:24px}
  .shop-inv{padding:36px 0 64px}
  .shop-chooser{grid-template-columns:repeat(2,minmax(0,1fr))}
  .card .tag .s{display:none}
  .card .tag.msrp{width:86px}
  .card .tag.msrp .p{font-size:14.5px}
  .card .cols{font-size:12px}
  .outbadge{left:6px;top:auto;bottom:8px;font-size:9.5px;padding:4px 7px;letter-spacing:.08em}
  .bcol{padding:24px 20px}
  .feat-grid{grid-template-columns:1fr}
  .shop-cta{padding-bottom:64px}
  .shop-cta-in{padding:30px 22px}
  .feature{padding-bottom:64px}
  .stage .tag-wrap{right:14px;top:24px}
  .stage .tag{width:112px;padding:28px 8px 16px}
  .stage .tag .p{font-size:25px}
  .answer{padding:16px 18px;font-size:15px}
  .sc-locs{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .pk-grid.two .ribbon{position:static;align-self:flex-start}
  .pk .amt .sub{display:block;margin:8px 0 0;font-size:15px}
  .stage.photo{aspect-ratio:4/3}
  .sc-thumbs{gap:6px}
  .rmodal-card{padding:22px 18px 18px}
  .rform .rform-2{grid-template-columns:1fr}
}