/* SparesBuzz shop styles. Ported from the approved demo (v33). */
body{margin:0}
:root{--c-rev:#2346B8;--c-prof:#15803D;
  --bg:#F4F6FB; --surface:#FFFFFF; --surface-2:#F0F3F9; --line:#DCE2EE; --fg:#0F172A; --muted:#566079;
  --accent:#2346B8; --accent-fg:#FFFFFF; --accent-soft:#E7EDFC; --brass:#B86E00; --brass-soft:#FFF1D6;
  --cta:#FFB21E; --cta-fg:#1A1200; --hero:#0B1E4A; --hero-fg:#F2F5FC; --hero-muted:#B8C5E3;
  --hero-grad:radial-gradient(900px 420px at 85% 15%,rgba(255,178,30,.18),transparent 60%),linear-gradient(135deg,#0A1A42 0%,#12307F 55%,#1C45B3 100%);
  --ok:#15803D; --ok-soft:#DCF5E4; --warn:#9A5B00; --warn-soft:#FCEED3; --bad:#C0352B; --bad-soft:#FCE3E0;
  --mode:#061230; --mode-fg:#DDE5F3; --nav:#173C93; --foot:#0D1F4D; --foot-2:#081534; --foot-top:#1B3A86; --radius:12px;
  --t-engine:#E8EEFF; --tf-engine:#2346B8; --t-transmission:#FFF1D6; --tf-transmission:#B86E00; --t-brakes:#FDE7E7; --tf-brakes:#C53030; --t-electrical:#FFF6C7; --tf-electrical:#A16207;
  --t-lighting:#E3F4FD; --tf-lighting:#0369A1; --t-suspension:#E3F7EA; --tf-suspension:#15803D; --t-body:#F3E8FF; --tf-body:#7E22CE; --t-service:#DFF6F2; --tf-service:#0F766E;
  --display:"Saira Semi Condensed","Arial Narrow",system-ui,sans-serif;
  --body:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--c-rev:#6585F0;--c-prof:#22A85A;
  --bg:#0A1022; --surface:#121A30; --surface-2:#18213A; --line:#283453; --fg:#E8EDF7; --muted:#9BA8C2;
  --accent:#8AA8FF; --accent-fg:#0A1022; --accent-soft:#1B2A52; --brass:#FFC15A; --brass-soft:#3A2C12;
  --cta:#FFB21E; --cta-fg:#1A1200; --hero:#08163A; --hero-fg:#F2F5FC; --hero-muted:#B8C5E3;
  --hero-grad:radial-gradient(900px 420px at 85% 15%,rgba(255,178,30,.14),transparent 60%),linear-gradient(135deg,#060F2A 0%,#0C2160 60%,#143592 100%);
  --ok:#5FD08A; --ok-soft:#12301E; --warn:#F0B95A; --warn-soft:#382A12; --bad:#F48A7E; --bad-soft:#3E1F1C;
  --mode:#040A1C; --mode-fg:#CBD5E6; --nav:#0F2A6B; --foot:#0A1738; --foot-2:#060F26; --foot-top:#13306F; --radius:12px;
  --t-engine:#1C2A55; --tf-engine:#9DB4FF; --t-transmission:#3A2C12; --tf-transmission:#FFC15A; --t-brakes:#3D1D20; --tf-brakes:#FF9C94; --t-electrical:#3A3412; --tf-electrical:#F5D55A;
  --t-lighting:#12304A; --tf-lighting:#7CCBF5; --t-suspension:#12301E; --tf-suspension:#6FDC97; --t-body:#2E1A48; --tf-body:#CFA3FF; --t-service:#0F302C; --tf-service:#6FDCCB; color-scheme:dark}}
:root[data-theme="dark"]{--c-rev:#6585F0;--c-prof:#22A85A;
  --bg:#0A1022; --surface:#121A30; --surface-2:#18213A; --line:#283453; --fg:#E8EDF7; --muted:#9BA8C2;
  --accent:#8AA8FF; --accent-fg:#0A1022; --accent-soft:#1B2A52; --brass:#FFC15A; --brass-soft:#3A2C12;
  --cta:#FFB21E; --cta-fg:#1A1200; --hero:#08163A; --hero-fg:#F2F5FC; --hero-muted:#B8C5E3;
  --hero-grad:radial-gradient(900px 420px at 85% 15%,rgba(255,178,30,.14),transparent 60%),linear-gradient(135deg,#060F2A 0%,#0C2160 60%,#143592 100%);
  --ok:#5FD08A; --ok-soft:#12301E; --warn:#F0B95A; --warn-soft:#382A12; --bad:#F48A7E; --bad-soft:#3E1F1C;
  --mode:#040A1C; --mode-fg:#CBD5E6; --nav:#0F2A6B; --foot:#0A1738; --foot-2:#060F26; --foot-top:#13306F; --radius:12px;
  --t-engine:#1C2A55; --tf-engine:#9DB4FF; --t-transmission:#3A2C12; --tf-transmission:#FFC15A; --t-brakes:#3D1D20; --tf-brakes:#FF9C94; --t-electrical:#3A3412; --tf-electrical:#F5D55A;
  --t-lighting:#12304A; --tf-lighting:#7CCBF5; --t-suspension:#12301E; --tf-suspension:#6FDC97; --t-body:#2E1A48; --tf-body:#CFA3FF; --t-service:#0F302C; --tf-service:#6FDCCB; color-scheme:dark}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{background:var(--bg);color:var(--fg);font-family:var(--body);font-size:14px;line-height:1.45}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mono{font-family:var(--mono)}
.num{font-variant-numeric:tabular-nums}

/* demo mode bar */
.modebar{background:var(--mode);color:var(--mode-fg);padding:8px 16px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.modebar .lbl{font-size:11px;letter-spacing:.08em;text-transform:uppercase;opacity:.7}
.modebar .tabs{display:flex;gap:4px;flex-wrap:wrap}
.modebar button{background:transparent;border:1px solid transparent;color:var(--mode-fg);padding:5px 10px;border-radius:4px;font-size:13px}
.modebar button[aria-pressed="true"]{border-color:var(--mode-fg);font-weight:600}
.modebar .note{margin-left:auto;font-size:12px;opacity:.7}

/* store header */
.store-head{background:var(--surface);border-bottom:1px solid var(--line);padding:12px 16px;display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center}
.logo{font-family:var(--display);font-weight:800;font-size:26px;letter-spacing:-.01em;line-height:1;display:flex;align-items:center;gap:8px;background:none;border:0;padding:0;color:var(--fg);text-decoration:none}
.logo svg{width:38px;height:38px;flex:none}
.logo .w{display:flex;align-items:baseline}
.logo b{color:var(--brass);font-weight:800}
.logo small{font-family:var(--mono);font-size:12px;font-weight:500;color:var(--muted);margin-left:3px}
.navrow{background:var(--surface);border-bottom:1px solid var(--line);padding:0 16px;display:flex;gap:4px;overflow-x:auto}
.navrow button{background:none;border:0;border-bottom:3px solid transparent;padding:10px 10px;white-space:nowrap;font-weight:500;color:var(--muted)}
.navrow button[aria-current="page"]{color:var(--fg);border-bottom-color:var(--cta)}
.navrow button:hover{color:var(--fg)}
/* home */
.hero{background:var(--hero-grad);color:var(--hero-fg);position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='48' viewBox='0 0 56 48'%3E%3Cpath d='M14 1h28l14 23-14 23H14L0 24z' fill='none' stroke='%23ffffff' stroke-opacity='.05' stroke-width='1.5'/%3E%3C/svg%3E");background-size:56px 48px;pointer-events:none}
.hero-in{position:relative;max-width:1240px;margin:0 auto;padding-block:44px 76px;padding-inline:16px;display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--cta)}
.hero h1{font-family:var(--display);font-weight:800;font-size:clamp(34px,5vw,58px);line-height:1.02;margin:10px 0 14px;letter-spacing:-.015em;text-wrap:balance}
.hero h1 em{font-style:normal;color:var(--cta)}
.hero p.lead{color:var(--hero-muted);font-size:16px;max-width:52ch;margin:0 0 22px}
.finder{background:var(--surface);color:var(--fg);border-radius:10px;padding:18px;display:flex;flex-direction:column;gap:10px;box-shadow:0 18px 40px rgba(0,0,0,.25);max-width:520px}
.finder h2{font-family:var(--display);font-size:20px;font-weight:700;margin:0;display:flex;align-items:center;gap:8px}
.finder .row{display:grid;grid-template-columns:1fr 1fr 110px;gap:8px}
.finder select{border:1px solid var(--line);background:var(--surface-2);padding:10px;border-radius:6px;min-width:0}
.finder .or{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px}
.finder .or::before,.finder .or::after{content:"";flex:1;height:1px;background:var(--line)}
.finder .search input{border-radius:6px 0 0 6px}
.finder .search button{border-radius:0 6px 6px 0}
.hero-art{display:grid;place-items:center}
.hero-art svg{width:100%;max-width:480px;height:auto}
.trust{background:var(--surface);border-bottom:1px solid var(--line)}
.trust-in{max-width:1240px;margin:0 auto;padding:16px;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.trust-in div{display:flex;gap:10px;align-items:center;font-size:13px;color:var(--muted)}
.trust-in strong{display:block;color:var(--fg);font-size:15px}
.trust-in svg{width:30px;height:30px;color:var(--brass);flex:none}
.hsec{max-width:1240px;margin:0 auto;padding-block:34px 6px;padding-inline:16px}
.hsec-head{display:flex;justify-content:space-between;align-items:end;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.hsec h2{font-family:var(--display);font-weight:700;font-size:28px;margin:0;letter-spacing:-.01em}
.linkbtn{background:none;border:0;color:var(--accent);font-weight:600;padding:0}
.bikes{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.bike{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:14px;text-align:left;display:flex;flex-direction:column;gap:4px}
.bike:hover{border-color:var(--cta)}
.bike svg{width:100%;height:64px;color:var(--accent);margin-bottom:6px}
.bike strong{font-family:var(--display);font-size:18px;font-weight:700}
.bike span{font-size:12px;color:var(--muted)}
.cats{display:grid;grid-template-columns:repeat(8,1fr);gap:10px}
.cat{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:16px 8px;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:13px;font-weight:500;text-align:center}
.cat:hover{border-color:var(--cta)}
.cat .ic{width:52px;height:52px;border-radius:50%;background:var(--brass-soft);color:var(--brass);display:grid;place-items:center}
.cat .ic svg{width:28px;height:28px}
.why{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.why div{border-top:3px solid var(--cta);padding-top:12px}
.why h3{font-family:var(--display);font-size:20px;margin:0 0 6px}
.why p{margin:0;color:var(--muted);max-width:40ch}
.ship{background:var(--accent-soft);border-radius:10px;padding:22px;display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center}
.regions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.regions span{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:4px 12px;font-size:13px}
.brandstrip{display:flex;flex-wrap:wrap;gap:10px}
.brandstrip button{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:10px 16px;font-family:var(--display);font-weight:700;font-size:16px;color:var(--muted)}
.brandstrip button:hover{color:var(--fg);border-color:var(--cta)}
.sellcta{background:var(--hero-grad);color:var(--hero-fg);border-radius:10px;padding:26px;display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center}
.sellcta h2{color:var(--hero-fg)}
.sellcta p{color:var(--hero-muted);margin:6px 0 0;max-width:60ch}
.sitefoot{background:var(--mode);color:var(--mode-fg);margin-top:40px}
.sitefoot-in{max-width:1240px;margin:0 auto;padding-block:32px;padding-inline:16px;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:24px;font-size:13px}
.sitefoot h4{margin:0 0 8px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;opacity:.7}
.sitefoot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.sitefoot .logo{color:var(--mode-fg)}
.sitefoot .pays{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.sitefoot .pays span{border:1px solid rgba(255,255,255,.25);border-radius:4px;padding:2px 8px;font-size:12px}
.sitefoot .legal{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.12);padding-top:14px;opacity:.6;font-size:12px}

.search{display:flex;min-width:0}
.search input{flex:1;min-width:0;border:1px solid var(--line);border-right:0;background:var(--surface-2);padding:9px 12px;border-radius:4px 0 0 4px}
.search button{border:0;background:var(--cta);color:var(--cta-fg);padding:0 16px;border-radius:0 4px 4px 0;font-weight:600}
.head-tools{display:flex;gap:8px;align-items:center}
.head-tools select{border:1px solid var(--line);background:var(--surface);padding:7px 8px;border-radius:4px}
.cart-btn{border:1px solid var(--line);background:var(--surface);padding:7px 12px;border-radius:4px;font-weight:600;display:flex;gap:6px;align-items:center}
.cart-btn .count{background:var(--cta);color:var(--cta-fg);border-radius:10px;padding:0 7px;font-size:12px}

/* fitment bar */
.fitbar{background:var(--hero-grad);color:var(--hero-fg);padding:14px 16px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.fitbar h2{font-family:var(--display);font-weight:600;font-size:22px;margin:0;letter-spacing:.02em;text-transform:uppercase}
.fitbar select{border:0;padding:8px 10px;border-radius:4px;background:var(--surface);color:var(--fg);min-width:150px}
.fitbar .clear{background:transparent;border:1px solid currentColor;color:inherit;padding:7px 12px;border-radius:4px}
.fitbar .mybike{font-size:13px;opacity:.95}

.marketnote{background:var(--brass-soft);color:var(--fg);padding:8px 16px;font-size:13px;border-bottom:1px solid var(--line)}

/* shop layout */
.shop{display:grid;grid-template-columns:240px 1fr;gap:20px;padding:20px 16px;max-width:1320px;margin:0 auto}
.rail{display:flex;flex-direction:column;gap:18px}
.rail h3{font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:.06em;text-transform:uppercase;margin:0 0 6px;color:var(--muted)}
.rail label{display:flex;gap:8px;align-items:center;padding:3px 0;cursor:pointer}
.rail label .c{margin-left:auto;color:var(--muted);font-size:12px}
.price-row{display:flex;gap:6px;align-items:center}
.price-row input{width:100%;min-width:0;border:1px solid var(--line);background:var(--surface);padding:6px 8px;border-radius:4px}
.results-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.results-head .count{color:var(--muted)}
.results-head select{border:1px solid var(--line);background:var(--surface);padding:6px 8px;border-radius:4px}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.chip{background:var(--accent-soft);color:var(--fg);border:0;border-radius:14px;padding:3px 10px;font-size:12px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:6px;display:flex;flex-direction:column;overflow:hidden;text-align:left;padding:0}
.card:hover{border-color:var(--accent)}
.card .pic{background:var(--surface-2);aspect-ratio:4/3;max-width:100%;display:grid;place-items:center;color:var(--accent);position:relative}
.card .pic svg{width:56px;height:56px}
.badge{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:2px 7px;border-radius:3px}
.badge.oem{background:var(--brass-soft);color:var(--brass)}
.badge.aft{background:var(--accent-soft);color:var(--accent)}
.badge.ok{background:var(--ok-soft);color:var(--ok)}
.badge.warn{background:var(--warn-soft);color:var(--warn)}
.badge.bad{background:var(--bad-soft);color:var(--bad)}
.card .pic .badge{position:absolute;top:8px;left:8px}
.card .body{padding:10px 12px 12px;display:flex;flex-direction:column;gap:4px;flex:1}
.card .pn{font-family:var(--mono);font-size:12px;color:var(--muted)}
.card .name{font-weight:600;line-height:1.3}
.card .fits{font-size:12px;color:var(--muted)}
.card .foot{display:flex;justify-content:space-between;align-items:end;margin-top:auto;padding-top:8px}
.price{font-family:var(--display);font-weight:600;font-size:22px;line-height:1}
.stock{font-size:12px}
.stock.in{color:var(--ok)} .stock.low{color:var(--warn)} .stock.out{color:var(--bad)}
.empty{padding:40px;text-align:center;color:var(--muted);background:var(--surface);border:1px dashed var(--line);border-radius:6px}
.filter-toggle{display:none}

/* modal + drawer */
.scrim{position:fixed;inset:0;background:rgba(10,14,18,.5);z-index:20;display:flex;justify-content:center;align-items:flex-start;padding:40px 16px;overflow:auto}
.modal{background:var(--surface);border-radius:8px;max-width:820px;width:100%;display:grid;grid-template-columns:1fr 1.2fr;overflow:hidden}
.modal .pic{background:var(--surface-2);display:grid;place-items:center;color:var(--accent);min-height:260px}
.modal .pic svg{width:120px;height:120px}
.modal .info{padding:20px;display:flex;flex-direction:column;gap:10px;min-width:0}
.modal h2{font-family:var(--display);font-weight:600;font-size:28px;line-height:1.1;margin:0;text-wrap:balance}
.close{position:absolute;right:16px;top:16px}
.btn{border:1px solid var(--line);background:var(--surface);padding:8px 14px;border-radius:4px;font-weight:500}
.btn.primary{background:var(--cta);color:var(--cta-fg);border-color:var(--cta);font-weight:600}
.btn.navy{background:var(--accent);color:var(--accent-fg);border-color:var(--accent);font-weight:600}
.btn.small{padding:4px 10px;font-size:13px}
.btn.danger{color:var(--bad)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:13px}
.kv dt{color:var(--muted)} .kv dd{margin:0}
.fitlist{font-size:13px;margin:0;padding-left:18px}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,100%);background:var(--surface);z-index:21;display:flex;flex-direction:column;border-left:1px solid var(--line);padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.drawer header{padding:16px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
.drawer header h2{font-family:var(--display);margin:0;font-size:24px}
.drawer .items{flex:1;overflow:auto;padding:12px 16px;display:flex;flex-direction:column;gap:10px}
.drawer footer{padding:16px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.line{display:grid;grid-template-columns:1fr auto;gap:4px 10px;border-bottom:1px solid var(--line);padding-bottom:10px}
.qty{display:flex;gap:6px;align-items:center}
.qty button{width:26px;height:26px;border:1px solid var(--line);background:var(--surface);border-radius:4px}
.pay{display:flex;flex-direction:column;gap:6px}
.pay label{display:flex;gap:8px;align-items:center;border:1px solid var(--line);border-radius:4px;padding:8px 10px}
.pay label.off{opacity:.55}
.field{display:flex;flex-direction:column;gap:4px;font-size:13px}
.field input,.field select{border:1px solid var(--line);background:var(--surface-2);padding:8px 10px;border-radius:4px;min-width:0}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* panels */
.panel{display:grid;grid-template-columns:220px 1fr;min-height:calc(100vh - 44px)}
.side{background:var(--surface);border-right:1px solid var(--line);padding:16px 12px;display:flex;flex-direction:column;gap:2px}
.side .who{padding:4px 8px 14px;border-bottom:1px solid var(--line);margin-bottom:10px}
.side .who strong{display:block;font-family:var(--display);font-size:20px;font-weight:600}
.side .who span{font-size:12px;color:var(--muted)}
.side button{text-align:left;background:transparent;border:0;padding:8px 10px;border-radius:4px;display:flex;justify-content:space-between}
.side button[aria-current="page"]{background:var(--accent-soft);font-weight:600}
.side .pill{background:var(--cta);color:var(--cta-fg);border-radius:10px;padding:0 7px;font-size:12px}
.main{padding:20px 16px 40px;min-width:0;max-width:1100px}
.main h1{font-family:var(--display);font-weight:600;font-size:30px;margin:0 0 4px;letter-spacing:.01em}
.main .sub{color:var(--muted);margin:0 0 18px;max-width:70ch}
.dfil{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:14px}.dfil .chip{border:1px solid var(--line);background:var(--surface);color:var(--fg);border-radius:999px;padding:6px 12px;font:inherit;font-size:13px;cursor:pointer}.dfil .chip.on{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}.dfil .pfl{flex-direction:row;align-items:center;gap:6px}
.tile .ts{font-size:12px;color:var(--muted);margin-top:4px}.tile.win{border-color:var(--ok);background:var(--ok-soft)}.tile.win .v{color:var(--ok)}.tiles.d6{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.dgrid{display:grid;grid-template-columns:1.6fr 1fr;gap:14px;align-items:start}.dgrid>*{min-width:0}@media (max-width:980px){.dgrid{grid-template-columns:1fr}}
.dwrap{position:relative}.dchart{width:100%;height:auto;display:block}.dchart .grid{stroke:var(--line);stroke-width:1}.dchart .base{stroke:var(--muted);stroke-width:1}.dchart .ax{fill:var(--muted);font-size:11px}.dchart .rev{fill:var(--c-rev)}.dchart .prof{fill:var(--c-prof)}.dchart .dbar:hover rect{fill:var(--accent-soft);fill-opacity:.5}
.dleg{display:flex;gap:14px;font-size:13px;color:var(--muted)}.dleg i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.dtip{position:absolute;pointer-events:none;background:var(--surface);color:var(--fg);border:1px solid var(--line);border-radius:6px;padding:8px 10px;font-size:12px;box-shadow:0 4px 14px rgba(0,0,0,.15);white-space:nowrap;z-index:2}.dtip i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:6px}
.pipe{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) 30px 80px;gap:8px;align-items:center;width:100%;background:none;border:0;border-bottom:1px solid var(--line);padding:7px 2px;font:inherit;font-size:13px;color:var(--fg);text-align:left;cursor:pointer}.pipe:disabled{cursor:default;color:var(--muted)}.pipe:not(:disabled):hover{background:var(--accent-soft)}.pipe .pb{height:8px;background:var(--bg);border-radius:4px;overflow:hidden}.pipe .pb i{display:block;height:100%;background:var(--accent);border-radius:4px}.pipe .pn{text-align:right;font-weight:700}.pipe .pv{text-align:right;color:var(--muted)}.pipe.tot{cursor:default;font-weight:700;border:0}
.apflow{margin-bottom:14px}.apcard{border:1px solid var(--line);border-radius:8px;padding:12px;margin-bottom:10px;background:var(--surface)}.aplangs{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px}.aplang{border:1px solid var(--line);border-radius:6px;padding:8px;display:flex;flex-direction:column;gap:4px;min-width:0}
.pvbar{grid-column:1/-1;padding-right:52px!important;display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;background:var(--warn-soft);color:var(--fg);border-radius:6px;padding:8px 10px;font-size:13px;margin:-4px 0 6px}
.modmsg{background:var(--bad-soft);color:var(--fg);border-left:3px solid var(--bad);border-radius:6px;padding:8px 10px;font-size:13px;margin:6px 0}.modret{border-color:var(--bad)}
.rvs{border-top:1px solid var(--line);padding-top:10px;margin-top:6px;display:flex;flex-direction:column;gap:6px}.rv p{margin:2px 0 0;font-size:14px}.rv{font-size:13px}.stars{color:#E89A00;letter-spacing:1px}.rvform{display:flex;gap:6px;flex-wrap:wrap}.rvform input{flex:1 1 160px}
.chatfab{position:fixed;right:18px;bottom:18px;z-index:30;display:flex;align-items:center;gap:8px;background:var(--accent);color:var(--accent-fg);border:0;border-radius:999px;padding:12px 18px;font:inherit;font-weight:700;box-shadow:0 6px 20px rgba(10,22,48,.25);cursor:pointer}
.chatp{position:fixed;right:18px;bottom:18px;z-index:30;width:370px;max-width:calc(100vw - 32px);height:min(560px,calc(100vh - 100px));display:flex;flex-direction:column;background:var(--surface);color:var(--fg);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 40px rgba(10,22,48,.3);overflow:hidden}
.chatp header{display:flex;align-items:center;gap:8px;padding:10px 12px;background:var(--hero);color:var(--hero-fg)}.chatp header div{flex:1;min-width:0;display:flex;flex-direction:column}.chatp header small{color:var(--hero-muted);font-size:12px}.chatp header select{color:var(--fg);background:var(--surface);border:0;font-size:12px;padding:3px;border-radius:6px;max-width:100px}.chatx{background:none;border:0;color:inherit;font-size:16px;cursor:pointer;padding:4px}
.chatm{flex:1;overflow:auto;padding:12px;display:flex;flex-direction:column;gap:8px;background:var(--bg)}.cmsg{max-width:85%;padding:8px 11px;border-radius:12px;font-size:14px;line-height:1.4;white-space:pre-wrap;display:flex;flex-direction:column;gap:6px}.cmsg.bot,.cmsg.staff{background:var(--surface);border:1px solid var(--line);align-self:flex-start;border-bottom-left-radius:4px}.cmsg.staff{border-color:var(--ok)}.cmsg.cust{background:var(--accent);color:var(--accent-fg);align-self:flex-end;border-bottom-right-radius:4px}.cmsg small{font-size:11px;color:var(--muted)}.cmsg .wa{align-self:flex-start;background:#1FA855;color:#fff;border-color:#1FA855;text-decoration:none}
.chatchips{display:flex;gap:6px;overflow-x:auto;padding:8px 10px;border-top:1px solid var(--line)}.chatchips button{flex:none;border:1px solid var(--line);background:var(--surface);color:var(--fg);border-radius:999px;padding:5px 10px;font:inherit;font-size:12px;cursor:pointer}
.chatf{display:flex;gap:6px;padding:8px 10px;border-top:1px solid var(--line)}.chatf input{flex:1;min-width:0}
@media (max-width:760px){.chatfab{bottom:78px;right:12px;padding:10px 14px}.chatp{right:8px;left:8px;width:auto;max-width:none;bottom:72px;height:calc(100vh - 150px)}}
.provg{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px}.prov{border:1px solid var(--line);border-radius:8px;padding:12px;display:flex;flex-direction:column;gap:6px;background:var(--surface)}.prov.on{border-color:var(--ok)}.prov p{margin:0;font-size:13px}.prov.add{border-style:dashed}
.supas{font-size:13px;display:flex;gap:6px;align-items:center}.supas select{padding:4px 6px}
.smeth{border:1px solid var(--line);border-radius:8px;padding:10px;margin:0 0 10px;background:var(--surface)}.smeth.off{opacity:.65}.ztab input[type=number],.ztab input{padding:3px 5px}.zchips{display:flex;flex-wrap:wrap;gap:4px}.zadd{display:flex;gap:4px}
.calc{border:1px dashed var(--line);border-radius:8px;padding:10px}.calct{width:100%;margin-top:8px}.calct td{padding:6px 4px;border-bottom:1px solid var(--line)}
.cartcalc{display:flex;gap:12px;align-items:flex-start;margin-top:12px;padding-top:10px;border-top:1px solid var(--line);font-size:13px}.cartcalc small{color:var(--muted)}
.pship{font-size:13px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}.pship select{font-size:12px;padding:2px 4px}
.enfcard{display:flex;gap:16px;align-items:center;justify-content:space-between;border:2px solid var(--accent);border-radius:10px;padding:14px 16px;background:var(--accent-soft)}.enfcard p{margin:4px 0;font-size:14px}.enfcard .btn{flex:none;white-space:nowrap}@media(max-width:640px){.enfcard{flex-direction:column;align-items:stretch}}
.supg{display:grid;grid-template-columns:300px 1fr;gap:14px;align-items:start}.supg>*{min-width:0}@media (max-width:900px){.supg{grid-template-columns:1fr}}
.suplist{display:flex;flex-direction:column;gap:6px}.supi{text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:10px;font:inherit;color:var(--fg);cursor:pointer;display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center}.supi.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}.supi small{flex:1 1 100%;color:var(--muted);font-size:12px}.supprev{flex:1 1 100%;font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.supthread{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:12px}.supmsgs{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}.smsg{max-width:85%;padding:8px 11px;border-radius:10px;font-size:14px;display:flex;flex-direction:column;gap:3px}.smsg small{font-size:12px;color:var(--muted)}.smsg.cust{background:var(--bg);border:1px solid var(--line);align-self:flex-start}.smsg.bot{background:var(--bg);align-self:flex-end;opacity:.85}.smsg.staff{background:var(--ok-soft);align-self:flex-end}
.supf{display:flex;gap:8px;align-items:flex-end}.supf textarea{flex:1}.wamock{max-width:520px;margin:8px 0}.wab{background:#DCF8C6;color:#111;border-radius:10px;padding:10px 12px;font-size:13px;margin-top:6px;line-height:1.45}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:20px}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:14px}
.tile .k{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.tile .v{font-family:var(--display);font-size:30px;font-weight:600}
.tablewrap{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:6px}
table{border-collapse:collapse;width:100%;font-size:13px}
th,td{padding:9px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle;white-space:nowrap}
th{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600;background:var(--surface-2)}
td.r,th.r{text-align:right}
tr:last-child td{border-bottom:0}
td input[type=number]{width:72px;border:1px solid var(--line);background:var(--surface-2);padding:4px 6px;border-radius:4px}
.callout{background:var(--brass-soft);border-radius:6px;padding:10px 14px;font-size:13px;margin-bottom:16px;max-width:80ch}
.matrix td{text-align:center}
.matrix td:first-child,.matrix th:first-child{text-align:left}
.section{margin-bottom:24px}
.section h2{font-family:var(--display);font-weight:600;font-size:20px;margin:0 0 8px}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--fg);color:var(--bg);padding:10px 16px;border-radius:6px;z-index:40;font-size:13px}

.srcgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.src{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:14px;text-align:left;display:flex;flex-direction:column;gap:4px}
.src:hover{border-color:var(--cta)}
.src strong{font-family:var(--display);font-size:18px}
.src span{font-size:12px;color:var(--muted)}
.colchips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.colchips span{background:var(--surface-2);border:1px solid var(--line);border-radius:4px;padding:2px 7px;font-size:12px;overflow-wrap:anywhere}
.drop{display:flex;flex-direction:column;gap:6px;border:2px dashed var(--line);border-radius:8px;padding:22px;background:var(--surface);cursor:pointer;max-width:640px}
.drop:hover{border-color:var(--cta)}
.drop span{font-size:13px;color:var(--muted)}
.flow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:14px 0}
.flow .node{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:10px 14px;display:flex;flex-direction:column;gap:2px;min-width:0}
.flow .node span{font-size:12px;color:var(--muted)}
.flow .node strong{font-family:var(--display);font-size:20px}
.flow .node.ok{border-color:var(--ok);background:var(--ok-soft)}
.flow .node.cta{border-color:var(--cta);background:var(--brass-soft)}
.flow .split{display:flex;flex-direction:column;gap:8px}
.flow .arrow{font-size:20px;color:var(--muted)}
/* ---- modern skin ---- */
.store-head{background:var(--hero);color:var(--hero-fg);border-bottom:0;padding:10px 16px;grid-template-columns:auto auto 1fr auto;gap:14px}
.store-head .logo{color:var(--hero-fg)}
.store-head .logo small{color:var(--hero-muted)}
.deliver{background:none;border:1px solid transparent;border-radius:8px;color:var(--hero-fg);display:flex;gap:6px;align-items:center;padding:4px 8px;text-align:left;line-height:1.15}
.deliver:hover,.acct:hover{border-color:var(--hero-muted)}
.deliver svg{width:18px;height:18px;color:var(--cta);flex:none}
.deliver small,.acct small{display:block;font-size:11px;color:var(--hero-muted)}
.deliver strong,.acct strong{font-size:13px}
.store-head .search input{background:var(--surface);color:var(--fg);border:0;border-radius:10px 0 0 10px;padding:11px 14px}
.store-head .search button{border-radius:0 10px 10px 0;padding:0 18px}
.store-head .search button svg{width:18px;height:18px;display:block}
.store-head .head-tools select{background:transparent;color:var(--hero-fg);border:1px solid var(--foot-top);border-radius:8px}
.store-head .head-tools select option{color:#121A2B}
.acct{background:none;border:1px solid transparent;border-radius:8px;color:var(--hero-fg);padding:4px 8px;text-align:left;line-height:1.15}
.cart-btn{background:var(--cta);color:var(--cta-fg);border:0;border-radius:10px;padding:9px 14px}
.cart-btn svg{width:20px;height:20px}
.cart-btn .count{background:var(--hero);color:var(--hero-fg)}
.navrow{background:var(--nav);border-bottom:0;gap:2px}
.navrow button{color:var(--hero-muted);border-bottom-width:3px;padding:9px 12px}
.navrow button:hover{color:var(--hero-fg)}
.navrow button[aria-current="page"]{color:var(--hero-fg)}
.card{border-radius:var(--radius);border-color:transparent;box-shadow:0 1px 2px rgba(18,26,43,.06),0 0 0 1px var(--line)}
.card:hover{box-shadow:0 10px 28px rgba(18,26,43,.12),0 0 0 1px var(--cta);transform:translateY(-2px)}
.card .pic{background:radial-gradient(circle at 50% 40%,var(--surface) 0,var(--surface-2) 70%)}
.card .go{font-size:12px;font-weight:700;color:var(--accent)}
.bike,.cat,.src,.tile,.tablewrap,.finder{border-radius:var(--radius)}
.bike:hover,.cat:hover{box-shadow:0 10px 24px rgba(18,26,43,.1);transform:translateY(-2px)}
.btn{border-radius:8px}
.btn.primary{border-radius:999px;padding-inline:18px}
.promos{max-width:1240px;margin:-36px auto 0;padding-inline:16px;position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.promo{background:var(--surface);border-radius:var(--radius);padding:16px;display:flex;flex-direction:column;gap:10px;box-shadow:0 8px 24px rgba(10,22,48,.12);border:0;text-align:left}
.promo h3{margin:0;font-family:var(--display);font-size:19px;font-weight:700}
.promo .art{background:var(--brass-soft);color:var(--brass);border-radius:10px;height:110px;display:grid;place-items:center}
.promo .art svg{width:54px;height:54px}
.promo .more{font-size:13px;font-weight:600;color:var(--accent)}
.promo:hover{box-shadow:0 14px 30px rgba(10,22,48,.18)}
.signin{max-width:1240px;margin:34px auto 0;padding-inline:16px}
.signin div{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px 16px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px}
.signin h2{font-family:var(--display);font-size:24px;margin:0}
.signin .btn.primary{min-width:260px;padding:10px 18px}
.signin p{margin:0;font-size:13px}
.signin a,.signin .lnk{color:var(--accent);text-decoration:underline;background:none;border:0;padding:0;font:inherit;cursor:pointer}
/* amazon-style footer */
.sitefoot2{margin-top:44px;color:var(--mode-fg)}
.totop{display:block;width:100%;background:var(--foot-top);color:#fff;border:0;padding:15px;font-size:13px;font-weight:500}
.totop:hover{filter:brightness(1.12)}
.fcols{background:var(--foot)}
.fcols-in{max-width:1000px;margin:0 auto;padding-block:40px 34px;padding-inline:16px;display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.fcols h4{color:#fff;font-size:16px;font-weight:700;margin:0 0 12px}
.fcols ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.fcols li button,.fcols li a{background:none;border:0;padding:0;color:#C9D3E4;font-size:14px;text-align:left;text-decoration:none;cursor:pointer}
.fcols address{font-style:normal;color:#9AA7BF;font-size:13px;line-height:1.5;margin-top:4px}
.fcols li button:hover,.fcols li a:hover{color:#fff;text-decoration:underline}
.fbrand{background:var(--foot);border-top:1px solid rgba(255,255,255,.1)}
.fbrand-in{max-width:1100px;margin:0 auto;padding:22px 16px;display:flex;gap:20px 32px;align-items:center;justify-content:center;flex-wrap:wrap}
.fbrand .logo{color:#fff}
.fprefs{display:flex;align-items:stretch;border:1px solid rgba(255,255,255,.22);border-radius:10px;background:rgba(255,255,255,.04);overflow:hidden}
.fpref{display:flex;align-items:center;gap:6px;padding:4px 6px 4px 12px;border-left:1px solid rgba(255,255,255,.14);color:#B9C3D6}
.fpref:first-child{border-left:0}.fpref svg{width:16px;height:16px;flex:none}
.fpref:hover,.fpref:focus-within{background:rgba(255,255,255,.07);color:#fff}
.fbrand select{appearance:none;-webkit-appearance:none;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23B9C3D6' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 6px center;color:#fff;border:0;padding:8px 22px 8px 2px;font:inherit;font-size:14px;font-weight:500;cursor:pointer;min-width:0}
.fbrand select:focus-visible{outline:2px solid var(--brass);outline-offset:2px;border-radius:4px}
@media(max-width:640px){.fprefs{display:grid;grid-template-columns:1fr 1fr;width:100%}.fpref{border-left:0;border-top:1px solid rgba(255,255,255,.14)}.fpref:nth-child(-n+2){border-top:0}.fpref:nth-child(even){border-left:1px solid rgba(255,255,255,.14)}.fbrand select{width:100%}}
.fbrand select option{color:#121A2B}
.fsis{background:var(--foot-2)}
.fsis-in{max-width:1000px;margin:0 auto;padding:26px 16px 10px;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;font-size:12px;line-height:1.35}
.fsis strong{display:block;color:#DDE3EE;font-weight:600}
.fsis span{color:#98A3B8}
.flegal{background:var(--foot-2);text-align:center;color:#98A3B8;font-size:12px;padding:10px 16px 26px}
.flegal button{background:none;border:0;color:#C9D3E4;font-size:12px;padding:0 6px}
.hubs{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.hub{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px;display:flex;flex-direction:column;gap:6px;font-size:13px;text-align:left}
.hub.def{border-color:var(--ok)}
.hub.add{border-style:dashed;justify-content:center;align-items:flex-start}
.hub.add:hover{border-color:var(--cta)}
.fs{border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;display:flex;flex-direction:column;gap:10px;margin:0;min-width:0}
.fs legend{font-weight:700;padding:0 6px}
.fs .hint{margin:0;font-size:13px;color:var(--muted)}
.fitrow{display:grid;grid-template-columns:1fr 1.3fr 90px 90px auto;gap:8px}
.fitrow select,.fitrow input{border:1px solid var(--line);background:var(--surface-2);padding:7px 8px;border-radius:6px;min-width:0}
.tagchip{display:inline-block;background:var(--accent-soft);border-radius:12px;padding:1px 9px;font-size:12px;margin:1px 0}
.search{position:relative}
.suggest{position:absolute;left:0;right:0;top:calc(100% + 6px);background:var(--surface);color:var(--fg);border-radius:10px;box-shadow:0 14px 34px rgba(10,22,48,.25);z-index:15;overflow:hidden;display:flex;flex-direction:column}
.suggest button{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;background:none;border:0;border-bottom:1px solid var(--line);padding:9px 12px;text-align:left;color:var(--fg)}
.suggest button:hover,.suggest button:focus-visible{background:var(--surface-2)}
.suggest .pn{font-family:var(--mono);font-size:12px;color:var(--muted)}
.suggest .pn.hit{background:var(--brass-soft);color:var(--fg);border-radius:4px;padding:0 4px}
.suggest .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.suggest .all{grid-template-columns:1fr;color:var(--accent);font-weight:600;border-bottom:0}
.search .suggest button{background:var(--surface);color:var(--fg);border-radius:0;font-weight:400;font-size:14px;padding:9px 12px;border:0;border-bottom:1px solid var(--line)}
.search .suggest button:hover,.search .suggest button:focus-visible{background:var(--surface-2);outline:none}
.search .suggest .all{color:var(--accent);font-weight:600;border-bottom:0}
.suggest .sgq .cnote{margin-left:6px;font-size:12px}.suggest .sgi{color:var(--accent)}
.suggest .sgh{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:8px 12px 4px}
.search .suggest .sgq{display:flex;align-items:baseline;gap:4px;font-size:14px}.suggest .sgq.dym{background:var(--brass-soft)}
.suggest .sgp{grid-template-columns:34px 1fr auto}.suggest .sgi{width:34px;height:34px;border-radius:6px;background:var(--surface-2);display:grid;place-items:center}.suggest .sgi svg{width:22px;height:22px}
.suggest .nm{display:flex;flex-direction:column}.suggest .nm small{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.suggest mark{background:var(--brass-soft);color:inherit;border-radius:3px;padding:0 1px}
.suggest .ins{color:var(--ok)}.suggest .oos{color:var(--bad)}
.micbtn{border:0;background:var(--surface);color:var(--muted);padding:0 8px;display:grid;place-items:center}.micbtn svg{width:20px;height:20px}.micbtn:hover{color:var(--accent)}
.srch-for{margin:0 0 10px;font-size:14px}.srgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.srgrid table{width:100%}@media(max-width:640px){.srgrid{grid-template-columns:1fr}}
.suggest .none{padding:10px 12px;color:var(--muted)}
.btn.primary,.cart-btn,.search button{background:linear-gradient(180deg,#FFC547,#FFA70F);color:var(--cta-fg);border-color:#F59E0B;box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 2px 6px rgba(245,158,11,.25)}
.btn.primary:hover,.cart-btn:hover,.search button:hover{filter:brightness(1.04)}
.btn.primary:disabled{box-shadow:none}
.tint{background:var(--tb)!important;color:var(--tf)!important}
.cat .ic,.promo .art{transition:transform .18s}
.cat:hover .ic,.promo:hover .art{transform:scale(1.04)}
.card .pic{color:var(--tf,var(--accent))}
.card .pic::after{content:"";position:absolute;inset:0;background:var(--tb,transparent);opacity:.6;pointer-events:none}
.card .pic>*{position:relative;z-index:1}
.trust-in svg{color:var(--accent)}
.why div{border-top-color:var(--accent)}
.why div:nth-child(2){border-top-color:var(--cta)}
.why div:nth-child(3){border-top-color:var(--ok)}
@media (max-width:860px){
  .store-head{grid-template-columns:1fr auto}
  .deliver,.acct{display:none}
  .promos{grid-template-columns:1fr 1fr;margin-top:-20px}
  .fcols-in{grid-template-columns:1fr 1fr}
  .fsis-in{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:no-preference){.card,.bike,.cat,.promo{transition:transform .18s,box-shadow .18s}}
@media (max-width:860px){
  .store-head{grid-template-columns:1fr}
  .search{grid-column:1/-1;order:3}
  .shop{grid-template-columns:1fr}
  .rail{display:none}
  .rail.open{display:flex}
  .filter-toggle{display:inline-block}
  .modal{grid-template-columns:1fr}
  .modal .pic{min-height:160px}
  .panel{grid-template-columns:1fr}
  .side{flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line)}
  .side .who{display:none}
  .side button{white-space:nowrap}
  .form-grid,#entForm,#bikeForm{grid-template-columns:1fr!important}
  .fitrow{grid-template-columns:1fr 1fr}
  .modebar .note{display:none}
  .hero-in{grid-template-columns:1fr;padding-block:28px 32px}
  .hero-art{display:none}
  .trust-in{grid-template-columns:1fr 1fr}
  .bikes{grid-template-columns:1fr 1fr}
  .cats{grid-template-columns:repeat(4,1fr)}
  .why{grid-template-columns:1fr}
  .ship,.sellcta{grid-template-columns:1fr}
  .sitefoot-in{grid-template-columns:1fr 1fr}
}
@media (max-width:480px){.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.card .pic svg{width:40px;height:40px}.price{font-size:19px}.card .foot{flex-direction:column;align-items:flex-start;gap:4px}.finder .row{grid-template-columns:1fr 1fr}.finder .row select:last-child{grid-column:1/-1}.cats{grid-template-columns:repeat(2,1fr)}}
@media (prefers-reduced-motion:no-preference){.card{transition:border-color .15s}}
.chero{background:var(--hero-grad);color:var(--hero-fg)}
.chero-in{max-width:1240px;margin:0 auto;padding:34px 16px;display:flex;justify-content:space-between;gap:24px;align-items:end;flex-wrap:wrap}
.chero h1{font-family:var(--display);font-size:clamp(28px,4vw,42px);margin:4px 0 8px;line-height:1.05;max-width:20ch}
.chero p{color:var(--hero-muted);max-width:60ch;margin:0}
.chero .eyebrow{color:var(--cta);font-family:var(--mono,monospace);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.cstats{display:flex;gap:22px}.cstats div{display:flex;flex-direction:column;font-size:13px;color:var(--hero-muted)}.cstats b{font-family:var(--display);font-size:28px;color:var(--hero-fg)}
.comm{max-width:1240px;margin:0 auto;padding:20px 16px 34px;display:grid;grid-template-columns:240px minmax(0,1fr) 280px;gap:20px;align-items:start}
.cside{background:var(--surface);border-radius:var(--radius);box-shadow:0 0 0 1px var(--line);padding:14px;display:flex;flex-direction:column;gap:6px;position:sticky;top:12px}
.cside h3{font-family:var(--display);font-size:17px;margin:8px 0 4px}.cside h3:first-child{margin-top:0}
.club{display:flex;align-items:center;gap:6px;border-radius:8px;padding:4px;background:none;border:0;text-align:left;font-weight:600;color:var(--fg)}
.club.on{background:var(--accent-soft)}.club>button:first-child{flex:1;background:none;border:0;text-align:left;padding:2px 4px;display:flex;flex-direction:column;color:var(--fg);min-width:0}
.club small{color:var(--muted);font-size:12px;font-weight:400}
.composer{background:var(--surface);border-radius:var(--radius);box-shadow:0 0 0 1px var(--line);padding:14px;display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.composer h2{font-family:var(--display);font-size:20px;margin:0}
.composer input,.composer textarea,.composer select,.cform input{border:1px solid var(--line);background:var(--surface-2);color:var(--fg);border-radius:8px;padding:8px 10px;font:inherit;min-width:0}
.crow{display:flex;gap:8px;flex-wrap:wrap}.crow>*{flex:1 1 140px}.crow .btn{flex:0 0 auto}
.ctabs{display:flex;gap:6px;overflow-x:auto;margin-bottom:12px}
.ctabs button{border:1px solid var(--line);background:var(--surface);border-radius:20px;padding:6px 14px;white-space:nowrap;color:var(--fg)}
.ctabs button[aria-selected="true"]{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
.post{background:var(--surface);border-radius:var(--radius);box-shadow:0 0 0 1px var(--line);padding:16px;margin-bottom:12px}
.post.pinned{box-shadow:0 0 0 2px var(--cta)}
.post>header{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.post>header>div{flex:1;min-width:140px}
.post .meta{color:var(--muted);font-size:12px}
.av{width:38px;height:38px;border-radius:50%;background:var(--accent);color:var(--accent-fg);display:inline-grid;place-items:center;font-weight:700;font-size:14px;flex:none}.av.sm{width:26px;height:26px;font-size:11px}
.cc{font-family:var(--mono,monospace);font-size:10px;border:1px solid var(--line);border-radius:3px;padding:0 3px;color:var(--muted)}
.topic{font-size:12px;font-weight:600;border-radius:12px;padding:2px 9px;background:var(--accent-soft);color:var(--accent)}
.t-ride{background:var(--t-lighting);color:var(--tf-lighting)}.t-help{background:var(--t-transmission);color:var(--tf-transmission)}.t-build{background:var(--t-body);color:var(--tf-body)}.t-meet{background:var(--t-suspension);color:var(--tf-suspension)}.t-photo{background:var(--t-brakes);color:var(--tf-brakes)}
.post h3{font-family:var(--display);font-size:21px;margin:10px 0 6px}
.post p{margin:0 0 8px;max-width:72ch}
.post .ph{border-radius:10px;overflow:hidden;margin:6px 0 10px}.post .ph svg{display:block;width:100%;height:auto}
.linkbtn.small{font-size:13px}
.cparts{display:flex;flex-direction:column;gap:6px;background:var(--surface-2);border-radius:10px;padding:10px;margin:8px 0}
.cparts>span{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.cparts button{display:flex;gap:8px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:7px 10px;text-align:left;color:var(--fg)}
.cparts button b{color:var(--accent);font-size:13px}.cparts button span{margin-left:auto;font-weight:700}
.post footer{display:flex;gap:6px;border-top:1px solid var(--line);padding-top:8px;margin-top:6px;flex-wrap:wrap}
.react{background:none;border:0;border-radius:6px;padding:5px 9px;color:var(--muted);font-weight:500}.react:hover{background:var(--surface-2);color:var(--fg)}.react.on{color:var(--accent);background:var(--accent-soft)}
.comments{border-top:1px solid var(--line);margin-top:8px;padding-top:8px;display:flex;flex-direction:column;gap:8px}
.cm{background:var(--surface-2);border-radius:10px;padding:8px 12px}.cm.staff{background:var(--accent-soft)}.cm p{margin:2px 0 0}
.cform{display:flex;gap:8px}.cform input{flex:1}
.event{border:1px solid var(--line);border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:4px}
.event .date{font-family:var(--display);color:var(--brass);font-weight:700}.event small{color:var(--muted)}
.helpers{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}.helpers li{display:flex;gap:6px;align-items:center;font-size:14px}.helpers li .num{margin-left:auto;color:var(--muted);font-size:12px}
.cnote{color:var(--muted);font-size:13px;margin:0}
.chome{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.chcard{background:var(--surface);border:0;border-radius:var(--radius);box-shadow:0 0 0 1px var(--line);padding:16px;display:flex;flex-direction:column;gap:8px;align-items:flex-start;text-align:left;color:var(--fg)}
.chcard:hover{box-shadow:0 0 0 2px var(--accent)}.chcard strong{font-family:var(--display);font-size:19px;line-height:1.15}.chcard small{color:var(--muted)}
@media (max-width:1060px){.comm{grid-template-columns:220px minmax(0,1fr)}.cside.right{grid-column:1/-1;position:static}}
@media (max-width:760px){.comm{grid-template-columns:1fr}.comm>main{order:-1}.cside{position:static}.chome{grid-template-columns:1fr}}
.slider{max-width:1240px;margin:-36px auto 0;padding-inline:16px;position:relative}
.strack{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:2px 2px 14px}
.strack::-webkit-scrollbar{display:none}
.slide{flex:0 0 calc((100% - 3*14px)/3.6);scroll-snap-align:start;background:var(--sc);color:#fff;border:0;border-radius:16px;padding:18px 18px 14px;display:flex;flex-direction:column;gap:4px;text-align:left;min-height:330px;box-shadow:0 10px 26px rgba(10,22,48,.22);position:relative;overflow:hidden}
.slide::before{content:"";position:absolute;inset:0;background:radial-gradient(260px 160px at 100% 0,rgba(255,255,255,.22),transparent 70%);pointer-events:none}
.slide .offer{font-family:var(--display);font-weight:800;font-size:30px;line-height:1.02;letter-spacing:-.01em}
.slide .stitle{font-size:17px;font-weight:600;opacity:.95}
.slide .art{margin:10px 0 8px;flex:1;min-height:120px;background:rgba(255,255,255,.95);color:var(--sc);border-radius:12px;display:grid;place-items:center}
.slide .art svg{width:70px;height:70px}
.slide .ssub{font-size:13px;opacity:.9}
.slide .strip{margin-top:6px;background:#FFE58A;color:#3A2600;border-radius:999px;padding:6px 12px;font-size:13px;font-weight:700;display:flex;justify-content:space-between;gap:8px}
.slide .strip b{color:#7A1E00;font-weight:700}
.slide:hover .art svg{transform:scale(1.08)}.slide .art svg{transition:transform .2s}
.sarrow{position:absolute;top:calc(50% - 30px);width:42px;height:64px;border:0;border-radius:8px;background:var(--surface);color:var(--fg);font-size:30px;box-shadow:0 4px 14px rgba(0,0,0,.2);z-index:2}
.sarrow.l{left:4px}.sarrow.r{right:4px}
.spause{position:absolute;right:16px;top:-42px;width:32px;height:32px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.12);color:#fff;font-size:11px;z-index:2}
.spreview{background:var(--surface-2);padding:18px;display:flex;flex-direction:column;gap:8px}.spreview p{margin:0;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.spreview .slide{flex:none;width:100%;min-height:320px}
.swatches{border:0;padding:0;margin:0;display:flex;gap:8px;flex-wrap:wrap}.swatches legend{font-size:13px;margin-bottom:4px}
.swatches label{position:relative;cursor:pointer}.swatches input{position:absolute;opacity:0}.swatches span{display:block;width:30px;height:30px;border-radius:50%;box-shadow:0 0 0 2px var(--surface),0 0 0 3px var(--line)}
.swatches input:checked+span{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--fg)}.swatches input:focus-visible+span{outline:2px solid var(--accent);outline-offset:3px}.swatches em{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.sw{display:inline-block;width:22px;height:22px;border-radius:6px;vertical-align:middle}
@media (max-width:860px){.slider{margin-top:-20px}.slide{flex-basis:calc((100% - 14px)/1.7)}.sarrow{display:none}}
@media (max-width:520px){.slide{flex-basis:82%}}
@media (max-width:700px){.modal:has(#slideForm){grid-template-columns:1fr!important}}
.rrow{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.rbox{background:var(--surface);border-radius:var(--radius);box-shadow:0 0 0 1px var(--line);padding:14px;display:flex;flex-direction:column;gap:8px;min-width:0}
.rhead{display:flex;justify-content:space-between;align-items:center;background:none;border:0;padding:0;color:var(--fg);text-align:left}
.rhead h3{margin:0;font-family:var(--display);font-size:19px}.rhead span{font-size:26px;line-height:1;color:var(--muted)}
.rhead:hover h3{color:var(--accent)}
.rnote{margin:0;color:var(--muted);font-size:13px}
.rgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ritem{background:none;border:0;padding:0;display:flex;flex-direction:column;gap:4px;text-align:left;color:var(--fg);min-width:0}
.rpic{background:var(--tb);color:var(--tf);border-radius:10px;aspect-ratio:1;display:grid;place-items:center}.rpic svg{width:42px;height:42px;transition:transform .18s}
.ritem:hover .rpic svg{transform:scale(1.08)}
.rname{font-size:12px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rprice{font-size:13px;font-weight:700}
@media (max-width:1000px){.rrow{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.rrow{display:flex;overflow-x:auto;scroll-snap-type:x mandatory}.rbox{flex:0 0 85%;scroll-snap-align:start}}

.store-head .search{height:46px;border-radius:10px;box-shadow:0 0 0 2px rgba(255,178,30,.0);transition:box-shadow .15s}
.store-head .search:focus-within{box-shadow:0 0 0 3px var(--cta)}
.store-head .search input{background:#FFFFFF!important;color:#0F172A!important;border:0!important;border-radius:0!important;padding:0 14px!important;font-size:15px}
.store-head .search input::placeholder{color:#64708A}
.store-head .search input:focus{outline:none}
.store-head .search select#qcat{background:#E9EDF5;color:#1E293B;border:0;border-right:1px solid #CBD3E1;border-radius:10px 0 0 10px;padding:0 6px 0 12px;font-size:13px;width:78px;cursor:pointer}
.store-head .search button{border-radius:0 10px 10px 0!important;padding:0 20px!important}
.themebtn{width:38px;height:38px;border-radius:50%;border:1px solid var(--foot-top);background:transparent;color:var(--hero-fg);display:grid;place-items:center;flex:none}
.themebtn:hover{background:rgba(255,255,255,.1)}.themebtn svg{width:18px;height:18px}
@media (max-width:520px){.store-head .search select#qcat{max-width:64px;padding:0 4px 0 8px}}
/* ---------- phone layout ---------- */
.railDone,.mtab,.railscrim{display:none}
@media (max-width:640px){
  body{padding-bottom:calc(62px + env(safe-area-inset-bottom,0px))}
  .modebar{flex-wrap:nowrap;overflow-x:auto;padding:6px 12px;gap:8px;scrollbar-width:none}.modebar .tabs{flex-wrap:nowrap}.modebar button{white-space:nowrap;padding:4px 8px;font-size:12px}.modebar .note{display:none}
  .store-head{display:flex!important;flex-wrap:wrap;gap:10px;padding:10px 12px}
  .store-head .logo{flex:1;font-size:22px}.store-head .logo svg{width:32px;height:32px}
  .store-head .head-tools{gap:6px}
  .store-head #lang,.store-head #cur,.store-head .acct{display:none}
  .store-head .cart-btn{font-size:0;padding:8px 10px;gap:4px}.store-head .cart-btn .count{font-size:12px}
  .store-head .search{order:3;flex:1 1 100%}
  .store-head .deliver:not([hidden]){display:flex!important}
  .store-head .deliver{order:4;flex:1 1 100%;background:rgba(255,255,255,.07);border-radius:8px;padding:6px 10px}
  .store-head .deliver>span{display:flex;align-items:baseline;gap:5px}.store-head .deliver small{display:inline}
  .navrow{padding:0 6px}.navrow button{padding:8px 10px;font-size:14px}
  .hero-in{grid-template-columns:1fr;padding-block:22px 54px;gap:16px}.hero-art{display:none}
  .hero h1{font-size:32px;margin:6px 0 8px}.hero p.lead{font-size:14px;margin-bottom:14px}
  .hsec{padding-block:22px 4px;padding-inline:12px}.hsec h2{font-size:23px}
  .slider{padding-inline:12px}
  .slide{min-height:250px;padding:14px}.slide .offer{font-size:25px}.slide .stitle{font-size:15px}.slide .art{min-height:84px}.slide .art svg{width:50px;height:50px}
  .spause{top:-38px}
  .trust-in{gap:12px;padding:12px}
  .bikes{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;padding-bottom:6px;scrollbar-width:none}.bike{flex:0 0 44%;scroll-snap-align:start;padding:10px}.bike svg{max-height:46px}
  .cats{grid-template-columns:repeat(4,1fr);gap:8px}.cat{padding:10px 4px;font-size:12px;gap:6px}.cat .ic{width:44px;height:44px}.cat .ic svg{width:22px;height:22px}
  .grid{grid-template-columns:1fr!important;gap:10px!important}
  .card{flex-direction:row;align-items:stretch}
  .card .pic{aspect-ratio:auto;width:116px;flex:none;min-height:130px}.card .pic svg{width:40px!important;height:40px!important}
  .card .pic .badge{top:6px;left:6px;font-size:9px;padding:1px 5px}
  .card .body{padding:10px 12px;min-width:0}.card .name{font-size:15px}
  .why{grid-template-columns:1fr;gap:14px}
  .shop{padding:12px}
  .fitbar{padding:14px 12px;gap:8px}.fitbar h2{flex:1 1 100%;font-size:18px}.fitbar select{flex:1 1 30%;min-width:0}
  .rail.open{display:flex;position:fixed;left:0;right:0;bottom:0;max-height:82vh;overflow:auto;background:var(--surface);z-index:30;padding:18px 16px calc(16px + env(safe-area-inset-bottom,0px));border-radius:18px 18px 0 0;box-shadow:0 -10px 30px rgba(0,0,0,.25)}
  .rail.open .railDone{display:block;position:sticky;bottom:0;width:100%;padding:12px;flex:none}
  .railscrim{display:block;position:fixed;inset:0;background:rgba(10,14,18,.45);z-index:29}
  .scrim{align-items:flex-end;padding:0}
  .modal{grid-template-columns:1fr!important;border-radius:18px 18px 0 0!important;max-height:92vh;overflow:auto;max-width:100%!important}
  .modal .pic{min-height:130px}.modal .pic svg{width:72px;height:72px}
  .modal h2{font-size:24px}
  .comm{display:flex;flex-direction:column;padding:12px 12px 24px;gap:12px}
  .comm>main{order:2}.cside{order:1}.cside.right{order:3}
  .comm>*{min-width:0;max-width:100%}
  .cside:not(.right){flex-direction:row;overflow-x:auto;padding:10px;gap:8px;scrollbar-width:none}
  .cside:not(.right) h3,.cside:not(.right) .club small{display:none}
  .cside:not(.right) .club{flex:0 0 auto;border:1px solid var(--line);border-radius:12px;padding:6px 8px}
  .chero-in{padding:22px 12px}.chero h1{font-size:28px}.cstats{gap:16px}.cstats b{font-size:22px}
  .post{padding:12px}.post h3{font-size:19px}
  .fcols-in{gap:18px;padding-block:26px}
  .tiles{grid-template-columns:1fr 1fr}.tile .v{font-size:24px}
  .toast{bottom:calc(74px + env(safe-area-inset-bottom,0px))}
  .mtab{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:15;background:var(--surface);border-top:1px solid var(--line);padding:4px 4px calc(4px + env(safe-area-inset-bottom,0px));box-shadow:0 -4px 16px rgba(10,22,48,.08)}
  .mtab button{flex:1;background:none;border:0;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;color:var(--muted);padding:6px 2px;min-height:48px}
  .mtab button svg{width:22px;height:22px}
  .mtab button[aria-current="page"]{color:var(--accent);font-weight:700}
  .mtab .mc{position:relative;display:block}.mtab .mc b{position:absolute;top:-4px;right:-10px;background:var(--cta);color:var(--cta-fg);border-radius:9px;font-size:10px;padding:0 5px;line-height:16px}
}
.trlangs{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;margin-bottom:22px}
.trlang{background:var(--surface);border-radius:var(--radius);box-shadow:0 0 0 1px var(--line);padding:14px;display:flex;flex-direction:column;gap:8px}
.trlang.on{box-shadow:0 0 0 2px var(--accent)}
.trlang h3{font-family:var(--display);font-size:19px;margin:0}
.trlang.add{border:2px dashed var(--line);box-shadow:none;background:transparent}
.trlang small{color:var(--muted);font-size:12px}
.trlang select{border:1px solid var(--line);background:var(--surface-2);color:var(--fg);padding:7px;border-radius:6px}
.bar{height:8px;border-radius:6px;background:var(--surface-2);position:relative;overflow:hidden}
.bar span{position:absolute;inset:0 auto 0 0;background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent)}
.bar i{position:absolute;inset:0 auto 0 0;background:var(--ok)}
.bar.busy span{width:40%;background:var(--accent);animation:trbusy 1s linear infinite}
@keyframes trbusy{from{left:-40%}to{left:100%}}
.trsw{display:flex;gap:8px;align-items:center;font-size:13px}
.trbox{width:100%;border:1px solid var(--line);background:var(--surface-2);color:var(--fg);border-radius:6px;padding:6px 8px;font:inherit;font-size:14px;resize:vertical}
.trbox:focus{outline:2px solid var(--accent);background:var(--surface)}
#glossForm input{border:1px solid var(--line);background:var(--surface-2);color:var(--fg);border-radius:6px;padding:7px 9px}
.trnote{font-size:12px;color:var(--muted)}
.trflow{list-style:none;margin:0 0 18px;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.trflow li{background:var(--surface);border-radius:var(--radius);box-shadow:0 0 0 1px var(--line);padding:12px;font-size:13px;color:var(--muted)}
.trflow b{display:block;color:var(--fg);font-family:var(--display);font-size:17px;margin-bottom:2px}
.trrow{display:grid;grid-template-columns:100px 1fr 38px;gap:8px;align-items:center;font-size:13px}.trrow small{text-align:right}
.trkey{display:flex;gap:6px;align-items:center}.trkey i{display:inline-block;width:10px;height:10px;border-radius:3px}.trkey .k1{background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent)}.trkey .k2{background:var(--ok);margin-left:8px}
.trf{border-top:1px solid var(--line);padding-top:10px;display:flex;flex-direction:column;gap:6px}
.trf-h{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:12px}.trf-h strong{font-size:15px}
.trf-g{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.trf-o{background:var(--surface-2);border-radius:6px;padding:6px 8px;font-size:14px}
.trf-cols{display:grid;grid-template-columns:1fr 1fr;gap:10px;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.pdesc{margin:0;font-size:14px;line-height:1.5}
@media (max-width:860px){.trflow{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.trflow,.trf-g,.trf-cols{grid-template-columns:1fr}.trf-cols{display:none}}
.pfbar{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-bottom:10px}
.pfl{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--muted)}
.pfl select,.pfl input{border:1px solid var(--line);background:var(--surface);color:var(--fg);padding:7px 9px;border-radius:6px;font-size:14px;min-width:0}
.pfl.grow{flex:1 1 200px}
.pfsum{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:8px;font-size:14px}
.pfsum input{border:1px solid var(--line);background:var(--surface);color:var(--fg);padding:5px 7px;border-radius:6px}
.ruleform{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;background:var(--surface);box-shadow:0 0 0 1px var(--line);border-radius:var(--radius);padding:12px;margin:10px 0 6px}
.ruleform>strong{flex:1 1 100%;font-family:var(--display);font-size:17px}
.ruleform select{max-width:240px}
td input[type=number]{border:1px solid var(--line);background:var(--surface-2);color:var(--fg);padding:4px 6px;border-radius:4px}
.tl{list-style:none;margin:0;padding:0 0 0 6px}
.tl li{position:relative;padding:0 0 16px 24px;border-left:2px solid var(--line);margin-left:6px}
.tl li:last-child{border-left-color:transparent;padding-bottom:0}
.tl li::before{content:"";position:absolute;left:-8px;top:2px;width:14px;height:14px;border-radius:50%;background:var(--surface);border:2px solid var(--line)}
.tl li.done{border-left-color:var(--ok)}.tl li.done::before{background:var(--ok);border-color:var(--ok)}
.tl li.cur::before{box-shadow:0 0 0 4px var(--ok-soft)}
.tl li.bad::before{background:var(--bad);border-color:var(--bad);box-shadow:0 0 0 4px var(--bad-soft)}
.tl li b{display:block;font-size:14px}.tl li:not(.done):not(.bad) b{color:var(--muted);font-weight:500}
.tl li>span{font-size:12px;color:var(--muted)}
.tlx{font-size:12px;margin-top:3px;background:var(--surface-2);border-radius:6px;padding:4px 8px;display:inline-block}.tlx.bad{background:var(--bad-soft);color:var(--bad)}
.myo-card{background:var(--surface);border-radius:var(--radius);box-shadow:0 0 0 1px var(--line);padding:16px;margin-bottom:14px}
.myo-card h3{font-family:var(--display);font-size:18px;margin:0 0 10px}
.myo-card p{margin:0 0 10px}
.myo-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:14px;margin-top:10px}
.ord-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:14px;align-items:start}
.myo-item{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid var(--line);font-size:14px}.myo-item.tot{font-weight:700;border:0}
.myo-row{display:flex;align-items:center;gap:12px;width:100%;background:var(--surface);border:0;border-radius:var(--radius);box-shadow:0 0 0 1px var(--line);padding:14px 16px;margin-bottom:10px;text-align:left;color:var(--fg)}
.myo-row>span:first-child{flex:1;display:flex;flex-direction:column}.myo-row small{color:var(--muted)}.myo-row .more{color:var(--accent);font-weight:600;font-size:14px}
.trk{background:var(--surface);border-radius:var(--radius);box-shadow:0 0 0 1px var(--line);padding:14px;margin-bottom:14px}
.trk-h{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin-bottom:8px}.trk-h>span{color:var(--muted);font-size:13px;flex:1}
.trk ol{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-direction:column;gap:6px}
.trk li{display:flex;justify-content:space-between;gap:10px;font-size:13px;color:var(--muted)}.trk li.now{color:var(--fg)}.trk li.now b::before{content:"● ";color:var(--ok)}
.rt{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}.rt label{display:flex;gap:8px;align-items:flex-start;border:1px solid var(--line);border-radius:8px;padding:10px}.rt small{display:block;color:var(--muted);font-size:13px}
.oset summary{cursor:pointer;list-style:revert}.oset summary .cnote{display:block;margin-top:2px}.oset-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin:12px 0 8px}
.pkrow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;flex:1 1 100%;align-items:end;margin:4px 0}.pkrow .pklbl{grid-column:1/-1;font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}.pkrow input{width:100%}@media (max-width:600px){.pkrow{grid-template-columns:repeat(2,minmax(0,1fr))}}
.issuebox{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-top:10px;background:var(--bad-soft);border-radius:8px;padding:10px}
.myo-card .crow select,.myo-card .crow input,.vord .crow select,.vord .crow input{border:1px solid var(--line);background:var(--surface-2);color:var(--fg);padding:8px;border-radius:6px;min-width:0}
.vord{background:var(--surface);border-radius:var(--radius);box-shadow:0 0 0 1px var(--line);padding:14px;margin-bottom:12px;display:flex;flex-direction:column;gap:8px}
.vord.hot{box-shadow:0 0 0 2px var(--cta)}
.vord-h{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.vord-h .num{margin-left:auto;color:var(--muted);font-size:13px}
.vord-a{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.vord-a p{flex:1 1 100%;margin:0}.vord-a .crow{flex:1 1 100%}
.cnote.bad{color:var(--bad)}
.hsnin{font-family:var(--mono,monospace);font-size:12px;padding:4px 6px}.hsnin.miss{border-color:var(--bad);background:var(--bad-soft,transparent)}.hsn-miss{color:#c0262d;font-weight:700;font-family:inherit}.hsncell{display:flex;align-items:center;gap:10px}.callout.bad{background:var(--bad-soft,#fde8e8);color:var(--bad)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.invoice .info{gap:14px}.invh{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}.invh p{margin:6px 0 0;font-size:13px;color:var(--muted);line-height:1.5}.invh .r{text-align:right}.invh h2{font-size:26px}
.invto{font-size:14px;background:var(--surface-2);border-radius:8px;padding:10px}
.invt{width:100%;border-collapse:collapse;font-size:14px}.invt th,.invt td{padding:8px 6px;border-bottom:1px solid var(--line);text-align:left}.invt .r{text-align:right}.invt .tot td{font-weight:700;font-size:16px;border:0}
.invn{font-size:12px;color:var(--muted);margin:0}
@media print{body>*:not(#overlay){display:none!important}#overlay .scrim{position:static;background:none;padding:0}.invoice{box-shadow:none;max-width:100%!important}.noprint,.mtab{display:none!important}body{background:#fff;padding:0}}
@media (max-width:860px){.myo-grid,.ord-grid{grid-template-columns:1fr}}

/* ---- header alignment (v31) ---- */
.store-head:has(.search){display:grid!important;grid-template-columns:auto auto minmax(0,1fr) auto;grid-template-areas:"logo deliver search tools";column-gap:18px;row-gap:10px;align-items:center;padding:10px 20px}
.store-head:has(.search)>.logo{grid-area:logo}
.store-head:has(.search)>.deliver{grid-area:deliver}
.store-head .search{grid-area:search;order:0;min-width:0;height:46px;align-self:center;overflow:visible}
.store-head .search input{flex:1 1 auto;min-width:80px}
.store-head .head-tools{grid-area:tools;gap:8px;justify-self:end;align-items:center}
.store-head .search .micbtn{background:#FFFFFF!important;color:#64708A!important;border-radius:0!important;padding:0 12px!important;border:0;border-left:1px solid #E2E7F0!important}
.store-head .search .micbtn:hover{color:var(--accent)!important}
.store-head .search>button:not(.micbtn){padding:0 18px!important}
.store-head .deliver,.store-head .acct,.store-head .prefbtn,.store-head .themebtn,.store-head .cart-btn{height:42px}
.hpw{position:relative}
.prefbtn{display:flex;align-items:center;gap:6px;background:none;border:1px solid transparent;border-radius:8px;color:var(--hero-fg);padding:0 10px;font:inherit;font-size:14px}
.prefbtn:hover,.hpw.open .prefbtn{border-color:var(--hero-muted)}
.prefbtn svg{width:18px;height:18px;color:var(--hero-muted)}.prefbtn span{color:var(--hero-muted)}
.prefbtn .car{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid var(--hero-muted)}
.hpop{display:none;position:absolute;right:0;top:calc(100% + 8px);z-index:20;background:var(--surface);color:var(--fg);border:1px solid var(--line);border-radius:10px;box-shadow:0 14px 34px rgba(10,22,48,.25);padding:12px;width:220px;flex-direction:column;gap:10px}
.hpw.open .hpop{display:flex}
.hpop label{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:600;color:var(--muted)}
.store-head .hpop select,.store-head .hpop select#lang,.store-head .hpop select#cur{display:block!important;width:100%;background:var(--surface-2);color:var(--fg);border:1px solid var(--line);border-radius:6px;padding:8px;font-size:14px}
@media (max-width:1180px){
 .store-head:has(.search){grid-template-columns:auto auto minmax(0,1fr);grid-template-areas:"logo deliver tools" "search search search"}
}
@media (max-width:860px){
 .store-head:has(.search){grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"logo tools" "search search"}
}
@media (max-width:640px){
 .store-head:has(.search){grid-template-areas:"logo tools" "search search" "deliver deliver";padding:10px 12px;column-gap:8px}
 .store-head .prefbtn{padding:0 6px;gap:4px}.store-head .prefbtn span,.store-head .prefbtn .car{display:none}
 .store-head .themebtn{width:38px;height:38px}
 .store-head .deliver{height:auto}
}
@media (max-width:420px){.store-head .logo small{display:none}}