/* Additions for the live site: notice bar, real photos, bike pages, legal pages. Uses the design's own tokens. */
.notice{margin:0;background:var(--volt);color:var(--ink);text-align:center;font-weight:600;padding:10px 16px;font-size:15px}
.notice:empty{display:none}
a.ph{text-decoration:none;color:inherit}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card h3 a{color:inherit;text-decoration:none}
.card h3 a:hover{text-decoration:underline}
.card:focus-within{outline:2px solid var(--blue);outline-offset:2px}

.pd{padding-top:var(--s3)}
.crumbs{font-size:14px;color:var(--muted);margin-bottom:var(--s3)}
.crumbs a{color:var(--ink)}
.pd-grid{display:grid;gap:var(--s4)}
.pd-main{position:relative;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;background:var(--chalk)}
.pd-main img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pd-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:8px}
.pd-thumbs img{aspect-ratio:1;object-fit:cover;border-radius:10px;width:100%}
.pd-kicker{color:var(--muted);font-size:15px;margin:0 0 6px}
.pd h1{font-size:clamp(48px,9vw,84px);color:var(--ink);margin:0 0 10px}
.pd .price b{font-size:34px}
.pd-stock{font-weight:600;margin:10px 0 0}
.pd-stock.in{color:#0B7A3E}
.pd-stock.out{color:#B42318}
.pd-desc{max-width:60ch;color:var(--text);margin:var(--s2) 0 0}
.pd-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--s3)}
.pd-buy{display:contents}
.pd-specs{width:100%;border-collapse:collapse;margin-top:var(--s3);font-size:15px}
.pd-specs caption{text-align:start;font-weight:700;color:var(--ink);padding-bottom:6px}
.pd-specs th{text-align:start;font-weight:400;color:var(--muted);width:40%;padding:9px 0;border-top:1px solid var(--line)}
.pd-specs td{padding:9px 0;border-top:1px solid var(--line)}
.pd-more{margin-top:var(--s5)}
@media (min-width:900px){.pd-grid{grid-template-columns:1.15fr 1fr;align-items:start}}

footer .legal{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:14px;margin:var(--s3) 0 0}
footer .legal a{color:inherit;opacity:.85}

.doc{max-width:760px;margin:0 auto;padding:var(--s4) 16px var(--s5)}
.doc h1{font-size:clamp(48px,9vw,80px);color:var(--ink);margin:0 0 8px}
.doc h2{font-size:21px;color:var(--ink);margin:var(--s4) 0 8px}
.doc p,.doc li{line-height:1.75;color:var(--text)}
.doc .upd{color:var(--muted);font-size:14px}
.doc table{width:100%;border-collapse:collapse;font-size:15px;margin:12px 0}
.doc th,.doc td{text-align:start;padding:8px;border-bottom:1px solid var(--line);vertical-align:top}
.doc .todo{background:#FFF4CC;border-radius:4px;padding:0 4px}

.skip{position:absolute;top:-60px;inset-inline-start:12px;z-index:1000;background:var(--volt);color:var(--ink);padding:10px 16px;border-radius:10px;font-weight:700;text-decoration:none}
.skip:focus{top:12px}
main:focus{outline:none}