/* Motorcycle Graphics page — WordPress additions on top of the design's home.css + motorcycle.css. */
@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(../litgraphics-product/assets/fonts/inter-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(../litgraphics-product/assets/fonts/inter-latin-ext-wght-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* body.lit-cat-page beats any leftover theme `body{font-family}` printed after this file. */
body.lit-cat-page{font-family:var(--font)}
/* Rider List spam trap (invisible to people); fields go once the address is accepted. */
.lit-cat-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.newsletter-fields[hidden]{display:none}
/* Page numbers (live catalogue has many pages): gaps between groups, and a row that can wrap. */
.catalog-pagination{flex-wrap:wrap}
.catalog-pagination .pagination-gap{display:inline-flex;align-items:center;justify-content:center;min-width:24px;color:#777}

/* ---------- Povilas's fixes 2026-10-09 (Graphics page fixes.pdf) ---------- */
/* Neue Haas Grotesk (his Adobe Fonts kit, as on the product page and homepage); Inter if the kit doesn't load. */
:root{--font:"neue-haas-grotesk-text","Neue Haas Grotesk Text Pro",Inter,Arial,sans-serif}
body.lit-cat-page :is(h1,h2,h3){font-family:"neue-haas-grotesk-display","neue-haas-grotesk-text",Inter,Arial,sans-serif}
body.lit-cat-page .category-hero h1{letter-spacing:-.02em}
body.lit-cat-page :is(.catalog-toolbar h2,.section-heading h2,.newsletter h2,.catalog-empty h3){letter-spacing:-.015em}

/* 3/4. Search in the banner (all widths). */
.category-hero .lit-hero-search{grid-area:auto;position:absolute;z-index:1;left:50%;top:calc(50% + 86px);transform:translateX(-50%);width:min(340px,calc(100% - 48px));margin:0}
.category-hero .lit-hero-search label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.category-hero .lit-hero-search .catalog-search-shell{border-color:transparent;min-height:40px;box-shadow:0 6px 18px #0004}
@media(max-width:700px){
 .category-hero .lit-hero-search{grid-area:auto;position:relative;left:auto;top:auto;transform:none;width:min(280px,calc(100% - 64px));margin:12px auto 0;justify-self:center}
 .category-hero .lit-hero-search .catalog-search-shell{min-height:36px}
 .category-hero .lit-hero-search .catalog-search-shell input{padding:7px 0}
 /* the search/sort row is gone: types, makes, then the results */
 .catalog-layout{grid-template-areas:"types types" "brands brands" "summary summary" "grid grid" "empty empty" "pages pages" "styles styles";gap:14px 14px;margin-top:14px}
 .catalog-summary{padding-bottom:8px;margin:0}
 /* 5. no "See design" button on phone cards: the whole card is the link */
 .category-product .kit-action{display:none}
}

/* 2. Sort: small text menu on the chip row, LIT colours (no browser blue). The count stays for screen readers. */
.catalog-summary{min-height:28px}
.lit-sort{position:relative;margin-left:auto}
.lit-sort__toggle{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0;border:0;background:none;color:#555;font:600 10px/1 var(--font);letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.lit-sort__toggle span{color:#222}
.lit-sort__toggle[aria-expanded=true] svg{transform:rotate(180deg)}
.lit-sort__toggle:focus-visible{outline:2px solid #8b5b2e;outline-offset:3px}
.lit-sort__list{position:absolute;right:0;top:calc(100% + 4px);z-index:30;min-width:180px;margin:0;padding:6px 0;list-style:none;background:#fff;border:1px solid #e3e3e3;border-radius:6px;box-shadow:0 10px 24px #0002}
.lit-sort__list[hidden]{display:none}
.lit-sort__list li{padding:9px 16px;font-size:12px;color:#333;cursor:pointer;outline:none}
.lit-sort__list li:hover,.lit-sort__list li:focus{background:#f6f4f0}
.lit-sort__list li[aria-selected=true]{font-weight:700;color:#111}
.catalog-summary .clear-filters{order:2}
.catalog-summary .lit-sort{order:3}
.catalog-summary .active-filters{order:4}

/* 6. No visible pause button on the latest-graphics rail (still there for keyboard/screen readers; shows on focus). */
.category-latest .carousel-toggle:not(:focus-visible){position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden;clip:rect(0,0,0,0);border:0!important}
@media(max-width:700px){.category-latest .carousel-controls{margin:0;min-height:0}}

/* 7. Minimal page numbers: ‹ 1 2 … 10 › */
.catalog-pagination{gap:2px;margin-top:30px}
.catalog-pagination button{min-width:28px;height:32px;padding:0 6px;border:0;border-radius:0;background:none;color:#888;font-size:12px}
.catalog-pagination button[aria-current=page]{background:none;color:#111;font-weight:700;font-size:13px}
.catalog-pagination button:not(:disabled):hover{color:#111}
.catalog-pagination button:disabled{opacity:.35}
.catalog-pagination .pagination-gap{min-width:14px;font-size:12px;color:#aaa}
/* Desktop/tablet sidebar: the search left it, so the bike types start level with the make buttons. */
@media(min-width:701px){.filter-sidebar{padding-top:72px}.bike-type-filter{margin-top:0}}
/* Phones: half the space above the page numbers (Povilas 2026-10-09: 58px → 29px; the layout's row gaps already add 28px). */
@media(max-width:700px){.catalog-pagination{margin-top:1px}}
/* Horizontal logo "LIT Graphics" in header and footer (Povilas 2026-10-15: brand name readable) */
.brand img.lit-logo-h{width:150px;height:auto;aspect-ratio:912/244;object-fit:contain;filter:none;mix-blend-mode:normal}
.footer-brand img.lit-logo-h{width:170px;height:auto;aspect-ratio:912/244;object-fit:contain;filter:none;mix-blend-mode:normal;margin:0 0 12px}
@media(max-width:700px){.brand img.lit-logo-h{width:120px}.footer-brand img.lit-logo-h{width:150px}}