/* ==========================================================================
   spw-live-match.css
   Brings the UAT templates in line with the live www.showplatesworld.com look.
   Loaded AFTER style.css. Overrides only - style.css is left untouched.
   Measurements taken from the live site's computed styles (14 Oct 2026).
   ========================================================================== */

/* ---------- Hero (banner.php) -------------------------------------------
   Live: 500px tall, photo as cover background, 247deg black gradient at
   0.79 opacity, white Roboto Condensed uppercase heading on the left.
   On UAT the <img class="hero-bg"> had no CSS at all, so it rendered as a
   1400px block and the text spilled over the next section.               */
.hero-section {
  position: relative !important;
  z-index: 1 !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 500px;
  max-height: none !important;
  padding: 0 !important;
  margin: 0 0 40px !important;
  overflow: hidden;
  border-radius: 0 0 20px 20px;
  font-family: 'Roboto', sans-serif !important;
}

.hero-section > img.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

.hero-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(247deg, rgba(255, 255, 255, 0) 0%, #000 100%);
  opacity: .79;
  z-index: 1;
  pointer-events: none;
}

.hero-section .background-banner-wrap {
  position: relative;
  z-index: 2;
  background: none;
  overflow: visible;
}

.hero-section .container {
  padding-left: 50px !important;
  padding-right: 50px !important;
}

.hero-section .hero-row {
  grid-template-columns: minmax(0, 600px) 1fr;
  padding: 10px !important;
}

.hero-section .hero-row h1,
.hero-section h1 {
  font-family: 'Roboto Condensed', sans-serif !important;
  font-size: 34px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  text-align: left;
  color: #fff !important;
  margin: 0 0 20px !important;
}

.hero-section .hero-banner-image-wrap p {
  font-family: 'Roboto', sans-serif;
  font-size: 16px !important;
  line-height: 24px !important;
  margin-bottom: 20px !important;
}

/* ENTER REG box - kept (it opens the builder), styled like the live
   builder's reg box: white, green border, Charles Wright style lettering. */
.hero-section .hero-input input,
.hero-section #plate-reg {
  height: 72px !important;
  max-width: 460px;
  margin: 0 !important;
  font-size: 40px !important;
  border: 4px solid #27b523 !important;
  border-radius: 4px;
  background: #fff;
}

/* Breadcrumb sits inside the hero section - pin it to the bottom so it
   reads over the image rather than pushing the hero taller. */
.hero-section #breadcrumb-wrapper {
  position: relative;
  z-index: 2;
  color: #fff;
}

/* ---------- Header ------------------------------------------------------- */
/* Skip link: hidden until keyboard focus (it was showing as plain text). */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
}

.skip-link:focus {
  left: 10px;
  top: 10px;
  padding: 10px 16px;
  background: #fff;
  color: #000;
}

/* Basket button: live is orange, not black. */
.header-add-to-cart-btn .elementor-button {
  background-color: #FC9B04 !important;
  color: #fff !important;
  border-radius: 3px;
}

.header-add-to-cart-btn .elementor-button svg {
  fill: #fff;
}

.header-logo-wrapper img {
  display: block;
  height: auto;
  max-width: 200px;
}

/* ---------- Mobile ------------------------------------------------------- */
html,
body {
  overflow-x: hidden;
}

@media (max-width: 768px) {
  .hero-section {
    min-height: 500px;
    border-radius: 0;
  }

  .hero-section .container {
    padding-left: 30px !important;
    padding-right: 30px !important;
  }

  .hero-section .hero-row {
    grid-template-columns: 1fr;
  }

  .hero-section .hero-row h1,
  .hero-section h1 {
    text-align: center;
  }

  .hero-section .hero-banner-image-wrap p {
    font-size: 14px !important;
    line-height: 1.4 !important;
    text-align: center;
  }

  .hero-section .hero-input input,
  .hero-section #plate-reg {
    max-width: none;
    height: 64px !important;
    font-size: 32px !important;
  }
}

/* ==========================================================================
   Builder-first product pages (#builder.spw-builder-first)
   Live: builder open at the top of the page, no photo hero.
   Desktop: controls left (490px), title + preview + price + basket right.
   Mobile: title, preview, price + BUY NOW, then reg box and options.
   ========================================================================== */
#builder.spw-builder-first {
  margin: 40px auto 60px;
  font-family: 'Roboto', sans-serif;
}

.spw-builder-first .builder-full-wrap,
.spw-builder-first .nameplate-main-container,
.spw-builder-first #builder-shell,
.spw-builder-first #builder-root,
.spw-builder-first #maincontent {
  max-width: 1200px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  min-height: 0 !important;
}

.spw-builder-first #wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

/* Duplicates / leftovers from the PP builder that live doesn't show */
.spw-builder-first .desk-preview,
.spw-builder-first #builder-title,
.spw-builder-first #builder-menu-internal > ul.vertical.menu:first-child,
.spw-builder-first #builder-actions1,
.spw-builder-first .builder-skeleton,
.spw-builder-first .ak-reg-desktop,
.spw-builder-first .ovly,
.spw-builder-first .ooltip,
.spw-builder-first .plate-info-circle,
.spw-builder-first .arrow-green-mobile,
.spw-builder-first .desk-only-phone,
.spw-builder-first .text-wrapper-builder {
  display: none !important;
}

.spw-builder-first #builder-root.is-booting {
  visibility: visible;
}

.spw-builder-first ul.menu,
.spw-builder-first ul.vertical,
.spw-builder-first li {
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
}

.spw-builder-first .row,
.spw-builder-first .column,
.spw-builder-first .columns {
  max-width: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}

/* ---- Title block -------------------------------------------------------- */
.spw-builder-head {
  margin: 0 0 20px;
}

.spw-builder-title {
  font-family: 'Roboto', sans-serif !important;
  font-size: 43px !important;
  font-weight: 700 !important;
  line-height: 47px !important;
  letter-spacing: -1.29px;
  color: #000 !important;
  text-transform: none !important;
  text-align: left !important;
  margin: 0 !important;
}

.spw-builder-desc,
.spw-builder-desc p {
  font-family: 'Roboto', sans-serif;
  font-size: 18px;
  line-height: 26px;
  color: #666;
  margin: 20px 0 10px;
}

.spw-builder-desc p {
  margin: 0;
}

/* ---- Reg box ------------------------------------------------------------ */
.spw-builder-first #form_register_context_box .hide {
  display: none !important;
}

.spw-builder-first #pbregletter1 {
  display: block;
  width: 100% !important;
  height: 117px !important;
  box-sizing: border-box;
  margin: 0 0 20px !important;
  padding: 2px 10px !important;
  border: 7px solid #27b523 !important;
  border-radius: 7px !important;
  background: #fff !important;
  color: #000 !important;
  font-family: Tahoma, Helvetica, sans-serif !important;
  font-size: 65px !important;
  font-weight: 700 !important;
  text-align: center !important;
  text-transform: uppercase;
  box-shadow: none !important;
  outline: none;
}

.spw-builder-first #pbregletter1::placeholder {
  color: #333;
  opacity: 1;
}

/* ---- Field labels (live: Roboto 15/700 uppercase navy) ------------------- */
.spw-builder-first .text-style-title-strong,
.spw-builder-first .plate-size-title,
.spw-builder-first .v2-plate-layout-container strong,
.spw-builder-first #builder-material strong {
  display: block;
  font-family: 'Roboto', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 22.5px !important;
  color: #036 !important;
  text-transform: uppercase;
  margin: 0 0 8px !important;
}

/* ---- Text style buttons: PRINTED / 4D PLATE / 3D GEL --------------------- */
.spw-builder-first .four-text-style {
  margin: 0 0 25px !important;
}

.spw-builder-first fieldset.segmented {
  display: flex !important;
  gap: 15px;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
}

.spw-builder-first .segmented__input {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none;
  width: 1px !important;
  height: 1px !important;
}

.spw-builder-first .segmented__option {
  flex: 0 0 152px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  height: 55px;
  margin: 0 !important;
  padding: 0 10px !important;
  border: 0 !important;
  border-radius: 5px !important;
  background: #f2f2f2 !important;
  color: #000 !important;
  font-family: 'Roboto', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: none !important;
}

.spw-builder-first label[for="reg-font-1"] { order: 1; }
.spw-builder-first label[for="reg-font-9"] { order: 2; }
.spw-builder-first label[for="reg-font-6"] { order: 3; }

.spw-builder-first .segmented__input:checked + .segmented__option {
  background: #000 !important;
  color: #fff !important;
}

/* ---- Selects (live: 54px, 1px #dfdfdf, radius 7) ------------------------- */
.spw-builder-first select {
  height: 54px !important;
  box-sizing: border-box;
  margin: 0 !important;
  padding: 13px 32px 13px 13px !important;
  border: 1px solid #dfdfdf !important;
  border-radius: 7px !important;
  background-color: #fff !important;
  color: #333 !important;
  font-family: Tahoma, Helvetica, sans-serif !important;
  font-size: 17px !important;
  box-shadow: none !important;
}

/* Vehicle | Layout | Front/Rear on one row, no labels (as live) */
.spw-builder-first .one-your-reg {
  display: flex !important;
  gap: 10px;
  margin: 0 0 20px !important;
}

.spw-builder-first .one-your-reg .v2-plate-layout-container {
  flex: 0 0 150px;
  margin: 0 !important;
}

.spw-builder-first .one-your-reg strong {
  display: none !important;
}

.spw-builder-first .one-your-reg select {
  width: 150px !important;
}

.spw-builder-first .v2-plate-layout-container label {
  display: block;
  margin: 0 !important;
}

/* Plate size: full width like live's FRONT SIZE */
.spw-builder-first .two-plate-size {
  margin: 0 0 20px !important;
}

.spw-builder-first #builder-size {
  width: 480px !important;
  max-width: 100%;
}

/* Border, badge + badge colour */
.spw-builder-first .six-borders,
.spw-builder-first .five-badge {
  margin: 0 0 20px !important;
}

.spw-builder-first .six-borders select {
  width: 235px !important;
  max-width: 100%;
}

.spw-builder-first .five-badge {
  display: flex !important;
  gap: 10px;
}

.spw-builder-first .five-badge > * {
  flex: 0 0 235px;
}

.spw-builder-first .five-badge select {
  width: 100% !important;
}

.spw-builder-first #builder-slogan-text {
  height: 54px !important;
  width: 100% !important;
  border: 1px solid #dfdfdf !important;
  border-radius: 7px !important;
  padding: 0 13px !important;
}

/* ---- Right column: preview, price, basket --------------------------------- */
.spw-builder-first #parent-container > #builder-actions div[style*="margin-top"] {
  margin-top: 0 !important;
}

.spw-builder-first .numberplate-mobile-style,
.spw-builder-first .numberplate-mob2_style {
  display: block;
  width: 100% !important;
  height: auto !important;
}

.spw-builder-first .wrap-price-desktop-images {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 15px 0 20px;
}

.spw-builder-first .pricing-wrapper {
  font-family: 'Roboto', sans-serif;
  color: #1f1f1f;
}

.spw-builder-first .pricing-wrapper .price {
  margin: 0 !important;
  font-size: 19px !important;
  line-height: 1.3;
}

.spw-builder-first .pricing-wrapper .price strong {
  display: block;
  font-size: 22px;
}

.spw-builder-first .desk-slashed-price {
  font-size: 14px;
}

.spw-builder-first .sdd-img-wrap img {
  max-height: 70px;
  width: auto;
}

.spw-builder-first .customer-reviews-img-wrap img {
  max-height: 80px;
  width: auto;
}

.spw-builder-first .btn-add-to-basket-desk {
  display: block;
  width: 100% !important;
  height: 86px;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 5px !important;
  background: #27b523 !important;
  color: #fff !important;
  font-family: 'Roboto', sans-serif !important;
  font-size: 32px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  cursor: pointer;
}

.spw-builder-first .btn-add-to-basket-desk:hover {
  background: #1f9a1c !important;
}

/* ---- Desktop: two columns ------------------------------------------------ */
@media (min-width: 1025px) {
  .spw-builder-first #parent-container {
    display: grid !important;
    grid-template-columns: 490px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "form head"
      "form actions";
    column-gap: 86px;
    align-items: start;
  }

  .spw-builder-first .spw-builder-head { grid-area: head; }
  .spw-builder-first #builder-form { grid-area: form; }
  .spw-builder-first #parent-container > #builder-actions { grid-area: actions; display: block !important; }

  .spw-builder-first .mob-preview,
  .spw-builder-first .mob-price {
    display: none !important;
  }
}

/* ---- Tablet + mobile: stacked -------------------------------------------- */
@media (max-width: 1024px) {
  #builder.spw-builder-first {
    margin-top: 20px;
  }

  .spw-builder-first #parent-container > #builder-actions {
    display: none !important;
  }

  .spw-builder-first .mob-preview,
  .spw-builder-first .mob-price {
    display: block !important;
  }

  .spw-builder-first .mob-preview > div[style*="margin-top"] {
    margin-top: 0 !important;
  }

  .spw-builder-first .your-price-mobile-wrap {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin: 15px 0 20px;
  }

  .spw-builder-first #builder-actions .pricing-wrapper {
    padding: 0 !important;
  }

  .spw-builder-first .btn-buy-now-mobile {
    flex: 0 0 auto;
    padding: 12px 26px !important;
    border: 0 !important;
    border-radius: 5px !important;
    background: #e02b2b !important;
    color: #fff !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
  }
}

@media (max-width: 768px) {
  .spw-builder-title {
    font-size: 30px !important;
    letter-spacing: -0.9px;
  }

  .spw-builder-first #pbregletter1 {
    font-size: 40px !important;
  }

  .spw-builder-first #pbregletter1::placeholder {
    font-size: 15px;
  }

  .spw-builder-first fieldset.segmented {
    gap: 0;
  }

  .spw-builder-first .segmented__option {
    flex: 1 1 0;
    height: 50px;
    margin-right: 8px !important;
    font-size: 14px !important;
  }

  .spw-builder-first .one-your-reg .v2-plate-layout-container {
    flex: 1 1 0;
  }

  .spw-builder-first .one-your-reg select,
  .spw-builder-first .six-borders select,
  .spw-builder-first #builder-size {
    width: 100% !important;
    font-size: 15px !important;
    padding: 12px 24px 12px 10px !important;
  }

  .spw-builder-first .five-badge > * {
    flex: 1 1 0;
  }
}

/* ---- Fixes after first UAT render (14 Oct 2026) ---------------------------- */
/* Reg box: the PP wrapper drew a second green border around the input */
#builder.spw-builder-first #form_register_context_box .entries {
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

#builder.spw-builder-first #pbregletter1::placeholder {
  color: #333 !important;
}

/* Loading spinner: overlay the plate preview instead of taking up space */
#builder.spw-builder-first #plate-loading,
#builder.spw-builder-first .bd-loading-overlay {
  display: none;
  position: absolute !important;
  inset: 0;
  z-index: 5;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .6) !important;
}

/* Material is not offered on live */
#builder.spw-builder-first .hideme {
  display: none !important;
}

/* Labels: beat the PP stylesheet's own !important colours */
#builder.spw-builder-first .plate-size-title,
#builder.spw-builder-first .text-style-title-strong,
#builder.spw-builder-first .v2-plate-layout-container strong {
  color: #036 !important;
}

#builder.spw-builder-first .plate-size-title::after {
  content: ":";
}

/* Text style buttons span the full column */
#builder.spw-builder-first .ak-style,
#builder.spw-builder-first .text-style-pp-wrapper,
#builder.spw-builder-first .text-style-option {
  width: 100% !important;
  max-width: none !important;
}

/* Dropdown row: smaller text so "Front & Rear" fits in 150px */
#builder.spw-builder-first .one-your-reg select {
  font-size: 15px !important;
  padding-right: 26px !important;
}

@media (max-width: 1024px) {
  #builder.spw-builder-first .mob-price {
    margin: 0 !important;
    padding: 0 !important;
  }

  #builder.spw-builder-first .your-price-mobile-wrap {
    margin: 15px 0 20px !important;
  }

  #builder.spw-builder-first .mob-price #builder-actions {
    flex: 1 1 auto;
    width: auto !important;
    padding: 0 !important;
  }

  #builder.spw-builder-first .mob-price .pricing-wrapper {
    display: block !important;
    margin: 0 !important;
  }

  #builder.spw-builder-first .mob-price .price {
    font-size: 16px !important;
    font-weight: 700;
  }
}

/* ---- Second pass: beat the PP builder's id-heavy !important rules ---------- */
#builder.spw-builder-first #premiumplates-builder #maincontent #builder-menu #builder-menu-internal #builder-reg .entries {
  border: 0 !important;
}

#builder.spw-builder-first #premiumplates-builder #maincontent #builder-menu #builder-menu-internal #builder-reg {
  margin: 0 !important;
}

#builder.spw-builder-first .nameplate-main-container #builder-actions #add-to-basket.btn-add-to-basket-desk {
  height: 86px;
  margin: 0 !important;
  padding: 0 !important;
  background-color: #27b523 !important;
  color: #fff !important;
  font-size: 32px !important;
  font-weight: 700 !important;
  border-radius: 5px !important;
}

#builder.spw-builder-first .nameplate-main-container #builder-actions #add-to-basket.btn-add-to-basket-desk:hover {
  background-color: #1f9a1c !important;
}

@media (max-width: 1024px) {
  #builder.spw-builder-first #premiumplates-builder .your-price-mobile-wrap .pricing-wrapper,
  #builder.spw-builder-first #premiumplates-builder .your-price-mobile-wrap button {
    position: static !important;
    inset: auto !important;
    transform: none !important;
  }

  #builder.spw-builder-first #premiumplates-builder .your-price-mobile-wrap {
    min-height: 54px;
  }
}

/* ---- Third pass: mobile overrides of the PP builder's own !important rules -- */
#builder.spw-builder-first #premiumplates-builder #form_register_context_box .entries {
  height: auto !important;
}

#builder.spw-builder-first #premiumplates-builder #pbregletter1 {
  height: 117px !important;
}

#builder.spw-builder-first #premiumplates-builder .four-text-style,
#builder.spw-builder-first #premiumplates-builder .four-text-style > ul,
#builder.spw-builder-first #premiumplates-builder .four-text-style .size_background,
#builder.spw-builder-first #premiumplates-builder #builder-font,
#builder.spw-builder-first #premiumplates-builder #builder-font .segmented {
  display: block;
  width: 100% !important;
  max-width: none !important;
}

#builder.spw-builder-first #premiumplates-builder #builder-font .segmented {
  display: flex !important;
}

#builder.spw-builder-first #premiumplates-builder .text-style-title-strong,
#builder.spw-builder-first #premiumplates-builder .plate-size-title,
#builder.spw-builder-first #premiumplates-builder .v2-plate-layout-container strong {
  font-size: 15px !important;
}

@media (max-width: 1024px) {
  #builder.spw-builder-first #premiumplates-builder .text-style-title-strong,
  #builder.spw-builder-first #premiumplates-builder .plate-size-title,
  #builder.spw-builder-first #premiumplates-builder .v2-plate-layout-container strong {
    font-size: 17px !important;
    font-weight: 900 !important;
  }

  #builder.spw-builder-first #premiumplates-builder .segmented__option {
    flex: 1 1 0 !important;
    height: 60px !important;
    font-size: 15px !important;
  }
}

/* ---- Tighter builder options (Matt, 14 Oct 2026: "reduce the padding a bit") */
#builder.spw-builder-first #premiumplates-builder #builder-form select,
#builder.spw-builder-first #premiumplates-builder #builder-slogan-text {
  height: 46px !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

#builder.spw-builder-first #premiumplates-builder .segmented__option {
  height: 46px !important;
}

#builder.spw-builder-first #premiumplates-builder .text-style-title-strong,
#builder.spw-builder-first #premiumplates-builder .plate-size-title,
#builder.spw-builder-first #premiumplates-builder .v2-plate-layout-container strong {
  margin-bottom: 5px !important;
  line-height: 20px !important;
}

#builder.spw-builder-first #premiumplates-builder .four-text-style,
#builder.spw-builder-first #premiumplates-builder .one-your-reg,
#builder.spw-builder-first #premiumplates-builder .two-plate-size,
#builder.spw-builder-first #premiumplates-builder .six-borders,
#builder.spw-builder-first #premiumplates-builder .five-badge,
#builder.spw-builder-first #premiumplates-builder #builder-slogan .plate-row {
  margin: 0 0 12px !important;
}

#builder.spw-builder-first #premiumplates-builder #form_register_context_box #pbregletter1 {
  margin-bottom: 14px !important;
}

/* Strip the PP builder's internal spacers that made the uneven gaps */
#builder.spw-builder-first #premiumplates-builder #builder-form .size_background,
#builder.spw-builder-first #premiumplates-builder #builder-form .builder-menu-content,
#builder.spw-builder-first #premiumplates-builder #builder-form fieldset.segmented,
#builder.spw-builder-first #premiumplates-builder #builder-form .text-style-option,
#builder.spw-builder-first #premiumplates-builder #builder-form .v2-plate-layout-container,
#builder.spw-builder-first #premiumplates-builder #builder-form .v2-plate-layout-container label {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  min-height: 0 !important;
}

#builder.spw-builder-first #premiumplates-builder #builder-form #builder-size,
#builder.spw-builder-first #premiumplates-builder #builder-form .segmented__option {
  margin-bottom: 0 !important;
}

/* ---- Plate material: Standard ABS / Premium Acrylic (as CPD, PP, BPD) ------- */
#builder.spw-builder-first #premiumplates-builder .spw-material {
  display: block !important;
  margin: 0 0 12px !important;
}

#builder.spw-builder-first #premiumplates-builder #builder-material strong {
  display: block;
  font-family: 'Roboto', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 20px !important;
  color: #036 !important;
  text-transform: uppercase;
  margin: 0 0 5px !important;
}

#builder.spw-builder-first #premiumplates-builder .material-popular-hint {
  display: flex;
  justify-content: flex-end;
  margin: -24px 0 3px;
  pointer-events: none;
}

#builder.spw-builder-first #premiumplates-builder .material-popular-hint__inner {
  width: calc(50% - 5px);
  text-align: center;
}

#builder.spw-builder-first #premiumplates-builder .material-popular-hint__tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  background: #2d9c3c;
  color: #fff;
  font-family: 'Roboto', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .5px;
  white-space: nowrap;
}

#builder.spw-builder-first #premiumplates-builder .material-popular-hint__arrow {
  width: 0;
  height: 0;
  margin: 0 auto;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #2d9c3c;
}

#builder.spw-builder-first #premiumplates-builder .mobile-material {
  display: flex !important;
  gap: 10px;
  width: 100% !important;
  height: auto !important;
  overflow: visible !important;
  margin: 0 !important;
  padding: 0 !important;
}

#builder.spw-builder-first #premiumplates-builder .mobile-material article.selectable {
  flex: 1 1 0;
  display: flex !important;
  align-items: center;
  justify-content: center;
  height: 46px;
  margin: 0 !important;
  padding: 0 10px !important;
  border: 0 !important;
  border-radius: 5px !important;
  background: #f2f2f2 !important;
  color: #000 !important;
  font-family: 'Roboto', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: none !important;
}

#builder.spw-builder-first #premiumplates-builder .mobile-material article.selectable.selected,
#builder.spw-builder-first #premiumplates-builder .mobile-material article.selectable.current {
  background: #000 !important;
  color: #fff !important;
}

/* ==========================================================================
   Page sections below the builder - match live www.showplatesworld.com.
   Opt-in per page with <main id="plate-type-main-wrapper" class="spw-live">.
   Measurements from live's computed styles (14 Oct 2026).
   ========================================================================== */
main#plate-type-main-wrapper.spw-live {
  border-top: 0 !important;
}

/* ---- Prose sections (CMS copy) ------------------------------------------ */
.spw-live #how.first-section-padding {
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}

.spw-live .prose h2 {
  font-family: 'Open Sans', sans-serif !important;
  font-size: 34px !important;
  font-weight: 600 !important;
  line-height: 1.28 !important;
  letter-spacing: 0 !important;
  color: #4e4e4e !important;
  margin: 0 0 20px !important;
}

.spw-live .prose h3 {
  font-family: 'Open Sans', sans-serif !important;
  font-size: 23px !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
  color: #335ec1 !important;
  text-transform: uppercase;
  margin: 10px 0 12px !important;
}

.spw-live .prose h4 {
  font-family: 'Open Sans', sans-serif !important;
  font-size: 22px !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
  color: #fc9b04 !important;
  margin: 10px 0 14px !important;
}

.spw-live .prose p,
.spw-live .prose li {
  font-family: 'Open Sans', sans-serif !important;
  font-size: 18px !important;
  line-height: 26.1px !important;
  color: #7a7a7a !important;
  margin: 0 0 20px !important;
}

.spw-live .prose strong,
.spw-live .prose b {
  font-weight: 700;
  color: #7a7a7a !important;
}

.spw-live .prose a {
  color: #335ec1 !important;
  font-weight: 400 !important;
  text-decoration: none;
}

/* ---- Section headings (Types / Specifications / FAQ / Blog) --------------- */
.spw-live .section-title,
.spw-live .blog-title,
.spw-live #features-h2 {
  font-family: 'Roboto Condensed', sans-serif !important;
  font-size: 34px !important;
  font-weight: 500 !important;
  line-height: 1.15 !important;
  color: #4e4e4e !important;
  text-transform: uppercase !important;
  text-align: center !important;
  letter-spacing: 0 !important;
  margin: 0 0 20px !important;
}

.spw-live .spw-two-tone span {
  font-weight: 600;
  color: #000 !important;
}

.spw-live .underline {
  width: 66px !important;
  height: 3px !important;
  border-radius: 0 !important;
  background: #fc9b04 !important;
  margin: 0 auto 40px !important;
}

/* ---- Types of number plates --------------------------------------------- */
.spw-live .types-section {
  padding: 50px 20px 30px !important;
}

.spw-live .types-grid-2-number {
  gap: 20px !important;
  margin-top: 0 !important;
}

/* ---- Specification cards ------------------------------------------------- */
.spw-live #why {
  padding: 40px 20px !important;
}

.spw-live #why .cards {
  gap: 20px 30px !important;
  grid-template-columns: repeat(3, 1fr) !important;
}

.spw-live #why .cards .no-card {
  padding: 24px 20px !important;
}

.spw-live #why .cards h3 {
  font-family: 'Roboto Condensed', sans-serif !important;
  font-size: 23px !important;
  font-weight: 600 !important;
  line-height: 27.6px !important;
  color: #335ec1 !important;
  text-transform: capitalize !important;
  margin: 12px 0 0 !important;
}

/* ---- FAQ: light, centred, boxed questions -------------------------------- */
#plate-type-main-wrapper.spw-live section#faq.spw-faq {
  background: #fff !important;
  padding: 50px 0 40px !important;
}

.spw-live .spw-faq .underline {
  margin-bottom: 20px !important;
}

.spw-live .spw-faq-sub {
  font-family: 'Roboto', sans-serif;
  font-size: 17px;
  line-height: 25.5px;
  color: #7a7a7a;
  text-align: center;
  margin: 0 0 30px;
}

.spw-live .spw-faq .faq-list {
  max-width: 1200px;
  margin: 0 auto;
}

.spw-live #faq.spw-faq .faq-item {
  margin: 0 0 19px !important;
  padding: 0 !important;
  border: 0 !important;
  background: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, .08);
}

.spw-live #faq.spw-faq .faq-question {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  padding: 20px !important;
}

.spw-live #faq.spw-faq .faq-question h3 {
  font-family: 'Roboto', sans-serif !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  color: #333 !important;
  text-transform: none !important;
  margin: 0 !important;
}

/* Live uses a small solid triangle on the left */
.spw-live #faq.spw-faq .faq-question span {
  flex: 0 0 auto;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-top: 5px solid transparent !important;
  border-bottom: 5px solid transparent !important;
  border-left: 6px solid #333 !important;
  transform: none !important;
  transition: transform .2s ease;
}

.spw-live #faq.spw-faq .faq-item.active .faq-question span {
  transform: rotate(90deg) !important;
}

.spw-live #faq.spw-faq .faq-answer,
.spw-live #faq.spw-faq .faq-answer p,
.spw-live #faq.spw-faq .faq-answer li {
  font-family: 'Open Sans', sans-serif !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: #7a7a7a !important;
  margin-top: 0 !important;
}

.spw-live #faq.spw-faq .faq-item .faq-answer {
  padding: 0 20px 0 38px;
}

.spw-live #faq.spw-faq .faq-item.active .faq-answer {
  margin-bottom: 0 !important;
  padding-bottom: 20px;
}

/* ---- Blog cards ----------------------------------------------------------- */
.spw-live .blog-section {
  padding: 50px 20px 30px !important;
}

.spw-live .blog-card {
  border-radius: 3px !important;
  box-shadow: 0 0 10px rgba(0, 0, 0, .15) !important;
  transform: none !important;
}

.spw-live .blog-content {
  padding: 30px 30px 0 !important;
}

.spw-live .blog-content h3 {
  font-family: 'Roboto', sans-serif !important;
  font-size: 23px !important;
  font-weight: 600 !important;
  line-height: 27.6px !important;
  color: #54595f !important;
  text-transform: uppercase !important;
  margin: 0 0 25px !important;
}

.spw-live .blog-content .read-more {
  display: inline-block;
  font-family: 'Roboto', sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 18px;
  color: #fc9b04 !important;
  text-transform: uppercase;
  margin: 0 0 20px;
}

.spw-live .blog-meta {
  padding: 15px 30px !important;
  border-top: 1px solid #eaeaea !important;
  font-family: 'Roboto Slab', 'Roboto', serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 15.6px;
  color: #adadad !important;
}

@media (max-width: 768px) {
  .spw-live .prose h2,
  .spw-live .section-title,
  .spw-live .blog-title,
  .spw-live #features-h2 {
    font-size: 28px !important;
  }

  .spw-live .prose p,
  .spw-live .prose li {
    font-size: 16px !important;
    line-height: 1.6 !important;
  }

  .spw-live #why .cards {
    grid-template-columns: 1fr !important;
  }

  .spw-live .blog-content h3 {
    font-size: 19px !important;
  }
}

/* ---- Section tweaks after side-by-side check ------------------------------ */
/* style.css forces `h2, h3 { text-transform: none !important }` */
.spw-live .prose h3 {
  text-transform: uppercase !important;
}

.spw-live #faq.spw-faq .faq-question h3 {
  font-size: 20px !important;
}

/* Live shows this one in title case */
.spw-live .reviews-section .section-title {
  text-transform: none !important;
  color: #333 !important;
}

@media (max-width: 768px) {
  /* Live puts the copy before the photo in the image-left sections */
  .spw-live .common-grid-section-home > .col-with-image:first-child {
    order: 2;
  }

  .spw-live .common-grid-section-home {
    display: flex !important;
    flex-direction: column;
  }

  .spw-live #faq.spw-faq .faq-question h3 {
    font-size: 17px !important;
  }
}

/* ---- Header USPs: modern cards (Matt, 14 Oct 2026) ------------------------ */
.header-content-wrapper.spw-usps {
  display: flex !important;
  align-items: stretch;
  justify-content: center;
  gap: 14px;
  flex: 1 1 auto;
  margin: 0 24px;
}

.spw-usps .spw-usp {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 1 270px;
  min-width: 0;
  padding: 12px 16px 12px 12px;
  border: 1px solid #eceef1;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}

.spw-usps .spw-usp__icon {
  flex: 0 0 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff3df;
  color: #fc9b04;
}

.spw-usps .spw-usp__icon svg {
  width: 22px;
  height: 22px;
}

.spw-usps .spw-usp__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  font-family: 'Roboto', sans-serif;
}

.spw-usps .spw-usp__text strong {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  color: #111;
}

.spw-usps .spw-usp__text span {
  font-size: 12.5px;
  line-height: 1.35;
  color: #6b7280;
}

@media (max-width: 1200px) {
  .spw-usps .spw-usp__text span {
    display: none;
  }
}

/* ---- Reviews: real Trustpilot reviews, one at a time (all pages) ---------- */
.spw-reviews {
  padding: 50px 20px 60px;
}

.spw-reviews .section-title {
  font-family: 'Roboto Condensed', sans-serif !important;
  font-size: 34px !important;
  font-weight: 500 !important;
  line-height: 1.15 !important;
  color: #333 !important;
  text-transform: none !important;
  text-align: center !important;
  margin: 0 0 20px !important;
}

.spw-reviews .underline {
  width: 66px !important;
  height: 3px !important;
  border-radius: 0 !important;
  background: #fc9b04 !important;
  margin: 0 auto 30px !important;
}

.spw-reviews__slider {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 10px;
  max-width: 1140px;
  margin: 0 auto;
}

.spw-reviews__card {
  min-height: 170px;
  padding: 24px 28px;
  border: 1px solid #ddd;
  border-radius: 20px;
  background: #fff;
  box-sizing: border-box;
}

.spw-reviews__card[hidden] {
  display: none !important;
}

.spw-reviews__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.spw-reviews__stars {
  color: #00b67a;
  font-size: 20px;
  letter-spacing: 2px;
  line-height: 1;
}

.spw-reviews__score {
  padding: 3px 10px;
  border-radius: 4px;
  background: #e6f4ea;
  color: #2d7a3a;
  font-family: 'Roboto', sans-serif;
  font-size: 13px;
  font-weight: 600;
}

.spw-reviews .spw-reviews__title {
  font-family: 'Roboto', sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  color: #222 !important;
  text-transform: none !important;
  margin: 14px 0 6px !important;
}

.spw-reviews .spw-reviews__text {
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #555;
  margin: 12px 0 0;
}

.spw-reviews .spw-reviews__title + .spw-reviews__text {
  margin-top: 0;
}

.spw-reviews .spw-reviews__name {
  font-family: 'Roboto', sans-serif;
  font-size: 13px;
  color: #888;
  margin: 14px 0 0;
}

.spw-reviews__arrow {
  width: 44px;
  height: 44px;
  border: 0;
  background: none;
  color: #fc9b04;
  font-size: 44px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.spw-reviews__arrow:hover {
  color: #d98200;
}

.spw-reviews__source {
  font-family: 'Roboto', sans-serif;
  font-size: 13px;
  color: #777;
  text-align: center;
  margin: 18px 0 0;
}

.spw-reviews__source a {
  color: #335ec1;
  text-decoration: none;
}

@media (max-width: 768px) {
  .spw-reviews {
    padding: 40px 10px 50px;
  }

  .spw-reviews .section-title {
    font-size: 28px !important;
  }

  .spw-reviews__slider {
    grid-template-columns: 30px minmax(0, 1fr) 30px;
    gap: 4px;
  }

  .spw-reviews__card {
    padding: 18px 18px;
  }

  .spw-reviews__arrow {
    width: 30px;
    font-size: 34px;
  }
}

/* ---- Builder: review badge (replaces the "4.9 / 3,874" image) -------------- */
.spw-review-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  font-family: 'Roboto', sans-serif;
}

.spw-review-badge__stars {
  color: #f5b301;
  font-size: 24px;
  letter-spacing: 2px;
  line-height: 1;
}

.spw-review-badge__text {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: #333;
}

/* ---- Top grey bar: modern gradient + phone number (Matt, 14 Oct 2026) ----- */
.header .header-top {
  background: linear-gradient(180deg, #fafafb 0%, #eef0f2 55%, #e4e6e9 100%) !important;
  border-bottom: 1px solid #dcdfe3;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
}

.header-top-menu {
  align-items: center;
  gap: 4px;
}

.spw-phone a,
a.spw-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #1f2328 !important;
  font-family: 'Roboto', sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .2px;
  text-decoration: none;
  white-space: nowrap;
}

.spw-phone svg {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  padding: 6px;
  box-sizing: border-box;
  border-radius: 50%;
  background: #fc9b04;
  color: #fff;
  transition: background .2s ease;
}

.spw-phone a:hover svg,
a.spw-phone:hover svg {
  background: #e08800;
}

.header-top-menu li.spw-phone {
  margin-right: 14px;
  padding-right: 18px;
  border-right: 1px solid #d3d6da;
}

/* Mobile top bar: stars on the left, phone on the right */
.header-mobile .rating-top-wrapper {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
}

a.spw-phone--mobile {
  font-size: 14px;
}

a.spw-phone--mobile svg {
  width: 26px;
  height: 26px;
}

/* Top bar tidy-up: keep Blog / Contact Us spacing, line everything up */
.header-top .header-top-menu {
  gap: 22px !important;
  align-items: center;
}

.header-top .header-top-menu li {
  display: flex;
  align-items: center;
  height: 31px;
}

.header-top .header-top-menu li.spw-phone {
  margin-right: 0;
  padding-right: 22px;
}

/* Mobile: smaller stars, review text on one line */
.header-mobile .rating-top-wrapper .rating {
  --star-size: 15px;
  display: flex;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
}

.header-mobile .rating-top-wrapper .rating-text {
  font-size: 12.5px;
  margin-left: 4px;
  white-space: nowrap;
}

.header-mobile .header-top {
  padding: 6px 0 !important;
}

/* Top bar at laptop widths: nothing wraps */
.header-top .rating-text,
.header-top .header-top-menu a {
  white-space: nowrap;
}

@media (max-width: 1250px) {
  .header .header-top .header-inner {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* ---- Header: basket button + count badge (desktop + mobile) ---------------- */
.header-add-to-cart-btn .elementor-button {
  position: relative;
  border-radius: 10px !important;
  box-shadow: 0 2px 6px rgba(252, 155, 4, .35);
  transition: background-color .2s ease, transform .1s ease;
}

.header-add-to-cart-btn .elementor-button:hover {
  background-color: #e08800 !important;
}

.header-add-to-cart-btn .elementor-button:active {
  transform: translateY(1px);
}

.spw-basket-count {
  position: absolute;
  top: -8px;
  right: -8px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  box-sizing: border-box;
  border: 2px solid #fff;
  border-radius: 11px;
  background: #e02b2b;
  color: #fff;
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

.spw-basket-count[hidden] {
  display: none !important;
}

/* ---- Mobile header: smaller logo, less padding --------------------------- */
.header-mobile .header-logo-wrapper img {
  width: 150px !important;
  max-width: 150px;
  height: auto !important;
}

.header-mobile .header-center {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

.header-mobile .header-center .header-inner,
.header-mobile .mobile-search {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  min-height: 0 !important;
}

/* ---- Mobile USP strip ---------------------------------------------------- */
.spw-usp-strip {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  background: #fff7ea;
  border-top: 1px solid #fde3b8;
  border-bottom: 1px solid #fde3b8;
  font-family: 'Roboto', sans-serif;
}

.spw-usp-strip__item {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 1 1 0;
  justify-content: center;
  min-width: 0;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.2;
  color: #3a3a3a;
  text-align: left;
}

.spw-usp-strip__item svg {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  color: #fc9b04;
}

/* ---- Navigation bar (Matt, 14 Oct 2026) ------------------------------------ */
/* Desktop: never wrap, tighten spacing on smaller laptops */
.header-desktop .header-center-menu a,
.header:not(.header-mobile) .header-bottom .header-center-menu a {
  white-space: nowrap;
}

/* Current page: orange text + orange underline (live shows it in orange) */
.header-bottom .header-center-menu a.active {
  color: #fc9b04 !important;
  box-shadow: inset 0 -3px 0 #fc9b04;
}

@media (min-width: 1025px) and (max-width: 1300px) {
  .header-bottom .header-center-menu a {
    padding: 20px 12px !important;
  }
}

@media (min-width: 1025px) and (max-width: 1150px) {
  .header-bottom .header-center-menu a {
    padding: 20px 9px !important;
    font-size: 14px;
  }
}

/* ---- Mobile menu: clean left-aligned list -------------------------------- */
#mobileMenu {
  left: 0;
  right: 0;
  box-shadow: 0 12px 24px rgba(0, 0, 0, .14);
  border-top: 1px solid #eee;
}

#mobileMenu .header-center-menu {
  display: flex !important;
  flex-direction: column;
  align-items: stretch !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 4px 0 8px !important;
}

#mobileMenu .header-center-menu li {
  margin: 0 !important;
  border-bottom: 1px solid #f0f0f0;
}

#mobileMenu .header-center-menu a {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px !important;
  font-family: 'Roboto', sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .3px;
  color: #1f2328 !important;
  background: none !important;
  text-align: left;
}

#mobileMenu .header-center-menu a::after {
  content: "\203A";
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  color: #b0b4ba;
}

#mobileMenu .header-center-menu a.active {
  color: #fc9b04 !important;
  box-shadow: inset 4px 0 0 #fc9b04;
}

#mobileMenu .header-center-menu a.active::after {
  color: #fc9b04;
}

#mobileMenu .header-center-menu li.spw-menu-secondary {
  border-bottom: 0;
  background: #f7f7f8;
}

#mobileMenu .header-center-menu li.spw-menu-secondary + li.spw-menu-secondary {
  border-top: 1px solid #ececee;
}

#mobileMenu .header-center-menu li.spw-menu-secondary a {
  font-weight: 500;
  font-size: 14px;
  color: #555 !important;
}

/* Secondary links only belong in the mobile menu */
.header:not(.header-mobile) .spw-menu-secondary {
  display: none !important;
}

/* ==========================================================================
   PPC landing pages (/creator/*) - recreate live www.showplatesworld.com/creator/
   body.spw-ppc, headers/header-ppc.php, footers/footer-ppc.php.
   Measured from live 14 Oct 2026.
   ========================================================================== */
body.spw-ppc {
  font-family: Tahoma, Helvetica, sans-serif;
  color: #333;
}

.spw-ppc-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  max-width: 1150px;
  margin: 0 auto;
  padding: 0 15px;
  box-sizing: border-box;
}

/* Orange bar */
.spw-ppc-header__bar {
  background: #fd9a01;
}

.spw-ppc-header__bar .spw-ppc-header__inner {
  min-height: 125px;
}

.spw-ppc-header__logo img {
  display: block;
  width: 225px;
  height: auto;
}

.spw-ppc-header__countdown {
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: #fff;
  font-family: Tahoma, Helvetica, sans-serif;
  font-weight: 700;
  white-space: nowrap;
}

.spw-ppc-header__countdown-label {
  font-size: 20px;
}

.spw-ppc-header__countdown-time {
  font-size: 30px;
  letter-spacing: .5px;
  font-variant-numeric: tabular-nums;
}

.spw-ppc-header__contact {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
}

.spw-ppc-header__email {
  color: #000 !important;
  font-family: Tahoma, Helvetica, sans-serif;
  font-size: 20px;
  font-weight: 700;
  text-decoration: none;
}

.spw-ppc-header__basket {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #000 !important;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}

.spw-ppc-header__basket .spw-basket-count {
  top: -10px;
  right: -16px;
}

/* Black USP strip */
.spw-ppc-strip {
  background: #000;
  color: #fff;
}

.spw-ppc-strip__inner {
  min-height: 46px;
  font-family: Tahoma, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: 800;
}

/* Sale banner */
.spw-ppc-sale {
  display: flex;
  justify-content: center;
  height: 200px;
  background: url('/assets/showplatesworld/images/ppc/backbanner.gif') center / cover no-repeat;
}

.spw-ppc-sale img {
  display: block;
  width: auto;
  height: 200px;
}

/* ---- Builder on PPC pages ------------------------------------------------- */
body.spw-ppc #builder.spw-builder-first {
  margin-top: 30px;
}

body.spw-ppc .spw-builder-title {
  font-family: 'Leelawadee UI', Arial, sans-serif !important;
  font-size: 25px !important;
  font-weight: 700 !important;
  line-height: 27px !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
  margin: 0 0 20px !important;
}

.spw-ppc-icons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  list-style: none;
  margin: 0 0 20px !important;
  padding: 0 !important;
}

.spw-ppc-icons li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.spw-ppc-icons svg {
  width: 52px;
  height: 52px;
  color: #13265c;
}

.spw-ppc-icons span {
  font-family: 'Fredoka One', Arial, sans-serif;
  font-size: 13px;
  line-height: 1.25;
  color: #555;
  text-transform: uppercase;
}

/* Text style buttons: unselected are white with a grey border on live */
body.spw-ppc #builder.spw-builder-first #premiumplates-builder .segmented__option {
  background: #fff !important;
  border: 3px solid #ccc !important;
  color: #000 !important;
}

body.spw-ppc #builder.spw-builder-first #premiumplates-builder .segmented__input:checked + .segmented__option {
  background: #000 !important;
  border-color: #000 !important;
  color: #fff !important;
}

/* Price block: "Price: £x", red struck-through was-price, green saving */
body.spw-ppc .pricing-wrapper .desk-slashed-price strong:first-child {
  display: none;
}

body.spw-ppc .pricing-wrapper .desk-slashed-price .slash-price {
  color: #f00 !important;
  text-decoration: line-through;
  font-size: 18px !important;
  margin: 0 !important;
}

body.spw-ppc .pricing-wrapper .price {
  font-family: Tahoma, Helvetica, sans-serif;
  font-size: 26px !important;
  font-weight: 700;
  color: #000;
}

body.spw-ppc .pricing-wrapper .price strong {
  display: inline !important;
  font-size: inherit !important;
}

body.spw-ppc .pricing-wrapper {
  display: flex !important;
  flex-direction: column-reverse;
  gap: 2px;
}

.spw-ppc-save {
  font-family: Tahoma, Helvetica, sans-serif;
  font-size: 15px;
  color: #26b00a;
}

/* ---- Below the builder: reviews + High Quality Plates -------------------- */
.spw-ppc-below__inner {
  display: grid;
  grid-template-columns: 403px minmax(0, 1fr);
  gap: 90px;
  max-width: 1150px;
  margin: 0 auto;
  padding: 40px 15px 60px;
  box-sizing: border-box;
}

.spw-ppc-reviews__summary {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 30px;
}

.spw-ppc-reviews__summary h2 {
  font-family: Tahoma, Helvetica, sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #6f6e6e !important;
  margin: 0 !important;
  text-transform: none !important;
}

.spw-ppc-reviews__stars,
.spw-ppc-review__rating span {
  color: #f5b301;
  letter-spacing: 1px;
}

.spw-ppc-reviews__stars {
  font-size: 30px;
}

.spw-ppc-review {
  margin: 0 0 15px;
  padding: 20px 30px;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  background: #fff;
}

.spw-ppc-review__rating {
  font-size: 14px;
  color: #333;
}

.spw-ppc-review__rating span {
  font-size: 20px;
}

.spw-ppc-review__name {
  margin: 10px 0 2px;
  font-size: 16px;
  font-weight: 700;
  color: #6f6e6e;
}

.spw-ppc-review__title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #333;
}

.spw-ppc-review__text {
  margin: 4px 0 0;
  font-size: 16px;
  line-height: 1.7;
  color: #6f6e6e;
}

.spw-ppc-reviews__source {
  font-size: 13px;
  color: #777;
}

.spw-ppc-reviews__source a {
  color: #335ec1;
}

.spw-ppc-hq__title {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 50px 0 30px !important;
  font-family: 'Leelawadee UI', Arial, sans-serif !important;
  font-size: 25px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  color: #335ec1 !important;
  text-transform: uppercase !important;
}

.spw-ppc-hq__title::before,
.spw-ppc-hq__title::after {
  content: "";
  flex: 1 1 0;
  height: 1px;
  background: #d5d8dc;
}

.spw-ppc-hq__item {
  display: block;
  margin: 0 auto 30px;
  max-width: 600px;
  text-align: center;
  text-decoration: none;
}

.spw-ppc-hq__item span {
  display: block;
  margin: 0 0 20px;
  font-size: 17px;
  font-weight: 700;
  color: #333;
}

.spw-ppc-hq__item img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---- PPC footer ------------------------------------------------------------ */
.spw-ppc-footer {
  background: #fd9a01;
  color: #000;
}

.spw-ppc-footer__inner {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 40px;
  max-width: 1150px;
  margin: 0 auto;
  padding: 55px 15px 30px;
  box-sizing: border-box;
}

.spw-ppc-footer__about p {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.4;
}

.spw-ppc-footer__usps div {
  margin: 0 0 10px;
  font-family: 'Fredoka One', Arial, sans-serif;
  font-size: 18px;
  line-height: 1.6;
}

.spw-ppc-footer__usps img {
  display: block;
  width: 162px;
  height: auto;
  margin-top: 10px;
}

.spw-ppc-footer__help {
  text-align: right;
}

.spw-ppc-footer__help h5 {
  margin: 0 0 20px;
  font-family: 'Fredoka One', Arial, sans-serif;
  font-size: 25px;
  font-weight: 700;
  text-transform: uppercase;
}

.spw-ppc-footer__help p {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.7;
}

.spw-ppc-footer__help a,
.spw-ppc-footer__bottom a {
  color: #000 !important;
}

.spw-ppc-footer__help a {
  font-size: 16px;
}

.spw-ppc-footer__bottom {
  max-width: 1150px;
  margin: 0 auto;
  padding: 0 15px 35px;
  box-sizing: border-box;
  font-size: 12px;
}

/* ---- PPC mobile ----------------------------------------------------------- */
@media (max-width: 1024px) {
  .spw-ppc-header__bar .spw-ppc-header__inner {
    flex-wrap: wrap;
    min-height: 0;
    padding: 12px 15px 0;
    row-gap: 12px;
  }

  .spw-ppc-header__logo img {
    width: 170px;
  }

  .spw-ppc-header__email {
    display: none;
  }

  .spw-ppc-header__countdown {
    order: 3;
    flex: 1 0 100%;
    justify-content: flex-start;
    margin: 0 -15px;
    padding: 10px 15px;
    background: #000;
  }

  .spw-ppc-header__countdown-label {
    font-size: 16px;
  }

  .spw-ppc-header__countdown-time {
    font-size: 20px;
  }

  .spw-ppc-strip {
    display: none;
  }

  .spw-ppc-sale {
    height: 120px;
  }

  .spw-ppc-sale img {
    height: 120px;
  }

  .spw-ppc-below__inner {
    grid-template-columns: 1fr;
    gap: 20px;
    padding-top: 20px;
  }

  .spw-ppc-footer__inner {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .spw-ppc-footer__help {
    text-align: left;
  }

  .spw-ppc-icons span {
    font-size: 11px;
  }
}

/* ---- PPC fixes after side-by-side with live ------------------------------- */
main#plate-type-main-wrapper.spw-ppc-main {
  border-top: 0 !important;
}

body.spw-ppc #premiumplates-builder .spw-ppc-icons svg {
  width: 52px !important;
  height: 52px !important;
  max-width: none !important;
}

body.spw-ppc #premiumplates-builder .spw-ppc-icons span {
  font-family: Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
}

/* Price, was-price, saving stacked (live order) */
body.spw-ppc .pricing-wrapper {
  flex-direction: column !important;
}

body.spw-ppc .pricing-wrapper .price {
  order: 1;
  font-weight: 400 !important;
}

body.spw-ppc .pricing-wrapper .desk-slashed-price {
  order: 2;
}

body.spw-ppc .pricing-wrapper .spw-ppc-save {
  order: 3;
}

/* Live shows labels above the Vehicle / Layout / Front-Rear row */
body.spw-ppc #builder.spw-builder-first #premiumplates-builder .one-your-reg strong {
  display: block !important;
  font-size: 13px !important;
}

body.spw-ppc .spw-review-badge__stars {
  font-size: 30px;
}

/* Footer: black text, Arial (live's rounded font never actually loads) */
.spw-ppc-footer,
.spw-ppc-footer p,
.spw-ppc-footer div {
  color: #000 !important;
}

.spw-ppc-footer__usps div,
.spw-ppc-footer__help h5 {
  font-family: Arial, sans-serif !important;
}

.spw-ppc-footer__usps div {
  font-weight: 400;
}

.spw-ppc-footer__help h5 {
  font-weight: 700 !important;
}

.spw-ppc-footer__inner {
  padding-top: 35px;
}

@media (max-width: 1024px) {
  body.spw-ppc #builder.spw-builder-first #premiumplates-builder .mob-price .pricing-wrapper {
    display: flex !important;
    flex-direction: column !important;
  }

  body.spw-ppc .spw-builder-title {
    font-size: 18px !important;
    line-height: 1.2 !important;
    margin-bottom: 14px !important;
  }

  body.spw-ppc #builder.spw-builder-first {
    margin-top: 10px;
  }
}

/* ==========================================================================
   Paul's brief (14 Oct 2026): shared countdown + basket, orange SEO header,
   SEO hero CTA, compact PPC banner placeholder.
   ========================================================================== */

/* ---- Shared dispatch countdown (partials/spw-countdown.php) ---------------- */
.spw-countdown {
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: #fff;
  font-family: Tahoma, Helvetica, sans-serif;
  font-weight: 700;
  white-space: nowrap;
}

.spw-countdown__label {
  font-size: 20px;
}

.spw-countdown__time {
  font-size: 30px;
  letter-spacing: .5px;
  font-variant-numeric: tabular-nums;
}

.spw-countdown__time[hidden] {
  display: none;
}

.spw-countdown--strip {
  justify-content: center;
  padding: 9px 15px;
  background: #000;
}

.spw-countdown--strip .spw-countdown__label {
  font-size: 15px;
}

.spw-countdown--strip .spw-countdown__time {
  font-size: 19px;
}

/* ---- Shared basket link (partials/spw-basket-link.php) --------------------- */
.spw-basket-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #000 !important;
  font-family: Tahoma, Helvetica, sans-serif;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}

.spw-basket-link .spw-basket-count {
  top: -10px;
  right: -16px;
}

/* ---- Orange SEO header (header-showplatesworld.php) ------------------------ */
.spw-orange-header .spw-ppc-header__contact {
  gap: 8px;
}

.spw-ppc-header__phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #000 !important;
  font-family: Tahoma, Helvetica, sans-serif;
  font-size: 20px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.spw-ppc-header__phone svg,
.spw-mobile-bar__phone svg {
  width: 30px;
  height: 30px;
  padding: 6px;
  box-sizing: border-box;
  border-radius: 50%;
  background: #000;
  color: #fff;
}

.spw-orange-header .spw-ppc-header__email {
  font-size: 15px;
  font-weight: 400;
}

.spw-orange-header .header-bottom {
  margin: 0;
}

/* Mobile bar: logo | phone, basket, menu */
.spw-mobile-bar {
  min-height: 0 !important;
  padding: 10px 15px !important;
  flex-wrap: nowrap !important;
}

.spw-mobile-bar .spw-ppc-header__logo img {
  width: 150px;
  height: auto;
}

.spw-mobile-bar__actions {
  display: flex;
  align-items: center;
  gap: 18px;
}

.spw-mobile-bar__phone {
  display: inline-flex;
}

.spw-mobile-bar .spw-basket-link__text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.spw-mobile-bar .spw-basket-link img {
  width: 26px;
  height: auto;
}

.spw-mobile-bar .menu-toggler {
  margin: 0 !important;
}

/* ---- SEO hero CTA: reg box + button (banner.php) ----------------------------- */
.hero-section .spw-hero-cta {
  display: flex !important;
  align-items: stretch;
  gap: 10px;
  max-width: 600px;
  margin: 0;
}

.hero-section .spw-hero-cta #plate-reg {
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
  height: 72px !important;
}

.spw-hero-cta__btn {
  flex: 0 0 auto;
  padding: 0 22px;
  border: 0;
  border-radius: 4px;
  background: #fc9b04;
  color: #fff;
  font-family: 'Roboto', sans-serif;
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
}

.spw-hero-cta__btn:hover {
  background: #e08800;
}

@media (max-width: 768px) {
  .hero-section .spw-hero-cta {
    flex-direction: column;
  }

  .spw-hero-cta__btn {
    height: 56px;
  }
}

/* ---- PPC: compact half-height banner (placeholder until Paul's artwork) ----- */
.spw-ppc-banner {
  height: 100px;
  background: url('/assets/showplatesworld/images/ppc/backbanner.gif') center / cover no-repeat;
}

/* PPC header uses the shared countdown now */
@media (max-width: 1024px) {
  .spw-ppc-header .spw-countdown--bar {
    order: 3;
    flex: 1 0 100%;
    justify-content: flex-start;
    margin: 0 -15px;
    padding: 10px 15px;
    background: #000;
  }

  .spw-ppc-header .spw-countdown--bar .spw-countdown__label {
    font-size: 16px;
  }

  .spw-ppc-header .spw-countdown--bar .spw-countdown__time {
    font-size: 20px;
  }

  .spw-ppc-banner {
    height: 60px;
  }
}

/* PPC support pages: no breadcrumb back into the main site */
body.spw-ppc #breadcrumb-wrapper,
body.spw-ppc .breadcrumb-no-banner {
  display: none !important;
}

/* Hero CTA button: beat style.css `.hero-section .hero-input button { background:#000 }` */
.hero-section .spw-hero-cta .spw-hero-cta__btn {
  width: auto;
  height: 72px;
  padding: 0 26px;
  border-radius: 4px;
  background: #fc9b04;
  color: #fff;
  font-size: 18px;
  line-height: 1.1;
  white-space: nowrap;
}

.hero-section .spw-hero-cta .spw-hero-cta__btn:hover {
  background: #e08800;
}

@media (max-width: 768px) {
  .hero-section .spw-hero-cta #plate-reg,
  .hero-section .spw-hero-cta .spw-hero-cta__btn {
    width: 100% !important;
  }

  .hero-section .spw-hero-cta .spw-hero-cta__btn {
    height: 56px;
  }
}

/* ---- SEO pass 2 (14 Oct 2026) ------------------------------------------------ */
/* Hero heading looks the same whether it's the H1 or (home) an H2 */
.hero-section .spw-hero-heading {
  font-family: 'Roboto Condensed', sans-serif !important;
  font-size: 34px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  text-align: left;
  color: #fff !important;
  margin: 0 0 20px !important;
}

@media (max-width: 768px) {
  .hero-section .spw-hero-heading {
    text-align: center;
  }
}

/* Visible "from" price in the hero (matches the Product structured data) */
.hero-section .spw-hero-price {
  margin: -8px 0 18px !important;
  font-family: 'Roboto', sans-serif;
  font-size: 18px !important;
  color: #fff !important;
}

.hero-section .spw-hero-price strong {
  color: #fc9b04;
  font-size: 22px;
}

@media (max-width: 768px) {
  .hero-section .spw-hero-price {
    text-align: center;
  }
}

/* Home: the welcome heading is now the H1 - keep the look it had as an H2 */
.common-grid-section-home .prose h1,
.common-grid-section-home .div-with-links h1 {
  font-family: Inter, system-ui, sans-serif;
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 700;
  line-height: 1.2;
  color: #111;
  text-align: left;
  margin: 0 0 16px;
}

/* ---- Site footer in the /creator/ design (SEO pages) -------------------------- */
.spw-site-footer__inner {
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr !important;
}

.spw-site-footer__logo img {
  display: block;
  width: 180px;
  height: auto;
  margin: 0 0 14px;
  border-radius: 4px;
}

.spw-site-footer a {
  color: #000 !important;
}

.spw-site-footer .spw-ppc-footer__about a {
  font-weight: 700;
  text-decoration: underline;
}

.spw-site-footer__col h5,
.spw-site-footer .spw-ppc-footer__help h5 {
  margin: 0 0 14px;
  font-family: Arial, sans-serif !important;
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  color: #000;
}

.spw-site-footer .spw-ppc-footer__help h5 {
  font-size: 25px;
}

.spw-site-footer__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.spw-site-footer__col li {
  margin: 0 0 8px;
  font-size: 15px;
}

.spw-site-footer__col a {
  text-decoration: none;
}

.spw-site-footer__col a:hover,
.spw-site-footer .spw-ppc-footer__help a:hover {
  text-decoration: underline;
}

.spw-site-footer .spw-ppc-footer__help img {
  display: inline-block;
  width: 162px;
  height: auto;
  margin-top: 4px;
}

.spw-site-footer__usps {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 40px;
  max-width: 1150px;
  margin: 0 auto;
  padding: 16px 15px;
  border-top: 1px solid rgba(0, 0, 0, .15);
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #000;
}

.spw-site-footer .spw-ppc-footer__bottom {
  padding-top: 10px;
}

@media (max-width: 1024px) {
  .spw-site-footer__inner {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 600px) {
  .spw-site-footer__inner {
    grid-template-columns: 1fr !important;
  }

  .spw-site-footer__usps {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
}

/* Desktop-only line break in headings (home hero: break before the "&") */
@media (max-width: 767px) {
  br.spw-br-desk {
    display: none;
  }
}

/* (PPC banner placeholder hide rule removed 16 Oct 2026 - Paul's banners are in; see end of file) */

/* PPC header carries the phone like the SEO header (Matt, 14 Oct 2026).
   Mobile: icon only, beside the basket. */
@media (max-width: 1024px) {
  .spw-ppc-header .spw-ppc-header__contact {
    flex-direction: row;
    align-items: center;
    gap: 18px;
  }

  .spw-ppc-header .spw-ppc-header__phone span {
    display: none;
  }
}

/* No orange rule under the hero on any page (Matt, 14 Oct 2026). style.css gives <main> a
   2px #FC9B04 border-top; deploy 10 only removed it on <main class="spw-live">. */
main {
  border-top: 0 !important;
}

/* Less white space between the hero and the first section (Matt, 14 Oct 2026).
   Was hero margin 40 + main padding 40 + first section padding 40 = 120px on desktop. */
@media (min-width: 768px) {
  main {
    padding-top: 0 !important;
  }

  main > .first-section-padding {
    padding-top: 0 !important;
  }
}

/* Mobile: product pages already pull their first section up (-70px); home doesn't, so it
   kept an 80px gap. */
@media (max-width: 767px) {
  main:not(:has(> :first-child[class*="adjust-to-top"])) {
    padding-top: 0 !important;
  }
}

/* Hero ENTER REG auto-continue: brief "on its way" state while the builder opens */
.spw-hero-cta.is-going .spw-hero-cta__btn {
  opacity: .7;
  pointer-events: none;
}

/* ---- "Ready to design your plates?" CTA band (reg-cta.php, Matt 15 Oct 2026) ---- */
.spw-reg-cta {
  max-width: 1200px;
  margin: 48px auto;
  padding: 0 20px;
  box-sizing: border-box;
}

.spw-reg-cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px 40px;
  padding: 28px 36px;
  border-radius: 20px;
  background: linear-gradient(110deg, #111 0%, #2a2a2a 100%);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
}

.spw-reg-cta__title {
  margin: 0 !important;
  font-family: 'Roboto Condensed', Roboto, Arial, sans-serif !important;
  font-size: clamp(22px, 2.4vw, 30px) !important;
  font-weight: 600 !important;
  line-height: 1.15 !important;
  text-transform: uppercase;
  color: #fff !important;
}

.spw-reg-cta__form {
  display: flex;
  flex: 0 1 600px;
  gap: 10px;
  margin: 0;
}

.spw-reg-cta__form input[name="reg"] {
  flex: 1 1 auto;
  min-width: 0;
  height: 64px;
  margin: 0;
  padding: 0 12px;
  border: 4px solid #27b523;
  border-radius: 4px;
  background: #fff;
  color: #111;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 34px;
  font-weight: 900;
  letter-spacing: .12em;
  text-align: center;
  text-transform: uppercase;
  box-sizing: border-box;
}

.spw-reg-cta__form input[name="reg"]::placeholder {
  color: #111;
  opacity: 1;
}

.spw-reg-cta__form .spw-hero-cta__btn {
  height: 64px;
  padding: 0 26px;
  white-space: nowrap;
}

.spw-reg-form.is-going .spw-hero-cta__btn {
  opacity: .7;
  pointer-events: none;
}

@media (max-width: 900px) {
  .spw-reg-cta__inner {
    flex-direction: column;
    align-items: stretch;
    padding: 24px 20px;
    text-align: center;
  }

  .spw-reg-cta__form {
    flex-direction: column;
    flex-basis: auto;
  }

  .spw-reg-cta__form .spw-hero-cta__btn {
    height: 56px;
  }
}

/* Mobile: style.css pulls some sections up (-70 / -150px) to tuck them under the one
   before; after a CTA band that would overlap it, so cancel the pull there. */
@media (max-width: 768px) {
  .spw-reg-cta {
    margin: 32px auto;
  }

  .spw-reg-cta + [class*="adjust-to-top"] {
    margin-top: 0 !important;
  }
}

/* Spec card footnote ("*If road legal is chosen on the builder", Matt 15 Oct 2026) */
.spw-spec-note {
  margin: 6px 0 0 !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  color: #666 !important;
}

/* ---- Spec cards, every product page (Matt, 15 Oct 2026) ----------------------
   Leftover cards on the last row are centred, and every card title stays on one line
   (headers/partials/spw-header-scripts.php shrinks a page's card titles to the size the
   longest one needs, so they all match). */
#why .cards {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 20px 30px !important;
}

#why .cards .no-card {
  flex: 0 1 calc((100% - 60px) / 3) !important;
  min-width: 0;
  box-sizing: border-box;
}

#why .cards h3 {
  white-space: nowrap !important;
  overflow: hidden;
}

@media (max-width: 768px) {
  #why .cards .no-card {
    flex-basis: 100% !important;
  }
}

/* Spec cards: two per row on laptops/tablets so titles have room to stay on one line */
@media (min-width: 769px) and (max-width: 1199px) {
  #why .cards .no-card {
    flex-basis: calc((100% - 30px) / 2) !important;
  }
}

/* ---- Spec cards: smaller (Matt, 15 Oct 2026) ------------------------------------ */
#why .cards {
  max-width: 1000px;
  margin-left: auto !important;
  margin-right: auto !important;
  gap: 16px 20px !important;
}

#why .cards .no-card {
  flex-basis: calc((100% - 40px) / 3) !important;
  padding: 18px 14px !important;
  border-radius: 14px !important;
}

#why .cards .no-card .icon img {
  display: block;
  width: 52px !important;
  height: auto !important;
  margin: 0 auto;
}

#why .cards h3 {
  margin: 10px 0 0 !important;
  font-size: 19px !important;
  line-height: 1.25 !important;
}

#why .cards .spw-spec-note {
  font-size: 12px !important;
}

@media (min-width: 769px) and (max-width: 1199px) {
  #why .cards .no-card {
    flex-basis: calc((100% - 20px) / 2) !important;
  }
}

/* Mobile: slim rows - icon on the left, title beside it */
@media (max-width: 768px) {
  #why .cards {
    gap: 10px !important;
  }

  #why .cards .no-card {
    flex-basis: 100% !important;
    display: grid !important;
    grid-template-columns: 40px 1fr;
    column-gap: 14px;
    align-items: center;
    padding: 10px 14px !important;
    text-align: left !important;
  }

  #why .cards .no-card > div {
    grid-row: 1 / span 2;
  }

  #why .cards .no-card .icon img {
    width: 40px !important;
    margin: 0;
  }

  #why .cards h3 {
    margin: 0 !important;
    font-size: 17px !important;
    text-align: left !important;
  }

  #why .cards .spw-spec-note {
    margin: 2px 0 0 !important;
    text-align: left !important;
  }
}

@media (max-width: 768px) {
  #why .cards .no-card > div,
  #why .cards .no-card .icon {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
  }

  #why .cards .no-card h3:last-child {
    grid-row: 1 / span 2;
    align-self: center;
  }

  #why .cards .no-card h3:not(:last-child) {
    align-self: end;
  }

  #why .cards .no-card .spw-spec-note {
    align-self: start;
  }
}

/* the icon images carry a reflection underneath - lift titles to the icon's visual centre */
@media (max-width: 768px) {
  #why .cards .no-card h3:last-child {
    padding-bottom: 8px !important;
  }
}

/* Mobile: "Types of Number Plates" photos two per row instead of one big photo each
   (Matt, 15 Oct 2026 - keep mobile compact). */
@media (max-width: 768px) {
  .types-section .types-grid,
  .types-section .types-grid-2,
  .types-section .types-grid-2-number {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  .types-section .type-card img {
    border-radius: 12px !important;
  }

  .types-section .type-card {
    margin: 0 !important;
  }
}

/* Photos that link to their builder (Matt, 15 Oct 2026) */
a.spw-photo-link {
  display: block;
  height: 100%;
  border-radius: inherit;
  transition: opacity .15s;
}

a.spw-photo-link:hover {
  opacity: .9;
}

a.spw-photo-link img {
  display: block;
}

/* "Types of Number Plates" on product pages: all four photos in one row on desktop
   (Matt, 15 Oct 2026 - was a 2x2 grid of very large photos). */
@media (min-width: 769px) {
  .types-section .types-grid-2-number {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
  }

  .types-section .types-grid-2-number .type-card img {
    max-height: none !important;
    height: auto !important;
    aspect-ratio: 3 / 2; /* Matt's plate-type photos are 3:2 (16 Oct 2026) */
    object-fit: cover;
    border-radius: 14px !important;
  }
}

/* Home "Types of Number Plates": the bottom two cards match the top three in size, centred */
@media (min-width: 769px) {
  .types-section .types-grid-2 {
    grid-template-columns: repeat(2, calc((100% - 50px) / 3)) !important;
    justify-content: center;
  }
}

/* Bike photo carries an inline scale(0.7) from the old 2x2 layout - in the one-row layout
   show it full size like the others */
@media (min-width: 769px) {
  .types-section .types-grid-2-number .type-card img[style*="scale"] {
    transform: none !important;
    object-fit: contain;
  }
}

/* Show Plates: the first section photo had no image (commented out in style.css) and showed
   as a grey box - use the photo live uses in that spot. */
.show-plates-maker-img-1 {
  background: url('/assets/showplatesworld/images/show-plates-maker-img-1.webp') center/cover no-repeat !important;
}

/* ---- FAQs page (faqs.php, rebuilt 15 Oct 2026): grouped, searchable accordion ---- */
.spwq {
  max-width: 900px;
  margin: 0 auto;
  padding: 24px 20px 64px;
  font-family: Roboto, Arial, sans-serif;
  color: #111;
}

.spwq__head {
  text-align: center;
  margin-bottom: 32px;
}

.spwq__head h1 {
  margin: 0 0 20px !important;
  font-family: 'Roboto Condensed', Roboto, Arial, sans-serif !important;
  font-size: clamp(30px, 4vw, 42px) !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  color: #111 !important;
}

.spwq__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.spwq__search {
  position: relative;
  display: block;
  max-width: 560px;
  margin: 0 auto 18px;
}

.spwq__search svg {
  position: absolute;
  left: 18px;
  top: 50%;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  fill: none;
  stroke: #777;
  stroke-width: 2;
  stroke-linecap: round;
}

.spwq__search input {
  width: 100%;
  height: 54px;
  margin: 0;
  padding: 0 18px 0 50px;
  border: 2px solid #e3e3e3;
  border-radius: 999px;
  background: #fff;
  font-size: 16px;
  color: #111;
  box-sizing: border-box;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}

.spwq__search input:focus {
  border-color: #fd9a01;
  box-shadow: 0 0 0 4px rgba(253, 154, 1, .18);
}

.spwq__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.spwq__chip {
  padding: 9px 16px;
  border: 1px solid #ddd;
  border-radius: 999px;
  background: #fff;
  font-size: 14px;
  font-weight: 500;
  color: #333;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}

.spwq__chip:hover {
  border-color: #111;
}

.spwq__chip.is-active {
  background: #111;
  border-color: #111;
  color: #fff;
}

.spwq__group {
  margin-top: 28px;
}

.spwq__group-title {
  margin: 0 0 12px !important;
  font-family: Roboto, Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #b06a00 !important;
}

.spwq__item {
  margin: 0 0 10px;
  border: 1px solid #ececec;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .04);
  transition: box-shadow .15s, border-color .15s;
}

.spwq__item[open] {
  border-color: #fd9a01;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .07);
}

.spwq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  list-style: none;
  cursor: pointer;
}

.spwq__item summary::-webkit-details-marker {
  display: none;
}

.spwq__item summary h3 {
  margin: 0 !important;
  font-family: Roboto, Arial, sans-serif !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  color: #111 !important;
  text-transform: none !important;
}

.spwq__icon {
  position: relative;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #f4f4f4;
  transition: background .15s, transform .2s;
}

.spwq__icon::before,
.spwq__icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 2px;
  background: #111;
  transform: translate(-50%, -50%);
}

.spwq__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
  transition: transform .2s;
}

.spwq__item[open] .spwq__icon {
  background: #fd9a01;
}

.spwq__item[open] .spwq__icon::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

.spwq__answer {
  padding: 0 20px 18px;
  font-size: 15px;
  line-height: 1.65;
  color: #444;
}

.spwq__answer p {
  margin: 0 0 12px !important;
}

.spwq__answer p:last-child {
  margin-bottom: 0 !important;
}

.spwq__answer ul {
  margin: 0 0 12px;
  padding-left: 20px;
}

.spwq__answer li {
  margin-bottom: 6px;
}

.spwq__answer a {
  color: #b06a00;
  font-weight: 600;
  text-decoration: underline;
}

.spwq__empty {
  margin: 24px 0 0;
  text-align: center;
  color: #666;
}

.spwq__contact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 40px;
  padding: 24px 28px;
  border-radius: 18px;
  background: #fd9a01;
}

.spwq__contact h2 {
  margin: 0 0 4px !important;
  font-family: Roboto, Arial, sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #111 !important;
}

.spwq__contact p {
  margin: 0 !important;
  font-size: 15px;
  color: #222;
}

.spwq__contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.spwq__btn {
  display: inline-block;
  padding: 12px 20px;
  border-radius: 999px;
  background: #fff;
  font-weight: 700;
  font-size: 15px;
  color: #111 !important;
  text-decoration: none !important;
  white-space: nowrap;
}

.spwq__btn--dark {
  background: #111;
  color: #fff !important;
}

@media (max-width: 640px) {
  .spwq {
    padding: 16px 16px 48px;
  }

  .spwq__item summary {
    padding: 15px 16px;
  }

  .spwq__item summary h3 {
    font-size: 16px !important;
  }

  .spwq__answer {
    padding: 0 16px 16px;
  }

  .spwq__contact {
    flex-direction: column;
    align-items: flex-start;
    padding: 22px 20px;
  }
}

/* ---- Contact page (Matt, 15 Oct 2026) ------------------------------------------- */
/* Embedded chat: the widget's red accents -> SPW orange / black */
#spw-contact-chat .pc-qr-btn {
  border-color: #fd9a01 !important;
  color: #111 !important;
}

#spw-contact-chat .pc-qr-btn:hover {
  background: #fd9a01 !important;
}

#spw-contact-chat .pc-input,
#spw-contact-chat #pc-input {
  border-color: #ccc !important;
}

#spw-contact-chat .pc-input:focus,
#spw-contact-chat #pc-input:focus {
  border-color: #fd9a01 !important;
}

#spw-contact-chat .pc-send-btn,
#spw-contact-chat #pc-send {
  background: #fd9a01 !important;
  color: #111 !important;
}

/* Mobile: the four contact cards two per row instead of a tall stack */
@media (max-width: 760px) {
  .spw-contact-info {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 10px !important;
  }

  .spw-contact-info > *:not(.spw-contact-card) {
    grid-column: 1 / -1;
  }

  .spw-contact-card {
    flex-direction: column;
    gap: 8px !important;
    padding: 12px !important;
  }
}

/* Contact: "Prefer to write to us instead?" is now a mailto link */
a.spw-mailto {
  text-decoration: none !important;
  color: #111 !important;
}

a.spw-mailto:hover h3 {
  text-decoration: underline;
}

.spw-mailto__addr {
  margin-left: auto;
  font-weight: 700;
  color: #b06a00;
}

a.spw-mailto .spw-toggle-icon {
  margin-left: 8px !important;
}

@media (max-width: 560px) {
  a.spw-mailto {
    flex-wrap: wrap;
  }

  .spw-mailto__addr {
    order: 3;
    flex-basis: 100%;
    margin: 4px 0 0 28px;
  }
}

/* Top USP strip on the /creator pages: same look as the footer's USP strip (Matt, 15 Oct 2026) */
.spw-ppc-strip {
  background: #111 !important;
}

.spw-ppc-strip__inner {
  min-height: 0 !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  font-family: Roboto, Arial, Helvetica, sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}

.spw-ppc-strip__inner span {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #fff;
}

.spw-ppc-strip__inner svg {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  padding: 9px;
  box-sizing: border-box;
  border-radius: 50%;
  background: #fd9a01;
  fill: none;
  stroke: #111;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Embedded Reg chat: customer's own messages in SPW orange (were red) */
#spw-contact-chat .pc-msg.pc-user .pc-bubble {
  background: #fd9a01 !important;
  color: #111 !important;
}

/* ---- Legal pages (T&Cs, Privacy): modern layout (Matt, 15 Oct 2026) ------------------
   Sticky contents on desktop, numbered section cards; wording unchanged. */
.spw-legal-page {
  background: #f7f7f8;
}

.spwl {
  max-width: 1160px;
  margin: 0 auto;
  padding: 24px 20px 72px;
  font-family: Roboto, Arial, sans-serif;
  color: #222;
}

.spwl__head {
  margin-bottom: 28px;
  text-align: center;
}

.spwl__head h1 {
  margin: 0 !important;
  font-family: 'Roboto Condensed', Roboto, Arial, sans-serif !important;
  font-size: clamp(30px, 4vw, 42px) !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  color: #111 !important;
}

.spwl__layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 32px;
  align-items: start;
}

.spwl__toc {
  position: sticky;
  top: 20px;
  padding: 18px 18px 12px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid #ececec;
}

.spwl__toc summary {
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #b06a00;
  list-style: none;
  cursor: default;
}

.spwl__toc summary::-webkit-details-marker {
  display: none;
}

.spwl__toc ol {
  margin: 0;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.4;
}

.spwl__toc li {
  margin-bottom: 8px;
  color: #999;
}

.spwl__toc a {
  color: #222 !important;
  text-decoration: none !important;
}

.spwl__toc a:hover {
  color: #b06a00 !important;
  text-decoration: underline !important;
}

.spwl__body {
  min-width: 0;
}

.spwl__card {
  margin-bottom: 16px;
  padding: 24px 28px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid #ececec;
  scroll-margin-top: 20px;
}

.spwl__card h2 {
  margin: 0 0 12px !important;
  padding-bottom: 10px;
  border-bottom: 2px solid #fd9a01;
  font-family: Roboto, Arial, sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: #111 !important;
}

.spwl__card p {
  margin: 0 0 10px !important;
  font-size: 15px;
  line-height: 1.65;
  color: #444;
}

.spwl__card p:last-child {
  margin-bottom: 0 !important;
}

.spwl__n {
  display: inline-block;
  min-width: 34px;
  font-weight: 700;
  color: #111;
}

.spwl__intro {
  border-left: 4px solid #fd9a01;
}

.spwl__company {
  margin-bottom: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  background: #faf7f2;
  font-size: 14px;
  line-height: 1.55;
  color: #333;
}

.spwl__card a,
.spwl__support a {
  color: #b06a00 !important;
  font-weight: 600;
}

.spwl__support {
  margin: 24px 0 0 !important;
  padding: 18px 22px;
  border-radius: 14px;
  background: #fd9a01;
  font-size: 15px;
  font-weight: 500;
  color: #111;
}

.spwl__support a {
  color: #111 !important;
  text-decoration: underline;
}

@media (max-width: 900px) {
  .spwl__layout {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .spwl__toc {
    position: static;
  }

  .spwl__toc summary {
    cursor: pointer;
    margin-bottom: 0;
  }

  .spwl__toc details[open] summary {
    margin-bottom: 10px;
  }

  .spwl__card {
    padding: 20px 18px;
  }
}

@media (max-width: 900px) {
  .spwl__toc summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .spwl__toc summary::after {
    content: "";
    width: 9px;
    height: 9px;
    border-right: 2px solid #b06a00;
    border-bottom: 2px solid #b06a00;
    transform: rotate(45deg);
    transition: transform .2s;
  }

  .spwl__toc details[open] summary::after {
    transform: rotate(-135deg);
  }
}

/* Legal page cards: lists */
.spwl__card ul {
  margin: 0 0 12px;
  padding-left: 20px;
}

.spwl__card li {
  margin-bottom: 8px;
  font-size: 15px;
  line-height: 1.6;
  color: #444;
}

.spwl__card li b {
  color: #111;
}

/* PPC builder pages, desktop: a little more air above the builder, less below it (Matt, 15 Oct) */
@media (min-width: 1025px) {
  body.spw-ppc section#builder.spw-builder-first {
    margin-top: 48px !important;
    margin-bottom: 0 !important;
  }
  body.spw-ppc .spw-ppc-below__inner {
    padding-top: 48px;
  }
}

/* ---- Text style: six buttons, 3 x 2 (Matt, 15 Oct 2026) ------------------ */
#builder.spw-builder-first #premiumplates-builder #builder-font .segmented {
  flex-wrap: wrap !important;
  gap: 10px !important;
}

#builder.spw-builder-first #premiumplates-builder #builder-font .segmented__option {
  flex: 0 0 calc((100% - 20px) / 3) !important;
  margin: 0 !important;
}

.spw-builder-first label[for="reg-font-1"]  { order: 1; }
.spw-builder-first label[for="reg-font-6"]  { order: 2; }
.spw-builder-first label[for="reg-font-9"]  { order: 3; }
.spw-builder-first label[for="reg-font-25"] { order: 4; }
.spw-builder-first label[for="reg-font-18"] { order: 5; }
.spw-builder-first label[for="reg-font-26"] { order: 6; }

#builder.spw-builder-first #premiumplates-builder #builder-font .text-style-pp-wrapper {
  grid-template-columns: minmax(0, 1fr) !important;
}

#builder.spw-builder-first #premiumplates-builder #builder-font .text-style-option,
#builder.spw-builder-first #premiumplates-builder #builder-font .segmented {
  width: 100% !important;
}

/* ---- Paul's hero banners (15 Oct 2026) -------------------------------------
   Desktop art is a 1300x297 strip with black on the left for the text, so the
   hero is shorter than the old 500px photo hero and keeps the plate (right) in
   view. Mobile art is a 900x300 strip: shown above the text on black. */
.hero-section > picture { display: contents; }

.hero-section > picture > img.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: right center;
  z-index: 0;
}

@media (min-width: 769px) {
  .hero-section {
    min-height: clamp(340px, 24vw, 440px) !important;
  }
}

@media (max-width: 768px) {
  .hero-section.spw-hero--strip {
    min-height: 0 !important;
    padding-top: 33.333vw !important;
    background: #000 !important;
  }

  .hero-section.spw-hero--strip > picture > img.hero-bg {
    height: 33.333vw;
    bottom: auto;
    object-position: center;
  }

  .hero-section.spw-hero--strip::before {
    display: none;
  }

  .hero-section.spw-hero--strip .container {
    padding-top: 22px !important;
    padding-bottom: 26px !important;
  }
}

/* ---- Optimised section photos (15 Oct 2026): resized to 2x their displayed size, WebP.
   Originals are untouched in /images/; style.css still points at them, these win. */
.page-4d-img-1 { background-image: url('/assets/showplatesworld/images/opt/4d-image-1.webp') !important; }
.motorbike-img-2 { background-image: url('/assets/showplatesworld/images/opt/motorbike-img-2.webp') !important; }
.page-4d-img-2 { background-image: url('/assets/showplatesworld/images/opt/4d-image-2.webp') !important; }
.plate-3d-img-1 { background-image: url('/assets/showplatesworld/images/opt/3d-img-1.webp') !important; }
.plate-3d-img-2 { background-image: url('/assets/showplatesworld/images/opt/3d-img-2.webp') !important; }
.motorbike-img-1 { background-image: url('/assets/showplatesworld/images/opt/motorbike-img-1.webp') !important; }
.blue-img { background-image: url('/assets/showplatesworld/images/opt/home-orange-mini.webp') !important; } /* Matt 16 Oct 2026: orange Mini SPW 1 (was the blue car) */
.show-plates-maker-img-2 { background-image: url('/assets/showplatesworld/images/opt/show-plates-maker-img-2.webp') !important; }
.number-plate-img-1 { background-image: url('/assets/showplatesworld/images/opt/number-plate-image-1.webp') !important; }

/* ---- /creator/motorcycle-number-plates: bike preview (16 Oct 2026) ---------
   Magento renders the bike plate at 322x262, so the old full-width preview
   (624px) was stretched and blurry. Cap it near its real size, centred. */
body.spw-ppc--bike #numberplate-mob-default,
body.spw-ppc--bike #numberplate-mob,
body.spw-ppc--bike #numberplate {
  display: block;
  width: auto !important;
  max-width: 340px !important;
  height: auto !important;
  margin: 0 auto !important;
}

/* ---- 5D page (16 Oct 2026): section images are renders of 5D plates on a soft card ---- */
.spw-5d-render { display: block; }
.spw-5d-render img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 50px 150px 50px 50px;
}

/* Product-page "Types of Number Plates" with five cards (Show Plates page, 16 Oct 2026): one row of five */
@media (min-width: 769px) {
  .types-section .types-grid-2-number:has(> .type-card:nth-child(5)) {
    grid-template-columns: repeat(5, 1fr) !important;
  }
}

/* ---- Dispatch countdown, modern pill (16 Oct 2026, Matt: "look more modern") ----
   Dark pill, pulsing dot, label, then HH : MM : SS in orange tiles. Same markup on the
   SEO bar, the mobile strip and the PPC bar; the script fills the tiles. */
.spw-countdown {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 7px 8px 7px 16px;
  border-radius: 999px;
  background: #111;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
  font-family: Roboto, Arial, sans-serif !important;
  color: #fff;
}
.spw-countdown::before {
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #2ecc71;
  box-shadow: 0 0 0 0 rgba(46, 204, 113, .6);
  animation: spw-cd-pulse 2s infinite;
}
@keyframes spw-cd-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(46, 204, 113, .6); }
  70%  { box-shadow: 0 0 0 8px rgba(46, 204, 113, 0); }
  100% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .spw-countdown::before { animation: none; }
}
.spw-countdown .spw-countdown__label {
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: .2px;
  color: #fff !important;
}
.spw-countdown .spw-countdown__time {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 18px !important;
  font-weight: 700;
  letter-spacing: 0;
}
.spw-countdown .spw-countdown__time[hidden] { display: none; }
.spw-cd-u {
  min-width: 30px;
  padding: 3px 5px;
  border-radius: 7px;
  background: #FC9B04;
  color: #111;
  text-align: center;
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
}
.spw-cd-sep {
  color: #FC9B04;
  font-weight: 700;
  padding: 0 1px;
}
/* closed (after 2pm / weekends): label only, so balance the padding */
.spw-countdown:has(.spw-countdown__time[hidden]) { padding-right: 16px; }

/* Mobile strip under the SEO header: keep the black band, centre the pill in it */
.spw-countdown.spw-countdown--strip {
  display: flex !important;
  justify-content: center !important;
  border-radius: 0;
  box-shadow: none;
  padding: 8px 12px;
}
.spw-countdown--strip .spw-countdown__label { font-size: 14px !important; }
.spw-countdown--strip .spw-countdown__time { font-size: 15px !important; }
.spw-countdown--strip .spw-cd-u { min-width: 26px; padding: 2px 4px; }

/* PPC header on tablets/phones: full-width black bar, not a pill */
@media (max-width: 1024px) {
  .spw-ppc-header .spw-countdown.spw-countdown--bar {
    display: flex !important;
    border-radius: 0;
    box-shadow: none;
    padding: 8px 15px;
  }
  .spw-ppc-header .spw-countdown--bar .spw-countdown__label { font-size: 14px !important; }
  .spw-ppc-header .spw-countdown--bar .spw-countdown__time { font-size: 15px !important; }
}

/* PPC "High Quality Plates" photos: rounded corners like the plate-type cards (Matt, 16 Oct 2026 -
   placeholder styling until Paul's new images) */
.spw-ppc-hq__item img {
  border-radius: 16px;
}

/* PPC "High Quality Plates" as a 2x2 grid of cards (16 Oct 2026): image on top, label below */
.spw-ppc-hq__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.spw-ppc-hq .spw-ppc-hq__item {
  display: flex;
  flex-direction: column;
  margin: 0;
  max-width: none;
  overflow: hidden;
  border: 1px solid #ececec;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .06);
  transition: transform .15s ease, box-shadow .15s ease;
}
.spw-ppc-hq .spw-ppc-hq__item:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .12);
}
.spw-ppc-hq .spw-ppc-hq__item img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 0;
}
.spw-ppc-hq .spw-ppc-hq__item span {
  margin: 0;
  padding: 12px 10px 14px;
  font-family: Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #111;
}
@media (max-width: 768px) {
  .spw-ppc-hq__grid { gap: 12px; }
  .spw-ppc-hq .spw-ppc-hq__item span { font-size: 14px; padding: 10px 8px 12px; }
}
/* line the grid's heading up with the reviews heading (sticky doesn't work here: html/body overflow-x:hidden) */
@media (min-width: 769px) {
  .spw-ppc-hq { align-self: start; }
  .spw-ppc-hq .spw-ppc-hq__title { margin-top: 0 !important; }
}

/* PPC reviews, compact (16 Oct 2026, Matt): same reviews and wording, tighter cards so the column
   sits level with the High Quality Plates grid on desktop */
@media (min-width: 769px) {
  .spw-ppc-reviews .spw-ppc-reviews__summary { margin-bottom: 14px !important; }
  .spw-ppc-reviews .spw-ppc-review {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 10px;
    align-items: baseline;
    padding: 11px 16px !important;
    margin: 0 0 8px !important;
    border-radius: 12px;
  }
  .spw-ppc-reviews .spw-ppc-review__rating {
    grid-column: 2; grid-row: 1;
    margin: 0 !important;
    font-size: 11px !important;
    white-space: nowrap;
  }
  .spw-ppc-reviews .spw-ppc-review__rating span { font-size: 13px !important; }
  .spw-ppc-reviews .spw-ppc-review__name {
    grid-column: 1; grid-row: 1;
    margin: 0 !important;
    font-size: 14px !important;
  }
  .spw-ppc-reviews .spw-ppc-review__title,
  .spw-ppc-reviews .spw-ppc-review__text {
    grid-column: 1 / -1;
    margin: 3px 0 0 !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
  }
  .spw-ppc-reviews .spw-ppc-review__title + .spw-ppc-review__text { margin-top: 1px !important; }
  .spw-ppc-reviews .spw-ppc-reviews__source { margin-top: 6px; }
}

/* ---- Builder form: one grid, one rhythm (16 Oct 2026, Matt: "easy to read and use") ----------
   Every control spans its column fully; 3-up rows split into equal thirds and 2-up rows into equal
   halves (10px gaps, same as the text-style buttons); one label style, one control style, one gap. */
#builder.spw-builder-first #premiumplates-builder #builder-form .text-style-title-strong,
#builder.spw-builder-first #premiumplates-builder #builder-form .plate-size-title,
#builder.spw-builder-first #premiumplates-builder #builder-form .v2-plate-layout-container label > strong,
#builder.spw-builder-first #premiumplates-builder #builder-form .v2-plate-layout-container > strong,
#builder.spw-builder-first #premiumplates-builder #builder-material > strong {
  display: block !important;
  margin: 0 0 6px !important;
  font-family: Roboto, Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 18px !important;
  letter-spacing: .3px !important;
  text-transform: uppercase !important;
}
#builder.spw-builder-first #premiumplates-builder #builder-form select,
#builder.spw-builder-first #premiumplates-builder #builder-form #builder-slogan-text {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  height: 46px !important;
  margin: 0 !important;
  padding: 0 34px 0 12px !important;
  border: 1px solid #d5d8dc !important;
  border-radius: 8px !important;
  background-color: #fff !important;
  font-family: Roboto, Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  color: #111 !important;
}
#builder.spw-builder-first #premiumplates-builder #builder-form #builder-slogan-text { padding-right: 12px !important; }
/* 3-up row (vehicle / layout / front-rear) and 2-up badge row: equal columns, full width */
#builder.spw-builder-first #premiumplates-builder #builder-form .one-your-reg.plate-row,
#builder.spw-builder-first #premiumplates-builder #builder-form .five-badge.plate-row {
  display: flex !important;
  gap: 10px !important;
}
#builder.spw-builder-first #premiumplates-builder #builder-form .one-your-reg.plate-row > .v2-plate-layout-container,
#builder.spw-builder-first #premiumplates-builder #builder-form .five-badge.plate-row > .v2-plate-layout-container {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  width: auto !important;
  margin: 0 !important;
}
#builder.spw-builder-first #premiumplates-builder #builder-form .v2-plate-layout-container label { display: block !important; width: 100% !important; }
/* single half-width controls line up with the badge columns */
#builder.spw-builder-first #premiumplates-builder #builder-form #border-color,
#builder.spw-builder-first #premiumplates-builder #builder-form #slogan-color {
  width: calc(50% - 5px) !important;
}
/* "Most popular": on the label line, over Premium Acrylic, instead of its own row (desktop) */
@media (min-width: 769px) {
#builder.spw-builder-first #premiumplates-builder #builder-material { position: relative !important; }
#builder.spw-builder-first #premiumplates-builder #builder-material .material-popular-hint {
  position: absolute !important;
  top: -3px !important;
  right: 0 !important;
  width: calc(50% - 5px) !important;
  height: auto !important;
  margin: 0 !important;
  pointer-events: none;
}
#builder.spw-builder-first #premiumplates-builder #builder-material .material-popular-hint__inner { width: 100% !important; }
}
/* phones: keep the narrow 3-up dropdowns readable (less right padding); 16px stops iOS zooming on focus */
@media (max-width: 768px) {
  #builder.spw-builder-first #premiumplates-builder #builder-form select,
  #builder.spw-builder-first #premiumplates-builder #builder-form #builder-slogan-text {
    padding: 0 22px 0 8px !important;
    font-size: 16px !important;
  }
}
@media (min-width: 769px) {
  body #builder.spw-builder-first #premiumplates-builder #builder-form input#builder-slogan-text { font-size: 15px !important; }
}

/* ---- Desktop: Border | Badge type | Badge colour on one row; Slogan (2/3) | Slogan colour (1/3) ----
   (Matt, 16 Oct 2026). Floats rather than display changes, because the builder's script hides
   #badge-hide (.force-hidden for short / hex / diamond sizes) and jQuery shows/hides #builder-slogan12;
   if the badges are hidden, Border simply keeps its third. Columns = the text-style thirds. */
@media (min-width: 769px) {
  #builder.spw-builder-first #premiumplates-builder #builder-form .six-borders.plate-row {
    float: left !important;
    width: calc((100% - 20px) / 3) !important;
    margin: 0 10px 12px 0 !important;
  }
  #builder.spw-builder-first #premiumplates-builder #builder-form #badge-hide {
    float: left !important;
    width: calc((100% - 20px) / 3 * 2 + 10px) !important;
    margin: 0 0 12px !important;
  }
  #builder.spw-builder-first #premiumplates-builder #builder-form #badge-hide .five-badge.plate-row { margin: 0 !important; }
  #builder.spw-builder-first #premiumplates-builder #builder-form #builder-slogan12 { clear: both !important; }
  #builder.spw-builder-first #premiumplates-builder #builder-form #border-color { width: 100% !important; }
  /* slogan row */
  #builder.spw-builder-first #premiumplates-builder #builder-form #builder-slogan {
    display: flex !important;
    gap: 10px !important;
  }
  #builder.spw-builder-first #premiumplates-builder #builder-form #builder-slogan > .plate-row { margin: 0 0 12px !important; min-width: 0; }
  #builder.spw-builder-first #premiumplates-builder #builder-form #builder-slogan > .plate-row:first-child { flex: 0 0 calc((100% - 20px) / 3 * 2 + 10px) !important; }
  #builder.spw-builder-first #premiumplates-builder #builder-form #builder-slogan > .plate-row + .plate-row { flex: 1 1 0 !important; }
  #builder.spw-builder-first #premiumplates-builder #builder-form #slogan-color { width: 100% !important; }
}

/* PPC pages: reviews + High Quality Plates sit on a soft grey band, so they read as a separate
   section from the builder above (Matt, 16 Oct 2026). Cards stay white. */
.spw-ppc-below {
  background: #f4f5f7;
  border-top: 1px solid #e6e8eb;
  margin-top: 48px;
}
.spw-ppc-below .spw-ppc-below__inner { padding-top: 44px !important; padding-bottom: 56px !important; }
@media (max-width: 768px) {
  .spw-ppc-below { margin-top: 32px; }
  .spw-ppc-below .spw-ppc-below__inner { padding-top: 28px !important; padding-bottom: 36px !important; }
}

/* builder labels reworded 16 Oct 2026: no automatic colon after the plate size label */
#builder.spw-builder-first .plate-size-title::after { content: none !important; }

/* countdown pill: a little more room after the last time tile (Matt, 16 Oct 2026) */
.spw-countdown { padding-right: 14px; }
.spw-countdown.spw-countdown--strip,
.spw-ppc-header .spw-countdown.spw-countdown--bar { padding-right: 12px; }

/* ---- SEO hero, desktop (Paul's spec, 16 Oct 2026) --------------------------------------------
   Full-width black (#000) container; the banner image is centred at its natural aspect ratio, capped
   at 1300px wide, and scales down proportionally below that. The artwork fades to black left and
   right, so it blends into the container. The text sits over the image's dark left side; if the
   screen is narrow enough that the image is shorter than the text, the container grows and the
   image's top/bottom edges are faded so it still blends. Mobile (<=768px) unchanged. */
@media (min-width: 769px) {
  .hero-section {
    min-height: 0 !important;
    background: #000 !important;
    border-radius: 0 !important;
    justify-content: center;
  }
  /* soft dark wash behind the text side so the copy stays readable over the artwork */
  .hero-section::before {
    display: block !important;
    grid-row: 1; grid-column: 1;
    position: relative !important; inset: auto !important;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(0,0,0,.82) 0, rgba(0,0,0,.55) 38%, rgba(0,0,0,0) 62%) !important;
    opacity: 1 !important;
    z-index: 1 !important;
  }
  /* grid: row 1 = image + text layered in the same cell, row 2 = breadcrumb */
  .hero-section { display: grid !important; grid-template-columns: 100%; }
  .hero-section > picture {
    display: flex !important;
    grid-row: 1; grid-column: 1;
    align-items: center;
    justify-content: center;
    min-width: 0;
  }
  .hero-section > .background-banner-wrap { grid-row: 1; grid-column: 1; }
  .hero-section > picture > img.hero-bg {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    display: block !important;
    width: 100% !important;
    max-width: 1300px !important;
    height: auto !important;
    object-fit: initial !important;
  }
  /* row height = the image's height, or the text's if taller */
  .hero-section .background-banner-wrap {
    display: flex;
    align-items: center;
  }
  .hero-section .background-banner-wrap > .container {
    max-width: 1300px !important;
    width: 100%;
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }
  .hero-section .hero-row { padding-top: 0 !important; padding-bottom: 0 !important; }
}
/* below ~1200px the image is shorter than the text, so the container is taller than the image:
   fade the image's top and bottom into the black so there is no hard edge */
@media (min-width: 769px) and (max-width: 1199px) {
  .hero-section > picture > img.hero-bg {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
  }
}
/* screens wider than the 1300px image: soften its left/right edges too (Paul's art already fades;
   this covers any image that doesn't, e.g. the interim 5D one) */
@media (min-width: 1301px) {
  .hero-section > picture > img.hero-bg {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
  }
}

/* ---- PPC half-height banners (Paul's spec, 16 Oct 2026) -----------------------------------------
   Full-width black band; image centred at its natural aspect ratio, max 1300px, scaling down
   proportionally below that. Artwork fades to black at the sides, blending into the band.
   Mobile uses the matching SEO mobile banner (picture <source>). 5D: mobile only until new art. */
.spw-ppc-banner {
  display: block !important;
  height: auto !important;
  background: #000 !important;
  line-height: 0;
}
.spw-ppc-banner picture { display: block; }
.spw-ppc-banner img {
  display: block;
  width: 100%;
  max-width: 1300px;
  height: auto;
  margin: 0 auto;
}
@media (min-width: 769px) {
  .spw-ppc-banner--mob-only { display: none !important; }
}
@media (min-width: 1301px) {
  .spw-ppc-banner img {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
  }
}

/* The breadcrumb inside the hero renders empty on every page (no links), leaving a 70px blank
   strip in the black band - hide it when it has no links (desktop; mobile in the mobile sweep) */
@media (min-width: 769px) {
  .hero-section > div:has(> #breadcrumb-wrapper):not(:has(a)) { display: none !important; }
  .hero-section { margin-bottom: 40px !important; }
}

/* PPC banner H1 (Paul, 16 Oct 2026): the page H1 on the banner's black left side, home-hero style,
   no ENTER REG / button. Desktop only - on phones the banner is an image strip and the heading
   stays above the plate preview (builder.php prints it there as a div when the banner has the H1). */
.spw-ppc-banner { position: relative; }
.spw-ppc-banner__text {
  position: absolute;
  inset: 0;
  max-width: 1300px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  padding: 0 clamp(32px, 5vw, 70px);
  pointer-events: none;
}
.spw-ppc-banner .spw-ppc-banner__h1 {
  max-width: 44%;
  margin: 0 !important;
  font-family: 'Roboto Condensed', sans-serif !important;
  font-size: clamp(26px, 2.6vw, 38px) !important;
  font-weight: 600 !important;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
  text-align: left !important;
  color: #fff !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .6);
}
@media (min-width: 769px) {
  #builder.spw-builder-first .spw-builder-title--mob { display: none !important; }
}
@media (max-width: 768px) {
  .spw-ppc-banner__text { display: none !important; }
}

/* ---- Mobile pass: Home (16 Oct 2026) ---- */
@media (max-width: 768px) {
  /* empty breadcrumb row left an 88px black band under the hero buttons */
  .hero-section > div:has(> #breadcrumb-wrapper):not(:has(a)) { display: none !important; }
  /* welcome photo: was 860px tall on a phone - keep it to a compact 4:3 crop */
  .common-grid-section-home .blue-img {
    height: auto !important; min-height: 0 !important; aspect-ratio: 4 / 3;
    background-size: cover !important; background-position: center 62% !important;
  }
  /* plate types: the two card rows are separate grids, so 4D sat alone with a hole
     beside it - flow all five cards through one 2-column grid, last one centred */
  .types-section { display: grid !important; grid-template-columns: 1fr 1fr; gap: 12px; }
  .types-section > * { grid-column: 1 / -1; }
  .types-section > .types-grid, .types-section > .types-grid-2 { display: contents !important; }
  .types-section .type-card { grid-column: auto; margin: 0 !important; }
  /* 3 + 2 cards (Home) = 5: centre the last one */
  .types-section:has(> .types-grid > .type-card:nth-child(3):last-child):has(> .types-grid-2 > .type-card:nth-child(2):last-child) > .types-grid-2 > .type-card:last-child {
    grid-column: 1 / -1; justify-self: center; width: calc(50% - 6px);
  }
  /* tighter section rhythm: was ~110px of white between sections */
  .types-section, .blog-section, .reviews-section { padding-top: 24px !important; }
  .types-section, .blog-section { padding-bottom: 16px !important; margin-bottom: 16px !important; }
  .types-section > .section-title, .blog-section > .section-title,
  .types-section h2.section-title, .blog-section h2.section-title { margin-top: 0 !important; margin-bottom: 20px !important; }
  /* blog cards: less padding */
  .blog-grid { gap: 14px !important; }
  .blog-card .blog-content { padding: 18px 16px 14px !important; }
  .blog-card .blog-content h3 { margin: 0 0 10px !important; font-size: 17px !important; }
  .blog-card .blog-meta { padding: 10px 16px !important; }
}
@media (min-width: 600px) and (max-width: 768px) {
  .common-grid-section-home .blue-img { aspect-ratio: 16 / 9; }
}

/* ---- Mobile only (<=768px): Home welcome photo moves below the welcome text, above Types of Number Plates (16 Oct 2026) ---- */
@media (max-width: 768px) {
  .common-grid-section-home { display: flex !important; flex-direction: column; }
  .common-grid-section-home > .col-with-image:not(.div-with-links) { order: 2; margin-top: 24px !important; }
}

/* ---- Mobile only (<=768px): Number Plate Maker compact pass (16 Oct 2026) ---- */
@media (max-width: 768px) {
  /* hero -> first section: 40px margin -> 16px */
  .hero-section { margin-bottom: 16px !important; }
  /* section rhythm: ~140px of padding between blocks -> ~50px */
  main.spw-live > section.container,
  main.spw-live > section#how.container,
  main.spw-live > section#why.container { padding-top: 24px !important; padding-bottom: 12px !important; margin-bottom: 0 !important; }
  main.spw-live > section.first-section-padding:first-child,
  main.spw-live > section#how.first-section-padding:first-child { padding-top: 16px !important; }
  main.spw-live > .spw-reg-cta { margin-top: 16px !important; margin-bottom: 16px !important; }
  main.spw-live > section.spw-faq.spw-faq { padding-top: 24px !important; padding-bottom: 16px !important; margin-bottom: 0 !important; }
  /* Skoda photo: 588px tall -> compact 4:3 crop (img-1/img-3 are hidden on phones by style.css - leave them) */
  main.spw-live .number-plate-img-2 {
    height: auto !important; min-height: 0 !important; aspect-ratio: 4 / 3;
    background-size: cover !important; background-position: center !important;
  }
  /* spec cards: slim rows */
  main.spw-live #why .cards { gap: 8px !important; }
  main.spw-live #why .cards > .no-card { padding: 10px 14px !important; min-height: 0 !important; }
  main.spw-live #why .cards > .no-card .icon img { width: 36px !important; height: auto !important; }
  /* reviews -> footer */
  main.spw-live > .reviews-section { padding-bottom: 24px !important; margin-bottom: 0 !important; }
}

/* ---- Mobile only (<=768px): same compact pass on every product page (Matt 16 Oct 2026).
   main#plate-type-main-wrapper = all 7 product pages (the NPM block above only hit main.spw-live). ---- */
@media (max-width: 768px) {
  main#plate-type-main-wrapper > section:not(.spw-reg-cta):not(.reviews-section),
  main#plate-type-main-wrapper > section#how,
  main#plate-type-main-wrapper > section#why { padding-bottom: 12px !important; margin-bottom: 0 !important; }
  main#plate-type-main-wrapper > section:not(.spw-reg-cta):not(.reviews-section):not(:first-child),
  main#plate-type-main-wrapper > section#how:not(:first-child),
  main#plate-type-main-wrapper > section#why:not(:first-child) { padding-top: 24px !important; }
  main#plate-type-main-wrapper > .spw-reg-cta { margin-top: 16px !important; margin-bottom: 16px !important; }
  main#plate-type-main-wrapper #why .cards { gap: 8px !important; }
  main#plate-type-main-wrapper #why .cards > .no-card { padding: 10px 14px !important; min-height: 0 !important; }
  main#plate-type-main-wrapper #why .cards > .no-card .icon img { width: 36px !important; height: auto !important; }
  main#plate-type-main-wrapper > .reviews-section { padding-bottom: 24px !important; margin-bottom: 0 !important; }
}

/* ---- Mobile only (<=768px): product-page photos + dark FAQ list compact (16 Oct 2026) ---- */
@media (max-width: 768px) {
  /* 4D section photos were 588px tall on a phone -> 4:3 crop */
  main#plate-type-main-wrapper .page-4d-img-1,
  main#plate-type-main-wrapper .page-4d-img-2 {
    height: auto !important; min-height: 0 !important; aspect-ratio: 4 / 3;
    background-size: cover !important; background-position: center !important;
  }
  /* dark FAQ list: ~80px of padding per row -> ~30px */
  main#plate-type-main-wrapper .faq-section .faq-item { padding: 12px 0 10px !important; }
  main#plate-type-main-wrapper .faq-section .faq-item h3 { margin: 0 !important; font-size: 16px !important; }
  main#plate-type-main-wrapper .faq-section .faq-answer { margin-top: 0 !important; }
  main#plate-type-main-wrapper .faq-section .faq-answer > p:first-child { margin-top: 10px !important; }
  main#plate-type-main-wrapper .faq-section .faq-answer > p:last-child { margin-bottom: 4px !important; }
}

/* ---- Mobile only (<=768px): product-page section photos 4:3 + lone last type card centred (16 Oct 2026) ---- */
@media (max-width: 768px) {
  main#plate-type-main-wrapper .spw-photo-link > div[class*="-img-"] {
    height: auto !important; min-height: 0 !important; aspect-ratio: 4 / 3;
    background-size: cover !important; background-position: center !important;
  }
  main#plate-type-main-wrapper .types-grid-2-number > .type-card:last-child:nth-child(odd) {
    grid-column: 1 / -1; justify-self: center; width: calc(50% - 6px);
  }
}

/* ---- Mobile only (<=768px): Show Plates section photos - the AJ14 JYT photo was used twice (Matt 16 Oct 2026) -> Paul's two "CUSTOM" photos.
   Desktop still shows the old photo in both slots (slot 1 is portrait 465x588 - landscape photo would crop to "CUSTO"; asked Matt). ---- */
@media (max-width: 768px) {
  main#plate-type-main-wrapper .show-plates-maker-img-1 { background-image: url('/assets/showplatesworld/images/opt/show-custom-audi-800.webp') !important; background-position: center !important; }
  main#plate-type-main-wrapper .show-plates-maker-img-2 { background-image: url('/assets/showplatesworld/images/opt/show-custom-lambo-800.webp') !important; background-position: 70% center !important; }
}

/* ---- Mobile only (<=768px): text sat 10px from the screen edge (looked like it ran off, Matt 16 Oct 2026) -> 20px,
   in line with the CTA bands; dark FAQ questions no longer run under the arrow ---- */
@media (max-width: 768px) {
  main#plate-type-main-wrapper > section.container:not(.types-section):not(.blog-section),
  main#plate-type-main-wrapper > section#how.container,
  main#plate-type-main-wrapper > section#why.container { padding-left: 20px !important; padding-right: 20px !important; }
  main#plate-type-main-wrapper .faq-section .faq-question h3 { padding-right: 30px !important; }
}

/* ---- USP bar under the hero, SEO pages (Matt 16 Oct 2026) - looks like the footer's black USP strip ---- */
.hero-section + .spw-usp-bar { margin-top: -40px; margin-bottom: 40px; }
.spw-usp-bar { background: #111; color: #fff; border-top: 1px solid #2a2a2a; }
.spw-usp-bar__list {
  max-width: 1200px; margin: 0 auto !important; padding: 16px 24px !important; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.spw-usp-bar__list li { display: flex; align-items: center; gap: 12px; margin: 0; padding: 0; list-style: none; }
.spw-usp-bar__list li::before { content: none !important; }
.spw-usp-bar__list strong { font-family: Roboto, sans-serif; font-size: 16px; font-weight: 700; color: #fff; line-height: 1.25; }
.spw-usp-bar__list svg {
  flex: 0 0 auto; width: 40px; height: 40px; padding: 9px; border-radius: 50%; background: #fc9b04;
  fill: none; stroke: #111; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
/* phones: one compact row, icon above each line */
@media (max-width: 768px) {
  .hero-section + .spw-usp-bar { margin-top: -16px; margin-bottom: 16px; }
  .spw-usp-bar__list { padding: 10px 12px !important; gap: 8px; align-items: flex-start; }
  .spw-usp-bar__list li { flex: 1 1 0; flex-direction: column; gap: 5px; text-align: center; }
  .spw-usp-bar__list strong { font-size: 12px; }
  .spw-usp-bar__list svg { width: 28px; height: 28px; padding: 6px; }
}

/* ---- Show Plates photos, DESKTOP (Matt 16 Oct 2026, option A): Paul's two "CUSTOM" photos, slots made 16:9 so they show in full ---- */
@media (min-width: 769px) {
  main#plate-type-main-wrapper .show-plates-maker-img-1,
  main#plate-type-main-wrapper .show-plates-maker-img-2 {
    height: auto !important; min-height: 0 !important; aspect-ratio: 16 / 9; background-size: cover !important;
  }
  main#plate-type-main-wrapper .show-plates-maker-img-1 { background-image: url('/assets/showplatesworld/images/opt/show-custom-audi-1200.webp') !important; background-position: center !important; }
  main#plate-type-main-wrapper .show-plates-maker-img-2 { background-image: url('/assets/showplatesworld/images/opt/show-custom-lambo-1200.webp') !important; background-position: center !important; }
}

/* ---- Mobile only (<=768px): open dark-FAQ answer had no gap under its question (answers are plain text, no <p>) ---- */
@media (max-width: 768px) {
  main#plate-type-main-wrapper .faq-section .faq-item.active .faq-answer { margin-top: 10px !important; }
}

/* Custom Plates section 3: repeated photo removed (Matt 16 Oct 2026) - text takes the full row */
.common-grid-section-number.spw-no-photo { grid-template-columns: 1fr !important; display: block !important; }
.common-grid-section-number.spw-no-photo > .col-with-image { width: 100% !important; max-width: 900px; }

/* Motorcycle page photos (Matt 16 Oct 2026): plates now read SPW 46 / SPW BIKE (was BPD) - desktop + mobile */
main#plate-type-main-wrapper .motorbike-img-1 { background-image: url('/assets/showplatesworld/images/opt/motorbike-spw-1.webp?v=2') !important; background-position: center !important; }
main#plate-type-main-wrapper .motorbike-img-2 { background-image: url('/assets/showplatesworld/images/opt/motorbike-spw-2.webp?v=2') !important; background-position: center !important; }
@media (max-width: 768px) {
  main#plate-type-main-wrapper .motorbike-img-1 { background-image: url('/assets/showplatesworld/images/opt/motorbike-spw-1-800.webp') !important; background-position: center !important; }
  main#plate-type-main-wrapper .motorbike-img-2 { background-image: url('/assets/showplatesworld/images/opt/motorbike-spw-2-800.webp') !important; background-position: center !important; }
}

/* ---- Mobile only (<=768px): Order Tracking chat box touched the footer USP strip ---- */
@media (max-width: 768px) {
  main#plate-type-main-wrapper > section.spw-track:not(.spw-reg-cta):not(.reviews-section) { padding-bottom: 32px !important; margin-bottom: 0 !important; }
}

/* Legal pages (T&Cs / Privacy / Returns): bullet lists had no markers - small orange bullets, desktop + mobile (Matt 16 Oct 2026) */
.spwl ul { padding-left: 4px !important; }
.spwl ul > li { position: relative; padding-left: 18px !important; list-style: none !important; }
.spwl ul > li::before { content: "" !important; position: absolute; left: 2px; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: #fc9b04; }
.spwl ul > li + li { margin-top: 4px; }

/* ---- Mobile only (<=768px): PPC builder pages (16 Oct 2026) ---- */
@media (max-width: 768px) {
  /* Vehicle | Legal or Show? | Front/Rear were 98px each ("Show |", "Front &"): Vehicle + Front/Rear share a row, Legal or Show? gets its own */
  #builder.spw-builder-first #premiumplates-builder #builder-form .one-your-reg.plate-row { flex-wrap: wrap !important; gap: 10px !important; }
  #builder.spw-builder-first #premiumplates-builder #builder-form .one-your-reg.plate-row > .v2-plate-layout-container { flex: 0 0 calc(50% - 5px) !important; width: calc(50% - 5px) !important; max-width: none !important; margin: 0 !important; }
  #builder.spw-builder-first #premiumplates-builder #builder-form .one-your-reg.plate-row > .vehicle-selection { order: 1; }
  #builder.spw-builder-first #premiumplates-builder #builder-form .one-your-reg.plate-row > .plate-placement { order: 2; }
  #builder.spw-builder-first #premiumplates-builder #builder-form .one-your-reg.plate-row > .v2-plate-layout-container:not(.vehicle-selection):not(.plate-placement) { order: 3; flex-basis: 100% !important; width: 100% !important; }
  #builder.spw-builder-first #premiumplates-builder #builder-form .one-your-reg.plate-row select { width: 100% !important; }
  /* plate material: "Most popular" tag sat on top of the label; Premium Acrylic wrapped */
  #builder.spw-builder-first #premiumplates-builder #builder-material > strong { display: block !important; margin-bottom: 4px !important; }
  #builder.spw-builder-first #premiumplates-builder #builder-material .material-popular-hint { clear: both; margin: 0 !important; }
  #builder.spw-builder-first #premiumplates-builder #builder-material article.selectable { white-space: nowrap !important; font-size: 14px !important; padding-left: 6px !important; padding-right: 6px !important; justify-content: center; text-align: center; }
  /* Add to Basket green, as on desktop (was red on phones) */
  #builder.spw-builder-first .btn-buy-now-mobile.mob-add-to-basket { background: rgb(39, 181, 35) !important; border-color: rgb(39, 181, 35) !important; }
  /* reviews: compact cards */
  body.spw-ppc .spw-ppc-review { padding: 12px 14px !important; margin-bottom: 8px !important; }
  body.spw-ppc .spw-ppc-review__rating { margin: 0 0 4px !important; }
  body.spw-ppc .spw-ppc-review__name { margin: 0 0 2px !important; }
  body.spw-ppc .spw-ppc-review__title { margin: 0 0 2px !important; }
  body.spw-ppc .spw-ppc-review__text { margin: 0 !important; font-size: 14px !important; line-height: 1.45 !important; }
}

/* ---- Blog (/news/, flat JSON - 17 Oct 2026) ---- */
.spw-blog { padding: 0 !important; }
.spw-post { max-width: 780px; margin: 0 auto; padding: 40px 20px 8px; }
.spw-post__crumbs { font: 500 13px/1.4 Roboto, sans-serif; color: #777; margin: 0 0 14px; }
.spw-post__crumbs a { color: #777; text-decoration: none; }
.spw-post__crumbs a:hover { color: #fc9b04; }
.spw-post__title { font: 700 clamp(28px, 4vw, 40px)/1.15 'Open Sans', Roboto, sans-serif; letter-spacing: -.5px; color: #111; margin: 0 0 10px; }
.spw-post__meta { font: 500 14px/1.4 Roboto, sans-serif; color: #6b6b6b; margin: 0 0 24px; }
.spw-post__feature { display: block; width: 100%; height: auto; border-radius: 16px; margin: 0 0 28px; }
.spw-post__body { font: 400 17px/1.7 Roboto, sans-serif; color: #333; }
.spw-post__body > * + * { margin-top: 1em; }
.spw-post__body h2 { font: 700 26px/1.25 'Open Sans', Roboto, sans-serif; color: #111; margin: 1.6em 0 .5em; }
.spw-post__body h3 { font: 700 21px/1.3 'Open Sans', Roboto, sans-serif; color: #111; margin: 1.4em 0 .4em; }
.spw-post__body h4 { font: 700 18px/1.35 Roboto, sans-serif; color: #111; margin: 1.2em 0 .3em; }
.spw-post__body p { margin: 0 0 1em; }
.spw-post__body ul, .spw-post__body ol { margin: 0 0 1.1em; padding-left: 22px; }
.spw-post__body ul { list-style: disc; }
.spw-post__body ol { list-style: decimal; }
.spw-post__body li { margin: 0 0 .4em; }
.spw-post__body li::marker { color: #fc9b04; }
.spw-post__body a { color: #c46f00; text-decoration: underline; text-underline-offset: 2px; }
.spw-post__body img { display: block; max-width: 100%; height: auto; border-radius: 12px; margin: 1.4em auto; }
.spw-post__body strong { color: #111; }
.spw-blog__more, .spw-blog__index { max-width: 1200px; margin: 0 auto; padding: 32px 20px 48px; }
.spw-blog__more-title, .spw-blog__h1 { font: 700 clamp(26px, 3vw, 34px)/1.2 'Open Sans', Roboto, sans-serif; color: #111; text-align: center; margin: 0 0 24px; }
.spw-blog__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.spw-blog-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #e6e8eb; border-radius: 16px; overflow: hidden; text-decoration: none !important; color: #111; transition: transform .15s ease, box-shadow .15s ease; }
.spw-blog-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.08); }
.spw-blog-card img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; height: auto; }
.spw-blog-card__body { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px; flex: 1; }
.spw-blog-card__date { font: 500 13px/1.3 Roboto, sans-serif; color: #777; }
.spw-blog-card__title { font: 700 18px/1.35 'Open Sans', Roboto, sans-serif; color: #111; }
.spw-blog-card__excerpt { font: 400 15px/1.55 Roboto, sans-serif; color: #555; }
.spw-blog-card__more { margin-top: auto; padding-top: 6px; font: 700 14px/1 Roboto, sans-serif; color: #c46f00; letter-spacing: .02em; }
.spw-blog__pager { display: flex; justify-content: center; gap: 8px; margin-top: 32px; }
.spw-blog__pager a, .spw-blog__pager span { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 12px; border-radius: 10px; border: 1px solid #e0e2e5; font: 700 15px/1 Roboto, sans-serif; color: #111; text-decoration: none; }
.spw-blog__pager span[aria-current] { background: #111; border-color: #111; color: #fff; }
@media (max-width: 1024px) { .spw-blog__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
  .spw-post { padding: 24px 20px 4px; }
  .spw-post__body { font-size: 16px; }
  .spw-post__body h2 { font-size: 22px; }
  .spw-post__body h3 { font-size: 19px; }
  .spw-blog__grid { grid-template-columns: 1fr; gap: 14px; }
  .spw-blog__more, .spw-blog__index { padding: 24px 20px 32px; }
}

/* ---- Bike plate previews (20 Oct 2026): Magento renders motorcycle plates at only ~322x262, so any
   preview showing one is kept near that size (builder.php tags it .spw-small-render) instead of being
   stretched and blurred. Covers every builder, every preview slot (incl. the tablet/phone
   #numberplate-mob2) and Motorcycle chosen on the car builders. */
img.spw-small-render {
  width: auto !important;
  max-width: min(340px, 100%) !important;
  height: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ---- Paul's builder notes (21 Oct 2026, Matt approved items 1, 3, 4, 6, 7) ---------------------- */
/* 1. Desktop: 5px more space between each form label and its control (6px -> 11px) */
@media (min-width: 769px) {
  #builder.spw-builder-first #premiumplates-builder #builder-form .text-style-title-strong,
  #builder.spw-builder-first #premiumplates-builder #builder-form .plate-size-title,
  #builder.spw-builder-first #premiumplates-builder #builder-form .v2-plate-layout-container label > strong,
  #builder.spw-builder-first #premiumplates-builder #builder-form .v2-plate-layout-container > strong,
  #builder.spw-builder-first #premiumplates-builder #builder-material > strong {
    margin-bottom: 11px !important;
  }
}
/* 3. Text style buttons: 4px border instead of 3px */
body.spw-ppc #builder.spw-builder-first #premiumplates-builder .segmented__option {
  border-width: 4px !important;
}
/* 6. Desktop: Same Day Dispatch image and the reviews block the same height as the price block */
@media (min-width: 769px) {
  body.spw-ppc #builder.spw-builder-first .wrap-price-desktop-images { align-items: stretch !important; }
  body.spw-ppc #builder.spw-builder-first .wrap-price-desktop-images > .sdd-img-wrap,
  body.spw-ppc #builder.spw-builder-first .wrap-price-desktop-images > .spw-review-badge {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }
  body.spw-ppc #builder.spw-builder-first .wrap-price-desktop-images > .sdd-img-wrap img {
    height: 97px !important;
    max-height: none !important;
    width: auto !important;
  }
  body.spw-ppc #builder.spw-builder-first .wrap-price-desktop-images > .spw-review-badge .spw-review-badge__stars { font-size: 34px !important; }
  body.spw-ppc #builder.spw-builder-first .wrap-price-desktop-images > .spw-review-badge .spw-review-badge__text { font-size: 15px !important; }
}
/* 7. Phones */
@media (max-width: 768px) {
  /* builder title scales with the screen width (wraps only when a long title can't fit) */
  #builder.spw-builder-first .spw-builder-title--mob,
  #builder.spw-builder-first .spw-builder-title--mob h1 {
    font-family: 'Roboto Condensed', Roboto, Arial, sans-serif !important;
    font-size: clamp(18px, 6.2vw, 34px) !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    white-space: normal !important;
  }
  /* price, then the reviews line, then a bigger full-width Add to Basket */
  #builder.spw-builder-first .mob-price .your-price-mobile-wrap {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    row-gap: 10px !important;
  }
  #builder.spw-builder-first .mob-price .spw-review-badge--mob {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 1 1 100% !important;
    order: 2;
  }
  #builder.spw-builder-first .mob-price .spw-review-badge--mob .spw-review-badge__stars { font-size: 22px !important; }
  #builder.spw-builder-first .mob-price .spw-review-badge--mob .spw-review-badge__text { font-size: 14px !important; }
  #builder.spw-builder-first .mob-price #builder-actions { order: 1; flex: 1 1 100% !important; padding-top: 0 !important; }
  body.spw-ppc #builder.spw-builder-first #premiumplates-builder .mob-price .your-price-mobile-wrap button#add-to-basket.mob-add-to-basket,
  #builder.spw-builder-first .mob-price .your-price-mobile-wrap .btn-buy-now-mobile.mob-add-to-basket {
    order: 3;
    flex: 1 1 100% !important;
    width: 100% !important;
    height: 54px !important;
    font-size: 18px !important;
    border-radius: 8px !important;
  }
  /* ENTER REG box 90px tall with bigger placeholder text */
  body #builder.spw-builder-first #premiumplates-builder input#pbregletter1,
  #builder.spw-builder-first #pbregletter1 {
    height: 90px !important;
    min-height: 0 !important;
    font-size: clamp(34px, 12.5vw, 52px) !important;
  }
  body #builder.spw-builder-first #premiumplates-builder input#pbregletter1::placeholder,
  #builder.spw-builder-first #pbregletter1::placeholder { font-size: clamp(34px, 12.5vw, 52px) !important; }
}
@media (min-width: 769px) {
  #builder.spw-builder-first .mob-price .spw-review-badge--mob { display: none !important; }
}

/* ---- Paul / Matt 21 Oct 2026: selected text style + material = SPW orange; "Most popular" tag sits
   directly on top of the Premium Acrylic button (arrow touching it), on every screen size ------------ */
body #builder.spw-builder-first #premiumplates-builder .segmented__input:checked + .segmented__option,
body.spw-ppc #builder.spw-builder-first #premiumplates-builder .segmented__input:checked + .segmented__option {
  background: #fd9a01 !important;
  border-color: #fd9a01 !important;
  color: #fff !important;
}
body #builder.spw-builder-first #premiumplates-builder .mobile-material article.selectable.selected,
body #builder.spw-builder-first #premiumplates-builder .mobile-material article.selectable.current {
  background: #fd9a01 !important;
  color: #fff !important;
}
body #builder.spw-builder-first #premiumplates-builder #builder-material { position: relative !important; }
body #builder.spw-builder-first #premiumplates-builder #builder-material .material-popular-hint {
  position: absolute !important;
  top: auto !important;
  bottom: 46px !important;
  right: 0 !important;
  left: auto !important;
  width: calc(50% - 5px) !important;
  height: auto !important;
  margin: 0 !important;
  display: flex !important;
  justify-content: center !important;
  pointer-events: none;
}
body #builder.spw-builder-first #premiumplates-builder #builder-material .material-popular-hint__inner { width: 100% !important; line-height: 0; }
body #builder.spw-builder-first #premiumplates-builder #builder-material .material-popular-hint__tag { line-height: 14px; }
@media (max-width: 768px) {
  /* phones: the material buttons stop 10px short of the box edge, so line the tag up with Premium Acrylic */
  body #builder.spw-builder-first #premiumplates-builder #builder-material .material-popular-hint {
    right: 10px !important;
    width: calc(50% - 15px) !important;
  }
}

/* ---- Phones (21 Oct 2026, Matt): price | Same Day Dispatch | reviews on one line, three equal columns,
   Add to Basket full width underneath (as the desktop price row) ---------------------------------- */
@media (max-width: 768px) {
  #builder.spw-builder-first .mob-price .your-price-mobile-wrap {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    align-items: center !important;
    column-gap: 8px !important;
    row-gap: 12px !important;
  }
  #builder.spw-builder-first .mob-price #builder-actions { grid-column: 1; grid-row: 1; order: 0 !important; padding-top: 0 !important; min-width: 0; }
  #builder.spw-builder-first .mob-price .spw-sdd-mob { grid-column: 2; grid-row: 1; display: flex !important; justify-content: center; align-items: center; min-width: 0; }
  #builder.spw-builder-first .mob-price .spw-sdd-mob img { width: auto; max-width: 100%; height: 64px; }
  #builder.spw-builder-first .mob-price .spw-review-badge--mob {
    grid-column: 3; grid-row: 1;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    text-align: center;
    min-width: 0;
  }
  #builder.spw-builder-first .mob-price .spw-review-badge--mob .spw-review-badge__stars { font-size: clamp(14px, 4.4vw, 22px) !important; letter-spacing: 0 !important; white-space: nowrap; }
  #builder.spw-builder-first .mob-price .spw-review-badge--mob .spw-review-badge__text { font-size: 12px !important; line-height: 1.25 !important; }
  body.spw-ppc #builder.spw-builder-first #premiumplates-builder .mob-price .your-price-mobile-wrap button#add-to-basket.mob-add-to-basket,
  #builder.spw-builder-first .mob-price .your-price-mobile-wrap .btn-buy-now-mobile.mob-add-to-basket { grid-column: 1 / -1; grid-row: 2; }
}
@media (min-width: 769px) {
  #builder.spw-builder-first .mob-price .spw-sdd-mob { display: none !important; }
}

/* ---- Review stars with part-filled stars (21 Oct 2026, Matt: 4.5 stars, 3,537 reviews) --------------
   <span class="spw-stars" style="--spw-rating:4.5"> = 5 grey stars with a gold copy clipped to rating/5 */
.spw-stars {
  position: relative;
  display: inline-block;
  color: #d9d9d9;
  white-space: nowrap;
  line-height: 1;
}
.spw-stars__fill {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  /* --spw-fill (optional) sets the visible fill directly: a star glyph has blank space at its sides, so 4.9 as
     98% of the row looked like 5 full stars (27 Oct 2026) */
  width: var(--spw-fill, calc(var(--spw-rating, 5) / 5 * 100%));
  color: #f5b301;
  white-space: nowrap;
}
.spw-review-badge__stars .spw-stars,
.spw-ppc-reviews__stars .spw-stars { letter-spacing: inherit; }

/* ---- PPC builders, phones (21 Oct 2026): USP row under the title - light version of .spw-usp-bar ---- */
.spw-usp-bar--builder { display: none; }
@media (max-width: 768px) {
  #builder.spw-builder-first .spw-usp-bar.spw-usp-bar--builder {
    display: block;
    background: transparent;
    border-top: 0;
    margin: 8px 0 12px;
  }
  #builder.spw-builder-first .spw-usp-bar--builder .spw-usp-bar__list { padding: 0 !important; gap: 6px; }
  #builder.spw-builder-first .spw-usp-bar--builder .spw-usp-bar__list strong { color: #222; font-size: 12px; }
  #builder.spw-builder-first .spw-usp-bar--builder .spw-usp-bar__list svg { width: 30px; height: 30px; padding: 6px; }
}

/* ---- PPC phones (22 Oct 2026, Matt): the three USPs as a slim bar right under the dispatch countdown,
   instead of a big icon row under the title (it pushed the preview + ENTER REG down) ------------------- */
.spw-ppc-mob-usps { display: none; }
@media (max-width: 768px) {
  .spw-ppc-mob-usps {
    display: block;
    background: #f4f5f7;
    border-bottom: 1px solid #e3e6ea;
  }
  .spw-ppc-mob-usps ul {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px;
    margin: 0 auto !important;
    padding: 6px 10px !important;
    list-style: none;
  }
  .spw-ppc-mob-usps li {
    display: flex; align-items: center; gap: 5px;
    margin: 0; padding: 0; list-style: none; min-width: 0;
  }
  .spw-ppc-mob-usps li::before { content: none !important; }
  .spw-ppc-mob-usps svg {
    flex: 0 0 auto; width: 20px; height: 20px; padding: 4px; border-radius: 50%; background: #fc9b04;
    fill: none; stroke: #111; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; box-sizing: border-box;
  }
  .spw-ppc-mob-usps strong {
    font: 700 10.5px/1.15 Roboto, Arial, sans-serif; color: #222; letter-spacing: 0;
  }
}

/* PPC phones: dispatch deadline label + numbers centred in the black bar (Matt, 22 Oct 2026). Mobile only. */
@media (max-width: 768px) {
  .spw-ppc-header .spw-countdown.spw-countdown--bar {
    justify-content: center !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
}

/* Phones: tighter price row - less space round price | Same Day Dispatch | reviews (Matt, 22 Oct 2026) */
@media (max-width: 768px) {
  body.spw-ppc #builder.spw-builder-first #premiumplates-builder .mob-price .your-price-mobile-wrap { margin: 16px 0 12px !important; row-gap: 16px !important; }
  body.spw-ppc #builder.spw-builder-first #premiumplates-builder .mob-price .pricing-wrapper { gap: 0 !important; }
  body.spw-ppc #builder.spw-builder-first #premiumplates-builder .mob-price .desk-slashed-price,
  body.spw-ppc #builder.spw-builder-first #premiumplates-builder .mob-price .spw-ppc-save,
  body.spw-ppc #builder.spw-builder-first #premiumplates-builder .mob-price .pricing-wrapper .price { line-height: 1.2 !important; margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; }
  body.spw-ppc #builder.spw-builder-first #premiumplates-builder .mob-price .spw-sdd-mob img { height: 56px !important; }
}

/* Phones: second Add to Basket at the bottom of the builder options (Matt, 22 Oct 2026). Hidden on desktop. */
.spw-atb-bottom { display: none; }
@media (max-width: 768px) {
  #builder.spw-builder-first .spw-atb-bottom { display: block !important; margin: 18px 0 8px; padding: 0 10px; }
  #builder.spw-builder-first .spw-atb-bottom .spw-atb-bottom__btn {
    display: block !important; width: 100% !important; height: 54px !important; margin: 0 !important;
    background: rgb(39, 181, 35) !important; border: 1px solid rgb(39, 181, 35) !important; border-radius: 8px !important;
    color: #fff !important; font: 700 18px/1 Roboto, Arial, sans-serif !important; text-transform: uppercase !important;
    cursor: pointer; position: static !important;
  }
  #builder.spw-builder-first .spw-atb-bottom .spw-atb-bottom__btn:disabled { opacity: .7; }
}

/* Phones: builder title centred over the preview (was left-aligned, so it sat a few px off centre) (Matt, 22 Oct 2026) */
@media (max-width: 768px) {
  #builder.spw-builder-first .spw-builder-title.spw-builder-title--mob { text-align: center !important; }
}

/* Phones: builder H1 (pages with no desktop banner, e.g. /creator/preview-test) centred too (Matt, 22 Oct 2026) */
@media (max-width: 768px) {
  #builder.spw-builder-first .spw-builder-title { text-align: center !important; }
}

/* "See in 3D" pill under the builder preview (all builders; loads the 3D view only when tapped - Matt, 22 Oct 2026) */
.spw3d-toggle-row { display: flex; justify-content: center; margin: 8px 0 4px; }
.spw3d-toggle-row[hidden] { display: none !important; }
.spw3d-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 16px; border: 0; border-radius: 999px;
  background: #111; color: #fff; cursor: pointer;
  font: 600 13px/1.2 Roboto, Arial, sans-serif; letter-spacing: .02em;
}
.spw3d-toggle::before { content: ''; width: 14px; height: 14px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 2 3 7v10l9 5 9-5V7z'/%3E%3Cpath d='m3 7 9 5 9-5M12 12v10'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 2 3 7v10l9 5 9-5V7z'/%3E%3Cpath d='m3 7 9 5 9-5M12 12v10'/%3E%3C/svg%3E") center / contain no-repeat; }
.spw3d-toggle[aria-pressed="true"] { background: #fd9a01; color: #fff; }
.spw3d-toggle:focus-visible { outline: 2px solid #fd9a01; outline-offset: 2px; }

/* "See in 3D" pill - more inviting (Matt, 22 Oct 2026): orange gradient, soft glow, turning cube icon and a light
   sweep every few seconds. Wording unchanged. Motion off for prefers-reduced-motion. */
.spw3d-toggle {
  position: relative; overflow: hidden;
  padding: 9px 20px 9px 16px !important; gap: 8px !important;
  background: linear-gradient(135deg, #ffb83d 0%, #fd9a01 45%, #f07800 100%) !important; color: #fff !important;
  font: 700 14px/1.2 Roboto, Arial, sans-serif !important; letter-spacing: .03em !important; text-transform: uppercase;
  box-shadow: 0 4px 14px rgba(253, 154, 1, .45), inset 0 1px 0 rgba(255, 255, 255, .35);
  transition: transform .15s ease, box-shadow .15s ease;
}
.spw3d-toggle:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(253, 154, 1, .55), inset 0 1px 0 rgba(255, 255, 255, .35); }
.spw3d-toggle:active { transform: translateY(0); }
.spw3d-toggle::before { width: 18px !important; height: 18px !important; animation: spw3d-cube 3.2s ease-in-out infinite; }
.spw3d-toggle::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-20deg); animation: spw3d-shine 4s ease-in-out infinite; pointer-events: none;
}
@keyframes spw3d-cube { 0%, 55%, 100% { transform: rotateY(0) } 70% { transform: rotateY(180deg) } 85% { transform: rotateY(360deg) } }
@keyframes spw3d-shine { 0%, 60% { left: -60% } 85%, 100% { left: 130% } }
@media (prefers-reduced-motion: reduce) { .spw3d-toggle::before, .spw3d-toggle::after { animation: none; } .spw3d-toggle::after { display: none; } }
@media (max-width: 768px) { .spw3d-toggle { font-size: 13px !important; padding: 8px 18px 8px 14px !important; } }
/* See in 3D pill: black text + icon on the orange - white was hard to read (Matt, 22 Oct 2026) */
.spw3d-toggle { color: #111 !important; box-shadow: 0 4px 14px rgba(253, 154, 1, .45), inset 0 1px 0 rgba(255, 255, 255, .45); }

/* Desktop PPC builders: preview top level with the top of the Enter Reg box (Matt, 22 Oct 2026). The builder title
   lives on the banner on desktop, so its empty head row (20px margin) only pushed the preview down. */
@media (min-width: 769px) {
  #builder .spw-builder-head:has(> .spw-builder-title--mob) { margin-bottom: 0 !important; }
}

/* Pinned bars (Matt, 22 Oct 2026): desktop PPC orange header bar; phone plate preview while scrolling the options */
.spw-ppc-header__bar.spw-bar-pinned { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; box-shadow: 0 2px 12px rgba(0, 0, 0, .18); }
@media (max-width: 768px) {
  .mob-preview.spw-preview-pinned {
    position: fixed !important; top: 0; left: 0; right: 0; z-index: 900; margin: 0 !important;
    background: #fff; padding-top: 6px; padding-bottom: 4px; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .25);
  }
}

/* Same Day Dispatch badge (Matt, 22 Oct 2026): the dated grey GIF redrawn in HTML/SVG - same van, speed lines and
   wording, in the site's dark + orange. Used in the desktop price row and the phone price row. */
.spw-sdd { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; line-height: 1; text-align: center; }
.spw-sdd__van { width: 72px; height: auto; overflow: visible; }
.spw-sdd__lines path { stroke: #fd9a01; stroke-width: 3; fill: none; }
.spw-sdd__body, .spw-sdd__cab { fill: #2b2b2b; }
.spw-sdd__win { fill: #fff; }
.spw-sdd__wheel { fill: #fff; stroke: #2b2b2b; stroke-width: 3; }
.spw-sdd__txt { font: 800 15px/1.05 'Roboto Condensed', Roboto, Arial, sans-serif; color: #222; text-transform: uppercase; letter-spacing: .02em; }
.spw-sdd__txt::after { content: ''; display: block; width: 26px; height: 3px; margin: 5px auto 0; border-radius: 2px; background: #fd9a01; }
@media (prefers-reduced-motion: no-preference) {
  .spw-sdd__lines { animation: spw-sdd-zoom 2.6s ease-in-out infinite; }
  @keyframes spw-sdd-zoom { 0%, 70%, 100% { transform: translateX(0); opacity: 1 } 80% { transform: translateX(-4px); opacity: .55 } 90% { transform: translateX(0); opacity: 1 } }
}
@media (max-width: 768px) { .spw-sdd__van { width: 46px; } .spw-sdd__txt { font-size: 12px; } .spw-sdd__txt::after { width: 20px; height: 2px; margin-top: 4px; } }

/* SEO pages + home: pinned header (Matt, 23 Oct 2026) - whole header (bar + menu / bar + countdown) fixed while scrolling */
header.header.spw-hdr-pinned { position: fixed !important; top: 0; left: 0; right: 0; z-index: 1000; box-shadow: 0 2px 12px rgba(0, 0, 0, .18); }
@media (max-width: 768px) { header.header-mobile.spw-hdr-pinned { max-height: 100vh; overflow-y: auto; } }

/* Scroll reveal (Matt, 23 Oct 2026): fade up + settle, staggered along a row; script in header-showplatesworld.php */
html.spw-rv .spw-rv-item {
  opacity: 0; transform: translate3d(0, 46px, 0) scale(.97);
  transition: opacity .9s cubic-bezier(.16, 1, .3, 1), transform 1.1s cubic-bezier(.16, 1, .3, 1);
  transition-delay: var(--rv-d, 0ms); will-change: opacity, transform;
}
html.spw-rv .spw-rv-item.spw-rv-in { opacity: 1; transform: none; will-change: auto; }
@media (prefers-reduced-motion: reduce), print { html.spw-rv .spw-rv-item { opacity: 1 !important; transform: none !important; transition: none !important; } }

/* Speed (23 Oct 2026): the builder's loading overlay used loader.gif, which Chrome counted as the page's largest paint
   (LCP ~8s on the phone builders). Same overlay, spinner drawn in CSS instead - no image, not an LCP candidate. */
#builder #plate-loading img.bd-loader { display: none !important; }
#builder #plate-loading::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border: 3px solid rgba(0, 0, 0, .12); border-top-color: #fd9a01; border-radius: 50%; animation: spw-spin .8s linear infinite;
}
@keyframes spw-spin { to { transform: rotate(360deg); } }

/* Front + rear plate sizes side by side when the rear choice is offered (Matt, 23 Oct 2026) */
#builder .two-plate-size .size_background:has(#spw-rear-size-wrap:not([hidden])) {
  display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 10px; align-items: end;
}
#builder .two-plate-size .size_background:has(#spw-rear-size-wrap:not([hidden])) > li { display: contents !important; }
#builder .two-plate-size .size_background:has(#spw-rear-size-wrap:not([hidden])) .plate-size-title { grid-column: 1 / -1; grid-row: 1; }
#builder .two-plate-size .size_background:has(#spw-rear-size-wrap:not([hidden])) #spw-front-size-label { grid-column: 1; grid-row: 2; }
#builder .two-plate-size .size_background:has(#spw-rear-size-wrap:not([hidden])) #builder-size { grid-column: 1; grid-row: 3; width: 100% !important; min-width: 0; }
#builder .two-plate-size .size_background:has(#spw-rear-size-wrap:not([hidden])) #spw-rear-size-wrap .spw-size-sub { grid-column: 2; grid-row: 2; }
#builder .two-plate-size .size_background:has(#spw-rear-size-wrap:not([hidden])) #spw-rear-size { grid-column: 2; grid-row: 3; width: 100% !important; min-width: 0; margin: 0 !important; }
#builder .two-plate-size .size_background:has(#spw-rear-size-wrap:not([hidden])) .spw-rear-note { grid-column: 1 / -1; grid-row: 4; }
#builder .two-plate-size .size_background:has(#spw-rear-size-wrap:not([hidden])) .spw-rear-badge-note { grid-column: 1 / -1; grid-row: 5; }

/* ENTER REG box shorter to win back space (Matt, 23 Oct 2026): desktop 117 -> 84px, phones 90 -> 66px */
body #builder.spw-builder-first #premiumplates-builder input#pbregletter1,
#builder.spw-builder-first #pbregletter1 { height: 84px !important; font-size: 50px !important; border-width: 6px !important; padding-top: 0 !important; padding-bottom: 0 !important; }
body #builder.spw-builder-first #premiumplates-builder input#pbregletter1::placeholder,
#builder.spw-builder-first #pbregletter1::placeholder { font-size: 50px !important; }
@media (max-width: 768px) {
  body #builder.spw-builder-first #premiumplates-builder input#pbregletter1,
  #builder.spw-builder-first #pbregletter1 { height: 66px !important; font-size: clamp(30px, 10vw, 42px) !important; border-width: 5px !important; }
  body #builder.spw-builder-first #premiumplates-builder input#pbregletter1::placeholder,
  #builder.spw-builder-first #pbregletter1::placeholder { font-size: clamp(30px, 10vw, 42px) !important; }
}

/* Upsell nudge (Matt, 23 Oct 2026): a small hand-drawn green arrow from Standard ABS over to Premium Acrylic, and a
   light shine across the Premium Acrylic button. Both stop once Premium Acrylic is chosen; still for reduced motion. */
#builder #builder-material .scroll-pane { position: relative; overflow: visible !important; }
#builder #builder-material .scroll-pane::before {
  content: ''; position: absolute; z-index: 3; pointer-events: none;
  left: calc(50% - 46px); top: -27px; width: 76px; height: 40px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 76 40'%3E%3Cstyle%3E%0A.l%7Bfill:none;stroke:%232a9d3a;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:90;stroke-dashoffset:90;animation:d 3.6s ease-in-out infinite%7D%0A.h%7Bfill:none;stroke:%232a9d3a;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;opacity:0;animation:h 3.6s ease-in-out infinite%7D%0A%40keyframes d%7B0%25%7Bstroke-dashoffset:90;opacity:1%7D38%25%7Bstroke-dashoffset:0;opacity:1%7D85%25%7Bstroke-dashoffset:0;opacity:1%7D100%25%7Bstroke-dashoffset:0;opacity:0%7D%7D%0A%40keyframes h%7B0%25,36%25%7Bopacity:0%7D42%25,85%25%7Bopacity:1%7D100%25%7Bopacity:0%7D%7D%0A%40media (prefers-reduced-motion:reduce)%7B.l%7Banimation:none;stroke-dashoffset:0%7D.h%7Banimation:none;opacity:1%7D%7D%0A%3C/style%3E%3Cpath class='l' d='M4 27 C14 21.5 27 18.5 39 18.8 C50 19 58.5 22.5 66 28.5'/%3E%3Cpath class='h' d='M58.8 28.9 L66 28.5 L64.6 21.4'/%3E%3C/svg%3E") center / contain no-repeat;
}
#builder #builder-material .scroll-pane:has(#material-2.selected)::before { display: none; }
#builder #builder-material #material-2 { position: relative; overflow: hidden; }
#builder #builder-material #material-2:not(.selected)::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .85), transparent);
  transform: skewX(-20deg); animation: spw-upsell-shine 3.6s ease-in-out infinite;
}
@keyframes spw-upsell-shine { 0%, 45% { left: -60%; } 75%, 100% { left: 130%; } }
@media (prefers-reduced-motion: reduce) { #builder #builder-material #material-2::after { animation: none; display: none; } }
@media (max-width: 380px) { #builder #builder-material .scroll-pane::before { left: calc(50% - 40px); top: -24px; width: 64px; height: 34px; } }

/* Premium Acrylic looks like the upgrade (Matt, 23 Oct 2026) - green outline + light green tint, star icon, raised
   shadow, lift on hover; wording unchanged. Selected state stays the normal orange. */
#builder #builder-material #material-2:not(.selected) {
  /* no outline or tint (Matt: the green outline looked selected) - same grey as Standard ABS, raised with a shadow,
     green star + dark green text set it apart */
  color: #14532d !important; border-color: transparent !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .14) !important;
  transition: transform .15s ease, box-shadow .15s ease;
}
#builder #builder-material #material-2:not(.selected):hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0, 0, 0, .2) !important; }
#builder #builder-material #material-2::before {
  content: '\2605'; display: inline-block; margin-right: 6px; color: #2a9d3a; font-size: .95em; line-height: 1;
}
#builder #builder-material #material-2.selected::before { color: #fff; }
@media (max-width: 430px) {
  #builder.spw-builder-first #premiumplates-builder #builder-material article#material-2.selectable { font-size: 12.5px !important; padding-left: 3px !important; padding-right: 3px !important; letter-spacing: 0 !important; }
  #builder #builder-material #material-2::before { margin-right: 3px; font-size: .85em; }
}
@media (max-width: 370px) { #builder.spw-builder-first #premiumplates-builder #builder-material article#material-2.selectable { font-size: 11.5px !important; } }

/* Builder band lightly tinted so the plates stand out (Matt, 23 Oct 2026) */
body.spw-ppc section#builder { background: #f2f4f7 !important; padding-top: 24px !important; padding-bottom: 28px !important; margin-top: 0 !important; }
body.spw-ppc section#builder img[id^="numberplate"], body.spw-ppc section#builder img.spw-rear-preview {
  filter: drop-shadow(0 6px 12px rgba(16, 24, 40, .16)) drop-shadow(0 1px 2px rgba(16, 24, 40, .12));
}
body.spw-ppc .spw3d { background: transparent !important; }
@media (max-width: 768px) { body.spw-ppc .mob-preview.spw-preview-pinned { background: #f2f4f7 !important; } }
body.spw-ppc section#builder main#maincontent,
body.spw-ppc section#builder #builder-reg,
body.spw-ppc section#builder #builder-actions,
body.spw-ppc section#builder .builder-shell,
body.spw-ppc section#builder #premiumplates-builder { background: transparent !important; }
@media (max-width: 768px) { body.spw-ppc section#builder { padding-top: 14px !important; } }
body.spw-ppc #builder.spw-builder-first #premiumplates-builder li#builder-reg,
body.spw-ppc #builder.spw-builder-first #premiumplates-builder #builder-actions,
body.spw-ppc #builder.spw-builder-first #premiumplates-builder #maincontent { background: transparent !important; background-color: transparent !important; }

/* Tinted builder band: no white strips above/below it - the gaps become padding inside the tint (Matt, 23 Oct 2026) */
body.spw-ppc section#builder.spw-builder-first { margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 40px !important; padding-bottom: 40px !important; }
body.spw-ppc .spw-ppc-below { margin-top: 0 !important; }
@media (max-width: 768px) { body.spw-ppc section#builder.spw-builder-first { padding-top: 14px !important; padding-bottom: 28px !important; } }
/* the "YOUR REG" placeholder is a GIF with a solid white background - blend it into the tint, no shadow box */
/* (placeholder GIF: its white surround is now cleared by spwWhitenPlates in builder.php - multiply blend no longer needed) */

/* Premium Acrylic = glossy acrylic look (Matt, 23 Oct 2026): bright white face with a glass-style highlight band on
   the top half, crisp edge, inner light line and a lifted shadow - stands out from the tinted builder without looking
   selected. Selected = orange with the same gloss. Shine sweep (deploy 212) still runs over it until chosen. */
#builder #builder-material #material-2:not(.selected) {
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 46%, #eef2f7 52%, #f8fafc 100%) !important;
  border: 1px solid rgba(16, 24, 40, .12) !important;
  box-shadow: inset 0 1px 0 #fff, inset 0 -3px 6px rgba(16, 24, 40, .06), 0 5px 14px rgba(16, 24, 40, .18), 0 1px 2px rgba(16, 24, 40, .12) !important;
}
#builder #builder-material #material-2:not(.selected):hover {
  box-shadow: inset 0 1px 0 #fff, inset 0 -3px 6px rgba(16, 24, 40, .06), 0 8px 18px rgba(16, 24, 40, .22), 0 1px 2px rgba(16, 24, 40, .12) !important;
}
#builder.spw-builder-first #premiumplates-builder #builder-material article#material-2.selectable.selected {
  background: linear-gradient(180deg, #ffb53a 0%, #fda21a 46%, #f28c00 54%, #fd9a01 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 4px 12px rgba(242, 140, 0, .35) !important;
}

/* Gloss highlight edge as a soft wave instead of a straight split down the middle (Matt, 23 Oct 2026) */
#builder #builder-material #material-2:not(.selected) {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 46' preserveAspectRatio='none'%3E%3Cpath d='M0 0H200V19C178 26 160 15 136 20S96 28 70 22 28 16 0 24Z' fill='%23ffffff' fill-opacity='0.95'/%3E%3C/svg%3E") top / 100% 100% no-repeat, linear-gradient(180deg, #f3f6fa 0%, #e9eef4 55%, #f6f8fb 100%) !important;
}
#builder.spw-builder-first #premiumplates-builder #builder-material article#material-2.selectable.selected {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 46' preserveAspectRatio='none'%3E%3Cpath d='M0 0H200V19C178 26 160 15 136 20S96 28 70 22 28 16 0 24Z' fill='%23ffffff' fill-opacity='0.28'/%3E%3C/svg%3E") top / 100% 100% no-repeat, linear-gradient(180deg, #fdab2a 0%, #f69200 55%, #fd9a01 100%) !important;
}

/* Builder dropdowns look designed, not form-default (Matt, 23 Oct 2026). The closed box is fully ours: Roboto 500,
   dark text, own chevron, soft shadow, orange focus ring. The OPEN list is drawn by the phone / browser itself
   (iOS wheel, Android sheet, desktop list) and can't be restyled without replacing the selects. */
#builder.spw-builder-first #premiumplates-builder select,
#builder.spw-builder-first select {
  -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.5 6 6l4.5-4.5' fill='none' stroke='%231f2937' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center / 12px 8px !important;
  border: 1px solid #d9dde3 !important; border-radius: 10px !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .06) !important;
  font-family: Roboto, 'Helvetica Neue', Arial, sans-serif !important; font-weight: 500 !important; color: #1f2937 !important;
  padding-left: 14px !important; padding-right: 36px !important;
  text-overflow: ellipsis; white-space: nowrap; overflow: hidden; cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
#builder.spw-builder-first select:hover { border-color: #b9c0ca !important; }
#builder.spw-builder-first select:focus { outline: none !important; border-color: #fd9a01 !important; box-shadow: 0 0 0 3px rgba(253, 154, 1, .22) !important; }
#builder.spw-builder-first select option, #builder.spw-builder-first select optgroup { font-family: Roboto, Arial, sans-serif; color: #1f2937; }
@media (max-width: 768px) { #builder.spw-builder-first select { padding-left: 12px !important; padding-right: 30px !important; background-position: right 11px center !important; } }
/* the bottom-line slogan box to match the dropdowns */
#builder.spw-builder-first #premiumplates-builder input#builder-slogan-text,
#builder.spw-builder-first input#builder-slogan-text {
  border: 1px solid #d9dde3 !important; border-radius: 10px !important; box-shadow: 0 1px 2px rgba(16, 24, 40, .06) !important;
  font-family: Roboto, 'Helvetica Neue', Arial, sans-serif !important; font-weight: 500 !important; color: #1f2937 !important; padding-left: 14px !important;
}
#builder.spw-builder-first input#builder-slogan-text:focus { outline: none !important; border-color: #fd9a01 !important; box-shadow: 0 0 0 3px rgba(253, 154, 1, .22) !important; }

/* Phones: live price above the bottom Add to Basket (Matt, 23 Oct 2026) */
.spw-atb-bottom__price { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 4px 12px; margin: 0 0 10px; font-family: Roboto, Arial, sans-serif; }
.spw-atb-bottom__price[hidden] { display: none !important; }
.spw-atb-bottom__now { font-size: 22px; font-weight: 800; color: #111; }
.spw-atb-bottom__was { font-size: 16px; color: #e11d1d; text-decoration: line-through; }
.spw-atb-bottom__save { font-size: 15px; font-weight: 600; color: #22a02a; }
.spw-atb-bottom__was:empty, .spw-atb-bottom__save:empty { display: none; }

/* no white strip between the grey reviews band and the footer (Matt, 23 Oct 2026) - its 30px margin becomes padding */
body.spw-ppc .spw-ppc-below { margin-bottom: 0 !important; padding-bottom: 30px; }
@media (max-width: 768px) { body.spw-ppc .spw-ppc-below { padding-bottom: 12px; } }

/* Desktop /creator: Add to Basket on screen without scrolling (Matt, 23 Oct 2026) - banner 236 -> 170px tall
   (cropped top/bottom, same width), USP strip 64 -> 52px, builder top padding 40 -> 24, Add to Basket 86 -> 68px */
@media (min-width: 769px) {
  .spw-ppc-banner img { aspect-ratio: 1300 / 170; object-fit: cover; object-position: center; }
  body.spw-ppc section#builder.spw-builder-first { padding-top: 24px !important; }
  body.spw-ppc .spw-ppc-strip { height: auto !important; min-height: 0 !important; }
  body.spw-ppc .spw-ppc-strip .spw-ppc-strip__inner { padding-top: 6px !important; padding-bottom: 6px !important; min-height: 0 !important; }
  body.spw-ppc #builder.spw-builder-first button#add-to-basket { height: 68px !important; min-height: 0 !important; }
}

/* PPC banner H1: two fixed lines, break before "Number Plates" (header-ppc.php adds the <br>) - each line never wraps (Matt, 23 Oct 2026) */
.spw-ppc-banner .spw-ppc-banner__h1 { max-width: none !important; white-space: nowrap !important; }

/* Modern section photos (Matt, 23 Oct 2026) - unbranded shots from the brand image set replace the dated
   red Skoda (Number Plate Maker + Custom) and pink Audi / grey Seat (4D). Desktop: square photo at the top
   of its column instead of a tall strip (the plates would be cropped in a tall box). Phones keep 4:3. */
.number-plate-img-2 { background-image: url('/assets/showplatesworld/images/opt/sec-short-orange-900.webp') !important; }
main.spw-live .number-plate-img-2 { background-image: url('/assets/showplatesworld/images/opt/sec-regular-garage-900.webp') !important; }
.page-4d-img-1 { background-image: url('/assets/showplatesworld/images/opt/sec-4d-garage-900.webp') !important; }
.page-4d-img-2 { background-image: url('/assets/showplatesworld/images/opt/sec-4d-smoke-900.webp') !important; }
@media (max-width: 768px) {
  .number-plate-img-2 { background-image: url('/assets/showplatesworld/images/opt/sec-short-orange-600.webp') !important; }
  main.spw-live .number-plate-img-2 { background-image: url('/assets/showplatesworld/images/opt/sec-regular-garage-600.webp') !important; }
  .page-4d-img-1 { background-image: url('/assets/showplatesworld/images/opt/sec-4d-garage-600.webp') !important; }
  .page-4d-img-2 { background-image: url('/assets/showplatesworld/images/opt/sec-4d-smoke-600.webp') !important; }
}
@media (min-width: 769px) {
  .number-plate-img-2, .page-4d-img-1, .page-4d-img-2 { aspect-ratio: 1 / 1; height: auto !important; min-height: 0 !important; align-self: start; background-size: cover !important; background-position: center !important; }
}

/* 3D full screen (Matt, 26 Oct 2026): solid studio background (the tinted-builder rule had made it see-through,
   so the page showed behind the plates) and a clear close button in the top-right corner */
html body .spw3d.spw3d--full {
  background: radial-gradient(120% 80% at 50% 45%, #ffffff 0%, #f2f4f7 60%, #e6e9ee 100%) !important;
}
html body .spw3d.spw3d--full .spw3d__full[aria-pressed="true"] {
  top: calc(env(safe-area-inset-top, 0px) + 14px); right: calc(env(safe-area-inset-right, 0px) + 14px);
  width: 46px; height: 46px; border-radius: 999px; background-color: #111; background-size: 20px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25), 0 0 0 3px rgba(255, 255, 255, .9);
}
html body .spw3d.spw3d--full .spw3d__hint { bottom: calc(env(safe-area-inset-bottom, 0px) + 22px); }
@media (max-width: 768px) {
  html body .spw3d.spw3d--full .spw3d__views { top: calc(env(safe-area-inset-top, 0px) + 76px); }
}

/* ==========================================================================
   Accessibility contrast (Matt, 26 Oct 2026) - WCAG AA 4.5:1 for text.
   Orange buttons / highlights get near-black text (8.8:1); Add to Basket keeps white text on a deeper green
   (5.1:1); orange text on white is a deeper orange (#a65400, 5.4:1); light greys a touch darker; links inside
   body text are underlined so they don't rely on colour alone. Colours only - no wording or layout changes.
   ========================================================================== */
/* orange buttons + selected options: black text */
.spw-hero-cta__btn, .hero-section .spw-hero-cta .spw-hero-cta__btn, .spw-reg-form button, .spw-reg-form [type="submit"],
.header-add-to-cart-btn .elementor-button, .spw-form-submit-btn,
body.spw-ppc #builder.spw-builder-first #premiumplates-builder .segmented__input:checked + .segmented__option,
#builder.spw-builder-first #premiumplates-builder .segmented__input:checked + .segmented__option,
body #builder.spw-builder-first #premiumplates-builder .mobile-material article.selectable.current,
body #builder.spw-builder-first #premiumplates-builder .mobile-material article.selectable.selected,
html body .spw3d__flat, html body .spw3d__views .spw3d__flat, .spw3d-toggle[aria-pressed="true"] { color: #111 !important; }
.spw-hero-cta__btn svg, .spw-reg-form button svg, .header-add-to-cart-btn .elementor-button svg { fill: #111 !important; stroke: #111 !important; }
.spw-phone svg { fill: #111 !important; color: #111 !important; }
/* Reg chat header on orange (Contact + Order Tracking) */
#spw-contact-chat .pc-header, #spw-contact-chat .pc-header * { color: #111 !important; }
#spw-contact-chat .pc-header svg { fill: #111 !important; stroke: #111 !important; }
/* Add to Basket: deeper green, white text */
.spw-builder-first .btn-add-to-basket-desk,
#builder.spw-builder-first .nameplate-main-container #builder-actions #add-to-basket.btn-add-to-basket-desk,
#builder.spw-builder-first .btn-buy-now-mobile.mob-add-to-basket,
body.spw-ppc #builder.spw-builder-first #premiumplates-builder .mob-price .your-price-mobile-wrap button#add-to-basket.mob-add-to-basket,
#builder.spw-builder-first .mob-price .your-price-mobile-wrap .btn-buy-now-mobile.mob-add-to-basket,
#builder.spw-builder-first .spw-atb-bottom .spw-atb-bottom__btn { background: #1b7f18 !important; background-color: #1b7f18 !important; border-color: #1b7f18 !important; color: #fff !important; }
.spw-builder-first .btn-add-to-basket-desk:hover,
#builder.spw-builder-first .nameplate-main-container #builder-actions #add-to-basket.btn-add-to-basket-desk:hover,
#builder.spw-builder-first .spw-atb-bottom .spw-atb-bottom__btn:hover { background: #156a13 !important; background-color: #156a13 !important; }
#builder.spw-builder-first #premiumplates-builder .material-popular-hint__tag { background: #1f7a2e !important; }
#builder.spw-builder-first #premiumplates-builder .material-popular-hint__arrow { border-top-color: #1f7a2e !important; color: #1f7a2e !important; }
/* orange text on white -> deeper orange */
.spw-live .prose h4, .spw-live .blog-content .read-more, #mobileMenu .header-center-menu a.active,
.spwq__group-title, .spwq__answer a, .spw-mailto__addr, .spwl__toc summary, .spwl__card a,
.spw-post__body a, .spw-blog-card__more, .spw-contact-card-body a { color: #a65400 !important; }
/* light greys */
.spw-blog-card__date, .spw-reviews__source, .spwl__toc li, .spw-post__crumbs, .spw-post__crumbs a { color: #666 !important; }
.spw-ppc-reviews__source { color: #5f6368 !important; }
.spwf__bottom-row > p, .spwf__bottom-row p { color: #a8adb3 !important; }
.spwf__pay-paypal { color: #0070ba !important; }
.spw-contact-card-body span[style*="#999"] { color: #6b6b6b !important; }
/* links inside body text: underlined, not colour alone */
.spw-live .prose p a, #plate-type-main-wrapper section p a, .faq-answer a, .spwq__answer a, .spw-post__body p a, .spw-post__body li a,
.spw-ppc-reviews__source a, .spw-reviews__source a, .spwl p a, .spwl li a {
  text-decoration: underline !important; text-underline-offset: 2px;
}
html body .spwf .spwf__pay-paypal, html body .spwf__pay .spwf__pay-paypal { color: #0070ba !important; }
.spw-live .div-with-links .prose p, .div-with-links.col-with-image .prose p { color: #555 !important; }

/* Text style buttons hint at their finish (Matt, 26 Oct 2026) - labels set in the real number plate font
   (Charles Wright, already on the site) with CSS effects only: Printed flat, 3D Gel glossy dome, 4D raised
   (5mm deeper than 3mm), 5D raised with a glossy gel top. Wording unchanged. */
@font-face { font-family: 'SPW Plate'; src: url('/headless/assets/fonts/CharlesWright-Bold.woff') format('woff'); font-weight: 700; font-display: swap; }
#builder .segmented__option[for^="reg-font-"] {
  font-family: 'SPW Plate', 'Roboto Condensed', Roboto, sans-serif !important; font-weight: 700 !important;
  font-size: 17px !important; letter-spacing: .02em !important; color: #111 !important;
}
/* 3D Gel - soft, rounded "domed resin" look */
#builder .segmented__option[for="reg-font-6"] { text-shadow: 0 1px 0 rgba(255,255,255,.7), 0 2px 2px rgba(0,0,0,.35), 0 3px 6px rgba(0,0,0,.25) !important; }
/* 4D 3mm / 4D 5mm - raised letters, 5mm deeper */
#builder .segmented__option[for="reg-font-9"]  { text-shadow: 1px 1px 0 rgba(0,0,0,.38), 2px 2px 0 rgba(0,0,0,.18) !important; }
#builder .segmented__option[for="reg-font-25"] { text-shadow: 1px 1px 0 rgba(0,0,0,.42), 2px 2px 0 rgba(0,0,0,.32), 3px 3px 0 rgba(0,0,0,.22), 4px 4px 0 rgba(0,0,0,.12) !important; }
/* 5D 3mm / 5D 5mm - raised (as 4D) with the soft gel glow on top */
#builder .segmented__option[for="reg-font-18"] { text-shadow: 0 1px 0 rgba(255,255,255,.6), 1px 1px 0 rgba(0,0,0,.38), 2px 2px 0 rgba(0,0,0,.18), 0 3px 6px rgba(0,0,0,.28) !important; }
#builder .segmented__option[for="reg-font-26"] { text-shadow: 0 1px 0 rgba(255,255,255,.6), 1px 1px 0 rgba(0,0,0,.42), 2px 2px 0 rgba(0,0,0,.32), 3px 3px 0 rgba(0,0,0,.22), 4px 4px 0 rgba(0,0,0,.12), 0 5px 8px rgba(0,0,0,.28) !important; }

/* text style buttons - tighter, crisp shadows (Matt, 26 Oct 2026: the blurred ones could read as grey-backed digits) */
#builder .segmented__option[for="reg-font-6"]  { text-shadow: 0 1px 0 rgba(0,0,0,.28) !important; }
#builder .segmented__option[for="reg-font-9"]  { text-shadow: 1px 1px 0 rgba(0,0,0,.30) !important; }
#builder .segmented__option[for="reg-font-25"] { text-shadow: 1px 1px 0 rgba(0,0,0,.34), 2px 2px 0 rgba(0,0,0,.16) !important; }
#builder .segmented__option[for="reg-font-18"] { text-shadow: 0 -1px 0 rgba(255,255,255,.9), 1px 1px 0 rgba(0,0,0,.30) !important; }
#builder .segmented__option[for="reg-font-26"] { text-shadow: 0 -1px 0 rgba(255,255,255,.9), 1px 1px 0 rgba(0,0,0,.34), 2px 2px 0 rgba(0,0,0,.16) !important; }

/* ---- 26 Oct 2026 (Matt): desktop price row = review stars | same day dispatch | price (was price first).
   Order only, phones unchanged. ---- */
@media (min-width: 769px) {
  .wrap-price-desktop-images > .spw-review-badge { order: 1; }
  .wrap-price-desktop-images > .sdd-img-wrap { order: 2; }
  .wrap-price-desktop-images > .pricing-wrapper { order: 3; }
}

/* ---- 26 Oct 2026 (Matt): on phones a tall pair (11x8 front + rear comes back 397x596) filled the screen and the
   pinned preview hid the builder. Preview images are capped in height and scale down to fit; normal plates
   (wide renders) are well under the cap and look the same. ---- */
@media (max-width: 768px) {
  #builder .mob-preview img[id^="numberplate"],
  #builder .mob-preview img.spw-rear-preview {
    max-height: min(32vh, 260px) !important;
    width: auto !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* PPC banners (desktop, cropped 236 -> 170px tall in deploy 224): crop centred on each plate's lettering
   rather than the middle of the photo (Matt, 27 Oct 2026). % = how far down the hidden 66px the window sits. */
@media (min-width: 769px) {
  .spw-ppc-banner[data-ban="ppc-home-desk"] img      { object-position: 50% 56% !important; }
  .spw-ppc-banner[data-ban="ppc-3dgel-desk"] img     { object-position: 50% 78% !important; }
  .spw-ppc-banner[data-ban="ppc-4d-desk"] img        { object-position: 50% 62% !important; }
  .spw-ppc-banner[data-ban="ppc-5d-desk"] img        { object-position: 50% 40% !important; }
  .spw-ppc-banner[data-ban="ppc-motorbike-desk"] img { object-position: 50% 92% !important; }
}

/* Separate front / rear sizes (Matt, 27 Oct 2026): "Front plate size" + "Rear plate size" labels only - the
   "Plate sizes" heading (and its info icon) is hidden while the rear choice shows, so there are no duplicate labels. */
body #builder.spw-builder-first #premiumplates-builder #builder-form .two-plate-size .size_background:has(#spw-rear-size-wrap:not([hidden])) .plate-size-title,
#builder .two-plate-size .size_background:has(#spw-rear-size-wrap:not([hidden])) .plate-size-title { display: none !important; }
#builder .two-plate-size .size_background:has(#spw-rear-size-wrap:not([hidden])) #spw-front-size-label,
#builder .two-plate-size .size_background:has(#spw-rear-size-wrap:not([hidden])) #spw-rear-size-wrap .spw-size-sub { grid-row: 1; align-self: end; }
#builder .two-plate-size .size_background:has(#spw-rear-size-wrap:not([hidden])) #builder-size,
#builder .two-plate-size .size_background:has(#spw-rear-size-wrap:not([hidden])) #spw-rear-size { grid-row: 2; }
#builder .two-plate-size .size_background:has(#spw-rear-size-wrap:not([hidden])) .spw-rear-note { grid-row: 3; }
#builder .two-plate-size .size_background:has(#spw-rear-size-wrap:not([hidden])) .spw-rear-badge-note { grid-row: 4; }
#builder .two-plate-size .size_background:has(#spw-rear-size-wrap:not([hidden])) .spw-size-moved { grid-column: 1 / -1; grid-row: 5; }
/* Front / Rear plate size labels sit closer to their dropdowns (Matt, 27 Oct 2026): 11px (6px phones) -> 4px */
#builder .two-plate-size .size_background #spw-front-size-label,
#builder .two-plate-size .size_background #spw-rear-size-wrap .spw-size-sub { margin-bottom: 4px !important; }
/* All builder labels 4px above their control (Matt, 27 Oct 2026) - was 11px desktop (Paul's notes 21 Oct) / 6px phones */
body #builder.spw-builder-first #premiumplates-builder #builder-form .text-style-title-strong,
body #builder.spw-builder-first #premiumplates-builder #builder-form .plate-size-title,
body #builder.spw-builder-first #premiumplates-builder #builder-form .v2-plate-layout-container label > strong,
body #builder.spw-builder-first #premiumplates-builder #builder-form .v2-plate-layout-container > strong,
body #builder.spw-builder-first #premiumplates-builder #builder-material > strong { margin-bottom: 4px !important; }
/* Phones/tablets: plate size row lines up with the other fields (was 10px wider each side) - 27 Oct 2026 */
@media (max-width: 768px) {
  #builder .two-plate-size .size_background:has(#spw-rear-size-wrap:not([hidden])) { padding-left: 10px !important; padding-right: 10px !important; box-sizing: border-box; }
}

/* ===== Paul's P30 Pro test (27 Oct 2026) - phones only ===== */
@media (max-width: 768px) {
  /* /creator header on one line: the logo shrinks with the screen so it fits beside the phone + basket */
  .spw-ppc-header .spw-ppc-header__logo img { width: clamp(110px, 42vw, 170px) !important; height: auto !important; }
  .spw-ppc-header .spw-ppc-header__logo { flex: 0 1 auto; min-width: 0; }
  .spw-ppc-header .spw-ppc-header__contact { flex: 0 0 auto; margin-left: auto; gap: 10px !important; }

  /* dispatch deadline bar never runs off the screen: the label gives way (ellipsis), the clock stays whole */
  .spw-countdown { box-sizing: border-box; max-width: 100vw; }
  .spw-ppc-header .spw-countdown--bar { width: calc(100% + 30px); }
  .spw-countdown .spw-countdown__label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .spw-countdown .spw-countdown__time { flex: 0 0 auto; }

  /* builder: side margins cut to about a third (were 20 + 10px each side, and 10px more on the option rows) */
  body.spw-ppc #wrap { padding-left: 6px !important; padding-right: 6px !important; }
  body.spw-ppc #premiumplates-builder { padding-left: 4px !important; padding-right: 4px !important; }
  body.spw-ppc #builder-form li.one-your-reg.plate-row,
  body.spw-ppc #builder .two-plate-size .size_background,
  body.spw-ppc #builder .two-plate-size .size_background:has(#spw-rear-size-wrap:not([hidden])),
  body.spw-ppc .spw-atb-bottom { padding-left: 3px !important; padding-right: 3px !important; }

  /* a little breathing room either side of Premium Acrylic */
  body #builder #builder-material article[data-id="2"] { margin-left: 6px !important; margin-right: 4px !important; }
}
@media (max-width: 380px) {
  .spw-countdown .spw-countdown__label { font-size: 13px !important; }
}
.spw-2pm-off .spw-2pm { display: none; }
@media (max-width: 768px) {
  /* every option row: 10px -> 3px each side, so controls sit ~13px from the screen edge (preview at 10px) */
  body.spw-ppc #builder.spw-builder-first #premiumplates-builder #builder-form li.builder-menu-content:not(#builder-reg),
  body.spw-ppc #builder.spw-builder-first #premiumplates-builder #builder-form li.plate-row { padding-left: 3px !important; padding-right: 3px !important; }
  body.spw-ppc #builder.spw-builder-first #premiumplates-builder #builder-form .two-plate-size .size_background,
  body.spw-ppc #builder.spw-builder-first #premiumplates-builder #builder-form .two-plate-size .size_background:has(#spw-rear-size-wrap:not([hidden])) { padding-left: 3px !important; padding-right: 3px !important; }
  /* Premium Acrylic: small gap either side */
  body.spw-ppc #builder.spw-builder-first #premiumplates-builder #builder-material article#material-2 { margin-left: 6px !important; margin-right: 4px !important; }
}

/* ---- Builder: more space between sections (Matt, 27 Oct 2026): text style / vehicle row / material / sizes /
   border + badge / slogan - 12px -> 18px desktop, 15px phones (was 22/18, Matt: a slight bit less) */
#builder.spw-builder-first #premiumplates-builder #builder-form #builder-menu-drilldown > li.four-text-style,
#builder.spw-builder-first #premiumplates-builder #builder-form #builder-menu-drilldown > li.one-your-reg.plate-row,
#builder.spw-builder-first #premiumplates-builder #builder-form #builder-menu-drilldown > .spw-material,
#builder.spw-builder-first #premiumplates-builder #builder-form #builder-menu-drilldown > li.two-plate-size,
#builder.spw-builder-first #premiumplates-builder #builder-form #builder-menu-drilldown > li.six-borders,
#builder.spw-builder-first #premiumplates-builder #builder-form #builder-menu-drilldown > #badge-hide { margin-bottom: 18px !important; }
@media (max-width: 768px) {
  #builder.spw-builder-first #premiumplates-builder #builder-form #builder-menu-drilldown > li.four-text-style,
  #builder.spw-builder-first #premiumplates-builder #builder-form #builder-menu-drilldown > li.one-your-reg.plate-row,
  #builder.spw-builder-first #premiumplates-builder #builder-form #builder-menu-drilldown > .spw-material,
  #builder.spw-builder-first #premiumplates-builder #builder-form #builder-menu-drilldown > li.two-plate-size,
  #builder.spw-builder-first #premiumplates-builder #builder-form #builder-menu-drilldown > li.six-borders,
  #builder.spw-builder-first #premiumplates-builder #builder-form #builder-menu-drilldown > #badge-hide { margin-bottom: 15px !important; }
}

/* ---- Reviews: stars + bold 4.9 (Matt, 27 Oct 2026 - review count removed) */
body #builder.spw-builder-first .spw-review-badge .spw-review-badge__text,
body.spw-ppc #builder.spw-builder-first .wrap-price-desktop-images > .spw-review-badge .spw-review-badge__text,
body #builder.spw-builder-first .mob-price .spw-review-badge--mob .spw-review-badge__text { font: 800 18px/1.1 Roboto, Arial, sans-serif !important; color: #111 !important; letter-spacing: 0 !important; }
@media (max-width: 768px) { body #builder.spw-builder-first .mob-price .spw-review-badge--mob .spw-review-badge__text { font-size: 17px !important; line-height: 1.1 !important; } }
.spw-ppc-reviews h2 strong { color: #111; }

/* ---- Page summary under the hero (Matt, 27-28 Oct 2026, AI search): short answer-first paragraph on the 7 product
   pages. Styled as a soft card in the page's own font, lined up with the content column below (28 Oct: the first
   centred Open Sans version looked out of place). Wording lives in the CMS. */
.spw-summary { max-width: 1260px; margin: 0 auto; padding: 36px 55px 40px; box-sizing: border-box; }
.spw-summary p {
  margin: 0 !important; padding: 22px 28px; border-radius: 16px; background: #f6f7f9; border-left: 4px solid #fc9b04;
  font: 500 19px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color: #222; text-align: left;
}
@media (max-width: 768px) {
  .spw-summary { padding: 20px 20px 4px; }
  .spw-summary p { padding: 16px 18px; border-radius: 12px; font-size: 16px; line-height: 1.55; }
}

/* ---- 1 Nov 2026 (Matt): 7in x 5in motorbike plate (live Magento type 783), as on BPD ----
   Magento's renderer returns the 7x5 with SQUARE corners (blank corner mask) and a 10px see-through strip at the
   bottom of its 251x190 image; every other bike size is rounded. Same display-only fix as BPD (29 Oct): while the 7x5
   is the chosen size, trim the strip and round the visible plate. Scoped to the Motorbike group because on uat's dev
   Magento 783 is a car size (11x8). The plate's drop shadow is clipped off on this size only. */
body:has(#builder-size optgroup[label="Motorbike Plates"] option[value="783"]:checked) img#numberplate,
body:has(#builder-size optgroup[label="Motorbike Plates"] option[value="783"]:checked) img#numberplate-mob,
body:has(#builder-size optgroup[label="Motorbike Plates"] option[value="783"]:checked) img#numberplate-mob2 {
    clip-path: inset(0 0 5.3% 0 round 4% / 5.3%);
}

/* ---- 1 Nov 2026 (Matt): desktop price block = red struck-through was-price, then Save, then the price,
   all right-aligned. Desktop price row only (phones / bottom Add to Basket price unchanged). */
@media (min-width: 769px) {
  body.spw-ppc .wrap-price-desktop-images .pricing-wrapper {
    align-items: flex-end !important;
    text-align: right !important;
  }
  body.spw-ppc .wrap-price-desktop-images .pricing-wrapper .desk-slashed-price { order: 1 !important; margin: 0 !important; }
  body.spw-ppc .wrap-price-desktop-images .pricing-wrapper .spw-ppc-save { order: 2 !important; }
  body.spw-ppc .wrap-price-desktop-images .pricing-wrapper .price { order: 3 !important; margin-top: 0 !important; }
}

/* ---- Phones (3 Nov 2026, Matt): price row = reviews | Same Day Dispatch | price (price on the right) -- */
@media (max-width: 768px) {
  #builder.spw-builder-first .mob-price .spw-review-badge--mob { grid-column: 1 !important; grid-row: 1 !important; }
  #builder.spw-builder-first .mob-price #builder-actions { grid-column: 3 !important; grid-row: 1 !important; text-align: right; }
  body.spw-ppc #builder.spw-builder-first #premiumplates-builder .mob-price #builder-actions .pricing-wrapper { align-items: flex-end !important; text-align: right !important; }
}

/* ---- Phones (3 Nov 2026, Matt): Border full width; Bottom line + Slogan colour on the same edges as the
   other fields (slogan row had 10px side padding vs 3px elsewhere; slogan colour was half width) -------- */
@media (max-width: 768px) {
  body #builder.spw-builder-first #premiumplates-builder #builder-form select#border-color,
  body #builder.spw-builder-first #premiumplates-builder #builder-form select#slogan-color { width: 100% !important; max-width: 100% !important; }
  body #maincontent #builder.spw-builder-first #premiumplates-builder #builder-form #builder-slogan .vertical .plate-row,
  body #builder.spw-builder-first #premiumplates-builder #builder-form #builder-slogan div.plate-row.plate-row { padding-left: 3px !important; padding-right: 3px !important; }
}

/* ---- Phones (3 Nov 2026, Matt): review stars + "4.9 out of 5.0" above the /creator reviews centred ---- */
@media (max-width: 768px) {
  body.spw-ppc .spw-ppc-below .spw-ppc-reviews__summary { display: flex !important; justify-content: center !important; align-items: center !important; text-align: center !important; width: 100% !important; }
  body.spw-ppc .spw-ppc-below .spw-ppc-reviews__summary h2 { text-align: center !important; }
}

/* ---- Reviews block design pass (3 Nov 2026, Matt - from TDM's staging checks): row of cards instead of one
   small card at a time. Same reviews + wording. Desktop 3 across, tablet 2, phones ~1 with the next peeking;
   swipe / arrows (loop) / dots. Gold stars, initial avatar, light band behind. ------------------------------ */
.spw-reviews { background: #f6f7f9 !important; padding: 56px 0 48px !important; }
.spw-reviews .spw-reviews__slider { position: relative !important; display: block !important; max-width: 1180px !important; margin: 0 auto !important; padding: 0 56px !important; }
.spw-reviews .spw-reviews__viewport {
  display: flex !important; gap: 20px !important; overflow-x: auto !important; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 8px 4px 18px !important; outline: none;
}
.spw-reviews .spw-reviews__viewport::-webkit-scrollbar { display: none; }
.spw-reviews .spw-reviews__card, .spw-reviews .spw-reviews__card[hidden] {
  display: flex !important; flex-direction: column !important; flex: 0 0 calc((100% - 40px) / 3) !important; max-width: none !important;
  scroll-snap-align: start; position: relative; box-sizing: border-box;
  background: #fff !important; border: 1px solid #eceef1 !important; border-radius: 16px !important;
  box-shadow: 0 6px 22px rgba(17, 24, 39, .07) !important; padding: 22px 22px 18px !important; margin: 0 !important; min-height: 210px;
}
.spw-reviews .spw-reviews__card::before {
  content: "\201C"; position: absolute; top: 6px; right: 18px; font: 700 64px/1 Georgia, serif; color: #fd9a01; opacity: .22; pointer-events: none;
}
.spw-reviews .spw-reviews__head { display: flex !important; align-items: center !important; gap: 10px !important; margin: 0 0 12px !important; }
.spw-reviews .spw-reviews__stars { color: #f5b301 !important; font-size: 19px !important; letter-spacing: 1px !important; line-height: 1 !important; }
.spw-reviews .spw-reviews__score { background: #fff4e0 !important; color: #7a4300 !important; font: 700 12px/1 Roboto, Arial, sans-serif !important; padding: 5px 8px !important; border-radius: 999px !important; }
.spw-reviews .spw-reviews__title { font: 700 17px/1.35 Roboto, Arial, sans-serif !important; color: #111 !important; margin: 0 0 6px !important; }
.spw-reviews .spw-reviews__text { font: 400 15px/1.6 Roboto, Arial, sans-serif !important; color: #3a3f47 !important; margin: 0 0 16px !important; flex: 1 1 auto; }
.spw-reviews .spw-reviews__title + .spw-reviews__text { margin-top: 0 !important; }
.spw-reviews .spw-reviews__name {
  display: flex !important; align-items: center !important; gap: 10px !important; margin: auto 0 0 !important; padding-top: 14px !important;
  border-top: 1px solid #f0f1f3; font: 600 14px/1.2 Roboto, Arial, sans-serif !important; color: #222 !important;
}
.spw-reviews .spw-reviews__avatar {
  flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; background: #fd9a01; color: #111;
  display: inline-flex; align-items: center; justify-content: center; font: 800 15px/1 Roboto, Arial, sans-serif;
}
.spw-reviews .spw-reviews__arrow {
  position: absolute !important; top: 50% !important; transform: translateY(-60%) !important; width: 44px !important; height: 44px !important;
  border-radius: 50% !important; background: #fff !important; color: #111 !important; border: 1px solid #e3e6ea !important;
  box-shadow: 0 4px 14px rgba(17,24,39,.10) !important; font: 400 28px/1 Roboto, Arial, sans-serif !important; padding: 0 0 3px !important;
  display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer; z-index: 2; transition: background .15s, transform .15s;
}
.spw-reviews .spw-reviews__arrow:hover { background: #fd9a01 !important; border-color: #fd9a01 !important; }
.spw-reviews .spw-reviews__arrow--prev { left: 0 !important; }
.spw-reviews .spw-reviews__arrow--next { right: 0 !important; }
.spw-reviews__dots { display: flex; justify-content: center; gap: 8px; margin-top: 6px; }
.spw-reviews__dots span { width: 8px; height: 8px; border-radius: 999px; background: #cfd4da; transition: width .2s, background .2s; }
.spw-reviews__dots span.is-on { width: 22px; background: #fd9a01; }
@media (max-width: 1024px) {
  .spw-reviews .spw-reviews__card, .spw-reviews .spw-reviews__card[hidden] { flex-basis: calc((100% - 20px) / 2) !important; }
}
@media (max-width: 768px) {
  .spw-reviews { padding: 36px 0 30px !important; }
  .spw-reviews .spw-reviews__slider { padding: 0 !important; }
  .spw-reviews .spw-reviews__viewport { gap: 12px !important; padding: 6px 20px 14px !important; scroll-padding: 0 20px; }
  .spw-reviews .spw-reviews__card, .spw-reviews .spw-reviews__card[hidden] { flex-basis: 84% !important; min-height: 190px; padding: 18px 18px 14px !important; }
  .spw-reviews .spw-reviews__arrow { display: none !important; }
}
/* reviews pass tidy: 5/5 chip sits next to the stars (quote mark keeps the top-right), cards only as tall as the tallest */
.spw-reviews .spw-reviews__score { margin-left: 0 !important; }
.spw-reviews .spw-reviews__card, .spw-reviews .spw-reviews__card[hidden] { min-height: 0 !important; }
.spw-reviews .spw-reviews__text { margin-bottom: 14px !important; }
.spw-reviews .spw-reviews__head { justify-content: flex-start !important; padding-right: 44px !important; }
/* reviews: 4.9 rating line under the heading (Matt, 3 Nov 2026) */
.spw-reviews .spw-reviews__summary { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 14px 0 6px; }
.spw-reviews .spw-reviews__summary .spw-stars { font-size: 26px; line-height: 1; letter-spacing: 1px; }
.spw-reviews .spw-reviews__summary strong { font: 800 20px/1 Roboto, Arial, sans-serif; color: #111; }
@media (max-width: 768px) { .spw-reviews .spw-reviews__summary .spw-stars { font-size: 22px; } .spw-reviews .spw-reviews__summary strong { font-size: 18px; } }

/* Standard vs Premium Acrylic compare (Matt, 5 Nov 2026): small "Compare" link by the Plate material label opens a
   side-by-side panel - popover under the material buttons on desktop, bottom sheet on phones. Never opens by itself. */
#builder-material { position: relative; }
.spw-cmp-link {
  display: inline-flex; align-items: center; gap: 4px; margin-left: 10px; padding: 0; border: 0; background: none;
  font: 600 12px/1 Roboto, Arial, sans-serif; color: #5f6368; text-transform: none; letter-spacing: 0; cursor: pointer;
  vertical-align: 1px; text-decoration: underline; text-decoration-color: #c4c8ce; text-underline-offset: 3px;
}
.spw-cmp-link:hover, .spw-cmp-link:focus-visible { color: #111; text-decoration-color: #111; }
.spw-cmp-link svg { width: 14px; height: 14px; flex: 0 0 14px; }
.spw-cmp { display: none; }
.spw-cmp.is-open { display: block; }
.spw-cmp__card {
  background: #fff; border-radius: 14px; box-shadow: 0 18px 50px rgba(17,24,39,.22), 0 2px 6px rgba(17,24,39,.08);
  padding: 16px 16px 14px; box-sizing: border-box; font-family: Roboto, Arial, sans-serif; color: #111;
}
.spw-cmp__head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 12px; }
.spw-cmp__title { font: 700 15px/1.2 Roboto, Arial, sans-serif; margin: 0; }
.spw-cmp__x { width: 30px; height: 30px; border-radius: 50%; border: 0; background: #f1f3f5; color: #111; font-size: 18px; line-height: 30px; padding: 0; cursor: pointer; }
.spw-cmp__x:hover { background: #e4e7eb; }
.spw-cmp__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.spw-cmp__col { display: flex; flex-direction: column; }
.spw-cmp__img { width: 100%; aspect-ratio: 980 / 545; border-radius: 10px; overflow: hidden; background: #eceef1; }
.spw-cmp__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.spw-cmp__name { font: 700 13px/1.2 Roboto, Arial, sans-serif; text-transform: uppercase; margin: 9px 0 4px; }
.spw-cmp__desc { font: 400 13px/1.45 Roboto, Arial, sans-serif; color: #4b5059; margin: 0 0 10px; flex: 1 1 auto; }
.spw-cmp__btn {
  border-radius: 9px; padding: 10px 8px; font: 700 13px/1.2 Roboto, Arial, sans-serif; cursor: pointer; text-align: center;
  border: 1px solid #d5d8dc; background: #fff; color: #111;
}
.spw-cmp__btn--prem { background: #fd9a01; border-color: #fd9a01; color: #111; }
.spw-cmp__btn.is-current { box-shadow: inset 0 0 0 2px #111; }
.spw-cmp__btn:hover { filter: brightness(.97); }
/* desktop: popover under the material buttons, no backdrop, page doesn't move */
@media (min-width: 769px) {
  .spw-cmp { position: absolute; left: 0; right: 0; top: 100%; margin-top: 10px; z-index: 60; }
  .spw-cmp__card { max-width: 520px; }
  .spw-cmp__card::before { content: ""; position: absolute; top: -7px; left: 140px; width: 14px; height: 14px; background: #fff; transform: rotate(45deg); box-shadow: -2px -2px 4px rgba(17,24,39,.05); }
  .spw-cmp__card { position: relative; }
  .spw-cmp__shade { display: none; }
}
/* phones: bottom sheet over a light shade; builder stays in place behind it */
@media (max-width: 768px) {
  .spw-cmp { position: fixed; inset: 0; z-index: 10050; }
  .spw-cmp__shade { position: absolute; inset: 0; background: rgba(17,24,39,.35); }
  .spw-cmp__card { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 18px 18px 0 0; padding: 14px 14px calc(14px + env(safe-area-inset-bottom)); animation: spwCmpUp .22s ease-out; }
  .spw-cmp__card::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 4px; background: #d5d8dc; margin: -4px auto 10px; }
  .spw-cmp__grid { gap: 10px; }
  .spw-cmp__desc { font-size: 12px; }
  .spw-cmp__btn { font-size: 12px; padding: 11px 6px; }
}
@keyframes spwCmpUp { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .spw-cmp__card { animation: none; } }

#builder-material > strong .spw-cmp-link { font: 600 12px/1 Roboto, Arial, sans-serif !important; color: #5f6368 !important; text-transform: none !important; letter-spacing: 0 !important; }
#builder-material > strong .spw-cmp-link:hover { color: #111 !important; }
.spw-cmp .spw-cmp__title { color: #111 !important; }
.spw-cmp .spw-cmp__name { color: #111 !important; }
/* phones: "What's the difference?" sits centred under the material buttons */
@media (max-width: 768px) {
  #builder-material .spw-cmp-link.is-below { display: flex !important; justify-content: center; margin: 10px auto 0 !important; font: 600 13px/1.2 Roboto, Arial, sans-serif !important; color: #5f6368 !important; text-transform: none !important; }
  #builder-material .spw-cmp-link.is-below svg { width: 15px; height: 15px; flex-basis: 15px; }
}
/* "What's the difference?" under the material buttons on every screen size; desktop panel points up at it */
#builder-material .spw-cmp-link.is-below { display: flex !important; justify-content: center; margin: 10px auto 0 !important; font: 600 13px/1.2 Roboto, Arial, sans-serif !important; color: #5f6368 !important; text-transform: none !important; letter-spacing: 0 !important; }
#builder-material .spw-cmp-link.is-below:hover { color: #111 !important; }
#builder-material .spw-cmp-link.is-below svg { width: 15px; height: 15px; flex-basis: 15px; }
@media (min-width: 769px) { .spw-cmp__card { margin: 0 auto; } .spw-cmp__card::before { left: calc(50% - 7px) !important; } }
/* the "What's the difference?" line (26px) sits inside #builder-material under the buttons, so the Most Popular tag
   (positioned from the bottom of that box) moves up by the same amount to stay on Premium Acrylic */
body #builder.spw-builder-first #premiumplates-builder #builder-material:has(> .spw-cmp-link.is-below) .material-popular-hint { bottom: 72px !important; }
/* desktop (Matt, 5 Nov 2026): "What's the difference?" top right on the label line, above Premium Acrylic */
@media (min-width: 769px) {
  body #builder.spw-builder-first #premiumplates-builder #builder-material .spw-cmp-link.is-top {
    position: absolute !important; top: 0; right: 0; margin: 0 !important; z-index: 3;
    font: 600 12px/1 Roboto, Arial, sans-serif !important; color: #5f6368 !important; text-transform: none !important; letter-spacing: 0 !important;
  }
  body #builder.spw-builder-first #premiumplates-builder #builder-material .spw-cmp-link.is-top:hover { color: #111 !important; }
  body #builder.spw-builder-first #premiumplates-builder #builder-material:has(> .spw-cmp-link.is-top) > strong { margin-bottom: 26px !important; display: block; }
  .spw-cmp__card::before { left: auto !important; right: 60px; }
  .spw-cmp { top: 100%; }
}
/* desktop (Matt, 5 Nov 2026, replaces the top-right spot): straight after PLATE MATERIAL; panel pointer under the link;
   label 6px clear of the upsell arrow */
@media (min-width: 769px) {
  body #builder.spw-builder-first #premiumplates-builder #builder-material > strong .spw-cmp-link.is-inline {
    position: static !important; display: inline-flex !important; margin: 0 0 0 12px !important;
    font: 600 12px/1 Roboto, Arial, sans-serif !important; color: #5f6368 !important; text-transform: none !important; letter-spacing: 0 !important;
  }
  body #builder.spw-builder-first #premiumplates-builder #builder-material > strong .spw-cmp-link.is-inline:hover { color: #111 !important; }
  body #builder.spw-builder-first #premiumplates-builder #builder-material:has(.spw-cmp-link.is-inline) > strong { display: block; margin-bottom: 10px !important; }
  .spw-cmp__card::before { left: var(--spw-cmp-x, 60px) !important; right: auto !important; }
}
@media (min-width: 769px) { #builder #builder-material:has(.spw-cmp-link.is-inline) .scroll-pane::before { top: -23px; } }
/* upsell arrow over the buttons, centred on the gap between Standard and Premium Acrylic (Matt, 5 Nov 2026);
   pointer-events stay off so both buttons are still clickable underneath; white halo so it reads on the orange */
#builder #builder-material .scroll-pane::before,
#builder #builder-material:has(.spw-cmp-link.is-inline) .scroll-pane::before {
  top: calc(50% - 22px) !important; left: calc(50% - 38px) !important; width: 76px !important; height: 40px !important;
  pointer-events: none !important; z-index: 4 !important;
  filter: drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1px #fff);
}
@media (max-width: 380px) {
  #builder #builder-material .scroll-pane::before { top: calc(50% - 18px) !important; left: calc(50% - 32px) !important; width: 64px !important; height: 34px !important; }
}

/* "What's the difference?" on the same baseline as PLATE MATERIAL (Matt, 5 Nov 2026) */
@media (min-width: 769px) {
  body #builder.spw-builder-first #premiumplates-builder #builder-material > strong .spw-cmp-link.is-inline {
    display: inline !important; vertical-align: baseline !important; line-height: inherit !important; font-size: 12px !important;
  }
  body #builder.spw-builder-first #premiumplates-builder #builder-material > strong .spw-cmp-link.is-inline svg {
    display: inline-block; width: 13px; height: 13px; vertical-align: -2px; margin-right: 4px;
  }
}

/* TDM check 14 (Matt, 8 Nov 2026): phone menu didn't show once scrolled - the pinned header had overflow:auto
   (deploy 198), which clipped #mobileMenu hanging below it. Header shows its menu; the menu scrolls itself. */
@media (max-width: 768px) {
  header.header-mobile.spw-hdr-pinned { max-height: none !important; overflow: visible !important; }
  header.header-mobile.spw-hdr-pinned #mobileMenu.show { max-height: calc(100vh - 120px); max-height: calc(100dvh - 120px); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
}

/* TDM check 14 (Matt, 8 Nov 2026): no other brands' photos on SPW (Google can link the sites). New SPW-style photos
   (orange car / lightning set, made with AI on the BD fal account, lettering checked) replace the N1P REGULAR garage
   (Number Plate Maker), both N1P 3D Gel close-ups, the N1P 4D garage and the PP 4D smoke shots. */
main.spw-live .number-plate-img-2 { background-image: url('/assets/showplatesworld/images/opt/sec2-regular-900.webp') !important; }
.plate-3d-img-1 { background-image: url('/assets/showplatesworld/images/opt/sec2-3dgel-close-900.webp') !important; }
.plate-3d-img-2 { background-image: url('/assets/showplatesworld/images/opt/sec2-3dgel-pair-900.webp') !important; }
.page-4d-img-1 { background-image: url('/assets/showplatesworld/images/opt/sec2-4d-close-900.webp') !important; }
.page-4d-img-2 { background-image: url('/assets/showplatesworld/images/opt/sec2-4d-pair-900.webp') !important; }
@media (max-width: 768px) {
  main.spw-live .number-plate-img-2 { background-image: url('/assets/showplatesworld/images/opt/sec2-regular-600.webp') !important; }
  .plate-3d-img-1 { background-image: url('/assets/showplatesworld/images/opt/sec2-3dgel-close-600.webp') !important; }
  .plate-3d-img-2 { background-image: url('/assets/showplatesworld/images/opt/sec2-3dgel-pair-600.webp') !important; }
  .page-4d-img-1 { background-image: url('/assets/showplatesworld/images/opt/sec2-4d-close-600.webp') !important; }
  .page-4d-img-2 { background-image: url('/assets/showplatesworld/images/opt/sec2-4d-pair-600.webp') !important; }
}
@media (min-width: 769px) {
  .plate-3d-img-1, .plate-3d-img-2 { aspect-ratio: 1 / 1; height: auto !important; min-height: 0 !important; align-self: start; background-size: cover !important; background-position: center !important; }
}