@charset "utf-8";

/*
Theme Name: Torqua - Auto Parts Shop HTML5 Template
Author: Metropolitanthemes
Version: 1.0.0

%%%%%%% Table of CSS %%%%%%%

1. General
   1.1 Typography
   1.2 Spacing & Grounds
   1.3 Section Titles
   1.4 Buttons & Links
   1.5 Forms
   1.6 Shared Pieces
   1.7 Illustrated Icons
2. Preloader
3. Header
   3.1 Top Bar
   3.2 Main Bar
   3.3 Navigation
   3.4 Sticky Header
4. Offcanvas Menu
5. Custom Select
6. Language Picker
7. Components
   7.1 Part Cards
   7.2 Fitment Badge
   7.3 Bolt In
   7.4 Ruled Grids & Rails
   7.5 Compact Cards
   7.6 Category Tiles
   7.7 Shop By Make
   7.8 Vehicle Selector
   7.9 Promo Banners
   7.10 Tabs
   7.11 Journal Cards
   7.12 Team Cards
   7.13 Garage & Service Cards
   7.14 Bundles & Reviews
8. Home One
   8.1 Hero Slider
   8.2 Vehicle Band
   8.3 Promo Split
   8.4 Brake Moment
   8.5 Fitting Band
   8.6 Bundles
   8.7 Reviews Band
9. Home Two
   9.1 Wide Container
   9.2 Hero With Vehicle Panel
   9.3 Promo Pair & Trio
   9.4 Cascade Band
   9.5 Tuning Feature
10. Home Three
   10.1 Night Hero
   10.2 Turbo Band
   10.3 Deal Band
   10.4 Hours Card
11. Shop Pages
   11.1 Sidebar
   11.2 Shop Grid
   11.3 Product Page
   11.4 Cart, Wishlist & Totals
   11.5 Checkout
   11.6 Compare
   11.7 Deals
12. Finder Pages
   12.1 Parts Finder
   12.2 OE Search
   12.3 My Garage
   12.4 Track & Returns
13. Fitting Pages
   13.1 Booking Wizard
   13.2 Partner Garages
   13.3 Services
14. Company & Account Pages
   14.1 About
   14.2 FAQ
   14.3 Journal
   14.4 Contact
   14.5 Account
   14.6 Sign In & Register
   14.7 Coming Soon & 404
15. Subheader
16. Footer
   16.1 Newsletter Bar
   16.2 Main Footer
   16.3 Promise Strip
   16.4 Bottom Bar
*/

/*======================
1. General
========================*/
:root {
  /* brand */
  --tq-red: #E20100;
  --tq-red-rgb: 226, 1, 0;
  --tq-red-deep: #B30000;
  --tq-ink: #0D0D0D;
  --tq-ink-rgb: 13, 13, 13;
  --tq-night: #121212;
  --tq-night-rgb: 18, 18, 18;
  --tq-fit: #13A05B;
  --tq-fit-rgb: 19, 160, 91;
  /* the ground baked into the parts photographs, the same in both themes */
  --tq-product: #FFFFFF;
  /* semantic (the dark theme swaps these) */
  --tq-bg: #FFFFFF;
  --tq-bg-rgb: 255, 255, 255;
  --tq-surface: #FFFFFF;
  --tq-smoke: #F3F3F3;
  --tq-smoke-2: #F7F7F7;
  --tq-heading: #0D0D0D;
  --tq-heading-rgb: 13, 13, 13;
  --tq-text: #4E5157;
  --tq-muted: #6B6E74;
  --tq-line: #E2E2E2;
  --tq-line-2: #CFCFCF;
  --tq-red-text: #D10000;
  --tq-fit-text: #0E7A45;
  --tq-shadow: 0 16px 40px rgba(13, 13, 13, 0.08);
  --tq-shadow-lg: 0 26px 60px rgba(13, 13, 13, 0.16);
  --tq-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  /* type */
  --tq-ff-body: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --tq-ff-num: 'Familjen Grotesk', 'Archivo', sans-serif;
  --tq-fs-h1: clamp(42px, 4.6vw, 76px);
  --tq-fs-h2: clamp(30px, 2.7vw, 44px);
  --tq-fs-h3: clamp(20px, 1.55vw, 24px);
  --tq-fs-h4: 19px;
  --tq-fs-h5: 16px;
  --tq-fs-h6: 14px;
  /* WebGL layer colours: ground, metal, the red bolt */
  --gl-1: #F3F3F3;
  --gl-2: #9AA0A6;
  --gl-3: #E20100;
  --gl-alpha: 0.42;
}
[data-theme="dark"] {
  --tq-bg: #0E0E0F;
  --tq-bg-rgb: 14, 14, 15;
  --tq-surface: #17171A;
  --tq-smoke: #141416;
  --tq-smoke-2: #1C1C1F;
  --tq-heading: #F4F4F4;
  --tq-heading-rgb: 244, 244, 244;
  --tq-text: #B8BBC1;
  --tq-muted: #8E9198;
  --tq-line: rgba(255, 255, 255, 0.1);
  --tq-line-2: rgba(255, 255, 255, 0.18);
  --tq-red-text: #FF5A4F;
  --tq-fit-text: #3DDC8A;
  --tq-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
  --tq-shadow-lg: 0 26px 60px rgba(0, 0, 0, 0.5);
  --gl-1: #141416;
  --gl-2: #6E747B;
}
/* bands that stay dark in both themes */
.is-night {
  --tq-heading: #FFFFFF;
  --tq-heading-rgb: 255, 255, 255;
  --tq-text: rgba(255, 255, 255, 0.76);
  --tq-muted: rgba(255, 255, 255, 0.6);
  --tq-line: rgba(255, 255, 255, 0.12);
  --tq-line-2: rgba(255, 255, 255, 0.22);
  --tq-surface: #1B1B1D;
  --tq-smoke: #19191B;
  --tq-smoke-2: #202023;
  --tq-red-text: #FF5A4F;
  --tq-fit-text: #3DDC8A;
  --gl-1: #121212;
  --gl-2: #5E646B;
  --gl-alpha: 0.32;
  background-color: var(--tq-night);
  color: var(--tq-text);
}
html {
  overflow-x: clip;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--tq-bg);
  color: var(--tq-text);
  font-family: var(--tq-ff-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.4s ease;
}
body.oc-open {
  overflow: hidden;
}
img {
  max-width: 100%;
  height: auto;
}
a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s var(--tq-ease), background-color 0.3s var(--tq-ease);
}
a:hover {
  color: var(--tq-red-text);
}
::selection {
  background: var(--tq-red);
  color: #FFFFFF;
}
:focus-visible {
  outline: 2px solid var(--tq-red);
  outline-offset: 3px;
}

/*----- 1.1 Typography -----*/
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  color: var(--tq-heading);
  font-family: var(--tq-ff-body);
  text-transform: uppercase;
}
h1 {
  font-size: var(--tq-fs-h1);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.03em;
}
h2 {
  font-size: var(--tq-fs-h2);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.025em;
}
h3 {
  font-size: var(--tq-fs-h3);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
h4 {
  font-size: var(--tq-fs-h4);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
h5 {
  font-size: var(--tq-fs-h5);
  font-weight: 700;
  line-height: 1.3;
}
h6 {
  font-size: var(--tq-fs-h6);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.02em;
}
/* a heading at its outline level that looks like another level */
.tq-h2 {
  font-size: var(--tq-fs-h2);
  line-height: 1;
}
.tq-h3 {
  font-size: var(--tq-fs-h3);
  line-height: 1.1;
}
.tq-h4 {
  font-size: var(--tq-fs-h4);
  line-height: 1.2;
}
.tq-h5 {
  font-size: var(--tq-fs-h5);
  line-height: 1.3;
}
.tq-h6 {
  font-size: var(--tq-fs-h6);
  line-height: 1.4;
}
h1 em,
h2 em,
h3 em {
  font-style: normal;
  color: var(--tq-red-text);
}
p {
  margin: 0 0 18px;
}
p:last-child {
  margin-bottom: 0;
}
.tq-lead {
  font-size: 18px;
  line-height: 1.6;
  color: var(--tq-text);
}
/* the parts-catalogue voice: prices, part numbers, figures */
.tq-num {
  font-family: var(--tq-ff-num);
  font-weight: 600;
  letter-spacing: 0;
}
.tq-reset {
  margin: 0;
  padding: 0;
  list-style: none;
}
.is-hidden,
.is-unmatched {
  display: none !important;
}

/*----- 1.2 Spacing & Grounds -----*/
.sec-pt-100 {
  padding-top: 100px;
}
.sec-pb-100 {
  padding-bottom: 100px;
}
.sec-pt-70 {
  padding-top: 70px;
}
.sec-pb-70 {
  padding-bottom: 70px;
}
.tq-bg-smoke {
  background-color: var(--tq-smoke);
}
.tq-bg-red .tq-eyebrow::before {
  background: #FFFFFF;
}
.tq-bg-red {
  --tq-heading: #FFFFFF;
  --tq-text: rgba(255, 255, 255, 0.9);
  --tq-muted: rgba(255, 255, 255, 0.82);
  --tq-red-text: #FFFFFF;
  background-color: var(--tq-red);
  color: var(--tq-text);
}
/* photo band: one style everywhere (cover photo under an ink wash from the left, white copy) */
.tq-photo-band {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--tq-ink);
  --tq-heading: #FFFFFF;
  --tq-text: rgba(255, 255, 255, 0.82);
  --tq-muted: rgba(255, 255, 255, 0.66);
  --tq-red-text: #FF5A4F;
  --tq-line: rgba(255, 255, 255, 0.16);
  --gl-1: #0D0D0D;
  --gl-2: #5E646B;
  color: var(--tq-text);
}
.tq-photo-band > .band-img {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tq-photo-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(90deg, rgba(13, 13, 13, 0.94) 0%, rgba(13, 13, 13, 0.8) 42%, rgba(13, 13, 13, 0.3) 100%);
}

/*----- 1.3 Section Titles -----*/
/* the base's head: a big caps title, a red-arrowed link at the right end */
.tq-title {
  margin-bottom: 40px;
}
.tq-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  color: var(--tq-red-text);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.tq-eyebrow::before {
  content: "";
  width: 18px;
  height: 3px;
  background: var(--tq-red);
}
.tq-title h2 {
  max-width: 820px;
}
.tq-title .tq-lead {
  max-width: 640px;
  margin: 18px 0 0;
}
.tq-title.text-center h2,
.tq-title.text-center .tq-lead {
  margin-left: auto;
  margin-right: auto;
}
.tq-title.is-split {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
}
.tq-title.is-split .tq-lead {
  max-width: 480px;
  margin: 0;
}

/*----- 1.4 Buttons & Links -----*/
.tq-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 54px;
  padding: 0 30px;
  border: 0;
  border-radius: 0;
  background: var(--tq-red);
  color: #FFFFFF;
  font-family: var(--tq-ff-body);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  transition: background-color 0.3s var(--tq-ease), color 0.3s var(--tq-ease), box-shadow 0.3s var(--tq-ease);
}
.tq-btn i {
  position: relative;
  font-size: 13px;
  transition: transform 0.4s var(--tq-ease), opacity 0.3s ease;
}
/* house physics: the arrow slides out and a twin slides in */
.tq-btn i.fa-arrow-right::after {
  content: "\f061";
  position: absolute;
  left: -22px;
  top: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.tq-btn:hover {
  background: var(--tq-ink);
  color: #FFFFFF;
  box-shadow: 0 12px 26px rgba(13, 13, 13, 0.2);
}
.tq-btn:hover i.fa-arrow-right {
  transform: translateX(22px);
}
.tq-btn:hover i.fa-arrow-right::after {
  opacity: 1;
}
.tq-btn:hover i.fa-arrow-right::before {
  opacity: 0;
}
.tq-btn.is-ink {
  background: var(--tq-ink);
}
.tq-btn.is-ink:hover {
  background: var(--tq-red);
}
.tq-btn.is-tonal {
  background: var(--tq-smoke);
  color: var(--tq-heading);
}
.tq-btn.is-tonal i {
  color: var(--tq-red-text);
}
.tq-bg-smoke .tq-btn.is-tonal {
  background: var(--tq-surface);
}
.tq-btn.is-tonal:hover {
  background: var(--tq-ink);
  color: #FFFFFF;
}
.tq-btn.is-tonal:hover i {
  color: #FFFFFF;
}
.tq-btn.is-light {
  background: #FFFFFF;
  color: var(--tq-ink);
}
.tq-btn.is-light:hover {
  background: var(--tq-ink);
  color: #FFFFFF;
}
.tq-bg-red .tq-btn {
  background: var(--tq-ink);
}
.tq-bg-red .tq-btn:hover {
  background: #FFFFFF;
  color: var(--tq-ink);
}
.tq-btn.is-sm {
  height: 44px;
  padding: 0 20px;
  font-size: 12.5px;
}
.tq-btn.is-block {
  width: 100%;
}
.tq-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.is-night .tq-btn.is-tonal,
.tq-photo-band .tq-btn.is-tonal {
  background: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
}
.tq-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--tq-heading);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.tq-link i {
  color: var(--tq-red-text);
  font-size: 11px;
  transition: transform 0.35s var(--tq-ease);
}
.tq-link:hover i {
  transform: translateX(5px);
}
.tq-btns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

/*----- 1.5 Forms -----*/
.tq-field {
  position: relative;
  margin-bottom: 20px;
}
.tq-field label,
.tq-label {
  display: block;
  margin-bottom: 8px;
  color: var(--tq-heading);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.tq-input {
  display: block;
  width: 100%;
  height: 56px;
  padding: 0 48px 0 18px;
  border: 1px solid transparent;
  border-radius: 0;
  background: var(--tq-smoke);
  color: var(--tq-heading);
  font-family: var(--tq-ff-body);
  font-size: 15.5px;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}
.tq-bg-smoke .tq-input {
  background: var(--tq-surface);
}
textarea.tq-input {
  height: 160px;
  padding-top: 16px;
  resize: vertical;
}
.tq-input::placeholder {
  color: var(--tq-muted);
}
.tq-input:focus {
  border-color: var(--tq-red);
  background: var(--tq-surface);
  outline: 0;
}
.tq-input.is-invalid {
  border-color: var(--tq-red);
}
.tq-field > i {
  position: absolute;
  right: 18px;
  top: 49px;
  color: var(--tq-red-text);
  font-size: 14px;
  pointer-events: none;
}
.tq-field.is-area > i {
  top: 52px;
}
.form-status {
  min-height: 0;
  margin: 12px 0 0;
  font-size: 14.5px;
  color: var(--tq-muted);
}
.form-status.is-ok {
  color: var(--tq-fit-text);
}
.form-status.is-error {
  color: var(--tq-red-text);
}
.tq-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  cursor: pointer;
}
.tq-check input {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  accent-color: var(--tq-red);
}

/*----- 1.6 Shared Pieces -----*/
/* buttons start bare; each control draws its own face */
button {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.tq-social {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tq-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--tq-surface);
  color: var(--tq-heading);
  font-size: 14px;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s var(--tq-ease);
}
.tq-social a:hover {
  background: var(--tq-red);
  color: #FFFFFF;
  transform: translateY(-3px);
}
/* a round portrait beside a name */
.tq-face {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
}
/* an avatar group: overlapping faces and who they are */
.tq-faces {
  display: inline-flex;
  align-items: center;
  gap: 16px;
}
.tq-faces .f-row {
  display: inline-flex;
}
.tq-faces .f-row img {
  width: 46px;
  height: 46px;
  border: 3px solid var(--tq-bg);
  border-radius: 50%;
  object-fit: cover;
}
.tq-faces .f-row img + img {
  margin-left: -14px;
}
.tq-faces .f-txt {
  max-width: 240px;
  font-size: 14px;
  line-height: 1.45;
}
.tq-faces .f-txt b {
  display: block;
  color: var(--tq-heading);
}
.is-night .tq-faces .f-row img,
.tq-photo-band .tq-faces .f-row img {
  border-color: var(--tq-night);
}
.tq-stars {
  display: inline-flex;
  gap: 3px;
  color: var(--tq-red);
  font-size: 12px;
}
.tq-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 3000;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: calc(100% - 32px);
  padding: 16px 24px;
  background: var(--tq-ink);
  color: #FFFFFF;
  font-size: 15px;
  box-shadow: var(--tq-shadow-lg);
  transform: translate(-50%, 160%);
  transition: transform 0.5s var(--tq-ease);
}
.tq-toast i {
  color: var(--tq-fit);
}
.tq-toast.is-shown {
  transform: translate(-50%, 0);
}
.tq-back-top {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background: var(--tq-red);
  color: #FFFFFF;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s var(--tq-ease), background-color 0.3s ease;
}
.tq-back-top.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.tq-back-top:hover {
  background: var(--tq-ink);
  color: #FFFFFF;
}
/* WebGL layers sit under a section's content */
.tq-gl {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.6s ease;
}
.tq-gl.is-on {
  opacity: 1;
}
/* label / value rows (specs, hours, figures) */
.tq-rows {
  margin: 0;
}
.tq-rows > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 11px 0;
  border-bottom: 1px solid var(--tq-line);
}
.tq-rows > div:first-child {
  border-top: 1px solid var(--tq-line);
}
.tq-rows dt {
  color: var(--tq-muted);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.tq-rows dd {
  margin: 0;
  color: var(--tq-heading);
  font-family: var(--tq-ff-num);
  font-size: 15px;
  font-weight: 600;
  text-align: right;
}
.tq-rows dd .fa-star {
  color: var(--tq-red);
  font-size: 11px;
}
.tq-rows.is-tight > div {
  padding: 8px 0;
}
.tq-rows.is-tight dd {
  font-size: 14px;
}
.tq-rows > div.is-today dt,
.tq-rows > div.is-today dd {
  color: var(--tq-red-text);
}

/*----- 1.7 Illustrated Icons -----*/
.tq-ico {
  display: inline-flex;
  flex-shrink: 0;
}
.tq-ico img {
  width: 100%;
  height: 100%;
}
.tq-ico .ico-night,
[data-theme="dark"] .tq-ico .ico-day,
.is-night .tq-ico .ico-day,
.tq-photo-band .tq-ico .ico-day {
  display: none;
}
[data-theme="dark"] .tq-ico .ico-night,
.is-night .tq-ico .ico-night,
.tq-photo-band .tq-ico .ico-night {
  display: block;
}

/*======================
2. Preloader
========================*/
/* Spark Gap: a spark plug points at the dimmed wordmark, fires twice across its gap,
   the third spark lights the mark from the gap outwards, then the panel lifts */
.tq-preloader {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tq-ink);
  overflow: hidden;
}
.js .tq-preloader {
  display: flex;
}
.no-js .tq-preloader {
  display: none;
}
.tq-preloader .pre-stage {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
}
.tq-preloader .pre-plug {
  width: 250px;
  height: auto;
  transform-origin: 100% 50%;
}
.tq-preloader .pre-spark {
  position: absolute;
  top: 50%;
  left: 222px;
  width: 140px;
  height: 140px;
  margin-top: -70px;
  pointer-events: none;
}
.tq-preloader .pre-mark {
  position: relative;
  width: 260px;
}
.tq-preloader .pre-mark img {
  display: block;
  width: 100%;
  height: auto;
}
.tq-preloader .pm-dim {
  opacity: 0.12;
}
.tq-preloader .pm-lit {
  position: absolute;
  inset: 0;
  clip-path: inset(-20% 100% -20% 0);
  filter: drop-shadow(0 0 14px rgba(var(--tq-red-rgb), 0.85));
}

/*======================
3. Header
========================*/
.tq-header {
  position: relative;
  z-index: 1000;
  background: var(--tq-bg);
}
.tq-header-spacer {
  display: none;
}
.tq-header-spacer.is-on {
  display: block;
}
.tq-logo {
  display: inline-flex;
  align-items: center;
}
.tq-logo img {
  display: block;
  height: 30px;
  width: auto;
}
.tq-logo .logo-light,
[data-theme="dark"] .tq-logo .logo-main {
  display: none;
}
[data-theme="dark"] .tq-logo .logo-light {
  display: block;
}

/*----- 3.1 Top Bar -----*/
.header-top {
  background: #000000;
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.header-top .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 40px;
}
.header-top .top-left,
.header-top .top-right {
  display: flex;
  align-items: center;
  gap: 26px;
}
.header-top a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.8);
}
.header-top a:hover {
  color: #FFFFFF;
}
.header-top i {
  color: var(--tq-red);
  font-size: 12px;
}
.header-top .top-phone b {
  color: #FFFFFF;
  font-family: var(--tq-ff-num);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.tq-dispatch {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #FFFFFF;
}
.tq-dispatch b {
  color: #FFFFFF;
  font-family: var(--tq-ff-num);
  font-weight: 600;
}
.tq-theme-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
  font-size: 14px;
  transition: background-color 0.3s ease;
}
.tq-theme-toggle:hover {
  background: var(--tq-red);
}
.tq-theme-toggle .ti-sun,
[data-theme="dark"] .tq-theme-toggle .ti-moon {
  display: none;
}
[data-theme="dark"] .tq-theme-toggle .ti-sun {
  display: inline-block;
}
.header-top a,
.tq-dispatch {
  white-space: nowrap;
}

/*----- 3.2 Main Bar -----*/
.header-main {
  padding: 18px 0;
}
.header-main .container {
  display: flex;
  align-items: stretch;
  height: 62px;
}
.hm-brand {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 22px;
  width: 270px;
  padding: 0 24px;
  background: var(--tq-red);
}
.tq-menu-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 26px;
  height: 40px;
}
.tq-menu-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: #FFFFFF;
  transition: width 0.3s var(--tq-ease);
}
.tq-menu-toggle span:nth-child(2) {
  width: 16px;
}
.tq-menu-toggle:hover span {
  width: 22px;
}
.hm-brand .tq-logo img {
  height: 30px;
}
.hm-search {
  display: flex;
  flex: 1;
  min-width: 0;
  border: 1px solid var(--tq-line);
  border-left: 0;
}
.hm-cat {
  flex-shrink: 0;
  width: 220px;
  border-right: 1px solid var(--tq-line);
}
.hm-cat .tq-select,
.hm-cat .tq-select .select-button {
  height: 100%;
}
.hm-cat .tq-select .select-button {
  border: 0;
  background: transparent;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.hm-input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0 20px;
  border: 0;
  background: transparent;
  color: var(--tq-heading);
  font-family: var(--tq-ff-body);
  font-size: 15px;
}
.hm-input::placeholder {
  color: var(--tq-muted);
}
.hm-input:focus {
  outline: 0;
}
.hm-search:focus-within {
  border-color: var(--tq-red);
}
.hm-go {
  flex-shrink: 0;
  width: 62px;
  color: var(--tq-heading);
  font-size: 17px;
  transition: color 0.3s ease, background-color 0.3s ease;
}
.hm-go:hover {
  background: var(--tq-red);
  color: #FFFFFF;
}
.hm-icons {
  display: flex;
}
.hm-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 100%;
  border: 1px solid var(--tq-line);
  border-left: 0;
  color: var(--tq-heading);
  font-size: 18px;
}
.hm-icon:hover {
  background: var(--tq-smoke);
  color: var(--tq-red-text);
}
.hm-icon .count {
  position: absolute;
  top: 8px;
  right: 8px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--tq-red);
  color: #FFFFFF;
  font-family: var(--tq-ff-num);
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
}
.hm-icon .count:empty {
  display: none;
}

/*----- 3.3 Navigation -----*/
.header-nav {
  border-top: 1px solid var(--tq-line);
  border-bottom: 1px solid var(--tq-line);
}
.header-nav .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}
.tq-nav > ul {
  display: flex;
  align-items: center;
  gap: 36px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tq-nav li {
  position: relative;
  list-style: none;
}
.tq-nav > ul > li > a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 56px;
  color: var(--tq-heading);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.tq-nav > ul > li > a i {
  font-size: 9px;
  color: var(--tq-muted);
  transition: transform 0.3s var(--tq-ease), color 0.3s ease;
}
.tq-nav > ul > li:hover > a,
.tq-nav > ul > li.active > a {
  color: var(--tq-red-text);
}
.tq-nav > ul > li:hover > a i,
.tq-nav > ul > li.active > a i {
  color: var(--tq-red-text);
}
.tq-nav > ul > li:hover > a i {
  transform: rotate(180deg);
}
/* drop-downs hang below the bar with a hover bridge across the gap */
.tq-nav .sub-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: -22px;
  z-index: 20;
  min-width: 250px;
  margin: 0;
  padding: 12px 0;
  list-style: none;
  background: var(--tq-surface);
  border-top: 3px solid var(--tq-red);
  box-shadow: var(--tq-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.3s var(--tq-ease), transform 0.3s var(--tq-ease), visibility 0.3s;
}
.tq-nav .sub-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 18px;
}
.tq-nav li:hover > .sub-menu,
.tq-nav li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.tq-nav .sub-menu li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 24px;
  color: var(--tq-heading);
  font-size: 14.5px;
  font-weight: 500;
  transition: color 0.3s ease, padding 0.3s var(--tq-ease);
}
.tq-nav .sub-menu li a i {
  font-size: 9px;
  color: var(--tq-muted);
}
.tq-nav .sub-menu li:hover > a,
.tq-nav .sub-menu li.active > a {
  color: var(--tq-red-text);
  padding-left: 30px;
}
/* third level opens to the right */
.tq-nav .sub-menu .sub-menu {
  top: -15px;
  left: 100%;
  margin-left: 0;
}
.tq-nav .sub-menu .sub-menu::before {
  left: auto;
  right: 100%;
  top: 0;
  bottom: 0;
  width: 14px;
  height: auto;
}
/* Home: a mega panel with the three homes */
.tq-nav .mega-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: -22px;
  z-index: 20;
  width: 780px;
  padding: 24px;
  background: var(--tq-surface);
  border-top: 3px solid var(--tq-red);
  box-shadow: var(--tq-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.3s var(--tq-ease), transform 0.3s var(--tq-ease), visibility 0.3s;
}
.tq-nav .mega-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 18px;
}
.tq-nav li:hover > .mega-menu,
.tq-nav li:focus-within > .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.mega-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.mega-card {
  display: block;
}
.mega-card .shot {
  display: block;
  overflow: hidden;
  border: 1px solid var(--tq-line);
}
.mega-card .shot img {
  display: block;
  width: 100%;
  transition: transform 0.6s var(--tq-ease);
}
.mega-card:hover .shot img {
  transform: scale(1.04);
}
.mega-card .mega-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
}
.mega-card small {
  color: var(--tq-red-text);
  font-family: var(--tq-ff-num);
  font-size: 13px;
  font-weight: 600;
}
.mega-card b {
  color: var(--tq-heading);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.mega-card.is-current b,
.mega-card:hover b {
  color: var(--tq-red-text);
}
/* My Garage: the active vehicle, a tonal control at the bar's right end */
.hn-garage {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 16px;
  background: var(--tq-smoke);
  color: var(--tq-heading);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.hn-garage > i:first-child {
  color: var(--tq-red-text);
  font-size: 15px;
}
.hn-garage .g-label {
  color: var(--tq-muted);
}
.hn-garage b {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hn-garage > i:last-child {
  color: var(--tq-red-text);
  font-size: 10px;
}
.hn-garage:hover {
  background: var(--tq-ink);
  color: #FFFFFF;
}
.hn-garage.has-car b {
  color: var(--tq-fit-text);
}
.hn-garage.has-car:hover b {
  color: #FFFFFF;
}

/*----- 3.4 Sticky Header -----*/
.tq-header.is-sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  animation: tqHeaderDown 0.5s var(--tq-ease);
}
.tq-header.is-sticky .header-top {
  display: none;
}
.tq-header.is-sticky .header-main {
  padding: 10px 0;
}
@keyframes tqHeaderDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

/*======================
4. Offcanvas Menu
========================*/
.tq-offcanvas {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 2100;
  display: flex;
  flex-direction: column;
  width: min(440px, 100vw);
  background: var(--tq-surface);
  box-shadow: var(--tq-shadow-lg);
  transform: translateX(105%);
  transition: transform 0.6s var(--tq-ease);
  overflow-y: auto;
}
.tq-offcanvas.open {
  transform: none;
}
.tq-offcanvas-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(13, 13, 13, 0.6);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
.tq-offcanvas-overlay.open {
  opacity: 1;
  visibility: visible;
}
.offcanvas-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 28px;
  background: var(--tq-red);
}
.offcanvas-head .tq-logo img {
  height: 28px;
}
.offcanvas-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.16);
  color: #FFFFFF;
  font-size: 18px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.4s var(--tq-ease);
}
.offcanvas-close:hover {
  background: var(--tq-ink);
  color: #FFFFFF;
  transform: rotate(90deg);
}
.offcanvas-nav {
  flex: 1;
  padding: 6px 28px 30px;
}
.oc-group {
  border-bottom: 1px solid var(--tq-line);
}
.oc-group > button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 18px 0;
  border: 0;
  background: none;
  color: var(--tq-heading);
  font-family: var(--tq-ff-body);
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}
.oc-group > button i {
  color: var(--tq-red-text);
  font-size: 12px;
  transition: transform 0.35s var(--tq-ease);
}
.oc-group.is-open > button i {
  transform: rotate(45deg);
}
.oc-group ul {
  display: none;
  padding: 0 0 16px;
}
.oc-group.is-open ul {
  display: block;
}
.oc-group ul a {
  display: block;
  padding: 7px 0 7px 16px;
  border-left: 2px solid var(--tq-line);
  color: var(--tq-text);
  font-size: 16px;
}
.oc-group ul a:hover,
.oc-group ul a.is-current {
  border-color: var(--tq-red);
  color: var(--tq-red-text);
}
.offcanvas-foot {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 28px;
  background: var(--tq-ink);
  color: rgba(255, 255, 255, 0.76);
}
.offcanvas-foot .label {
  color: #FF5A4F;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.oc-phone {
  color: #FFFFFF;
  font-family: var(--tq-ff-num);
  font-size: 26px;
  font-weight: 600;
}
.oc-mail {
  color: rgba(255, 255, 255, 0.76);
}
.oc-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
}
.offcanvas-foot .tq-social a {
  background: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
}
/* the active vehicle, at the top of the menu */
.oc-garage {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 22px 28px 6px;
  padding: 14px 18px;
  background: var(--tq-smoke);
  color: var(--tq-heading);
}
.oc-garage > i:first-child {
  color: var(--tq-red-text);
  font-size: 20px;
}
.oc-garage span {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
}
.oc-garage small {
  color: var(--tq-muted);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.oc-garage b {
  overflow: hidden;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.oc-garage > i:last-child {
  color: var(--tq-red-text);
  font-size: 11px;
}
.oc-garage.has-car b {
  color: var(--tq-fit-text);
}

/*======================
5. Custom Select
========================*/
/* Native selects stay in the form (value, name, submit); a styled button and
   listbox are drawn over them and keep them in sync. */
.tq-select {
  position: relative;
}
.tq-select > select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0 !important;
}
.tq-select .select-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  height: 56px;
  padding: 0 18px;
  border: 1px solid transparent;
  background: var(--tq-smoke);
  font-size: 15px;
  text-align: left;
  color: var(--tq-heading);
  transition: border-color 0.3s var(--tq-ease);
}
.tq-select.is-open .select-button,
.tq-select .select-button:hover {
  border-color: var(--tq-red);
}
.tq-bg-smoke .tq-select .select-button {
  background: var(--tq-surface);
}
.tq-select .select-button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.tq-select .select-button:disabled:hover {
  border-color: transparent;
}
.tq-select .select-button .select-value {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.tq-select .select-button i {
  flex-shrink: 0;
  font-size: 10px;
  color: var(--tq-red-text);
  transition: transform 0.35s var(--tq-ease);
}
.tq-select.is-open .select-button i {
  transform: rotate(180deg);
}
.tq-select .select-list {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 30;
  min-width: 100%;
  max-height: 340px;
  margin: 0;
  padding: 10px 0;
  overflow-x: hidden;
  overflow-y: auto;
  list-style: none;
  background-color: var(--tq-surface);
  border-top: 3px solid var(--tq-red);
  box-shadow: var(--tq-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.3s var(--tq-ease), transform 0.3s var(--tq-ease), visibility 0.3s;
}
.tq-select.opens-up .select-list {
  top: auto;
  bottom: calc(100% + 8px);
  border-top: 0;
  border-bottom: 2px solid var(--tq-red);
  transform: translateY(-10px);
}
.tq-select.is-open .select-list {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.tq-select .select-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 20px;
  font-size: 15px;
  color: var(--tq-heading);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s var(--tq-ease), color 0.2s var(--tq-ease);
}
.tq-select .select-option .option-meta {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tq-red-text);
}
.tq-select .select-option .option-meta.is-none {
  color: var(--tq-muted);
}
.tq-select .select-option.is-focused,
.tq-select .select-option:hover {
  background-color: var(--tq-smoke);
}
.tq-select .select-option.is-disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
.tq-select .select-option.is-selected {
  color: var(--tq-red-text);
}
.tq-select .select-option.is-selected::after {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 11px;
  color: var(--tq-red-text);
}
.tq-select.is-compact .select-button {
  height: 44px;
  background: var(--tq-smoke);
  font-size: 13.5px;
  font-weight: 600;
}

/*======================
6. Language Picker
========================*/
/* Language picker: a flag and a code; the menu lists the languages that read left to right and right to left.
   The demo copy stays in English, and a right-to-left language turns the layout around. */
.tq-lang {
  position: relative;
  flex-shrink: 0;
}
.tq-lang .lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
  font-family: var(--tq-ff-body);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.tq-lang .lang-btn:hover,
.tq-lang .lang-btn[aria-expanded="true"] {
  background: var(--tq-red);
  color: #FFFFFF;
}
.tq-lang .lang-btn > i {
  font-size: 9px;
  transition: transform 0.3s ease;
}
.tq-lang .lang-btn[aria-expanded="true"] > i {
  transform: rotate(180deg);
}
.tq-lang .flag {
  flex-shrink: 0;
  width: 22px;
  height: 16px;
  border-radius: 3px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.tq-lang.is-icon .lang-btn {
  height: 46px;
  padding: 0 15px;
  background: var(--tq-smoke);
  color: var(--tq-heading);
}
.tq-lang.is-icon .lang-btn:hover,
.tq-lang.is-icon .lang-btn[aria-expanded="true"] {
  background: var(--tq-ink);
  color: #FFFFFF;
}
.tq-lang .lang-menu {
  position: absolute;
  top: calc(100% + 12px);
  inset-inline-end: 0;
  z-index: 1300;
  width: 248px;
  padding: 10px;
  border-radius: 0;
  background: var(--tq-surface);
  box-shadow: var(--tq-shadow-lg);
  font-family: var(--tq-ff-body);
  text-align: start;
  white-space: normal;
}
.tq-lang.is-up .lang-menu {
  top: auto;
  bottom: calc(100% + 12px);
}
.tq-lang.is-start .lang-menu {
  inset-inline-start: 0;
  inset-inline-end: auto;
}
.tq-lang .lang-menu[hidden] {
  display: none;
}
.tq-lang .lang-group {
  margin: 6px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tq-muted);
}
.tq-lang .lang-menu ul {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tq-lang .lang-menu ul + .lang-group {
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--tq-line);
}
.tq-lang .lang-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--tq-heading);
  font-family: var(--tq-ff-body);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
  text-align: start;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.25s ease;
}
.tq-lang .lang-item small {
  margin-inline-start: auto;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--tq-muted);
}
.tq-lang .lang-item i {
  width: 12px;
  font-size: 11px;
  color: var(--tq-red-text);
  opacity: 0;
}
.tq-lang .lang-item:hover,
.tq-lang .lang-item[aria-pressed="true"] {
  background: var(--tq-smoke);
}
.tq-lang .lang-item[aria-pressed="true"] {
  font-weight: 600;
}
.tq-lang .lang-item[aria-pressed="true"] i {
  opacity: 1;
}
.tq-lang .lang-note {
  margin: 10px 10px 4px;
  padding-top: 10px;
  border-top: 1px solid var(--tq-line);
  font-size: 12px;
  line-height: 1.5;
  color: var(--tq-muted);
}

/*======================
7. Components
========================*/
/*----- 7.1 Part Cards -----*/
/* the base's ruled cell: white packshot, wish + compare at the corner, a smoke foot bar */
.part-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--tq-surface);
}
.pc-media {
  position: relative;
  overflow: hidden;
  background: var(--tq-product);
}
.pc-img {
  display: block;
  padding: 26px 26px 12px;
}
.pc-img img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  transition: transform 0.6s var(--tq-ease);
}
.part-card:hover .pc-img img {
  transform: scale(1.05);
}
.pc-flag {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  padding: 4px 8px;
  background: var(--tq-ink);
  color: #FFFFFF;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pc-flag.is-new {
  background: var(--tq-red);
}
.pc-tools {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pc-tools button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  color: #0D0D0D;
  font-size: 15px;
  transition: color 0.3s ease, background-color 0.3s ease;
}
.pc-tools button:hover,
.pc-tools button.is-on {
  color: var(--tq-red);
}
.pc-body {
  flex: 1;
  padding: 16px 22px 20px;
}
.pc-cat {
  display: block;
  color: var(--tq-muted);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.pc-name {
  margin: 6px 0 6px;
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
}
.pc-oe {
  display: block;
  margin-bottom: 10px;
  color: var(--tq-muted);
  font-family: var(--tq-ff-num);
  font-size: 12.5px;
  font-weight: 500;
}
.pc-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: var(--tq-heading);
  font-family: var(--tq-ff-num);
  line-height: 1;
}
.pc-price b {
  font-size: 21px;
  font-weight: 600;
}
.pc-price del {
  color: var(--tq-muted);
  font-size: 14px;
  font-weight: 500;
}
.pc-add {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  height: 50px;
  padding: 0 22px;
  background: var(--tq-smoke-2);
  color: var(--tq-heading);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.pc-add i {
  font-size: 15px;
}
.pc-add:hover {
  background: var(--tq-red);
  color: #FFFFFF;
}

/*----- 7.2 Fitment Badge -----*/
/* the hover accent: "Fits your car" slides in from the photo's left edge.
   A part that fits the active vehicle keeps its green tick; hovering opens the words. */
.pc-fit {
  position: absolute;
  left: 0;
  bottom: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 34px;
  height: 32px;
  padding: 0 11px;
  overflow: hidden;
  background: var(--tq-ink);
  color: #FFFFFF;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translateX(-102%);
  transition: transform 0.45s var(--tq-ease), max-width 0.5s var(--tq-ease), background-color 0.3s ease;
}
.pc-fit i {
  flex-shrink: 0;
  font-size: 12px;
}
.pc-fit span {
  opacity: 0;
  transition: opacity 0.3s ease 0.1s;
}
.part-card:hover .pc-fit,
.part-card:focus-within .pc-fit {
  max-width: 280px;
  transform: none;
}
.part-card:hover .pc-fit span,
.part-card:focus-within .pc-fit span {
  opacity: 1;
}
.fit-yes .pc-fit {
  background: var(--tq-fit);
  transform: none;
}
.fit-no .pc-fit {
  background: #5A5E66;
}
/* the compact card's badge sits in its photo corner */
.pc-fit.is-mini {
  top: 10px;
  bottom: auto;
  left: 10px;
  max-width: 28px;
  height: 26px;
  padding: 0 8px;
  font-size: 10.5px;
  opacity: 0;
  transform: none;
  transition: opacity 0.3s ease, max-width 0.5s var(--tq-ease);
}
.part-mini:hover .pc-fit.is-mini,
.part-mini.fit-yes .pc-fit.is-mini {
  opacity: 1;
}
.part-mini:hover .pc-fit.is-mini {
  max-width: 90px;
  transform: none;
}
.part-mini:hover .pc-fit.is-mini span {
  opacity: 1;
}
.part-mini.fit-yes .pc-fit.is-mini {
  transform: none;
}

/*----- 7.3 Bolt In -----*/
/* four corner bolts that tighten in a star pattern as a card lands, then fall away */
.tq-bolt {
  position: relative;
}
.tq-bolts {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}
.tq-bolts i {
  position: absolute;
  width: 15px;
  height: 15px;
  clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%);
  background: radial-gradient(circle at 50% 50%, #2E3236 0 2.4px, rgba(46, 50, 54, 0.4) 2.9px, transparent 3.4px),
    linear-gradient(135deg, #F4F6F8 0%, #B9C0C6 45%, #6E757C 100%);
}
.tq-bolts i:nth-child(1) {
  top: 9px;
  left: 9px;
}
.tq-bolts i:nth-child(2) {
  right: 9px;
  bottom: 9px;
}
.tq-bolts i:nth-child(3) {
  top: 9px;
  right: 9px;
}
.tq-bolts i:nth-child(4) {
  bottom: 9px;
  left: 9px;
}

/*----- 7.4 Ruled Grids & Rails -----*/
.part-grid,
.mini-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
  border-top: 1px solid var(--tq-line);
  border-left: 1px solid var(--tq-line);
}
.part-grid > *,
.mini-grid > * {
  border-right: 1px solid var(--tq-line);
  border-bottom: 1px solid var(--tq-line);
}
.part-grid > .pg-cell > .part-card {
  height: 100%;
}
.cols-3 {
  --cols: 3;
}
.cols-4 {
  --cols: 4;
}
.cols-5 {
  --cols: 5;
}
.cols-6 {
  --cols: 6;
}
.part-rail {
  border-left: 1px solid var(--tq-line);
}
/* a slider inside a grid or flex cell: without a width and no auto margins it grows to its content's size */
.part-rail,
.cat-rail {
  width: 100%;
  min-width: 0;
  margin: 0;
}
.part-rail .swiper-slide {
  height: auto;
}
.part-rail .part-card {
  border: 1px solid var(--tq-line);
  border-left: 0;
}
.tq-arrows {
  display: inline-flex;
  gap: 4px;
}
.tq-arrows button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 32px;
  background: var(--tq-smoke);
  color: var(--tq-heading);
  font-size: 12px;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.tq-bg-smoke .tq-arrows button {
  background: var(--tq-surface);
}
.tq-arrows button:hover {
  background: var(--tq-red);
  color: #FFFFFF;
}
.tq-arrows button.swiper-button-disabled {
  opacity: 0.4;
  cursor: default;
}

/*----- 7.5 Compact Cards -----*/
.part-mini {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  height: 100%;
  padding: 18px 54px 18px 18px;
  background: var(--tq-surface);
}
.pm-img {
  position: relative;
  flex-shrink: 0;
  width: 104px;
  background: var(--tq-product);
}
.pm-img img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  transition: transform 0.5s var(--tq-ease);
}
.part-mini:hover .pm-img img {
  transform: scale(1.06);
}
.pm-body {
  min-width: 0;
}
.pm-body .pc-flag {
  position: static;
  display: inline-block;
  margin-bottom: 6px;
}
.pm-body .pc-name {
  margin: 4px 0 10px;
  font-size: 14.5px;
}
.pm-body .pc-price b {
  font-size: 19px;
}
.pm-tools {
  position: absolute;
  top: 14px;
  right: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pm-tools button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--tq-heading);
  font-size: 14px;
  transition: color 0.3s ease;
}
.pm-tools button:hover,
.pm-tools button.is-on {
  color: var(--tq-red-text);
}

/*----- 7.6 Category Tiles -----*/
.cat-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  border-top: 1px solid var(--tq-line);
  border-left: 1px solid var(--tq-line);
}
.cat-tiles.n-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.cat-tiles.n-8 {
  grid-template-columns: repeat(8, minmax(0, 1fr));
}
.cat-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 168px;
  padding: 22px 20px 20px;
  border-right: 1px solid var(--tq-line);
  border-bottom: 1px solid var(--tq-line);
  background: var(--tq-surface);
}
.cat-tile .ct-ico {
  width: 50px;
  height: 50px;
  margin-bottom: auto;
  transition: transform 0.4s var(--tq-ease);
}
.cat-tile .ct-name {
  margin-top: 18px;
  color: var(--tq-heading);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.cat-tile .ct-count {
  color: var(--tq-muted);
  font-family: var(--tq-ff-num);
  font-size: 13px;
  font-weight: 500;
}
.cat-tile:hover {
  background: var(--tq-smoke);
}
.cat-tile:hover .ct-ico {
  transform: translateY(-4px);
}
.cat-tile:hover .ct-name {
  color: var(--tq-red-text);
}
.cat-tile.is-tall {
  min-height: 190px;
  border: 1px solid var(--tq-line);
}
.cat-rail .swiper-slide {
  height: auto;
}
.cat-rail .cat-tile {
  height: 100%;
}


/*----- 7.7 Shop By Make -----*/
.make-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--tq-line);
  background: var(--tq-line);
}
.make-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 170px;
  padding: 26px 26px 24px;
  background: var(--tq-surface);
}
.make-tile .mt-name {
  color: var(--tq-heading);
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.make-tile .mt-models {
  color: var(--tq-muted);
  font-size: 14px;
}
.make-tile .mt-meta {
  margin-top: auto;
  color: var(--tq-text);
  font-family: var(--tq-ff-num);
  font-size: 14px;
  font-weight: 500;
}
.make-tile .mt-meta b {
  color: var(--tq-red-text);
  font-weight: 600;
}
.make-tile > i {
  position: absolute;
  top: 26px;
  right: 24px;
  color: var(--tq-red-text);
  font-size: 13px;
  transition: transform 0.35s var(--tq-ease);
}
.make-tile:hover {
  background: var(--tq-red);
  color: #FFFFFF;
}
.make-tile:hover .mt-name,
.make-tile:hover .mt-models,
.make-tile:hover .mt-meta,
.make-tile:hover .mt-meta b,
.make-tile:hover > i {
  color: #FFFFFF;
}
.make-tile:hover > i {
  transform: translateX(4px);
}

/*----- 7.8 Vehicle Selector -----*/
.tq-selector .vs-fields {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
}
.tq-selector label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  color: var(--tq-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.tq-selector .vs-num {
  color: var(--tq-red-text);
  font-family: var(--tq-ff-num);
  font-size: 13px;
  font-weight: 600;
}
.tq-selector .vs-step.is-set label::after {
  content: "\f00c";
  margin-left: auto;
  color: var(--tq-fit-text);
  font-family: "Font Awesome 6 Free";
  font-size: 11px;
  font-weight: 900;
}
.tq-selector .vs-step .select-button {
  background: var(--tq-surface);
  font-weight: 500;
}
.tq-selector .vs-go {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 22px;
}
.tq-selector .vs-count {
  margin: 0;
  color: var(--tq-text);
  font-size: 15px;
}
.tq-selector .vs-count b {
  margin-right: 4px;
  color: var(--tq-heading);
  font-family: var(--tq-ff-num);
  font-size: 30px;
  font-weight: 600;
  line-height: 1;
  vertical-align: -3px;
}
.tq-selector.is-ready .vs-count b {
  color: var(--tq-fit-text);
}
/* the band: one row, four steps and the button */
.tq-selector.is-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  align-items: end;
  gap: 1px;
}
.tq-selector.is-band .vs-go {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin-top: 0;
}
.tq-selector.is-band .vs-count {
  text-align: right;
}
.tq-selector.is-band .vs-submit {
  height: 56px;
}
/* the panel: stacked, on a night ground */
.tq-selector.is-panel .vs-fields {
  grid-template-columns: 1fr;
  gap: 14px;
}
.tq-selector.is-panel .vs-step .select-button {
  background: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
}
.tq-selector.is-panel .vs-go {
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
}
.tq-selector.is-panel .vs-submit {
  width: 100%;
}
/* the finder page: two by two */
.tq-selector.is-page .vs-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

/*----- 7.9 Promo Banners -----*/
/* the base's half banners: smoke, red or ink, a big caps name, a price and a button */
.promo {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 320px;
  padding: 50px 54px;
  overflow: hidden;
  isolation: isolate;
  background: var(--tq-smoke);
}
.promo .pr-copy {
  position: relative;
  z-index: 2;
  max-width: 300px;
}
.promo .tq-eyebrow::before {
  display: none;
}
.promo .pr-name {
  font-size: clamp(28px, 2.4vw, 40px);
  line-height: 1;
}
.promo .pr-price {
  display: block;
  margin: 18px 0 26px;
  color: var(--tq-heading);
  font-family: var(--tq-ff-num);
  font-size: 34px;
  font-weight: 500;
  line-height: 1;
}
.promo .pr-img {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 1;
  width: 58%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  transition: transform 0.8s var(--tq-ease);
}
.promo .pr-img.is-cut {
  right: 26px;
  bottom: 50%;
  width: auto;
  max-width: 48%;
  height: auto;
  max-height: 82%;
  object-fit: contain;
  transform: translateY(50%);
}
.promo:hover .pr-img {
  transform: scale(1.04);
}
.promo:hover .pr-img.is-cut {
  transform: translateY(50%) scale(1.05);
}
.promo.is-red {
  background: var(--tq-red);
  --tq-heading: #FFFFFF;
  --tq-text: rgba(255, 255, 255, 0.9);
  --tq-red-text: #FFFFFF;
  color: var(--tq-text);
}
.promo.is-red .tq-btn {
  background: #FFFFFF;
  color: var(--tq-ink);
}
.promo.is-red .tq-btn:hover {
  background: var(--tq-ink);
  color: #FFFFFF;
}
.promo.is-ink {
  background: var(--tq-night);
  --tq-heading: #FFFFFF;
  --tq-text: rgba(255, 255, 255, 0.8);
  --tq-red-text: #FF5A4F;
  color: var(--tq-text);
}
.promo.is-ink .pr-img:not(.is-cut) {
  width: 64%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 38%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 38%);
}

/*----- 7.10 Tabs -----*/
.tq-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 26px;
}
.tq-tabs button {
  position: relative;
  padding: 6px 0;
  color: var(--tq-text);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: color 0.3s ease;
}
.tq-tabs button::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--tq-red);
  transform: scaleX(0);
  transition: transform 0.35s var(--tq-ease);
}
.tq-tabs button:hover,
.tq-tabs button.is-active {
  color: var(--tq-heading);
}
.tq-tabs button.is-active::after {
  transform: scaleX(1);
}

/*----- 7.11 Journal Cards -----*/
.post-card {
  position: relative;
  height: 100%;
}
.post-img {
  display: block;
  overflow: hidden;
  margin-bottom: 20px;
}
.post-img img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 0.7s var(--tq-ease);
}
.post-card:hover .post-img img {
  transform: scale(1.05);
}
.post-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  color: var(--tq-muted);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.post-meta a {
  color: var(--tq-heading);
}
.post-meta span {
  width: 14px;
  height: 2px;
  background: var(--tq-red);
}
.post-title {
  margin-bottom: 10px;
  font-size: 17px;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.post-card p {
  font-size: 15px;
}

/*----- 7.12 Team Cards -----*/
.team-card {
  position: relative;
  height: 100%;
}
.tm-img {
  display: block;
  overflow: hidden;
  background: var(--tq-smoke);
}
.tm-img img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.6s var(--tq-ease);
  transform-origin: center top;
}
.team-card:hover .tm-img img {
  transform: scale(1.05);
}
.tm-body {
  padding-top: 16px;
}
.tm-role {
  color: var(--tq-red-text);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.tm-name {
  margin: 4px 0 6px;
  font-size: 17px;
}
.tm-focus {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 10px;
  margin: 0;
  padding-top: 8px;
  border-top: 1px solid var(--tq-line);
  color: var(--tq-text);
  font-size: 13.5px;
  line-height: 1.4;
}
.tm-focus .tq-num {
  color: var(--tq-red-text);
}

/*----- 7.13 Garage & Service Cards -----*/
.garage-card,
.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--tq-surface);
  border: 1px solid var(--tq-line);
}
.gc-img,
.sv-img {
  position: relative;
  display: block;
  overflow: hidden;
}
.gc-img img,
.sv-img img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 0.7s var(--tq-ease);
}
.garage-card:hover .gc-img img,
.service-card:hover .sv-img img {
  transform: scale(1.05);
}
.gc-open {
  position: absolute;
  top: 14px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--tq-ink);
  color: #FFFFFF;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.gc-open i {
  font-size: 8px;
  color: #8E9198;
}
.gc-open.is-open i {
  color: #3DDC8A;
}
.gc-open.is-closed i {
  color: #FF5A4F;
}
.gc-body,
.sv-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 24px 26px 26px;
}
.gc-city {
  color: var(--tq-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.gc-city i {
  color: var(--tq-red-text);
}
.gc-name,
.sv-name {
  margin: 6px 0 16px;
  font-size: 19px;
}
.gc-body .tq-link,
.sv-body .tq-link {
  margin-top: 22px;
}
.sv-ico {
  width: 46px;
  height: 46px;
  margin-bottom: 12px;
}

/*----- 7.14 Bundles & Reviews -----*/
.bundle-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 30px;
  background: var(--tq-surface);
  border: 1px solid var(--tq-line);
}
.bd-off {
  align-self: flex-start;
  margin-bottom: 14px;
  padding: 5px 10px;
  background: var(--tq-red);
  color: #FFFFFF;
  font-family: var(--tq-ff-num);
  font-size: 13px;
  font-weight: 600;
}
.bd-name {
  margin-bottom: 18px;
  font-size: 20px;
}
.bd-items li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
  border-top: 1px solid var(--tq-line);
  font-size: 14px;
  line-height: 1.35;
}
.bd-items img {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  object-fit: contain;
  background: var(--tq-product);
}
.bd-items span {
  flex: 1;
  color: var(--tq-heading);
}
.bd-items b {
  font-family: var(--tq-ff-num);
  font-weight: 600;
}
.bd-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--tq-line);
}
.review-card {
  height: 100%;
  margin: 0;
  padding: 34px 32px 30px;
  background: var(--tq-surface);
}
.review-card blockquote {
  margin: 16px 0 24px;
}
.review-card blockquote p {
  color: var(--tq-heading);
  font-size: 17px;
  line-height: 1.6;
}
.review-card figcaption {
  display: flex;
  align-items: center;
  gap: 14px;
}
.review-card figcaption span {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
}
.review-card figcaption b {
  color: var(--tq-heading);
  font-size: 15px;
  text-transform: uppercase;
}
.review-card figcaption small {
  color: var(--tq-muted);
  font-size: 13.5px;
}

/*======================
8. Home One
========================*/
/*----- 8.1 Hero Slider -----*/
/* the base's slide: a wide car photograph under a dark wash, the copy on the left,
   the part cut out on a red stripe at the right edge */
.tq-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
/* every slide as tall as the tallest, so the arrows and the counter sit on the photograph */
.hero-slider .swiper-slide {
  height: auto;
  align-self: stretch;
  position: relative;
  display: flex;
  align-items: center;
  min-height: 620px;
  overflow: hidden;
  isolation: isolate;
  background: var(--tq-night);
}
.hero-slider .hero-img {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 30% center;
}
.hero-slider .swiper-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(90deg, rgba(13, 13, 13, 0.92) 0%, rgba(13, 13, 13, 0.7) 38%, rgba(13, 13, 13, 0.15) 70%, rgba(13, 13, 13, 0) 100%);
}
.hero-stripe {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  width: 21%;
  background: var(--tq-red);
}
.hero-part {
  position: absolute;
  right: 9%;
  top: 50%;
  z-index: 1;
  width: min(30vw, 470px);
  height: auto;
  transform: translateY(-50%);
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.45));
}
.hero-part.is-wheel {
  width: min(28vw, 430px);
}
.hero-part.is-oil {
  width: min(24vw, 360px);
}
.hero-copy {
  position: relative;
  z-index: 2;
  max-width: 640px;
  padding: 90px 0 100px;
}
.hero-title {
  margin-bottom: 22px;
  font-size: var(--tq-fs-h1);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.03em;
}
.hero-title span {
  display: block;
  white-space: nowrap;
}
.hero-price {
  margin: 0 0 32px;
  color: #FFFFFF;
  font-family: var(--tq-ff-num);
  font-size: 46px;
  font-weight: 500;
  line-height: 1;
}
.hero-price small {
  margin-right: 6px;
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--tq-ff-body);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.hero-copy .tq-faces {
  margin-top: 36px;
}
.hero-arrow {
  position: absolute;
  top: 50%;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-top: -23px;
  color: #FFFFFF;
  font-size: 18px;
  transition: color 0.3s ease, background-color 0.3s ease;
}
.hero-arrow:hover {
  background: rgba(255, 255, 255, 0.12);
}
/* the arrows flank the counter at the foot of the slide, clear of the copy at every width */
.hero-prev,
.hero-next {
  top: auto;
  bottom: 14px;
  margin-top: 0;
}
.hero-prev {
  left: calc(50% - 100px);
}
.hero-next {
  right: calc(50% - 100px);
}
.hero-count {
  position: absolute;
  left: 50%;
  bottom: 26px;
  z-index: 5;
  color: rgba(255, 255, 255, 0.7);
  font-size: 15px;
  transform: translateX(-50%);
}
.hero-count span:first-child {
  color: #FFFFFF;
}

/*----- 8.2 Vehicle Band -----*/
.vehicle-band {
  position: relative;
  isolation: isolate;
  padding: 50px 0 46px;
}
.vb-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 26px;
}
.vb-head h2 {
  font-size: 30px;
}
.vb-note {
  margin: 0;
  color: var(--tq-text);
  font-size: 14.5px;
}
.vb-note i {
  margin-right: 6px;
  color: var(--tq-red-text);
}

/*----- 8.3 Promo Split -----*/
.promo-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.promo-split .promo {
  min-height: 420px;
  padding: 60px 60px 60px max(40px, calc((100vw - 1320px) / 2 + 12px));
}
.promo-split .promo + .promo {
  padding-left: 60px;
}

/*----- 8.4 Brake Moment -----*/
.brake-moment {
  overflow: hidden;
}
.bm-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 760 / 640;
}
.bm-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.bm-pad,
.bm-caliper {
  will-change: transform;
}
.bm-tag {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--tq-surface);
  box-shadow: var(--tq-shadow);
  color: var(--tq-heading);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.bm-tag b {
  color: var(--tq-red-text);
}
.bm-tag small {
  color: var(--tq-muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.bm-tag.is-disc {
  left: 2%;
  bottom: 12%;
}
.bm-tag.is-pad {
  right: 4%;
  bottom: 18%;
}
.bm-tag.is-caliper {
  right: 2%;
  top: 6%;
}
.bm-copy h2 {
  margin-bottom: 18px;
}
.bm-copy .tq-lead {
  margin-bottom: 26px;
}
.bm-fit {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 22px 0 0;
  padding: 12px 16px;
  background: var(--tq-surface);
  color: var(--tq-heading);
  font-size: 14.5px;
  font-weight: 600;
}
.bm-fit i {
  color: var(--tq-red-text);
}
.bm-fit.is-yes i {
  color: var(--tq-fit-text);
}
.bm-buy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 26px;
}
.bm-buy .pc-price b {
  font-size: 34px;
}

/*----- 8.5 Fitting Band -----*/
.fitting-band h2 {
  margin-bottom: 18px;
}
.fitting-band .tq-lead {
  margin-bottom: 30px;
}
.fb-rows dd {
  font-size: 20px;
}

/*----- 8.6 Bundles -----*/
.bundle-row {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
}
.bundle-lead {
  display: flex;
  flex-direction: column;
  padding: 34px 30px;
}
.bundle-lead .tq-eyebrow::before {
  background: #FFFFFF;
}
.bl-name {
  font-size: 26px;
  line-height: 1.05;
}
.bl-price {
  margin: 22px 0 10px;
  color: #FFFFFF;
  font-size: 40px;
  line-height: 1;
}
.bl-note {
  font-size: 14.5px;
}
.bundle-lead .tq-link {
  margin-top: auto;
  color: #FFFFFF;
}
.bundle-lead .tq-link i {
  color: #FFFFFF;
}
.bundle-row .part-rail {
  min-width: 0;
}

/*----- 8.7 Reviews Band -----*/
.rating-card {
  height: 100%;
  padding: 34px 32px;
  background: var(--tq-ink);
  color: rgba(255, 255, 255, 0.78);
  --tq-heading: #FFFFFF;
}
.rating-card h2 {
  margin: 4px 0 14px;
  font-size: 34px;
}
.rating-card h2 .tq-num {
  color: var(--tq-red);
  font-size: 1.3em;
}
.rating-card .tq-stars {
  margin-bottom: 16px;
  font-size: 15px;
}
.rating-card p b {
  color: #FFFFFF;
}
.rating-card .tq-faces {
  margin-top: 18px;
}
.rating-card .tq-faces .f-row img {
  border-color: var(--tq-ink);
}

/*======================
9. Home Two
========================*/
/*----- 9.1 Wide Container -----*/
/* Home 2 follows the base's shop home: a wider page */

/*----- 9.2 Hero With Vehicle Panel -----*/
.hero-two {
  padding: 26px 0 0;
}
.h2-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 16px;
}
.h2-slider-wrap {
  position: relative;
  min-width: 0;
  overflow: hidden;
}
/* the slider fills the row the vehicle panel sets */
.h2-slider-wrap > .hero-slider,
.h2-slider-wrap .swiper-wrapper {
  height: 100%;
}
.h2-slider-wrap .swiper-slide {
  height: auto;
}
.hero-two .hero-slider .swiper-slide {
  min-height: 560px;
  background: #F1F1F1;
}
.hero-two .hero-slider .swiper-slide::after {
  display: none;
}
.hero-two .hero-img {
  object-position: center;
}
.hero-two .hero-img.is-right {
  object-position: right center;
}
.h2-pack {
  position: absolute;
  right: 6%;
  top: 50%;
  width: min(36%, 470px);
  height: auto;
  mix-blend-mode: multiply;
  transform: translateY(-50%);
}
.hero-two .hero-copy {
  max-width: 520px;
  padding: 70px 60px;
  --tq-heading: #0D0D0D;
  --tq-text: #4E5157;
  --tq-red-text: #D10000;
  color: #4E5157;
}
.hero-two .hero-title {
  font-size: clamp(40px, 4vw, 68px);
}
.h2-off .tq-num {
  color: #E20100;
  font-size: 1.25em;
  font-weight: 600;
}
.h2-lead {
  margin-bottom: 30px;
  font-size: 17px;
}
.hero-two .hero-arrow {
  color: #0D0D0D;
}
.hero-two .hero-arrow:hover {
  background: rgba(13, 13, 13, 0.06);
}
.hero-two .hero-count {
  color: rgba(13, 13, 13, 0.55);
}
.hero-two .hero-count span:first-child {
  color: #0D0D0D;
}
.h2-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 34px 30px;
}
.h2-panel h2 {
  margin-bottom: 24px;
}
.h2-panel .tq-selector label {
  color: rgba(255, 255, 255, 0.82);
}
.h2-panel .tq-selector .vs-count {
  color: rgba(255, 255, 255, 0.76);
}
.h2-panel-note {
  margin: 18px 0 0;
  font-size: 13.5px;
}
.h2-panel-note i {
  margin-right: 6px;
  color: var(--tq-red-text);
}

/*----- 9.3 Promo Pair & Trio -----*/
.promo-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.promo-trio {
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr;
  gap: 16px;
}
.promo-trio .promo {
  min-height: 300px;
  align-items: flex-start;
  padding: 40px 36px;
}
.promo-trio .pr-name {
  font-size: clamp(24px, 1.9vw, 32px);
}
.promo-trio .pr-price {
  margin: 14px 0 20px;
  font-size: 30px;
}
.promo .pr-img.is-pack {
  mix-blend-mode: multiply;
  top: auto;
  bottom: 18px;
  right: 18px;
  max-width: 52%;
  max-height: 64%;
  transform: none;
}
.promo:hover .pr-img.is-pack {
  transform: scale(1.05);
}

/*----- 9.4 Cascade Band -----*/
.cascade-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.cascade-band h2 {
  margin-bottom: 18px;
}
.cs-count {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 16px;
}
.cs-count b {
  color: #FFFFFF;
  font-size: clamp(90px, 9vw, 150px);
  line-height: 0.9;
}
.cs-count span {
  max-width: 160px;
  color: rgba(255, 255, 255, 0.76);
  font-size: 17px;
  line-height: 1.3;
}
.cs-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: 56px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.cs-steps li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 26px 26px 24px;
  background: var(--tq-night);
  transition: background-color 0.4s ease;
}
.cs-num {
  color: rgba(255, 255, 255, 0.4);
  font-size: 15px;
}
.cs-steps small {
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.cs-steps b {
  color: rgba(255, 255, 255, 0.45);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
}
.cs-steps em {
  min-height: 20px;
  color: #3DDC8A;
  font-family: var(--tq-ff-num);
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
}
.cs-steps li.is-set {
  background: #1B1B1D;
}
.cs-steps li.is-set .cs-num {
  color: #FF5A4F;
}
.cs-steps li.is-set b {
  color: #FFFFFF;
}
.cs-steps li.is-next::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--tq-red);
}
.cs-bar {
  position: relative;
  height: 4px;
  margin-top: 0;
  background: rgba(255, 255, 255, 0.08);
}
.cs-bar span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--tq-red);
  transition: width 0.5s var(--tq-ease);
}
.cs-go {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px;
  margin-top: 40px;
}
.cs-go .tq-link {
  color: #FFFFFF;
}

/*----- 9.5 Tuning Feature -----*/
.tf-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: 60px;
}
.tf-copy h2 {
  margin-bottom: 18px;
}
.tf-copy .tq-lead {
  margin-bottom: 26px;
}
.tf-copy .tq-btn {
  margin-top: 30px;
}
.tf-img {
  overflow: hidden;
}
.tf-img img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 7;
  object-fit: cover;
  transition: transform 0.8s var(--tq-ease);
}
.tf-img:hover img {
  transform: scale(1.04);
}

/*======================
10. Home Three
========================*/
/*----- 10.1 Night Hero -----*/
/* a taller night slide: the photograph under a heavier wash, a red slab cut on the
   slant behind the part, the copy larger */
.hero-three .hero-slider .swiper-slide {
  min-height: 720px;
}
.hero-three .hero-slider .swiper-slide::after {
  background: linear-gradient(90deg, rgba(13, 13, 13, 0.95) 0%, rgba(13, 13, 13, 0.82) 45%, rgba(13, 13, 13, 0.45) 100%);
}
.h3-slab {
  position: absolute;
  top: 0;
  right: -6%;
  bottom: 0;
  z-index: -1;
  width: 34%;
  background: linear-gradient(180deg, var(--tq-red) 0%, var(--tq-red-deep) 100%);
  transform: skewX(-12deg);
  transform-origin: 0 100%;
}
.hero-three .hero-part {
  right: 8%;
  width: min(34vw, 540px);
}
.hero-three .hero-part.is-wheel {
  width: min(32vw, 500px);
}
.hero-three .hero-title {
  font-size: clamp(46px, 5.4vw, 92px);
}
.h3-lead {
  max-width: 500px;
  margin-bottom: 34px;
  font-size: 18px;
}

/*----- 10.2 Turbo Band -----*/
.turbo-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.turbo-band h2 {
  margin-bottom: 18px;
}
.turbo-band .tq-lead {
  margin-bottom: 26px;
}
.turbo-band .bm-fit {
  background: rgba(255, 255, 255, 0.06);
  color: #FFFFFF;
}
.tb-stage {
  position: relative;
  width: 100%;
  max-width: 620px;
  aspect-ratio: 900 / 790;
}
.tb-impeller {
  position: absolute;
  left: 10.6%;
  top: 10.9%;
  width: 67.6%;
  height: auto;
  will-change: transform;
}
.tb-housing {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.tb-gauge {
  position: absolute;
  right: 0;
  bottom: 4%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 190px;
  padding: 16px 18px;
  background: rgba(13, 13, 13, 0.82);
  border-top: 3px solid var(--tq-red);
}
.tb-read {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
}
.tb-read b {
  color: #FFFFFF;
  font-size: 34px;
  line-height: 1;
}
.tb-bar {
  position: relative;
  display: block;
  height: 4px;
  background: rgba(255, 255, 255, 0.12);
}
.tb-bar span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--tq-red);
}
.tb-gauge small {
  color: rgba(255, 255, 255, 0.6);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/*----- 10.3 Deal Band -----*/
.deal-band h2 {
  margin-bottom: 14px;
}
.deal-clock {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}
.deal-clock span {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 96px;
  padding: 16px 10px 12px;
  background: rgba(13, 13, 13, 0.2);
}
.deal-clock b {
  color: #FFFFFF;
  font-size: 46px;
  line-height: 1;
}
.deal-clock small {
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.deal-card {
  max-width: 340px;
  margin-left: auto;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.25);
  --tq-heading: #0D0D0D;
  --tq-text: #4E5157;
  --tq-muted: #6B6E74;
  --tq-red-text: #D10000;
}
[data-theme="dark"] .deal-card {
  --tq-heading: #F4F4F4;
  --tq-text: #B8BBC1;
  --tq-muted: #8E9198;
  --tq-red-text: #FF5A4F;
}

/*----- 10.4 Hours Card -----*/
.hours-card {
  position: relative;
  padding: 30px 30px 26px;
  background: rgba(13, 13, 13, 0.7);
}
.hours-card .gc-open {
  position: static;
  margin-bottom: 18px;
}

/*======================
11. Shop Pages
========================*/
/*----- 11.1 Sidebar -----*/
.side-stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.side-box {
  margin-bottom: 24px;
  padding: 26px 24px;
  background: var(--tq-smoke);
}
.side-stack .side-box {
  margin-bottom: 0;
}
.side-title {
  margin-bottom: 16px;
  font-size: 14px;
  letter-spacing: 0.02em;
}
.side-box .tq-field {
  margin-bottom: 0;
}
.side-box .tq-input {
  background: var(--tq-surface);
}
.side-box.is-vehicle .sv-car {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
  color: var(--tq-heading);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
}
.side-box.is-vehicle .sv-car i {
  margin-top: 3px;
  color: var(--tq-red-text);
}
.side-box.is-vehicle .tq-check {
  margin-bottom: 14px;
}
.side-box.is-ink {
  margin-top: 24px;
  background: var(--tq-ink);
  color: rgba(255, 255, 255, 0.78);
  --tq-heading: #FFFFFF;
}
.side-box.is-ink h3 {
  margin-bottom: 10px;
}
.side-cats li + li,
.side-brands li + li {
  margin-top: 2px;
}
.side-cats button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 8px 0;
  color: var(--tq-text);
  font-size: 15px;
  text-align: left;
  transition: color 0.3s ease;
}
.side-cats button b,
.side-brands b {
  min-width: 28px;
  padding: 1px 6px;
  background: var(--tq-surface);
  color: var(--tq-muted);
  font-family: var(--tq-ff-num);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}
.side-cats button:hover,
.side-cats button.is-active {
  color: var(--tq-red-text);
}
.side-cats button.is-active {
  font-weight: 600;
}
.side-cats button.is-active b {
  background: var(--tq-red);
  color: #FFFFFF;
}
.side-brands .tq-check {
  align-items: center;
  padding: 6px 0;
}
.side-brands .tq-check input {
  margin-top: 0;
}
.side-brands .tq-check span {
  flex: 1;
}
.side-range {
  display: block;
  margin-bottom: 10px;
  color: var(--tq-text);
  font-size: 14.5px;
}
.side-range output {
  color: var(--tq-heading);
  font-family: var(--tq-ff-num);
  font-weight: 600;
}
.tq-range {
  width: 100%;
  margin-bottom: 22px;
  accent-color: var(--tq-red);
}
.side-banner {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 380px;
  padding: 30px 26px;
}
.side-banner .sb-name {
  color: #FFFFFF;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.side-banner .sb-price {
  margin: 12px 0 8px;
  color: #FFFFFF;
  font-size: 30px;
}
.side-banner .tq-link {
  margin-top: 12px;
  color: #FFFFFF;
}
.side-links li + li {
  border-top: 1px solid var(--tq-line);
}
.side-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 0;
  color: var(--tq-text);
  font-size: 15px;
}
.side-links a i {
  color: var(--tq-red-text);
  font-size: 10px;
}
.side-links a:hover,
.side-links a.is-current {
  color: var(--tq-red-text);
}
.side-links b {
  color: var(--tq-muted);
  font-size: 13px;
}
.side-recent li + li {
  margin-top: 14px;
}
.side-recent a {
  display: flex;
  align-items: center;
  gap: 14px;
}
.side-recent img {
  flex-shrink: 0;
  width: 76px;
  height: 64px;
  object-fit: cover;
}
.side-recent span {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.side-recent small {
  color: var(--tq-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.side-recent b {
  color: var(--tq-heading);
  font-size: 14.5px;
  font-weight: 600;
}
.side-recent a:hover b {
  color: var(--tq-red-text);
}
.side-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.side-tags a {
  padding: 6px 12px;
  background: var(--tq-surface);
  color: var(--tq-text);
  font-size: 13px;
  font-weight: 600;
}
.side-tags a:hover {
  background: var(--tq-red);
  color: #FFFFFF;
}

/*----- 11.2 Shop Grid -----*/
.shop-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}
.shop-bar p {
  margin: 0;
  color: var(--tq-text);
}
.shop-bar p b {
  color: var(--tq-heading);
  font-size: 20px;
}
.sb-sort {
  display: flex;
  align-items: center;
  gap: 12px;
}
.sb-sort label {
  color: var(--tq-muted);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.sb-sort .tq-select {
  width: 230px;
}
.sb-sort .tq-select .select-button {
  height: 46px;
}
.tq-empty {
  padding: 60px 30px;
  background: var(--tq-smoke);
  text-align: center;
}
.tq-empty > i {
  margin-bottom: 16px;
  color: var(--tq-red-text);
  font-size: 34px;
}
.tq-empty p {
  margin-bottom: 20px;
  color: var(--tq-heading);
  font-size: 17px;
}

/*----- 11.3 Product Page -----*/
.pd-gallery {
  position: sticky;
  top: 120px;
}
.pd-main {
  position: relative;
  padding: 40px;
  border: 1px solid var(--tq-line);
  background: var(--tq-product);
}
.pd-main img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}
.pd-main .pc-flag {
  top: 18px;
  left: 18px;
}
.pd-thumbs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.pd-thumb {
  padding: 6px;
  border: 1px solid var(--tq-line);
  background: var(--tq-product);
  transition: border-color 0.3s ease;
}
.pd-thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}
.pd-thumb.is-active,
.pd-thumb:hover {
  border-color: var(--tq-red);
}
.pd-cat {
  color: var(--tq-muted);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pd-name {
  margin: 10px 0 14px;
  font-size: clamp(28px, 2.4vw, 40px);
}
.pd-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  font-size: 14px;
}
.pd-stock {
  color: var(--tq-fit-text);
  font-weight: 600;
}
.pd-stock.is-low {
  color: var(--tq-red-text);
}
.pd-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
  margin: 22px 0 18px;
}
.pd-price b {
  color: var(--tq-heading);
  font-size: 40px;
  line-height: 1;
}
.pd-price del {
  color: var(--tq-muted);
  font-size: 20px;
}
.pd-deal {
  padding: 5px 10px;
  background: var(--tq-red);
  color: #FFFFFF;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.pd-fit {
  margin: 0 0 20px;
  background: var(--tq-smoke);
}
.bm-fit.is-no i {
  color: var(--tq-red-text);
}
.pd-rows dd {
  font-size: 14px;
}
.pd-oe li {
  display: block;
}
.pd-buy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
}
.tq-qty {
  display: inline-flex;
  align-items: stretch;
  height: 54px;
  background: var(--tq-smoke);
}
.tq-qty button {
  width: 44px;
  color: var(--tq-heading);
  font-size: 12px;
}
.tq-qty button:hover {
  color: var(--tq-red-text);
}
.tq-qty input {
  width: 48px;
  border: 0;
  background: transparent;
  color: var(--tq-heading);
  font-family: var(--tq-ff-num);
  font-size: 17px;
  font-weight: 600;
  text-align: center;
  -moz-appearance: textfield;
}
.tq-qty input::-webkit-outer-spin-button,
.tq-qty input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.tq-qty.is-sm {
  height: 42px;
}
.tq-qty.is-sm button {
  width: 34px;
}
.tq-qty.is-sm input {
  width: 36px;
  font-size: 15px;
}
.pd-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  background: var(--tq-smoke);
  color: var(--tq-heading);
  font-size: 17px;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.pd-icon:hover,
.pd-icon.is-on {
  color: var(--tq-red-text);
}
.pd-service {
  margin-top: 28px;
  border: 1px solid var(--tq-line);
}
.ps-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
}
.ps-row + .ps-row {
  border-top: 1px solid var(--tq-line);
}
.ps-ico {
  width: 40px;
  height: 40px;
}
.ps-row p {
  flex: 1;
  margin: 0;
  font-size: 14.5px;
}
.ps-row p b {
  color: var(--tq-heading);
  font-family: var(--tq-ff-num);
}
.ps-dates {
  display: grid;
  flex: 1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
}
.ps-dates dt {
  color: var(--tq-muted);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ps-dates dd {
  margin: 0;
  color: var(--tq-heading);
  font-size: 14px;
  font-weight: 600;
}
.pd-tabs {
  margin-top: 80px;
}
.pd-tablist {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-bottom: 1px solid var(--tq-line);
}
.pd-tablist button {
  padding: 18px 30px;
  border: 1px solid var(--tq-line);
  border-bottom: 0;
  margin-right: -1px;
  color: var(--tq-heading);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.pd-tablist button.is-active {
  background: var(--tq-red);
  border-color: var(--tq-red);
  color: #FFFFFF;
}
.pd-panel {
  padding: 34px 0 0;
}
.pd-panel .tq-rows {
  max-width: 720px;
}
.tq-table-wrap {
  overflow-x: auto;
}
.tq-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.tq-table th,
.tq-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--tq-line);
  text-align: left;
  vertical-align: top;
}
.tq-table thead th {
  background: var(--tq-smoke);
  color: var(--tq-heading);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.tq-table tbody th {
  color: var(--tq-heading);
  font-weight: 600;
}

/*----- 11.4 Cart, Wishlist & Totals -----*/
.bag-lines {
  border-top: 1px solid var(--tq-line);
}
.bag-line {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) auto auto 40px;
  align-items: center;
  gap: 22px;
  padding: 20px 0;
  border-bottom: 1px solid var(--tq-line);
}
.bag-lines.is-wish .bag-line {
  grid-template-columns: 110px minmax(0, 1fr) auto 40px;
}
.bl-img {
  display: block;
  padding: 8px;
  border: 1px solid var(--tq-line);
  background: var(--tq-product);
}
.bl-img img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}
.bl-name {
  margin: 4px 0 6px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
}
.bl-price {
  display: block;
  color: var(--tq-text);
  font-size: 14px;
}
.bl-fit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 600;
}
.bl-fit.is-yes {
  color: var(--tq-fit-text);
}
.bl-fit.is-no {
  color: var(--tq-red-text);
}
.bl-total {
  color: var(--tq-heading);
  font-size: 18px;
}
.bl-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: var(--tq-smoke);
  color: var(--tq-heading);
  transition: background-color 0.3s ease, color 0.3s ease;
}
.bl-remove:hover {
  background: var(--tq-red);
  color: #FFFFFF;
}
.cart-coupon {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin-top: 30px;
}
.cart-coupon .tq-field {
  flex: 1;
  min-width: 220px;
  margin-bottom: 0;
}
.cart-coupon .form-status {
  flex-basis: 100%;
}
.tq-summary {
  position: sticky;
  top: 120px;
  padding: 30px 28px;
  background: var(--tq-smoke);
}
.sum-title {
  margin-bottom: 20px;
  font-size: 18px;
}
.sum-rows {
  margin-bottom: 22px;
}
.sum-rows li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--tq-line);
  font-size: 15px;
}
.sum-rows li[hidden] {
  display: none;
}
.sum-rows li b {
  color: var(--tq-heading);
  text-align: right;
}
.sum-rows li small {
  display: block;
  color: var(--tq-muted);
  font-size: 12px;
}
.sum-rows li.is-total {
  border-bottom: 0;
  font-size: 18px;
}
.sum-rows li.is-total b {
  color: var(--tq-red-text);
  font-size: 24px;
}
.sum-rows.is-stack li {
  flex-direction: column;
  gap: 2px;
}
.sum-rows.is-stack li span {
  color: var(--tq-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.sum-rows.is-stack li b {
  text-align: left;
}
.tq-summary .tq-btn + .tq-btn {
  margin-top: 10px;
}
.ship-meter {
  position: relative;
  height: 5px;
  background: var(--tq-surface);
}
.ship-meter span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--tq-fit);
  transition: width 0.6s var(--tq-ease);
}
.ship-note {
  margin: 10px 0 10px;
  font-size: 14px;
}
.ship-note b {
  color: var(--tq-heading);
}

/*----- 11.5 Checkout -----*/
.co-block + .co-block {
  margin-top: 40px;
}
.co-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
  font-size: 20px;
}
.co-title .tq-num {
  color: var(--tq-red-text);
}
.co-options {
  display: grid;
  gap: 10px;
}
.co-option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: var(--tq-smoke);
  cursor: pointer;
}
.co-option input {
  width: 18px;
  height: 18px;
  accent-color: var(--tq-red);
}
.co-option span {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
}
.co-option b {
  color: var(--tq-heading);
  font-size: 15px;
}
.co-option small {
  color: var(--tq-muted);
  font-size: 13.5px;
}
.co-option small .fab {
  font-size: 22px;
}
.co-terms {
  margin-top: 18px;
}
.order-lines {
  margin-bottom: 10px;
}
.order-lines li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--tq-line);
  font-size: 14.5px;
}
.ol-img {
  position: relative;
  flex-shrink: 0;
  width: 58px;
  height: 58px;
  background: var(--tq-product);
}
.ol-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.ol-img b {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 20px;
  height: 20px;
  border-radius: 10px;
  background: var(--tq-ink);
  color: #FFFFFF;
  font-family: var(--tq-ff-num);
  font-size: 11px;
  line-height: 20px;
  text-align: center;
}
.ol-name {
  flex: 1;
  color: var(--tq-heading);
}
.order-done {
  max-width: 680px;
  margin: 0 auto;
  padding: 60px 40px;
  background: var(--tq-smoke);
  text-align: center;
}
.order-done > i {
  margin-bottom: 18px;
  color: var(--tq-fit-text);
  font-size: 48px;
}
.order-done h3 {
  margin-bottom: 14px;
}
.order-done .tq-btns {
  justify-content: center;
  margin-top: 24px;
}

/*----- 11.6 Compare -----*/
.compare-table {
  min-width: 760px;
  table-layout: fixed;
}
.compare-table thead th,
.compare-table thead td {
  position: relative;
  background: transparent;
  vertical-align: bottom;
  text-transform: none;
  letter-spacing: 0;
}
.compare-table thead td {
  width: 200px;
}
.cp-img {
  display: block;
  margin-bottom: 12px;
  padding: 14px;
  border: 1px solid var(--tq-line);
  background: var(--tq-product);
}
.cp-img img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}
.cp-name {
  display: block;
  margin-top: 4px;
  color: var(--tq-heading);
  font-size: 15.5px;
  font-weight: 600;
}
.cp-remove {
  position: absolute;
  top: 8px;
  right: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: var(--tq-smoke);
  color: var(--tq-heading);
  font-size: 12px;
}
.cp-remove:hover {
  background: var(--tq-red);
  color: #FFFFFF;
}
.cp-price {
  color: var(--tq-heading);
  font-size: 20px;
}
.cp-price del {
  color: var(--tq-muted);
  font-size: 14px;
}
.cp-fit.is-yes {
  color: var(--tq-fit-text);
  font-weight: 600;
}
.cp-fit.is-no {
  color: var(--tq-red-text);
  font-weight: 600;
}
.cp-none {
  color: var(--tq-muted);
}
.compare-table tr.is-fit th,
.compare-table tr.is-fit td {
  background: var(--tq-smoke);
}

/*----- 11.7 Deals -----*/
.deal-item {
  position: relative;
  border: 1px solid var(--tq-line);
}
.di-clock {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--tq-ink);
}
.di-clock span {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 3px;
  padding: 12px 6px;
  background: var(--tq-ink);
  color: #FFFFFF;
}
.di-clock b {
  font-size: 20px;
}
.di-clock small {
  color: rgba(255, 255, 255, 0.6);
  font-size: 11px;
  font-weight: 700;
}
.coupon-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.coupon-band h2 {
  font-size: clamp(24px, 2.2vw, 34px);
}
.coupon-band p {
  margin: 0;
  font-size: 17px;
}
.coupon-band b {
  padding: 4px 10px;
  background: #FFFFFF;
  color: var(--tq-ink);
}

/*======================
12. Finder Pages
========================*/
/*----- 12.1 Parts Finder -----*/
.finder-panel {
  position: relative;
  padding: 36px 34px;
}
.finder-panel h2 {
  margin-bottom: 12px;
}
.finder-note {
  margin-bottom: 26px;
  font-size: 15px;
}
.finder-panel .tq-selector .vs-go {
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
}
.finder-panel .tq-selector .vs-submit {
  width: 100%;
}
.finder-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 26px;
}
.fh-count {
  margin: 0;
  color: var(--tq-heading);
  font-size: 20px;
  font-weight: 600;
}
.fh-count b {
  color: var(--tq-red-text);
  font-size: 56px;
  line-height: 1;
  vertical-align: -6px;
}
.finder-cats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--tq-line);
  border-left: 1px solid var(--tq-line);
}
.finder-cats li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 16px;
  border-right: 1px solid var(--tq-line);
  border-bottom: 1px solid var(--tq-line);
  color: var(--tq-heading);
  font-size: 13.5px;
  font-weight: 600;
  transition: opacity 0.3s ease, background-color 0.3s ease;
}
.finder-cats .tq-ico {
  width: 34px;
  height: 34px;
}
.finder-cats li span:nth-child(2) {
  flex: 1;
  line-height: 1.25;
}
.finder-cats b {
  color: var(--tq-red-text);
  font-size: 18px;
}
.finder-cats li.is-empty {
  opacity: 0.4;
}

/*----- 12.2 OE Search -----*/
.oe-panel {
  padding: 34px 30px;
}
.oe-panel h2 {
  margin-bottom: 22px;
}
.oe-hint {
  margin: 22px 0 10px;
  font-size: 14px;
}
.oe-tries {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.oe-try {
  padding: 7px 12px;
  background: var(--tq-surface);
  color: var(--tq-heading);
  font-family: var(--tq-ff-num);
  font-size: 13.5px;
  font-weight: 600;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.oe-try:hover {
  background: var(--tq-red);
  color: #FFFFFF;
}
.oe-help {
  margin-top: 26px;
}
.oe-state {
  margin-bottom: 22px;
  color: var(--tq-heading);
  font-size: 20px;
  letter-spacing: 0;
  text-transform: none;
}
.oe-result {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) 190px;
  gap: 26px;
  align-items: start;
  padding: 24px;
  border: 1px solid var(--tq-line);
}
.oe-result + .oe-result {
  border-top: 0;
}
.oe-img {
  display: block;
  padding: 10px;
  background: var(--tq-product);
  border: 1px solid var(--tq-line);
}
.oe-img img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}
.oe-name {
  margin: 4px 0 6px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.oe-match {
  margin: 0 0 8px;
  font-size: 14px;
}
.oe-match b {
  padding: 2px 8px;
  background: var(--tq-red);
  color: #FFFFFF;
}
.oe-fit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  font-size: 13.5px;
  font-weight: 600;
}
.oe-fit.is-yes {
  color: var(--tq-fit-text);
}
.oe-fit.is-no {
  color: var(--tq-red-text);
}
.oe-buy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.oe-buy .pc-price b {
  font-size: 26px;
}
.oe-guide {
  display: flex;
  gap: 22px;
  margin-top: 40px;
  padding: 28px;
  background: var(--tq-smoke);
}
.oe-ico {
  width: 54px;
  height: 54px;
}
.oe-guide h3 {
  margin-bottom: 8px;
}

/*----- 12.3 My Garage -----*/
.gp-n {
  color: var(--tq-red-text);
}
.car-list {
  display: grid;
  gap: 16px;
}
.car-card {
  position: relative;
  padding: 26px 28px;
  border: 1px solid var(--tq-line);
  background: var(--tq-surface);
}
.car-card.is-active {
  border-color: var(--tq-fit);
  box-shadow: inset 4px 0 0 var(--tq-fit);
}
.cc-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}
.cc-ico {
  width: 44px;
  height: 44px;
}
.cc-make {
  color: var(--tq-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.cc-name {
  font-size: 22px;
}
.cc-badge {
  margin-left: auto;
  padding: 5px 10px;
  background: var(--tq-fit);
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.cc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}
.why-card {
  height: 100%;
  padding: 34px 30px;
  background: var(--tq-surface);
}
.why-ico {
  width: 56px;
  height: 56px;
  margin-bottom: 18px;
}
.why-card h3 {
  margin-bottom: 10px;
}

/*----- 12.4 Track & Returns -----*/
.track-result {
  padding: 34px 32px;
  border: 1px solid var(--tq-line);
}
.tr-head h2 {
  margin: 4px 0 6px;
}
.track-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 30px 0;
}
.track-steps li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-right: 10px;
}
.track-steps li::before {
  content: "";
  position: absolute;
  top: 21px;
  left: 44px;
  right: 0;
  height: 2px;
  background: var(--tq-line);
}
.track-steps li:last-child::before {
  display: none;
}
.track-steps li.is-done::before {
  background: var(--tq-fit);
}
.ts-ico {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 8px;
  background: var(--tq-smoke);
  color: var(--tq-muted);
  font-size: 15px;
}
.track-steps li.is-done .ts-ico {
  background: var(--tq-fit);
  color: #FFFFFF;
}
.track-steps li.is-now .ts-ico {
  background: var(--tq-red);
  color: #FFFFFF;
}
.track-steps b {
  color: var(--tq-heading);
  font-size: 13.5px;
  line-height: 1.25;
  text-transform: uppercase;
}
.track-steps small {
  color: var(--tq-muted);
  font-size: 12.5px;
}
.tr-sub {
  margin-bottom: 12px;
}
.track-lines li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
  border-top: 1px solid var(--tq-line);
}
.track-lines img {
  width: 54px;
  height: 54px;
  object-fit: contain;
  background: var(--tq-product);
}
.track-lines span {
  flex: 1;
  color: var(--tq-heading);
}
.track-idle {
  padding: 50px 40px;
  background: var(--tq-smoke);
  text-align: center;
}
.track-idle .tq-ico {
  width: 64px;
  height: 64px;
  margin-bottom: 16px;
}
.track-idle h2 {
  margin-bottom: 12px;
}
.track-result:not([hidden]) + .track-idle {
  display: none;
}
.ret-form .tq-btn {
  margin-top: 10px;
}
.ret-rules {
  margin-top: 10px;
}

/*======================
13. Fitting Pages
========================*/
/*----- 13.1 Booking Wizard -----*/
.fw-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-bottom: 40px;
  background: var(--tq-line);
  border: 1px solid var(--tq-line);
}
.fw-steps button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 18px 20px;
  background: var(--tq-surface);
  color: var(--tq-muted);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-align: left;
  text-transform: uppercase;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.fw-steps .tq-num {
  font-size: 16px;
}
.fw-steps button.is-done {
  color: var(--tq-heading);
}
.fw-steps button.is-done .tq-num {
  color: var(--tq-fit-text);
}
.fw-steps button.is-on {
  background: var(--tq-red);
  color: #FFFFFF;
}
.fw-steps button.is-on .tq-num {
  color: #FFFFFF;
}
.fw-pane {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.fw-legend {
  float: none;
  width: auto;
  margin-bottom: 22px;
  padding: 0;
  color: var(--tq-heading);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.fw-choices {
  display: grid;
  gap: 10px;
}
.fw-choice {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border: 1px solid transparent;
  background: var(--tq-smoke);
  cursor: pointer;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}
.fw-choice input {
  width: 18px;
  height: 18px;
  accent-color: var(--tq-red);
}
.fw-choice:hover {
  border-color: var(--tq-line-2);
}
.fw-choice.is-on {
  border-color: var(--tq-red);
  background: var(--tq-surface);
}
.fw-ico {
  width: 40px;
  height: 40px;
}
.fw-txt {
  display: flex;
  flex: 1;
  flex-direction: column;
  line-height: 1.35;
}
.fw-txt b {
  color: var(--tq-heading);
  font-size: 15.5px;
}
.fw-txt small {
  color: var(--tq-muted);
  font-size: 13.5px;
}
.fw-txt small i {
  color: var(--tq-red-text);
}
.fw-txt .is-open {
  color: var(--tq-fit-text);
  font-weight: 600;
}
.fw-txt .is-closed {
  color: var(--tq-muted);
}
.fw-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.2;
}
.fw-price b {
  color: var(--tq-heading);
  font-size: 20px;
}
.fw-price small {
  color: var(--tq-muted);
  font-size: 12.5px;
}
.fw-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}
.fw-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px 4px;
  background: var(--tq-smoke);
  color: var(--tq-heading);
  line-height: 1.1;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.fw-day small {
  color: var(--tq-muted);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.fw-day b {
  font-size: 22px;
}
.fw-day:hover:not(:disabled) {
  background: var(--tq-ink);
  color: #FFFFFF;
}
.fw-day.is-on {
  background: var(--tq-red);
  color: #FFFFFF;
}
.fw-day.is-on small,
.fw-day:hover:not(:disabled) small {
  color: rgba(255, 255, 255, 0.85);
}
.fw-day:disabled,
.fw-slot:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.fw-slots {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}
.fw-slot {
  min-width: 96px;
  padding: 11px 14px;
  background: var(--tq-smoke);
  color: var(--tq-heading);
  font-family: var(--tq-ff-num);
  font-size: 14.5px;
  font-weight: 600;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.fw-slot:disabled {
  text-decoration: line-through;
}
.fw-slot:hover:not(:disabled) {
  background: var(--tq-ink);
  color: #FFFFFF;
}
.fw-slot.is-on {
  background: var(--tq-red);
  color: #FFFFFF;
}
.fw-hint {
  margin: 0;
  color: var(--tq-muted);
  font-size: 14.5px;
}
.fw-days .fw-hint {
  grid-column: 1 / -1;
}
.fw-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
}
.fw-done {
  padding: 50px 40px;
  background: var(--tq-smoke);
  text-align: center;
}
.fw-done > i {
  margin-bottom: 16px;
  color: var(--tq-fit-text);
  font-size: 46px;
}
.fw-done h3 {
  margin-bottom: 12px;
}
.fw-fit {
  margin: -6px 0 14px;
  color: var(--tq-fit-text);
  font-size: 14px;
  font-weight: 600;
}
.fw-fit.is-no {
  color: var(--tq-red-text);
}
.fw-small {
  margin: 0;
  color: var(--tq-muted);
  font-size: 13.5px;
}

/*----- 13.2 Partner Garages -----*/
.garage-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px 22px;
  margin-bottom: 30px;
  padding: 22px 24px;
  background: var(--tq-smoke);
}
.garage-filters .tq-field {
  width: 240px;
  margin-bottom: 0;
}
.garage-filters .tq-select .select-button {
  height: 48px;
  background: var(--tq-surface);
}
.gf-open {
  align-self: center;
  margin-top: 26px;
}
.gf-count {
  margin: 0 0 12px auto;
  font-size: 14.5px;
}
.gf-count b {
  color: var(--tq-heading);
  font-size: 18px;
}
.tq-map {
  overflow: hidden;
  height: 440px;
  background: var(--tq-smoke);
}
.tq-map.is-tall {
  height: 100%;
  min-height: 520px;
}
.tq-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(0.4);
}

/*----- 13.3 Services -----*/
.steps-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.steps-row li {
  position: relative;
  padding: 32px 28px;
  background: var(--tq-surface);
}
.steps-row .tq-num {
  display: block;
  margin-bottom: 18px;
  color: var(--tq-red-text);
  font-size: 34px;
  line-height: 1;
}
.steps-row h3 {
  margin-bottom: 8px;
}
.steps-row p {
  font-size: 15px;
}
.sd-article .sd-img {
  display: block;
  width: 100%;
  margin-bottom: 34px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.sd-article h2 {
  margin: 44px 0 16px;
  font-size: clamp(24px, 2vw, 32px);
}
.sd-article h2:first-of-type {
  margin-top: 0;
}
.sd-rows {
  margin: 26px 0;
}
.sd-parts {
  margin-top: 10px;
}
.side-cta {
  padding: 32px 28px;
}
.side-cta h3 {
  margin-bottom: 10px;
}
.side-cta .tq-btn {
  margin-top: 8px;
}

/*======================
14. Company & Account Pages
========================*/
/*----- 14.1 About -----*/
.about-figures {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 70px 0 0;
  border: 1px solid var(--tq-line);
  background: var(--tq-line);
}
.about-figures > div {
  padding: 30px 28px;
  background: var(--tq-surface);
}
.about-figures dt {
  color: var(--tq-muted);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.about-figures dd {
  margin: 8px 0 0;
  color: var(--tq-heading);
  font-size: clamp(38px, 3.4vw, 54px);
  line-height: 1;
}
.vision-card {
  height: 100%;
  background: var(--tq-surface);
}
.vision-card img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.vision-card h3 {
  margin: 26px 30px 10px;
}
.vision-card p {
  margin: 0 30px;
  padding-bottom: 30px;
}
.ask-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}
.ask-band h2 {
  margin-bottom: 12px;
}
.ask-band .tq-lead {
  max-width: 620px;
  margin: 0;
}
.td-photo {
  max-width: 440px;
  overflow: hidden;
  background: var(--tq-smoke);
}
.td-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
}
.td-rows {
  margin: 26px 0 30px;
}
.td-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
}
.td-actions .tq-social a {
  background: var(--tq-smoke);
}

/*----- 14.2 FAQ -----*/
.faq-side {
  position: sticky;
  top: 120px;
}
.faq-side h2 {
  margin-bottom: 22px;
}
.faq-group + .faq-group {
  margin-top: 46px;
}
.faq-title {
  margin-bottom: 16px;
}
.acc-item {
  border-bottom: 1px solid var(--tq-line);
}
.acc-item:first-child {
  border-top: 1px solid var(--tq-line);
}
.acc-q {
  margin: 0;
  font-size: inherit;
  letter-spacing: 0;
  text-transform: none;
}
.acc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: 20px 0;
  color: var(--tq-heading);
  font-size: 17px;
  font-weight: 600;
  text-align: left;
}
.acc-head i {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--tq-smoke);
  color: var(--tq-red-text);
  font-size: 12px;
  transition: transform 0.35s var(--tq-ease), background-color 0.3s ease, color 0.3s ease;
}
.acc-item.is-open .acc-head i {
  background: var(--tq-red);
  color: #FFFFFF;
}
.acc-item.is-open .acc-head i::before {
  content: "\f068";
}
.acc-body {
  padding: 0 50px 22px 0;
}

/*----- 14.3 Journal -----*/
.post-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 50px;
}
.post-list > * {
  min-width: 0;
}
.post-wide .post-img {
  position: relative;
}
.post-wide .post-img img {
  aspect-ratio: 16 / 8;
}
.post-wide h3 {
  margin: 4px 0 14px;
}
.post-wide p {
  margin-bottom: 18px;
}
.post-wide.is-quote {
  padding: 46px 44px;
  background: var(--tq-ink);
  color: rgba(255, 255, 255, 0.78);
  --tq-heading: #FFFFFF;
}
.post-wide.is-quote > i {
  color: var(--tq-red);
  font-size: 34px;
}
.post-wide.is-quote blockquote {
  margin: 18px 0 24px;
}
.post-wide.is-quote blockquote p {
  color: #FFFFFF;
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 600;
  line-height: 1.3;
}
.post-wide.is-quote .post-meta a {
  color: #FFFFFF;
}
.post-img.is-video img {
  display: block;
  width: 100%;
  object-fit: cover;
}
.post-play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  margin: -42px 0 0 -42px;
  background: var(--tq-red);
  color: #FFFFFF;
  font-size: 22px;
  transition: transform 0.4s var(--tq-ease), background-color 0.3s ease;
}
.post-play:hover {
  background: var(--tq-ink);
  color: #FFFFFF;
  transform: scale(1.06);
}
.post-gallery {
  position: relative;
  margin-bottom: 20px;
  overflow: hidden;
}
.post-gallery .swiper {
  width: 100%;
  margin: 0;
}
.post-gallery img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 8;
  object-fit: cover;
}
.pg-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-top: -23px;
  background: rgba(13, 13, 13, 0.7);
  color: #FFFFFF;
}
.pg-arrow:hover {
  background: var(--tq-red);
}
.pg-arrow.is-prev {
  left: 0;
}
.pg-arrow.is-next {
  right: 0;
}
.tq-pages {
  display: flex;
  gap: 6px;
  margin-top: 50px;
}
.tq-pages a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--tq-smoke);
  color: var(--tq-heading);
  font-family: var(--tq-ff-num);
  font-weight: 600;
}
.tq-pages a.is-current,
.tq-pages a:hover {
  background: var(--tq-red);
  color: #FFFFFF;
}
.post-article .pa-img {
  display: block;
  width: 100%;
  margin-bottom: 26px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.post-article .post-meta b {
  color: var(--tq-heading);
}
.post-article h2 {
  margin: 14px 0 18px;
}
.post-article h3 {
  margin: 34px 0 14px;
  font-size: 22px;
}
.pa-rows {
  margin: 24px 0;
}
.pa-quote {
  margin: 30px 0;
  padding: 28px 32px;
  border-left: 4px solid var(--tq-red);
  background: var(--tq-smoke);
}
.pa-quote p {
  color: var(--tq-heading);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
}
.pa-pair {
  margin: 10px 0 24px;
}
.pa-pair img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.pa-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 36px;
  padding: 18px 0;
  border-top: 1px solid var(--tq-line);
  border-bottom: 1px solid var(--tq-line);
}
.pa-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.pa-tags b {
  margin-right: 8px;
  color: var(--tq-heading);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.pa-tags a {
  padding: 5px 12px;
  background: var(--tq-smoke);
  font-size: 13px;
  font-weight: 600;
}
.pa-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background: var(--tq-smoke);
  color: var(--tq-heading);
}
.pa-copy.is-done,
.pa-copy:hover {
  background: var(--tq-red);
  color: #FFFFFF;
}
.pa-author {
  display: flex;
  gap: 22px;
  margin-top: 36px;
  padding: 30px;
  background: var(--tq-smoke);
}
.pa-author .tq-face {
  width: 84px;
  height: 84px;
}
.pa-author h3 {
  margin: 0 0 8px;
}
.pa-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 36px;
}
.pa-nav a {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px 24px;
  border: 1px solid var(--tq-line);
}
.pa-nav a.is-next {
  text-align: right;
}
.pa-nav small {
  color: var(--tq-red-text);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pa-nav b {
  color: var(--tq-heading);
  font-size: 16px;
  text-transform: uppercase;
}
.pa-comments {
  margin-top: 50px;
}
.pa-comments ul li {
  display: flex;
  gap: 18px;
  padding: 22px 0;
  border-bottom: 1px solid var(--tq-line);
}
.pa-comments ul li b {
  color: var(--tq-heading);
}
.pa-comments ul li small {
  display: block;
  color: var(--tq-muted);
  font-size: 12.5px;
}
.pa-comments ul li p {
  margin-top: 8px;
}
.pa-form {
  margin-top: 40px;
}

/*----- 14.4 Contact -----*/
.info-card {
  height: 100%;
  padding: 32px 28px;
  background: var(--tq-smoke);
}
.info-card .tq-ico {
  width: 52px;
  height: 52px;
  margin-bottom: 18px;
}
.info-card h3 {
  margin-bottom: 10px;
}
.info-card a {
  display: block;
  margin-bottom: 6px;
  color: var(--tq-heading);
  font-weight: 600;
}
.info-card a.tq-num {
  font-size: 19px;
}
.info-card p {
  font-size: 14.5px;
}
.contact-box {
  height: 100%;
  padding: 40px 36px;
}
.contact-box h2 {
  margin-bottom: 24px;
}

/*----- 14.5 Account -----*/
.acc-wrap {
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr);
  gap: 40px;
}
.acc-side {
  align-self: start;
  padding: 26px;
  background: var(--tq-smoke);
}
.acc-user {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}
.acc-user .tq-eyebrow {
  margin-bottom: 4px;
}
.acc-tabs {
  display: grid;
  gap: 4px;
}
.acc-tabs button {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  background: var(--tq-surface);
  color: var(--tq-heading);
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.acc-tabs button i {
  width: 18px;
  color: var(--tq-red-text);
}
.acc-tabs button.is-active {
  background: var(--tq-red);
  color: #FFFFFF;
}
.acc-tabs button.is-active i {
  color: #FFFFFF;
}
.acc-out {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  color: var(--tq-heading);
  font-size: 14px;
  font-weight: 600;
}
.acc-panel h3 {
  margin-bottom: 24px;
}
.acc-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.acc-stats a {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 24px 22px;
  background: var(--tq-smoke);
}
.acc-stats b {
  color: var(--tq-heading);
  font-size: 40px;
  line-height: 1;
}
.acc-stats span {
  color: var(--tq-muted);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.acc-stats a:hover {
  background: var(--tq-ink);
}
.acc-stats a:hover b,
.acc-stats a:hover span {
  color: #FFFFFF;
}
.acc-car {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 16px;
  padding: 22px 24px;
  border: 1px solid var(--tq-line);
}
.acc-car .tq-ico {
  width: 48px;
  height: 48px;
}
.acc-car div {
  display: flex;
  flex: 1;
  flex-direction: column;
}
.acc-car small {
  color: var(--tq-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.acc-car b {
  color: var(--tq-heading);
  font-size: 17px;
}
.acc-status {
  display: inline-block;
  padding: 4px 10px;
  background: var(--tq-smoke);
  color: var(--tq-heading);
  font-size: 12.5px;
  font-weight: 700;
}
.acc-status.is-done {
  background: var(--tq-fit);
  color: #FFFFFF;
}
.addr-card {
  height: 100%;
  padding: 26px;
  background: var(--tq-smoke);
}
.addr-card h4 {
  margin-bottom: 10px;
}

/*----- 14.6 Sign In & Register -----*/
.auth-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  border: 1px solid var(--tq-line);
}
.auth-card {
  padding: 50px 48px;
}
.auth-card h2 {
  margin-bottom: 24px;
}
.auth-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 22px;
}
.auth-alt {
  margin: 22px 0 0;
  font-size: 15px;
}
.auth-alt a {
  color: var(--tq-red-text);
  font-weight: 600;
}
.auth-terms {
  margin-bottom: 20px;
}
.auth-side {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 46px 42px;
}
.auth-side h2 {
  margin-bottom: 22px;
}
.tq-pass .tq-input {
  padding-right: 56px;
}
.pass-eye {
  position: absolute;
  top: 31px;
  right: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--tq-red-text);
}
.pass-meter {
  position: relative;
  height: 4px;
  margin-top: 8px;
  background: var(--tq-smoke);
}
.pass-meter span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--tq-red);
  transition: width 0.3s ease;
}
.pass-meter span[data-score="3"],
.pass-meter span[data-score="4"] {
  background: var(--tq-fit);
}
.pass-hint {
  display: block;
  margin-top: 6px;
  color: var(--tq-muted);
  font-size: 13px;
}

/*----- 14.7 Coming Soon & 404 -----*/
.tq-bare main {
  min-height: 100vh;
}
.bare-page {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: 100vh;
  padding: 80px 0;
}
.bare-inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.bare-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 40px;
}
.bare-logo img {
  height: 38px;
}
.bare-page h1 {
  margin: 10px 0 20px;
  font-size: clamp(38px, 4.6vw, 72px);
}
.bare-page .tq-lead {
  margin-bottom: 30px;
}
.bare-page .deal-clock {
  justify-content: center;
  margin: 0 0 30px;
}
.bare-page .deal-clock span {
  background: rgba(255, 255, 255, 0.06);
}
.bare-form {
  position: relative;
  display: flex;
  gap: 10px;
  max-width: 520px;
  margin: 0 auto 28px;
}
.bare-form .tq-input {
  background: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
}
.bare-form .form-status {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
}
.bare-page .tq-social {
  justify-content: center;
}
.bare-page .tq-social a {
  background: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
}
.bare-page .tq-btns {
  justify-content: center;
}
.err-code {
  margin: 0;
  color: var(--tq-red);
  font-size: clamp(110px, 16vw, 220px);
  line-height: 0.9;
}

/*======================
15. Subheader
========================*/
/* company pages: the photo band with the breadcrumb, a big caps title and a lead */
.tq-subheader {
  padding: 96px 0 92px;
}
.tq-subheader h1 {
  max-width: 900px;
  margin: 18px 0 18px;
  font-size: clamp(40px, 4.4vw, 70px);
}
.tq-subheader .sub-lead {
  max-width: 560px;
  margin: 0;
  font-size: 18px;
}
.tq-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  color: var(--tq-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.tq-crumbs i {
  color: var(--tq-red-text);
  font-size: 8px;
}
.tq-crumbs a {
  color: var(--tq-text);
}
.tq-crumbs a:hover {
  color: var(--tq-red-text);
}
.tq-crumbs span {
  color: var(--tq-heading);
}
/* shop and account pages: the base's breadcrumb strip */
.tq-subbar {
  padding: 34px 0 36px;
  border-bottom: 1px solid var(--tq-line);
  background: var(--tq-smoke);
}
.tq-subbar .sb-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  margin-top: 16px;
}
.tq-subbar h1 {
  font-size: clamp(32px, 3vw, 48px);
}
.tq-subbar .sb-lead {
  max-width: 460px;
  margin: 0;
  font-size: 15.5px;
}

/*======================
16. Footer
========================*/
.tq-footer {
  position: relative;
}
/*----- 16.1 Newsletter Bar -----*/
.footer-news {
  border-top: 1px solid var(--tq-line);
  border-bottom: 1px solid var(--tq-line);
  background: var(--tq-smoke);
}
.fn-row {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) auto;
  align-items: center;
}
.fn-title {
  padding: 30px 0;
  font-size: 14px;
  letter-spacing: 0.02em;
}
.fn-form {
  position: relative;
  display: flex;
  align-items: center;
  align-self: stretch;
  padding: 0 30px;
  border-left: 1px solid var(--tq-line);
  border-right: 1px solid var(--tq-line);
}
.fn-form input {
  flex: 1;
  min-width: 0;
  height: 56px;
  border: 0;
  background: transparent;
  color: var(--tq-heading);
  font-family: var(--tq-ff-body);
  font-size: 15px;
}
.fn-form input::placeholder {
  color: var(--tq-muted);
}
.fn-form input:focus {
  outline: 0;
}
.fn-send {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--tq-heading);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.fn-send i {
  color: var(--tq-red-text);
}
.fn-send:hover {
  color: var(--tq-red-text);
}
.fn-form .form-status {
  position: absolute;
  left: 30px;
  bottom: 6px;
  margin: 0;
  font-size: 12.5px;
}
.fn-form .form-status:empty {
  display: none;
}
.fn-row .tq-social {
  padding-left: 30px;
}

/*----- 16.2 Main Footer -----*/
.footer-main {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 80px 0 76px;
  background: var(--tq-smoke);
}
.tq-gears {
  --gear-1: #E20100;
  --gear-2: #2A2C30;
  --gear-3: #A9AEB4;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  display: block;
  width: 26%;
  height: 100%;
  pointer-events: none;
}
[data-theme="dark"] .tq-gears {
  --gear-2: #3B3E44;
  --gear-3: #6A7077;
}
.footer-widgets .tq-logo img {
  height: 32px;
}
.widget-about .f-address {
  margin: 24px 0 14px;
  font-size: 15px;
}
.footer-main i {
  width: 18px;
  color: var(--tq-red-text);
  font-size: 13px;
}
.f-line {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  color: var(--tq-heading);
  font-family: var(--tq-ff-num);
  font-size: 15px;
  font-weight: 500;
}
.f-title {
  margin-bottom: 22px;
  font-size: 14px;
  letter-spacing: 0.02em;
}
.f-links li + li {
  margin-top: 9px;
}
.f-links a {
  color: var(--tq-text);
  font-size: 15px;
}
.f-links a:hover {
  color: var(--tq-red-text);
}

/*----- 16.3 Promise Strip -----*/
.footer-strip {
  background: var(--tq-red);
  color: #FFFFFF;
}
.fs-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  padding: 26px 0;
}
.fs-item {
  display: flex;
  align-items: center;
  gap: 16px;
}
.fs-item img {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
}
.fs-item span {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.fs-item b {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.fs-item small {
  color: rgba(255, 255, 255, 0.88);
  font-family: var(--tq-ff-num);
  font-size: 14px;
  font-weight: 500;
}

/*----- 16.4 Bottom Bar -----*/
.footer-bottom {
  background: #000000;
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
}
.fb-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 0;
}
.fb-row p {
  margin: 0;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.fb-row a {
  color: #FFFFFF;
}
.fb-pay {
  display: flex;
  gap: 12px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 28px;
}