/* ============================================================================
   THINK2PRINT3D — shop-by-bike design (design/think2print3d-shop-by-bike.html)
   Loaded after css/styles.css and css/shop.css.

   1. MOCKUP — the mockup's CSS copied as-is, classes prefixed "b-" so they
      can't collide with Tailwind or the older classes. Its CSS-drawn parts
      (.m-*) are gone; real photos replace them (see "PHOTOS").
   2. ADDITIONS — real photos, search, menu, tap targets, focus, states.
   3. SHOP PAGES — re-themes the shop / product / cart / inner pages (s-*
      classes from css/shop.css) to this palette.
   ============================================================================ */
body{font-family:Inter,"Helvetica Neue",Arial,sans-serif;background:#fff;color:var(--b-ink);-webkit-font-smoothing:antialiased;overflow-x:hidden}

/* ── 1. MOCKUP ──────────────────────────────────────────────────────────── */
:root{--b-bg:#f5f5f5;--b-ink:#0a0a0a;--b-sub:#666;--b-line:#e3e3e3;--blue:#1d3bb5;--b-a:#c4f53a}
.b-wrap{max-width:1360px;margin:0 auto;padding:0 32px}
@media(max-width:700px){.b-wrap{padding:0 16px}}
.b-header{position:sticky;top:0;z-index:30;background:#fff;border-bottom:1px solid var(--b-line)}
.b-hin{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:76px}
.b-nav{display:flex;gap:22px;font-size:15px;font-weight:600;color:#444}
.b-nav a.on{color:#000}
.b-logo{font:900 italic 34px/1 Inter;letter-spacing:-.07em;text-transform:uppercase;white-space:nowrap}
.b-icons{display:flex;gap:18px;justify-content:flex-end;align-items:center}
.b-icons svg{width:21px;height:21px;stroke:#111;fill:none;stroke-width:1.7}
.b-cart{position:relative}
.b-cart b{position:absolute;top:-7px;right:-9px;min-width:17px;height:17px;border-radius:9px;background:var(--blue);color:#fff;font:700 10px Inter;display:none;place-items:center;padding:0 4px}
.b-cart b.on{display:grid}
.b-search{display:flex;justify-content:center;padding-bottom:12px}
.b-search label{display:flex;align-items:center;width:min(560px,100%);height:36px;border:1px solid #999;border-radius:4px;overflow:hidden}
.b-search input{flex:1;height:100%;padding:0 10px;font-size:13px;font-style:italic;outline:none}
.b-search span{width:40px;height:100%;background:#e9e9e9;display:grid;place-items:center;border-left:1px solid #999}
.b-search svg{width:16px;height:16px;stroke:#333;fill:none;stroke-width:2}
.b-burger{display:none}
@media(max-width:860px){.b-nav{display:none}.b-burger{display:block}.b-logo{font-size:24px}.b-hin{height:62px}}
.b-hero{position:relative;height:min(62vh,560px);min-height:380px;overflow:hidden;color:#fff;display:grid;place-items:center;text-align:center;background:#1a1a1a}
.b-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.55)}
.b-hero .b-in{position:relative}
.b-hero h1{font:800 italic clamp(30px,4vw,48px)/1 Inter;letter-spacing:-.03em;text-shadow:0 2px 20px rgba(0,0,0,.35)}
.b-hero .b-btn{display:inline-block;margin-top:28px;border:1.5px solid #fff;border-radius:8px;padding:16px 70px;font:600 italic 14px Inter;transition:.2s}
.b-hero .b-btn:hover{background:#fff;color:#000}
.b-sbb{background:var(--b-bg);background-image:linear-gradient(#e7e7e7 1px,transparent 1px),linear-gradient(90deg,#e7e7e7 1px,transparent 1px);background-size:40px 40px;padding:80px 0 70px;border-bottom:1px solid var(--b-line)}
.b-eyebrow{display:flex;align-items:center;gap:12px;font:800 italic 12px Inter;letter-spacing:.06em;text-transform:uppercase;color:var(--blue)}
.b-eyebrow:before{content:"";width:34px;height:2px;background:var(--blue)}
.b-sbb h2{font:900 clamp(52px,7vw,96px)/.9 Inter;letter-spacing:-.04em;text-transform:uppercase;margin-top:18px}
.b-sbb h2 span{color:var(--blue);text-shadow:0 0 30px rgba(29,59,181,.35)}
.b-toprow{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.b-sub{font:italic 500 16px/1.5 Inter;color:#555;margin-top:14px;max-width:440px}
.b-meta{display:flex;align-items:center;gap:8px;font:600 italic 11px Inter;letter-spacing:.12em;text-transform:uppercase;color:#666}
.b-meta i{width:8px;height:8px;border-radius:50%;background:var(--blue)}
.b-tabs{display:inline-flex;background:#fff;border:1px solid var(--b-line);border-radius:999px;padding:4px;margin-top:30px}
.b-tabs button{height:40px;padding:0 22px;border-radius:999px;font:800 italic 14px Inter;text-transform:uppercase;letter-spacing:-.01em;color:#666;transition:.2s}
.b-tabs button.on{background:var(--b-ink);color:#fff}
.b-rail{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:26px 32px 22px;margin:0 -32px;scrollbar-width:none;scroll-padding:0 32px}
.b-rail::-webkit-scrollbar{display:none}
@media(max-width:700px){.b-rail{padding:22px 16px 18px;margin:0 -16px;gap:12px;scroll-padding:0 16px}}
.b-bk{flex:0 0 300px;height:430px;border-radius:12px;position:relative;overflow:hidden;scroll-snap-align:start;color:#fff;background:#222;text-align:left;transition:transform .3s,box-shadow .3s,outline-color .2s;outline:3px solid transparent;outline-offset:3px}
.b-bk:hover{transform:translateY(-4px)}
.b-bk.on{outline-color:var(--blue);box-shadow:0 20px 40px -20px rgba(29,59,181,.6)}
.b-bk img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s}
.b-bk:hover img{transform:scale(1.05)}
.b-bk img.cut{object-fit:contain;padding:30px 10px 90px;background:radial-gradient(70% 60% at 50% 40%,#3a3a3e,#151517)}
.b-bk .b-ph{position:absolute;inset:0;display:grid;place-items:center;background:var(--g)}
.b-bk .b-ph span{font:900 italic 150px/1 Inter;letter-spacing:-.08em;color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.18)}
.b-bk:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.75))}
.b-bk .b-lbl{position:absolute;left:16px;top:16px;z-index:2;background:#fff;color:#000;font:800 italic 11px Inter;text-transform:uppercase;padding:7px 10px;border-radius:3px}
.b-bk .b-bt{position:absolute;left:22px;right:22px;bottom:22px;z-index:2}
.b-bk small{font:600 italic 11px Inter;letter-spacing:.14em;text-transform:uppercase;opacity:.85}
.b-bk b{display:block;font:800 italic 27px/1.05 Inter;letter-spacing:-.03em;margin-top:6px}
.b-bk .b-cnt{display:flex;justify-content:space-between;align-items:center;margin-top:12px;font:600 13px Inter;opacity:.9}
.b-bk .b-cnt i{width:30px;height:30px;border-radius:50%;background:#fff;color:#000;display:grid;place-items:center;font-style:normal;font-size:14px;transition:transform .3s}
.b-bk.on .b-cnt i{transform:rotate(90deg);background:var(--blue);color:#fff}
@media(max-width:700px){.b-bk{flex:0 0 64%;height:270px}.b-bk b{font-size:22px}}
.b-arrows{display:flex;gap:10px}
.b-arrows button{width:44px;height:44px;border-radius:50%;background:#fff;border:1px solid var(--b-line);display:grid;place-items:center;font-size:18px;transition:.2s;box-shadow:0 2px 6px rgba(0,0,0,.06)}
.b-arrows button:hover{background:var(--b-ink);color:#fff}
@media(max-width:700px){.b-arrows{display:none}}
.b-drop{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s cubic-bezier(.2,.8,.2,1)}
.b-drop.open{grid-template-rows:1fr}
.b-drop>div{overflow:hidden}
.b-panel{margin-top:8px;background:#fff;border:1px solid var(--b-line);border-radius:12px;box-shadow:0 30px 60px -40px rgba(0,0,0,.35);position:relative}
.b-panel:before{content:"";position:absolute;top:-9px;left:var(--arrow,60px);width:16px;height:16px;background:#fff;border-left:1px solid var(--b-line);border-top:1px solid var(--b-line);transform:rotate(45deg);transition:left .4s cubic-bezier(.2,.8,.2,1)}
.b-ph2{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;padding:22px 26px;border-bottom:1px solid var(--b-line)}
.b-ph2 h3{font:900 italic clamp(24px,3vw,36px)/1 Inter;letter-spacing:-.04em;text-transform:uppercase}
.b-ph2 h3 span{color:var(--blue)}
.b-ph2 p{font:500 italic 14px Inter;color:#666;margin-top:4px}
.b-fchips{display:flex;gap:6px;flex-wrap:wrap}
.b-fchips button{height:34px;padding:0 14px;border-radius:999px;border:1px solid var(--b-line);font:700 italic 12px Inter;text-transform:uppercase;transition:.2s}
.b-fchips button.on{background:var(--b-ink);color:#fff;border-color:var(--b-ink)}
.b-close{width:36px;height:36px;border-radius:50%;border:1px solid var(--b-line);font-size:16px;display:grid;place-items:center}
.b-list{padding:4px 26px 10px}
.b-row{display:grid;grid-template-columns:84px 1fr auto auto;gap:18px;align-items:center;padding:16px 0;border-bottom:1px solid #f0f0f0;opacity:0;transform:translateY(-8px)}
.b-drop.open .b-row{animation:rowIn .45s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i)*60ms + 150ms)}
@keyframes rowIn{to{opacity:1;transform:none}}
.b-row:last-child{border-bottom:0}
.b-th{width:84px;height:84px;border-radius:8px;background:radial-gradient(70% 70% at 50% 40%,#fff,#ececec);border:1px solid #eee;display:grid;place-items:center;overflow:hidden}
.b-row .b-nm b{display:block;font:800 italic 17px Inter;letter-spacing:-.025em}
.b-row .b-nm span{font:500 13px Inter;color:#666}
.b-row .b-tag{display:inline-block;margin-left:8px;font:800 italic 10px Inter;text-transform:uppercase;padding:3px 7px;border-radius:3px;vertical-align:2px}
.b-row .b-nm .b-tag.best{background:var(--b-ink);color:#fff}
.b-row .b-nm .b-tag.soon{background:#eee;color:#666}
.b-row .b-nm .b-tag.uni{background:#e8ecff;color:var(--blue)}
.b-row .b-pr{font:700 17px Inter;white-space:nowrap}
.b-row .b-add{height:42px;padding:0 18px;border-radius:6px;background:var(--b-ink);color:#fff;font:700 italic 13px Inter;text-transform:uppercase;transition:.2s;white-space:nowrap}
.b-row .b-add:hover{background:var(--blue)}
.b-row .b-add[disabled]{background:#eee;color:#666;cursor:default}
.b-row .b-add.done{background:var(--blue)}
.b-pfoot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:18px 26px;background:#fafafa;border-top:1px solid var(--b-line);border-radius:0 0 12px 12px;font:500 italic 14px Inter;color:#666}
.b-pfoot a{font:800 italic 13px Inter;text-transform:uppercase;color:var(--b-ink);border-bottom:2px solid var(--b-ink)}
@media(max-width:700px){.b-ph2{padding:18px}.b-list{padding:0 14px 6px}.b-pfoot{padding:16px 18px}.b-row{grid-template-columns:64px 1fr auto;gap:12px;padding:14px 0}.b-th{width:64px;height:64px}.b-row .b-pr{grid-column:2;grid-row:2;font-size:15px;margin-top:-8px}.b-row .b-add{grid-column:3;grid-row:1/3;width:44px;height:44px;padding:0;border-radius:50%;font-size:0}.b-row .b-add:before{content:'+';font:500 24px/1 Inter}.b-row .b-add.done:before{content:'✓';font-size:18px}.b-row .b-add[disabled]:before{content:'🔔';font-size:16px}.b-row .b-tag{margin:4px 6px 0 0}.b-row .b-nm b{line-height:1.2}.b-row .b-nm b{font-size:15px}}
.b-hint{margin-top:10px;font:600 italic 14px Inter;color:#666;display:flex;align-items:center;gap:8px}
.b-hint i{width:22px;height:22px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font-style:normal;font-size:12px;animation:nudge 1.4s ease-in-out infinite}
@keyframes nudge{50%{transform:translateY(-3px)}}
.b-bs{padding:80px 0 0;background:#fff}
.b-bs .b-hdr{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:26px}
.b-bs h2{font:900 clamp(40px,5.4vw,72px)/.9 Inter;letter-spacing:-.04em;text-transform:uppercase}
.b-bs h2 span{color:var(--blue)}
.b-viewall{font:800 italic 13px Inter;text-transform:uppercase;border-bottom:2px solid var(--b-ink);padding-bottom:2px}
.b-tabs2{display:flex;gap:8px;margin-bottom:22px;overflow-x:auto;scrollbar-width:none}
.b-tabs2::-webkit-scrollbar{display:none}
.b-tabs2 button{flex:none;height:38px;padding:0 16px;border-radius:999px;border:1px solid var(--b-line);font:800 italic 12px Inter;text-transform:uppercase}
.b-tabs2 button.on{background:var(--b-ink);color:#fff;border-color:var(--b-ink)}
.b-pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
@media(max-width:900px){.b-pgrid{grid-template-columns:repeat(2,1fr)}}
.b-pc{display:block;cursor:pointer}
.b-pc .b-im{position:relative;aspect-ratio:1;border-radius:6px;overflow:hidden;background:radial-gradient(70% 70% at 50% 40%,#fff,#ececec);display:grid;place-items:center;border:1px solid #eee}
.b-pc .b-im .b-bdg{position:absolute;right:10px;top:10px;background:#fff;border-radius:999px;padding:5px 11px;font:700 italic 12px Inter;box-shadow:0 1px 4px rgba(0,0,0,.12)}
.b-pc .b-im .b-bdg.dk{background:var(--b-ink);color:#fff}
.b-pc .b-im .b-qa{position:absolute;left:10px;right:10px;bottom:10px;height:42px;border-radius:6px;background:var(--b-ink);color:#fff;font:700 italic 13px Inter;text-transform:uppercase;opacity:0;transform:translateY(8px);transition:.25s}
.b-pc:hover .b-im .b-qa{opacity:1;transform:none}
@media(hover:none){.b-pc .b-im .b-qa{display:none}}
.b-pc .b-nm{font:800 italic 16px/1.2 Inter;letter-spacing:-.02em;margin-top:10px}
.b-pc .b-pr{font:500 15px Inter;margin-top:4px;color:#222}
.b-pc .b-pr s{color:#666;margin-left:6px}
.b-pc .b-ft{font:600 italic 11px Inter;letter-spacing:.08em;text-transform:uppercase;color:#666;margin-top:12px}
@media(max-width:700px){.b-pc .b-nm{font-size:14px}}
.b-split{display:grid;grid-template-columns:1.3fr 1fr;gap:8px}
.b-big{position:relative;border-radius:8px;overflow:hidden;min-height:520px;color:#fff;display:flex;flex-direction:column;justify-content:flex-end;padding:34px}
.b-big img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.b-big:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.8))}
.b-big>*{position:relative;z-index:1}
.b-big small{font:700 italic 12px Inter;letter-spacing:.14em;text-transform:uppercase;opacity:.85}
.b-big h3{font:900 italic clamp(34px,4.2vw,58px)/.92 Inter;letter-spacing:-.04em;text-transform:uppercase;margin-top:10px}
.b-big p{max-width:420px;margin-top:12px;font:500 15px/1.5 Inter;opacity:.9}
.b-big a{margin-top:22px;width:max-content;border:1.5px solid #fff;border-radius:8px;padding:14px 34px;font:700 italic 13px Inter;text-transform:uppercase;transition:.2s}
.b-big a:hover{background:#fff;color:#000}
.b-stack{display:grid;gap:8px}
.b-mini{border-radius:8px;padding:30px;display:flex;flex-direction:column;justify-content:space-between;min-height:256px}
.b-mini.bl{background:var(--blue);color:#fff}
.b-mini.gr{background:var(--b-bg);background-image:linear-gradient(#e7e7e7 1px,transparent 1px),linear-gradient(90deg,#e7e7e7 1px,transparent 1px);background-size:30px 30px}
.b-mini h4{font:900 italic clamp(26px,2.8vw,38px)/.95 Inter;letter-spacing:-.04em;text-transform:uppercase}
.b-mini p{font:500 14px/1.5 Inter;opacity:.85;margin-top:8px;max-width:300px}
.b-mini a{font:800 italic 13px Inter;text-transform:uppercase;border-bottom:2px solid currentColor;width:max-content;padding-bottom:2px}
@media(max-width:900px){.b-split{grid-template-columns:1fr}.b-big{min-height:440px;padding:24px}.b-mini{min-height:200px;padding:24px}}
.b-why{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--b-line);border-bottom:1px solid var(--b-line);margin-top:80px}
.b-why div{padding:30px 26px;border-right:1px solid var(--b-line)}
.b-why div:last-child{border-right:0}
.b-why b{display:block;font:900 italic 18px Inter;letter-spacing:-.03em;text-transform:uppercase}
.b-why span{font:500 14px/1.5 Inter;color:#666;margin-top:6px;display:block}
.b-why i{display:block;width:26px;height:3px;background:var(--blue);margin-bottom:16px}
@media(max-width:900px){.b-why{grid-template-columns:1fr 1fr}.b-why div:nth-child(2){border-right:0}.b-why div:nth-child(-n+2){border-bottom:1px solid var(--b-line)}}
.b-footer{background:var(--b-ink);color:#fff;margin-top:0;padding:60px 0 28px}
.b-fg{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:30px}
.b-fg .b-logo{font-size:28px;color:#fff}
.b-fg p{color:#666;font:500 14px/1.6 Inter;margin-top:12px;max-width:300px}
.b-fg h5{font:800 italic 13px Inter;text-transform:uppercase;margin-bottom:14px;color:#fff}
.b-fg a{display:block;color:#666;font:500 14px Inter;padding:5px 0}
.b-fg a:hover{color:#fff}
.b-fb{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-top:50px;padding-top:22px;border-top:1px solid #222;color:#666;font:500 12px Inter}
@media(max-width:800px){.b-fg{grid-template-columns:1fr 1fr}.b-fg>div:first-child{grid-column:1/-1}}
.b-pc .b-im{--mx:50%;--my:40%;--rx:0deg;--ry:0deg;transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));transform-style:preserve-3d;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s;box-shadow:0 1px 0 rgba(0,0,0,.04)}
.b-pc:hover .b-im{box-shadow:0 30px 50px -28px rgba(29,59,181,.45),0 12px 24px -16px rgba(0,0,0,.25)}
.b-pc .b-im:before{content:"";position:absolute;left:18%;right:18%;bottom:12%;height:22%;border-radius:50%;background:radial-gradient(closest-side,rgba(196,245,58,.55),rgba(196,245,58,0));filter:blur(14px);opacity:.55;transition:opacity .35s,transform .35s;z-index:0}
.b-pc:hover .b-im:before{opacity:1;transform:scale(1.15)}
.b-pc .b-im:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(420px circle at var(--mx) var(--my),rgba(255,255,255,.75),rgba(255,255,255,0) 45%);mix-blend-mode:soft-light;opacity:0;transition:opacity .3s;z-index:3}
.b-pc:hover .b-im:after{opacity:1}
.b-pc .b-im .b-bdg,.b-pc .b-im .b-qa{z-index:4;transform:translateZ(50px)}
.b-th{position:relative;box-shadow:inset 0 1px 0 #fff,0 8px 16px -10px rgba(0,0,0,.3)}
.b-th:before{content:"";position:absolute;left:22%;right:22%;bottom:16%;height:20%;border-radius:50%;background:radial-gradient(closest-side,rgba(196,245,58,.6),transparent);filter:blur(6px)}
.b-row:hover .b-th{box-shadow:inset 0 1px 0 #fff,0 14px 24px -12px rgba(29,59,181,.5)}
@media(prefers-reduced-motion:reduce){.b-pc .b-im{transform:none!important}}
.b-pc .b-im img.inst{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.08);transition:opacity .45s,transform .7s cubic-bezier(.2,.7,.2,1);z-index:2;border-radius:inherit}
.b-pc:hover .b-im img.inst,.b-pc.show .b-im img.inst{opacity:1;transform:scale(1)}
.b-pc .b-im .b-onb{position:absolute;left:10px;top:10px;z-index:4;display:flex;align-items:center;gap:6px;background:rgba(10,10,10,.75);color:#fff;backdrop-filter:blur(6px);border-radius:999px;padding:5px 10px 5px 6px;font:700 italic 11px Inter;transform:translateZ(50px)}
.b-pc .b-im .b-onb i{width:16px;height:16px;border-radius:50%;background:var(--b-a);display:grid;place-items:center;font-style:normal;color:#000;font-size:9px}
.b-pc:hover .b-im .b-onb b,.b-pc.show .b-im .b-onb b{display:none}
.b-pc .b-im .b-onb em{display:none;font-style:italic}
.b-pc:hover .b-im .b-onb em,.b-pc.show .b-im .b-onb em{display:inline}
.b-tt{background:var(--b-ink);color:#fff;padding:80px 0 70px;margin-top:80px;overflow:hidden}
.b-tt .b-hdr{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:26px}
.b-tt h2{font:900 clamp(40px,5.4vw,72px)/.9 Inter;letter-spacing:-.04em;text-transform:uppercase}
.b-tt h2 span{color:var(--b-a)}
.b-tt .b-eyebrow{color:var(--b-a)}
.b-tt .b-eyebrow:before{background:var(--b-a)}
.b-tt .b-follow{display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 20px;border-radius:999px;background:#fff;color:#000;font:800 italic 13px Inter;text-transform:uppercase}
.b-tt .b-follow svg{width:16px;height:16px}
.b-vids{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 32px 10px;margin:0 -32px;scrollbar-width:none}
.b-vids::-webkit-scrollbar{display:none}
@media(max-width:700px){.b-vids{padding:6px 16px 10px;margin:0 -16px}}
.b-vid{flex:0 0 260px;aspect-ratio:9/16;border-radius:14px;position:relative;overflow:hidden;scroll-snap-align:start;cursor:pointer;background:#111}
.b-vid:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35),transparent 25%,transparent 55%,rgba(0,0,0,.85))}
.b-vid>*:not(img){position:absolute;z-index:2}
.b-vid .b-top{left:12px;right:12px;top:12px;display:flex;justify-content:space-between;align-items:center;font:700 12px Inter}
.b-vid .b-top span{display:flex;align-items:center;gap:6px}
.b-vid .b-top i{width:22px;height:22px;border-radius:50%;background:#fff;color:#000;display:grid;place-items:center;font:900 italic 9px Inter}
.b-vid .b-bar{left:12px;right:12px;top:44px;height:3px;border-radius:2px;background:rgba(255,255,255,.25);overflow:hidden}
.b-vid .b-bar b{display:block;height:100%;width:0;background:#fff}
.b-vid:hover .b-bar b,.b-vid.play .b-bar b{animation:prog 8s linear infinite}
@keyframes prog{to{width:100%}}
.b-vid .b-play{left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;background:rgba(255,255,255,.2);backdrop-filter:blur(8px);display:grid;place-items:center;transition:.3s}
.b-vid .b-play:after{content:"";border-left:16px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:4px}
.b-vid:hover .b-play,.b-vid.play .b-play{opacity:0;transform:scale(1.4)}
.b-vid .b-side{right:10px;bottom:120px;display:flex;flex-direction:column;gap:14px;align-items:center;font:700 11px Inter}
.b-vid .b-side svg{width:26px;height:26px;fill:#fff;filter:drop-shadow(0 2px 4px rgba(0,0,0,.4))}
.b-vid .b-cap{left:14px;right:52px;bottom:62px;font:600 13px/1.35 Inter}
.b-vid .b-cap b{display:block;font:800 13px Inter;margin-bottom:4px}
.b-vid .b-shop{left:12px;right:12px;bottom:12px;display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.95);color:#000;border-radius:10px;padding:7px 8px 7px 7px}
.b-vid .b-shop .b-mm{width:34px;height:34px;border-radius:7px;background:radial-gradient(#fff,#e6e6e6);display:grid;place-items:center;flex:none;overflow:hidden}
.b-vid .b-shop span{font:800 italic 12px/1.15 Inter;flex:1}
.b-vid .b-shop span small{display:block;font:600 11px Inter;color:#555;font-style:normal}
.b-vid .b-shop em{font-style:normal;width:28px;height:28px;border-radius:7px;background:var(--b-ink);color:var(--b-a);display:grid;place-items:center;font-size:16px}
@media(max-width:700px){.b-vid{flex:0 0 62%}}
.b-tt .b-note2{margin-top:14px;font:500 italic 13px Inter;color:#666}
.b-toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,120px);opacity:0;background:var(--b-ink);color:#fff;border-radius:8px;padding:12px 18px;font:700 italic 14px Inter;z-index:50;transition:transform .35s cubic-bezier(.3,1.4,.5,1)}
.b-toast.on{transform:translate(-50%,0);opacity:1}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.b-row{opacity:1;transform:none}}


/* ── 2. ADDITIONS ───────────────────────────────────────────────────────── */
.b-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.b-tt :focus-visible,.b-footer :focus-visible,.b-hero :focus-visible{outline-color:var(--b-a)}
#sbb,#best-sellers{scroll-margin-top:40px}

/* header: left column, icons as 44px targets, search button, phone menu */
.b-left{display:flex;align-items:center;min-width:0}
.b-logo{color:var(--b-ink)}
.b-icons{gap:4px}
.b-ic{width:44px;height:44px;display:grid;place-items:center;border-radius:8px;position:relative}
.b-ic:hover{background:var(--b-bg)}
.b-cart b{top:4px;right:2px;display:grid}
.b-search label{position:relative}
.b-search input{background:#fff;border:0;-webkit-appearance:none;appearance:none}
.b-search input::-webkit-search-cancel-button{-webkit-appearance:none}
.b-search button{width:44px;height:100%;background:#e9e9e9;display:grid;place-items:center;border-left:1px solid #999;flex:none}
.b-search svg{width:16px;height:16px;stroke:#333;fill:none;stroke-width:2}
.b-menu{display:none;position:relative}
.b-menu summary{list-style:none;width:44px;height:44px;display:grid;place-items:center;cursor:pointer;margin-left:-10px}
.b-menu summary::-webkit-details-marker{display:none}
.b-menu summary svg{width:22px;height:22px;stroke:#111;fill:none;stroke-width:1.8}
.b-menu-panel{position:absolute;left:-6px;top:50px;z-index:40;min-width:220px;background:#fff;border:1px solid var(--b-line);border-radius:10px;box-shadow:0 20px 40px -20px rgba(0,0,0,.35);padding:6px;display:grid}
.b-menu-panel a{padding:12px 14px;border-radius:6px;font:700 italic 15px Inter;text-transform:uppercase;letter-spacing:-.01em}
.b-menu-panel a:hover{background:var(--b-bg)}
@media(max-width:860px){.b-menu{display:block}}
@media(max-width:420px){.b-logo{font-size:20px}}

/* hero */
.b-hero picture{display:contents}
.b-hero .b-btn:focus-visible{background:#fff;color:#000}

/* shop by bike: photo cards over the gradient card, real thumbnails */
.b-bk{padding:0;border:0;font:inherit;cursor:pointer}
.b-bk picture{display:contents}
.b-bk .b-ph{z-index:0}
.b-bk img{z-index:0}
.b-th{flex:none;position:relative}
.b-th picture{display:contents}
.b-th img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.b-th>span{position:relative;color:#bbb;font-size:22px}
.b-row .b-nm a:hover b{text-decoration:underline}
.b-ph2r{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.b-still .b-row{animation:none!important;opacity:1;transform:none}
.b-empty{padding:30px 0;color:#666;font:500 italic 15px Inter}
.b-toprt{display:flex;flex-direction:column;align-items:flex-end;gap:16px}
@media(max-width:700px){.b-toprt{align-items:flex-start}}

/* product tiles: real photos, glow under the tile, lift on hover */
.b-pc{position:relative}
.b-imw{position:relative;isolation:isolate}
.b-imw:before{content:"";position:absolute;left:14%;right:14%;bottom:-12px;height:34px;border-radius:50%;background:radial-gradient(closest-side,rgba(196,245,58,.6),rgba(196,245,58,0));filter:blur(12px);opacity:.45;z-index:-1;transition:opacity .35s,transform .35s;pointer-events:none}
.b-pc:hover .b-imw:before{opacity:.95;transform:scale(1.12)}
.b-pc .b-im picture{display:contents}
.b-pc .b-im img.b-ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.b-pc .b-im img.b-ph.b-contain{object-fit:contain;padding:8%;filter:drop-shadow(0 18px 14px rgba(0,0,0,.28)) drop-shadow(0 4px 4px rgba(0,0,0,.15))}
.b-pc:hover .b-im img.b-ph{transform:scale(1.05)}
.b-pc .b-qa{position:absolute;left:10px;right:10px;bottom:10px;z-index:5;height:44px;border-radius:6px;background:var(--b-ink);color:#fff;font:700 italic 13px Inter;text-transform:uppercase;opacity:0;transform:translateY(8px);transition:.25s}
.b-pc:hover .b-qa,.b-pc .b-qa:focus-visible{opacity:1;transform:none}
.b-pc .b-qa:hover{background:var(--blue)}
@media(hover:none){.b-pc .b-qa{display:none}}
.b-pc .b-nm{display:block}
.b-pc .b-ft.yes{color:var(--blue)}
.b-pc .b-pr s{color:#666;margin-left:6px}
.b-pc.nofit{opacity:.45}
.b-none{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:#ececec;color:#8a8a8a;font:700 12px Inter;text-align:center;z-index:0}
.b-none span{font-size:26px;opacity:.6}
.b-empty{color:#666}

/* tiktok cards with real video */
.b-vid video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.b-vid .b-top a{color:#fff;text-decoration:underline}
.b-vid .b-shop{display:flex}
.b-vid .b-mm{position:relative}
.b-vid .b-mm img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.b-vid .b-shopn{font:800 italic 12px/1.15 Inter;flex:1;color:#000}
.b-vid .b-shopn small{display:block;font:600 11px Inter;color:#555;font-style:normal}
.b-vid .b-plus{width:44px;height:44px;border-radius:9px;background:var(--b-ink);color:var(--b-a);font-size:20px;flex:none}

/* feature row */
.b-big picture{display:contents}
.b-big .b-go{margin-top:22px;width:max-content;border:1.5px solid #fff;border-radius:8px;padding:14px 34px;font:700 italic 13px Inter;text-transform:uppercase;transition:.2s;color:#fff;position:relative;z-index:1}
.b-big .b-go:hover{background:#fff;color:#000}
.b-bs.b-last{padding-bottom:80px}
.b-fg h2{font:800 italic 13px Inter;text-transform:uppercase;margin-bottom:14px;color:#fff}

/* tap targets ≥ 44px on touch screens */
@media(pointer:coarse){
  .b-tabs button,.b-tabs2 button,.b-fchips button,.b-close,.b-row .b-add{min-height:44px}
  .b-close{width:44px}
  .b-fg a{padding:10px 0}
}

/* ── 3. SHOP PAGES (re-theme of css/shop.css) ───────────────────────────── */
:root{--bg:#fff;--paper:#fff;--ink:#0a0a0a;--sub:#666;--dim:#767676;--line:#e3e3e3;--line2:#d6d6d6}
.s-wrap{max-width:1360px;padding-left:32px;padding-right:32px}
@media(max-width:700px){.s-wrap{padding-left:16px;padding-right:16px}}
.s-hl{background:none;color:var(--blue);padding:0}
.s-ptitle{font-style:normal}
.s-eyebrow{color:var(--blue)}
.s-eyebrow:before{background:var(--blue)}
.s-btn{border-radius:8px}
.s-b-a{background:var(--blue);color:#fff}
.s-b-a:hover{box-shadow:0 12px 30px -12px rgba(29,59,181,.6)}
.s-chip,.s-search,.s-toolbar select{border-radius:999px}
.s-chip{font-style:italic;text-transform:uppercase;font-weight:800;font-size:12px}
.s-grid{gap:22px 10px}
.s-fitp{background:#e8ecff;color:var(--blue)}
.s-fitnote i{background:var(--blue)}
.s-bar i{background:var(--blue)}
.s-badge.new{background:var(--blue);color:#fff}
.s-cp1{background:var(--blue);color:#fff}
.s-cp1 p,.s-cp1 .s-eyebrow{color:rgba(255,255,255,.9)}
.s-cp1 .s-eyebrow:before{background:#fff}
.s-seg button.on{border-color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue)}
.s-colors button.on{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--blue)}
.s-gmain .s-art,.s-dots .s-art{border-radius:10px}
.s-mark{background:var(--ink);color:var(--b-a)}
#toast.toast{top:auto;bottom:24px;transform:translate(-50%,120px);border-radius:8px;font-style:italic}
#toast.toast.show{transform:translate(-50%,0)}

/* phones: badge and "see it on a bike" tag don't share a corner; one swipeable
   row of filter chips with the close button pinned top-right */
@media(max-width:700px){
  .b-pc .b-im .b-onb{top:auto;bottom:10px}
  .b-ph2{position:relative;padding-right:64px}
  .b-ph2r{width:100%;margin-right:-46px}
  .b-close{position:absolute;right:14px;top:14px}
  .b-fchips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;width:100%;padding-bottom:2px}
  .b-fchips::-webkit-scrollbar{display:none}
  .b-fchips button{flex:none}
}

/* phones: every control is at least 44 × 44 px */
.b-menu:not([open]) .b-menu-panel{display:none}
.b-menu-panel a{min-height:44px;display:flex;align-items:center}
.b-logo{display:inline-flex;align-items:center;min-height:44px}
@media(max-width:700px){
  .b-search label{height:44px}
  .b-tabs button,.b-tabs2 button,.b-fchips button,.b-close,.b-row .b-add,.s-chip,.s-search,.s-toolbar select{min-height:44px}
  .b-close{width:44px}
  .b-viewall,.b-mini a,.b-pfoot a,.s-crumb a,.s-crumb button,.s-link{display:inline-flex;align-items:center;min-height:44px}
  .s-colors button{width:44px;height:44px}
  .s-chips{margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px}
  .b-fg a{padding:12px 0}
}
@media(max-width:700px){
  .b-search label{height:46px}
  .b-pc .b-nm{min-height:44px}
  .b-fg a{display:flex;align-items:center;min-height:44px;padding:0}
  button[data-action="review-rating"]{min-width:44px;min-height:44px}
  .btn-primary{min-height:44px}
}
/* light greys on the black footer and TikTok strip (≥ 4.5:1 on #0a0a0a) */
.b-fg p{color:#a8a8a8}
.b-fg a{color:#bdbdbd}
.b-fb{color:#9a9a9a}
.b-tt .b-note2{color:#a0a0a0}
/* bike card photos where the bike sits low in a tall photo */
.b-bk[data-sbb-bike="eridepro"] img,.b-bk[data-sbb-bike="ninebot-g3max"] img{object-position:50% 85%}
/* hero photo (sunset shot): lighter overlay, crop weighted toward the bike */
.b-hero{height:min(68vh,640px)}
.b-hero img{filter:brightness(.72);object-position:50% 54%}