/* Lake Park Bicycles v4 homepage only. Loaded after /assets/lpb.css.
   Phones: tune-up packages, "why buy here" and the repair details are sideways strips (.hs) that slide
   as you scroll down (home.js pins them), and the repair details sit below the e-bike floor (DOM order).
   Desktop: flex order puts the repair details back right under the packages, same look as before. */

.hs-dots,.m-only{display:none}

@media (min-width:720px){
  .home main{display:flex;flex-direction:column}
  .home main>.hero,.home main>.doors,.home main>.svc{order:-2}
  .home main>.svc-more{order:-1}
  .home .svc{padding-bottom:0}
  .svc-more{padding:0 0 100px}
  .svc-more .svc-detail{margin-bottom:0}
  .svc-detail .online{grid-column:1/-1}
}

@media (max-width:719px){
  .m-only{display:grid}
  .svc{padding-bottom:40px}
  .pk-note{margin:14px 4px 0}
  .svc-more{padding:64px 0 56px}
  .svc-more .sec-head{margin-bottom:22px}

  /* the strip: native swipe with snap; home.js turns it into scroll-driven when the cards fit the screen */
  .hs-track{display:flex;gap:12px;align-items:stretch;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;
    margin:0 calc(-1 * var(--pad));padding:6px var(--pad) 26px;scroll-padding-inline:var(--pad)}
  .hs-track::-webkit-scrollbar{display:none}
  .hs-track>*{flex:0 0 86%;min-width:0;scroll-snap-align:start;margin:0}
  .hs.on .hs-track{scroll-snap-type:none;overflow-x:hidden;touch-action:pan-y}
  .hs.on .hs-pin{position:sticky;top:calc(var(--head-h) + 8px)}
  .hs-dots{display:flex;justify-content:center;gap:8px;margin-top:-10px}
  .hs-dots i{width:8px;height:8px;border-radius:50%;background:var(--line);transition:width .25s,background .25s}
  .hs-dots i.on{width:22px;border-radius:99px;background:var(--ink)}
  .on-dark .hs-dots i{background:rgba(255,255,255,.25)}
  .on-dark .hs-dots i.on{background:var(--hi)}

  /* packages: Full Tune-Up first (order:-1 from lpb.css), tighter cards */
  .pk-grid{margin-bottom:0}
  .pk,.pk.feat{padding:24px 20px 22px;gap:10px}
  .pk .amt{font-size:50px}
  .pk.feat .amt{font-size:64px}
  .pk .terms{font-size:14.5px}

  /* repair details: four panels in one strip */
  .svc-detail{margin-bottom:0}
  .ticket{padding:20px 18px}
  .ticket::before{left:-9px}
  .ticket::after{right:-9px}
  .ticket-h h3{font-size:23px}
  .fix{grid-template-columns:1fr 1fr;column-gap:14px}
  .fix li{grid-template-columns:24px 1fr;font-size:14.5px;padding:8px 0}
  .ticket .foot-note{font-size:14px}
  .checksheet{padding:22px 20px 20px}
  .checksheet li{padding:7px 0}
  .svc-photo{min-height:0}
  .online{display:flex;flex-direction:column;justify-content:space-between;padding:22px 20px;gap:18px}
  .online h3{font-size:25px}
  .online>div>p{font-size:15px}
  .promise{grid-template-columns:repeat(3,minmax(0,1fr));gap:0;padding-top:16px}
  .promise div,.promise div:first-child{border-bottom:0;padding:0 8px;border-left:1px solid rgba(255,255,255,.2);font-size:12.5px}
  .promise div:first-child{border-left:0;padding-left:0}
  .promise strong{font-size:22px;white-space:normal}
  .online .ctas{flex-direction:column;gap:10px}

  /* why buy here: three panels in one strip */
  .why-top{margin-bottom:32px}
  .why-grid .why-col:last-child{display:flex;grid-column:auto;align-items:stretch}
  .why-col{padding:24px 20px;gap:12px}
  .why-col .big{font-size:40px}
  .why-col h3{font-size:21px}
  .why-col p{font-size:15.5px}
  .why-col img,.why-col video{aspect-ratio:16/10}
  .why-foot{margin-top:28px;padding-top:26px}
}

/* ===== compare: card checkboxes, name buttons, table shows only the picked bikes ===== */
.count-row{display:flex;justify-content:space-between;align-items:baseline;gap:8px 20px;flex-wrap:wrap}
.cmp-jump{font-weight:700;font-size:15px;color:var(--ink);text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:4px;white-space:nowrap}
.cmpchk{position:relative;z-index:2;display:inline-flex;align-items:center;gap:8px;min-height:32px;cursor:pointer;font-weight:700;font-size:14px;color:var(--ink)}
.cmpchk input{appearance:none;-webkit-appearance:none;margin:0;width:20px;height:20px;flex:0 0 20px;border:2px solid var(--ink);border-radius:6px;background:var(--bg);display:grid;place-items:center;cursor:pointer;transition:background .15s,border-color .15s}
.cmpchk input::after{content:"";width:5px;height:10px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg) translate(-1px,-1px);opacity:0}
.cmpchk input:checked{background:var(--btn2);border-color:var(--btn2)}
.cmpchk input:checked::after{opacity:1}
.cmpchk input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cmp-pick{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.cmp-pick button{font:inherit;font-size:14px;font-weight:600;color:var(--ink);background:var(--bg);border:1.5px solid var(--line);border-radius:999px;padding:8px 14px;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:8px}
.cmp-pick button::before{content:"";width:8px;height:8px;border-radius:50%;border:1.5px solid currentColor;opacity:.5}
.cmp-pick button[aria-pressed="true"]{background:var(--dark);border-color:var(--dark);color:#fff}
.cmp-pick button[aria-pressed="true"]::before{background:var(--hi);border-color:var(--hi);opacity:1}
.cmp-pick button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
table.cmp{min-width:calc(196px + var(--n,4) * 190px)}
table.cmp .pr s{display:block;font-size:14px;font-weight:600;letter-spacing:0;color:var(--ink-2);margin-top:6px;font-stretch:100%}
.cmp-empty{padding:28px;border:1.5px dashed var(--line);border-radius:var(--r-lg);color:var(--ink-2);text-align:center}
@media (max-width:719px){
  .cmp-pick{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1 * var(--pad)) 14px;padding:2px var(--pad)}
  .cmp-pick::-webkit-scrollbar{display:none}
  table.cmp{min-width:calc(110px + var(--n,4) * 150px)}
  .card .row .cmpchk{min-height:36px;font-size:13.5px}
}

/* compare sits right under the e-bike grid, on the same grey, so it reads as one section */
.inv+.compare{background:var(--surface);padding-top:8px}
.inv+.compare .sec-head{border-top:1px solid var(--line);padding-top:56px}
@media (max-width:719px){.inv+.compare .sec-head{padding-top:40px}}
.inv:has(+.compare){padding-bottom:40px}