/* ============================================================ 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; } /* ============================================================ 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); } .pcard-meta { 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; } 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: nowrap; } 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); } /* 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; } .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; } .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; } .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; } .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-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; } }