* {
  -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 is deliberately NOT restyled here.
   The consent banner is styled in the CookieScript dashboard (BPD account
   39f7d12a1dded0e510e36109940b1baf), which is the single source of truth and
   applies on every page. A brand override used to live here and was loaded via
   headers/bikeplatesdirect.php only - so content and builder pages got a dark
   restyle while the three checkout pages, which do not load this stylesheet,
   kept the dashboard styling. Matt confirmed on 16 Sept 2026 that the dashboard
   (blue) styling is the correct one, so the override is gone and both now match.
   If it needs changing, change it in the dashboard, not here.
   Note: the removed block was labelled "PageSpeed friendly" and marked
   #cookiescript_readmore as a PSI failing element - 'Read more' in #003194 on
   the #1c1c1c panel is 1.52:1 against a 4.5:1 AA threshold. Fix that in the
   dashboard so every page benefits, not in a stylesheet half the site loads. */










/* 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;
}