:root {
  --p-blue: #3464eb;
  --p-red: #d40000;
  --p-dblue: #051f66;
  --p-lblue: rgba(52, 100, 235, 0.1);
  --gray: #ccc;
  --lgray: #e0e0e0;
  --p-ltblue: #b0bfeb;
  --tranb: rgba(0, 0, 0, 0.6);
  --lb-highlight: rgba(34, 255, 0, 0.2);

  --pnh-blue: var(--p-blue);
  --pnh-red: var(--p-red);
  --pnh-gold: #ffb81c;
  --pnh-dark: #444;
  --pnh-purple: #6f42c1;

  --tc-tab-border: var(--pnh-dark);
  --accent-color: var(--pnh-blue);
  --accent-text-color: #fff;
  --fontSize: 1.1rem;
  --oem-image-opacity: 1;
  --perf-image-opacity: 0;

  --tab-1-vis: none;
  --tab-2-vis: none;
  --tab-3-vis: none;
}

#wrapper:has(.performance-color.product-display) {
  --accent-color: var(--pnh-red);
  --accent-text-color: inherit;
}

#wrapper:has(.industrial-color.product-display) {
  --accent-color: var(--pnh-gold);
  --accent-text-color: var(--pnh-dark);
}

ul {
  list-style-type: none;
}

li:hover {
  box-shadow: unset;
}

.rounded {
  border-radius: 7px;
}

.hide {
  display: none;
}

.b {
  font-weight: bold;
}

.accent {
  color: var(--accent-color);
}

.accent-2 {
  color: var(--p-red);
}

.accent-3 {
  color: #ffb81c;
}

.big-text {
  font-size: 27px;
}

.b-u {
  padding-bottom: 3px;
  border-bottom: #000 1px solid;
}

.b-r {
  padding-bottom: 2px;
  border-bottom: var(--p-red) 1px solid;
}

.underline {
  padding-bottom: 3px;
  border-bottom: var(--p-red) 2px solid;
}

/* bootstrap changes */
.btn-primary {
  background-color: #3464eb;
}

.btn-danger {
  background-color: var(--p-red);
}

.header_alert {
  display: none;
  position: absolute !important;
  width: 100%;
}

.product-display {
  margin: 40px auto;
  font-size: 16px;
}

.product-display hr {
  margin-top: 1rem;
  margin-bottom: 1rem;
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.7);
}

.big-picture {
  box-sizing: border-box;
  padding: 5px;
  border: #ccc 2px solid;
}

.big-picture img {
  width: 100%;
}

.thumbnails {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 10px 0 10px 0;
}

.thumbnails img {
  display: inline-block;
  width: 135px; /*100 80 33%*/
  height: 100px;
  max-width: 100%;
  border: #ccc 2px solid;
  margin: 3px;
}

.thumbnails img:focus,
.thumbnails img:active {
  border: #3464eb 2px solid;
}

.thumbnails img:hover {
  border-color: #3464eb;
  cursor: pointer;
}

.card-header img {
  float: right;
}

.card-header p {
  font-size: 20px;
}

.card-header ul {
  margin: 10px 0 0 20px;
  list-style-type: none;
  font-size: 18px;
}

.tc-info {
  border: var(--pnh-dark) 2px solid;
  font-size: 16px;
  font-weight: bold;
}

.tc-info h3 {
  margin: 0;
  padding: 10px 5px;
  background: #eee;
}

.tc-info .tops {
  padding-left: 0;
  padding-right: 0;
  border: #000 1px solid;
}
.tc-info .tops,
.tc-info .tops .field {
  text-align: center;
}

.tc-info .row {
  margin-left: 0;
  margin-right: 0;
}

.tc-info .field {
  padding-left: .25rem;
  padding-right: .25rem;
  background: #3464eb;
  color: #fff;
  text-align: right;
}

.tc-info .border {
  border: #000 1px solid !important;
}

@media (max-width: 992px) {
  .tc-info .field {
    text-align: left;
  }
}

.oem {
  font-weight: bold;
  margin-bottom: 20px;
}

.cogs li {
  display: flex;
  margin-bottom: 15px;
}

.cogs i {
  position: relative;
  top: -9px;
  margin: 0 20px 0 0;
  font-size: 30px;
}

ul.ship i {
  position: relative;
  top: 4px;
  margin-right: 1rem;
}

h1 {
  font-size: 35px;
  margin-bottom: 20px;
}

h3 {
  margin-bottom: 15px;
}

.more-text {
  display: none;
}

.show-button:hover,
.hide-button:hover {
  cursor: pointer;
}

.details h3 {
  margin: 30px 0 20px 0;
}

.add_to_cart {
  color: #fff !important;
  font-weight: bold;
  text-transform: uppercase;
  text-decoration: none;
  background: #3464eb;
  padding: 20px;
  border-radius: 5px;
  display: inline-block;
  border: none;
  transition: all 0.4s ease 0s;
}

.add_to_cart:hover {
  background: #434343;
  letter-spacing: 1px;
  -webkit-box-shadow: 0px 5px 40px -10px rgba(0, 0, 0, 0.57);
  -moz-box-shadow: 0px 5px 40px -10px rgba(0, 0, 0, 0.57);
  box-shadow: 5px 40px -10px rgba(0, 0, 0, 0.57);
  transition: all 0.4s ease 0s;
}

.in_cart {
  background: #df0000;
}

.in_cart:hover {
  background: #611414;
}

.number {
  cursor: pointer;
}

.minus,
.plus {
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 4px;
  padding: 8px 5px 8px 5px;
  border: 1px solid #aaa;
  display: inline-block;
  vertical-align: middle;
  text-align: center;

  box-sizing: unset;
  line-height: 20px;
}

.number input {
  height: 34px;
  width: 100px;
  background: #fff;
  text-align: center;
  font-size: 26px;
  border: 1px solid #aaa;
  border-radius: 4px;
  display: inline-block;
  vertical-align: middle;

  placeholder: unset;
  color: #000;
}

/* accordion */
.accordion-container {
  position: relative;
  margin: 10px auto;
}

.accordion-block {
  position: relative;
  width: 100%;
  background-color: var(--accent-color);
  color: var(--accent-text-color);
}

#performance_cart_options .accordion-block {
  background-color: var(--pnh-red);
  color: #fff;
}

#standard_cart_options .accordion-block {
  background-color: var(--pnh-blue);
  color: #fff;
}

.accordion-block > a {
  display: block;
  padding: 10px 15px;
  font-size: var(--fontSize);
  text-decoration: none;
  color: inherit;
  font-weight: bold;
  border-bottom: 1px solid #ddd;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

.accordion-block > a i {
  position: absolute;
  top: -0.2rem;
  right: 1rem;
  font-size: 2.2rem;
}
.accordion-block > a.active {
  background-color: var(--pnh-dark);
  color: #fff;
}
.accordion-content {
  padding: 20px 0 15px 30px;
  color: var(--pnh-dark);
  background-color: #fff;
  border-bottom: 1px solid #ddd;
  display: none;
}
.accordion-content p {
  padding: 10px 15px;
  margin: 0;
}
.icon-plus-sign:before {
  content: "\e70c";
}
.icon-minus-sign:before {
  content: "\e70d";
}

.accordion-content.highlight li {
  padding: 10px 0 10px 10px;
  margin: 0;
}

.accordion-content.highlight li:nth-child(odd) {
  background-color: rgba(52, 100, 235, 0.2);
}

.accordion-content.highlight li:nth-child(even) {
  background-color: #eee;
}

.accordion-content.highlight li .b {
  font-size: 20px;
}

.accordion-content.highlight li .adjust {
  position: relative;
  top: -2px;
}

.testimonials {
  margin-top: 50px;
}

.testimonials .company {
  font-size: 20px;
}

.testimonials p {
  font-size: 16px;
}

.testimonials h2,
.testimony {
  margin-bottom: 30px;
}

@media screen and (max-width: 768px) {
  h1 {
    font-size: 28px;
  }

  .card-header img {
    display: block;
    float: unset;
    margin: 0 auto;
  }

  .card-header ul {
    margin: 0;
  }

  .accordion-content {
    padding: 20px 0;
    background-color: #fff;
    border-bottom: 1px solid #ddd;
    display: none;
  }

  .testimonials .company {
    font-size: 16px;
  }
  .testimonials .big-text {
    font-size: 20px;
    font-weight: bold;
  }
}

@media screen and (max-width: 576px) {
  h3 {
    font-size: 20px;
  }

  .big-text {
    font-size: 20px;
  }
}

.blue_u {
  padding-bottom: 1px;
  border-bottom: #3464eb 2px solid;
}

.red_u {
  padding-bottom: 1px;
  border-bottom: var(--p-red) 2px solid;
}

.tc_quantity .tc_label {
  font-weight: bold;
  font-size: 1.2rem;
}

.tc_quantity input {
  width: 60px;
}

.tc_quantity .add_item {
  font-size: 30px;
  line-height: 30px;
}

.tc_quantity .remove_item {
  font-size: 30px;
  line-height: 30px;
}

.tc_quantity .remove_item div {
  margin-top: -5px;
}

.tc_quantity .add_item,
.tc_quantity .remove_item {
  width: 35px;
  height: 35px;
  overflow: hidden;
}

/* shopping cart */
.shopping_cart {
  min-height: 40vh;
}
.shopping_cart .card-body > .row {
  border-bottom: #000 3px solid;
  margin-bottom: 3rem;
  padding-bottom: 1rem;
}
.shopping_cart .card-body > .row:nth-child(odd) {
  background-color: var(--p-ltblue);
}
.shopping_cart .card-body > .row:nth-child(even) {
  background-color: var(--lgray);
}
.shopping_cart .card-body > .row:hover {
  background-color: var(--lb-highlight);
}
.shopping_cart .card-body > .row:hover .text-success {
  color: var(--p-blue) !important;
}
.shopping_cart .card-body > .row:last-child {
  margin-bottom: 0 !important;
}

ul.item_stats {
  padding-left: 1.5rem;
  list-style-type: circle;
}

.shopping_cart_buttons {
  display: flex;
  flex-wrap: wrap;
}

.shopping_cart_buttons .btn {
  flex-basis: 100%;
}

/* checkout */

@media only screen and (min-width: 768px) {
  .shopping_cart .card-body > .row {
    border-bottom: #000 1px solid;
    margin-bottom: 0.7rem;
    padding-bottom: unset;
  }

  .shopping_cart .column {
    border-right: var(--lgray) 2px solid;
  }
  .shopping_cart .card-body > .row:nth-child(even) .column {
    border-right: var(--p-ltblue) 2px solid;
  }
  .shopping_cart .column:last-child {
    border-left: none;
  }
  .sc_qty_con {
    text-align: center;
  }
  .sc_qty {
    max-width: 70px;
    flex-flow: wrap;
    margin: 0 auto;
  }
  .sc_qty input {
    flex-basis: 100%;
  }
  .sc_qty .btn {
    flex-basis: 50%;
  }
  .shopping_cart .options {
    display: flex;
    flex-wrap: wrap;
  }
}

@media only screen and (min-width: 992px) {
  .sc_qty_con {
    padding-left: 0.25rem !important;
    padding-right: 0 !important;
  }
  #orderNotes {
    height: 200px;
  }
}

/* core options radio button */
.funkyradio div {
  clear: both;
  overflow: hidden;
}

.funkyradio label {
  display: flex;
  width: 100%;
  border-radius: 3px;
  border: 1px solid #d1d3d4;
  font-weight: normal;

  /* unset crazy css */
  font-size: 1rem;
  font-weight: normal;
  font-family: inherit;
  text-transform: none;
  letter-spacing: unset;
  color: #000;
  margin-bottom: unset;
  cursor: pointer;
}

.funkyradio label > span {
  margin-left: 0.5rem;
  padding: 0.5rem 0.5rem 0.5rem 0;
}

.funkyradio input[type="radio"]:empty,
.funkyradio input[type="checkbox"]:empty {
  display: none;
}

.funkyradio input[type="radio"]:empty ~ label,
.funkyradio input[type="checkbox"]:empty ~ label {
  position: relative;
  /* line-height: 2.5em; */
  /* text-indent: 3.25em; */
  margin-bottom: 1rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.funkyradio input[type="radio"]:empty ~ label:before,
.funkyradio input[type="checkbox"]:empty ~ label:before {
  position: relative;
  flex-shrink: 0;
  display: block;
  top: 0;
  bottom: 0;
  left: 0;
  content: "";
  width: 2.5em;
  background: #d1d3d4;
  border-radius: 3px 0 0 3px;
}

.funkyradio input[type="radio"]:hover:not(:checked) ~ label,
.funkyradio input[type="checkbox"]:hover:not(:checked) ~ label {
  color: #000;
}

.funkyradio input[type="radio"]:hover:not(:checked) ~ label:before,
.funkyradio input[type="checkbox"]:hover:not(:checked) ~ label:before {
  content: "\2714";
  text-indent: 0.9em;
  padding-top: 0.5rem;
  color: #000;
  background-color: #fff;
}

.funkyradio input[type="radio"]:checked ~ label,
.funkyradio input[type="checkbox"]:checked ~ label {
  color: #000;
  background-color: #fff;
}

.funkyradio input[type="radio"]:checked ~ label:before,
.funkyradio input[type="checkbox"]:checked ~ label:before {
  content: "\2714";
  text-indent: 0.9em;
  padding-top: 0.5rem;
  color: #333;
  background-color: #ccc;
}

.funkyradio input[type="radio"]:focus ~ label:before,
.funkyradio input[type="checkbox"]:focus ~ label:before {
  box-shadow: 0 0 0 3px #999;
}

.funkyradio-default input[type="radio"]:checked ~ label:before,
.funkyradio-default input[type="checkbox"]:checked ~ label:before {
  color: #fff;
  background-color: var(--p-blue);
}

#performance_build
  .funkyradio-default
  input[type="radio"]:checked
  ~ label:before,
#performance_build
  .funkyradio-default
  input[type="checkbox"]:checked
  ~ label:before {
  color: #fff;
  background-color: var(--p-red);
}

/* odering options */
.options-btn {
  background: #3464eb;
  color: #fff;
  cursor: pointer;
  font-size: 1.3rem;
  padding: 0.5rem 1rem;
  border: 0;
  transition: all 0.5s;
  border-radius: 10px;
  width: auto;
  position: relative;
}

#btn_performance_options {
  background: var(--p-red);
}

.options-btn::after {
  content: "\e72f";
  font-family: "font-icons";
  font-weight: bold;
  position: absolute;
  right: 5px;
  top: 49%;
  opacity: 0;
  transform: translate(-50%, -50%);
}
.options-btn:hover {
  background: #28a745;
  transition: all 0.5s;
  border-radius: 10px;
  box-shadow: 0px 6px 15px #28a745;
  padding: 0.7rem 2.7rem 0.7rem 1.2rem;
  color: #fff;
}

#btn_performance_options:hover {
  background: #28a745;
}

.options-btn:hover::after {
  opacity: 1;
  transition: all 0.5s;
  color: #ffffff;
}

/* perf option list */
.ptc_options li {
  margin-bottom: 0;
  padding: 0.5rem 1.25rem 0 1.25rem;
}

@media (min-width: 992px) {
  .ptc_options {
    flex-direction: row !important;
    flex-wrap: wrap;
  }
  .ptc_options li {
    display: flex;
    width: 50%;
  }

  .perf_features {
    columns: 2;
  }
}

/*@media (min-width: 1200px) {
  .ptc_options li{
    width: 33%;
  }
}
*/
@media (min-width: 1200px) {
  .ptc_options li {
    width: 50% !important;
  }
}

.ptc_options li {
  margin-bottom: 0;
  padding: 0.5rem 0.25rem 4px 0 0.25rem;
}

.ptc_options i.bi {
  color: var(--p-red);
}

.ptc_options a {
  text-decoration: underline !important;
}

/* converter info page testimony */
@font-face {
  font-family: "Romantica";
  src: url("/info/Romantica.ttf");
  font-display: swap;
}

.testimony {
  background: #ccc;
  padding: 20px 5% 20px 5%;
  border-radius: 40px;
}

.black-box {
  display: inline-block;
  position: relative;
  top: -40px;
  background-color: #333;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
}

.company {
  font-family: "Didot", serif;
  font-size: 35px;
}

.signature {
  font-family: "Romantica", "Arial";
  font-size: 50px;
  font-weight: bold;
}

.main-image,
.no-image {
  width: 300px;
  height: 200px;
  max-width: 100%;
  border-radius: 40px;
  margin: 0 auto;
  display: block;
  border: #eee 5px solid;
}

.no-image {
  font-size: 100px;
  line-height: 200px;
  background: #3464eb;
  color: #fff;
  text-align: center;
}

.testimony-text {
  font-family: "Trebuchet MS", sans-serif;
  font-size: 18px;
}

.testimony-text p {
  margin-bottom: 10px;
}

@media screen and (max-width: 576px) {
  .company {
    font-size: 25px;
  }

  .signature {
    font-size: 30px;
  }
}

@media screen and (min-width: 992px) {
  .black-box {
    left: -40px;
  }
}

/* new version */
p {
  margin: unset;
  margin-bottom: 1rem;
}

.list {
  --fontSize: 1rem;
  --lineHeight: 1.6;
  --iconSize: calc(var(--fontSize) * 2);
  --baselineDistance: calc(var(--fontSize) * var(--lineHeight));
  --iconOffset: calc((var(--baselineDistance) - var(--iconSize)) * 0.5);
  font-size: var(--fontSize);
  line-height: var(--lineHeight);
  list-style: none;
  padding-left: 0;
}

.list__item {
  margin-bottom: 2rem;
  position: relative;
}

.list__item::before {
  font-family: bootstrap-icons;
  color: #d40000;
  display: inline-block;
  font-size: var(--iconSize);
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

.list--before .list__item {
  padding-left: 60px;
  text-indent: -30px;
}

.list--before .list__item::before {
  margin-right: 22px;
}

.list--after .list__item {
  padding-left: calc(var(--iconSize) + 0.5em);
}

.list--after .list__item::before {
  left: 0;
  position: absolute;
  top: var(--iconOffset);
}

.list__item P:first-of-type {
  font-size: 1.2rem;
  font-style: italic;
  margin-top: 1rem;
  padding: 0.7rem 8px;
  text-align: center;
  background: linear-gradient(#3464eb 0 0) top right / max(70px, 10%) 2px,
    linear-gradient(#3464eb 0 0) right top / 2px 60%,
    linear-gradient(#3464eb 0 0) bottom left / max(70px, 10%) 2px,
    linear-gradient(#3464eb 0 0) left bottom / 2px 60%;
  background-repeat: no-repeat;
}

@media (min-width: 576px) {
  .list__item P:first-of-type {
    text-align: left;
    padding: 0 1rem 5px 1rem;
    background: linear-gradient(#aaa 0 0) bottom left / max(70px, 10%) 2px,
      linear-gradient(#aaa 0 0) left bottom / 2px 20px;
    background-repeat: no-repeat;
  }
}

/*perf upgrade content format*/

.upgrade-title {
  position: relative;
  font-size: 1.3rem;
  font-weight: bold;
  font-style: italic;
  margin-bottom: 0.7rem;
  border-bottom: 3px solid #d40000;
}

.upgrade-title::after {
  display: none;
  position: absolute;
  top: 50%;
  line-height: 0;
  font-family: bootstrap-icons;
  font-size: calc(var(--iconSize) * 1.2);
  content: "\F63B";
  font-style: italic;
  font-weight: lighter;
  color: #3464eb;
}

@media (min-width: 576px) {
  .upgrade-title::after {
    display: initial;
  }
}

.pnh-blue {
  color: #3464eb;
}

.perf-red {
  color: #d40000;
}

.perf-hr {
  width: 50%;
  margin: 1.2rem auto;
  border-top: 2px solid #555;
}

/* parallax */
.perf-parallax {
  overflow: auto;
  width: 100%;
  margin-bottom: 1rem;
  background: linear-gradient(
    to bottom,
    rgba(51, 51, 51, 1) 35%,
    rgba(212, 0, 0, 1) 50%,
    rgba(51, 51, 51, 1) 65%
  );
  background-attachment: fixed;
  background-size: 100% 90%;
  background-position: 0px 200%;
}

.perf-parallax .para-content-wrap {
  margin: 2.5rem auto;
  color: #fff;
  text-align: center;
}

.para-content-wrap .perf-hr {
  margin: 2.5rem auto;
  border-color: #fff;
  width: 50%;
}

.red-underline-text {
  text-decoration: underline;
  text-decoration-color: #d40000;
  text-decoration-thickness: 2px;
}

/*perf upgrade options icons*/
.specific-upgrade-feature::before {
  content: "\F4B6";
}

.tc-tabs nav,
.tc-tabs nav * {
  all: unset;
}

.tc-tabs nav div {
  display: block;
}

/* .tc-tabs:has(#menu_button_2:checked) {
        --oem-image-opacity: 0;
        --perf-image-opacity: 1;
    }

    .tc-tabs:has(#menu_button_2:not(:checked)) {
        --oem-image-opacity: 1;
        --perf-image-opacity: 0;
    } */

#oem_picture {
  position: relative;
  opacity: var(--oem-image-opacity);
  min-height: calc(400px + 1.5rem);
  z-index: 2;
}

#performance_picture {
  display: flex;
  justify-content: center;
  position: absolute;
  top: 0;
  width: 100%;
  opacity: var(--perf-image-opacity);
  z-index: var(--perf-image-opacity);
}

label {
  all: unset;
}

.dark-texture-bg {
  background: linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px,
    linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px,
    linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px,
    linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px,
    linear-gradient(90deg, #1b1b1b 10px, transparent 10px),
    linear-gradient(
      #1d1d1d 25%,
      #1a1a1a 25%,
      #1a1a1a 50%,
      transparent 50%,
      transparent 75%,
      #242424 75%,
      #242424
    );
  background-color: #131313;
  background-size: 20px 20px;
}

.tc-tabs {
  /* tab switching vars */

  position: relative;
  overflow: hidden;
  margin: 0 auto;
  width: 100%;
}

/* radio switches */
.tc-tabs input[type="radio"] {
  position: absolute;
  opacity: 0;
  visibility: hidden;
  left: -9999;
}

.primary-row:has(.tc-tabs-list li:nth-of-type(1) input[type="radio"]:checked) {
  --tab-1-vis: block;
  --tc-tab-border: var(--pnh-blue);

  --oem-image-opacity: 1;
  --perf-image-opacity: 0;
}

.primary-row:has(.tc-tabs-list li:nth-of-type(2) input[type="radio"]:checked) {
  --tab-2-vis: block;
  --tc-tab-border: var(--pnh-red);

  --oem-image-opacity: 0;
  --perf-image-opacity: 1;
}

.primary-row:has(.tc-tabs-list li:nth-of-type(3) input[type="radio"]:checked) {
  --tab-3-vis: block;
  --tc-tab-border: var(--pnh-purple);

  --oem-image-opacity: 1;
  --perf-image-opacity: 0;
}

.tc-tabs .tc-tab-content :is(h1, h2, h3, h4, h5, h6) {
  color: #444;
}

.tc-tabs .tc-tab-content {
  font-size: var(--fontSize);
  color: #555;
  border: 2px solid var(--tc-tab-border);
  border-bottom-left-radius: 0.7rem;
  border-bottom-right-radius: 0.7rem;
  border-top: none;
}

.tc-tabs .tc-tab-content section {
  padding: 0.5rem;
  overflow: auto;
}

.tc-tabs .tc-tab-content p {
  margin-bottom: 1rem;
}

/* tab section visibility */
.tc-tabs .tc-tab-content section:nth-of-type(1) {
  display: var(--tab-1-vis);
}

.tc-tabs .tc-tab-content section:nth-of-type(2) {
  display: var(--tab-2-vis);
}

.tc-tabs .tc-tab-content section:nth-of-type(3) {
  display: var(--tab-3-vis);
}

.tc-tab-content .underline-element {
  border-bottom: var(--tc-tab-border) 2px solid;
  padding-bottom: 1px;
}

.tc-tabs nav ul {
  position: relative;
  display: flex;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  flex-flow: row wrap;
  justify-content: center;
  /* Bottom-align the tabs so the taller active tab grows UPWARD while the
     inactive tabs stay flush with the content panel below. Without this the
     default align-items:stretch would equalize all tab heights and hide the
     active tab's extra height. */
  align-items: flex-end;
}

.tc-tabs nav ul li {
  position: relative;
  z-index: 1;
  display: block;
  margin: 0;
  text-align: center;
  flex: 1;
}

.tc-tabs nav label {
  position: relative;
  display: block;
  padding: 0.25rem 0.25rem;
  overflow: hidden;
  font-size: 1rem;
  font-weight: bold;
  line-height: 1.5;
  cursor: pointer;
}

.tc-tabs nav label span {
  vertical-align: middle;
}

.tc-tabs nav label:focus {
  outline: none;
}

.tc-tabs nav li {
  background-color: #fff;
  border: 2px solid var(--pnh-dark);
  border-top-left-radius: 0.7rem;
  border-top-right-radius: 0.7rem;
  border-bottom: 2px solid var(--tc-tab-border) !important;
  user-select: none;
  transition: background-color 0.4s ease;
}

.tc-tabs nav li:not(:last-child) {
  border-right: none;
}

.tc-tab-content .tab-btn {
  font-size: var(--fontSize);
  font-weight: bold;
}

.tc-tab-content .tab-btn:not(:hover) {
  background-color: #fff;
}

.tc-tabs nav li:nth-of-type(1) {
  --tab-bg-color: var(--pnh-blue);
  border: 2px solid var(--pnh-blue);
}

.tc-tabs nav li:nth-of-type(2) {
  --tab-bg-color: var(--pnh-red);
  border: 2px solid var(--pnh-red);
}

.tc-tabs nav li:nth-of-type(3) {
  --tab-bg-color: var(--pnh-purple);
  border: 2px solid var(--pnh-purple);
}

/* Filled tab look: all three tabs — OEM Reman (blue), High Performance (red)
   and Wholesale (dark) — render with a solid colored background + white text
   by default instead of a plain white tab with a colored outline and grey
   text, so each reads as a proper button whether or not it's the active tab.
   The currently-selected tab is distinguished by the :has(...:checked) rule
   further down (which drops its bottom border so it connects to the content
   panel and grows taller to stand out). */
.tc-tabs nav li:nth-of-type(1),
.tc-tabs nav li:nth-of-type(2),
.tc-tabs nav li:nth-of-type(3) {
  background-color: var(--tab-bg-color);
  color: #fff;
}

/* .tc-tabs nav li {
  background: none;
  border-bottom: 2px solid var(--tc-tab-border) !important;
  user-select: none;
  transition: background-color 0.4s ease;
} */

.tc-tabs nav li:hover {
  color: #fff;
  background-color: var(--tab-bg-color);
}

.tc-tabs nav li:has(input[type="radio"]:checked) {
  background: var(--tc-tab-border);
  color: #fff;
  border-bottom: none;
  /* Lift the active tab above its neighbours so it overlaps them slightly,
     reinforcing that it's the selected one along with the extra height below. */
  z-index: 2;
}

/* Make the ACTIVE tab visibly taller than the inactive ones so it's obvious
   which tab the user is on. The tab's height comes from its label padding, so
   we add vertical padding to the checked tab's label. (Inactive labels keep
   the smaller 0.25rem top/bottom padding set on .tc-tabs nav label above.) */
.tc-tabs nav li:has(input[type="radio"]:checked) label {
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
}

/* ---------------------------------------------------------------------------
   Live header-bar restyle when the High Performance / Wholesale tab is active.
   Selecting either of those tabs swaps the top header bar to the Racing /
   Performance look (carbon header texture + red top-bar) WITHOUT a page
   reload; selecting OEM Reman reverts to the default Precision Blue header.
   The .perf-header class is toggled on #header by JS in the tc page menu.
   These rules duplicate the relevant bits of red-pages.css because that
   stylesheet is only loaded server-side when the page-type cookie is already
   PERFORMANCE — a normal converter page doesn't load it, so the performance
   header look has to be self-contained here. A transition keeps the colour /
   texture change from snapping in harshly. --------------------------------- */
#header {
  transition: background-color 0.35s ease, background-image 0.35s ease;
}
#header #top-bar {
  transition: background-color 0.35s ease;
}

#header.perf-header {
  background-image: url("../images/carbon.png");
}
#header.perf-header #top-bar {
  background-color: var(--p-red);
}

/* Explicit Precision-Blue header when NOT in the perf state. This is needed
   because a converter page reached with the PERFORMANCE page-type cookie also
   loads red-pages.css server-side (which forces #top-bar red). When the user
   then clicks OEM Reman we remove .perf-header, but red-pages.css would keep
   the bar red on its own. The extra #header + :not() specificity here beats
   red-pages.css so the bar returns to blue and the carbon texture is cleared. */
#header:not(.perf-header) {
  background-image: none;
}
#header:not(.perf-header) #top-bar {
  background-color: var(--p-blue);
}

/* tc-tabs converter stats box */
.tc-tab-stats {
  border-color: var(--pnh-dark);
  border-radius: 0.7rem;
  overflow: hidden;
}

.tc-tab-stats .field {
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--pnh-dark);
  border-bottom: #fff 1px solid;
}

.tc-tab-stats .right-column {
  background: #fff;
  border: none;
}

.tc-tab-stats .field {
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--pnh-dark);
  border-bottom: none;
}

@media (min-width: 992px) {
  .tc-tab-stats .field {
    border-bottom: #fff 1px solid;
  }

  .tc-tab-stats .right-column {
    border-top: #000 2px solid;
  }

  .tc-tab-stats .right-column.top {
    border-top: none;
  }
}

/* list-modified bulleted list */
.list-modified {
  --lineHeight: 1.6;
  --modifiedize: calc(var(--fontSize) * 1.5);
  --baselineDistance: calc(var(--fontSize) * var(--lineHeight));
  --modifiedOffset: calc((var(--baselineDistance) - var(--modifiedize)) * 0.5);

  font-size: var(--fontSize);
  line-height: var(--lineHeight);
  list-style: none;
  padding-left: 0;
}

.list-modified li {
  margin-bottom: 1rem;
  position: relative;
}

.list-modified li::before {
  font-family: bootstrap-icons;
  content: "\F3E5";
  color: var(--tc-tab-border);
  display: inline-block;
  font-size: var(--modifiedize);
  font-weight: bold;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

.list-modified-before li {
  padding-left: 60px;
  text-indent: -30px;
}

.list-modified-before li::before {
  margin-right: 22px;
}

.list-modified-after li {
  padding-left: calc(var(--modifiedize) + 0.5em);
}

.list-modified-after li::before {
  left: 0;
  position: absolute;
  top: var(--modifiedOffset);
}

@media (min-width: 992px) {
}

.tab-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-around;
  gap: 15px;
  padding-right: 0;
  padding-left: 0;
}

.tab-btn::before,
.tab-btn::after {
  content: "";
}

.tab-btn i {
  flex: 1 0;
}

.tab-btn span {
  flex: 0 1 300px;
}