* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  font-family: 'Tahoma', helvetica;
  font-size: 16px;
  margin: 0;
  padding: 0;
  background-color: #fff;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Fredoka", sans-serif;
}

main {
  /*padding: 2rem;*/
}

.banner{
  max-height:197px;
}

img {
  max-width: 100%;
  height: auto;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
}

.wrap {
  max-width: 1150px;
  padding: 0 10px;
  margin: 0 auto;

}


.wrap-header {
  padding-bottom: 5px !important;
  padding-top: 5px !important;
}

.header {
  padding: 0px 0px 10px 0;
  background-color: #2a4c99;
}

.header-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.header #logo {
  width: 225px;
  /* height: auto;
  padding: 0 !important; */
}

.header-cart {
  color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-weight: 700;
}

.header-cart img {
  margin-right: 20px;
}

.navbar {
  background-color: #e8e8e8;
  padding: 6px 0;
}

.navbar ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-column-gap: 10px;
  -moz-column-gap: 10px;
  column-gap: 10px;
}

.navbar ul li {
  color: #000;
  font-size: 18px;
  font-weight: 700;
}

.hero-sec {
  /* background-image: url('../images/banbacks.jpg'); */
  background-image: url('https://plates.carplatesdirect.com/assets/carplatesdirect/images/banbacks.jpg');
  background-repeat: repeat-x;
  color: #fff;
  background-size: contain;
  /* height: 149px; */
  /* height: 200px; */
}

.hero-sec-under {
  background-color: white;
  /* background-image: url('../images/banbacks.jpg'); */
  /* height: 100px; */
  color: black !important;
  /* margin-top: -5px; */

}

.hero-sec-under h1 {
  padding-left: 10px;
  padding-right: 10px;
}


.hero-sec-under .h1-4d {
  font-size: 27px;
}

.hero-sec-under .h1-4d .big {
  font-size: 60px;
}

.hero-sec-under .h1-4d .med {
  font-size: 51px;
}

.hero-sec-under .h1-4d .small {
  /* font-size: 35px; */
  font-size: 45px !important;
}

.hero-sec-under .hero-inner h1{
  font-weight:600;
}


.hero-inner {
  margin-top:20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  /* height: 149px; */
  /* height: 200px; */
}

.hero-sec .highlight {
  color: #ffc10a;
}

.hero-img {
  width: auto;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.h1-mob {
  display: none;
}

.hero-sec h1,
.hero-sec p {
  font-family: "Fredoka", sans-serif;
  font-weight: 700;
  line-height: 1;
}

/* .hero-sec p {
  margin-top: 20px;
} */

.hero-sec h1 .big {
  font-size: 60px;
  /* font-size: clamp(20px, 60px, 60px); */
}

.hero-sec h1 .med {
  font-size: 51px;
  /* font-size: clamp(16px, 51px, 51px); */
}

.hero-sec h1 .small {
  font-size: 35px;
  /* font-size: clamp(10px, 35px, 35px); */
}

.hero-sec p {
  text-align: right;
}

.hero-sec p .big {
  font-size: 59px;
}

.hero-sec p .med {
  font-size: 48px;
}

.hero-sec p .small {
  /* font-size: 29px; */
  font-size: 28px;
}

.builder {
  padding: 20px 0;
}

.plates-sec {
  padding: 50px 0;
}

.plates-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.plates-col {}

.plates-rating {
  color: #6F6E6E;
}

.plates-rating-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: 40px;
}

.plates-rating-header h2 {
  font-family: Tahoma, Helvetica, sans-serif;
  font-size: 48px;
  margin-right: 8px;
}

.plates-rating-header p {
  margin-right: 16px;
}

.plates-rating li {
  font-size: 17px;
  line-height: 1.7;
  border: 1px solid #e3e3e3;
  padding: 30px 30px 10px 30px;
  border-radius: 4px;
  max-width: 402px;
  width: 100%;
  margin-bottom: 30px;
}

.plates-rating-star{
    color: #404040 !important;
}

.plates-rating-star img {
  max-width: 201px;
  width: 150px;
  margin-right: 8px;
}

.plates-rating-date {
  font-weight: 700;
  margin: 20px 0 5px;
}

.plates-rating li p {
  margin-bottom: 16px;
}

.plates-listing {
  max-width: 581px;
  width: 100%;
  padding-top: 20px;
}

.plates-listing h2 {
  color: #335ec1;
  position: relative;
  text-align: center;
  font-family: "Leelawadee UI", Arial !important;
  margin-bottom: 50px;
}

.plates-listing h2:before {
  background-color: #cdcdcd;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  top: 50%;
  width: 100%;
}

.plates-listing h2 span {
  position: relative;
  z-index: 1;
  background-color: #fff;
  padding: 6px 15px;
}

.plates-listing h3 {
  color: #333;
  font-family: 'Tahoma', helvetica;
  font-size: 17px;
  font-weight: 700;
  text-align: center;
}

.plates-listing img {
  display: block;
  margin: 20px 0 40px;
}

.footer {
  background-color: #2a4c99;
  color: #fff;
  padding: 28px 0 21px;
}

.footer p {
  margin-bottom: 16px;
  line-height: 1.5;
}

.footer-logo {
  width: 200px;
  margin-bottom: 30px;
}

.footer-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.footer-left {
  width: 30%;
}

.footer-left p {
  max-width: 300px;
}

.footer-center {
  width: 50%;
  padding-left: 30px;
}

.footer-right {
  width: 20%;
}

.footer-center,
.footer-right {
  padding-top: 40px;
}

.footer-center ul {
  margin-bottom: 30px;
}

.footer-center li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: 10px;
  font-family: "Fredoka", sans-serif;
  font-size: 18px;
  font-weight: 600;
}

.footer-center li img {
  width: 26px;
  margin-right: 10px;
}

.footer-right {
  text-align: right;
}

.footer-right h3 {
  font-size: 25px;
}

.footer-right p {
  margin: 20px 0;
}

.footer-right a {
  font-size: 19px;
  color: #fff;
}

.footer-right a:hover,
.footer-copy a:hover {
  text-decoration: underline;
}

.footer-copy {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 14px;
  margin: 30px 0 20px;
  line-height: 1.5;
}

.footer-copy li:not(:first-child):before {
  content: '|';
  margin: 0 5px;
  display: inline-block;
}

.footer-copy a {
  color: #fff;
}

.site-content h1,
h2 {
  margin-bottom: 15px;
}

.site-content h1 {
  /* font-size: 60px; */
  font-size: 40px;
}

.site-content h2 {
  font-weight: 500;
}

.site-content p {
  margin-bottom: 15px;
  line-height: 1.5;
}

.fittingol {
  margin-left: 30px;
  list-style-type: decimal !important;
  margin-bottom: 10px;
}

.fittingol li {
  margin-bottom: 5px;
}

.fittingul {
  margin-left: 30px;
  list-style: circle !important;
  margin-bottom: 10px;
}

.fittingul li {
  margin-bottom: 5px;
}

.ul-no-dot {
  list-style: none !important;
}

.contactinfo {
  width: 309px;
  height: 30px;
  float: right;
  text-align: right;
  color: #fff;
  line-height: 24px;
  margin-top: 19px;
}

.contactemail a {
  font-size: 20px;
  font-weight: bold;
  color: #fff;
}

.headright .buttonLabel {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #fff;
}

.basket-header-img {
  margin-right: 10px;
}

.headerBasket a {
  display: flex;
  align-items: center;
}

.small-index {
  font-size: 35px;
}

#maincontent #builder-menu #builder-menu-internal #builder-reg .entries {
  border: 7px solid #27b523!important;
}

.nameplate-main-container #builder-actions {
  background-color: white !important;
}

.nameplate-main-container #maincontent {
  background-color: white !important;
}

#pbregletter1::placeholder {
  color: #27b523 !important; /* Change to your desired color */
  opacity: 1 !important;  /* Optional: make sure it's fully visible */
}

.hero-inner .img-banner-custom-pages{
  max-width: 370px;
  height: 200px;
  width: 100%;
  /* height: 100%; */
}

.hero-inner .img-banner-custom-pages{
 object-fit: fill;
  /* height: 100%; */
}

.checkout-btn{
  background-color: #27b523 !important;
}

.contactemail a{
  color: white !important;
}

.plates-rating-header p{
  margin-top: 42px;
}
.plates-rating-header img{
  margin-top: 25px;
  /* width: 250px; */
  width: 200px;
}
.plates-rating-star img{
      margin-top: -10px;
}


 @media only screen and (min-width: 1025px) and (max-width: 1053px) {

   .hero-sec h1 .big {
     font-size: calc(60px * .9);
   }

   .hero-sec h1 .med {
     font-size: calc(51px * .9);
   }

   .hero-sec h1 .small {
     font-size: calc(35px * .9);
   }
 }

 @media (max-width: 1024px) {
   /* .mob-text {
     margin-left: -50px !important;
   } */

   .hero-inner {
     height: 150px;
   }

   .hero-sec h1 .big {
     font-size: calc(60px * .7);
   }

   /* .hero-sec h1 .med {
    font-size: calc(51px * .7);
  } */
   .hero-sec h1 .med {
     font-size: calc(51px * .7);
   }

   .hero-sec h1 .small {
     font-size: calc(35px * .7);
   }

   /* .hero-sec h1 .small {
    font-size: calc(35px * .7);
  } */
   .hero-sec p .big {
     font-size: calc(59px * .7);
   }

   .hero-sec p .med {
     font-size: calc(48px * .7);
   }

   .hero-sec p .small {
     font-size: calc(29px * .7);
   }

   .plates-rating li {
     max-width: 100%;
   }

   .plates-listing {
     max-width: 100%;
   }

   .plates-listing img {
     margin-left: auto;
     margin-right: auto;
   }
 }

 @media (max-width: 1169px) {
   .countdown-bar {
     left: 0% !important;
   }
 }

 .countdown-bar {
   color: white;
   font-weight: bold;
   font-size: 20px;
   /* padding: 12px 20px; */
   text-align: center;
   position: relative;
   left: 7%;
   padding: 0px 20px 20px;
 }

 .countdown-bar span {
   color: #ffcc00;
   font-weight: bold;
   font-size: 24px;
   margin-left: 8px;
 }

 @media (max-width: 768px) {

  .cpd-steps{
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  }

   .builder {
     padding: unset !important;
   }

   .footer-left,
   .footer-center,
   .footer-right {
     width: 50%;
     padding-left: 0;
   }

   .footer-right {
     text-align: left;
   }

   .mobile-countdown-bar {
     background-color: #e9e9e9;
     /* light grey background */
     color: black;
     font-weight: bold;
     font-size: 16px;
     /*padding: 10px 16px;*/
     text-align: center;
     font-family: Arial, sans-serif;
     display: none;
     /* default hidden */
   }

   .mobile-countdown-bar span {
     font-weight: bold;
     font-size: 24px;
     margin-left: 8px;
   }

   #mobileCountdownBar {
     display: block !important;
   }

   #countdownBar {
     display: none !important;
   }

   .desktopusps {
     display: none !important;
   }

   .site-content h1 {
     font-size: 40px;
   }
 }

 @media (max-width: 767px) {

   .med,
   .small,
   .big {
     color: white !important;
   }

   .custom-color-small {
     color: #ffc10a !important;
   }

   /* .hero-inner h1 {
    margin-left: -30px !important;
  } */

   .header {
     /* 12px -> 6px to offset the USP icon strip above the preview. */
     padding: 6px 0;
   }

   .header #logo {
     /* 180px -> 137px: keeps the 353:106 aspect, 54px -> 41px tall. */
     width: 137px !important;
   }

   .navbar ul li {
     font-size: 14px;
   }

   .hero-inner {
     justify-content: center;
     height: 100px;
   }

   .h1-desk,
   .hero-sec p {
     display: none;
   }

   .h1-mob {
     display: block;
   }

   .hero-img {
     order: 1;
   }

   .hero-sec h1 {
     order: 2;
   }

   .hero-sec h1 .big {
     font-size: 30px;
   }

   .hero-sec h1 .highlight {
     /* font-size: 33px; */
     font-size: 38px;
   }

   .footer-inner {
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
     -ms-flex-direction: column;
     flex-direction: column;
   }

   .footer-left,
   .footer-center,
   .footer-right {
     width: 100%;
     padding-left: 0;
   }
 }

 @media (max-width: 480px) {
   /* .header .logo {
     width: 100px !important;
   } */

   .navbar ul li {
     font-size: 12px;
   }

   /* .hero-inner {
     zoom:  0.3;
   } */
 }

 @media only screen and (min-width: 1061px) and (max-width: 1169px) {
   .headright {
     width: 110px;
     float: right;
     margin-top: 25px;
   }
 }

 @media only screen and (min-width: 900px) and (max-width: 1069px) {
   .headright {
     width: 110px;
     float: right;
     margin-top: 25px;
   }

   /* .contactinfo {
     display: none;
   } */
 }

 @media only screen and (min-width: 1170px) {
   .headright {
     width: 309px;
     float: right;
   }

 }

 @media only screen and (min-width: 325px) and (max-width: 899px) {
   /* .contactinfo {
     display: none !important;
   } */
 }

  /* @media (min-width: 768px) {
   .bannerouter {
     margin-top: -30px !important;
   }

 } */

 @media (min-width: 767px) {
   .mobile-countdown-bar {
     display: none !important;
   }

 }

 @media (max-width: 768px) {
    form#builder-form{
      margin-bottom: unset !important;
    }
    .plates-sec{
        margin-top: -35px;
        padding: unset !important;
    }

   .hero-sec {
     height: unset !important;
   }
    ul.ul-no-dot{
      margin-left: unset !important;
    }
    .plates-rating-header {
      margin-bottom: unset !important;
      margin-top: 10px;
    }
    .plates-rating-header img{
      width: 170px !important;
    }
 }

 @media only screen and (min-width: 790px) and (max-width: 1100px) {
   .hero-sec h1 .small-4d {
     font-size: 35px !important;
   }

   .hero-sec p .small-4d {
     font-size: 35px !important;
   }

   .hero-sec h1 .med-3d {
     font-size: 35px !important;
   }

   .hero-sec h1 .small-3d {
     font-size: 28px !important;
   }

   .hero-sec p .small-3d {
     font-size: 28px !important;
   }

   .hero-sec h1 .motor-small {
     font-size: 27px !important;
   }

   .hero-sec p .motor-small {
     font-size: 27px !important;
   }

 }

 @media (max-width: 768px) {
   .hero-sec h1 .motor-small {
     font-size: 23px !important;
   }

   .hero-sec h1 .motor-med {
     font-size: 20px !important;
   }

   /* .med-d-3d{
    font-size: 10px !important;
  } */
 }

 @media only screen and (min-width: 766px) and (max-width: 1100px) {
   .small-index {
     font-size: 25px !important;
   }
 }

 @media (max-width: 361px) {
   .hero-sec h1 .big-4d {
     font-size: 25px;
   }


 }

 @media only screen and (min-width: 900px) {
   .bannerouter {
     width: 100%;
     background-image: url(../images/banner-back.jpg);
     background-repeat: repeat-x;
     background-position: center;
     /* height: 197px; */
   }
   .banner{
    text-align: center;
   }

   .bannermobile {
     display: none;
   }
 }

 @media only screen and (min-width: 900px) and (max-width: 1120px){
    .banner img{
      height:197px;
    }
 }

  @media only screen and (max-width: 324px) {
   .banner {
     display: none;
   }
  }
@media only screen and (min-width: 769px) and (max-width: 899px){
    .contactinfo{
      width: auto !important;
    }

    .navbar ul li{
      font-size:15px;
    }
}


 @media only screen and (min-width: 325px) and (max-width: 899px) {
   .bannerouter {
     width: 100%;
     background-repeat: repeat-x;
     background-position: top center;
     
   }

   .banner {
     display: none;
   }

   .bannermobile {
     display: block !important;
   }
 }

 @media (max-width: 768px){
  .contactinfo, .basket-label{
    display: none !important;
  }
 }

 @media (max-width: 767px) {
   .hero-sec-under {
     display: block !important;
   }

   .entry-header .entry-title {
     font-size: 30px !important;
   }

   /* .hero-sec-under .h1-4d {
    margin-left: -100px !important;
  } */
 }

 @media (max-width: 768px) {
   .cpd-header-basket {
     margin-top: -35px !important;
     /* margin-right: 20px; */
   }

   .navbar {
     padding: 2px !important
   }

   .mobile-countdown-bar {
     padding: 0 !important;
   }

   .img-motorcycle-banner {
     position: relative;
     left: -10% !important;
   }



 }

 @media only screen and (min-width: 316px) and (max-width: 373px) {
   .small-index {
     font-size: 23px !important;
   }

   .hero-sec h1 .highlight {
     font-size: 25px !important;
   }

 }


 @media (max-width: 316px) {
   .small-index {
     font-size: 17px !important;
   }

   .hero-sec h1 .highlight {
     font-size: 18px !important;
   }

 }


 /* @media (max-width: 324px) {

   .contactinfo {
     width: unset !important;
     display: none !important;
   }

 } */

  @media (max-width: 325px) {

    .contactinfo .contactemail a{
      font-size: 12px !important;
    }

    .plates-rating-header p{
      font-size: 10px !important;
    }

 }

  @media only screen and (min-width: 325px) and (max-width: 600px) {
       .contactinfo .contactemail a{
          font-size: 14px !important;
        }

  }

  @media (max-width: 600px) {

   .contactinfo {
     width: unset !important;
     /* display: none !important; */
   }

 }


 @media (max-width: 372px) {
   .mobile-countdown-bar span {
     font-size: 15px !important;
   }

   .mobile-countdown-bar {
     font-size: 15px !important;
   }
 }

 @media (max-width: 319px) {
   .mobile-countdown-bar span {
     font-size: 13px !important;
   }

   .mobile-countdown-bar {
     font-size: 13px !important;
   }

 }

 @media only screen and (min-width: 768px) and (max-width: 1025px) {
   .hero-inner .img-banner-custom-pages {
     max-width: 370px !important;
     height: 100% !important;
   }
 }

 @media only screen and (min-width: 500px) and (max-width: 768px) {
   .hero-inner .img-banner-custom-pages {
     max-width: 270px !important;
     height: 100% !important;
   }
 }

 @media (max-width: 500px) {
   .hero-inner .img-banner-custom-pages {
     max-width: 170px !important;
     height: 100% !important;
   }
 }

 .skip-link {
  position: absolute;
  left: 0.75rem;
  top: 0.75rem;
  padding: 0.75rem 1rem;
  transform: translateY(-200%);
  z-index: 10000;
}

.skip-link:focus {
  transform: translateY(0);
}



/* --- Cookie Script contrast + subtle restyle (PageSpeed friendly) --- */
#cookiescript_injected {
  background: #1e1e1e !important;
  color: #f2f2f2 !important;
  border-radius: 16px !important;
  box-shadow: 0 16px 50px rgba(0,0,0,.35) !important;
  padding: 22px !important;
}

/* Title */
#cookiescript_header {
  color: #ffffff !important;
  font-size: 18px !important;
  font-weight: 650 !important;
  letter-spacing: .2px !important;
  margin-bottom: 10px !important;
}

/* Description text (main low-contrast culprit) */
#cookiescript_description,
#cookiescript_description span {
  color: #dedede !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
}

/* "Read more" link (PSI failing element) */
#cookiescript_readmore {
  display: inline-block !important;
  margin-top: 10px !important;
  color: white !important;          /* readable but not neon */
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
  font-weight: 600 !important;
}

/* Close X */
#cookiescript_close {
  color: #ffffff !important;
  opacity: .8 !important;
  font-size: 22px !important;
}
#cookiescript_close:hover { opacity: 1 !important; }

/* Checkbox labels */
.cookiescript_checkbox_label,
.cookiescript_checkbox_text {
  color: #f0f0f0 !important;
  font-weight: 600 !important;
  letter-spacing: .6px !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
}

/* Buttons */
#cookiescript_buttons {
  margin-top: 16px !important;
  gap: 10px !important;
}

#cookiescript_accept,
#cookiescript_save {
  border-radius: 999px !important;
  /* padding: 12px 16px !important; */
  font-weight: 650 !important;
  letter-spacing: .3px !important;
}

/* Primary: Accept all (subtle, not too colorful) */
#cookiescript_accept {
  background: #2a2a2a !important;
  color: #ffffff !important;
  border: 1px solid #3a3a3a !important;
}

/* Secondary: Save & Close */
#cookiescript_save {
  background: transparent !important;
  color: #e8e8e8 !important;
  border: 1px solid #444 !important;
}

/* Manage / show details */
#cookiescript_manage_wrap,
#cookiescript_manage span {
  color: #d0d0d0 !important;
}

/* Change checkbox checked color */
#cookiescript_injected .mdc-checkbox__native-control:checked 
~ .mdc-checkbox__background {
    background-color: #3a3a3a !important;  /* your new color */
    border-color: #3a3a3a !important;
}

/* Change checkmark (tick) color */
#cookiescript_injected .mdc-checkbox__checkmark-path {
    stroke: #ffffff !important;
}










/* Back-to-top for the long copy below the builder (mobile only).

   The wrapper is absolutely positioned to fill section.seo-content and the
   anchor inside is sticky, so the button appears only once that copy starts,
   i.e. the builder has been scrolled past, and releases at the end of it.

   Two deliberate choices:

   1. It is anchored to seo-content rather than to flow position. Several of
      these pages have unclosed <div>s, so an element placed last-in-source gets
      parsed into whichever divs are still open, which made both the sticky
      range and the right-hand inset differ from page to page.

   2. It sticks with `top: calc(100dvh - 66px)` rather than `bottom: 20px`.
      `bottom` sticky only ever pulls an element up from its static position, so
      it needs the element to sit at the bottom of the container; pushing it
      there with flex alignment did not hold. Sticking by `top` at one button
      height plus the gap above the viewport foot is equivalent visually and
      does not depend on static position at all. dvh so the button is not left
      under the mobile browser toolbar, with vh as the fallback.

   The wrapper is out of flow so it adds no layout shift, and is click-through
   except for the button itself. */
.seo-content {
    position: relative;
}

.cpd-to-top {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    display: none;
    pointer-events: none;
}

.cpd-to-top a {
    position: sticky;
    top: calc(100vh - 66px);
    top: calc(100dvh - 66px);
    display: block;
    width: 46px;
    height: 46px;
    margin: 0 16px 0 auto;
    border-radius: 50%;
    background: #081e7a;
    color: #ffc10a;
    font-size: 22px;
    line-height: 46px;
    text-align: center;
    text-decoration: none;
    pointer-events: auto;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3);
}

@media (max-width: 767px) {
    .cpd-to-top {
        display: block;
    }
}


/* USP icon strip above the plate preview, restored on mobile (2026-08-25).
   builder.php hides .mainusps-wrap below 560px; overridden here rather than in
   that file because builder.php is David's and his rule carries no !important.
   Compact 3-across so it stays one row: ~71px tall instead of ~220px wrapped. */
@media (max-width: 560px) {
    .mainusps-wrap {
        display: block !important;
        padding-bottom: 10px !important;
        margin-top: 4px !important;
    }

    .cpd-usp-strip {
        gap: 0 8px !important;
    }

    .cpd-usp-strip .usp {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        gap: 6px !important;
    }

    .cpd-usp-strip .usp svg {
        width: 30px !important;
        height: 30px !important;
    }

    .cpd-usp-strip .usp span {
        font-size: .62rem !important;
        letter-spacing: .01em !important;
    }
}


/* Tighten the mobile stack above the plate preview (2026-08-25):
   pull the title up towards the sale banner, and the USP icons up towards the
   title. The 20px above the title was section.builder's padding-top; the 22px
   below it was the title's margin-bottom plus the strip's margin-top. */
@media (max-width: 560px) {
    section.builder {
        padding-top: 6px !important;
    }

    .cpd-mob-title {
        padding-top: 0 !important;
        margin-bottom: 2px !important;
    }

    .mainusps-wrap {
        margin-top: 0 !important;
    }
}


/* USP icon order (2026-08-25): put the single-line "3 Year Warranty" between
   the two two-line labels so the strip reads symmetrically at every width.
   Done with flex `order` rather than by editing the markup, which lives in
   builder.php (David's file) and appears there twice. These icons are not
   interactive, so visual order diverging from DOM order costs nothing. */
.cpd-usp-strip .usp:nth-child(1) {
    order: 2;
}

.cpd-usp-strip .usp:nth-child(2) {
    order: 1;
}

.cpd-usp-strip .usp:nth-child(3) {
    order: 3;
}