/*
 * WolfParts: plain, businesslike look. Loads last.
 *
 * One blue (the logo's), flat surfaces, thin borders, small corners, no glow, no glass, no gradients,
 * nothing that moves on its own. The header keeps its hanging logo and its shrink on scroll.
 */

:root {
  --cyan: #5aaee6;
  --cyan-2: #9ccdf0;
  --blue: #0c6eae;
  --blue-2: #0a5688;
  --r: 6px;
  --sh1: 0 1px 2px rgba(16, 32, 48, .06);
  --sh2: 0 2px 8px rgba(16, 32, 48, .10);
}

/* Nothing animates by itself, nothing floats up on hover. */
*, *::before, *::after { animation: none !important; }
body { animation: none; }
.wf-progress, .wf-fly, .wf-hero::after, .wf-hero__road, .wf-finder__bar { display: none !important; }
.wf-cat:hover, .wf-card:hover, .wf-post:hover, .wf-steps li:hover, .wf-models a:hover, .wf-makelist a:hover,
.wf-vehiclepic:hover, .wf-homepopular .wf-vehiclepic:hover, .wf-recent a:hover, .wf-gallery__thumbs button:hover,
.wf-finderrequest:hover, .wf-btn:hover, .wf-quick a:hover, .wf-jobs a:hover, .wf-years a:hover, .wf-typepicks a:hover,
.wf-cat:hover .wf-partphoto, .wf-card:hover .wf-card__media img, .wf-card:hover .wf-ph { transform: none; }

/* Forms */
input, select, textarea { border-radius: 6px; }
input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 3px rgba(12, 110, 174, .18); }
.wf-sheet .wf-plate:focus-within, .wf-plate:focus-within { box-shadow: 0 0 0 3px rgba(12, 110, 174, .22); }

/* Buttons: one flat blue */
.wf-btn { border: 1px solid var(--blue); border-radius: 6px; background: var(--blue); box-shadow: none; font-weight: 600; }
.wf-btn:hover { border-color: var(--blue-2); background: var(--blue-2); box-shadow: none; }
.wf-btn::after { content: none; }
.wf-btn.is-added { border-color: var(--ok); background: var(--ok); box-shadow: none; }
.wf-btn--line { border: 1px solid var(--blue); background: #fff; color: var(--blue); }
.wf-btn--line:hover { background: #eef5fa; color: var(--blue-2); box-shadow: none; }
.wf-card .wf-btn { border-radius: 6px; }
.wf-cart strong { border-radius: 4px; background: var(--blue); }

/* Header details only; the layout and the scroll behaviour stay as they were. */
.wf-headsearch { border-radius: 6px; }
.wf-headsearch__results { border-radius: 8px; box-shadow: var(--sh2); }

/* Home hero: solid dark, plain two-tone heading */
.wf-hero { background: #0b1118; }
.wf-hero::before, .wf-hero::after { content: none; background: none; }
.wf-hero__kicker { color: #8fa6bb; font-weight: 600; letter-spacing: .1em; }
.wf-hero__l2 { background: none; -webkit-text-fill-color: #8cc8f4; color: #8cc8f4; }
.wf-hero__copy .wf-hero__lead { color: #b9c7d5; }
.wf-trust { background: transparent; }

/* The vehicle finder and the popular cars: solid panels */
.wf-hero .wf-finder, .wf-homepopular { border: 1px solid #243545; border-radius: 8px; background: #111b25; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.wf-hero .wf-finder::before { content: none; background: none; }
.wf-hero .wf-finder input:not([data-plate-input]), .wf-hero .wf-finder select { border-radius: 6px; }
.wf-hero .wf-finder .wf-detected { border-radius: 6px; }
.wf-vehicletabs { border-radius: 6px; background: #0a1118; border-color: #243545; }
.wf-vehicletabs button { border-radius: 4px; }
.wf-vehicletabs button[aria-selected="true"] { background: var(--blue); box-shadow: none; }
.wf-vehicleresults { border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, .4); }
.wf-vehicleresult { border-radius: 4px; }
.wf-finderrequest { border-radius: 6px; background: #0e1822; }
.wf-finderrequest:hover { border-color: var(--cyan); background: #12202c; }
.wf-finderrequest__icon { border-radius: 50%; background: var(--blue); }
.wf-homepopular .wf-vehiclepic { border-radius: 6px; }
.wf-homepopular .wf-vehiclepic:hover { border-color: var(--cyan); box-shadow: none; }
.wf-picturepicks .wf-vehiclepic { border-radius: 6px; }
.wf-manualfinder__submit:disabled { box-shadow: none; }

/* Light cards, tiles and panels: thin border, small corners, no shadow */
.wf-cat, .wf-card, .wf-post, .wf-steps li, .wf-sheet, .wf-panel, .wf-filters, .wf-recent a, .wf-models a, .wf-makelist a,
.wf-cartline, .wf-faq details, .wf-empty, .wf-alert, .wf-fitnote, .wf-vehiclepic, .wf-gallery__main, .wf-ph--lg, .wf-qty,
.wf-filtertoggle, .wf-pager a, .wf-pager span { border-radius: 6px; box-shadow: none; }
.wf-cat, .wf-card, .wf-post, .wf-steps li, .wf-sheet, .wf-panel, .wf-filters, .wf-recent a, .wf-models a, .wf-makelist a,
.wf-cartline, .wf-faq details { border-color: #d8e0e8; }
.wf-cat:hover, .wf-card:hover, .wf-post:hover, .wf-steps li:hover, .wf-models a:hover, .wf-makelist a:hover, .wf-recent a:hover { border-color: #93abc0; box-shadow: none; }
.wf-cat .wf-partphoto { border-radius: 4px; }
.wf-card__media, .wf-gallery__main { background: #f3f5f7; }
.wf-popularvehicles { border-radius: 8px; background: #f7f9fb; box-shadow: none; }
.wf-vehiclepic { border-color: #d8e0e8; }
.wf-vehiclepic:hover { border-color: #93abc0; box-shadow: none; }
.wf-buybar { border-radius: 8px 8px 0 0; box-shadow: 0 -2px 10px rgba(16, 32, 48, .12); }
.wf-fitbadge { border-radius: 4px; }
.wf-vehiclemodal__error { border-radius: 6px; }

/* Small tags are rectangles, not pills */
.wf-chips a, .wf-jobs a, .wf-quick a, .wf-years a, .wf-typepicks a { border-radius: 4px; }
.wf-years a.is-on, .wf-typepicks a.is-on, .wf-pager .current { border-color: var(--blue); background: var(--blue); color: #fff; }

/* Headings: no coloured underline, no gradient numbers */
.wf-section__head h2::after, .wf-homegrid h2::after { content: none; display: none; }
.wf-steps li span { background: none; -webkit-text-fill-color: var(--blue); color: var(--blue); font-size: 2.4rem; }
.wf-steps li:not(:last-child)::after { content: none; display: none; }
.wf-sheet h2::before, .wf-reqaside li::before, .wf-steps2 b { background: var(--blue); }
.wf-pagehead { background: #0b1118; }
.wf-reqaside { border-radius: 8px; background: #0e1822; box-shadow: none; }
.wf-reqaside__note { border-radius: 6px; background: rgba(90, 174, 230, .08); border-color: rgba(90, 174, 230, .22); }

/* Band and footer strip */
.wf-band { background: #0c2538; }
.wf-band::before { content: none; background: none; }
.wf-band .wf-btn { animation: none; }
.wf-footer::before { content: none; display: none; }

/* The makes: a plain list of names, not a moving ticker of pills */
.wf-makes { background: #0b1118; }
.wf-makes__in { align-items: flex-start; }
.wf-makebar, .wf-makebar:not(.is-marquee) { display: flex; flex-wrap: wrap; gap: 6px 22px; overflow: visible; padding: 4px 0 0; -webkit-mask-image: none; mask-image: none; }
.wf-makebar a, .wf-makebar:not(.is-marquee) a { flex: 0 0 auto; padding: 2px 0; border: 0; border-radius: 0; background: none; color: #c9d5e1; font-weight: 600; }
.wf-makebar a:hover { background: none; color: #fff; text-decoration: underline; }
.wf-makes__in > p { white-space: nowrap; }

/* Notes about illustrative pictures: small and quiet */
.wf-card__media .wf-photonote, .wf-catphoto .wf-photonote { left: 6px; right: auto; bottom: 6px; padding: 2px 6px; border-radius: 3px; background: rgba(255, 255, 255, .9); color: #44546a; font-weight: 600; letter-spacing: 0; }

/* Result pages */
.wf-emptycart__icon { background: #e8f0f7; }
.wf-404__num { background: none; -webkit-text-fill-color: var(--blue); color: var(--blue); }

/* Overlays */
.wf-vehiclemodal__backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(5, 10, 16, .72); }
.wf-vehiclemodal__card { border-radius: 10px; }
.wf-vehiclemodal__close { box-shadow: none; }
.wf-toast { border-radius: 8px; box-shadow: var(--sh2); border: 1px solid #d8e0e8; }
.wf-dock { border-radius: 10px 10px 0 0; }

/* Recently viewed: give it the same breathing room as the other sections. */
.wf-recent { padding: 36px 0 40px; }
.wf-recent h2 { margin: 0 0 16px; }

/* Phones: the make list runs full width instead of squeezing between the counter and the link. */
@media (max-width: 700px) {
  .wf-makes__in { flex-direction: column; align-items: flex-start; gap: 10px; }
  .wf-makebar, .wf-makebar:not(.is-marquee) { flex: 0 0 auto; width: 100%; gap: 4px 16px; font-size: .94rem; }
  .wf-makes__all { margin-top: 2px; }
}

/* Confirmation after a request or message is sent */
.wf-reqlayout.is-sent { grid-template-columns: minmax(0, 760px); justify-content: start; }
.wf-done { padding: 28px 30px; border: 1px solid #d8e0e8; border-radius: 8px; background: #fff; }
.wf-done__head { display: flex; align-items: flex-start; gap: 16px; }
.wf-done__icon { flex: 0 0 44px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--ok); color: #fff; }
.wf-done__icon .wf-ico, .wf-done__icon svg { display: block; width: 24px; height: 24px; }
.wf-done__icon svg { stroke-width: 2.6; }
.wf-done h2 { margin: 0 0 4px; font-family: "Barlow Condensed", "Outfit", sans-serif; font-size: 2rem; line-height: 1.1; }
.wf-done__head p { margin: 0; color: #4a5b6e; }
.wf-done__steps { display: grid; gap: 16px; margin: 24px 0 0; padding: 22px 0 0; border-top: 1px solid #e3e9ef; list-style: none; counter-reset: wfstep; }
.wf-done__steps li { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 14px; counter-increment: wfstep; }
.wf-done__steps li::before { content: counter(wfstep); grid-row: 1 / span 2; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: #e8f0f7; color: var(--blue-2); font-size: .9rem; font-weight: 700; }
.wf-done__steps strong { display: block; line-height: 28px; }
.wf-done__steps span { display: block; color: #4a5b6e; }
.wf-done__hint { margin: 22px 0 0; color: #5c6d82; font-size: .92rem; }
.wf-done__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.wf-done__actions .wf-btn--line { color: var(--blue); border-color: #b9c6d4; background: #fff; }
.wf-done__actions .wf-btn--line:hover { color: #fff; border-color: var(--blue-2); background: var(--blue-2); }
.wf-done--compact { padding: 22px; }
.wf-panel > .wf-done--compact { padding: 0; border: 0; background: none; }
.wf-done--compact h2 { font-size: 1.6rem; }
@media (max-width: 640px) {
  .wf-done { padding: 22px 18px; }
  .wf-done__actions .wf-btn { flex: 1 1 100%; }
}

/* Consent boxes and field errors (replaces the browser's own pop-up bubble) */
label.wf-check { align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1px solid #d8e0e8; border-radius: 6px; background: #f4f7fa; color: #1d2b3a; font-weight: 500; line-height: 1.45; cursor: pointer; }
label.wf-check a { color: var(--blue); font-weight: 600; }
label.wf-check.is-invalid { border-color: #c0392b; background: #fdf3f2; }

label.wf-check input[type="checkbox"], label.wf-check input[type="checkbox"]:focus,
.wf-op-card .wf-op-check input[type="checkbox"] {
  -webkit-appearance: none; appearance: none; position: static; opacity: 1;
  flex: 0 0 22px; display: block; width: 22px; height: 22px; min-height: 22px; margin: 1px 0 0; padding: 0;
  border: 2px solid #7f90a3; border-radius: 5px; background: #fff; box-shadow: none; cursor: pointer;
}
label.wf-check input[type="checkbox"]:checked, .wf-op-card .wf-op-check input[type="checkbox"]:checked {
  border-color: var(--blue); background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 15px 15px no-repeat;
}
label.wf-check input[type="checkbox"]:focus-visible, .wf-op-card .wf-op-check input[type="checkbox"]:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
label.wf-check input[type="checkbox"].is-invalid, .wf-op-card .wf-op-check input[type="checkbox"].is-invalid { border-color: #c0392b; }
.wf-op-card .wf-op-check { cursor: pointer; }

input.is-invalid, select.is-invalid, textarea.is-invalid { border-color: #c0392b; background-color: #fffafa; }
input.is-invalid:focus, select.is-invalid:focus, textarea.is-invalid:focus { border-color: #c0392b; box-shadow: 0 0 0 3px rgba(192, 57, 43, .15); }
p.wf-fielderr { margin: 6px 0 0; color: #b32d2e; font-size: .9rem; font-weight: 600; line-height: 1.35; }
label.wf-check + p.wf-fielderr { margin: -8px 0 0; }
.wf-op-card p.wf-fielderr { margin: 0 0 14px; }
.wf-op-card .wf-op-check + p.wf-fielderr { margin: -8px 0 16px; }
.wf-sheet__row, .wf-op-grid, .wf-manualfinder__grid { align-items: start; }