/* Munich Motorcycles concept: shared styles for every page */
:root{
  --paper:#fff;
  --shade:#F1F2F0;
  --wall:#37393C;        /* the showroom wall in the hero photo, sampled at its top edge */
  --blue:#3678AE;        /* Munich blue, taken from the logo */
  --blue-deep:#285E8E;
  --blue-soft:#D6E6F4;
  --ink:#1B1E22;
  --steel:#545B63;
  --rule:#D5D9D6;
  --rule-strong:#A9B0B4;
  --ok:#1F6E43;
  --error:#B42318;
  --r-control:6px;
  --r-panel:14px;
  --wrap:1280px;
  --gutter:clamp(16px,4vw,40px);
  --font:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--font);font-size:16px;line-height:1.55;color:var(--ink);background:var(--paper)}
img{max-width:100%;display:block}
a{color:inherit;text-underline-offset:.18em}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,p,ul,ol,dl,dd,figure,blockquote,address{margin:0}
ul,ol{padding:0;list-style:none}
address{font-style:normal}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:8px;top:-60px;z-index:100;background:var(--ink);color:#fff;padding:10px 14px;border-radius:var(--r-control)}
.skip:focus{top:8px}
.num{font-variant-numeric:tabular-nums}
.band{padding-block:clamp(56px,7vw,104px)}
@media (min-width:901px){section[id]{scroll-margin-top:140px}}

/* Type: one family, Archivo, used across its width axis */
h1,h2{font-stretch:72%;font-weight:800;letter-spacing:-.005em;line-height:.98;text-wrap:balance}
h2{font-size:clamp(2rem,3.6vw,3.1rem)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.sec-lede{margin-top:12px;color:var(--steel);font-size:1.075rem;max-width:36em}
.text-link{font-weight:650;color:var(--blue);text-decoration:underline;text-decoration-thickness:1.5px}
.text-link:hover{color:var(--blue-deep)}

/* Buttons and fields */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 20px;border-radius:var(--r-control);border:1px solid transparent;font-weight:650;font-stretch:90%;cursor:pointer;text-decoration:none;white-space:nowrap;transition:background-color .15s,color .15s,border-color .15s}
.btn-blue{background:var(--blue);color:#fff}
.btn-blue:hover{background:var(--blue-deep)}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{background:#000}
.btn-line{background:#fff;border-color:var(--rule-strong)}
.btn-line:hover{border-color:var(--ink)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.field{display:grid;gap:6px;font-size:13px;font-weight:600;color:var(--steel)}
.input,.select{width:100%;height:48px;border:1px solid var(--rule-strong);border-radius:var(--r-control);background:#fff;padding:0 14px;font-size:15px;font-weight:450;color:var(--ink)}
textarea.input{height:auto;padding:12px 14px;resize:vertical}
.select{appearance:none;-webkit-appearance:none;padding-right:38px;cursor:pointer;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%231B1E22' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat right 14px center}
.select:disabled{background-color:#F3F4F3;color:#80868C;cursor:not-allowed}
.input:focus,.select:focus{border-color:var(--blue);outline:3px solid var(--blue-soft);outline-offset:0}
.input[aria-invalid=true]{border-color:var(--error)}

/* Small shared pieces: breadcrumb, part-type badge, stock, quantity */
.crumbs ol{display:flex;flex-wrap:wrap;gap:6px;font-size:14px;color:var(--steel)}
.crumbs li+li::before{content:"/";margin-right:6px;color:var(--rule-strong)}
.crumbs a{color:var(--ink);text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.badge{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;background:var(--shade);font-size:12px;font-weight:650;white-space:nowrap}
.badge-genuine{background:var(--blue-soft);color:#1D4E7A}
.badge-used{background:#F4EAD7;color:#6B4A12}
.stock{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600;color:var(--ok)}
.stock::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.stock.is-out{color:var(--steel)}
.qty{display:inline-flex;align-items:center;height:48px;border:1px solid var(--rule-strong);border-radius:var(--r-control);background:#fff}
.qty button{width:40px;height:100%;border:0;background:none;font-size:20px;line-height:1;cursor:pointer}
.qty input{width:40px;height:100%;border:0;text-align:center;font-weight:650;-moz-appearance:textfield}
.qty input::-webkit-inner-spin-button{-webkit-appearance:none}

/* Utility bar */
.util{background:var(--shade);font-size:13px;color:var(--steel)}
.util-in{display:flex;align-items:center;gap:28px;min-height:36px}
.util-in .grow{margin-right:auto}
.util a{color:var(--ink);font-weight:650;text-decoration:none;white-space:nowrap}
.util a:hover{text-decoration:underline}
.util select{border:0;background:transparent;font-size:13px;font-weight:650;color:var(--ink);cursor:pointer}

/* Header */
.site-head{position:sticky;top:0;z-index:40;background:#fff;border-bottom:1px solid var(--rule)}
.head-in{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(16px,3vw,40px);min-height:78px}
.logo img{height:38px;width:auto}
.search{display:flex;width:100%;max-width:620px;justify-self:center}
.search .input{border-right:0;border-radius:var(--r-control) 0 0 var(--r-control)}
.search .btn{height:48px;border-radius:0 var(--r-control) var(--r-control) 0}
.head-actions{display:flex;align-items:center;gap:22px}
.head-link{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:650;text-decoration:none}
.head-link:hover{color:var(--blue)}
.cart-count{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--blue);color:#fff;font-size:12px;font-weight:700}
.nav{position:relative;border-top:1px solid var(--rule)}
.nav-list{display:flex;gap:clamp(18px,2.4vw,32px);overflow-x:auto;scrollbar-width:none}
.nav-list::-webkit-scrollbar{display:none}
.nav-list a,.mega-btn{display:inline-flex;align-items:center;gap:6px;height:50px;padding:0;border:0;border-bottom:3px solid transparent;margin-bottom:-1px;background:none;font-size:15px;font-weight:620;font-stretch:90%;white-space:nowrap;text-decoration:none;cursor:pointer}
.nav-list a:hover,.mega-btn:hover,.mega-btn[aria-expanded=true]{color:var(--blue);border-bottom-color:var(--blue)}
.mega-btn svg{transition:transform .15s}
.mega-btn[aria-expanded=true] svg{transform:rotate(180deg)}
.mega{position:absolute;left:0;right:0;top:100%;z-index:45;background:#fff;border-top:1px solid var(--rule);box-shadow:0 30px 40px -30px rgba(27,30,34,.45)}
.mega-in{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1fr);gap:40px;padding-block:28px 36px}
.mega h3{margin-bottom:6px;font-size:13px;font-weight:700;color:var(--steel)}
.mega h3:not(:first-child){margin-top:24px}
.mega li a{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid var(--rule);font-weight:620;text-decoration:none}
.mega li a:hover{color:var(--blue)}
.mega .yrs{color:var(--steel);font-weight:450}
.mega-aside{display:grid;gap:10px;align-content:start;padding:24px;border-radius:var(--r-panel);background:var(--shade)}
.mega-aside strong{font-size:19px;font-stretch:88%;line-height:1.2}
.mega-aside p{color:var(--steel);font-size:15px}

/* Product cards */
.products{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:44px 24px;margin-top:40px}
.p-img{display:grid;place-items:center;aspect-ratio:1/1;overflow:hidden;border-radius:10px;background:var(--shade)}
.p-img img{width:80%;height:80%;object-fit:contain;mix-blend-mode:multiply}
.p-brand{margin-top:14px;font-size:13px;font-weight:650;color:var(--steel)}
.p-name{margin-top:2px;font-size:17px;font-weight:650;font-stretch:95%;line-height:1.3}
.p-name a{text-decoration:none}
.p-name a:hover{text-decoration:underline}
.p-sku{margin-top:4px;font-size:13px;color:var(--steel)}
.p-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px}
.p-price{font-size:19px;font-weight:720}
.add{height:40px;padding:0 14px;font-size:14px}
.add.is-added{background:var(--ink);border-color:var(--ink);color:#fff}

/* Parts request */
.request{padding-block:clamp(56px,7vw,96px);background:var(--blue);color:#fff}
.req-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,88px);align-items:start}
.req-copy>p{margin-top:16px;max-width:34em;font-size:1.075rem}
.request a{color:#fff;font-weight:650}
.req-aside{max-width:34em;margin-top:36px;padding-top:24px;border-top:1px solid rgba(255,255,255,.35)}
.req-aside h3{font-size:19px;font-weight:720;font-stretch:88%}
.req-aside p{margin-top:6px}
.req-aside a{display:inline-block;margin-top:10px}
.req-form{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:28px;border-radius:var(--r-panel);background:#fff;color:var(--ink)}
.req-form .full{grid-column:1/-1}
.req-actions{display:flex;align-items:center;flex-wrap:wrap;gap:16px}
.req-out{font-size:14px;font-weight:600;color:var(--ok)}

/* Footer */
.site-foot{padding-top:64px;background:var(--ink);color:#C5CACE;font-size:15px}
.site-foot a{color:#fff;text-decoration:none}
.site-foot a:hover{text-decoration:underline}
.foot-top{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:48px}
.foot-logo{display:inline-flex;align-items:center;gap:12px;font-size:19px;font-weight:720}
.foot-brand p{margin-top:16px;max-width:30em}
.foot-social{display:flex;gap:20px}
.foot-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
.site-foot h3{margin-bottom:14px;font-size:15px;font-weight:720;font-stretch:88%;color:#fff}
.site-foot ul{display:grid;gap:10px}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 32px;margin-top:56px;padding-block:24px 32px;border-top:1px solid rgba(255,255,255,.14);font-size:13px}
.foot-bottom a{margin-left:16px}
.tm{flex-basis:100%;color:#9CA3A9}

/* Responsive */
@media (max-width:1100px){
  .mega-in{grid-template-columns:1fr 1fr}
}
@media (max-width:1000px){
  .products{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-top{grid-template-columns:1fr}
}
@media (max-width:900px){
  .site-head{position:static}
  .head-in{grid-template-columns:auto 1fr;grid-template-areas:"logo actions" "search search";row-gap:12px;padding-block:14px}
  .logo{grid-area:logo}
  .head-actions{grid-area:actions;justify-self:end}
  .search{grid-area:search;max-width:none}
  .head-link .lbl{display:none}
  .req-in{grid-template-columns:1fr}
}
@media (max-width:760px){
  .util .hide-sm{display:none}
  .nav-list{padding-right:48px;-webkit-mask-image:linear-gradient(to right,#000 82%,transparent);mask-image:linear-gradient(to right,#000 82%,transparent)}
  .foot-cols{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
  .req-form{grid-template-columns:1fr}
  .mega-in{grid-template-columns:1fr}
  .products{gap:32px 16px}
  .p-foot{flex-direction:column;align-items:stretch}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
}