/* Category layout extends the approved home.css tokens and shared site sections. */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.category-hero{position:relative;height:360px;aspect-ratio:auto;margin-top:-80px;overflow:hidden;background:#000;display:grid;place-items:center;color:#fff}
.category-hero picture{position:absolute;inset:0}
/* Figma's exported bitmap is normalized to its design ratio before cropping. */
.category-hero picture img{position:absolute;left:50%;top:50%;width:max(100%,calc(360px * 1441 / 493));height:auto;aspect-ratio:1441/493;max-width:none;object-fit:fill;transform:translate(-50%,-50%)}
.category-hero h1{position:absolute;top:calc(50% + 40px);left:0;right:0;transform:translateY(-50%);margin:0;padding:0 24px;text-align:center;font-size:clamp(34px,3.6vw,50px);font-weight:700;line-height:1.1;letter-spacing:-.045em;text-shadow:0 2px 16px #0005}
.category-breadcrumb{display:flex;justify-content:center;align-items:center;gap:10px;padding:18px 0 0;font-size:10px;color:#777}
.category-breadcrumb a:hover{text-decoration:underline;text-underline-offset:3px}
.catalog-layout{display:grid;grid-template-columns:204px minmax(0,1fr);gap:52px;margin-top:32px}
.filter-sidebar{padding-top:88px;min-width:0}
.catalog-search label,.filter-label{display:block;margin:0 0 14px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.025em}
.catalog-search-shell{display:flex;align-items:center;gap:10px;border:1px solid #aaa;border-radius:999px;padding:0 13px;min-height:42px;background:#fff}
.catalog-search-icon{flex:0 0 14px;width:14px;height:14px;border:1.4px solid #666;border-radius:50%;position:relative}
.catalog-search-icon:after{content:"";position:absolute;width:6px;height:1.4px;background:#666;bottom:-3px;right:-4px;transform:rotate(45deg)}
.catalog-search-shell input{width:100%;min-width:0;border:0;outline:none;background:none;font-size:12px;padding:11px 0;color:var(--ink)}
.catalog-search-shell:focus-within{outline:2px solid #8b5b2e;outline-offset:3px}
.catalog-search-shell input:focus-visible{outline:none}
.bike-type-filter{margin:27px 0 34px}
.bike-type-filter>.filter-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.bike-type-button{width:100%;display:flex;align-items:center;gap:11px;padding:11px 0;border:0;background:none;text-align:left;color:var(--ink);font-size:11px;font-weight:600;min-height:47px}
.bike-type-art{flex:0 0 32px;display:grid;place-items:center;width:32px;height:28px}
.bike-type-art img{width:auto;height:auto;max-width:32px;max-height:26px;object-fit:contain}
.bike-type-button>span:last-child{position:relative;line-height:1.3}
.bike-type-button>span:last-child:after{content:"";display:block;width:31px;height:1px;background:#aaa;margin-top:7px;transition:width .18s}
.bike-type-button:hover>span:last-child:after,.bike-type-button[aria-pressed=true]>span:last-child:after{width:100%;background:var(--ink)}
.bike-type-button[aria-pressed=true]{font-weight:700}
.filter-style-grid{display:grid;gap:12px}
.style-filter .style-card{position:relative;width:100%;height:113px;min-height:0;border:0;border-radius:8px;padding:0;cursor:pointer;overflow:hidden;background:#050505;color:#fff}
.style-filter .style-card img{position:absolute;bottom:0;width:100%;height:83%;aspect-ratio:auto;object-fit:cover;object-position:center 65%;max-width:100%}
.style-filter .style-card:after{position:absolute;z-index:1;inset:0 0 auto;height:41%;content:"";background:linear-gradient(180deg,#050505 0%,#050505 48%,#05050500 100%);pointer-events:none}
.style-filter .style-card>span:first-child{z-index:2;top:12px;left:8px;right:8px;font-size:22px;font-weight:600;line-height:1.05;letter-spacing:.015em;text-align:center;color:#050505;-webkit-text-stroke:.85px #fff;paint-order:stroke fill;text-shadow:none}
.style-filter .style-card[aria-pressed=true]{outline:2px solid var(--tan);outline-offset:3px}
.style-filter .style-card[aria-pressed=true]:before{content:"✓";position:absolute;z-index:3;bottom:7px;right:7px;display:grid;place-items:center;background:var(--tan);color:#111;width:22px;height:22px;border-radius:50%;font-size:13px;font-weight:700}
.sidebar-shop{display:flex;flex-direction:column;gap:17px;margin-top:42px}
.sidebar-shop .filter-label{font-size:16px;text-transform:none;margin-bottom:2px}
.sidebar-shop a{font-size:11px;color:#666;padding:5px 0}
.sidebar-shop a:hover{text-decoration:underline;text-underline-offset:4px}
.catalog-results{min-width:0}
.catalog-toolbar{position:relative;display:flex;align-items:center;justify-content:center;min-height:44px;margin-bottom:28px}
.catalog-toolbar h2{font-size:24px;font-weight:600;letter-spacing:-.03em;margin:0}
.catalog-sort{position:absolute;right:0}
.catalog-sort select{border:1px solid #ddd;border-radius:999px;background:#fafafa;color:#666;padding:10px 31px 10px 14px;min-height:42px;font-family:inherit;font-size:10px;max-width:175px;appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='m1 1 4 4 4-4' fill='none' stroke='%23666' stroke-width='1.1'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center}
.brand-filter{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px 24px;width:min(100%,590px);margin:0 auto 31px}
.brand-filter-button{position:relative;border:2px solid transparent;border-radius:8px;background:#050505;padding:0;overflow:hidden;aspect-ratio:120/76;max-height:79px;cursor:pointer}
.brand-filter-button img{width:100%;height:100%;object-fit:contain}
.brand-filter-button:hover{border-color:#aaa}
.brand-filter-button[aria-pressed=true]{background:var(--tan);border-color:transparent;box-shadow:none}
.brand-filter-button[aria-pressed=true] img{filter:brightness(0)}
.brand-guidance{grid-column:1/-1;text-align:center;margin:3px 0 0;font-size:11px;line-height:1.5;color:#777}
.catalog-summary{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:0 0 18px;border-bottom:1px solid #ddd;margin-bottom:25px}
.catalog-summary>p{margin:0;flex:1;font-size:11px;color:#777}
.clear-filters{padding:5px 0;border:0;background:none;color:#555;font-size:11px;text-decoration:underline;text-underline-offset:3px}
.active-filters{display:flex;flex-wrap:wrap;gap:7px;flex-basis:100%}
.active-filters:empty{display:none}
.filter-chip{display:inline-flex;align-items:center;gap:10px;max-width:100%;padding:7px 11px;border:1px solid #d9d3cc;border-radius:999px;background:#f6f4f0;color:#333;font-size:11px;min-height:33px}
.filter-chip span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.filter-chip span:last-child{font-size:15px;line-height:1}
.catalog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 24px}
.category-product{display:block;min-width:0;border-radius:8px}
.kit-photo{position:relative;overflow:hidden;border-radius:8px;background:transparent;aspect-ratio:4/3}
.kit-photo>img{width:100%;height:100%;object-fit:contain;mix-blend-mode:normal;transition:transform .3s}
.category-product:hover .kit-photo>img{transform:scale(1.035)}
.kit-badge{position:absolute;z-index:1;top:11px;left:11px;background:#222;color:#fff;padding:5px 8px;font-size:9px;font-weight:600;letter-spacing:.045em;border-radius:2px}
.kit-meta{padding:13px 1px 0}
.kit-meta h3{font-size:17px;font-weight:600;letter-spacing:-.025em;margin:0 0 5px;line-height:1.2}
.kit-meta>p{font-size:11px;line-height:1.4;color:#777;margin:0 0 11px}
.kit-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px}
.kit-price{font-size:12px;font-weight:600;white-space:nowrap}
.kit-action{border:1px solid #d4d4d4;border-radius:999px;padding:7px 10px;font-size:10px;white-space:nowrap;color:#555}
.category-product:hover .kit-action{border-color:#333;color:#222}
.catalog-pagination{display:flex;align-items:center;justify-content:center;gap:7px;margin:43px 0 0}
.catalog-pagination button{border:1px solid transparent;background:#fff;display:grid;place-items:center;min-width:37px;height:37px;border-radius:50%;font-size:12px;color:#777;padding:0 10px}
.catalog-pagination button[aria-current=page]{background:#222;color:#fff}
.catalog-pagination button:not([disabled]):hover{border-color:#999}
.catalog-pagination button:disabled{opacity:.3;cursor:default}
.catalog-empty{text-align:center;padding:64px 22px;background:#f7f7f7;border-radius:8px}
.catalog-empty>.eyebrow{font-size:9px;color:#8c765e}
.catalog-empty h3{font-size:25px;font-weight:600;letter-spacing:-.04em;margin:14px 0 10px}
.catalog-empty p{color:#777;font-size:12px;line-height:1.6;margin:0 auto 22px;max-width:300px}
.empty-reset{border:0;background:#222;color:#fff;border-radius:999px;padding:12px 22px;font-size:11px;font-weight:500;min-height:44px}
.no-script{font-size:12px;line-height:1.6}.no-script a{text-decoration:underline}
.category-latest{margin-top:70px}
/* Latest graphics cards = the homepage's "Latest kits" cards (home.css .latest), same kits and promo photos (2026-10-14). */
.category-latest .section-heading h2{font-size:30px}
.category-latest .product-rail:after{display:none}
.category-latest .product-card:last-child{scroll-snap-align:end}
.motorcycle-page .newsletter{margin-top:70px}
@supports not (-webkit-text-stroke:1px #fff){.style-filter .style-card>span:first-child{color:#fff}}
@media(max-width:1100px) and (min-width:701px){
  .catalog-layout{grid-template-columns:180px minmax(0,1fr);gap:30px}
  .catalog-toolbar{justify-content:flex-start}.catalog-toolbar h2{font-size:21px}
  .brand-filter{gap:12px 16px}.kit-bottom{flex-wrap:wrap}
}
@media(max-width:1000px) and (min-width:701px){
  .category-hero{height:320px}.category-hero picture img{width:max(100%,calc(320px * 1441 / 493))}.catalog-layout{margin-top:28px}
  .catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .brand-filter{gap:10px}.brand-guidance{font-size:10px}
  .filter-sidebar{padding-top:73px}.catalog-toolbar{margin-bottom:18px}
  .catalog-sort select{max-width:147px;font-size:9px}
}
@media(max-width:700px){
  .category-hero{height:calc(67px + clamp(190px,56vw,220px));aspect-ratio:auto;margin-top:-67px;align-items:start}
  .category-hero picture{top:67px}
  .category-hero picture img{width:100%;aspect-ratio:392/277}
  .category-hero:after{position:absolute;inset:0;content:"";background:linear-gradient(180deg,#000b,transparent 50%);pointer-events:none}
  .category-hero h1{position:relative;top:auto;left:auto;right:auto;transform:none;z-index:1;padding:0 14px;margin-top:92px;font-size:clamp(22px,6.7vw,27px);letter-spacing:-.035em}
  .category-breadcrumb{font-size:9px;gap:8px;padding-top:14px}
  .catalog-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"search sort" "types types" "brands brands" "summary summary" "grid grid" "empty empty" "pages pages" "styles styles";gap:18px 14px;margin-top:18px}
  .filter-sidebar,.catalog-results,.catalog-toolbar{display:contents}
  .catalog-toolbar h2{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .catalog-search{grid-area:search;min-width:0}
  .catalog-search label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .catalog-search-shell{padding:0 11px;gap:8px;min-height:42px}
  .catalog-search-shell input{font-size:16px;width:100%;padding:10px 0}
  .catalog-search-shell input::placeholder{font-size:11px}
  .catalog-sort{grid-area:sort;position:static;min-width:0}
  .catalog-sort select{width:100%;max-width:none;min-height:42px;font-size:11px;padding-left:12px;padding-right:29px}
  .bike-type-filter{grid-area:types;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 14px;margin:0}
  .bike-type-button{font-size:10px;gap:8px;padding:7px 0;min-height:44px}
  .bike-type-art{width:27px;flex-basis:27px;height:24px}
  .bike-type-art img{max-width:27px;max-height:22px}
  .bike-type-button>span:last-child:after{margin-top:5px}
  .brand-filter{grid-area:brands;gap:10px 11px;width:100%;margin:0}
  .brand-filter-button{border-radius:6px;max-height:none}
  .brand-guidance{font-size:10px;margin:1px 0 0;line-height:1.5}
  .catalog-summary{grid-area:summary;margin:2px 0 0;padding-bottom:13px;gap:10px}
  .catalog-summary>p{font-size:10px}.clear-filters{font-size:10px;min-height:28px}
  .active-filters{gap:6px}.filter-chip{font-size:10px;padding:6px 10px;min-height:32px}
  .catalog-grid{grid-area:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 14px}
  .kit-photo{border-radius:6px;aspect-ratio:1.12}
  .kit-badge{top:8px;left:8px;padding:4px 6px;font-size:8px}
  .kit-meta{padding-top:11px}
  .kit-meta h3{font-size:15px;margin-bottom:4px}
  .kit-meta>p{font-size:10px;margin-bottom:9px}
  .kit-bottom{flex-wrap:wrap;gap:7px}
  .kit-price{font-size:11px}
  .kit-action{font-size:9px;padding:6px 8px}
  .catalog-pagination{grid-area:pages;margin:11px 0 0}
  .catalog-pagination button{min-width:36px;height:36px}
  .catalog-empty{grid-area:empty;padding:41px 18px}
  .catalog-empty h3{font-size:24px}
  .style-filter{grid-area:styles;margin-top:29px}
  .style-filter .filter-label{text-align:center;text-transform:none;font-size:21px;letter-spacing:-.035em;font-weight:600;margin-bottom:20px}
  .filter-style-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .style-filter .style-card{height:auto;aspect-ratio:1/1.05;border-radius:8px}
  .style-filter .style-card img{height:79%}
  .style-filter .style-card>span:first-child{top:13px;font-size:clamp(20px,5.5vw,27px);-webkit-text-stroke:.9px #fff}
  .sidebar-shop{display:none}
  .category-latest{margin-top:55px}
  .category-latest .section-heading h2{font-size:24px}
  .category-latest .carousel-controls{height:auto;justify-content:flex-end;margin-top:12px}
  .category-latest [data-carousel-count],.category-latest [data-carousel-prev],.category-latest [data-carousel-next]{display:none}
  .category-latest .carousel-controls .pause-accessible{position:static!important;width:42px!important;height:42px!important;margin:0!important;padding:0!important;overflow:visible!important;clip:auto!important;white-space:normal!important;border:1px solid #ddd!important}
  .motorcycle-page .newsletter{margin-top:52px}
}
@media(max-width:360px){.kit-bottom{display:block}.kit-action{display:inline-block;margin-top:8px}.catalog-sort select{font-size:10px}.bike-type-button{font-size:9px;gap:5px}.brand-filter{gap:9px}.category-hero{height:257px}}


/* Full Custom banner (2026-10-14): mirrors the Helmet page's .helmet-custom (Figma 2186:5763 "custom helmet banner"), scoped here. */
.motorcycle-page .moto-custom{max-width:1120px;margin-top:56px}
.motorcycle-page .moto-custom__card{--s:1;position:relative;isolation:isolate;display:flex;align-items:center;overflow:hidden;min-height:304px;box-sizing:border-box;padding:48px;border-radius:8px;background:#1b1b1b;color:#fff}
.motorcycle-page .moto-custom__copy{position:relative;z-index:1;max-width:calc(100% - var(--s)*537px + 24px)}
.motorcycle-page .moto-custom .eyebrow{margin:0 0 8px;color:var(--tan);font-size:10px;font-weight:600;letter-spacing:.16em}
.motorcycle-page .moto-custom h2{margin:0 0 10px;color:#fff;font-size:30px;font-weight:600;line-height:1.1;letter-spacing:-.02em}
.motorcycle-page .moto-custom__copy>p{max-width:470px;margin:0 0 24px;color:#c9c9c9;font-size:14px;line-height:1.6}
.motorcycle-page .moto-custom__buy{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}
.motorcycle-page .moto-custom__price{font-size:15px;font-weight:600;white-space:nowrap}
.motorcycle-page .moto-custom__link{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 22px;border-radius:999px;background:var(--tan);color:#111;font-size:13px;font-weight:600;white-space:nowrap;transition:background-color .15s}
.motorcycle-page .moto-custom__link:after{position:absolute;inset:0;z-index:2;content:""}
.motorcycle-page .moto-custom__card:hover .moto-custom__link{background:#e9caa4}
.motorcycle-page .moto-custom__link:focus-visible{outline:2px solid #fff;outline-offset:3px}
.motorcycle-page .moto-custom__art{position:absolute;right:calc(var(--s)*91.5px);top:50%;width:calc(var(--s)*446px);height:calc(var(--s)*239px);transform:translateY(-50%);pointer-events:none}
.motorcycle-page .moto-custom__halo{position:absolute;left:calc(var(--s)*309px);top:calc(var(--s)*120px);width:calc(var(--s)*403px);height:calc(var(--s)*372px);background:radial-gradient(closest-side,#ddb88d59,#ddb88d14 60%,#ddb88d00 80%);transform:translate(-50%,-50%)}
.motorcycle-page .moto-custom__glow{position:absolute;left:calc(var(--s)*27.4px);top:calc(var(--s)*60.7px);width:calc(var(--s)*196.4px);height:calc(var(--s)*176px);border-radius:50%;background:#866c57;filter:blur(calc(var(--s)*61px))}
.motorcycle-page .moto-custom__guy{position:absolute;left:0;top:calc(var(--s)*44.5px);display:block;width:calc(var(--s)*205.8px);max-width:none;height:auto}
/* Figma's product slot (left 172.1, width 276) is for a cut-out render; #3826 is a full grey box, so it sits right of the designer, sized by eye, until a transparent bike render arrives. */
.motorcycle-page .moto-custom__bike{position:absolute;left:calc(var(--s)*196px);top:50%;display:block;width:calc(var(--s)*250px);max-width:none;height:auto;border-radius:6px;box-shadow:0 14px 26px #000b;transform:translateY(-50%)}
@media(max-width:1000px) and (min-width:701px){.motorcycle-page .moto-custom__card{--s:.72;padding:32px}}
@media(max-width:700px){
 .motorcycle-page .moto-custom{margin-top:40px}
 .motorcycle-page .moto-custom__card{--s:.68;flex-direction:column;align-items:stretch;gap:12px;min-height:0;padding:22px 20px 26px}
 .motorcycle-page .moto-custom__copy{max-width:none}
 .motorcycle-page .moto-custom__art{position:relative;right:auto;top:auto;flex:none;order:-1;margin:0 auto;transform:none}
 .motorcycle-page .moto-custom h2{font-size:24px}
 .motorcycle-page .moto-custom__copy>p{margin-bottom:20px;font-size:13px}
 .motorcycle-page .moto-custom__link{min-height:44px;padding:0 20px}
}
@media(max-width:374px){.motorcycle-page .moto-custom__card{--s:.54}} /* the 446px Figma art fits 320–374px phones */
@media(prefers-reduced-motion:reduce){.motorcycle-page .moto-custom__link{transition:none}}