.page-title-full-width-container .breadcrumb { right: 60px; left: auto; } 

#page-title { text-align:  left } 

#page-title .page-title { height:  120px } 

.page-title-full-width-container:after { opacity:  1 } 

.page-title-full-width-container:after { background-position: center center; }

.dxpr-theme-boxed-container { background: #ffffff; }

.dxpr-theme-boxed-container .nav-tabs >li.active a { border-bottom-color: #ffffff; }

.dxpr-theme-boxed-container .tabs-left > .nav-tabs .active>a { border-right-color: #ffffff; }

.dxpr-theme-boxed-container .tabs-right > .nav-tabs .active>a { border-left-color: #ffffff; }

.container {
  max-width: 1280px;
  padding-left: 60px;
  padding-right: 60px;
}
.navbar-container.dxpr-theme-fluid,
.page-title-container.dxpr-theme-fluid,
.container-fluid {
  padding-left: 15px;
  padding-right: 15px;
}
.dxpr-theme-boxed-container {
  max-width: 1580px;
}
.row {
  margin-left: -15px;
  margin-right: -15px;
}
.row > * {
  padding-left: 15px;
  padding-right: 15px;
  margin-bottom: 30px;
}
.region-sidebar-first .block,
.region-sidebar-second .block,
.dxpr-theme-util-gutter-bottom {
  margin-bottom: 30px;
}
.page-title-full-width-container {
  margin-bottom: 30px;
}
@media screen and (max-width: 1200px) {
  .container {
    padding-left: 15px;
    padding-right: 15px;
  }
  .navbar-container.dxpr-theme-fluid,
  .page-title-container.dxpr-theme-fluid,
  .container-fluid {
    padding-left: 15px;
    padding-right: 15px;
  }
  .row {
    margin-left: -15px;
    margin-right: -15px;
  }
  .row > * {
    padding-left: 15px;
    padding-right: 15px;
  }
}
body { background-position: center center; }

body { background-attachment: fixed; }

  #dxpr-theme-main-menu,
  #dxpr-theme-main-menu .menu__breadcrumbs,
  #dxpr-theme-main-menu .menu__level {
    text-align: left;
  }
.body--dxpr-theme-nav-desktop.body--dxpr-theme-header-side #navbar.dxpr-theme-header {
  text-align: left;
}
html.js .body--dxpr-theme-nav-desktop.body--dxpr-theme-header-side {
  padding-left: calc(300px + var(--gin-toolbar-x-offset, 256px));
}
.body--dxpr-theme-nav-desktop .dxpr-theme-header--side,
.body--dxpr-theme-nav-mobile .dxpr-theme-header--side #dxpr-theme-main-menu,
.dxpr-theme-header--side .menu__level {
  width: 300px;
}

.body--dxpr-theme-nav-desktop #navbar.dxpr-theme-header--top {
  background-color: rgba(45,45,45,1);
  opacity: 1;
}
.body--dxpr-theme-nav-desktop #navbar.dxpr-theme-header--top.affix {
  background-color: rgba(45,45,45,1);
  opacity: 1;
}

.body--dxpr-theme-nav-desktop .dxpr-theme-header--top .nav > li > a,
.body--dxpr-theme-nav-desktop .dxpr-theme-header--top .nav > li > span,
.body--dxpr-theme-nav-desktop .dxpr-theme-header--top .wrap-branding,
.body--dxpr-theme-nav-desktop .dxpr-theme-header--top .block-dxpr-theme-helper {
  height: 100px;
  line-height: 100px;
}
.body--dxpr-theme-nav-desktop .dxpr-theme-header--top .dxpr-theme-main-menu {
  height: 100px;
}
.body--dxpr-theme-nav-desktop .dxpr-theme-header--top.affix .nav > li > a,
.body--dxpr-theme-nav-desktop .dxpr-theme-header--top.affix .nav > li > span,
.body--dxpr-theme-nav-desktop .dxpr-theme-header--top.affix .navbar-header .wrap-branding,
.body--dxpr-theme-nav-desktop .dxpr-theme-header--top.affix .block-dxpr-theme-helper  {
  height: 50px;
  line-height: 50px;
}
.body--dxpr-theme-nav-desktop .dxpr-theme-header--top.affix .dxpr-theme-main-menu {
  height: 50px;
}
.body--dxpr-theme-nav-desktop .nav-child-fixed-width {
  top: 100px;
}
.body--dxpr-theme-nav-desktop .dxpr-theme-header--top.affix .nav-child-fixed-width {
  top: 50;
}
html.js .body--dxpr-theme-nav-desktop.gin--vertical-toolbar.toolbar-fixed.toolbar-horizontal.body--dxpr-theme-header-fixed.body--dxpr-theme-header-top {
  padding-top: 100px !important;
}
.body--dxpr-theme-nav-desktop.body--dxpr-theme-header-fixed.body--dxpr-theme-header-not-overlay { padding-top: 100px !important }

  html.js .body--dxpr-theme-nav-desktop.toolbar-fixed.toolbar-horizontal.body--dxpr-theme-header-fixed.body--dxpr-theme-header-not-overlay { padding-top: 139px !important }

  html.js .body--dxpr-theme-nav-desktop.toolbar-fixed.toolbar-horizontal.toolbar-tray-open.toolbar-horizontal.body--dxpr-theme-header-fixed.body--dxpr-theme-header-not-overlay { padding-top: 180px !important }

.body--dxpr-theme-nav-mobile .dxpr-theme-header .navbar-header .wrap-branding,
.body--dxpr-theme-nav-mobile .dxpr-theme-header .navbar-toggle {
  height: 60px;
}
.body--dxpr-theme-nav-mobile .dxpr-theme-header .block-dxpr-theme-helper {
  height: 60px;
  line-height: 60px;
}
.html--dxpr-theme-sticky-footer .body--dxpr-theme-nav-desktop .dxpr-theme-header--top {
  min-height: 100px;
}
.html--dxpr-theme-sticky-footer .body--dxpr-theme-nav-desktop .dxpr-theme-header--top.affix {
  min-height: 50px;
}
.html--dxpr-theme-sticky-footer .body--dxpr-theme-nav-mobile .dxpr-theme-header {
  min-height: 60px;
}
.html--dxpr-theme-sticky-footer .body--dxpr-theme-nav-mobile .dxpr-theme-header.affix {
  min-height: 60px;
}
.dropdown-menu, .dropdown-menu li {
  min-width: 160px;
}
.dxpr-theme-header .menu a {
  text-transform: uppercase;
}
#navbar.dxpr-theme-header--top .menu, #navbar.dxpr-theme-header--top .menu a { color: #fff }

@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;700&family=Montserrat:wght@600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;700&family=Montserrat:wght@600;700&family=JetBrains+Mono:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;700&family=Montserrat:wght@600;700&family=JetBrains+Mono:wght@500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;700&family=Montserrat:wght@600;700&family=JetBrains+Mono:wght@500;700&display=swap');

.classifieds-listings {
  font-size: 20px;
  color: black;
}

@media (min-width: 768px) {
  .classifieds-listings {
    vertical-align: bottom; 
  }
}

.classifieds-listings-header {
font-size: 30px;
font-weight: bold;
color: black;
align: bottom;
}

.fun-box {
    border-top: none;
    border: solid 2px #706858;
    border-radius: 15px 15px 15px 15px;
    background-color: #F5F5F5;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
    margin-bottom: 15px;
    margin-top: 15px;
    margin-left: 15px;
    margin-right: 15px;
    padding: 10px 10px 10px 10px;
}

.regionz {
    border-top: none;
    border: solid 2px #706858;
    border-radius: 15px 15px 15px 15px;
    background-color: #F5F5F5;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
    margin-bottom: 15px;
    margin-top: 15px;
    padding: 10px 10px 10px 10px;
}

.classifieds-title {
font-weight: bold;
font-size: 30px;
text-align: center;
padding-bottom: 30px 
}

.center { 
text-align: center !important;
align: center !important;
}

.left { 
text-align: left !important;
align: left !important;
}

.right { 
position: relative;
text-align: right !important;
align: right !important;
float: right;
}

.classifieds-selling-options {
display: inline-block;
float: right;
margin-right: 10px;
font-size: 15px;
margin-top: 2px;
font-weight: bold;
color: black;
}

/* views-view-responsive-grid__item is stoopid, but cannot get another  css code in per item on View */

.views-view-responsive-grid__item {
    margin-top: 12px;
    margin-right: 10px;
    border: solid 2px black;  
    border-radius: 15px 15px 15px 15px;
    background-color: #FFF;
}

.listing-text {
height: 55px;
line-height: 1.2em;
display: block;
padding-left: 10px;
padding-right: 10px;
font-size: 16px;
color: black;
}

.black {
color: black;
}

.white {
color: white;
}

.breadcrumbz {
  padding-left: 10px;
 padding-top: 10px;
 padding-bottom: 10px;
  font-size: 17px;
  display: block;
}

.save-search-box {
border:1px solid #3a6e8c;
border-radius: 20px 20px 20px 20px;
background-color: #ededed;
align: center;
padding-left: 10px;
margin-top: 15px;
}

#block-dxpr-theme-anonymoussavedsearch {
border:1px solid #3a6e8c;
border-radius: 20px 20px 20px 20px;
background-color: green;
align: center;
padding-left: 10px;
margin-top: 15px;
margin-bottom: 15px;
}


.region-footer {
align: center !important;
}

.accountmenu {
margin-top: 30px;
margin-bottom: 30px;
width: 98%;
text-align: center;
display: inline-block;
position: relative;
}

.publishbutton {
 margin: 5px;
  position: relative;
  text-decoration: none;
  display: inline-block;
  vertical-align: middle;
  width: 120px;
  height: 40px;
  border: 2px solid #505ac7;
  border-radius: 4px 4px 4px 4px;
  background-color: #505ac7;
  box-shadow: 0px 0px 2px 0px #333333;
  color: #505ac7;
  font-family: Tahoma;
  font-size: 15px;
  text-align: center;
  font-style: normal;
  font-weight: normal;
  line-height: 1em;
}

.classifiedsactionbutton {
 margin: 5px !important;
  position: relative !important;
  text-decoration: none !important;
  display: inline-block !important;
  vertical-align: middle !important;
  width: 120px !important;
  height: 40px !important;
  border: 2px solid #505ac7 !important;
  border-radius: 4px 4px 4px 4px !important;
  background-color: #505ac7 !important;
  box-shadow: 0px 0px 2px 0px #333333 !important;
}
.classifiedsactionbutton:hover {
  border-color: #505ac7 !important;
  background-color: white !important;
  box-shadow: 0px 0px 2px 0px #333333 !important;
}
.classifiedsactionbutton .mb-text {
  color: #ffffff !important;
  font-family: Tahoma !important;
  font-size: 15px !important;
  text-align: center !important;
  font-style: normal !important;
  font-weight: normal !important;
  line-height: 1em !important;
  box-sizing: border-box !important;
  display: block !important;
  background-color: unset !important;
  position: relative !important;
  padding: 10px 0px 0px 0px !important;
  text-shadow: 0px 0px 0px #505ac7 !important;
}
.classifiedsactionbutton:hover .mb-text {
  color: #505ac7 !important;
  text-shadow: 0px 0px 0px #333333 !important;
}

.classifiedsactionbuttonactive {
 margin: 5px !important;
  position: relative !important;
  text-decoration: none !important;
  display: inline-block !important;
  vertical-align: middle !important;
  width: 120px !important;
  height: 40px !important;
  border: 2px solid #505ac7 !important;
  border-radius: 4px 4px 4px 4px !important;
  background-color: white !important;
  box-shadow: 0px 0px 2px 0px #333333 !important;
}

.classifiedsactionbuttonactive .mb-text {
  color: #505ac7 !important;
  font-family: Tahoma !important;
  font-size: 15px !important;
  text-align: center !important;
  font-style: normal !important;
  font-weight: normal !important;
  line-height: 1em !important;
  box-sizing: border-box !important;
  display: block !important;
  background-color: unset !important;
  position: relative !important;
  padding: 10px 0px 0px 0px !important;
  text-shadow: 0px 0px 0px #505ac7 !important;
}

.ad-small img { 
border-radius: 13px 13px 13px 13px;
}

.ad-small img:hover { 
opacity: 0.7;
}

.roundedtop img { 
z-index: 1;
border-radius: 13px 13px 0px 0px;
}

.roundedtop img:hover { 
z-index: 1;
opacity: 0.7;
}

.ad-big img { 
border: 3px solid #000000;
border-radius: 16px;
}

.ad-big img:hover { 
opacity: 0.7;
}

/* detailz not working, need to align the ad details to bottom   */

.detailz {
vertical-align: bottom;
text-align: bottom
}

.layout__region--second {
vertical-align: text-bottom;
vertical-align: bottom;
}

.custom-left, .custom-right{
  float: left;
  display: inline-block !important;
}

/* background for entire site   */
.dxpr-theme-boxed-container {
background-color: #fff;
}

.classic-vehicle-for-sale-title a {
display: block !important;
font-size: 22px; !important;
font-weight: bold;
margin-left: auto !important;
margin-right: auto !important;
text-align: center !important;
align: center  !important;
padding-left: 10px;
padding-right: 10px;
margin-top: 10px;
line-height: 1.2;
height: 50px !important;
-webkit-box-decoration-break: clone;
color: #05696B !important;
}

.classic-vehicle-for-sale-title-smaller a {
display: block !important;
font-size: 19px; !important;
font-weight: bold;
margin-left: auto !important;
margin-right: auto !important;
text-align: center !important;
align: center  !important;
padding-left: 10px;
padding-right: 10px;
margin-top: 7px;
line-height: 1;
height: 37px !important;
-webkit-box-decoration-break: clone;
color: #05696B !important;
}

.classic-vehicle-for-sale-title-even-smaller a {
display: block !important;
font-size: 16px; !important;
font-weight: bold;
margin-left: auto !important;
margin-right: auto !important;
text-align: center !important;
align: center  !important;
padding-left: 10px;
padding-right: 10px;
margin-top: 7px;
line-height: 1;
height: 37px !important;
-webkit-box-decoration-break: clone;
color: #05696B !important;
}

.favs-classifieds {
z-index: 3;
position: relative;
align: right;
float : right;
margin-top: -42px;
margin-right: 3px;
background-color: white;
border-radius: 50px;
padding: 1px;
border: 1px solid #000000;
}

.favs-classifieds-nonsapi {
z-index: 3;
position: relative;
align: right;
float : right;
margin-top: -52px;
margin-right: 3px;
background-color: white;
border-radius: 50px;
padding: 1px;
border: 1px solid #000000;
}

.image-style-dealership-logo-small {
z-index: 2;
position: relative;
margin-top: -40px;
margin-left: 5px;
align: left;
float: left;
}

.listing-address {
text-align: center;
margin-top: 34px;
margin-bottom: 2px;
font-size: 18px;
font-weight: bold;
color: black;
}

.view-display-id-featured {
background-color: #3a6e8c;
margin-bottom: 20px;
padding: 20px;
border: solid 2px #706858;
border-radius: 15px 15px 15px 15px;
}

.featured-title a {
display: block !important;
font-size: 17px; !important;
margin-left: auto !important;
margin-right: auto !important;
text-align: center !important;
align: center  !important;
color: #10b4b7 !important;
margin-top: 10px;
}


.featured-address {
text-align: center;
align: center;
color: black;
}

.main_blog_image { 
position: relative;
text-align: right !important;
align: right !important;
float: right;
margin-left: 10px;
margin-bottom: 10px;
border: solid 2px black; 
}

.paragraph--type--blog { 
border: solid 2px #706858;
border-radius: 15px 15px 15px 15px;
margin-top: 20px;
padding: 20px;
min-height: 230px;
}

.field--name-field-image {
margin-left: 15px;
margin-bottom: 15px;
margin-right: 15px;
}

h1.pagetitle {
align: center;
text-align: center;
font-weight: bold;
font-size: 32px;
margin-bottom: 40px;
}

.blog-taxonomy-image {
margin-right: 20px;
margin-left: 20px;
float: left;
}

.homepagetest {
    border-top: none;
    border: solid 2px #706858;
    border-radius: 8px 8px 8px 8px;
    background-color: #538795;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
    padding: 10px 10px 10px 10px;
    margin-right: 10px;
}
.signuplink { 
text-align: right;
align: right;
float: right;
margin-right: 50px;
font-size: 16px;
font-weight: bold;
}

.loginlink { 
text-align: right;
align: right;
float: right;
margin-right: 50px;
font-size: 16px;
font-weight: bold;
}

.ad-button {
 margin: 5px !important;
  position: relative !important;
  text-decoration: none !important;
  display: inline-block !important;
  vertical-align: middle !important;
  width: 170px !important;
  height: 50px !important;
  border: 2px solid #505ac7 !important;
  border-radius: 4px 4px 4px 4px !important;
  background-color: #505ac7 !important;
  box-shadow: 0px 0px 2px 0px #333333 !important;
}
.ad-button:hover {
  border-color: #505ac7 !important;
  background-color: white !important;
  box-shadow: 0px 0px 2px 0px #333333 !important;
}
.ad-button .mb-text {
  color: #ffffff !important;
  font-family: Tahoma !important;
  font-size: 17px !important;
  text-align: center !important;
  font-style: normal !important;
  font-weight: normal !important;
  line-height: 1em !important;
  box-sizing: border-box !important;
  display: block !important;
  background-color: unset !important;
  position: relative !important;
  padding: 10px 0px 0px 0px !important;
  text-shadow: 0px 0px 0px #505ac7 !important;
}
.ad-button:hover .mb-text {
  color: #505ac7 !important;
  text-shadow: 0px 0px 0px #333333 !important;
}

.ui-widget-content {
background-color: white !important;
}

.adfavs {
text-align: center !important;
align: center !important;
background-color: #505ac7;
width: 170px;
height: 50px;
border: 2px solid #505ac7;
border-radius: 4px 4px 4px 4px;
padding-top: 7px;
margin: auto;
margin-top: 4px;
}

.block-title {
margin-left: 20px;
margin-top: 10px;
font-weight: bold;
}

.views-table-image {
width: 100px !important;
}

.page-title {
align: center;
text-align: center;
}






.simplesearch {
display: inline-block !important;
margin: auto !important;
text-align: center !important;
align: center !important;
display: flex;
flex-wrap: wrap;
margin: auto;
width: 99%;
display: block;
position: relative;
flex-wrap: wrap;
}

.advsearch {
margin-right: 40px;
margin-top: -40px;
float: right;
}

.form_wrapper_outer  {
width: 385px;
display: block !important;
margin: auto !important;
position: relative !important;
}

.form_wrapper_inline  {
width: 385px;
display: inline-block !important;
margin: auto !important;
position: relative !important;
}

.form_wrapper_price  {
width: 200px;
display: inline-block !important;
margin: auto !important;
position: relative !important;
}

.form_wrapper_year  {
width: 180px;
display: inline-block !important;
margin: auto !important;
position: relative !important;
}

.form_wrapper_wide  {
width: 380px;
display: inline-block !important;
margin-top: -30px;
position: relative !important;
}

#edit-year-min, #edit-year-min--2, #edit-year-max, #edit-year-max--2 {
margin: auto !important;
width: 70px;
border:1px solid black;
background-color: white;
font-size: 19px;
}

#edit-price-min, #edit-price-max, #edit-price-min--2, #edit-price-max--2 {
margin: auto !important;
width: 88px;
border:1px solid black;
background-color: white;
font-size: 19px;
}

#edit-sort-by, #edit-sort-order, #edit-sort-by--2, #edit-sort-order--2 {
margin: auto !important;
border: 1px solid black;
background-color: white;
width: 125px;
font-size: 19px;
}

.form-item-mfr-model {
align: center !important;
text-align: center !important;
clear: both !important;
display: block !important;
flex-wrap: wrap !important;
margin: auto !important;
position: relative !important;
}

label[for=edit-mfr-model--level-0], label[for=edit-mfr-model--level-1], label[for=edit-mfr-model--level-2], label[for=edit-mfr-model-target-id--level-0], label[for=edit-mfr-model-target-id--level-1], label[for=edit-mfr-model-target-id--level-2] {
font-weight: bold;
}

#edit-latlon-value--description, #edit-latlon-source-configuration-origin-address--description {
font-weight: bold;
}

label[for=edit-sort-by], label[for=edit-sort-order] {
font-weight: bold;
margin-top:-20px;
}

label[for=edit-year-min--2], label[for=edit-year-max--2], label[for=edit-price-min--2], label[for=edit-price-max--2], label[for=edit-year-min], label[for=edit-year-max], label[for=edit-price-min], label[for=edit-price-max], label[for=edit-fulltext], label[for=edit-adtype-classifieds], label[for=edit-adtype-dealer-ad], label[for=edit-sort-by--2], label[for=edit-sort-order--2], label[for=edit-latlon-value], label[for=edit-latlon-source-configuration-origin-address]  {
color: #000 !important;
font-weight: bold;
}

.field-prefix {
color: #000 !important;
font-weight: bold;
}

.form-item-year-min, .form-item-year-max {
width: 78px;
margin: auto !important;
position: relative !important;
display: inline-block !important;
padding-right: 10px;
}

.form-item-price-min, .form-item-price-max {
width: 95px;
margin: auto !important;
position: relative !important;
display: inline-block !important;
padding-right: 10px;
}

#edit-mfr-model-target-id--level-0, #edit-mfr-model-target-id--level-1, #edit-mfr-model-target-id--level-2, #edit-mfr-model--level-0, #edit-mfr-model--level-1, #edit-mfr-model--level-2 {
border:1px solid black;
background-color: white;
display: flex;
flex-wrap: wrap;
margin: auto;
display: block;
position: relative;
font-size: 19px;
}

#exposed-header {
font-size: 20px;
font-weight: bold;
margin-top: 20px;
margin-bottom: -30px;
}

#edit-fulltext {
border:1px solid black;
background-color: white;
font-size: 19px;
width: 85%;
margin: auto;
}


#edit-latlon-distance-from, #edit-latlon-value, #edit-latlon-source-configuration-origin-address {
display: inline-block !important;
border:1px solid black;
background-color: white;
width: 110px;
font-size: 19px;
}

#edit-latlon-source-configuration {
width: 120px;
}

.form-item-latlon-distance-from {
display: inline-block !important;
width: 120px;
}

.form-item-latlon-value {
display: inline-block !important;
width: 112px;
}



#edit-latlon-wrapper {
width: 378px;
display: inline-block;
margin-left: auto;
margin-right: auto;
position: relative !important;
margin-top: -40px !important;
margin-top: -20px !important;
}

#edit-adtype--wrapper{
margin: auto !important;
align: center !;
text-align !important: center;
}

.inline {
display: block;
clear: both;
}

.edit-latlon {
height: 150px !important;
width: 380px;
display: inline-block;
}

.form-item-latlon-source-configuration-origin-address {
display: inline-block;
width: 120px;
}

.form_wrapper_latlonadv  {
width: 385px;
display: inline-block !important;
margin: auto !important;
position: relative !important;
}

#edit-latlon {
width: 250px;
display: flex !important;
flex-direction: row !important;
}

@media (max-width: 480px) {
  .block-system-menu-blockclassifieds-mobile, .block-system-menu-blockclassic-car-buyers-guidez {
    display: none;
  }
}



.block-views-blocksaved-searches-saved-searches-search-block {
border: solid 2px #706858;
margin-right: 5px;
padding: 5px;
}

.more-link a {
float: left;
position: relative;
margin-left: 20px;
font-size: 22px;
font-weight: bold;
text-color: #000;
color: #000;
}

.js-vbo-checkbox {
border-color: #000 !important;
border: solid 2px !important;
}

.withvideo {
background:url(/withvideo.png) no-repeat scroll right 1px transparent;
}

.buyersguidepagination {
display: inline-block;
position: relative !important;
}

div.correctfont, p.correctfont, li.correctfont {
  /* 1rem = 16px. 1.125rem = 18px */
  font-family: 'Inter', sans-serif;
  font-size: 1.125rem; 
  
  /* Crucial for mobile readability */
  line-height: 1.6; 
  color: #333; /* Never use pure black (#000) on white; it causes eye strain */
margin-top: 10px;
margin-bottom: 10px;
margin-left: 13px;
}

#block-dxpr-theme-classifieds {
margin-top: 20px;
}

.text-full, .form-number, .form-select, .form-text, .form-tel {
border-color: #000 !important;
border: solid 1px !important;
}

.form-required {
font-weight: bold;
font-size: 18px;
}

label[for=edit-field-miles-0-value], label[for=edit-field-classifieds-telephone-0-value], label[for=edit-field-classifieds-phone-display], label[for=edit-field-youtube-video-0-input], label[for=edit-field-vin-number-0-value], label[for=edit-body-0-value], label[for=edit-field-stock-number-0-value] {
font-weight: bold;
font-size: 18px;
}

.node-classifieds-edit-form {
text-align: left !important;
}


#edit-label-0-value, #edit-mail-0-value {
border:1px solid black;
background-color: white;
}

.ebaythumb img {
aspect-ratio: 100/68;
width: 100%;
object-fit: cover;
}

h2.blog {
margin-top: 30px;
margin-bottom: 2px;
font-weight: bold;
font-size: 28px;
}

h3.blog {
margin-top: 30px;
margin-bottom: 2px;
font-weight: bold;
font-size: 22px;
}

.modelyears {
color: black;
font-size: 18px;
}


/* NEW STYLES FOR ENTIRE THEME 2025 */


 h3.ad-titles-large a {
background-color:  #565656;
display: block !important;
font-weight: bold !important;
margin-left: auto !important;
margin-right: auto !important;
text-align: center !important;
align: center  !important;
padding-left: 10px !important;
padding-right: 10px !important;
margin-top: 7px !important;
height: 50px !important;
      font-size: .8em !important;
      color: #536872 !important;
margin-top: -40px;
padding-top: -40px;
    }

h2.block-menu-header {
background-color:  #8b2f28;
align: center;
border-radius: 15px 15px 0px 0px;
color: #fff;
font-weight: bold;
margin-bottom: 0px;
margin-top: 15px;
margin-left: 10px;
}

h2.homepage {
display: block;
background-color:  #8b2f28;
align: center;
border-radius: 15px 15px 0px 0px;
color: #fff;
font-weight: bold;
margin-bottom: 0px;
margin-top: 15px;
margin-left: 10px;
padding-top: 12px;
padding-bottom: 12px;
}

h2.nonhomepage {
background-color:  #8b2f28;
align: center;
border-radius: 15px 15px 0px 0px;
color: #fff;
font-weight: bold;
margin-bottom: -30px;
margin-top: 0px;
margin-left: 10px;
padding-top: 12px;
padding-bottom: 12px;
}

h4.moreinfo {
background-color:  #f9a909;
width: 90%;
align: center;
border-radius: 15px 15px 15px 15px;
font-weight: bold;
font-size: 28px;
padding: 7px;
margin-top: 20px;
margin-bottom: 15px;
}

h4.finduson {
background-color:  #2eba80;
width: 90%;
align: center;
border-radius: 15px 15px 15px 15px;
font-weight: bold;
font-size: 28px;
padding: 7px;
margin-top: 20px;
margin-bottom: 15px;
}

h4.adsbycat {
background-color:  #eb5c40;
width: 90%;
align: center;
border-radius: 15px 15px 15px 15px;
font-weight: bold;
font-size: 28px;
padding: 7px;
margin-top: 20px;
margin-bottom: 15px;
}

h4.adsbytype {
background-color:  #4298b5;
width: 90%;
align: center;
border-radius: 15px 15px 15px 15px;
font-weight: bold;
font-size: 28px;
padding: 7px;
margin-top: 20px;
margin-bottom: 15px;
}


.block-system-menu-blockclassifieds, .block-system-menu-blockclassic-car-buyers-guide {
border-radius: 0px 0px 15px 15px;
background-color:  #2d2d2d;
margin-left: 10px;
}

.footerlinks {
font-size: 19px;
margin-left:  35px;
}

h2.adheaders {
background-color:  #8b2f28;
color:  white;
align: center;
border-radius: 15px 15px 15px 15px;
border: solid 3px #2d2d2d;
font-weight: bold;
font-size: 28px;
padding: 10px;
margin-top: 60px;
margin-bottom: 5px;
}




.three-dash a {
color:  red;
}



h1.homepage {
align: center;
margin-top: 65px;
color: green;
text-align: center !important;
align: center !important;
}

.modelyears {
color: black;
font-size: 18px;
}

.ViewsJumpMenu {
font-weight: bold;
font-size: 20px;
border: 2px solid black !important;
}

h1.classifieds-title {
text-align: center;
padding-bottom: 30px;
margin-top 65px;
color: #2d2d2d;
font-family: "Source Sans Pro Light", "Source Sans Pro";
font-weight: 500;
font-style: normal;
font-size: 55px;
}

/* REDO OF ENTIRE THEME 2025 */

.classic-vehicle-for-sale-title-smallerZ a {
font-family: "Cursive";
display: block !important;
font-size: 19px; !important;
font-weight: bold;
margin-left: auto !important;
margin-right: auto !important;
text-align: center !important;
align: center  !important;
padding-left: 10px;
padding-right: 10px;
margin-top: 7px;
line-height: 1;
height: 37px !important;
-webkit-box-decoration-break: clone;
color: #536872 !important;
background-color:  #FAF9F6;
}

.filter-sort-classifieds {
border:2px solid #8b2f28;
border-radius: 20px 20px 20px 20px;
background-color: #e1e4e6;
align: center;
padding-left: auto;
padding-right: auto;
margin-left: auto;
margin-right: auto;
}

.active, .active a {
background-color: #536872;
font-weight: bold !important;
}

.navbar-container {
border-bottom: 6px solid #8b2f28;
}

.featured-price {
text-align: center;
color: #8b2f28;
}

.price {
font-size: 21px;
font-weight: bold;
padding-left: 10px;
color: #8b2f28;
}

.price-smaller {
display: inline-block;
float: left;
margin-left: 10px;
font-size: 18px;
font-weight: bold;
color: #8b2f28;
}

.parent_link, .nav-link a, .nav-item a, .dropdown-toggle {
font-weight: bold !important;
text-color: white !important;
color: white !important;
font-size: 17px !important;
}

#block-dxpr-theme-copyrightfooter {
margin: auto !important;
padding-top: 20px;
}

.accountbutton {
 margin: 5px;
  text-decoration: none;
  display: inline-block;
  position: relative;
  vertical-align: middle;
  width: 120px;
  height: 40px;
  border: 3px solid #8b2f28;
  border-radius: 4px 4px 4px 4px;
  background-color: #2d2d2d;
  box-shadow: 0px 0px 2px 0px #333333;
}
.accountbutton:hover {
  border-color: #2d2d2d;
  background-color: #8b2f28;
  box-shadow: 0px 0px 2px 0px #333333;
}
.accountbutton .mb-text {
  color: #ffffff;
  font-family: Tahoma;
  font-size: 15px;
  text-align: center;
  font-style: normal;
  font-weight: normal;
  line-height: 1em;
  box-sizing: border-box;
  display: block;
  background-color: unset;
  position: relative;
  padding: 10px 0px 0px 0px;
  text-shadow: 0px 0px 0px #505ac7;
}
.accountbutton:hover .mb-text {
  color: #fff;
  text-shadow: 0px 0px 0px #333333;
}


.accountbuttonactive {
 margin: 5px;
display: inline-block;
position: relative;
  text-decoration: none;
  vertical-align: middle;
  width: 120px;
  height: 40px;
  border: 2px solid #2d2d2d;
  border-radius: 4px 4px 4px 4px;
  background-color: #8b2f28;
  box-shadow: 0px 0px 2px 0px #333333;
}

.accountbuttonactive .mb-text {
  color: #fff;
  font-family: Tahoma;
  font-size: 15px;
  text-align: center;
  font-style: normal;
  font-weight: normal;
  line-height: 1em;
  box-sizing: border-box;
  display: block;
  background-color: unset;
  position: relative;
  padding: 10px 0px 0px 0px;
  text-shadow: 0px 0px 0px #505ac7;
}

.field--name-field-title a {
font-weight: bold;
font-size: 20px;
margin-bottom: 10px;
color: #8b2f28 !important;
}

.block-system-menu-blockads-by-state {
background-color: #2d2d2d !important;
}

.coloredlink, .coloredlink a, .advsearch , .advsearch a, .create-account-link, .create-account-link a, .request-password-link, .request-password-link a {
color: #2d2d2d !important;
}

.allcaps {
  text-transform: uppercase;
}

.taxonomy_desc {
font-size: 1.2rem;
margin-top: -25px;
margin-left: 25px;
margin-right: 25px;
margin-bottom: 25px;
color:  black;
}

.taxonomy_desc a {
font-size: 1.2rem;
color:  black;
}












/* Model Buyers Guide */
.buyers-guide-intro {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.875rem;
    font-weight: 700;
    color: #111827;
    line-height: 2.25rem;
    margin-bottom: 1.5rem;
    border-left: 8px solid #dc2626;
    padding-left: 1rem;
}

/* The main gray container with the left border */
.callout-box {
    background-color: #f3f4f6;
    padding: 1.5rem;
    border-radius: 0.5rem;
    border-left: 4px solid #9ca3af;
    margin: 2rem 0;
    font-family: 'Roboto Slab', serif;
    color: #374151;
    line-height: 1.5;
}

.callout-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: #111827;
    text-transform: uppercase;
    font-size: 1.875rem;
    margin-top: 0;
    margin-bottom: 0.5rem;
}

.callout-list {
    list-style-type: disc;
    padding-left: 1.25rem;
    font-size: 1rem;
    margin: 0;
}

.callout-list li {
    margin-bottom: 0.5rem;
}

.callout-list li:last-child {
    margin-bottom: 0;
}

.sectioncontainer {
    background: #fff;
    padding-left: 30px 30px 30px 15px;
    margin-bottom: 40px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.style-racing-header {
    display: flex;       
    align-items: center;
    gap: 15px;
    margin-bottom: 0.3rem;
}

.style-racing-header h2 {
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-style: italic;
    font-size: 2.2rem;
    color: #111;
    margin: 0; 
    text-transform: uppercase;
    letter-spacing: -1px;
    line-height: 1.1;
}

.divider-container {
    margin-bottom: 1.5rem;
}

.stripe-primary {
    width: 100%;
    height: 6px;
    background-color: #111; 
    margin-bottom: 3px;
}

.stripe-secondary {
    height: 3px;
    background-color: #c62828; 
}

.racing-circle {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-style: italic;
    font-size: 1.6rem;
    flex-shrink: 0;
}

.circle-black {
    background-color: #111;
    color: #fff;
    border: 3px solid #c62828;
    width: 42px;
    height: 42px;
}

/* --------------------------------------
   COMPACT 2-COLUMN INDEX
   -------------------------------------- */
.compact-index {
    background: #fff;
    padding: 20px 30px;
    margin-bottom: 40px;
    border-top: 4px solid #111;
    border-bottom: 2px solid #111;
}

.index-title {
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-style: italic;
    font-size: 1.4rem;
    color: #111;
    margin-top: 0;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.index-columns {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Forces exactly two equal columns */
    gap: 40px;
}

.index-col {
    /* We remove the min-width and flex rules, Grid handles the sizing perfectly now */
    width: 100%;
}

/* We still want it to stack into 1 column for people reading on small cell phones! */
@media (max-width: 640px) {
    .index-columns {
        grid-template-columns: 1fr; 
        gap: 20px;
    }
}

.index-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.index-list li {
    margin-bottom: 10px;
    border-bottom: 1px dashed #ccc;
    padding-bottom: 8px;
}

.index-list li:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.index-list a {
    text-decoration: none;
    color: #333;
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    transition: color 0.2s ease;
}

.index-list a:hover {
    color: #c62828;
}

.index-num {
    color: #c62828;
    font-weight: 900;
    font-style: italic;
    font-size: 1.4rem;
    width: 25px; 
    flex-shrink: 0;
}

/* Chart Container Rules */
.chart-container {
    position: relative;
    width: 100%;
    max-width: 100%; 
    height: 300px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 2rem;
}

@media (min-width: 768px) {
    .chart-container {
        height: 350px;
    }
}

/* Table Styling */
.riv-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 0.5rem;
    overflow: hidden;
    border: 1px solid #e5e7eb;
}

.riv-table th {
    background-color: var(--color-primary);
    color: white;
    padding: 12px;
    text-align: left;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
}

.riv-table td {
    padding: 12px;
    border-bottom: 1px solid #e5e7eb;
    font-size: 0.95rem;
}

.riv-table tr:last-child td {
    border-bottom: none;
}

.riv-table tr:nth-child(even) {
    background-color: #f3f4f6;
}

/* Sticky Nav */
.sticky-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background-color: rgba(255, 255, 255, 0.98);
    border-bottom: 4px solid var(--color-accent-red);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.racing-circle-problem-list {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-style: italic;
  font-size: 1.6rem;
  flex-shrink: 0;
  background-color: #c62828;
  color: #fff;
}

/* --------------------------------------
   TOP 10 PROBLEM CARDS
   -------------------------------------- */
.problems-list {
  display: flex;
  flex-direction: column;
  gap: 25px;
  padding-left: 20px;
}

.problem-card {
  position: relative;
  background: #fff;
  padding: 20px 25px 20px 45px;
  border-radius: 6px;
  border-left: 4px solid #111;
  box-shadow: 0 3px 10px rgba(0,0,0,0.05);
  transition: transform 0.2s ease;
}

.problem-card:hover {
  transform: translateX(5px); 
  border-left-color: #c62828;
}

.problem-card .racing-circle-problem-list {
  position: absolute;
  left: -24px; 
  top: 50%;
  transform: translateY(-50%);
  border: 4px solid #f4f4f4;
  width: 40px;
  height: 40px;
  font-size: 1.3rem;
}

.problem-card h4 {
  margin: 0 0 8px 0;
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 1.2rem;
  color: #111;
  text-transform: uppercase;
}

.problem-card p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #555;
}

@media (max-width: 500px) {
  .problems-list {
    padding-left: 0;
    gap: 35px;
  }
  .problem-card {
    padding: 35px 20px 20px 20px;
    border-left: none;
    border-top: 4px solid #111;
    text-align: center;
  }
  .problem-card .racing-circle-problem-list {
    left: 50%;
    top: -24px;
    transform: translateX(-50%);
  }
}

/* --------------------------------------
   VINTAGE GLOSSARY LINKS 
   -------------------------------------- */
.glossary-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid #111; 
}

.glossary-item {
  display: flex;
  padding: 25px 0;
  border-bottom: 1px solid #ccc; 
}

.glossary-item:last-child {
  border-bottom: 1px solid #111;
}

.glossary-url-wrapper {
  flex: 0 0 45%;
  padding-right: 30px;
}

.glossary-url {
  font-family: 'Courier New', Courier, monospace; 
  font-size: 1rem;
  font-weight: bold;
  color: #111;
  text-decoration: none;
  border-bottom: 1px solid #111; 
  transition: color 0.2s ease, border-color 0.2s ease;
  word-break: break-all; 
}

.glossary-url:hover {
  color: #c62828;
  border-bottom-color: #c62828;
}

.glossary-desc {
  flex: 1;
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.7;
  color: #555;
}

@media (max-width: 600px) {
  .glossary-item {
    flex-direction: column;
    padding: 20px 0;
  }
  .glossary-url-wrapper {
    margin-bottom: 10px;
    padding-right: 0;
  }
} 

.table-container {
    width: 100%;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    border: 1px solid #e5e7eb;
    font-family: 'Roboto Slab', serif;
    color: #374151;
    margin: 0 auto;
}

.riviera-colors-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.riviera-colors-table thead {
    background-color: #111827;
    color: #ffffff;
}

div.table-container table.riviera-colors-table thead tr th,
div.table-container table.riviera-colors-table thead tr th a,
div.table-container table.riviera-colors-table thead tr th * {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 1rem 1.5rem;
    color: #ffffff !important;
}

.riviera-colors-table td {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e5e7eb;
    vertical-align: middle;
}

.riviera-colors-table tbody tr:last-child td {
    border-bottom: none;
}

.riviera-colors-table tbody tr:nth-child(even) {
    background-color: #f3f4f6;
}

.color-swatch {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: 1px solid rgba(0,0,0,0.15);
    display: block; 
    overflow: hidden; 
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
    border-collapse: separate;
}

.color-cell {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-weight: 700;
}

.code-cell {
    font-family: monospace;
    font-size: 1.05rem;
    color: #4b5563;
}


/* --------------------------------------
   ENGINE SPECS TABLE
   -------------------------------------- */
.engine-specs-wrapper {
    width: 100%;
    margin: 2rem 0;
    background-color: #ffffff;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    /* This is the magic that allows horizontal swiping on phones */
    overflow-x: auto; 
    -webkit-overflow-scrolling: touch; 
}

.engine-specs-table {
    width: 100%;
    /* Forces the table to stay wide enough to read, triggering the scroll on phones */
    min-width: 800px; 
    border-collapse: collapse;
    text-align: left;
    font-family: 'Roboto Slab', serif;
    color: #374151;
}

.engine-specs-table thead {
    background-color: #111827;
}

/* Hyper-specific selector to beat the Drupal theme trap */
div.engine-specs-wrapper table.engine-specs-table thead tr th,
div.engine-specs-wrapper table.engine-specs-table thead tr th * {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 1rem 1.25rem;
    color: #ffffff !important;
    white-space: nowrap; /* Keeps the headers from stacking weirdly */
}

.engine-specs-table td {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e5e7eb;
    vertical-align: middle;
    font-size: 0.95rem;
}

.engine-specs-table tbody tr:last-child td {
    border-bottom: none;
}

.engine-specs-table tbody tr:nth-child(even) {
    background-color: #f3f4f6;
}

/* Highlights the Engine Name column so it stands out */
.engine-specs-table td.engine-name {
    font-weight: 700;
    color: #111827;
    background-color: #f9fafb;
    border-right: 2px solid #e5e7eb;
}

/* Mobile Scrollbar Styling to show it's swipeable */
@media (max-width: 768px) {
    .engine-specs-wrapper::-webkit-scrollbar {
        height: 6px;
    }
    .engine-specs-wrapper::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 0 0 8px 8px;
    }
    .engine-specs-wrapper::-webkit-scrollbar-thumb {
        background: #9ca3af;
        border-radius: 4px;
    }
}




/* 1. Pin the top-left Header Cell */
div.engine-specs-wrapper table.engine-specs-table thead tr th:first-child {
    position: sticky;
    left: 0;
    z-index: 3; /* Keeps it floating above both the rows and the sticky column */
    background-color: #111827; /* Explicitly solid so scrolling text doesn't bleed through */
}

/* 2. Pin the Engine Name column */
.engine-specs-table td.engine-name {
    position: sticky;
    left: 0;
    z-index: 1; 
    background-color: #ffffff; /* Must be solid white to hide the text scrolling behind it */
    
    /* This adds a slick shadow to the right edge, creating a 3D effect 
       that proves the column is floating above the rest of the table */
    box-shadow: 3px 0 6px -3px rgba(0,0,0,0.15); 
}

/* 3. Fix the Zebra Striping for the pinned column */
.engine-specs-table tbody tr:nth-child(even) td.engine-name {
    background-color: #f3f4f6; /* Forces the pinned column to match your alternating gray rows */
}















  /* --------------------------------------
     OPTION 2: THE ASSEMBLY LINE
     -------------------------------------- */
  .assembly-line-wrapper {
    padding-left: 20px;
  }
  .assembly-line-item {
    position: relative;
    padding-left: 40px;
    padding-bottom: 30px;
    border-left: 4px solid #e5e7eb;
  }
  .assembly-line-item:last-child {
    border-left-color: transparent;
  }
  .assembly-marker {
    position: absolute;
    left: -22px;
    top: 0;
    width: 40px;
    height: 40px;
    background-color: #111827;
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: 1.2rem;
    border: 4px solid #f9fafb; /* Matches background to create cutout */
  }
  .assembly-content h4 {
    margin: 5px 0 10px 0;
    font-family: 'Montserrat', sans-serif;
    color: #dc2626;
    font-size: 1.25rem;
    text-transform: uppercase;
    font-weight: 800;
  }
  .assembly-details {
    color: #555;
    line-height: 1.6;
  }
  .assembly-details p { margin-top: 0; }

  /* --------------------------------------
     OPTION 3: THE BIG BLOCK
     -------------------------------------- */
  .big-block-card {
    display: flex;
    gap: 20px;
    margin-bottom: 40px;
    align-items: flex-start;
  }
  .big-block-num {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-style: italic;
    font-size: 4.5rem;
    line-height: 0.8;
    color: #7D7D7D;
    min-width: 60px;
    text-align: right;
    user-select: none;
    margin-right:  10px;
  }
  .big-block-content h4 {
    margin: 0 0 10px 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 1.3rem;
    color: #111827;
    border-bottom: 2px solid #dc2626;
    padding-bottom: 8px;
    display: inline-block;
  }
  .big-block-details {
    color: #4b5563;
    line-height: 1.7;
  }
  .big-block-details p { margin-top: 0; }

  @media (max-width: 500px) {
    .big-block-card {
      flex-direction: column;
      gap: 10px;
    }
    .big-block-num {
      text-align: left;
      font-size: 3.5rem;
    }
  }


/* 1. Initialize the counter on the page (or the parent container) */
body {
  counter-reset: big-block-counter; 
}

/* 2. Tell the card to add +1 to the counter every time a new one appears */
.big-block-card {
  counter-increment: big-block-counter;
}

/* 3. Inject the current number directly into your empty div */
.big-block-num::before {
  content: counter(big-block-counter);
}







        
/* =========================================
   Layout & Background Setup
   ========================================= */
.hero-section {
    position: relative;
    width: 100%;
    height: 350px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0 1.5rem 4rem 1.5rem;
    overflow: hidden; /* Prevents the image from spilling out */
}

/* Make standard image behave like a background */
.hero-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}

/* The dark gradient overlay */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to bottom, rgba(5, 5, 5, 0.1) 0%, rgba(5, 5, 5, 0.6) 100%);
    z-index: 1; 
}

/* =========================================
   Top Navigation
   ========================================= */
.top-bar {
    position: absolute; /* Restored: Keeps it at the very top */
    top: 0;
    left: 0;
    width: 100%;
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    opacity: 0.6;
    z-index: 10; /* Keeps it above the overlay */
}

.nav-text {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    font-weight: 200;
}

/* =========================================
   Main Hero Content & Typography
   ========================================= */
.hero-content {
    position: relative;
    z-index: 10; /* Keeps all text/buttons above the overlay */
    max-width: 56rem;
    width: 100%;
}

/* Centered Red Badge */

.hero-title {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 1;
    margin-bottom: 1rem;
    color: #f9fafb;
}

/* =========================================
   Explore Button Element
   ========================================= */
.explore-btn {
    margin-top: 3rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    opacity: 0.6;
    transition: opacity 0.3s ease;
    cursor: pointer;
    width: max-content;
}

.explore-btn:hover {
    opacity: 1;
}

.explore-line {
    width: 4rem;
    height: 1px;
    background-color: #ffffff;
}

.explore-text {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
}

/* =========================================
   Animations & Media Queries
   ========================================= */
@keyframes slowFade {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade {
    animation: slowFade 1.5s ease-out forwards;
}

@media (min-width: 768px) {
    .hero-section { padding: 0 4rem 3rem 4rem; }
    .top-bar { padding: 2.5rem; }
    .nav-text, .explore-text { font-size: 0.75rem; }
    .hero-subtitle { font-size: 0.875rem; color: #fff;}
    .hero-title { font-size: 2.5rem; }
}

@media (min-width: 1024px) {
    .hero-title { font-size: 4rem; }
}



.hero-badge {
    position: absolute;
    top: 20px; 
    left: 50%;
    transform: translateX(-50%);
    z-index: 50; 
    
    /* 1. THE FIX: Force the text to never wrap to a second line */
    white-space: nowrap;
    width: max-content; 
    
    background-color: #dc2626; 
    color: #ffffff;
    
    /* 2. Slightly tighter padding and font size for mobile screens */
    padding: 0.2rem 0.75rem;
    font-size: 0.65rem; 
    
    border-radius: 9999px;
    font-family: system-ui, -apple-system, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em; /* Slightly tighter letter spacing to save room */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

/* 3. Scale the text and spacing back up for tablets and desktops */
@media (min-width: 640px) {
    .hero-badge {
        font-size: 0.875rem;
        padding: 0.25rem 1rem;
        letter-spacing: 0.1em;
    }
}

 .hero-subtitle {
color: #fff;
}


/* 1. The Container Setup */
.source {
  /* We move the 30px indent to the container. 
     Now, line 1 and line 2 both start at exactly 30px. */
  margin-left: 30px; 
  line-height: 1.5;
}

/* 2. Injects the word before the link */
.source::before {
  content: "Source: "; /* We put the space back in here! */
  font-size: 1.125rem; 
  font-weight: 700;
  color: #470000;
  font-family: 'Montserrat', sans-serif;
}

/* 3. Styles the link itself */
.source a {
  color: #dc2626; /* Timeless Rides red */
  font-size: 1.125rem;
  text-decoration: none;
  
  /* CRITICAL: This allows the URL to snap in half at the edge of the screen 
     and drop straight down to the left edge under the word "Source:" */
  word-break: break-all; 
}

.source a:hover {
  text-decoration: underline;
}



/* --------------------------------------
   1. THE RESPONSIVE SCROLLING WRAPPER
   -------------------------------------- */
/* We moved the scrolling rules to the parent container */
.field--name-[YOUR-FIELD-MACHINE-NAME] {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 30px;
  border-radius: 4px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* --------------------------------------
   2. THE AUTO-SIZING TABLE CORE
   -------------------------------------- */
.field--name-field-mbg-paragraph-options-tabl > .field__items {
  display: table;
  width: 100%;
  border-collapse: collapse; 
  background-color: #ffffff;
}

/* FIX: Scoped to ONLY affect the items inside this specific table wrapper */
.field--name-field-mbg-paragraph-options-tabl .field__item {
  display: table-row;
  border-bottom: 1px solid #e5e7eb;
  font-family: 'Roboto Slab', serif;
}

.timeless-flex-row {
  display: contents; 
}

.timeless-flex-cell {
  display: table-cell;
  padding: 14px 20px;
  color: #374151;
  font-size: 1rem;
  border-right: 1px solid #e5e7eb;
  vertical-align: middle;
  overflow-wrap: break-word; 
}

.timeless-flex-cell:last-child {
  border-right: none;
}

/* --------------------------------------
   3. THE HEADER
   -------------------------------------- */
.field--name-field-mbg-paragraph-options-tabl .field__item:first-child .timeless-flex-cell {
  background-color: #111827; 
  color: #ffffff;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 0.95rem;
  letter-spacing: 1px;
  border-bottom: none;
}

/* --------------------------------------
   4. ZEBRA STRIPING & HOVER
   -------------------------------------- */
.field--name-field-mbg-paragraph-options-tabl .field__item:nth-child(even) {
  background-color: #f3f4f6; 
}

.field--name-field-mbg-paragraph-options-tabl .field__item:not(:first-child):hover {
  background-color: #fef2f2;
}

.field--name-field-mbg-paragraph-options-tabl .field__item:not(:first-child) .timeless-flex-cell:first-child {
  font-weight: 700;
  color: #111827;
  border-left: 4px solid #dc2626; 
}

/* --------------------------------------
   5. STICKY FIRST COLUMN
   -------------------------------------- */
.timeless-flex-cell:first-child {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 10;
  background-color: #ffffff; 
}

.field--name-field-mbg-paragraph-options-tabl .field__item:first-child .timeless-flex-cell:first-child {
  background-color: #111827; 
  z-index: 11; 
}

.field--name-field-mbg-paragraph-options-tabl .field__item:nth-child(even) .timeless-flex-cell:first-child {
  background-color: #f3f4f6; 
}

.field--name-field-mbg-paragraph-options-tabl .field__item:not(:first-child):hover .timeless-flex-cell:first-child {
  background-color: #fef2f2;
}

/* --------------------------------------
   THE RESPONSIVE SCROLLING WRAPPER
   -------------------------------------- */

/* Replace this with your exact Drupal field class */
.field--name-field-mbg-paragraph-options-tabl {
  width: 100%;
  
  /* CRITICAL FIXES: Forces the container to stay inside the phone screen */
  max-width: 100%; 
  position: relative; 
  
  /* Enables horizontal scrolling */
  overflow-x: auto;
  
  /* Smooth scrolling for iOS */
  -webkit-overflow-scrolling: touch; 
  
  margin-bottom: 30px;
  border-radius: 4px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  
  /* Optional: Ensures the container itself has a background color 
     so the table doesn't look transparent if pulled past the edge on mobile */
  background-color: #ffffff; 
}




.vin-section {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid #e5e7eb;
    padding: 2rem;
    font-family: 'Roboto Slab', serif;
    color: #374151;
    max-width: 800px;
    margin: 2rem auto;
}

.vin-intro {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid #f3f4f6;
}

.vin-intro h3 {
    font-family: 'Montserrat', sans-serif;
    color: black;
    font-weight: bold;
    font-size: 1.7rem;
    margin-top: 0;
    margin-bottom: 0.5rem;
}

.vin-location {
    display: inline-block;
    background-color: #fef2f2;
    color: #b91c1c;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    font-size: 0.875rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.vin-year-group {
    margin-bottom: 2.5rem;
}

.vin-year-group h4 {
    font-family: 'Montserrat', sans-serif;
    color: #1f2937;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 1.1rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
}

.vin-year-group h4::before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 3px;
    background-color: #b91c1c;
    margin-right: 12px;
}

/* The visual "VIN Plate" display */
.vin-plate {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    background-color: #111827;
    padding: 1rem;
    border-radius: 6px;
    margin-bottom: 1.5rem;
}

.vin-block {
    background-color: #1f2937;
    border: 1px solid #374151;
    border-radius: 4px;
    padding: 0.75rem;
    text-align: center;
    flex-grow: 1;
}

.vin-char {
    font-family: 'JetBrains Mono', monospace, sans-serif;
    color: #f9fafb;
    font-size: 1.5rem;
    font-weight: 700;
    display: block;
    margin-bottom: 0.25rem;
    letter-spacing: 2px;
}

.vin-label {
    font-family: 'Montserrat', sans-serif;
    color: #9ca3af;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: block;
}

/* The detail list below the plate */
.vin-details {
    list-style: none;
    padding: 0;
    margin: 0;
}

.vin-details li {
    padding: 0.75rem 0;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: baseline;
}

.vin-details li:last-child {
    border-bottom: none;
}

.vin-details-code {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    color: #111827;
    background-color: #f3f4f6;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    margin-right: 1rem;
    min-width: 45px;
    text-align: center;
}

.vin-details-text strong {
    color: #111827;
    margin-right: 0.5rem;
}


/* Cowl Section */


/* =========================================
   EXACT COWL TAG REPLICA
   ========================================= */
.cowl-plate-exact {
    /* Metallic gradient */
    background: linear-gradient(135deg, #cfd3d8 0%, #b0b5bc 50%, #cfd3d8 100%);
    border-radius: 12px;
    padding: 15px 20px 10px 20px;
    position: relative;
    margin: 2rem auto;
    max-width: 550px;
    
    /* 3D plate shadow */
    box-shadow: 0 8px 15px rgba(0,0,0,0.15), inset 0 2px 4px rgba(255,255,255,0.8), inset 0 -3px 6px rgba(0,0,0,0.3);
    
    font-family: 'JetBrains Mono', monospace, sans-serif;
    color: #374151;
    font-weight: 700;
}

/* The dark punched holes at the bottom */
.plate-hole {
    position: absolute;
    bottom: 12px;
    width: 22px;
    height: 22px;
    background: #111827; 
    border-radius: 50%;
    box-shadow: inset 0 4px 6px rgba(0,0,0,0.9), 0 1px 1px rgba(255,255,255,0.6);
}
.left-hole { left: 20px; }
.right-hole { right: 20px; }

/* The embossed text effect */
.stamped {
    text-shadow: 1px 1px 0px rgba(255,255,255,0.6), -1px -1px 0px rgba(0,0,0,0.4);
}

.plate-text-small {
    font-size: 0.75rem;
    letter-spacing: 1px;
}

/* The horizontal stamped lines bordering the data */
.plate-groove {
    border-top: 1px solid rgba(0,0,0,0.2);
    border-bottom: 1px solid rgba(0,0,0,0.2);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 1px 0 rgba(255,255,255,0.5);
    padding: 10px 0;
    margin: 8px 0;
}

.plate-date {
    font-size: 1.25rem;
    margin-left: 2.5rem;
    margin-bottom: 5px;
}

.plate-row {
    display: flex;
    justify-content: space-between;
    font-size: 1.35rem;
    margin-bottom: 5px;
    padding: 0 10px;
}

.plate-acc {
    font-size: 1.35rem;
    text-align: center;
    letter-spacing: 2px;
    margin-top: 10px;
}

/* Shrink text slightly on small phones so it doesn't wrap */
@media (max-width: 500px) {
    .plate-row, .plate-date, .plate-acc { font-size: 1.05rem; }
    .plate-text-small { font-size: 0.6rem; }
    .plate-hole { width: 16px; height: 16px; bottom: 10px; }
    .left-hole { left: 15px; }
    .right-hole { right: 15px; }
}




.accessory-directory {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid #e5e7eb;
    padding: 2rem;
    font-family: 'Roboto Slab', serif;
    color: #374151;
    margin: 2rem auto;
}

.directory-header {
    margin-bottom: 2rem;
    border-bottom: 2px solid #b91c1c;
    padding-bottom: 1rem;
}

.directory-header h3 {
    font-family: 'Montserrat', sans-serif;
    color: #111827;
    font-size: 1.5rem;
    margin: 0 0 0.5rem 0;
}

.directory-header p {
    margin: 0;
    font-size: 0.95rem;
    color: #4b5563;
}

.group-container {
    margin-bottom: 2.5rem;
}

.group-container:last-child {
    margin-bottom: 0;
}

.group-title {
    font-family: 'Montserrat', sans-serif;
    color: #b91c1c;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
}

.group-title::after {
    content: "";
    flex-grow: 1;
    height: 1px;
    background-color: #e5e7eb;
    margin-left: 1rem;
}

.code-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

@media (min-width: 768px) {
    .code-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.code-item {
    display: flex;
    align-items: baseline;
    background-color: #f9fafb;
    padding: 0.75rem 1rem;
    border-radius: 4px;
    border: 1px solid #f3f4f6;
}

.code-letter {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    color: #111827;
    background-color: #e5e7eb;
    padding: 0.2rem 0.5rem;
    border-radius: 3px;
    margin-right: 1rem;
    min-width: 30px;
    text-align: center;
}

.code-desc {
    font-size: 0.95rem;
    line-height: 1.4;
}

.code-note {
    display: block;
    font-size: 0.8rem;
    color: #6b7280;
    margin-top: 0.2rem;
    font-style: italic;
}














/* --------------------------------------
   MODEL YEAR DIFFERENTIATION LAYOUT
   -------------------------------------- */

/* 1. MOBILE FIRST: Stack the text on top of the image */
.differentiation-row {
  display: flex;
  flex-direction: column; /* Stacks vertically on small screens */
  gap: 15px; /* Creates perfect spacing between the text and the image */
  margin-bottom: 25px; /* Space between each list item */
  padding-bottom: 25px;
  border-bottom: 1px solid #e5e7eb; /* Optional: A nice divider line between years */
}

/* Removes the divider line from the very last item */
.differentiation-row:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

/* Ensure the image doesn't blow out the container on phones */
.differentiation-image img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}

/* --------------------------------------
   2. DESKTOP OVERRIDE: Side-by-Side
   -------------------------------------- */
/* 768px is the standard breakpoint where tablets and desktops take over */
@media (min-width: 768px) {
  
  .differentiation-row {
    flex-direction: row; /* Switches layout to horizontal! */
    align-items: flex-start; /* Keeps the text and image aligned at the top */
    justify-content: space-between; /* Pushes image to the far right */
  }

  .differentiation-text {
    flex: 1; /* Tells the text to take up all available leftover space */
    padding-right: 30px; /* Prevents the text from touching the image */
  font-family: 'Inter', sans-serif;
  font-size: 1.125rem; 
  }

  .differentiation-image {
    flex: 0 0 250px; /* Lock the image column width (change 250px to whatever fits your thumbnail style best) */
    border: 2px solid #000000;
  }
  
}







/* =========================================
   TRANSMISSION SPECIFICATIONS SECTION
   ========================================= */
.trans-section {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid #e5e7eb;
    padding: 2rem;
    font-family: 'Roboto Slab', serif;
    color: #374151;
    max-width: 1000px; /* Wider to accommodate side-by-side */
    margin: 2rem auto;
}

.trans-intro {
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #f3f4f6;
}

.trans-intro h3 {
    font-family: 'Montserrat', sans-serif;
    color: #111827;
    font-size: 1.875rem;
    font-weight: 800;
    margin-top: 0;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}

.trans-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 768px) {
    .trans-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.trans-card {
    background-color: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.trans-header {
    padding: 1.5rem;
    color: #ffffff;
    position: relative;
}

.trans-1963 .trans-header {
    background-color: #1f2937; /* Dark Slate for the older tech */
    border-bottom: 4px solid #9ca3af;
}

.trans-1964 .trans-header {
    background-color: #b91c1c; /* Timeless Red for the performance tech */
    border-bottom: 4px solid #111827;
}

.trans-year-badge {
    font-family: 'JetBrains Mono', monospace, sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
    opacity: 0.9;
    letter-spacing: 2px;
    display: block;
    margin-bottom: 0.25rem;
}

.trans-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
}

.trans-body {
    padding: 1.5rem;
    flex-grow: 1;
}

.trans-desc {
    font-size: 0.95rem;
    line-height: 1.6;
    margin-top: 0;
    margin-bottom: 1.5rem;
}

.trans-list-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: #111827;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid #d1d5db;
    padding-bottom: 4px;
}

.trans-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem 0;
}

.trans-list li {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    padding-left: 1.5rem;
    position: relative;
    line-height: 1.4;
}

/* Custom check and X marks for pros/cons */
.trans-pro li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #059669; /* Green */
    font-weight: 900;
}

.trans-con li::before {
    content: "✗";
    position: absolute;
    left: 0;
    color: #dc2626; /* Red */
    font-weight: 900;
}

/* Switch Pitch Callout Box */
.switch-pitch-box {
    margin-top: 2rem;
    background-color: #fffbeb; /* Light amber */
    border: 1px solid #fde68a;
    border-left: 6px solid #d97706;
    padding: 1.5rem;
    border-radius: 4px;
}

.switch-pitch-box h4 {
    font-family: 'Montserrat', sans-serif;
    color: #b45309;
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
    text-transform: uppercase;
}

.switch-pitch-box p {
    margin: 0;
    font-size: 0.95rem;
    color: #92400e;
    line-height: 1.6;
}
















/* =========================================
   INTERIOR SPECIFICATIONS SECTION
   ========================================= */
.interior-section {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid #e5e7eb;
    padding: 2rem;
    font-family: 'Roboto Slab', serif;
    color: #374151;
    max-width: 1000px;
    margin: 2rem auto;
}

.interior-intro {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid #f3f4f6;
}

.interior-intro h3 {
    font-family: 'Montserrat', sans-serif;
    color: #111827;
    font-size: 1.875rem;
    font-weight: 800;
    margin-top: 0;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}

.interior-intro p {
    font-size: 1.05rem;
    line-height: 1.6;
    margin-top: 0;
}

/* 3-Column Grid for Features */
.interior-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

@media (min-width: 768px) {
    .interior-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.interior-card {
    background-color: #f9fafb;
    border: 1px solid #e5e7eb;
    border-top: 4px solid #1f2937;
    border-radius: 6px;
    padding: 1.5rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.interior-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.08);
}

.interior-card h4 {
    font-family: 'Montserrat', sans-serif;
    color: #111827;
    font-size: 1.2rem;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 1rem;
    border-bottom: 1px solid #d1d5db;
    padding-bottom: 0.5rem;
}

.interior-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.interior-list li {
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
    padding-left: 1.25rem;
    position: relative;
    line-height: 1.5;
}

.interior-list li::before {
    content: "■";
    position: absolute;
    left: 0;
    color: #dc2626; /* Timeless Red */
    font-size: 0.8rem;
    top: 2px;
}

/* Restoration Trap Warning Box */
.trap-box {
    background-color: #fef2f2; /* Light Red */
    border: 1px solid #fca5a5;
    border-left: 6px solid #dc2626;
    padding: 1.5rem;
    border-radius: 4px;
    margin-bottom: 2rem;
}

.trap-box h4 {
    font-family: 'Montserrat', sans-serif;
    color: #991b1b;
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
    text-transform: uppercase;
}

.trap-box p {
    margin: 0;
    font-size: 0.95rem;
    color: #7f1d1d;
    line-height: 1.6;
}

/* Citations Section */
.interior-citations {
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    color: #6b7280;
    border-top: 1px solid #e5e7eb;
    padding-top: 1rem;
}

.interior-citations p {
    margin: 0 0 0.5rem 0;
}

.btn {
color: white !important; 
background-color: #8b2f28 !important;
border: solid 1px #2d2d2d;
}
.btn:hover {
color: white !important; 
background-color: #2d2d2d !important;
border: solid 2px #8b2f28;
}

.forgot-password a, .actions-suffix a, .back-to-login a {
color: #8b2f28 !important; 
}












/* =========================================
   SECTION 2: QUICK SPECS & PRODUCTION
   ========================================= */
.specs-prod-section {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid #e5e7eb;
    padding: 2rem;
    font-family: 'Roboto Slab', serif;
    color: #374151;
    max-width: 1000px;
    margin: 2rem auto;
}

.specs-header {
    border-bottom: 2px solid #111827;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
}

.specs-header h3 {
    font-family: 'Montserrat', sans-serif;
    color: #111827;
    font-size: 1.875rem;
    font-weight: 800;
    margin: 0;
    text-transform: uppercase;
}

/* --- Quick Specs Grid --- */
.quick-specs-grid {
    display: grid;
    /* Defaults to 2 columns on phones */
    grid-template-columns: repeat(2, 1fr); 
    gap: 1rem;
    margin-bottom: 2.5rem;
}

/* 3 columns on tablets */
@media (min-width: 600px) {
    .quick-specs-grid { grid-template-columns: repeat(3, 1fr); }
}

/* 6 columns on desktops so they sit in one row */
@media (min-width: 900px) {
    .quick-specs-grid { grid-template-columns: repeat(6, 1fr); }
}

.spec-item {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 1rem 0.5rem;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.spec-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    border-color: #d1d5db;
}

.spec-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: block;
    margin-bottom: 0.5rem;
}

.spec-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.1rem;
    font-weight: 700;
    color: #111827;
}

/* --- Production Chart --- */
.prod-chart-wrapper {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 1.5rem;
}

.prod-chart-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: #111827;
    margin-top: 0;
    margin-bottom: 0.25rem;
    text-transform: uppercase;
}

.prod-chart-total {
    font-size: 0.95rem;
    color: #6b7280;
    margin-bottom: 2rem;
}

.chart-scroll-container {
    width: 100%;
    /* Enables horizontal swipe on mobile */
    overflow-x: auto; 
    -webkit-overflow-scrolling: touch;
    padding-top: 1rem; 
}

.chart-flex-box {
    display: flex;
    align-items: flex-end;
    /* Spaces items evenly, but strictly from left to right if they overflow */
    justify-content: space-around; 
    min-width: 100%; /* Forces the box to stretch if there are many years */
    height: 200px;
    border-bottom: 2px solid #111827;
    gap: 15px;
    padding-bottom: 10px;
}

.chart-bar-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    /* Prevents the bars from becoming too skinny */
    min-width: 50px; 
    flex: 1;
    max-width: 80px; 
}

.chart-bar {
    width: 100%;
    background-color: #dc2626; /* Timeless Red */
    border-radius: 4px 4px 0 0;
    transition: background-color 0.3s ease;
}

.chart-bar:hover {
    background-color: #111827;
}

.chart-val {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    font-weight: 700;
    color: #374151;
    margin-bottom: 5px;
}

.chart-lbl {
    margin-top: 10px;
    font-weight: 700;
    color: #111827;
    font-size: 0.95rem;
}








/* =========================================
   SECTION 2: SPECS TABLE & PRODUCTION CHART
   ========================================= */
.yby-compact-section {
    background-color: #ffffff;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border: 1px solid #e5e7eb;
    margin: 2rem auto;
    max-width: 1100px; 
    overflow: hidden; 
}

.yby-compact-header {
    background-color: #111827;
    color: #ffffff;
    padding: 12px 20px;
}

.yby-compact-header h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.3rem;
    font-weight: 800;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* --- 1. The Table --- */
.yby-table-wrapper {
    width: 100%;
}

.yby-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Roboto Slab', serif;
    color: #374151;
    text-align: left;
}

.yby-table th {
    background-color: #f3f4f6;
    color: #1f2937;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 10px 12px;
    border-bottom: 2px solid #d1d5db;
    /* REMOVED white-space: nowrap so "Production Volume" can stack on two lines! */
    line-height: 1.3; 
}

.yby-table tbody .specs-row td {
    padding: 10px 12px;
    font-size: 0.85rem;
    vertical-align: top;
    border-right: 1px dashed #e5e7eb;
}

.yby-table tbody .specs-row td:last-child { border-right: none; }
.yby-table td.yby-year { font-family: 'Montserrat', sans-serif; font-size: 1rem; font-weight: 800; color: #111827; }
.yby-table td.yby-data { font-family: 'JetBrains Mono', monospace; color: #4b5563; }

.yby-cell-list { margin: 0; padding: 0; list-style: none; }
.yby-cell-list li { margin-bottom: 4px; }
.yby-cell-list li:last-child { margin-bottom: 0; }
.trim-qty { font-weight: 700; color: #dc2626; }

.yby-table tbody .desc-row td {
    padding: 10px 12px 16px 12px; 
    font-size: 0.9rem;
    line-height: 1.5;
    color: #4b5563;
    background-color: #fcfcfc; 
    border-bottom: 3px solid #111827; 
}

.yby-table tbody:last-child .desc-row td { border-bottom: none; }

/* --- Description Row Flex Layout (Text + Image) --- */
.desc-flex-container {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    width: 100%;
    box-sizing: border-box;
}

.desc-text {
    /* The "0%" is the magic trick. It forces the text to yield space and wrap tightly */
    flex: 1 1 0%; 
    font-size: 1.125rem; 
}

.desc-image {
    /* Set to exactly 220px. It will not grow, it will not shrink. */
    flex: 0 0 220px; 
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #d1d5db;
    background-color: #e5e7eb;
}

.desc-image img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* --- 2. The Production Chart --- */
.prod-chart-wrapper {
    background: #f9fafb;
    border-top: 3px solid #111827; /* Hard separator from the table */
    padding: 2rem 1.5rem;
}

.prod-chart-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: #111827;
    margin: 0 0 0.5rem 0;
    text-transform: uppercase;
}

.chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2rem;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
}

.legend-item { display: flex; align-items: center; gap: 0.5rem; }
.legend-color { width: 16px; height: 16px; border-radius: 3px; }

.chart-scroll-container {
    width: 100%;
    overflow-x: auto; 
    -webkit-overflow-scrolling: touch;
    padding-top: 1rem;
}

.chart-flex-box {
    display: flex;
    align-items: flex-end;
    justify-content: space-around; 
    min-width: 100%; 
    height: 250px; 
    border-bottom: 2px solid #111827;
    gap: 15px;
    padding-bottom: 10px;
}

.chart-bar-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    min-width: 60px; 
    flex: 1;
    max-width: 90px; 
}

.chart-bar-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column-reverse; 
    border-radius: 4px 4px 0 0;
    overflow: hidden; 
}

.chart-segment {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.9);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    font-weight: 700;
    transition: opacity 0.2s ease;
}

.chart-segment:hover { opacity: 0.8; }
.chart-val { font-family: 'JetBrains Mono', monospace; font-size: 0.85rem; font-weight: 700; color: #374151; margin-bottom: 5px; }
.chart-lbl { margin-top: 10px; font-weight: 700; color: #111827; font-size: 0.95rem; }


/* =========================================
   MOBILE STACK OVERRIDE
   ========================================= */
@media (max-width: 850px) {
    .yby-table, .yby-table tbody, .yby-table tr, .yby-table td { display: block; width: 100%; }
    .yby-table .repeated-header { display: none; }
    .yby-table tbody { margin-bottom: 1.5rem; border: 1px solid #111827; border-radius: 8px; overflow: hidden; }
    .yby-table tbody:last-child { margin-bottom: 0; }
    .yby-table tbody .specs-row td { display: flex; justify-content: space-between; align-items: flex-start; text-align: right; padding: 12px 15px; border-right: none; border-bottom: 1px solid #e5e7eb; }
    .yby-table tbody .specs-row td .yby-cell-list { text-align: right; }
    
    .yby-table tbody .specs-row td::before {
        content: attr(data-label);
        font-family: 'Montserrat', sans-serif;
        font-size: 0.75rem;
        font-weight: 700;
        color: #6b7280;
        text-transform: uppercase;
        text-align: left;
        margin-right: 1rem;
        flex-shrink: 0; 
    } /* <-- THIS BRACKET WAS MISSING IN YOUR CODE! */

    .yby-table tbody .specs-row td.yby-year { background-color: #1f2937; color: #ffffff; font-size: 1.25rem; justify-content: center; text-align: center; }
    .yby-table tbody .specs-row td.yby-year::before { display: none; }
    .yby-table tbody .desc-row td { border-bottom: none; text-align: left; padding: 15px; }
    
    /* Mobile Override for Description Image */
    .desc-flex-container {
        flex-direction: column;
    }
    
    .desc-image {
        width: 100%;
        max-width: 400px;
        margin: 10px auto 0 auto;
    }
}









/* =========================================
   SECTION 3: MARKET VALUE & PRICE GUIDE
   ========================================= */
.value-section {
    background-color: #ffffff;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border: 1px solid #e5e7eb;
    margin: 2rem auto;
    max-width: 1100px; 
    overflow: hidden; 
    font-family: 'Roboto Slab', serif;
    color: #374151;
}

.value-header {
    background-color: #111827;
    color: #ffffff;
    padding: 12px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.value-header h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.3rem;
    font-weight: 800;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.data-timestamp {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    color: #9ca3af;
}

.value-grid {
    display: flex;
    flex-wrap: wrap;
    padding: 2rem;
    gap: 3rem; /* Good spacing between the tiers and the context text */
}

/* --- Left Side: Condition Pricing Tiers --- */
.value-tier-col {
    flex: 1 1 450px; /* Takes up space, wraps if smaller than 450px */
}

.tier-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.tier-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-left-width: 5px; /* Thick left border for visual hierarchy */
    border-radius: 6px;
    padding: 1.25rem 1.5rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.tier-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

/* Specific Border Colors for Conditions */
.tier-item.concours { border-left-color: #10b981; } /* Emerald Green */
.tier-item.excellent { border-left-color: #3b82f6; } /* Royal Blue */
.tier-item.driver    { border-left-color: #f59e0b; } /* Amber/Orange */
.tier-item.project   { border-left-color: #6b7280; } /* Slate Gray */

.tier-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tier-name {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
    font-weight: 800;
    color: #111827;
    text-transform: uppercase;
}

.tier-desc {
    font-size: 0.85rem;
    color: #6b7280;
    font-weight: 500;
}

.tier-price {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.5rem;
    font-weight: 800;
    color: #111827;
}

/* --- Right Side: AI-Generated Context --- */
.value-context-col {
    flex: 1 1 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.value-context-col h4 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.25rem;
    font-weight: 800;
    color: #111827;
    margin-top: 0;
    margin-bottom: 1rem;
    border-bottom: 2px solid #dc2626; /* Timeless Red accent */
    padding-bottom: 0.5rem;
    display: inline-block;
}

.value-drivers-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.value-drivers-list li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 1.25rem;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Custom Red Arrows for Bullet Points */
.value-drivers-list li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: #dc2626;
    font-weight: 800;
    font-family: 'JetBrains Mono', monospace;
}

.driver-title {
    font-weight: 700;
    color: #111827;
}

/* --- Mobile Adjustments --- */
@media (max-width: 850px) {
    .value-grid {
        padding: 1.5rem;
        flex-direction: column; /* Stacks the columns */
    }
    .value-tier-col {
        flex-basis: auto;
        width: 100%;
    }
    .tier-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .tier-price {
        font-size: 1.35rem; /* Slightly smaller on phones */
    }
    .value-header {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* =========================================
   SECTION 4: STANDARD & OPTIONAL EQUIPMENT
   ========================================= */
.equip-section {
    background-color: #ffffff;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border: 1px solid #e5e7eb;
    margin: 2rem auto;
    max-width: 1100px; 
    overflow: hidden; 
    font-family: 'Roboto Slab', serif;
    color: #374151;
}

.equip-header {
    background-color: #111827;
    color: #ffffff;
    padding: 12px 20px;
}

.equip-header h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.3rem;
    font-weight: 800;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.equip-content {
    padding: 2rem;
}

/* --- STANDARD EQUIPMENT "SPEC SHEET" LIST --- */
.std-equip-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.25rem;
    font-weight: 800;
    color: #111827;
    margin-top: 0;
    margin-bottom: 1rem;
    border-bottom: 2px solid #dc2626; /* Timeless Red accent */
    padding-bottom: 0.5rem;
    display: inline-block;
}

.std-equip-list {
    display: flex;
    flex-direction: column;
    margin-bottom: 3rem;
    border-top: 2px solid #111827; /* Hard border to start the list */
}

.std-equip-row {
    display: flex;
    padding: 12px 10px;
    border-bottom: 1px solid #e5e7eb;
}

.std-equip-row:nth-child(even) {
    background-color: #f9fafb; /* Subtle alternating row color */
}

.std-category {
    width: 200px; /* Keeps all the labels perfectly aligned */
    flex-shrink: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    font-weight: 800;
    color: #111827;
    text-transform: uppercase;
    padding-right: 15px;
}

.std-desc {
    flex: 1;
    font-size: 0.95rem;
    color: #4b5563;
    margin: 0;
    line-height: 1.5;
}

/* Mobile override for the Standard list */
@media (max-width: 600px) {
    .std-equip-row {
        flex-direction: column;
        gap: 4px;
        padding: 12px 0;
    }
    .std-category {
        width: 100%;
        color: #dc2626; /* Makes the category pop when stacked */
    }
}

/* --- OPTIONAL EQUIPMENT TABLE (Untouched) --- */
.options-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.25rem;
    font-weight: 800;
    color: #111827;
    margin-top: 0;
    margin-bottom: 1rem;
    border-bottom: 2px solid #dc2626;
    padding-bottom: 0.5rem;
    display: inline-block;
}

.options-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.options-table thead th {
    background-color: #f3f4f6;
    color: #1f2937;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 12px 15px;
    border-bottom: 2px solid #d1d5db;
}

.options-table tbody td {
    padding: 12px 15px;
    font-size: 0.9rem;
    border-bottom: 1px solid #e5e7eb;
    vertical-align: top;
}

.options-table tbody tr:last-child td {
    border-bottom: none;
}

.opt-name { font-weight: 700; color: #111827; }
.opt-code { font-family: 'JetBrains Mono', monospace; font-weight: 700; color: #dc2626; background: #fee2e2; padding: 2px 6px; border-radius: 4px; font-size: 0.8rem; white-space: nowrap;}
.opt-desc { color: #374151; font-weight: 500; }
.opt-notes { color: #6b7280; font-style: italic; font-size: 0.85rem; }

/* Mobile Stack Override for Options Table (Untouched) */
@media (max-width: 850px) {
    .options-table, .options-table tbody, .options-table tr, .options-table td { display: block; width: 100%; }
    .options-table thead { display: none; }
    .options-table tbody tr { margin-bottom: 1.5rem; border: 1px solid #111827; border-radius: 8px; overflow: hidden; }
    .options-table tbody tr:last-child { margin-bottom: 0; }
    .options-table tbody td { display: flex; justify-content: space-between; align-items: flex-start; text-align: right; padding: 12px 15px; border-bottom: 1px solid #e5e7eb; }
    .options-table tbody td::before {
        content: attr(data-label);
        font-family: 'Montserrat', sans-serif;
        font-size: 0.75rem;
        font-weight: 700;
        color: #6b7280;
        text-transform: uppercase;
        text-align: left;
        margin-right: 1rem;
        flex-shrink: 0; 
    }
    .options-table tbody td.opt-name { background-color: #f9fafb; font-size: 1.1rem; justify-content: center; text-align: center; border-bottom: 2px solid #e5e7eb; }
    .options-table tbody td.opt-name::before { display: none; }
}



/* =========================================
   SECTION 5: ENGINE SPECIFICATIONS
   ========================================= */
.engine-section {
    background-color: #ffffff;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border: 1px solid #e5e7eb;
    margin: 2rem auto;
    max-width: 1100px; 
    overflow: hidden; 
    font-family: 'Roboto Slab', serif;
    color: #374151;
}

.engine-header {
    background-color: #111827;
    color: #ffffff;
    padding: 12px 20px;
}

.engine-header h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.3rem;
    font-weight: 800;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.engine-content {
    padding: 2rem;
}

.engine-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.engine-table thead th {
    background-color: #f3f4f6;
    color: #1f2937;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 12px 15px;
    border-bottom: 2px solid #d1d5db;
}

.engine-table tbody td {
    padding: 12px 15px;
    font-size: 0.9rem;
    border-bottom: 1px solid #e5e7eb;
    vertical-align: top;
}

.engine-table tbody tr:last-child td {
    border-bottom: none;
}

/* Distinct styling for specific columns */
.eng-name { font-weight: 700; color: #111827; }
.eng-code { font-family: 'JetBrains Mono', monospace; font-weight: 700; color: #dc2626; background: #fee2e2; padding: 2px 6px; border-radius: 4px; font-size: 0.8rem; white-space: nowrap;}
.eng-data { color: #4b5563; }

/* --- MOBILE STACK OVERRIDE FOR ENGINE TABLE --- */
@media (max-width: 850px) {
    .engine-table, .engine-table tbody, .engine-table tr, .engine-table td { 
        display: block; 
        width: 100%; 
    }
    
    .engine-table thead { 
        display: none; 
    }
    
    .engine-table tbody tr {
        margin-bottom: 1.5rem;
        border: 1px solid #111827;
        border-radius: 8px;
        overflow: hidden;
    }

    .engine-table tbody tr:last-child {
        margin-bottom: 0;
    }
    
    .engine-table tbody td { 
        display: flex; 
        justify-content: space-between; 
        align-items: center; 
        text-align: right; 
        padding: 12px 15px; 
        border-bottom: 1px solid #e5e7eb; 
    }
    
    /* Inject the mobile labels! */
    .engine-table tbody td::before {
        content: attr(data-label);
        font-family: 'Montserrat', sans-serif;
        font-size: 0.75rem;
        font-weight: 700;
        color: #6b7280;
        text-transform: uppercase;
        text-align: left;
        margin-right: 1rem;
        flex-shrink: 0; 
    }

    /* Make the Engine Name act as a header on mobile */
    .engine-table tbody td.eng-name { 
        background-color: #1f2937; 
        color: #ffffff;
        font-size: 1.1rem; 
        justify-content: center; 
        text-align: center; 
        border-bottom: none;
    }
    
    .engine-table tbody td.eng-name::before { 
        display: none; 
    }
}









/* ==========================================================================
   SECTION 1: MID-CENTURY BOOK COVER HEADER STYLING
   ========================================================================== */

/* 1. CONTAINER: Now full-width, allows content to expand normally */
div.engine-profile-section {
    max-width: 100% !important; 
    margin: 0 !important;
    background: transparent !important;
    border: none !important; 
    box-shadow: none !important;
}

/* 2. THE BOOK HEADER: Specific max-width applied here instead of the container */
.engine-profile-section .profile-header {
    max-width: 520px !important; /* Forces the header into book shape */
    margin: 2rem auto !important;   /* Centers the book */
    background-color: #3a7d99 !important; 
    padding: 2.5rem 2rem 2rem 2rem !important; 
    position: relative !important;
    border: 1px solid #1a1d20 !important; 
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.15) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    min-height: 550px !important; 
    aspect-ratio: 3 / 4 !important; 
    justify-content: space-between !important;
}

/* 3. WEATHERING EFFECT (80% toned down, vertical spine-bend alignment) */
.engine-profile-section .profile-header::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background-image: 
        /* Faint top-left corner wear */
        radial-gradient(circle at 5% 5%, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.05) 15%, transparent 40%),
        /* Vertical spine fold crease */
        linear-gradient(90deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 2%, transparent 5%, transparent 95%, rgba(0,0,0,0.08) 100%),
        /* Subtly aligned vertical potting marks (80% less) */
        url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='v_wear'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8 0.01' numOctaves='2' result='noise'/%3E%3CfeColorMatrix type='matrix' values='1 0 0 0 1  0 1 0 0 1  0 0 1 0 1  0 0 0 4 -1.5' result='scuffs'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23v_wear)' opacity='0.02'/%3E%3C/svg%3E") !important;
    pointer-events: none !important;
    z-index: 4 !important; 
}

/* Header elements positioning */
.engine-profile-section .edition-badge { position: absolute !important; top: 1.5rem !important; left: 2rem !important; background: #1a1d20 !important; color: #ffffff !important; width: 55px !important; height: 55px !important; border-radius: 50% !important; z-index: 5 !important; }
.engine-profile-section .slanted-title-panel { background: #ffffff !important; border: 3px solid #1a1d20 !important; padding: 1rem 1.5rem !important; transform: rotate(-4deg) skewX(-4deg) !important; margin: 3.5rem 0 1rem 0 !important; max-width: 440px !important; z-index: 3 !important; }
.engine-profile-section .drupal-hero-image-wrapper { width: 100% !important; max-width: 380px !important; margin: 0.5rem auto !important; z-index: 2 !important; background: transparent !important; }
.engine-profile-section .author-line { font-family: 'Oswald', sans-serif !important; font-size: 1.25rem !important; color: #1a1d20 !important; text-transform: uppercase !important; margin-top: auto !important; margin-bottom: 0.75rem !important; z-index: 3 !important; }
.engine-profile-section .series-black-block { background: #1a1d20 !important; color: #ffffff !important; padding: 0.5rem 1.5rem !important; z-index: 3 !important; max-width: 380px !important; margin-top: 0 !important; }

/* 4. MAIN CONTENT AREA: Now full width of your page */
.profile-main-content {
    max-width: 100% !important; 
    padding: 2rem 1.5rem !important;
}






/* ==========================================================================
   MBG QUICK SPECS - FINAL BULLETPROOF IMAGE LOGIC WITH BORDERS & ROUNDED CORNERS
   ========================================================================== */

/* Main wrapper */
.desc-container {
    width: 100%;
    margin-top: 10px;
}

/* Text block */
.desc-text {
    width: 100%;
    line-height: 1.6;
}

/* --- SINGLE IMAGE STYLING --- */
.desc-image-single {
    float: right;
    width: 200px;
    margin-left: 20px;
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
}

/* --- MULTIPLE IMAGES STYLING --- */
.desc-images-multi-row {
    display: flex;
    flex-wrap: wrap; /* Allows them to wrap if there are many */
    gap: 20px;
    margin-top: 20px; /* Space between text and the image row */
    width: 100%;
}

.desc-image-multi {
    width: 200px;
    display: flex;
    flex-direction: column;
}

/* --- SHARED IMAGE & CAPTION RULES --- */
.image-wrapper img {
    display: block !important;
    width: 200px !important;
    height: 135px !important;
    object-fit: cover;
    
    /* Rounded corners and 1px black border */
    border: 2px solid #000000 !important;
    border-radius: 6px 6px 0 0 !important; /* Rounds only top corners to match caption block */
    box-sizing: border-box;
}

.image-caption-box {
    background-color: #f1f5f9;
    border: 2px solid #94a3b8;
    padding: 8px;
    border-radius: 0 0 6px 6px;
    font-size: 0.85rem;
    color: #475569;
    font-style: italic;
    text-align: center;
    margin-top: -1px; /* Overlaps precisely with the 1px image border */
    width: 200px !important;
    box-sizing: border-box;
}

/* --- MOBILE RESPONSIVE OVERRIDES --- */
@media (max-width: 600px) {
    /* Force Scenario A container to use Flexbox to allow reordering */
    .desc-container {
        display: flex;
        flex-direction: column;
    }

    /* Force the text block to always be at the very top (Order 1) */
    .desc-text {
        order: 1;
        margin-bottom: 15px;
    }

    /* Force the single image block to the bottom (Order 2) and kill floats */
    .desc-image-single {
        float: none !important;
        order: 2;
        width: 100% !important;
        margin-left: 0;
        margin-bottom: 20px;
    }

    /* Handle multiple images behavior on mobile */
    .desc-images-multi-row {
        display: flex;
        flex-direction: column;
        order: 2;
    }

    .desc-image-multi {
        float: none;
        width: 100% !important;
        margin-left: 0;
        margin-bottom: 20px;
    }

    /* Force layouts, raw images, and gray caption boxes to expand uniformly */
    .desc-image-single .image-wrapper,
    .desc-image-multi .image-wrapper,
    .desc-image-single img,
    .desc-image-multi img,
    .desc-image-single .image-caption-box,
    .desc-image-multi .image-caption-box {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important; /* Let height adjust dynamically on phones */
    }
}










/* CSS to replicate the updated layout and color scheme - new listing layout */
.car-ad-container {
    width: 300px; /* Adjust width as needed for your grid */
    border: 1px solid #ddd;
    border-radius: 12px;
    overflow: hidden;
    background: #f9f9f9;
    font-family: 'Open Sans', sans-serif;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: transform 0.2s;
    margin: 10px auto; /* Centered in viewport for demo */
}

.car-ad-container:hover {
    transform: translateY(-5px);
}

.car-image {
    width: 100%;
    height: 180px; /* Fixed height for consistency */
    object-fit: cover;
}

.car-details {
    padding: 15px;
    text-align: center; /* Center align all text and inline elements */
}

.car-title {
    font-size: 1.1rem;
    color: #00796B; /* Teal-green from updated design */
    margin: 0 0 5px 0;
    font-weight: 600;
}

.car-location {
    font-size: 0.85rem;
    color: #333; /* Dark gray charcoal from updated design */
    margin: 0 0 10px 0;
    text-transform: uppercase;
}

.car-price {
    font-size: 1.3rem;
    font-weight: bold;
    color: #333; /* Dark gray for a professional feel */
    margin: 0 0 15px 0;
}

.view-details-btn {
    display: inline-block; /* Allows width/padding while remaining centered */
    background-color: #e1b12c; /* The gold-mustard yellow from updated design */
    color: white;
    padding: 8px 24px; /* Sufficient horizontal padding for standard width */
    border-radius: 6px;
    text-decoration: none;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.8rem;
    border: none;
    cursor: pointer;
}

.view-details-btn:hover {
    background-color: #c79a24; /* Slightly darker gold on hover */
}






/* --- ENGINE / TTANSMISSION REFERENCE LINKS --- */
.yby-link {
    color: #b91c1c; /* A deep classic car red - change this hex code to match your theme! */
    text-decoration: none; /* Removes the default underline */
    font-weight: 600; /* Makes it slightly bold to stand out in the table */
}

.yby-link:hover {
    color: #7f1d1d; /* A darker shade when the user hovers over it */
    text-decoration: underline; /* Brings the underline back on hover for clarity */
}

/* ==========================================================================
   CHASSIS SECONDARY METRICS SUB-ROW
   ========================================================================== */

/* Styling for the container cell row */
.sub-specs-row td {
    background-color: #f8fafc !important; /* Slightly lighter tone than main headers */
    border-top: 1px dashed #cbd5e1 !important;
    border-bottom: 1px solid #cbd5e1 !important;
    padding: 10px 16px !important;
}

/* Flex layout that fits laptop screens beautifully */
.chassis-specs-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    font-size: 0.9rem;
    color: #334155;
}

.chassis-spec-item {
    flex: 1 1 auto;
    min-width: 160px; /* Allows smooth break to lines on tablets */
    white-space: nowrap;
}

.chassis-spec-item strong {
    color: #1e293b;
    font-weight: 600;
}

/* Keep structural clean break on smartphone layers */
@media (max-width: 600px) {
    .sub-specs-row td {
        padding: 8px 12px !important;
    }
    .chassis-specs-grid {
        flex-direction: column;
        gap: 8px;
    }
    .chassis-spec-item {
        white-space: normal; /* Permits wrapping layout rules for custom long tires string formats */
    }
}





/* ==========================================================================
   STATIC SPEC GENERATION CARD
   ========================================================================== */
.yby-generation-summary-card {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 16px;
    margin-bottom: 20px;
}

.summary-card-item {
    flex: 1 1 auto;
    min-width: 180px;
    font-size: 0.95rem;
    color: #334155;
}

.summary-card-item strong {
    color: #0f172a;
    font-weight: 600;
}

@media (max-width: 600px) {
    .yby-generation-summary-card {
        flex-direction: column;
        gap: 10px;
        padding: 12px;
    }
}








/* ==========================================================================
   MBG STANDARD PLATFORM SPECIFICATIONS - HIGH DENSITY ENGINE LAYOUT
   ========================================================================== */

.yby-platform-specs-container {
    background-color: #ffffff;
    border: 1px solid #000000;
    padding: 12px; /* Compressed outer bounding wrapper */
    margin: 12px 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.yby-platform-header h3 {
    font-size: 1.15rem;
    color: #000000;
    margin-top: 0;
    margin-bottom: 10px;
    border-bottom: 2px solid #000000;
    padding-bottom: 4px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Low-profile grid layout keeps blocks tight side-by-side */
.yby-specs-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.yby-specs-group {
    background-color: #ffffff;
    border: 1px solid #111111;
    padding: 8px 10px; /* Reduced group cell breathing room */
    height: fit-content;
}

.yby-specs-group h4 {
    font-size: 0.95rem;
    color: #000000;
    margin-top: 0;
    margin-bottom: 6px;
    font-weight: 700;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #000000;
    padding-bottom: 3px;
}

/* Text Anchor Links styling matching high-contrast directive */
.yby-anchor-link {
    font-size: 0.75rem;
    color: #000000;
    text-decoration: underline;
    font-weight: 700;
    transition: opacity 0.1s ease;
}

.yby-anchor-link:hover {
    opacity: 0.7;
}

/* Flat High-Density Technical Tables */
.yby-platform-table {
    width: 100%;
    border-collapse: collapse;
}

.yby-platform-table td {
    padding: 4px 2px; /* Ultra-tight padding preserves massive vertical screen space */
    font-size: 0.85rem;
    vertical-align: top;
    border-bottom: 1px solid #e2e8f0; /* Soft break line between text layers */
    line-height: 1.3;
}

.yby-platform-table tr:last-child td {
    border-bottom: none;
}

.spec-label {
    color: #111111; /* Hard dark value layout replacement */
    font-weight: 700;
    width: 32%;
}

.spec-value {
    color: #000000;
    font-weight: 500;
}

/* ==========================================================================
   MOBILE SCALING
   ========================================================================== */

@media (max-width: 768px) {
    .yby-specs-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .spec-label {
        width: 38%;
    }
}










/* ==========================================================================
   HERITAGE / CATALOG EDITORIAL STYLE (HIGH CONTRAST SERIF)
   ========================================================================== */
.yby-narrative-block.yby-heritage-style {
    background-color: #ffffff;
    padding: 4px 0; /* Minimal vertical footprint, zero side padding waste */
    margin: 8px 0;  /* Tight, predictable separation between content elements */
}

.yby-narrative-block.yby-heritage-style p {
    font-family: Georgia, Cambria, "Times New Roman", Times, serif;
    font-size: 1.05rem; /* Slightly larger than data text so serif lines are clean */
    color: #000000;    /* Absolute solid dark typography rule */
    line-height: 1.5;   /* Optimal reading line-space for text blocks */
    margin: 0;          /* Eradicates standard browser paragraph layout padding */
    text-align: justify; /* Keeps block edges perfectly flush like a real book */
}

/* ==========================================================================
   MODERN TECH EDITORIAL STYLE (CLEAN SANS-SERIF NARRATIVE)
   ========================================================================== */
.yby-narrative-block.yby-modern-style {
    background-color: #ffffff;
    padding: 4px 0; 
    margin: 8px 0;  
}

.yby-narrative-block.yby-modern-style p {
    /* Uses Inter/Arial to match the clean look of the table, but uncompressed */
    font-family: "Inter", Arial, Helvetica, sans-serif;
    font-size: 0.95rem; /* Balanced mid-size to distinguish from the 0.85rem tables */
    color: #000000;     /* Absolute solid dark typography rule */
    line-height: 1.45;  /* Balanced depth preventing long-paragraph eye strain */
    margin: 0;          
    letter-spacing: -0.1px; /* Subtle compression ensures high character-density */
}body, p, .lead { line-height:  1.6 } 
body { font-size:  17px } 
.dxpr-theme-header--top #dxpr-theme-main-menu .nav > li > a, .dxpr-theme-header--top #dxpr-theme-main-menu .nav > li > span, .dxpr-theme-header--side #dxpr-theme-main-menu .nav a, .dxpr-theme-header--side #dxpr-theme-main-menu .nav span, .body--dxpr-theme-nav-desktop .dxpr-theme-header--top .nav .dropdown-menu li>a, .body--dxpr-theme-nav-desktop .dxpr-theme-header--top .nav .dropdown-menu li>span { font-size:  15px } 
h1,h2,h3,h4,h5,h6 { line-height:  1.1; } 
h1, .html #page-title .page-title { font-size:  55px; } 
h2 { font-size:  41px; } 
h3 { font-size:  31px; } 
h4 { font-size:  23px; } 
blockquote, .blockquote p { font-size:  23px } 
hr { border-top-width:  4px; } 
hr { margin-left: 0;margin-right: auto; }
@media screen and (max-width: 768px) { 
  body, p { font-size:  14px; } 
  .dxpr-theme-header--top #dxpr-theme-main-menu .nav > li > a, .dxpr-theme-header--top #dxpr-theme-main-menu .nav > li > span, .dxpr-theme-header--side #dxpr-theme-main-menu .nav a, .dxpr-theme-header--side #dxpr-theme-main-menu .nav span, .body--dxpr-theme-nav-desktop .dxpr-theme-header--top .nav .dropdown-menu li>a, .body--dxpr-theme-nav-desktop .dxpr-theme-header--top .nav .dropdown-menu li>span { font-size:  14px } 
  h1, .html #page-title .page-title { font-size:  55px; } 
  h2 { font-size:  41px; } 
  h3 { font-size:  31px; } 
  h4 { font-size:  23px; } 
  blockquote, .blockquote p { font-size:  23px; } 
} 


body, .toooltip {
  font-family: "Source Sans Pro", "Source Sans Pro";
  font-weight: 400;
  font-style: normal;
}

h1,h2,h3,h4,h5,h6,label,.field--label,.page-title, .html .tp-caption {
  font-family: "Source Sans Pro Light", "Source Sans Pro";
  font-weight: 300;
  font-style: normal;
}

nav,nav ul li,nav a {
  font-family: "Source Sans Pro", "Source Sans Pro";
  font-weight: 400;
  font-style: normal;
}

.site-name, .navbar-brand {
  font-family: "Source Sans Pro Light", "Source Sans Pro";
  font-weight: 300;
  font-style: normal;
}

blockquote, blockquote p {
  font-family: "Source Sans Pro Light Italic", "Source Sans Pro";
  font-weight: 300;
  font-style: italic;
}