/*
 * tuning-database.co.uk, v3: the shop. Product pages, the file list, cart,
 * checkout and the account area, over WooCommerce's own markup. Loaded only on
 * WooCommerce pages, after site.css. Colours come from tokens.css only.
 *
 *   1. buy box and add-to-cart     4. the file list (shop, categories, search)
 *   2. an ECU file page            5. cart and checkout
 *   3. any other product           6. my account
 */

/* 1. buy box and add-to-cart --------------------------------------------- */

.buybox {
  padding: var(--sp-5);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-2);
}

@media (min-width: 900px) {
  .buybox {
    position: sticky;
    top: calc(64px + var(--sp-5));
  }
}

.buybox__img img {
  width: 100%;
  border-radius: var(--radius-1);
  margin-bottom: var(--sp-4);
}

.buybox__price {
  font-size: var(--step-4);
  line-height: 1;
  letter-spacing: -0.02em;
}

.buybox__price .woocommerce-Price-currencySymbol {
  font-size: 0.6em;
  vertical-align: 0.5em;
  margin-right: 0.05em;
}

.buybox__price del {
  font-size: 0.5em;
  vertical-align: 0.5em;
}

.buybox__cart {
  margin-top: var(--sp-4);
}

.buybox__terms {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
  color: var(--ink-2);
  font-size: var(--step--1);
}

.buybox__alt {
  margin-top: var(--sp-4);
  color: var(--ink-3);
}

form.cart {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

form.cart .quantity {
  flex: 0 0 auto;
}

form.cart .quantity input.qty {
  width: 72px;
  text-align: center;
}

form.cart .quantity:has(input[type="hidden"]) {
  display: none;
}

/* One file is the usual order, so "Buy now" (straight to checkout) leads and
   "Add to cart" is the quiet second way. */
form.cart .buy_now_button {
  order: -1;
  flex: 1 1 100%;
  min-height: 54px;
  font-size: var(--step-1);
}

form.cart .single_add_to_cart_button {
  flex: 1 1 100%;
  min-height: 46px;
  background: transparent;
  border-color: var(--btn-2-line);
  color: var(--ink);
}

form.cart .single_add_to_cart_button:hover {
  background: var(--bg-hover);
  border-color: var(--ink-3);
  color: var(--ink);
}

#wc-stripe-express-checkout-element {
  width: 100%;
  margin-top: var(--sp-2);
}

form.cart .single_add_to_cart_button.loading {
  opacity: 0.7;
}

/* Wallet buttons a payment plugin adds under the cart button. */
#wc-stripe-payment-request-wrapper,
#wc-stripe-express-checkout-element,
.wc-stripe-product-checkout-container {
  flex: 1 1 100%;
  margin-top: var(--sp-2);
}

#wc-stripe-payment-request-button-separator,
#wc-stripe-express-checkout-button-separator {
  flex: 1 1 100%;
  color: var(--ink-3);
  font-size: var(--step--1);
  text-align: center;
}

.stock {
  color: var(--ink-3);
  font-size: var(--step--1);
}

.out-of-stock {
  color: var(--bad);
}

/* 2. an ECU file page ----------------------------------------------------- */

.product-file__stage {
  margin-bottom: var(--sp-3);
}

/* The heading's second line: the ECU numbers, in the data face. */
.pf-h1-ecu {
  display: block;
  margin-top: var(--sp-2);
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: var(--step-0);
  font-weight: 500;
  letter-spacing: 0;
  line-height: var(--leading-snug);
  overflow-wrap: anywhere;
}

.product-file__body {
  display: grid;
  gap: var(--sp-7);
  padding-block: var(--sp-7) var(--sp-8);
}

@media (min-width: 900px) {
  .product-file__body {
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: var(--sp-8);
    align-items: start;
  }
}

.product-file__main > section + section {
  margin-top: var(--sp-7);
  padding-top: var(--sp-7);
  border-top: 1px solid var(--line);
}

.product-file__main h2 {
  font-size: var(--step-2);
  margin-bottom: var(--sp-3);
}

.product-file__main .specs {
  margin-top: var(--sp-4);
}

.product-file__main .specs + p {
  margin-top: var(--sp-3);
  overflow-wrap: anywhere;
}

.product-file__needs {
  display: grid;
  gap: var(--sp-5);
  margin-block: var(--sp-4);
}

@media (min-width: 640px) {
  .product-file__needs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.product-file__needs h3 {
  margin-bottom: var(--sp-2);
  font-size: var(--step-0);
  color: var(--ink-2);
}

.product-file__gain {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  margin-top: var(--sp-4);
  font-weight: 600;
  color: var(--accent-ink);
}

.product-file__gain .mono {
  color: var(--ink);
  font-size: var(--step-2);
}

.product-file__lede {
  margin-top: var(--sp-4);
  max-width: 62ch;
  color: var(--ink-2);
}

/* The side column: buy box, the file's identity, share links. */
.product-file__aside {
  display: grid;
  gap: var(--sp-5);
  align-content: start;
}

.product-file__aside .buybox {
  position: static;
}

.pf-identity h2 {
  font-size: var(--step-1);
}

.pf-identity .specs {
  margin-top: var(--sp-3);
}

.pf-identity .specs > div {
  grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
}

.pf-identity p {
  margin-top: var(--sp-3);
  overflow-wrap: anywhere;
}

.pf-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  color: var(--ink-3);
}

.v3-copy-link {
  padding: 0;
  background: none;
  border: 0;
  color: var(--link);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* The dyno projection: the chart across the whole column, the three numbers
   in a row under it. Beside them it was drawn at 60% and its labels at 7px. */
.pf-dyno__layout {
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-4);
}

.pf-dyno__chart {
  margin: 0;
  padding: var(--sp-3);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-2);
}

.pf-dyno__chart figcaption {
  margin-top: var(--sp-2);
}

.pf-dyno__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-3);
  margin: 0;
}

.pf-dyno__stats div {
  padding-left: var(--sp-3);
  border-left: 2px solid var(--line-strong);
}

.pf-dyno__stats div:first-child {
  border-left-color: var(--accent);
}

.pf-dyno__stats dt {
  color: var(--ink-3);
  font-size: var(--step--1);
}

.pf-dyno__stats dd {
  margin: 0;
  color: var(--ink-2);
}

.pf-dyno__stats b {
  color: var(--ink);
  font-size: var(--step-3);
  font-variant-numeric: tabular-nums;
}

.pf-dyno__stats span {
  display: block;
  color: var(--accent-ink);
  font-size: var(--step--1);
}

/* The chart is drawn by inc/tdb-gains.php with fixed colours; these win over
   its presentation attributes so it reads in both themes. */
.tdb-dyno__svg {
  display: block;
  width: 100%;
  height: auto;
}

.tdb-dyno__svg line,
.tdb-dyno__svg > rect {
  stroke: var(--line);
}

.tdb-dyno__svg text {
  fill: var(--ink-3);
  font-family: var(--font-mono);
}

.tdb-dyno__svg path[stroke-dasharray] {
  stroke: var(--ink-3);
}

.tdb-dyno__svg path:not([stroke-dasharray]) {
  stroke: var(--accent);
}

.tdb-dyno__svg circle {
  fill: var(--accent);
  stroke: var(--accent);
}

.tdb-dyno__svg circle[fill="none"] {
  fill: none;
}

.tdb-dyno__svg g rect {
  fill: var(--bg);
  stroke: var(--accent);
}

.tdb-dyno__svg g text {
  fill: var(--accent-ink);
}

/* The specification table, engine matrix, about text and questions
   (TDB_ProductSEO markup, the same the old page printed). */
.pf-seo .product-section {
  margin-top: var(--sp-7);
  padding-top: var(--sp-7);
  border-top: 1px solid var(--line);
}

.pf-seo .section-title {
  margin-bottom: var(--sp-3);
  font-size: var(--step-2);
}

.pf-seo .product-section > p {
  margin-bottom: var(--sp-4);
  color: var(--ink-2);
}

.tdb-seo-specs__table,
.tdb-seo-matrix__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--step--1);
}

.tdb-seo-specs__table th,
.tdb-seo-specs__table td,
.tdb-seo-matrix__table th,
.tdb-seo-matrix__table td {
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.tdb-seo-specs__table th {
  width: 40%;
  color: var(--ink-3);
  font-weight: 500;
}

.tdb-seo-specs__table td.is-code {
  font-family: var(--font-mono);
  overflow-wrap: anywhere;
  cursor: copy;
}

.tdb-seo-specs__table td.copied {
  color: var(--ok);
}

.tdb-seo-matrix {
  overflow-x: auto;
}

.tdb-seo-matrix__engine {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  margin-bottom: var(--sp-4);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--ink-2);
}

.tdb-seo-matrix__engine b {
  margin-right: var(--sp-1);
  color: var(--ink-3);
  font-weight: 500;
}

.tdb-seo-matrix__table thead th {
  color: var(--ink-3);
  font-weight: 500;
}

.tdb-seo-matrix__table td {
  font-variant-numeric: tabular-nums;
}

.tdb-seo-matrix__table tr.is-stock td {
  color: var(--ink-3);
}

.tdb-seo-matrix__table tr.is-current {
  background: var(--bg-raised);
  box-shadow: inset 3px 0 0 var(--accent);
}

.tdb-seo-matrix__delta--up {
  color: var(--accent-ink);
  font-weight: 600;
}

.tdb-seo-matrix__fuel {
  margin-top: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-left: 3px solid var(--accent);
  background: var(--bg-raised);
  color: var(--ink-2);
}

.tdb-seo-about__body > * + * {
  margin-top: var(--sp-3);
}

.tdb-seo-about__body {
  max-width: 68ch;
  line-height: var(--leading-body);
}

/* Questions folded to one line each; a click opens the answer (product-file.js). */
.pf-seo .accordion-item {
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--line);
}

.pf-seo .accordion-header {
  margin: 0;
  font-size: var(--step-0);
}

.pf-seo .accordion-button {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  width: 100%;
  padding: 0;
  background: none;
  border: 0;
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.pf-seo .accordion-button::after {
  content: "+";
  flex-shrink: 0;
  color: var(--accent-ink);
  font-weight: 700;
}

.pf-seo .accordion-button[aria-expanded="true"]::after {
  content: "\2212";
}

.pf-seo .accordion-collapse:not(.show) {
  display: none;
}

.pf-seo .accordion-body {
  margin-top: var(--sp-2);
  color: var(--ink-2);
  max-width: 68ch;
}

.pf-related__h {
  margin-top: var(--sp-7);
}

/* Stock against tuned: two bars per figure, the tuned one in the accent. */
.figures {
  display: grid;
  gap: var(--sp-5);
  margin-top: var(--sp-5);
}

.figure__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--sp-2);
  font-weight: 600;
}

.figure__gain {
  color: var(--accent-ink);
  font-size: var(--step-2);
  font-variant-numeric: tabular-nums;
}

.figure__bars {
  display: grid;
  gap: var(--sp-1);
}

.bar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: max-content;
  height: 34px;
  padding-inline: var(--sp-3);
  border-radius: var(--radius-1);
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transform-origin: left center;
}

.bar b {
  font-size: var(--step-0);
}

.bar--stock {
  background: var(--bg-hover);
  color: var(--ink-2);
}

.bar--tuned {
  background: var(--accent);
  color: var(--on-accent);
}

.js .figures.reveal .bar {
  transform: scaleX(0.02);
  transition: transform var(--dur-3) var(--ease-out);
}

.js .figures.reveal.is-in .bar {
  transform: none;
}

.js .figures.reveal.is-in .bar--tuned {
  transition-delay: 120ms;
}

.w-5 { width: 5%; }
.w-10 { width: 10%; }
.w-15 { width: 15%; }
.w-20 { width: 20%; }
.w-25 { width: 25%; }
.w-30 { width: 30%; }
.w-35 { width: 35%; }
.w-40 { width: 40%; }
.w-45 { width: 45%; }
.w-50 { width: 50%; }
.w-55 { width: 55%; }
.w-60 { width: 60%; }
.w-65 { width: 65%; }
.w-70 { width: 70%; }
.w-75 { width: 75%; }
.w-80 { width: 80%; }
.w-85 { width: 85%; }
.w-90 { width: 90%; }
.w-95 { width: 95%; }
.w-100 { width: 100%; }

/* 3. any other product ---------------------------------------------------- */

.product-general__top {
  margin-top: var(--sp-2);
}

.product-general__short {
  font-size: var(--step-1);
  color: var(--ink-2);
}

.product-general__long {
  max-width: var(--measure);
}

.product-general__long table {
  margin-block: var(--sp-5);
}

/* A software product's tags and headline figure, the gallery under the
   picture, the four points (inc/tdb-product-copy.php). */
.pg-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: 0;
}

.pg-metric {
  margin: 0;
  color: var(--ink-2);
}

.pg-metric b {
  margin-right: var(--sp-1);
  color: var(--accent-ink);
  font-size: var(--step-4);
  line-height: 1;
}

.pg-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pg-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: var(--sp-2);
  margin: var(--sp-2) 0 var(--sp-3);
  padding: 0;
  list-style: none;
}

.pg-gallery img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border: 1px solid var(--line);
  border-radius: var(--radius-1);
  object-fit: cover;
}

.pg-points {
  display: grid;
  gap: var(--sp-4);
  margin: 0;
}

.pg-points > div {
  padding-left: var(--sp-4);
  border-left: 3px solid var(--accent);
}

.pg-points dt {
  color: var(--ink);
  font-weight: 700;
}

.pg-points dd {
  margin: 0;
  color: var(--ink-2);
}

/* 4. the file list ------------------------------------------------------- */

.files-table td:first-child a {
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}

.files-table__name {
  display: flex;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
}

/* A product with its own picture (software, hosting); ECU files have none. */
.files-table__thumb {
  flex: none;
}

.files-table__thumb img {
  display: block;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius-1);
  object-fit: cover;
}

.files-table__sale {
  flex: none;
  padding: 2px var(--sp-2);
  border-radius: var(--radius-pill);
  background: var(--btn-bg);
  color: var(--btn-ink);
  font-size: var(--step--1);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.files-table td:first-child a:hover {
  text-decoration: underline;
}

.files-table .mono {
  color: var(--ink-2);
  font-size: var(--step--1);
}

.files-table + p,
.table-scroll + p {
  margin-top: var(--sp-5);
}

.shop__search {
  display: flex;
  gap: var(--sp-2);
  max-width: 720px;
  margin-top: var(--sp-5);
}

.shop__search input[type="search"] {
  min-height: 54px;
  font-size: var(--step-1);
}

.shop__cats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
}

.shop__cats a {
  display: inline-flex;
  align-items: baseline;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
}

.shop__cats a span {
  color: var(--ink-3);
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
}

.shop__cats a:hover {
  background: var(--bg-hover);
}

.shop__cats a[aria-current="page"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}

.shop__cats a[aria-current="page"] span {
  color: var(--bg);
}

/* The count and the sort order on one line. */
.shop__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}

.shop__count {
  margin: 0;
}

.shop__bar .woocommerce-ordering {
  margin: 0;
}

.shop__bar .woocommerce-ordering select {
  min-height: 40px;
  padding-block: 0;
}

/* A file goes into the cart from its row. */
.files-table__buy {
  text-align: right;
  white-space: nowrap;
}

.files-table__buy .btn {
  min-height: 34px;
  padding-inline: var(--sp-3);
  font-size: var(--step--1);
}

.files-table__buy .added_to_cart {
  display: block;
  margin-top: var(--sp-1);
  font-size: var(--step--1);
}

/* A category's brand hub: file count, knowledge base, technical note. */
.shop__hub {
  margin-bottom: var(--sp-5);
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-2);
  background: var(--bg-raised);
  color: var(--ink-2);
}

.shop__hub--foot {
  margin: var(--sp-6) 0 0;
  padding: var(--sp-4) var(--sp-5);
  background: none;
  font-size: var(--step--1);
}

.shop__hub h2 {
  margin: var(--sp-3) 0 var(--sp-2);
  color: var(--ink);
  font-size: var(--step-2);
}

.shop__hub .text-white,
.shop__hub .text-light {
  color: var(--ink);
}

.shop__hub .text-secondary,
.shop__hub .text-muted {
  color: var(--ink-2);
}

.shop__hub .d-flex {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.shop__hub--foot .d-flex {
  justify-content: space-between;
  gap: var(--sp-3);
}

.shop__hub .tdb-stat-pill {
  display: inline-flex;
  padding: 2px var(--sp-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  color: var(--ink);
  font-size: var(--step--1);
}

.shop__hub i.bi {
  display: none;
}

.shop__none {
  max-width: 60ch;
  padding-block: var(--sp-6);
}

.shop__none p {
  margin-top: var(--sp-3);
  color: var(--ink-2);
}

.shop__help {
  max-width: 640px;
  margin-top: var(--sp-7);
}

.shop__help h2 {
  font-size: var(--step-1);
}

.shop__help p {
  margin-top: var(--sp-2);
  color: var(--ink-2);
}

.woocommerce-pagination ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  margin: var(--sp-6) 0 0;
  padding: 0;
  list-style: none;
}

.woocommerce-pagination li > .page-numbers {
  display: inline-grid;
  place-items: center;
  min-width: 42px;
  height: 42px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-1);
  color: var(--ink);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}

.woocommerce-pagination li > a.page-numbers:hover {
  background: var(--bg-hover);
}

.woocommerce-pagination li > .page-numbers.current {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}

.woocommerce-pagination li > .page-numbers.dots {
  border-color: transparent;
}

@media (max-width: 639px) {
  .files-table thead {
    display: none;
  }

  /* Name, then ECU numbers, then one line: type, price, add to cart. */
  .files-table tr {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: var(--sp-2) var(--sp-3);
    padding-block: var(--sp-3);
    border-bottom: 1px solid var(--line);
  }

  .files-table td {
    padding: 0;
    border: 0;
  }

  .files-table td:first-child {
    grid-column: 1 / -1;
  }

  .files-table td.mono {
    grid-column: 1 / -1;
  }
}

/* 5. cart and checkout ---------------------------------------------------- */

.page-head--slim {
  padding-block: var(--sp-6) var(--sp-5);
}

.page-head--slim p {
  margin-top: var(--sp-2);
  max-width: 70ch;
}

/* Tables WooCommerce draws: the cart, the order review, order details. */
.woocommerce table.shop_table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.woocommerce table.shop_table th {
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--line-strong);
  color: var(--ink-3);
  font-weight: 500;
  font-size: var(--step--1);
  text-align: left;
}

.woocommerce table.shop_table td {
  padding: var(--sp-3);
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

.woocommerce table.shop_table tfoot th,
.woocommerce table.shop_table tfoot td {
  color: var(--ink);
  font-size: var(--step-0);
}

.woocommerce table.shop_table .order-total th,
.woocommerce table.shop_table .order-total td {
  font-size: var(--step-1);
  font-weight: 700;
  border-bottom: 0;
}

.woocommerce table.shop_table .product-name a {
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}

.woocommerce table.shop_table .product-name a:hover {
  text-decoration: underline;
}

.woocommerce table.shop_table .product-thumbnail img {
  width: 56px;
  border-radius: var(--radius-1);
}

.woocommerce table.shop_table .product-remove a.remove {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-1);
  color: var(--ink-3);
  font-size: 1.4rem;
  line-height: 1;
  text-decoration: none;
}

.woocommerce table.shop_table .product-remove a.remove:hover {
  background: var(--bg-hover);
  color: var(--bad);
}

.woocommerce table.shop_table .actions {
  padding-top: var(--sp-4);
}

.woocommerce .coupon {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
}

.woocommerce .coupon input.input-text {
  width: 200px;
}

.woocommerce .coupon label {
  margin: 0;
}

.woocommerce table.cart .actions > .button {
  float: right;
  background: transparent;
  border-color: var(--btn-2-line);
  color: var(--ink);
}

/* The cart: the items on the left, the summary beside them and sticky, with
   what happens after paying under its button. */
.woocommerce .cart-collaterals {
  display: grid;
  margin-top: var(--sp-6);
}

@media (min-width: 960px) {
  .woo-flow--cart .woocommerce {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
    column-gap: var(--sp-7);
    align-items: start;
  }

  .woo-flow--cart .woocommerce > * {
    grid-column: 1 / -1;
  }

  .woo-flow--cart .woocommerce > .woocommerce-cart-form {
    grid-column: 1;
  }

  .woo-flow--cart .woocommerce > .cart-collaterals {
    position: sticky;
    top: calc(64px + var(--sp-5));
    grid-column: 2;
    margin-top: 0;
  }
}

.woocommerce .cart_totals {
  justify-self: end;
  width: 100%;
  padding: var(--sp-5);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-2);
}

.woocommerce .cart_totals h2 {
  font-size: var(--step-1);
  margin-bottom: var(--sp-3);
}

.woocommerce .wc-proceed-to-checkout {
  margin-top: var(--sp-4);
}

.woocommerce .wc-proceed-to-checkout .checkout-button {
  width: 100%;
  min-height: 54px;
  font-size: var(--step-1);
}

.cart-assure {
  margin-top: var(--sp-4);
  font-size: var(--step--1);
}

/* What is often bought with the cart, as short rows under the table
   (tdb_v3_cross_sell_rows): name, price, Add. */
.cart-xs {
  margin-top: var(--sp-7);
}

.cart-xs h2 {
  font-size: var(--step-1);
  margin-bottom: var(--sp-3);
}

.cart-xs ul {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.cart-xs li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
  padding-block: var(--sp-3);
  border-bottom: 1px solid var(--line);
}

.cart-xs__name {
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}

.cart-xs__name:hover {
  text-decoration: underline;
}

.cart-xs__price {
  color: var(--ink-2);
  font-size: var(--step--1);
  white-space: nowrap;
}

.cart-xs__price > span {
  color: var(--ink);
  font-size: var(--step-0);
  font-weight: 700;
}

@media (max-width: 639px) {
  .cart-xs li {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .cart-xs__name {
    grid-column: 1 / -1;
  }
}

/* A file's numbers under its name, and its mark in place of the placeholder. */
.cart-ecu {
  display: block;
  margin-top: 2px;
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 500;
  overflow-wrap: anywhere;
}

.cart-file {
  display: inline-grid;
  place-items: center;
  align-content: center;
  gap: 2px;
  width: 56px;
  height: 56px;
  border: 1px solid var(--line);
  border-radius: var(--radius-2);
  background: var(--bg-raised);
  color: var(--accent-ink);
}

.cart-file svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cart-file b {
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
}

/* Files are sold one at a time: no quantity to change, no button to update it. */
.woo-flow--single .woocommerce table.cart .product-quantity,
.woo-flow--single .woocommerce button[name="update_cart"] {
  display: none;
}

.cart-empty.woocommerce-info {
  font-size: var(--step-1);
}

.return-to-shop {
  margin-top: var(--sp-4);
}

/* An empty cart: search the files, or see TunerSuite. */
.cart-empty-more {
  display: grid;
  gap: var(--sp-4);
  max-width: 640px;
  margin-top: var(--sp-5);
  color: var(--ink-2);
}

.cart-empty-more form {
  display: flex;
  gap: var(--sp-2);
}

.cart-empty-more input[type="search"] {
  flex: 1;
  min-width: 0;
}

/* "Returning customer?" and "Have a coupon?": one quiet line each. */
.woocommerce-form-login-toggle .woocommerce-info,
.woocommerce-form-coupon-toggle .woocommerce-info {
  margin: 0;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-2);
  background: var(--bg-raised);
  color: var(--ink-2);
  font-size: var(--step--1);
}

.woocommerce-form-coupon-toggle,
.woocommerce-form-login-toggle {
  margin-bottom: var(--sp-2);
}

.woocommerce form .form-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0 var(--sp-2) 0 0;
  vertical-align: -4px;
  accent-color: var(--accent);
}

/* The checkout form as a grid of named places: Apple Pay / Google Pay and
   "or" on top, the details under them, the order and payment beside them.
   Left unnamed, the wallet buttons fell into the grid's last cells, under the
   billing form at the bottom of the page (2026-10-15). */
form.woocommerce-checkout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "notices" "express" "sep" "details" "heading" "review";
  gap: var(--sp-4);
  align-items: start;
}

form.woocommerce-checkout > .woocommerce-NoticeGroup {
  grid-area: notices;
}

form.woocommerce-checkout > #wc-stripe-express-checkout-element {
  grid-area: express;
  max-width: 440px;
  margin: 0;
}

form.woocommerce-checkout > #wc-stripe-express-checkout-button-separator {
  grid-area: sep;
  max-width: 440px;
  margin: 0;
  color: var(--ink-3);
  font-size: var(--step--1);
  text-align: center;
}

form.woocommerce-checkout > wc-order-attribution-inputs {
  display: none;
}

form.woocommerce-checkout #customer_details {
  grid-area: details;
}

form.woocommerce-checkout #order_review_heading {
  grid-area: heading;
}

form.woocommerce-checkout #order_review {
  grid-area: review;
  align-self: start;
}

@media (min-width: 960px) {
  form.woocommerce-checkout {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    grid-template-areas:
      "notices notices"
      ". heading"
      "express review"
      "sep review"
      "details review";
    grid-template-rows: auto auto auto auto 1fr;
    column-gap: var(--sp-7);
  }

  form.woocommerce-checkout #order_review {
    position: sticky;
    top: calc(64px + var(--sp-5));
  }
}

#order_review_heading {
  font-size: var(--step-2);
  margin: 0;
}

#order_review {
  padding: var(--sp-5);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-2);
}

.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3 {
  margin-bottom: var(--sp-4);
  font-size: var(--step-2);
}

.woocommerce .col2-set .col-2 {
  margin-top: var(--sp-5);
}

.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper,
.woocommerce-additional-fields__field-wrapper,
.woocommerce-address-fields__field-wrapper {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
}

.woocommerce form .form-row {
  margin: 0;
  grid-column: 1 / -1;
}

.woocommerce form .form-row-first {
  grid-column: 1;
}

.woocommerce form .form-row-last {
  grid-column: 2;
}

@media (max-width: 539px) {
  .woocommerce form .form-row-first,
  .woocommerce form .form-row-last {
    grid-column: 1 / -1;
  }
}

.woocommerce form .form-row label {
  display: block;
}

.woocommerce form .form-row .required {
  color: var(--bad);
  text-decoration: none;
}

.woocommerce form .form-row .optional {
  color: var(--ink-3);
}

.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select {
  border-color: var(--bad);
}

.woocommerce form .form-row .description {
  margin-top: var(--sp-1);
  color: var(--ink-3);
  font-size: var(--step--1);
}

form.checkout_coupon,
form.woocommerce-form-login {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: end;
  margin-bottom: var(--sp-5);
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-2);
}

form.checkout_coupon .form-row-first {
  flex: 1 1 220px;
}

/* Payment */

/* Stripe places a hidden input, as wide as the screen, inside its card form;
   this keeps it measured from the form, not the page. */
.wc-upe-form {
  position: relative;
}

#payment {
  margin-top: var(--sp-5);
}

#payment ul.payment_methods {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-2);
}

#payment ul.payment_methods li {
  padding: var(--sp-4);
}

#payment ul.payment_methods li + li {
  border-top: 1px solid var(--line);
}

#payment ul.payment_methods li > label {
  display: inline;
  margin-left: var(--sp-2);
  color: var(--ink);
  font-size: var(--step-0);
  font-weight: 600;
}

#payment ul.payment_methods li img {
  display: inline-block;
  max-height: 22px;
  width: auto;
  margin-left: var(--sp-1);
  vertical-align: middle;
}

#payment .payment_box {
  margin-top: var(--sp-3);
  color: var(--ink-2);
  font-size: var(--step--1);
}

#payment .payment_box fieldset {
  margin-top: var(--sp-3);
}

#payment .place-order {
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-5);
}

#payment .woocommerce-terms-and-conditions-wrapper {
  color: var(--ink-2);
  font-size: var(--step--1);
}

#payment .woocommerce-terms-and-conditions-wrapper label {
  font-size: var(--step--1);
  font-weight: 400;
  color: var(--ink-2);
}

#payment .woocommerce-privacy-policy-text p + p {
  margin-top: var(--sp-2);
}

#place_order {
  width: 100%;
  min-height: 56px;
  font-size: var(--step-1);
}

.blockUI.blockOverlay {
  background: color-mix(in srgb, var(--bg) 70%, transparent);
}

/* The order-received page */
.woocommerce-order .woocommerce-thankyou-order-received {
  font-size: var(--step-1);
}

ul.woocommerce-order-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--sp-4);
  margin: var(--sp-5) 0;
  padding: var(--sp-5);
  list-style: none;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-2);
  color: var(--ink-3);
  font-size: var(--step--1);
}

ul.woocommerce-order-overview strong {
  display: block;
  margin-top: var(--sp-1);
  color: var(--ink);
  font-size: var(--step-0);
}

.woocommerce-order-details,
.woocommerce-customer-details,
.woocommerce-order-downloads {
  margin-top: var(--sp-7);
}

.woocommerce-order-details__title,
.woocommerce-column__title,
.woocommerce-order-downloads__title {
  margin-bottom: var(--sp-3);
  font-size: var(--step-2);
}

.woocommerce-customer-details address {
  font-style: normal;
  line-height: var(--leading-body);
}

/* 6. my account ----------------------------------------------------------- */

/* Signed out: the form on the left; beside it, on its own surface, what the
   account holds (a dyno that draws itself once, the three things it keeps,
   the file count). On a phone the panel follows the form. */
.account--auth .band {
  padding-block: var(--sp-7);
}

.account__grid {
  display: grid;
  gap: var(--sp-7);
  align-items: stretch;
}

@media (min-width: 960px) {
  .account__grid {
    grid-template-columns: minmax(0, 28rem) minmax(0, 1fr);
    gap: clamp(48px, 6vw, 112px);
  }
}

.account__main {
  align-self: center;
}

.account__main h1 {
  font-size: var(--step-4);
  line-height: var(--leading-tight);
}

.account__main .lede {
  margin-top: var(--sp-3);
  color: var(--ink-2);
}

.account__form {
  margin-top: var(--sp-5);
}

.account__form label + input + .small {
  display: block;
  margin-top: var(--sp-1);
}

/* The two tabs as one switch. */
.account__tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  margin-top: var(--sp-6);
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius-2);
  background: var(--bg-sunk);
}

.account__tabs [role="tab"] {
  min-height: 40px;
  padding: var(--sp-2) var(--sp-3);
  border: 0;
  border-radius: var(--radius-1);
  background: none;
  color: var(--ink-2);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.account__tabs [role="tab"]:hover {
  color: var(--ink);
}

.account__tabs [role="tab"][aria-selected="true"] {
  background: var(--bg-raised);
  color: var(--ink);
  box-shadow: 0 0 0 1px var(--line);
}

/* "Password" with "Forgot your password?" on the same line. */
.account__label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
}

.account__pw {
  position: relative;
  display: block;
}

.account__pw input {
  width: 100%;
  padding-right: 4.5rem;
}

.account__reveal {
  position: absolute;
  top: 50%;
  right: var(--sp-2);
  padding: var(--sp-1) var(--sp-2);
  border: 0;
  border-radius: var(--radius-1);
  background: none;
  color: var(--ink-2);
  font: inherit;
  font-size: var(--step--1);
  font-weight: 600;
  transform: translateY(-50%);
  cursor: pointer;
}

.account__reveal:hover {
  background: var(--bg-hover);
  color: var(--ink);
}

.account__captcha {
  margin-top: var(--sp-4);
}

.account__captcha a {
  color: inherit;
}

.account__portal {
  display: grid;
  gap: var(--sp-2);
  margin-top: var(--sp-6);
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-2);
  background: var(--bg-raised);
}

.account__portal p {
  color: var(--ink-2);
}

.account__portal b {
  color: var(--ink);
}

.account__help {
  margin-top: var(--sp-4);
  color: var(--ink-3);
}

.account__back {
  margin-top: var(--sp-5);
}

/* The panel: what the account holds. */
.account__show {
  display: grid;
  align-content: center;
  gap: var(--sp-5);
  padding: clamp(24px, 4vw, 48px);
  border: 1px solid var(--line);
  border-radius: var(--radius-2);
  background: var(--bg-sunk);
}

.account__show h2 {
  font-size: var(--step-3);
  line-height: var(--leading-tight);
}

.account__dyno {
  margin: 0;
}

.account__dyno svg {
  display: block;
  width: 100%;
  height: auto;
}

.account__dyno figcaption {
  margin-top: var(--sp-2);
  color: var(--ink-3);
}

.account__grid-lines path {
  fill: none;
  stroke: var(--line);
  stroke-width: 1;
}

.account__stock {
  fill: none;
  stroke: var(--ink-3);
  stroke-width: 2;
  stroke-dasharray: 0.012 0.01;
}

.account__tuned {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  animation: v3-draw 1.6s var(--ease-out) 0.2s both;
}

.account__peak {
  fill: var(--accent);
  transform-box: fill-box;
  transform-origin: center;
  animation: v3-pop 0.4s var(--ease-out) 1.6s both;
}

@keyframes v3-draw {
  from {
    stroke-dashoffset: 1;
  }

  to {
    stroke-dashoffset: 0;
  }
}

@keyframes v3-pop {
  from {
    opacity: 0;
    transform: scale(0.4);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.account__label {
  fill: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 13px;
}

.account__label--tuned {
  fill: var(--accent-ink);
}

.account__holds {
  display: grid;
  gap: var(--sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.account__holds li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: start;
  gap: var(--sp-3);
  margin: 0;
  color: var(--ink-2);
}

.account__holds b {
  display: block;
  color: var(--ink);
}

.account__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: var(--radius-2);
  background: var(--bg-raised);
  color: var(--accent-ink);
}

.account__icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.account__stat {
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
  color: var(--ink-2);
}

.account__stat b {
  color: var(--ink);
  font-family: var(--font-mono);
}

/* Its notice is written under the form, so the floating badge can go. */
body:has(.account--auth) .grecaptcha-badge {
  visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .account__tuned,
  .account__peak {
    animation: none;
  }
}

/* What the server answered, in the colour of how it went. */
.notice--ok {
  border-left-color: var(--ok);
}

.notice--bad {
  border-left-color: var(--bad);
}

/* The off-road notice under the buy box: the same words as the old page, set
   as a note rather than an alarm. */
.buybox__legal {
  margin: var(--sp-4) 0 0;
  color: var(--ink-2);
}

/* functions.php markup: a container, the notice, an icon font we do not load. */
.buybox__legal .tdb-track-disclaimer {
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--warn);
  border-radius: var(--radius-1);
  background: var(--bg-raised);
}

.buybox__legal .bi {
  display: none;
}

.buybox__legal strong {
  color: var(--ink);
}

.product-file__engine {
  margin-top: var(--sp-2);
}

/* The product-type questions under a product (tdb_v3_product_faqs). */
.product-faqs {
  margin-top: var(--sp-7);
}

.product-faqs h2 {
  margin-bottom: var(--sp-3);
}

.product-faqs summary h3 {
  display: inline;
  font-size: var(--step-0);
}

/* The stage, beside the car in the heading, a step quieter. */
.pf-h1-stage {
  color: var(--ink-2);
  font-weight: 500;
}

/* "Match these numbers to your read": the first thing in the buy box. */
.pf-match {
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--line);
}

.pf-match__h {
  margin-bottom: var(--sp-2);
  color: var(--ink-2);
  font-size: var(--step--1);
  font-weight: 600;
}

.pf-match dl {
  display: grid;
  gap: var(--sp-1);
  margin: 0;
}

/* The label above its number, so a long software number and its Copy button
   share the full width of the box. */
.pf-match dl > div {
  display: grid;
}

.pf-match dt {
  color: var(--ink-3);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
}

.pf-match dd {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2);
  margin: 0;
  overflow-wrap: anywhere;
}

.pf-match .mono {
  color: var(--ink);
  font-weight: 600;
}

.v3-copy {
  padding: 0 var(--sp-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: none;
  color: var(--ink-2);
  font: inherit;
  font-size: var(--step--1);
  line-height: 1.6;
}

.v3-copy:hover {
  color: var(--ink);
  border-color: var(--ink-3);
}

/* The InstaTuner line: a note, not an advert. */
.pf-insta {
  padding: var(--sp-3) var(--sp-4);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-1);
  color: var(--ink-2);
}

.pf-insta strong {
  color: var(--ink);
}

/* An ECU page in two columns from the top: the car and everything about the
   file on the left, the buy box heading the right, both above the fold on a
   1366x768 screen. On a phone the columns dissolve and the buy box comes
   straight after the title. */
.product-file__intro {
  padding-bottom: var(--sp-6);
}

.product-file__intro .crumbs {
  margin-bottom: var(--sp-4);
}

.product-file__intro h1 {
  margin-top: var(--sp-2);
}

@media (max-width: 899px) {
  .product-file__body {
    display: flex;
    flex-direction: column;
    gap: var(--sp-6);
  }

  .product-file__main,
  .product-file__aside {
    display: contents;
  }

  .product-file__intro { order: 1; padding-bottom: 0; }
  .product-file__aside > .buybox { order: 2; }
  .product-file__main > :not(.product-file__intro) { order: 3; }
  .product-file__aside > :not(.buybox) { order: 4; }

  .product-file__main > section + section {
    margin-top: 0;
  }
}

/* The phone buy bar (site.js shows it once the buy box is off screen). */
.pf-sticky {
  position: fixed;
  inset: auto 0 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--gutter);
  background: var(--bg-raised);
  border-top: 1px solid var(--line-strong);
  box-shadow: var(--shadow-float);
}

.pf-sticky[hidden] {
  display: none;
}

.pf-sticky__what {
  min-width: 0;
  overflow: hidden;
  color: var(--ink-2);
  font-size: var(--step--1);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pf-sticky__what .price {
  display: block;
  color: var(--ink);
  font-size: var(--step-1);
}

.pf-sticky .btn {
  flex-shrink: 0;
}

body.has-pf-sticky {
  padding-bottom: 72px;
}

@media (min-width: 900px) {
  .pf-sticky {
    display: none;
  }

  body.has-pf-sticky {
    padding-bottom: 0;
  }
}

/* How it works: four pictured steps in a row (two on a tablet, one on a phone). */
.pf-steps ol {
  display: grid;
  gap: var(--sp-4);
  margin: var(--sp-4) 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 560px) {
  .pf-steps ol {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .pf-steps ol {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.pf-step {
  padding: var(--sp-4);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-2);
}

.pf-step svg {
  width: 32px;
  height: 32px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pf-step h3 {
  margin-top: var(--sp-3);
  font-size: var(--step-0);
}

.pf-step p {
  margin-top: var(--sp-1);
  color: var(--ink-2);
  font-size: var(--step--1);
  overflow-wrap: anywhere;
}

/* The dyno run: the rpm cursor that leads the sweep, and labels you can read. */
.pf-dyno__cursor {
  stroke: var(--accent);
  stroke-width: 1.5;
  stroke-dasharray: 3 3;
}

.tdb-dyno__svg text {
  font-size: 12px;
}

.tdb-dyno__svg g text {
  font-size: 13px;
  font-weight: 700;
}