/* ============================================================ APEX — European OEM Parts. Design tokens + component styles. Aesthetic: technical & precise. Cool neutral canvas, steel accent, grotesque type, monospaced part numbers, hairlines. ============================================================ */ :root { /* type */ --sans: "Helvetica Neue", "Archivo", Helvetica, Arial, sans-serif; --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* cool neutral canvas */ --bg: oklch(0.985 0.003 245); --surface: oklch(1 0 0); --surface-2: oklch(0.975 0.004 245); --ink: oklch(0.24 0.014 250); --ink-2: oklch(0.46 0.012 250); --ink-3: oklch(0.62 0.010 250); --line: oklch(0.915 0.005 250); --line-2: oklch(0.86 0.006 250); /* brand cyan accent (from logo) */ --accent: oklch(0.6 0.132 234); --accent-deep: oklch(0.5 0.14 238); --accent-wash: oklch(0.962 0.028 232); --accent-line: oklch(0.84 0.07 232); /* fitment / status */ --ok: oklch(0.56 0.11 156); --ok-wash: oklch(0.96 0.035 156); --warn: oklch(0.66 0.13 70); --warn-wash: oklch(0.965 0.04 75); /* geometry */ --r: 4px; --r-lg: 8px; --shadow: 0 1px 2px oklch(0.4 0.02 250 / 0.06), 0 8px 24px oklch(0.4 0.02 250 / 0.06); --shadow-sm: 0 1px 2px oklch(0.4 0.02 250 / 0.07); --maxw: 1240px; --row-h: 56px; /* density-controlled */ --row-pad: 13px; } /* theme variants (set on ) */ html[data-theme="graphite"] { --accent: oklch(0.34 0.012 250); --accent-deep: oklch(0.26 0.012 250); --accent-wash: oklch(0.955 0.004 250); --accent-line: oklch(0.84 0.006 250); } html[data-theme="signal"] { --accent: oklch(0.6 0.15 52); --accent-deep: oklch(0.5 0.15 48); --accent-wash: oklch(0.965 0.03 65); --accent-line: oklch(0.86 0.07 60); } html[data-theme="steelblue"] { --accent: oklch(0.52 0.125 245); --accent-deep: oklch(0.42 0.135 248); --accent-wash: oklch(0.955 0.022 245); --accent-line: oklch(0.86 0.05 245); } html[data-density="compact"] { --row-h: 44px; --row-pad: 10px; } html[data-density="comfortable"] { --row-h: 64px; --row-pad: 18px; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--sans); background: var(--bg); color: var(--ink); font-size: 15px; line-height: 1.45; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "tnum" 1, "cv01" 1; } button { font-family: inherit; } a { color: inherit; text-decoration: none; } ::selection { background: var(--accent-wash); } .mono { font-family: var(--mono); font-feature-settings: "tnum" 1; } .tnum { font-variant-numeric: tabular-nums; } .muted { color: var(--ink-2); } .faint { color: var(--ink-3); } .up { text-transform: uppercase; letter-spacing: 0.08em; } /* ---- layout shell ---- */ .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-left: 28px; padding-right: 28px; } .app { min-height: 100vh; display: flex; flex-direction: column; } /* ============================================================ HEADER ============================================================ */ .hdr { position: static; background: var(--surface); } /* top row: logo · centered search · account+basket */ .hdr-top-row { background: var(--surface); } .hdr-top { display: grid; grid-template-columns: 1fr minmax(300px, 520px) 1fr; align-items: center; gap: 24px; height: 86px; } .logo { display: inline-flex; align-items: center; cursor: pointer; user-select: none; justify-self: start; } .logo img { height: 52px; width: auto; display: block; } .hdr-search { position: relative; width: 100%; } .hdr-search input { width: 100%; height: 42px; border: 1px solid var(--line-2); background: var(--surface-2); border-radius: var(--r); padding: 0 14px 0 40px; font-size: 14px; font-family: inherit; color: var(--ink); outline: none; transition: border-color .12s, background .12s, box-shadow .12s; } .hdr-search input:focus { border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px var(--accent-wash); } .hdr-search .ic { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; } /* full-width divider line + nav row: menu items left, actions right */ .hdr-nav-row { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); } .hdr-nav { display: flex; align-items: center; height: 50px; } .nav { display: flex; gap: 26px; align-items: center; } .nav a { font-size: 14px; color: var(--ink-2); font-weight: 500; cursor: pointer; height: 50px; display: inline-flex; align-items: center; border-bottom: 2px solid transparent; transition: color .12s, border-color .12s; } .nav a:hover { color: var(--ink); } .nav a.on { color: var(--ink); border-bottom-color: var(--accent); } .hdr-actions { margin-left: auto; display: flex; align-items: center; gap: 4px; justify-self: end; } .iconbtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; min-width: 40px; padding: 0 14px; border: 1px solid transparent; background: none; color: var(--ink-2); border-radius: var(--r); cursor: pointer; font-size: 14px; font-weight: 600; position: relative; transition: background .12s, color .12s; } .iconbtn:hover { background: var(--surface-2); color: var(--ink); } .iconbtn.has-vsep { border-left: 1px solid var(--line); border-radius: 0; margin-left: 8px; padding-left: 16px; } .cart-badge { position: absolute; top: 1px; right: 1px; min-width: 17px; height: 17px; padding: 0 4px; background: var(--accent); color: #fff; border-radius: 9px; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; } /* hamburger + mobile menu (shown only on phones) */ .hamburger { display: none; align-items: center; justify-content: center; width: 42px; height: 42px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); cursor: pointer; border-radius: var(--r); flex-shrink: 0; } .hamburger:hover { background: var(--surface-2); } .mobile-menu { display: none; } /* ============================================================ BUTTONS ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: var(--r); font-size: 14px; font-weight: 600; border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: all .14s; font-family: inherit; } .btn-pri { background: var(--accent); color: #fff; } .btn-pri:hover { background: var(--accent-deep); } .btn-pri:disabled { background: var(--line-2); color: var(--ink-3); cursor: not-allowed; } .btn-sec { background: var(--surface); color: var(--ink); border-color: var(--line-2); } .btn-sec:hover { border-color: var(--ink-3); } .btn-ghost { background: transparent; color: var(--accent-deep); } .btn-ghost:hover { background: var(--accent-wash); } .btn-sm { height: 34px; padding: 0 13px; font-size: 13px; } .btn-block { width: 100%; } /* ============================================================ BADGES / CHIPS ============================================================ */ .badge { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 3px; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; } .badge-pos { background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line-2); } .badge-pos.front { color: var(--accent-deep); border-color: var(--accent-line); background: var(--accent-wash); } .badge-vent { background: var(--accent-wash); color: var(--accent-deep); } .badge-oe { background: var(--ink); color: #fff; letter-spacing: 0.06em; } .badge-soft { background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line); } .fit { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--ok); } .fit svg { color: var(--ok); } .fit-pill { display: inline-flex; align-items: flex-start; gap: 6px; padding: 5px 11px; background: var(--ok-wash); color: oklch(0.42 0.1 156); border-radius: 11px; font-size: 12px; font-weight: 600; line-height: 1.45; max-width: 100%; vertical-align: top; } .fit-pill svg { flex-shrink: 0; margin-top: 1px; } /* fit pill + "show all" link: inline on desktop, cleanly stacked on mobile */ .fit-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; } .stars { display: inline-flex; align-items: center; gap: 2px; color: var(--accent); } .stars .empty { color: var(--line-2); } /* ============================================================ HERO + VEHICLE SELECTOR ============================================================ */ .hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--ink); background: #0b0f14 url(/assets/hero-amg-coupe-85f6c6ec60821aef058f97f5327c488aea49f77570b7217e039aaa957f1fecd4.jpg) 18% 32% / cover no-repeat; } .hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 52%, oklch(0.13 0.018 250 / 0.7) 100%), linear-gradient(95deg, oklch(0.15 0.02 250 / 0.95) 0%, oklch(0.16 0.02 250 / 0.82) 38%, oklch(0.18 0.02 250 / 0.45) 70%, oklch(0.2 0.02 250 / 0.24) 100%); } .hero-grid { position: absolute; inset: 0; opacity: 0.14; pointer-events: none; background-image: linear-gradient(oklch(1 0 0 / 0.5) 1px, transparent 1px), linear-gradient(90deg, oklch(1 0 0 / 0.5) 1px, transparent 1px); background-size: 60px 60px; mask-image: linear-gradient(180deg, #000 0%, transparent 70%); } .hero-inner { position: relative; padding-top: 88px; padding-bottom: 72px; } .eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: oklch(0.82 0.12 232); margin-bottom: 22px; } .eyebrow .ln { width: 28px; height: 1px; background: oklch(0.82 0.12 232); } .hero h1 { font-size: 54px; line-height: 1.02; letter-spacing: -0.03em; font-weight: 800; margin: 0 0 18px; max-width: 16ch; color: #fff; } .hero .sub { font-size: 17px; color: oklch(0.85 0.012 250); max-width: 52ch; margin: 0 0 36px; } .trust-strip { background: var(--surface); border-bottom: 1px solid var(--line); } .hero-trust { display: flex; gap: 32px; flex-wrap: wrap; padding: 16px 28px; } .hero-trust .ht { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--ink-2); font-weight: 500; } .hero-trust .ht svg { color: var(--accent); } /* selector card */ .sel-card { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-lg); box-shadow: var(--shadow); overflow: hidden; max-width: 920px; } .sel-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--line); background: var(--surface-2); } .sel-head .t { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .sel-head .t svg { color: var(--accent); } .sel-head .step { font-size: 12px; color: var(--ink-3); font-family: var(--mono); } .sel-cascade { display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: 0; align-items: stretch; } .sel-field { position: relative; border-right: 1px solid var(--line); padding: 14px 16px; cursor: pointer; transition: background .12s; min-height: 76px; display: flex; flex-direction: column; justify-content: center; } .sel-field:hover:not(.disabled) { background: var(--surface-2); } .sel-field.disabled { opacity: 0.5; cursor: not-allowed; } .sel-field .lbl { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; display: flex; align-items: center; gap: 6px; } .sel-field .lbl .n { width: 15px; height: 15px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--line-2); color: var(--ink-3); display: inline-flex; align-items: center; justify-content: center; font-size: 9px; font-family: var(--mono); } .sel-field.active .lbl .n, .sel-field.filled .lbl .n { background: var(--accent); color: #fff; border-color: var(--accent); } .sel-field .val { font-size: 15px; font-weight: 600; color: var(--ink); display: flex; align-items: center; justify-content: space-between; gap: 8px; } .sel-field .val.ph { color: var(--ink-3); font-weight: 500; } .sel-field .val svg { color: var(--ink-3); flex-shrink: 0; } .sel-go { display: flex; align-items: stretch; } .sel-go .btn { height: 100%; border-radius: 0; padding: 0 26px; } /* dropdown menu */ .dd { position: absolute; top: calc(100% + 1px); left: -1px; right: -1px; z-index: 30; background: var(--surface); border: 1px solid var(--line-2); border-radius: 0 0 var(--r) var(--r); box-shadow: var(--shadow); max-height: 280px; overflow-y: auto; } .dd-item { padding: 10px 16px; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--line); } .dd-item:last-child { border-bottom: none; } .dd-item:hover { background: var(--accent-wash); color: var(--accent-deep); } .dd-item .meta { font-size: 12px; color: var(--ink-3); font-family: var(--mono); } .dd-item.sel { background: var(--accent-wash); color: var(--accent-deep); font-weight: 600; } .dd-item.kb { background: var(--accent-wash); color: var(--accent-deep); } .dd-item.noparts { color: var(--ink-3); } .dd-item.noparts .meta { color: oklch(0.62 0.12 60); } /* stepped variant */ .sel-stepped { padding: 22px 24px; } .step-track { display: flex; align-items: center; gap: 0; margin-bottom: 22px; } .step-node { display: flex; align-items: center; gap: 10px; } .step-dot { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--line-2); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--ink-3); font-family: var(--mono); flex-shrink: 0; transition: all .15s; } .step-node.done .step-dot { background: var(--accent); border-color: var(--accent); color: #fff; } .step-node.cur .step-dot { border-color: var(--accent); color: var(--accent-deep); } .step-node .step-lbl { font-size: 13px; font-weight: 600; color: var(--ink-3); } .step-node.done .step-lbl, .step-node.cur .step-lbl { color: var(--ink); } .step-line { flex: 1; height: 1.5px; background: var(--line-2); margin: 0 12px; } .step-line.done { background: var(--accent); } .opt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; } .opt-cell { padding: 13px 14px; border: 1px solid var(--line-2); border-radius: var(--r); cursor: pointer; font-size: 14px; font-weight: 600; transition: all .12s; background: var(--surface); display: flex; align-items: center; justify-content: space-between; gap: 8px; } .opt-cell:hover { border-color: var(--accent); background: var(--accent-wash); } .opt-cell .meta { font-size: 11px; color: var(--ink-3); font-family: var(--mono); font-weight: 500; } /* ---------- BRAND-FIRST SELECTOR ---------- */ .sel-brands { max-width: 980px; } .sel-bhead { display: flex; align-items: center; gap: 11px; padding: 20px 24px 16px; font-size: 19px; font-weight: 800; letter-spacing: -0.015em; white-space: nowrap; } .sel-bhead svg { color: var(--accent); } .sel-tabs { display: flex; gap: 6px; margin: 0 24px; padding: 5px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); } .sel-tab { flex: 1; height: 40px; border: 1px solid transparent; border-radius: 5px; background: transparent; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--ink-3); cursor: pointer; transition: all .12s; font-family: inherit; } .sel-tab:hover { color: var(--ink-2); } .sel-tab.on { background: var(--surface); color: var(--ink); border-color: var(--line-2); box-shadow: var(--shadow-sm); } .sel-tab svg { flex-shrink: 0; } .sel-bbody { padding: 20px 24px 24px; } .sel-blabel { font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; } .brand-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; } .brand-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 18px 10px; border: 1.5px solid var(--line-2); border-radius: var(--r-lg); background: var(--surface); cursor: pointer; transition: all .12s; } .brand-card:hover { border-color: var(--accent-line); background: var(--accent-wash); } .brand-card.on { border-color: var(--accent); background: var(--accent-wash); } .brand-card .bemblem { color: var(--ink-3); transition: color .12s, filter .12s, opacity .12s; height: 40px; display: flex; align-items: center; justify-content: center; } .brand-card .bemblem svg { display: block; } .brand-card:hover .bemblem, .brand-card.on .bemblem { color: var(--accent); } /* Official marque logos (img). Sized to fit the tile; slightly muted at rest, full-strength on hover/selected. */ .brand-card .make-logo { display: block; height: 36px; width: auto; max-width: 86px; object-fit: contain; filter: saturate(.9); opacity: .9; transition: filter .12s, opacity .12s; } .brand-card:hover .make-logo, .brand-card.on .make-logo { filter: none; opacity: 1; } .brand-card .make-logo-audi { height: 24px; max-width: 92px; } /* wide 4-rings */ .brand-card .make-logo-porsche { height: 40px; } /* tall crest */ .brand-card .make-logo-mercedes { height: 38px; } .brand-card .bname { font-size: 13.5px; font-weight: 700; color: var(--ink); text-align: center; line-height: 1.1; } .brand-card .bcheck { position: absolute; top: 8px; right: 8px; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; } .brand-next { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); } .seldd-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .brand-next .seldd-row { grid-template-columns: 1fr 1fr; } /* hero: Model + Variant */ .seldd { position: relative; min-width: 0; } /* allow the cell to shrink (ellipsis) */ .seldd-lbl { font-size: 12px; font-weight: 600; color: var(--ink-2); margin-bottom: 7px; } .seldd-btn { width: 100%; height: 48px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface); display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 14px; font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer; font-family: inherit; transition: border-color .12s, box-shadow .12s; } .seldd-btn:hover:not(:disabled) { border-color: var(--ink-3); } .seldd-btn.open { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); } .seldd-btn:disabled { background: var(--surface-2); color: var(--ink-3); cursor: not-allowed; } .seldd-btn .ph { color: var(--ink-3); font-weight: 500; } .seldd-btn > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; } .seldd-btn svg { color: var(--ink-3); flex-shrink: 0; } .seldd-menu { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r); box-shadow: var(--shadow); max-height: 260px; overflow-y: auto; } /* floating (body-attached) variant — escapes hero/sel-card overflow clipping */ .seldd-menu-float { position: fixed; z-index: 1000; display: flex; flex-direction: column; max-height: 320px; overflow: hidden; } .seldd-menu-float .seldd-search { padding: 8px; border-bottom: 1px solid var(--line); background: var(--surface); flex-shrink: 0; } .seldd-menu-float .seldd-search input { width: 100%; height: 36px; border: 1px solid var(--line-2); border-radius: var(--r); padding: 0 12px; font-family: inherit; font-size: 14px; color: var(--ink); background: var(--surface-2); outline: none; } .seldd-menu-float .seldd-search input:focus { border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px var(--accent-wash); } .seldd-menu-float .seldd-list { overflow-y: auto; } .seldd-menu .dd-empty { padding: 16px; font-size: 13.5px; color: var(--ink-3); text-align: center; } /* Mobile bottom-sheet variant of the selector dropdown — anchored to the bottom of the viewport so it can never go off-screen and survives the soft keyboard. */ .seldd-sheet-backdrop { position: fixed; inset: 0; z-index: 999; background: oklch(0.2 0.02 250 / 0.45); } .seldd-sheet-head { display: none; } @media (max-width: 600px) { .seldd-menu-sheet { position: fixed; left: 0; right: 0; bottom: 0; top: auto !important; width: 100% !important; max-height: 82vh !important; border: none; border-radius: 18px 18px 0 0; box-shadow: 0 -10px 44px oklch(0.2 0.02 250 / 0.3); animation: sheetUp .2s ease-out; padding-bottom: env(safe-area-inset-bottom, 0px); } .seldd-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 15px 16px 4px; } .seldd-sheet-title { font-size: 12.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-2); } .seldd-sheet-x { border: none; background: none; font-size: 28px; line-height: 1; color: var(--ink-3); cursor: pointer; padding: 0 6px; } .seldd-menu-sheet .seldd-search { padding: 8px 16px 12px; } .seldd-menu-sheet .seldd-search input { height: 46px; font-size: 16px; } .seldd-menu-sheet .seldd-list { max-height: none; flex: 1; -webkit-overflow-scrolling: touch; } .seldd-menu-sheet .dd-item { padding: 15px 16px; font-size: 15px; } } @keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } } .brand-actions { margin-top: 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .brand-actions .btn { padding: 0 24px; } .brand-selected-inline { font-size: 13.5px; color: var(--accent-deep); font-weight: 600; } .brand-selected-inline b { font-weight: 700; } .sel-altform { max-width: 540px; } .sel-altform .al { font-size: 12px; font-weight: 600; color: var(--ink-2); margin-bottom: 7px; } .sel-altform .ain { width: 100%; height: 48px; border: 1px solid var(--line-2); border-radius: var(--r); padding: 0 14px; font-size: 15px; font-family: var(--mono); color: var(--ink); outline: none; background: var(--surface); letter-spacing: 0.04em; } .sel-altform .ain:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); } .sel-altform .ahint { font-size: 12.5px; color: var(--ink-3); margin-top: 8px; } .sel-altform .anote { margin-top: 14px; padding: 11px 13px; border-radius: var(--r); background: var(--warn-wash); border: 1px solid oklch(0.86 0.06 75); font-size: 12.5px; color: oklch(0.46 0.09 60); } /* ============================================================ SLIM PERSISTENT VEHICLE BAR ============================================================ */ .vbar { position: static; background: var(--ink); color: oklch(0.96 0.005 250); border-bottom: 1px solid var(--ink); } .vbar-row { display: flex; align-items: center; gap: 16px; height: 46px; } .vbar .badge-ok { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: oklch(0.78 0.12 156); white-space: nowrap; } .vbar .veh { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; white-space: nowrap; } .vbar .veh .chip { font-family: var(--mono); font-size: 12px; padding: 2px 7px; border-radius: 3px; background: oklch(1 0 0 / 0.1); color: oklch(0.92 0.005 250); } .vbar .veh b { font-weight: 700; } .vbar .sep { width: 1px; height: 18px; background: oklch(1 0 0 / 0.16); } .vbar .lnk { margin-left: auto; display: flex; gap: 6px; align-items: center; } .vbar .lnk button { background: oklch(1 0 0 / 0.08); border: 1px solid oklch(1 0 0 / 0.14); color: inherit; height: 30px; padding: 0 12px; border-radius: var(--r); font-size: 12.5px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: background .12s; } .vbar .lnk button:hover { background: oklch(1 0 0 / 0.16); } .vbar .lnk button.on { background: var(--accent); border-color: var(--accent); color: #fff; } /* No-vehicle prompt variant of the bar (catalog pages only) */ .vbar-prompt { background: var(--surface-2); color: var(--ink-2); border-bottom: 1px solid var(--line); } .vbar-prompt .veh { color: var(--ink-2); } .vbar-prompt .veh svg { color: var(--accent); } .vbar-prompt .sep { background: var(--line-2); } .vbar-prompt .lnk a { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--accent-deep); } .vbar-prompt .lnk a:hover { text-decoration: underline; } /* Disabled confirm button (real disabled attribute, not opacity hacks) */ .brand-actions .btn:disabled { opacity: 0.55; cursor: not-allowed; } /* inline vehicle-change panel (replaces modal) */ .veh-edit { background: var(--surface-2); border-bottom: 1px solid var(--line); } .veh-edit-inner { padding: 22px 0 26px; } .veh-edit-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } /* ---- inline vehicle picker (vehicle bar + PDP fitment box) -------------- A5's markup (shared/_vehicle_picker.html.erb, rendered collapsed from layouts/_vehicle_bar.html.erb on every catalogue, guide and product page) shipped in wave 2 after this stylesheet's owner had finished, so these rules arrived as a request rather than in that pass. Without them the picker renders unstyled. Everything below is a new class name; nothing here overrides an existing rule. */ /* The collapsed panel is toggled with the `hidden` attribute from vehicle_selector_controller; make sure nothing beats it on specificity. */ .veh-edit[hidden] { display: none; } .veh-edit-title { font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2); } .veh-edit-x { border: none; background: none; color: var(--ink-3); cursor: pointer; padding: 0; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } .veh-edit-x:hover { color: var(--ink); } /* Inline mode: Make / Model / Variant in one row. .seldd-row is already the 3-column grid (line 312) and was previously unused. */ .sel-inline { border-radius: var(--r); } .sel-inline .sel-bbody { padding: 18px 20px 20px; } .vpick-next { margin-top: 18px; } /* Search box — the picker's first control, available before a make is chosen. */ .vpick-find { margin-bottom: 16px; } .vpick-find-in { position: relative; display: flex; align-items: center; } .vpick-find-in svg { position: absolute; left: 12px; color: var(--ink-3); pointer-events: none; } .vpick-find-in input { width: 100%; height: 44px; padding: 0 14px 0 36px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface); font: inherit; font-size: 14px; color: var(--ink); } .vpick-find-in input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); } .vpick-results { margin-top: 8px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface); max-height: 280px; overflow-y: auto; } .vpick-results[hidden] { display: none; } .vres { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; text-align: left; padding: 10px 14px; border: none; background: none; border-bottom: 1px solid var(--line); font: inherit; cursor: pointer; min-height: 44px; } .vres:last-child { border-bottom: none; } .vres:hover:not([disabled]) { background: var(--accent-wash); } .vres[disabled] { cursor: not-allowed; } .vres-main { font-size: 14px; font-weight: 600; color: var(--ink); } .vres.noparts .vres-main { color: var(--ink-3); font-weight: 500; } .vres-meta { font-size: 12px; color: var(--ink-3); font-family: var(--mono); } .vres-empty { padding: 14px; font-size: 13.5px; color: var(--ink-2); } /* "Show N older models" row inside a Model dropdown. Pre-2000 models are folded, never removed. */ .dd-more { display: block; width: 100%; text-align: left; padding: 12px 16px; border: none; border-top: 1px solid var(--line); background: var(--surface-2); font: inherit; font-size: 13px; font-weight: 600; color: var(--accent-deep); cursor: pointer; min-height: 44px; } .dd-more:hover { background: var(--accent-wash); } .vpick-help { margin: 14px 0 0; font-size: 13px; color: var(--ink-2); } .vpick-help a { display: inline-flex; align-items: center; gap: 5px; color: var(--accent-deep); font-weight: 600; } .vpick-help a:hover { text-decoration: underline; } @media (max-width: 600px) { .sel-inline .seldd-row { grid-template-columns: 1fr; gap: 10px; } .veh-edit-inner { padding: 16px 0 20px; } /* 16px stops iOS zooming the page when the field takes focus. */ .vpick-find-in input { font-size: 16px; height: 46px; } .vpick-results { max-height: 60vh; } /* A5 also asked for `.brand-actions .btn { width: 100% }` here; it already exists in the phone block at the foot of this file, so it is not repeated. */ } /* ============================================================ GENERIC PAGE BITS ============================================================ */ .section { padding-top: 56px; padding-bottom: 56px; } .crumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-3); padding-top: 20px; padding-bottom: 20px; } .crumbs a { cursor: pointer; } .crumbs a:hover { color: var(--ink); } .crumbs .sl { color: var(--line-2); } .sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 26px; } .sec-head h2 { font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin: 0; color: var(--ink-2); display: flex; align-items: center; gap: 10px; } .sec-head h2 .ln { width: 26px; height: 1px; background: var(--line-2); } /* top-level category section header in catalog listings */ .cat-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 12px; margin-bottom: 4px; border-bottom: 2px solid var(--ink); } .cat-section-head h2 { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; margin: 0; color: var(--ink); } .cat-section-count { font-size: 13px; color: var(--ink-3); white-space: nowrap; } /* catalog pagination */ .catalog-pager { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 40px; flex-wrap: wrap; } .catalog-pager .pager-btn { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface); font-size: 13.5px; font-weight: 600; color: var(--ink); cursor: pointer; } .catalog-pager .pager-btn:hover { border-color: var(--ink-3); } .catalog-pager .pager-btn.disabled { color: var(--ink-3); border-color: var(--line); cursor: default; opacity: 0.6; } .catalog-pager .pager-nums { display: flex; align-items: center; gap: 4px; } .catalog-pager .pager-num { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 8px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface); font-size: 13.5px; font-weight: 600; color: var(--ink-2); cursor: pointer; } .catalog-pager .pager-num:hover { border-color: var(--ink-3); color: var(--ink); } .catalog-pager .pager-num.on { background: var(--accent); border-color: var(--accent); color: #fff; } .catalog-pager .pager-gap { color: var(--ink-3); padding: 0 2px; } .pager-meta { text-align: center; font-size: 12.5px; color: var(--ink-3); margin-top: 10px; } /* ============================================================ ACCOUNT / AUTH ============================================================ */ .auth-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 32px; align-items: start; margin-top: 18px; max-width: 920px; } .auth-aside { padding: 28px; } .auth-aside h3 { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; margin: 0 0 10px; } .auth-aside p { font-size: 14px; color: var(--ink-2); line-height: 1.6; margin: 0 0 16px; } .auth-perks { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-direction: column; gap: 10px; } .auth-perks li { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--ink-2); } .auth-perks li svg { color: var(--ok); flex-shrink: 0; } .checkbox-inline { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-2); } .checkbox-inline input { width: 16px; height: 16px; accent-color: var(--accent); } @media (max-width: 920px) { .auth-grid { grid-template-columns: 1fr; } } .acct-layout { display: grid; grid-template-columns: 220px 1fr; gap: 28px; align-items: start; } .acct-menu { display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); padding: 8px; } .acct-menu-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r); font-size: 14px; font-weight: 600; color: var(--ink-2); width: 100%; background: none; border: none; cursor: pointer; text-align: left; } .acct-menu-item:hover { background: var(--surface-2); color: var(--ink); } .acct-menu-item.on { background: var(--accent-wash); color: var(--accent-deep); } .acct-menu-item svg { color: var(--ink-3); flex-shrink: 0; } .acct-menu-item.on svg { color: var(--accent-deep); } .acct-logout { margin-top: 2px; border-top: 1px solid var(--line); padding-top: 2px; } @media (max-width: 768px) { .acct-layout { grid-template-columns: 1fr; } .acct-menu { flex-direction: row; flex-wrap: wrap; } } /* form-control bridge for account/auth pages (reuses checkout look) */ .account-page input[type="text"], .account-page input[type="email"], .account-page input[type="password"], .account-page input[type="tel"], .account-page select, .account-page textarea { width: 100%; height: 44px; border: 1px solid var(--line-2); border-radius: var(--r); padding: 0 13px; font-family: inherit; font-size: 14px; color: var(--ink); background: var(--surface); outline: none; transition: border-color .12s, box-shadow .12s; } .account-page input:focus, .account-page select:focus, .account-page textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); } .account-page .form-field { margin-bottom: 16px; } .account-page .form-field label { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-2); margin-bottom: 7px; } .page-title { font-size: 34px; font-weight: 800; letter-spacing: -0.025em; margin: 0 0 6px; } .page-sub { font-size: 15px; color: var(--ink-2); margin: 0; } /* category cards */ .cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .cat-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; cursor: pointer; transition: all .14s; position: relative; overflow: hidden; min-height: 148px; display: flex; flex-direction: column; } .cat-card:hover { border-color: var(--accent-line); box-shadow: var(--shadow-sm); transform: translateY(-2px); } .cat-card .cnum { font-family: var(--mono); font-size: 11px; color: var(--ink-3); } .cat-card .cglyph { margin: 6px 0 auto; color: var(--accent); } .cat-card h3 { font-size: 16px; font-weight: 700; margin: 14px 0 2px; letter-spacing: -0.01em; } .cat-card .cmeta { font-size: 12.5px; color: var(--ink-3); } .cat-card .arrow { position: absolute; top: 18px; right: 18px; color: var(--line-2); transition: all .14s; } .cat-card:hover .arrow { color: var(--accent); transform: translate(2px, -2px); } /* brand strip */ .brand-strip { display: grid; grid-template-columns: repeat(8, 1fr); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); } .brand-cell { display: flex; align-items: center; justify-content: center; padding: 26px 12px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); cursor: pointer; transition: background .12s; min-height: 84px; } .brand-cell:hover { background: var(--surface-2); } .wordmark { font-weight: 800; letter-spacing: -0.01em; color: var(--ink); font-size: 17px; white-space: nowrap; } /* stat row */ .statrow { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .stat { padding: 24px 0; text-align: center; } .stat .k { font-family: var(--mono); font-size: 30px; font-weight: 600; letter-spacing: -0.02em; } .stat .l { font-size: 13px; color: var(--ink-3); margin-top: 2px; } /* ============================================================ SPEC TABLE — the centerpiece ============================================================ */ .cat-layout { display: block; } /* horizontal filter bar */ .filterbar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 12px 16px; border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--surface); margin-bottom: 16px; } .fb-group { display: flex; align-items: center; gap: 10px; } .fb-lbl { font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); } .fb-chips { display: flex; gap: 6px; flex-wrap: wrap; } .fb-chip { height: 32px; padding: 0 13px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface); font-size: 13px; font-weight: 600; color: var(--ink-2); cursor: pointer; display: inline-flex; align-items: center; gap: 7px; transition: all .12s; white-space: nowrap; } .fb-chip:hover { border-color: var(--ink-3); color: var(--ink); } .fb-chip.on { background: var(--accent); border-color: var(--accent); color: #fff; } .fb-chip .ct { font-size: 11px; opacity: 0.65; font-family: var(--mono); } .fb-chip.on .ct { opacity: 0.85; } .fb-sep { width: 1px; height: 30px; background: var(--line); } .fb-spacer { flex: 1; min-width: 12px; } .fb-reset { font-size: 13px; font-weight: 600; color: var(--accent-deep); cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; } .fb-reset:hover { text-decoration: underline; } .fb-count { font-size: 13px; color: var(--ink-2); white-space: nowrap; } .fb-count b { color: var(--ink); font-family: var(--mono); } /* ---- Category landing: intro, product highlight cards, brand chips ------- */ .cat-intro { max-width: 74ch; margin: 10px 0 0; color: var(--ink-2); line-height: 1.6; font-size: 14.5px; } .pcard-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 16px; } .pcard { display: flex; flex-direction: column; border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; transition: border-color .12s, box-shadow .12s; } .pcard:hover { border-color: var(--ink-3); box-shadow: var(--shadow-sm); } .pcard-top { display: flex; align-items: center; justify-content: center; height: 152px; padding: 16px; background: var(--surface-2); border-bottom: 1px solid var(--line); } .pcard-top img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; } .pcard-ph { font-weight: 800; font-size: 17px; letter-spacing: .04em; opacity: .85; } .pcard-body { display: flex; flex-direction: column; gap: 6px; padding: 12px 13px 13px; flex: 1; } .pcard-brand { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); } .pcard-name { font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.32; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.55em; } .pcard-name:hover { color: var(--accent-deep); } /* stock pill and, where we can derive one, a position badge sit on one row */ .pcard-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 2px; } .pcard-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: 8px; } .cat-brands { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px; } .cat-brand { display: inline-flex; align-items: center; gap: 9px; padding: 9px 14px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); transition: border-color .12s, box-shadow .12s; } .cat-brand:hover { border-color: var(--ink-3); box-shadow: var(--shadow-sm); } .cat-brand .nm { font-weight: 800; font-size: 13.5px; letter-spacing: .01em; } .cat-brand .ct { font-family: var(--mono); font-size: 11px; color: var(--ink-3); } @media (max-width: 900px) { .pcard-grid { grid-template-columns: repeat(2, 1fr); } } .fb-dd { position: relative; } .fb-dd-btn { height: 32px; padding: 0 11px 0 13px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface); font-size: 13px; font-weight: 600; color: var(--ink-2); cursor: pointer; display: inline-flex; align-items: center; gap: 7px; transition: all .12s; } .fb-dd-btn:hover, .fb-dd-btn.open { border-color: var(--ink-3); color: var(--ink); } .fb-dd-btn .pill { background: var(--accent); color: #fff; font-size: 10px; font-weight: 700; border-radius: 8px; min-width: 16px; height: 16px; padding: 0 4px; display: inline-flex; align-items: center; justify-content: center; } .fb-dd-menu { position: absolute; top: calc(100% + 7px); left: 0; z-index: 25; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r); box-shadow: var(--shadow); min-width: 210px; padding: 6px; } .fb-dd-menu .check { padding: 7px 9px; border-radius: 4px; } .fb-dd-menu .check:hover { background: var(--surface-2); } .check { display: flex; align-items: center; gap: 9px; cursor: pointer; font-size: 13.5px; color: var(--ink-2); user-select: none; } .check:hover { color: var(--ink); } .check .box { width: 16px; height: 16px; border: 1.5px solid var(--line-2); border-radius: 3px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all .12s; } .check.on .box { background: var(--accent); border-color: var(--accent); color: #fff; } .check .ct { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--ink-3); } .check .cklbl { white-space: nowrap; } .check .ckct { margin-left: auto; padding-left: 12px; font-family: var(--mono); font-size: 11px; color: var(--ink-3); } .check.on .ckct { color: var(--ink-2); } /* Stock-filter dots */ .stk-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; margin-right: 6px; vertical-align: middle; } .stk-dot.in { background: var(--ok); } .stk-dot.low { background: var(--warn); } .stk-dot.back { background: var(--ink-3); } .fb-chip.on .stk-dot { box-shadow: 0 0 0 1.5px rgba(255,255,255,.9); } .toolbar { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; } .toolbar .count { font-size: 14px; font-weight: 600; white-space: nowrap; } .toolbar .count b { font-family: var(--mono); } .toolbar .spacer { flex: 1; } .seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: var(--r); overflow: hidden; } .seg button { height: 34px; padding: 0 13px; background: var(--surface); border: none; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink-2); border-right: 1px solid var(--line-2); } .seg button:last-child { border-right: none; } .seg button.on { background: var(--ink); color: #fff; } .sortsel { height: 34px; border: 1px solid var(--line-2); border-radius: var(--r); padding: 0 10px; font-family: inherit; font-size: 13px; font-weight: 500; color: var(--ink); background: var(--surface); cursor: pointer; } .tbl-wrap { border: 1px solid var(--line-2); border-radius: var(--r-lg); overflow-x: auto; background: var(--surface); } /* mobile product cards (replace the spec table on phones) */ .spec-cards { display: none; flex-direction: column; gap: 12px; } .spec-card { border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--surface); padding: 14px; cursor: pointer; } .spec-card .sc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .spec-card .sc-pos { flex-shrink: 0; } .spec-card .sc-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin: 14px 0; padding: 13px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .spec-card .sc-kv { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .spec-card .sc-kv .sck { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); } .spec-card .sc-kv .scv { font-size: 13.5px; } .spec-card .sc-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .spec-card .sc-meta { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; } .spec-card .sc-buy { display: flex; align-items: center; gap: 12px; } .spec-card .sc-buy .price-cell { text-align: right; } table.spec { width: 100%; border-collapse: collapse; table-layout: fixed; } /* Headers wrap rather than run over their neighbour. The table is table-layout:fixed with px column widths, so a header longer than its column (the lexicon's "Minimum (discard) thickness" against 104px) used to overflow into the next column's header instead of taking a second line. */ table.spec thead th { text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-3); padding: 12px var(--row-pad); background: var(--surface-2); border-bottom: 1px solid var(--line-2); white-space: normal; line-height: 1.3; vertical-align: bottom; } table.spec thead th.num, table.spec td.num { text-align: right; font-variant-numeric: tabular-nums; } table.spec thead th.sortable { cursor: pointer; } table.spec thead th.sortable:hover { color: var(--ink); } table.spec thead th .sx { color: var(--accent); margin-left: 3px; } table.spec tbody tr { border-bottom: 1px solid var(--line); cursor: pointer; transition: background .1s; } table.spec tbody tr:last-child { border-bottom: none; } table.spec tbody tr:hover { background: var(--accent-wash); } table.spec td { padding: 0 var(--row-pad); height: var(--row-h); vertical-align: middle; font-size: 13.5px; } .cell-prod { display: flex; align-items: center; gap: 13px; min-width: 0; } .brand-tile { width: 40px; height: 40px; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface-2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .brand-tile .wm { font-weight: 800; font-size: 9px; letter-spacing: -0.02em; text-align: center; line-height: 1; color: var(--ink-2); padding: 2px; } .brand-tile.prod-tile { background: #fff; overflow: hidden; padding: 2px; } .brand-tile.prod-tile img { width: 100%; height: 100%; object-fit: contain; display: block; } .brand-tile.prod-tile:hover { border-color: var(--accent-line); } /* Cart line thumbnail: larger than the spec-table tile, same photo + hover preview */ .cart-thumb { flex-shrink: 0; display: block; line-height: 0; } .cart-line2 .brand-tile { width: 68px; height: 68px; border-radius: var(--r-lg); } .cart-line2 .brand-tile.prod-tile { cursor: zoom-in; } /* Hover preview popover (appended to , position set by JS) */ .thumb-pop { position: fixed; z-index: 200; width: 300px; height: 300px; background: #fff; border: 1px solid var(--line-2); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 8px; pointer-events: none; animation: thumbpop 0.09s ease-out; } .thumb-pop img { width: 100%; height: 100%; object-fit: contain; display: block; } @keyframes thumbpop { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } } .cell-prod .pn { min-width: 0; flex: 1; } .cell-prod .pn .nm { font-weight: 600; font-size: 13.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cell-prod .pn .pno { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cell-brand { font-weight: 700; font-size: 13px; } .spec-val { font-family: var(--mono); font-weight: 500; font-size: 13px; } .spec-val .u { color: var(--ink-3); font-size: 11px; margin-left: 1px; } /* A measurement is mono and right-aligned; a translated phrase is prose and must not be. Now that the table says "Accepts a wear sensor, none supplied" instead of "prepared for wear indicator", the mono face was the binding constraint: it needed four lines in the column where the body face needs three. The size and leading are set so the longest string in the lexicon takes three lines of 16px inside the 56px row rather than three of 18px, which left under 2px of clearance above the row divider. inline-block is load-bearing: as a plain inline the wrapped lines are laid out against the cell's own 13.5px strut, so the leading set here is ignored and a three-line value pushes the 56px row to 60. */ .spec-txt { display: inline-block; vertical-align: middle; font-size: 12.5px; color: var(--ink-2); line-height: 1.3; overflow-wrap: break-word; } .spec-sub { font-size: 11px; color: var(--ink-3); margin-top: 1px; } .price-cell { text-align: right; } .price-cell .pr { font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; } .price-cell .vat { font-size: 10.5px; color: var(--ink-3); } .price-cell .was { font-size: 11px; color: var(--ink-3); text-decoration: line-through; } .row-add { display: flex; align-items: center; gap: 8px; justify-content: flex-end; } .addbtn { width: 36px; height: 36px; border-radius: var(--r); border: 1px solid var(--line-2); background: var(--surface); color: var(--accent-deep); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .12s; flex-shrink: 0; } .addbtn:hover { background: var(--accent); color: #fff; border-color: var(--accent); } .stock { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; } .stock .d { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); } .stock.in { color: oklch(0.5 0.1 156); } .stock.low { color: oklch(0.58 0.13 70); } .stock.low .d { background: var(--warn); } .stock.out { color: oklch(0.5 0.16 27); } .stock.out .d { background: oklch(0.55 0.19 27); } /* ============================================================ PRODUCT DETAIL ============================================================ */ .pdp { display: grid; grid-template-columns: 1.12fr 1fr; gap: 56px; align-items: start; padding-top: 12px; } .pdp-media { position: sticky; top: 20px; } .ph-img { aspect-ratio: 4/3; border: 1px solid var(--line-2); border-radius: var(--r-lg); background: repeating-linear-gradient(135deg, var(--surface-2) 0 11px, var(--surface) 11px 22px); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; } .ph-img .tag { font-family: var(--mono); font-size: 12px; color: var(--ink-3); border: 1px dashed var(--line-2); padding: 7px 12px; border-radius: var(--r); background: oklch(1 0 0 / 0.7); } .ph-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 10px; } .ph-thumb { aspect-ratio: 1; border: 1px solid var(--line); border-radius: var(--r); background: repeating-linear-gradient(135deg, var(--surface-2) 0 8px, var(--surface) 8px 16px); cursor: pointer; } .ph-thumb.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-wash); } .pdp-brand { font-weight: 800; font-size: 14px; letter-spacing: 0.02em; color: var(--accent-deep); text-transform: uppercase; } .pdp h1 { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; margin: 8px 0 6px; line-height: 1.12; } .pdp-pno { font-family: var(--mono); font-size: 13px; color: var(--ink-2); } .pdp-meta { display: flex; align-items: center; gap: 14px; margin: 14px 0 22px; flex-wrap: wrap; } /* At-a-glance verified facts, between the price and the buy row. Chips reuse .badge; only the size and the two tones are new. */ .pdp-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: -10px 0 18px; } .pdp-facts .badge { height: 26px; padding: 0 10px; font-size: 12.5px; max-width: 100%; } .pdp-facts .badge svg { color: var(--ink-3); flex-shrink: 0; } .pdp-facts .badge.tone-ok { border-color: var(--ok); background: var(--ok-wash); color: oklch(0.36 0.1 156); } .pdp-facts .badge.tone-ok svg { color: var(--ok); } .pdp-facts .badge.tone-warn { border-color: var(--warn); background: var(--warn-wash); color: oklch(0.46 0.09 60); } .pdp-facts .badge.tone-warn svg { color: var(--warn); } .pdp-price { display: flex; align-items: baseline; gap: 12px; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 22px; } .pdp-price .big { font-size: 32px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .pdp-price .sub { font-size: 12.5px; color: var(--ink-3); } .qty { display: inline-flex; align-items: center; border: 1px solid var(--line-2); border-radius: var(--r); height: 44px; overflow: hidden; } .qty button { width: 42px; height: 100%; background: var(--surface); border: none; cursor: pointer; color: var(--ink-2); display: flex; align-items: center; justify-content: center; } .qty button:hover { background: var(--surface-2); color: var(--ink); } .qty .v { width: 44px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); font-size: 15px; -webkit-text-fill-color: var(--ink); appearance: textfield; -moz-appearance: textfield; } .qty .v::-webkit-outer-spin-button, .qty .v::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .buy-row { display: flex; gap: 12px; margin-bottom: 24px; } .trust-row { display: flex; gap: 20px; flex-wrap: wrap; } /* spec block */ .spec-block { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; margin-bottom: 18px; background: var(--surface); } .spec-block .sb-head { padding: 13px 18px; background: var(--surface-2); border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); display: flex; align-items: center; gap: 9px; flex-wrap: wrap; } /* icon + label inline, vertically centred (icon sits left of the text) */ .spec-block .sb-head .sb-title { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; } .spec-block .sb-head .sb-pill { margin-left: auto; white-space: nowrap; flex-shrink: 0; } .spec-block .sb-head svg { color: var(--accent); flex-shrink: 0; } /* ============================================================ IMAGE LIGHTBOX (PDP) ============================================================ */ .lightbox { position: fixed; inset: 0; z-index: 200; background: oklch(0.18 0.02 250 / 0.82); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 40px; } .lightbox img { max-width: 92vw; max-height: 88vh; object-fit: contain; background: #fff; border-radius: var(--r-lg); box-shadow: 0 16px 60px oklch(0.1 0.02 250 / 0.5); } .lightbox .lb-close { position: absolute; top: 22px; right: 26px; width: 44px; height: 44px; border-radius: 50%; background: oklch(1 0 0 / 0.12); border: 1px solid oklch(1 0 0 / 0.25); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; } .lightbox .lb-close:hover { background: oklch(1 0 0 / 0.22); } .ph-img.zoomable { cursor: zoom-in; } .lightbox .lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; border-radius: 50%; background: oklch(1 0 0 / 0.12); border: 1px solid oklch(1 0 0 / 0.25); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .12s; } .lightbox .lb-nav:hover { background: oklch(1 0 0 / 0.22); } .lightbox .lb-prev { left: 26px; } .lightbox .lb-next { right: 26px; } .lightbox .lb-count { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 13px; font-family: var(--mono); background: oklch(0.2 0.02 250 / 0.5); padding: 5px 12px; border-radius: 12px; } @media (max-width: 600px) { .lightbox .lb-nav { width: 42px; height: 42px; } .lightbox .lb-prev { left: 10px; } .lightbox .lb-next { right: 10px; } } /* ============================================================ FITMENT TABLE — search + show-more ============================================================ */ .fit-tools { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--line); flex-wrap: wrap; } .fit-search { position: relative; flex: 1; min-width: 200px; } .fit-search input { width: 100%; height: 38px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface-2); padding: 0 12px 0 36px; font-family: inherit; font-size: 14px; color: var(--ink); outline: none; } .fit-search input:focus { border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px var(--accent-wash); } .fit-search .ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; } .fit-count { font-size: 13px; color: var(--ink-3); white-space: nowrap; } .fittable tr.fit-hidden { display: none; } .fit-showmore { display: flex; justify-content: center; padding: 14px; border-top: 1px solid var(--line); } .fit-nomatch td { text-align: center; color: var(--ink-3); padding: 22px; } .kv { display: grid; grid-template-columns: 1fr 1fr; } .kv .pair { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 18px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); } .kv .pair:nth-child(2n) { border-right: none; } .kv .pair .k { font-size: 13px; color: var(--ink-2); } .kv .pair .v { font-family: var(--mono); font-size: 13px; font-weight: 500; text-align: right; } .oe-list { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 18px; } .oe-num { font-family: var(--mono); font-size: 12.5px; padding: 5px 10px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); color: var(--ink-2); } .oe-num.strong { background: var(--ink); color: #fff; border-color: var(--ink); } /* full-width product details */ .pdp-details { margin-top: 44px; } .pdp-details-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 18px; align-items: start; } .xr-sub { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); padding: 15px 18px 9px; } .xr-sub:first-child { padding-top: 16px; } .fittable-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .fittable { width: 100%; border-collapse: collapse; } /* mobile fitment cards (replace fitment table on phones) */ .fit-cards { display: none; flex-direction: column; gap: 10px; padding: 14px 16px 16px; } .fit-card { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); padding: 12px 14px; } .fit-card.hl { border-color: var(--accent-line); background: var(--accent-wash); } .fit-card .fc-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; } .fit-card .fc-name { font-weight: 700; font-size: 14px; } .fit-card .fc-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--ink-2); } .fit-card .fc-you { display: inline-flex; align-items: center; gap: 5px; margin-top: 9px; font-size: 12px; font-weight: 700; color: oklch(0.42 0.1 156); } .fittable th { text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-3); padding: 11px 18px; border-bottom: 1px solid var(--line-2); background: var(--surface); white-space: nowrap; } .fittable td { padding: 12px 18px; font-size: 13.5px; border-bottom: 1px solid var(--line); } .fittable tr:last-child td { border-bottom: none; } .fittable .num, .fittable th.num { text-align: right; } .fittable tr.hl td { background: var(--accent-wash); } .fittable .vname { font-weight: 600; } .fittable .chip-sm { font-family: var(--mono); font-size: 12px; padding: 2px 7px; border-radius: 3px; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2); } .fitnote { padding: 13px 18px; font-size: 12.5px; color: var(--ink-3); border-top: 1px solid var(--line); display: flex; align-items: center; gap: 8px; } .fitnote svg { color: var(--accent); flex-shrink: 0; } /* ============================================================ STANDALONE PAGES (all-parts / brand / tech / about / contact) ============================================================ */ .page-hero { padding: 40px 0 30px; border-bottom: 1px solid var(--line); background: var(--surface); } .page-hero .eyebrow2 { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-deep); margin-bottom: 12px; } .imgph { background: repeating-linear-gradient(135deg, var(--surface-2) 0 11px, var(--surface) 11px 22px); display: flex; align-items: center; justify-content: center; color: var(--ink-3); font-family: var(--mono); font-size: 12px; } .imgph .tag { border: 1px dashed var(--line-2); padding: 6px 11px; border-radius: var(--r); background: oklch(1 0 0 / 0.7); } /* all parts */ .allparts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .cat-panel { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); padding: 22px; } .cat-panel .ph { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .cat-panel .ph .gi { width: 42px; height: 42px; border-radius: var(--r); background: var(--accent-wash); color: var(--accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .cat-panel h3 { font-size: 15.5px; font-weight: 700; margin: 0; letter-spacing: -0.01em; } .cat-panel .cn { font-size: 12px; color: var(--ink-3); font-family: var(--mono); } .cat-panel .links { display: flex; flex-direction: column; } .cat-panel .links a { font-size: 13.5px; color: var(--ink-2); padding: 6px 0; cursor: pointer; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; } .cat-panel .links a:hover { color: var(--accent-deep); } .cat-panel .links a .c { font-family: var(--mono); font-size: 11px; color: var(--ink-3); } .cat-panel .all { margin-top: 12px; font-size: 13px; font-weight: 600; color: var(--accent-deep); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; } /* brand page */ .brand-hero { border-bottom: 1px solid var(--line); background: radial-gradient(110% 130% at 90% -20%, var(--accent-wash) 0%, transparent 55%), var(--surface); } .brand-hero-inner { display: grid; grid-template-columns: 1.5fr 1fr; gap: 44px; padding-top: 48px; padding-bottom: 48px; align-items: start; } .brand-mark-lg { font-weight: 800; letter-spacing: -0.01em; font-size: 46px; line-height: 1; } .brand-tagline { font-size: 19px; font-weight: 600; color: var(--ink); margin: 18px 0 12px; } .brand-blurb { font-size: 15px; color: var(--ink-2); line-height: 1.6; max-width: 54ch; } .brand-facts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; } .fact-chip { border: 1px solid var(--line-2); border-radius: var(--r); padding: 10px 14px; background: var(--surface); } .fact-chip .l { font-size: 10.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-3); } .fact-chip .v { font-size: 15px; font-weight: 700; margin-top: 2px; } .brand-side { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; } .brand-side .sh { padding: 14px 18px; background: var(--surface-2); border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-2); } .brand-side .li { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-bottom: 1px solid var(--line); font-size: 14px; font-weight: 500; } .brand-side .li:last-child { border-bottom: none; } .brand-side .li svg { color: var(--accent); } /* articles */ .article-feature { display: grid; grid-template-columns: 1.25fr 1fr; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); margin-bottom: 26px; cursor: pointer; transition: box-shadow .15s; } .article-feature:hover { box-shadow: var(--shadow); } .article-feature .img { min-height: 300px; } .article-feature .body { padding: 36px; display: flex; flex-direction: column; justify-content: center; } .art-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .art-card { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); cursor: pointer; transition: all .15s; display: flex; flex-direction: column; } .art-card:hover { border-color: var(--accent-line); box-shadow: var(--shadow-sm); transform: translateY(-2px); } .art-card .img { height: 156px; } .art-card .body { padding: 18px; flex: 1; display: flex; flex-direction: column; } .art-cat { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent-deep); } .art-title { font-size: 16px; font-weight: 700; margin: 7px 0 8px; letter-spacing: -0.01em; line-height: 1.25; } .article-feature .art-title { font-size: 26px; } .art-excerpt { font-size: 13.5px; color: var(--ink-2); line-height: 1.55; flex: 1; } .art-meta { font-size: 12px; color: var(--ink-3); display: flex; gap: 12px; margin-top: 14px; align-items: center; } .art-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; } /* about */ .about-lead { font-size: 24px; line-height: 1.45; font-weight: 500; max-width: 30ch; letter-spacing: -0.01em; } .about-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 8px; } .about-cols p { font-size: 15px; color: var(--ink-2); line-height: 1.7; margin: 0 0 16px; } .values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .value-card { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; background: var(--surface); } .value-card .vi { width: 42px; height: 42px; border-radius: var(--r); background: var(--accent-wash); color: var(--accent); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; } .value-card h3 { font-size: 16px; font-weight: 700; margin: 0 0 6px; } .value-card p { font-size: 13.5px; color: var(--ink-2); line-height: 1.6; margin: 0; } /* contact */ .contact-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 36px; align-items: start; } .form-card { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); padding: 28px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .form-field { margin-bottom: 16px; } .form-field label { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-2); margin-bottom: 7px; } .form-field input, .form-field textarea, .form-field select { width: 100%; border: 1px solid var(--line-2); border-radius: var(--r); padding: 11px 13px; font-family: inherit; font-size: 14px; color: var(--ink); outline: none; background: var(--surface); transition: border-color .12s, box-shadow .12s; } .form-field textarea { resize: vertical; min-height: 120px; } .form-field input:focus, .form-field textarea:focus, .form-field select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); } .contact-panel { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; } .contact-panel .ch { padding: 18px 20px; background: var(--ink); color: #fff; } .contact-panel .ch b { font-size: 16px; font-weight: 700; } .contact-panel .ch div { font-size: 13px; color: oklch(0.78 0.01 250); margin-top: 3px; } .contact-row { display: flex; gap: 13px; padding: 16px 20px; border-bottom: 1px solid var(--line); } .contact-row:last-child { border-bottom: none; } .contact-row .ci { width: 36px; height: 36px; border-radius: var(--r); background: var(--accent-wash); color: var(--accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .contact-row .cl { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); } .contact-row .cv { font-size: 14px; font-weight: 600; margin-top: 2px; } .contact-row .cv span { display: block; font-weight: 500; color: var(--ink-2); font-size: 13px; } /* article / reading page */ .art-page-hero { border-bottom: 1px solid var(--line); background: var(--surface); } .art-page-hero .wrap { padding: 32px 28px 0; } .art-back { display: flex; width: fit-content; align-items: center; gap: 7px; font-size: 13px; color: var(--ink-2); cursor: pointer; font-weight: 500; margin-bottom: 20px; } .art-back:hover { color: var(--accent-deep); } .art-h1 { font-size: 40px; line-height: 1.08; letter-spacing: -0.03em; font-weight: 800; margin: 12px 0 16px; max-width: 20ch; } .art-byline { display: flex; align-items: center; gap: 12px; padding: 4px 0 28px; } .art-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; flex-shrink: 0; } .art-byline .bn { font-size: 14px; font-weight: 700; } .art-byline .bm { font-size: 12.5px; color: var(--ink-3); } .art-hero-img { aspect-ratio: 21/8; border-radius: var(--r-lg); border: 1px solid var(--line-2); } .article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 52px; align-items: start; padding: 40px 0 64px; } .prose { max-width: 760px; } .prose .lead { font-size: 20px; line-height: 1.55; color: var(--ink-2); margin: 0 0 26px; font-weight: 500; } .prose p { font-size: 16px; line-height: 1.72; color: var(--ink); margin: 0 0 20px; } .prose h2 { font-size: 25px; font-weight: 800; letter-spacing: -0.02em; margin: 40px 0 14px; display: flex; align-items: baseline; gap: 12px; scroll-margin-top: 20px; } .prose h3 { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; margin: 26px 0 10px; color: var(--ink); } .prose h2 .signo { font-family: var(--mono); font-size: 15px; font-weight: 600; color: var(--accent); border: 1.5px solid var(--accent-line); border-radius: 6px; padding: 2px 9px; flex-shrink: 0; } .prose ul { margin: 0 0 20px; padding: 0; list-style: none; } .prose ul li { font-size: 16px; line-height: 1.65; color: var(--ink); margin-bottom: 11px; padding-left: 28px; position: relative; } .prose ul li::before { content: ""; position: absolute; left: 4px; top: 9px; width: 7px; height: 7px; border-radius: 2px; background: var(--accent); } .prose strong { font-weight: 700; } .callout { border: 1px solid var(--accent-line); background: var(--accent-wash); border-radius: var(--r-lg); padding: 20px 22px; margin: 26px 0; } .callout .ct { display: flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-deep); margin-bottom: 10px; } .callout p { font-size: 14.5px; line-height: 1.6; margin: 0; color: var(--ink); } .callout table { width: 100%; border-collapse: collapse; margin-top: 12px; } .callout table td { padding: 7px 0; font-size: 14px; border-bottom: 1px solid var(--accent-line); } .callout table td:last-child { text-align: right; font-family: var(--mono); font-weight: 600; } .callout table tr:last-child td { border-bottom: none; } .pullquote { font-size: 22px; line-height: 1.4; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); border-left: 3px solid var(--accent); padding: 4px 0 4px 22px; margin: 28px 0; } .art-side { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 18px; } .toc-card, .side-cta { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; } .toc-card .th { padding: 13px 16px; font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid var(--line); } .toc-card a { display: block; padding: 9px 16px; font-size: 13.5px; color: var(--ink-2); cursor: pointer; border-bottom: 1px solid var(--line); } .toc-card a:last-child { border-bottom: none; } .toc-card a:hover { color: var(--accent-deep); background: var(--surface-2); } .side-cta { background: var(--ink); color: #fff; padding: 22px; } .side-cta h4 { font-size: 16px; font-weight: 700; margin: 0 0 6px; } .side-cta p { font-size: 13px; color: oklch(0.8 0.01 250); margin: 0 0 16px; line-height: 1.5; } .art-foot { border-top: 1px solid var(--line); padding-top: 32px; } .art-related { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 18px; } @media (max-width: 1080px) { .article-layout { grid-template-columns: 1fr; } .art-side { position: static; } .art-related { grid-template-columns: repeat(2, 1fr); } } /* ============================================================ CART PAGE + ONE-PAGE CHECKOUT ============================================================ */ .shop-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 32px; align-items: start; } .cart-lines { border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; } .cart-line2 { display: flex; gap: 16px; padding: 18px 20px; border-bottom: 1px solid var(--line); align-items: center; } .cart-line2:last-child { border-bottom: none; } .cart-line2 .ci { flex: 1; min-width: 0; } .cart-line2 .ci .nm { font-weight: 600; font-size: 14.5px; } .cart-line2 .ci .mt { font-size: 12px; color: var(--ink-3); font-family: var(--mono); margin-top: 2px; } .cart-line2 .ci .tags { display: flex; gap: 8px; margin-top: 8px; align-items: center; } .cart-line2 .rm { font-size: 12.5px; color: var(--ink-3); cursor: pointer; display: inline-flex; align-items: center; gap: 5px; } .cart-line2 .rm:hover { color: var(--ink); } .cart-line2 .lp { font-weight: 700; font-size: 16px; font-variant-numeric: tabular-nums; white-space: nowrap; } .cart-line2 .lp .ea { display: block; font-size: 11px; font-weight: 500; color: var(--ink-3); } /* shared summary card */ .summary-card { border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; position: sticky; top: 24px; } .summary-card .sh { padding: 16px 20px; border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; } .summary-items { padding: 4px 20px; max-height: 300px; overflow-y: auto; } .sum-line { display: flex; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); align-items: center; } .sum-line:last-child { border-bottom: none; } .sum-line .si { flex: 1; min-width: 0; } .sum-line .si .nm { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sum-line .si .mt { font-size: 11px; color: var(--ink-3); font-family: var(--mono); } .sum-line .sp { font-weight: 700; font-size: 13.5px; font-variant-numeric: tabular-nums; white-space: nowrap; } .sum-qty { width: 22px; height: 22px; border-radius: 5px; background: var(--ink); color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .summary-totals { padding: 16px 20px; } .stot { display: flex; align-items: center; justify-content: space-between; font-size: 13.5px; color: var(--ink-2); padding: 5px 0; } .stot .v { font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 500; } .stot .free { color: var(--ok); font-weight: 700; } .stot.grand { font-size: 19px; font-weight: 800; color: var(--ink); padding-top: 13px; margin-top: 7px; border-top: 1px solid var(--line); } .stot.grand .v { font-weight: 800; } .stot .gst { font-size: 11.5px; color: var(--ink-3); } .summary-foot { padding: 0 20px 20px; } .ship-hint { font-size: 12.5px; color: var(--ink-3); text-align: center; margin-top: 11px; } .ship-hint b { color: var(--accent-deep); } .secure-note { display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 12px; color: var(--ink-3); margin-top: 12px; } .secure-note svg { color: var(--ok); } .pay-icons { display: flex; gap: 6px; } .pay-icons span { font-size: 9px; font-weight: 800; letter-spacing: 0.02em; padding: 3px 6px; border: 1px solid var(--line-2); border-radius: 3px; color: var(--ink-2); background: var(--surface); } /* checkout form */ .co-section { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); padding: 24px; margin-bottom: 16px; } .co-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; } .co-step { width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex-shrink: 0; font-family: var(--mono); } .co-head h3 { font-size: 16px; font-weight: 700; margin: 0; } .delivery-opt { display: flex; align-items: center; gap: 13px; border: 1.5px solid var(--line-2); border-radius: var(--r); padding: 14px 16px; cursor: pointer; margin-bottom: 10px; transition: all .12s; } .delivery-opt:last-child { margin-bottom: 0; } .delivery-opt.on { border-color: var(--accent); background: var(--accent-wash); } .delivery-opt .radio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line-2); flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .delivery-opt.on .radio { border-color: var(--accent); } .delivery-opt.on .radio::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); } .delivery-opt .do-t { flex: 1; } .delivery-opt .do-t b { font-size: 14px; font-weight: 600; } .delivery-opt .do-t div { font-size: 12.5px; color: var(--ink-3); } .delivery-opt .do-p { font-weight: 700; font-variant-numeric: tabular-nums; } .co-fitline { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: oklch(0.46 0.08 156); background: var(--ok-wash); border: 1px solid oklch(0.86 0.05 156); border-radius: var(--r); padding: 9px 13px; margin-bottom: 16px; } .co-fitline svg { flex-shrink: 0; } .co-fitline b { font-weight: 700; } /* confirmation */ .confirm-box { max-width: 640px; margin: 0 auto; text-align: center; padding: 60px 20px; } .confirm-ic { width: 66px; height: 66px; border-radius: 50%; background: var(--ok); color: #fff; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 22px; } .confirm-box h1 { font-size: 32px; font-weight: 800; letter-spacing: -0.025em; margin: 0 0 10px; } .confirm-box .sub { font-size: 15px; color: var(--ink-2); margin: 0 0 28px; } .order-card { border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--surface); text-align: left; overflow: hidden; margin-bottom: 28px; } .order-card .oh { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; background: var(--surface-2); border-bottom: 1px solid var(--line); } .order-card .oh .ol { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); } .order-card .oh .ov { font-family: var(--mono); font-weight: 700; font-size: 15px; } .order-steps { display: grid; grid-template-columns: repeat(3, 1fr); } .order-steps .os { padding: 18px; text-align: center; border-right: 1px solid var(--line); } .order-steps .os:last-child { border-right: none; } .order-steps .os .oi { color: var(--accent); margin-bottom: 8px; } .order-steps .os b { font-size: 13.5px; display: block; } .order-steps .os span { font-size: 12px; color: var(--ink-3); } @media (max-width: 1080px) { .shop-grid { grid-template-columns: 1fr; } .summary-card { position: static; } } @media (max-width: 700px) { .art-related { grid-template-columns: 1fr; } } @media (max-width: 1080px) { .allparts-grid { grid-template-columns: repeat(2, 1fr); } .brand-hero-inner, .article-feature, .contact-grid, .about-cols { grid-template-columns: 1fr; } .art-grid, .values-grid { grid-template-columns: repeat(2, 1fr); } } .fit-box { border: 1px solid var(--ok); border-radius: var(--r-lg); background: var(--ok-wash); padding: 16px 18px; display: flex; align-items: center; gap: 14px; margin-bottom: 22px; } .fit-box .ic { width: 36px; height: 36px; border-radius: 50%; background: var(--ok); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .fit-box .tx b { font-weight: 700; font-size: 14px; color: oklch(0.36 0.1 156); } .fit-box .tx div { font-size: 12.5px; color: oklch(0.44 0.07 156); margin-top: 1px; } /* related */ .rel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .rel-card { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; cursor: pointer; transition: all .14s; background: var(--surface); } .rel-card:hover { border-color: var(--accent-line); box-shadow: var(--shadow-sm); } .rel-card .rb { font-weight: 700; font-size: 12px; color: var(--accent-deep); } .rel-card .rn { font-weight: 600; font-size: 14px; margin: 4px 0 8px; } .rel-card .rp { font-weight: 700; font-variant-numeric: tabular-nums; } /* ============================================================ SEARCH ============================================================ */ .srch-head { padding: 28px 0 20px; } .srch-head .q { font-size: 13px; color: var(--ink-3); } .srch-head .q b { color: var(--ink); } .result-type { font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-3); padding: 18px var(--row-pad) 8px; } /* ============================================================ FOOTER ============================================================ */ .ftr { border-top: 1px solid var(--line); background: var(--surface); margin-top: auto; } .ftr-main { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 32px; padding: 48px 0 36px; } .ftr-col h5 { font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 14px; } .ftr-col a { display: block; font-size: 13.5px; color: var(--ink-2); padding: 5px 0; cursor: pointer; } .ftr-col a:hover { color: var(--ink); } .ftr-about { font-size: 13.5px; color: var(--ink-2); max-width: 40ch; margin: 14px 0 0; line-height: 1.6; } .ftr-bottom { border-top: 1px solid var(--line); padding: 18px 0; display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; color: var(--ink-3); } /* ============================================================ MINI CART (slide-over) ============================================================ */ .overlay { position: fixed; inset: 0; background: oklch(0.2 0.02 250 / 0.32); z-index: 60; backdrop-filter: blur(2px); } .drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 408px; max-width: 92vw; background: var(--surface); z-index: 61; box-shadow: -8px 0 40px oklch(0.3 0.02 250 / 0.18); display: flex; flex-direction: column; } .drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--line); } .drawer-head h3 { margin: 0; font-size: 15px; font-weight: 700; } .drawer-body { flex: 1; overflow-y: auto; padding: 8px 20px; } .drawer-foot { border-top: 1px solid var(--line); padding: 18px 20px; } .cart-line { display: flex; gap: 13px; padding: 16px 0; border-bottom: 1px solid var(--line); } .cart-line .ct { flex: 1; min-width: 0; } .cart-line .nm { font-weight: 600; font-size: 13.5px; } .cart-line .mt { font-size: 11.5px; color: var(--ink-3); font-family: var(--mono); margin-top: 2px; } .cart-line .rm { font-size: 12px; color: var(--ink-3); cursor: pointer; margin-top: 6px; } .cart-line .rm:hover { color: var(--ink); } .cart-line .lp { font-weight: 700; font-variant-numeric: tabular-nums; } .cart-empty { text-align: center; padding: 60px 20px; color: var(--ink-3); } .cart-tot { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .cart-tot .tl { font-size: 13px; color: var(--ink-2); } .cart-tot .tv { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; } /* toast */ .toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 70; background: var(--ink); color: #fff; padding: 13px 18px; border-radius: var(--r); font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 10px; box-shadow: var(--shadow); } .toast svg { color: oklch(0.8 0.13 156); } /* entrance — disabled: base state always visible, no layer/capture risk */ .rise { } @media (max-width: 1080px) { .pdp { grid-template-columns: 1fr; } /* Sticky only makes sense while .pdp is two-column. Once it collapses to one column the sticky media's containing block becomes the whole .pdp box, so the pinned image paints over the buy box below it and swallows every tap on Add to cart, the qty stepper and the postcode field. Static, not z-index or pointer-events: the image itself must stay tappable to open the lightbox. */ .pdp-media { position: static; } /* A grid item defaults to min-width: auto, so a photo that fails to load sizes the whole column to its alt text - measured at 668px inside a 375px viewport against a product whose blob was missing. Nine live products carry no photo at all, so this is not hypothetical. Both columns need it: long part numbers would do the same on the buy side. */ .pdp > * { min-width: 0; } .cat-layout { grid-template-columns: 1fr; } .filters { position: static; } .pdp-details-grid { grid-template-columns: 1fr; } .brand-cards { grid-template-columns: repeat(3, 1fr); } .seldd-row { grid-template-columns: 1fr; } .cat-grid { grid-template-columns: repeat(2, 1fr); } .brand-strip { grid-template-columns: repeat(4, 1fr); } } /* ============================================================ RESPONSIVE — TABLET (≤920px) ============================================================ */ @media (max-width: 920px) { /* footer to two columns, intro spans full width */ .ftr-main { grid-template-columns: 1fr 1fr; gap: 30px 32px; } .ftr-col:first-child { grid-column: 1 / -1; } /* hero scales down */ .hero-inner { padding-top: 64px; padding-bottom: 56px; } .hero h1 { font-size: 42px; } .hero .sub { font-size: 16px; } /* nav becomes horizontally scrollable so it never clips */ .hdr-nav { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .hdr-nav::-webkit-scrollbar { display: none; } .nav { gap: 20px; } .nav a { white-space: nowrap; } /* page heroes / big marks */ .brand-mark-lg { font-size: 40px; } .brand-hero-inner { padding-top: 40px; padding-bottom: 40px; gap: 32px; } .art-h1 { font-size: 34px; } } /* ============================================================ RESPONSIVE — MOBILE (≤600px) ============================================================ */ @media (max-width: 600px) { .wrap { padding-left: 18px; padding-right: 18px; } .section { padding-top: 36px; padding-bottom: 36px; } /* --- header: hamburger + logo + icon actions; search full-width below --- */ .hdr-top { display: flex; flex-wrap: wrap; align-items: center; height: auto; padding-top: 12px; padding-bottom: 12px; gap: 10px; } /* logo left; account + cart, then the menu opener, grouped on the right */ .logo { order: 0; } .logo img { height: 38px; } .hdr-actions { order: 1; margin-left: auto; gap: 2px; } .hamburger { display: inline-flex; order: 2; margin-left: 2px; } .hdr-search { order: 3; flex-basis: 100%; } .iconbtn { padding: 0 9px; height: 40px; gap: 6px; } .iconbtn .lbl { display: none; } .iconbtn.has-vsep { margin-left: 2px; padding-left: 9px; } /* desktop nav row hidden; nav lives in the hamburger menu */ .hdr-nav-row { display: none; } .mobile-menu { display: flex; flex-direction: column; border-bottom: 1px solid var(--line); background: var(--surface); } .mobile-menu a { display: flex; align-items: center; justify-content: space-between; padding: 15px 18px; font-size: 15px; font-weight: 600; color: var(--ink-2); border-top: 1px solid var(--line); cursor: pointer; } .mobile-menu a:first-child { border-top: none; } .mobile-menu a.on { color: var(--accent-deep); } .mobile-menu a svg { color: var(--ink-3); } /* --- hero --- */ .hero { background-position: 74% 28%; } .hero-inner { padding-top: 38px; padding-bottom: 32px; } .eyebrow { margin-bottom: 16px; } .hero h1 { font-size: 29px; margin-bottom: 14px; max-width: none; } .hero .sub { font-size: 15px; margin-bottom: 24px; max-width: none; } .hero-trust { flex-direction: column; gap: 11px; padding-top: 14px; padding-bottom: 14px; } /* --- vehicle selector card --- */ .sel-head { flex-wrap: wrap; gap: 4px 10px; padding: 13px 16px; } .sel-head .t { font-size: 12px; } .sel-bbody { padding: 16px 16px 20px; } .brand-cards { grid-template-columns: repeat(2, 1fr); gap: 8px; } .brand-card { padding: 15px 8px; } .brand-next { margin-top: 16px; padding-top: 16px; } .brand-next .seldd-row { grid-template-columns: 1fr; gap: 12px; } /* stack Model + Variant */ .brand-actions { flex-direction: column; align-items: stretch; gap: 12px; } .brand-actions .btn { width: 100%; } .brand-selected-inline { text-align: center; } /* --- vehicle bar (confirmed strip) --- */ /* stack the confirmed-vehicle bar cleanly, with Change/Clear as a full-width two-button row so nothing crowds the vehicle name */ .vbar-row { flex-direction: column; align-items: stretch; height: auto; gap: 9px; padding-top: 13px; padding-bottom: 15px; } .vbar .sep { display: none; } .vbar .badge-ok { align-self: flex-start; } .vbar .veh { flex-wrap: wrap; white-space: normal; gap: 4px 8px; line-height: 1.4; } .vbar .veh span { overflow-wrap: anywhere; } .vbar .lnk { margin-left: 0; width: 100%; gap: 10px; margin-top: 2px; } .vbar .lnk a, .vbar .lnk form { flex: 1; } .vbar .lnk a { display: inline-flex; align-items: center; justify-content: center; height: 40px; border: 1px solid oklch(1 0 0 / 0.18); border-radius: var(--r); background: oklch(1 0 0 / 0.06); font-weight: 600; font-size: 13.5px; } .vbar .lnk form button { width: 100%; height: 40px; justify-content: center; } /* prompt (no-vehicle) variant: keep CTA full-width too */ .vbar-prompt .lnk { width: 100%; } .vbar-prompt .lnk a { border: none; background: none; height: auto; justify-content: flex-start; } /* --- titles / sections --- */ .page-title { font-size: 25px; } .page-hero { padding-top: 28px; padding-bottom: 22px; } .crumbs { padding-top: 16px; padding-bottom: 16px; } .sec-head { margin-bottom: 20px; flex-wrap: wrap; } /* --- homepage grids --- */ .statrow { grid-template-columns: 1fr 1fr; } .stat { padding: 18px 6px; } .cat-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .cat-card { min-height: 132px; padding: 16px; } .brand-strip { grid-template-columns: repeat(2, 1fr); } /* --- category / filters: each group label on its own line, chips wrap --- */ .filterbar { gap: 14px; padding: 14px; align-items: stretch; } .fb-sep { display: none; } .fb-spacer { display: none; } .fb-group { flex-direction: column; align-items: stretch; gap: 8px; width: 100%; } .fb-dd, .fb-dd-btn, .sortsel { width: 100%; } .fb-count { width: 100%; } .toolbar { gap: 8px 12px; } /* swap the spec table for stacked product cards */ .tbl-wrap { display: none; } .spec-cards { display: flex; } /* --- product page --- */ .pdp { gap: 28px; } .pdp h1 { font-size: 23px; } .pdp-price .big { font-size: 27px; } .buy-row { flex-wrap: wrap; } .buy-row .btn { flex: 1 1 100%; } .pdp-details { margin-top: 30px; } .kv { grid-template-columns: 1fr; } .kv .pair { border-right: none; } /* swap fitment table for stacked cards */ .fittable-wrap { display: none; } .fit-cards { display: flex; } .rel-grid { grid-template-columns: 1fr; } /* --- all-parts / brand / resources / about / contact --- */ .allparts-grid { grid-template-columns: 1fr; } .art-grid { grid-template-columns: 1fr; } .values-grid { grid-template-columns: 1fr; } .brand-mark-lg { font-size: 32px; } .brand-hero-inner { padding-top: 32px; padding-bottom: 32px; gap: 24px; } .about-lead { font-size: 20px; } /* --- article reading page --- */ .art-page-hero .wrap { padding-top: 24px; padding-bottom: 0; } .art-h1 { font-size: 27px; } .prose .lead { font-size: 17px; } .prose p, .prose ul li { font-size: 15px; } .prose h2 { font-size: 21px; } .pullquote { font-size: 18px; } .art-related { grid-template-columns: 1fr; } /* --- cart / checkout --- */ .cart-line2 { flex-wrap: wrap; row-gap: 12px; } .cart-line2 .ci { flex-basis: calc(100% - 56px); } .cart-line2 .qty { order: 3; } .cart-line2 .lp { order: 4; margin-left: auto; text-align: right; } .co-section { padding: 18px 16px; } .form-row { grid-template-columns: 1fr; gap: 0; } .summary-items { max-height: 220px; } /* --- confirmation --- */ .confirm-box { padding: 44px 6px; } .confirm-box h1 { font-size: 26px; } .order-steps .os { padding: 14px 8px; } } /* ============================================================ CHECKOUT BRIDGE — restyle native Solidus checkout form controls to the CarParts design (scoped to .checkout). ============================================================ */ .checkout legend { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 14px; } .checkout .address-step, .checkout .delivery-step, .checkout .payment-step { display: block; } .checkout fieldset { border: none; margin: 0 0 22px; padding: 0; } /* text + select inputs */ .checkout .text-input, .checkout .select-input { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; } .checkout .text-input label, .checkout .select-input label, .checkout label { font-size: 12.5px; font-weight: 600; color: var(--ink-2); } .checkout input[type="text"], .checkout input[type="email"], .checkout input[type="tel"], .checkout input[type="password"], .checkout input[type="number"], .checkout select, .checkout textarea { width: 100%; height: 44px; border: 1px solid var(--line-2); border-radius: var(--r); padding: 0 13px; font-family: inherit; font-size: 14px; color: var(--ink); background: var(--surface); outline: none; transition: border-color .12s, box-shadow .12s; } .checkout textarea { height: auto; min-height: 90px; padding: 11px 13px; } .checkout input:focus, .checkout select:focus, .checkout textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); } /* grid the address fields two-up on wider screens */ .checkout .inputs-wrapper, .checkout .address-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; } .checkout .inputs-wrapper > .text-input, .checkout .inputs-wrapper > .select-input { min-width: 0; } @media (max-width: 600px) { .checkout .inputs-wrapper, .checkout .address-inputs { grid-template-columns: 1fr; } } /* checkboxes */ .checkout .checkbox-input { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--ink-2); margin: 4px 0 16px; } .checkout input[type="checkbox"], .checkout input[type="radio"] { width: 18px; height: 18px; accent-color: var(--accent); } /* buttons */ .checkout .button-primary, .checkout button[name="commit"], .checkout input[type="submit"] { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 22px; border-radius: var(--r); font-size: 14px; font-weight: 600; background: var(--accent); color: #fff; border: 1px solid var(--accent); cursor: pointer; transition: background .14s; width: 100%; } .checkout .button-primary:hover, .checkout button[name="commit"]:hover { background: var(--accent-deep); } /* delivery + payment option rows */ .checkout .delivery-method, .checkout .payment-method-item { border: 1.5px solid var(--line-2); border-radius: var(--r); padding: 14px 16px; margin-bottom: 10px; } .checkout .delivery-method:has(input:checked), .checkout .payment-method-item:has(input:checked) { border-color: var(--accent); background: var(--accent-wash); } /* hide the duplicate inline email label styling jump */ .checkout .address-step__actions { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 8px; } /* footer social icons */ .ftr-social { display: inline-flex; gap: 14px; align-items: center; } .ftr-social a { color: inherit; opacity: .75; display: inline-flex; transition: opacity .15s; } .ftr-social a:hover { opacity: 1; } /* PDP delivery estimator */ .delivery-est { margin-top: 16px; border: 1px solid var(--line, #e3e7ee); border-radius: 10px; padding: 14px 16px; background: var(--surface, #fff); } .delivery-est .de-head { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 10px; } .delivery-est .de-row { display: flex; gap: 8px; } .delivery-est .de-row input { flex: 1; min-width: 0; height: 38px; border: 1px solid var(--line, #cfd6e0); border-radius: 8px; padding: 0 12px; font-size: 14px; } .delivery-est .de-row .btn { height: 38px; padding: 0 16px; } .delivery-est .de-result { margin-top: 9px; font-size: 13.5px; color: var(--ink-2); min-height: 1em; } .delivery-est .de-result .de-window { color: var(--ink); } .delivery-est .de-err { color: oklch(0.5 0.16 27); } /* ============ Single-page checkout ============ */ .spc-grid { display: grid; grid-template-columns: minmax(0,1fr) 400px; gap: 28px; align-items: start; padding-bottom: 64px; } @media (max-width: 900px) { .spc-grid { grid-template-columns: 1fr; } .spc-aside { order: -1; } } .spc-card { background: var(--surface,#fff); border: 1px solid var(--line,#e3e7ee); border-radius: 14px; padding: 24px 26px; margin-bottom: 18px; transition: opacity .2s; } .spc-card.spc-locked { opacity: .45; pointer-events: none; } .spc-card-h { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; } .spc-card-h h2 { font-size: 17px; font-weight: 700; margin: 0; flex: 1; } .spc-step-no { width: 26px; height: 26px; border-radius: 99px; background: var(--ink,#1f2733); color: #fff; font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; } .spc-done { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; color: oklch(0.55 0.13 155); } .spc-secure { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3,#7b8696); } .spc-field { margin-bottom: 14px; } .spc-field label { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-2,#3a4554); margin-bottom: 6px; } .spc-field input, .spc-field select { width: 100%; height: 42px; border: 1px solid var(--line,#cfd6e0); border-radius: 9px; padding: 0 13px; font-size: 14.5px; font-family: inherit; background: #fff; } .spc-field input:focus, .spc-field select:focus { outline: none; border-color: var(--accent,#1f9fc9); box-shadow: 0 0 0 3px oklch(0.65 0.11 220 / .18); } .spc-opt { font-weight: 400; color: var(--ink-3,#7b8696); } .spc-hint { font-size: 12.5px; color: var(--ink-3,#7b8696); margin-top: 5px; } .spc-row { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 12px; } .spc-row-2 { grid-template-columns: 1fr 1fr; } /* equal-width pair (first/last name) */ .spc-continue { margin-top: 8px; } .spc-errors { background: #fdf3f3; border: 1px solid #e0b4b4; color: #8a3030; border-radius: 9px; padding: 11px 14px; font-size: 13.5px; margin-bottom: 12px; line-height: 1.5; } .spc-rates { display: flex; flex-direction: column; gap: 10px; } .spc-rate { display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--line,#e3e7ee); border-radius: 10px; padding: 13px 16px; cursor: pointer; font-size: 14.5px; } .spc-rate:has(input:checked) { border-color: var(--accent,#1f9fc9); box-shadow: 0 0 0 2px oklch(0.65 0.11 220 / .15); } .spc-rate-l { display: flex; align-items: center; gap: 10px; } .spc-eta { margin-top: 12px; font-size: 13.5px; color: var(--ink-2,#3a4554); } .spc-terms { font-size: 12.5px; color: var(--ink-3,#7b8696); margin-top: 14px; line-height: 1.6; } .spc-terms a { text-decoration: underline; } .spc-aside { position: sticky; top: 18px; } .spc-summary { background: var(--surface,#fff); border: 1px solid var(--line,#e3e7ee); border-radius: 14px; padding: 22px 24px; } .spc-summary h3 { font-size: 15px; font-weight: 700; margin: 0 0 16px; } .spc-items { display: flex; flex-direction: column; gap: 13px; margin-bottom: 16px; } .spc-item { display: flex; align-items: center; gap: 12px; } .spc-item-info { flex: 1; min-width: 0; } .spc-item-name { font-size: 13.5px; font-weight: 600; line-height: 1.35; } .spc-item-meta { font-size: 12px; color: var(--ink-3,#7b8696); margin-top: 2px; } .spc-item-price { font-size: 13.5px; font-weight: 700; white-space: nowrap; } .spc-totals { border-top: 1px solid var(--line,#eef1f5); padding-top: 14px; display: flex; flex-direction: column; gap: 8px; } .spc-trow { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--ink-2,#3a4554); } .spc-trow.spc-total { font-size: 17px; font-weight: 800; color: var(--ink,#1f2733); padding-top: 6px; } .spc-trow.spc-gst { font-size: 12px; color: var(--ink-3,#7b8696); } .spc-trust { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line,#eef1f5); font-size: 12.5px; color: var(--ink-2,#3a4554); display: flex; gap: 8px; align-items: center; } .spc-processing { text-align: center; padding: 48px 0; } .spc-processing h1 { font-size: 22px; margin: 18px 0 8px; } .spc-processing p { color: var(--ink-2,#3a4554); font-size: 14.5px; } .spc-spinner { width: 42px; height: 42px; border: 4px solid var(--line,#e3e7ee); border-top-color: var(--accent,#1f9fc9); border-radius: 99px; margin: 0 auto; animation: spcspin 0.9s linear infinite; } @keyframes spcspin { to { transform: rotate(360deg); } } /* SPC payment accordion (Shopify-style) + mobile summary */ .spc-card .payment-step legend { display: none; } .spc-card .payment-step__selector { margin: 0 0 4px; padding: 0; list-style: none; } .spc-pm { border: 1px solid var(--line,#e3e7ee) !important; border-radius: 12px !important; margin: 0 0 10px !important; padding: 0 !important; background: #fff !important; overflow: hidden; } .spc-pm.spc-pm-on { border-color: var(--accent,#1f9fc9) !important; box-shadow: 0 0 0 2px oklch(0.65 0.11 220 / .14); } .spc-pm > label { display: flex !important; flex-direction: row-reverse; justify-content: flex-end !important; align-items: center; gap: 12px; padding: 15px 16px !important; margin: 0 !important; font-size: 14.5px; font-weight: 600; cursor: pointer; } .spc-pm > label input[type=radio] { width: 17px; height: 17px; accent-color: var(--accent,#1f9fc9); margin: 0; } .spc-pm fieldset.payment-step__details { border: 0 !important; margin: 0 !important; padding: 2px 16px 18px !important; display: block !important; } .spc-pm fieldset.payment-step__details.spc-hide { height: 0 !important; padding: 0 16px !important; opacity: 0; overflow: hidden; } .spc-pm [data-pp-message] { margin-top: 10px; } .spc-card .payment-step .flex.justify-end { display: block; padding: 4px 0 0 !important; } .spc-pay-btn { display: block; width: 100%; height: 50px; border: 0; border-radius: 10px; background: var(--accent,#1f9fc9); color: #fff; font-family: inherit; font-size: 15.5px; font-weight: 700; letter-spacing: .01em; cursor: pointer; margin-top: 10px; transition: filter .15s; } .spc-pay-btn:hover { filter: brightness(0.93); } .spc-pay-btn:disabled { opacity: .6; cursor: wait; } .spc-msum > summary { display: none; list-style: none; cursor: pointer; align-items: center; justify-content: space-between; padding: 14px 18px; border: 1px solid var(--line,#e3e7ee); border-radius: 12px; background: var(--surface,#fff); font-size: 14px; font-weight: 700; } .spc-msum > summary::-webkit-details-marker { display: none; } .spc-msum > summary > span { display: inline-flex; align-items: center; gap: 8px; } @media (max-width: 900px) { .spc-msum > summary { display: flex; margin-bottom: 12px; } .spc-msum[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; margin-bottom: 0; } .spc-msum[open] .spc-summary { border-top-left-radius: 0; border-top-right-radius: 0; border-top: 0; margin-bottom: 12px; } .spc-aside { position: static; } } /* no-parts vehicles: greyed, labelled, not selectable */ .dd-item.noparts { cursor: not-allowed; opacity: .55; } .dd-item.noparts:hover { background: transparent; } /* Guide pages: comparison table inside .prose */ .prose table.cmp { width: 100%; border-collapse: collapse; margin: 6px 0 24px; font-size: 14.5px; min-width: 640px; } .prose table.cmp th { text-align: left; font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-3); padding: 8px 12px 8px 0; border-bottom: 2px solid var(--line-2); } .prose table.cmp td { padding: 11px 12px 11px 0; border-bottom: 1px solid var(--line); vertical-align: top; line-height: 1.55; color: var(--ink); } .prose table.cmp td:first-child { font-weight: 700; white-space: nowrap; padding-right: 18px; } /* Guide-page imagery + mobile overflow guards */ .prose img { max-width: 100%; height: auto; display: block; border-radius: var(--r-lg); border: 1px solid var(--line-2); background: #fff; } .guide-hero { width: 100%; margin: 4px 0 26px; } .prose figure { margin: 6px 0 22px; } .prose figcaption { font-size: 12.5px; color: var(--ink-3); margin-top: 8px; line-height: 1.45; } .prose .figrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 6px 0 22px; } .prose .figrow figure { margin: 0; } @media (max-width: 700px) { .prose .figrow { grid-template-columns: 1fr; } } .tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* the page itself must never pan sideways (wide tables scroll inside .tbl-scroll) */ html, body { overflow-x: clip; } /* Header live-search dropdown (Meilisearch suggest) */ .hdr-search { position: relative; } .hdr-suggest { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 180; background: var(--surface, #fff); border: 1px solid var(--line-2, #cfd6e0); border-radius: var(--r-lg, 12px); box-shadow: var(--shadow, 0 12px 32px rgba(15, 26, 42, 0.14)); overflow: hidden; } .sg-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; text-decoration: none; color: var(--ink, #1c2430); border-bottom: 1px solid var(--line, #e3e7ee); } .sg-item:hover, .sg-item.on { background: var(--surface-2, #f4f6f9); } .sg-img { width: 44px; height: 44px; flex-shrink: 0; border: 1px solid var(--line, #e3e7ee); border-radius: 8px; background: #fff; overflow: hidden; display: flex; align-items: center; justify-content: center; } .sg-img img { width: 100%; height: 100%; object-fit: contain; display: block; } .sg-info { min-width: 0; flex: 1; } .sg-name { display: block; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sg-meta { display: block; font-size: 11.5px; color: var(--ink-3, #7b8696); font-family: var(--mono, monospace); margin-top: 1px; } .sg-right { text-align: right; flex-shrink: 0; font-size: 13px; } .sg-right b { display: block; font-variant-numeric: tabular-nums; } .sg-stock { font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .sg-stock.in { color: #1c7a3f; } .sg-stock.out { color: var(--ink-3, #7b8696); } .sg-all { display: block; padding: 11px 14px; font-size: 13px; font-weight: 600; text-align: center; color: var(--accent-deep, #14708f); text-decoration: none; background: var(--surface-2, #f4f6f9); } .sg-all:hover, .sg-all.on { background: var(--accent-wash, #e8f4f9); } .sg-empty { padding: 14px; font-size: 13px; color: var(--ink-3, #7b8696); text-align: center; } .hdr-suggest { max-height: min(560px, calc(100dvh - 140px)); overflow-y: auto; } @media (max-width: 720px) { .hdr-suggest { position: fixed; left: 8px; right: 8px; top: 108px; } } /* Exact code match: green-tinted card + explicit badge saying WHY it matches */ .sg-item-exact { background: #f2faf5; box-shadow: inset 3px 0 0 #1c7a3f; } .sg-item-exact:hover, .sg-item-exact.on { background: #e7f5ec; } .sg-exact { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #1c7a3f; background: #dcefe3; border-radius: 99px; padding: 2px 9px; margin-bottom: 3px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ============================================================ Vehicle information hub (catalogue v2) — ported from the Claude Design handoff (styles.css, screens-seo.jsx section). ============================================================ */ .seo-hero { border-bottom: 1px solid var(--line); background: radial-gradient(120% 130% at 92% -20%, var(--accent-wash) 0%, transparent 55%), var(--surface); } .seo-hero-inner { display: grid; grid-template-columns: 1.6fr 1fr; gap: 44px; padding-top: 8px; padding-bottom: 44px; align-items: start; } .seo-tag { font-size: 17px; font-weight: 600; color: var(--ink); margin: 6px 0 14px; } .seo-intro { font-size: 15px; color: var(--ink-2); line-height: 1.65; max-width: 62ch; margin: 0; } .seo-chassis { font-size: 14px; color: var(--accent-deep); font-weight: 600; margin: 6px 0 14px; } .seo-facts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; } .seo-aside { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; margin-top: 8px; } .seo-aside .sh { padding: 13px 18px; background: var(--surface-2); border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-2); } .seo-aside .li { display: flex; align-items: center; gap: 10px; padding: 11px 18px; border-bottom: 1px solid var(--line); font-size: 13.5px; font-weight: 500; } .seo-aside .li:last-child { border-bottom: none; } .seo-aside .li svg { color: var(--accent); flex-shrink: 0; } /* model grid (make page) */ .model-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .model-card { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); padding: 18px 20px; cursor: pointer; transition: all .14s; display: block; text-decoration: none; color: inherit; } .model-card:hover { border-color: var(--accent-line); box-shadow: var(--shadow-sm); } .model-card .mc-img { margin-bottom: 14px; } .model-card .mc-head { display: flex; align-items: center; justify-content: space-between; } .model-card .mc-head h3 { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; margin: 0; } .model-card .mc-head svg { color: var(--ink-3); } .model-card:hover .mc-head svg { color: var(--accent); } .model-card .mc-body { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; } .model-card .mc-meta { font-size: 12px; color: var(--ink-3); } /* image-led generation cards (family page) */ .gen-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .gen-img-card { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; cursor: pointer; transition: all .14s; } a.gen-img-card:hover { border-color: var(--accent-line); box-shadow: var(--shadow-sm); transform: translateY(-2px); } .gen-img-card .gic-img { border: none; border-bottom: 1px solid var(--line); border-radius: 0; } .gen-img-card .gic-body { padding: 16px 18px; } .gic-head { display: flex; align-items: center; justify-content: space-between; } .gic-code { font-size: 15px; font-weight: 700; color: var(--ink); } .gic-years { font-size: 12.5px; color: var(--ink-3); } .gic-meta { font-size: 11.5px; color: var(--ink-3); margin-top: 6px; } .gic-go { font-size: 13px; font-weight: 600; color: var(--accent-deep); display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; } /* variant grid (generation page) */ .variant-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .variant-card { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; cursor: pointer; transition: all .14s; } .variant-card:hover { border-color: var(--accent-line); box-shadow: var(--shadow-sm); transform: translateY(-2px); } .variant-card .vc-img { border: none; border-bottom: 1px solid var(--line); border-radius: 0; } .variant-card .vc-body { padding: 14px 16px; } .variant-card .vc-name { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; } .variant-card .vc-spec { font-size: 12px; color: var(--ink-3); margin-top: 3px; } .variant-card .vc-go { font-size: 12.5px; font-weight: 600; color: var(--accent-deep); display: inline-flex; align-items: center; gap: 5px; margin-top: 11px; } /* variant hero stat row */ .variant-hero-stats { display: flex; gap: 26px; margin-top: 18px; flex-wrap: wrap; } .variant-hero-stats .vhs { display: flex; flex-direction: column; } .variant-hero-stats .vhs .n { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; } .variant-hero-stats .vhs .u { font-size: 11.5px; color: var(--ink-3); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; } /* variant secondary two-col (service + body/drivetrain) */ .var2-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; } /* spec-sheet reference layout */ .spec-sheet { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; } .kv2 { display: flex; flex-direction: column; } .pair2 { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 18px; border-bottom: 1px solid var(--line); } .pair2:last-child { border-bottom: none; } .pair2 .k { font-size: 13px; color: var(--ink-2); } .pair2 .v { font-size: 13px; font-weight: 500; text-align: right; } .spec-disclaimer { font-size: 12px; color: var(--ink-3); margin: 16px 2px 0; line-height: 1.5; } /* FAQ */ .faq-list { display: flex; flex-direction: column; gap: 8px; } .faq-item { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; } .faq-item summary { list-style: none; cursor: pointer; padding: 15px 18px; font-size: 14.5px; font-weight: 600; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary svg { color: var(--ink-3); transition: transform .18s; flex-shrink: 0; } .faq-item[open] summary svg { transform: rotate(180deg); } .faq-item[open] summary { border-bottom: 1px solid var(--line); } .faq-item p { margin: 0; padding: 14px 18px; font-size: 14px; line-height: 1.6; color: var(--ink-2); } /* secondary parts strip (info pages) */ .parts-strip { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 18px; border: 1px dashed var(--line-2); border-radius: var(--r-lg); background: var(--surface-2); cursor: pointer; transition: all .12s; } .parts-strip:hover { border-color: var(--accent-line); background: var(--accent-wash); } .parts-strip .ps-l { display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); text-align: left; } .parts-strip .ps-l svg { color: var(--accent); flex-shrink: 0; } .parts-strip .ps-go { font-size: 13px; font-weight: 700; color: var(--accent-deep); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .ps-form { display: block; margin-top: 14px; } button.parts-strip-btn { width: 100%; font-family: inherit; } /* other makes / models / generations chips */ .othermakes { display: flex; gap: 10px; flex-wrap: wrap; } .om-chip { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line-2); background: var(--surface); border-radius: 20px; padding: 9px 15px; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: all .12s; text-decoration: none; color: inherit; } .om-chip:hover { border-color: var(--accent); color: var(--accent-deep); } .om-chip svg { color: var(--ink-3); } .om-chip:hover svg { color: var(--accent); } @media (max-width: 1080px) { .model-grid { grid-template-columns: repeat(2, 1fr); } .seo-hero-inner { grid-template-columns: 1fr; gap: 28px; } .spec-sheet { grid-template-columns: 1fr; } .variant-grid { grid-template-columns: repeat(2, 1fr); } .gen-grid { grid-template-columns: repeat(2, 1fr); } .var2-grid { grid-template-columns: 1fr; } } @media (max-width: 600px) { .model-grid, .variant-grid, .gen-grid { grid-template-columns: 1fr; } .parts-strip { flex-direction: column; align-items: flex-start; gap: 8px; } .variant-hero-stats { gap: 20px; } } /* segmented spec values (value differs by trim / body / year) */ .pair2 .vseg { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; } .pair2 .vseg .vs { display: block; } .vnote { font-style: normal; color: var(--ink-3); font-size: 11px; margin-left: 7px; font-family: var(--sans, inherit); } /* versions & pricing table */ .vtwrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); } .vt { width: 100%; border-collapse: collapse; min-width: 640px; font-size: 13.5px; } .vt th { text-align: left; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); padding: 12px 16px; border-bottom: 2px solid var(--line-2); background: var(--surface-2); white-space: nowrap; } .vt td { padding: 10px 16px; border-bottom: 1px solid var(--line); color: var(--ink-2); white-space: nowrap; } .vt tbody tr:last-child td { border-bottom: none; } .vt tbody tr:hover { background: var(--accent-wash); } /* standard equipment + changelog */ .eq-block { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; margin-bottom: 8px; } .eq-block summary { list-style: none; cursor: pointer; padding: 14px 18px; font-size: 13.5px; font-weight: 600; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--ink-2); } .eq-block summary::-webkit-details-marker { display: none; } .eq-block summary svg { color: var(--ink-3); transition: transform .18s; flex-shrink: 0; } .eq-block[open] summary svg { transform: rotate(180deg); } .eq-block[open] summary { border-bottom: 1px solid var(--line); } .eq-cols { columns: 3; column-gap: 28px; margin: 0; padding: 14px 18px; list-style: none; } .eq-cols li { font-size: 12.5px; color: var(--ink-2); padding: 3px 0; break-inside: avoid; } .eq-cols li::before { content: "·"; color: var(--accent); margin-right: 7px; font-weight: 700; } .eq-cols li.eq-add::before { content: "+"; color: #1c7a3f; } .eq-cols li.eq-rem::before { content: "−"; color: var(--ink-3); } .eq-cols li.eq-rem { color: var(--ink-3); } .eq-diff { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; } .eq-diff .eq-l { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); padding: 12px 18px 0; } .eq-sub { font-size: 15px; font-weight: 700; margin: 22px 0 10px; letter-spacing: -0.01em; } @media (max-width: 900px) { .eq-cols { columns: 2; } .eq-diff { grid-template-columns: 1fr; } } @media (max-width: 560px) { .eq-cols { columns: 1; } .pair2 .vseg { align-items: flex-end; } } /* crawlable text link under the vehicle-confirm button */ .ps-alt { font-size: 12.5px; color: var(--ink-3); margin: 8px 2px 0; } .ps-alt a { color: var(--accent-deep); font-weight: 600; } /* version tabs + per-version spec panels (from the design's var-tab pattern) */ .vt-hint { font-size: 13.5px; color: var(--ink-2); margin: 0 0 12px; } .var-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; } .var-tab { min-height: 38px; padding: 7px 15px; border: 1px solid var(--line-2); background: var(--surface); border-radius: var(--r); font-family: inherit; font-size: 13px; font-weight: 600; color: var(--ink-2); cursor: pointer; transition: all .12s; } .var-tab:hover { border-color: var(--ink-3); color: var(--ink); } .var-tab.on { background: var(--ink); border-color: var(--ink); color: #fff; } .var-tab .vt-years { color: var(--ink-3); font-weight: 500; font-size: 11.5px; margin-left: 7px; } .var-tab.on .vt-years { color: rgba(255,255,255,.72); } .vp-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 16px 20px; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--r-lg); margin-bottom: 14px; } .vp-name { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; } .vp-sub { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; } .vp-power { display: flex; gap: 22px; } .vp-power .pw { display: flex; align-items: baseline; gap: 4px; } .vp-power .pw .n { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; } .vp-power .pw .u { font-size: 11.5px; color: var(--ink-3); font-weight: 600; } @media (max-width: 600px) { .vp-power { gap: 16px; } .vp-power .pw .n { font-size: 20px; } } /* per-body spec table (Sedan | Wagon columns) — spec blocks with body columns stack FULL WIDTH (they cannot fit in a third-width card) */ .spec-sheet--wide { grid-template-columns: 1fr; } .sbt { width: 100%; border-collapse: collapse; table-layout: fixed; } .sbt thead th { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); text-align: right; padding: 10px 18px 8px; border-bottom: 1px solid var(--line); background: var(--surface); } .sbt thead th:first-child { text-align: left; width: 34%; } .sbt td, .sbt tbody th { padding: 11px 18px; border-bottom: 1px solid var(--line); font-size: 13px; vertical-align: top; } .sbt tbody th.k { color: var(--ink-2); font-weight: 400; text-align: left; } .sbt td.v { text-align: right; font-weight: 500; overflow-wrap: break-word; } .sbt td.v.merged { text-align: center; color: var(--ink-2); } .sbt tbody tr:last-child td, .sbt tbody tr:last-child th { border-bottom: none; } .sbt .vseg { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; } .sbt td.merged .vseg { align-items: center; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } @media (max-width: 600px) { .sbt td, .sbt tbody th { padding: 9px 10px; font-size: 12px; } .sbt thead th { padding: 9px 10px 7px; } .sbt thead th:first-child { width: 36%; } } /* PDP delivery estimator — the two shipping options */ .de-opts { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; } .de-opts li { display: flex; align-items: baseline; gap: 8px; font-size: 13px; } .de-opt-name { font-weight: 600; min-width: 68px; } .de-opt-carrier { color: var(--muted, #6b7280); flex: 1; } .de-opt-price { font-weight: 700; font-variant-numeric: tabular-nums; } /* ============================================================ MOBILE PURCHASE PATH Everything below is phone-only and lives at the end of the file so it wins on order as well as on specificity. Three jobs: 1. bring price and Add to cart within reach on the product page, 2. give every control on the purchase path a 44px target, 3. stop iOS Safari zooming the page whenever a field takes focus. Rules that would otherwise leak to other pages are scoped by body id (#product-details / #cart / #checkout), which the layout writes from @body_id. ============================================================ */ @media (max-width: 600px) { /* --- product page: reclaim the space above the buy box -------------- Measured on a 375x812 viewport before these rules: the price first painted at document y 844 and Add to cart at 981, both below the fold. Each rule below is a straight reduction, no reflow of the layout. */ /* The thumbnail strip costs 91px (81px grid + 10px margin). The gallery controller reads .ph-thumb nodes out of the DOM rather than off the screen, so display:none keeps every photo in the lightbox with prev and next still working. */ #product-details .ph-thumbs { display: none; } /* Photos are square studio shots on white shown with object-fit: contain, so a wider box trims whitespace around the part rather than the part. */ #product-details .ph-img { aspect-ratio: 16/10; } /* The trail wraps to two lines because the leaf crumb is a long product name. One scrollable row instead, and half the padding. Scoped: the same trail appears on cart, checkout and every category page, where it is short and wrapping is fine. */ #product-details .crumbs { padding-top: 6px; padding-bottom: 6px; flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; scrollbar-width: none; -webkit-overflow-scrolling: touch; } #product-details .crumbs::-webkit-scrollbar { display: none; } #product-details .crumbs a { flex-shrink: 0; } #product-details .pdp { gap: 16px; padding-top: 0; } #product-details .pdp h1 { margin: 6px 0 4px; } #product-details .pdp-meta { margin: 8px 0 12px; } #product-details .pdp-price { padding: 10px 0; margin-bottom: 12px; } /* The fact chips sit directly above the buy row, so they are the last thing between a phone shopper and the button. Four of them wrap to three rows at 375px (84px); one scrolling row costs 24. Same treatment as the filter chips, and no fact is dropped. */ #product-details .pdp-facts { gap: 6px; margin: -6px 0 12px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } #product-details .pdp-facts::-webkit-scrollbar { display: none; } #product-details .pdp-facts .badge { height: 26px; font-size: 12px; flex-shrink: 0; max-width: none; } /* --- 44px tap targets on the purchase path ------------------------- Audited live: 39 controls on the product page were under 44px in at least one dimension. These are the ones a buyer has to hit. */ /* Qty stepper was 42x42 inside a 44px shell. */ .qty { height: 48px; } .qty button { width: 48px; } /* Delivery estimator: 38px input and button, and a 14px input that made iOS zoom the whole page on focus. */ .delivery-est .de-row input, .delivery-est .de-row .btn { height: 46px; } /* Category filter chips and the sort control were 32-34px, all eleven of them. Growing them would push the first product further down a filter bar that already fills the whole first screen, so each group becomes one horizontally scrolling row instead of two or three wrapped ones. That is the pattern .hdr-nav already uses at <=920px, and it nets out shorter than the wrapped 32px version. */ .fb-chip, .fb-dd-btn, .sortsel { min-height: 44px; height: auto; } .fb-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 1px; } .fb-chips::-webkit-scrollbar { display: none; } .fb-chip { flex-shrink: 0; } .fb-reset { min-height: 44px; display: inline-flex; align-items: center; } /* Catalogue pager: page numbers and prev/next were all 38. */ .catalog-pager .pager-btn { height: 44px; } .catalog-pager .pager-num { min-width: 44px; height: 44px; } /* The no-vehicle prompt is the primary vehicle CTA on mobile and the rule above it (.vbar-prompt .lnk a) strips the 40px height back to auto, leaving a 20px-tall link. Keep it borderless, give it a real height. */ .vbar-prompt .lnk a { min-height: 44px; } /* ...and take the padding back off the bar so the taller CTA is free. */ .vbar-prompt .vbar-row { padding-top: 8px; padding-bottom: 8px; gap: 4px; } /* Cart Remove was 47x18 and sits directly above the qty stepper, which is exactly the mis-tap you do not want on a cart. It lives in its own row inside .ci, so a 44px target costs 26px of page; the tighter line padding below pays most of that back rather than pushing Proceed to checkout further down. */ #cart .cart-line2 .rm { min-height: 44px; font-size: 13px; } #cart .cart-line2 { padding: 12px 14px; row-gap: 8px; } #cart .cart-line2 .ci .tags { margin-top: 2px; } /* the number input sat 40px tall inside its 48px stepper shell */ .qty .v { height: 100%; } /* Fitment table: the search field and the show-all button. */ .fit-search input { height: 46px; } /* .btn-sm is 34px everywhere it appears - "Show all N compatible vehicles", the section "View all" links, "Update cart". On a phone the small variant buys nothing and costs accuracy. */ .btn-sm { min-height: 44px; height: auto; } /* Header: hamburger 42, account and cart 40, search 42, logo 38. */ .hamburger { width: 44px; height: 44px; } .iconbtn { height: 44px; min-width: 44px; } .hdr-search input { height: 44px; } .logo { min-height: 44px; } /* Confirmed-vehicle bar: Change and Clear were both 40. */ .vbar .lnk a, .vbar .lnk form button { height: 44px; } /* Footer link lists and the social row. These are standalone controls in a column, not links inside a sentence, so the full target applies. Nothing above any fold moves. */ .ftr-col a { min-height: 44px; display: flex; align-items: center; padding: 0; } .ftr-social { gap: 6px; margin-left: -12px; } .ftr-social a { width: 44px; height: 44px; align-items: center; justify-content: center; } /* Three items on one 324px row already did not fit, and the 44px icon boxes make the middle one wider. Stack it; the negative margin above keeps the icons optically aligned with the text now that they have padded boxes. */ .ftr-bottom { flex-direction: column; align-items: flex-start; gap: 8px; } /* Breadcrumbs, the .trust-row policy links, the brand wordmark and the links inside the fitment note are all inline links reading as part of a line of text, so they keep the line's height rather than becoming 44px blocks that would break the sentence and push the fold back down. */ /* --- legibility on the purchase path ------------------------------- Not a wholesale type change: the small type on this site is labels, badges and monospace part numbers where 11-13px is deliberate, and enlarging all of it would push the fold back down. These two carry the buying decision, so they come up. */ .stock { font-size: 13px; } #product-details .fit-box .tx div { font-size: 13px; } /* the fitment callout is the largest single block a vehicle-selected shopper has between the title and the price */ #product-details .fit-box { padding: 10px 12px; gap: 10px; margin-bottom: 12px; } #product-details .fit-box .ic { width: 28px; height: 28px; } #product-details .fit-box .tx b { font-size: 13.5px; } /* --- 16px form fields so iOS does not zoom on focus ----------------- Safari zooms the viewport whenever a focused field is under 16px, which reflows the page mid-typing. Everything a customer types into goes to 16px on phones. */ .hdr-search input, .delivery-est .de-row input, .fit-search input, .qty .v, .seldd-search input, .spc-field input, .spc-field select, .checkout input[type="text"], .checkout input[type="email"], .checkout input[type="tel"], .checkout input[type="password"], .checkout input[type="number"], .checkout select, .checkout textarea { font-size: 16px; } .spc-field input, .spc-field select { height: 48px; } /* 16px type and 48px fields add about 6px per field and a whole row once Suburb is split out below, so buy some of it back from the gaps. */ .spc-field { margin-bottom: 10px; } .spc-card { padding: 18px 16px; } /* Suburb takes its own row so State and Postcode are not 62px wide. */ .spc-row { grid-template-columns: 1fr 1fr; } .spc-row > .spc-field:first-child { grid-column: 1 / -1; } .spc-row-2 { grid-template-columns: 1fr 1fr; } .spc-row-2 > .spc-field:first-child { grid-column: auto; } } /* ============================================================ STICKY BUY BAR (phones and small tablets) Hidden by default and shown by the sticky-buy Stimulus controller, which also writes --cp-buybar-h from the bar's real height so the body padding below matches the fitment-warning variant as well as the plain one. z-index 90 puts it above page content but below the live-search panel (180) and the lightbox (200), so neither needs to know about it. The only other bottom-anchored fixed element on the site is .seldd-menu-sheet (z 1000), which never renders on a product page. ============================================================ */ .cp-buybar { display: none; } /* min-height so the fitment line is a real target: it is a standalone link in the bar, not a link inside a sentence. */ .cp-buybar-fit { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; margin-bottom: 8px; text-decoration: none; min-height: 26px; } .cp-buybar-fit.ok { color: oklch(0.36 0.1 156); } .cp-buybar-fit.warn { color: oklch(0.46 0.09 60); } .cp-buybar-row { display: flex; align-items: center; gap: 14px; } .cp-buybar-price { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .cp-buybar-price .pr { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } .cp-buybar-price .sub { font-size: 11.5px; color: var(--ink-3); } @media (max-width: 900px) { .cp-buybar { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -6px 22px oklch(0.2 0.02 250 / 0.10); padding: 10px 18px calc(10px + env(safe-area-inset-bottom, 0px)); transform: translateY(100%); transition: transform .18s ease-out; } .cp-buybar.on { transform: translateY(0); } /* The bar ships with `hidden` set server-side and the controller removes it. Without this the display:block above would beat the user-agent [hidden] rule and the bar would be present, and focusable, before JS ever runs. */ .cp-buybar[hidden] { display: none; } /* One line, truncated. A long vehicle label wrapped to two lines and took the bar to 112px, 14% of a 812px viewport for one sentence. The whole line is a link to the fitment table, so the full text is one tap away. display: block rather than flex so text-overflow applies at all. */ .cp-buybar-fit { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; } .cp-buybar-fit svg { vertical-align: -2px; margin-right: 4px; } .cp-buybar-row .stock { margin-top: 1px; } .cp-buybar-row .btn { flex: 0 0 auto; margin-left: auto; min-height: 48px; padding: 0 22px; } /* Keep the bar clear of the page's own last element. .wrap on the product page carries an inline padding-bottom that a stylesheet cannot override, so this goes on the body and is additive on purpose. Gated on the bar actually being in the DOM, so pages without one gain no dead space and the cart picks the padding up for free if the component is reused there. */ body:has(.cp-buybar) { padding-bottom: calc(var(--cp-buybar-h, 76px) + env(safe-area-inset-bottom, 0px)); } } @media (prefers-reduced-motion: reduce) { .cp-buybar { transition: none; } }