.listing-list-loop {
width: 100%;
padding-bottom: 11px;
margin-bottom: 32px;
border-bottom: 1px solid var(--motors-border-color);
display: flex;
flex-direction: column;
align-items: flex-start;
overflow: hidden;
}
@media (min-width: 768px) {
.listing-list-loop {
flex-direction: row;
align-items: flex-start;
}
}
@media (max-width: 767px) {
.listing-list-loop {
flex-direction: column;
align-items: stretch;
}
}
.listing-list-loop:after {
display: table;
content: "";
clear: both;
}
.listing-list-loop .video-preview {
position: absolute;
right: 9px;
top: 17px;
padding: 5px 11px 4px 25px;
border-radius: 2px;
color: var(--motors-contrast-text-color);
font-size: 10px;
text-transform: uppercase;
background-color: var(--motors-accent-color);
z-index: 20;
}
.listing-list-loop .video-preview .fa, .listing-list-loop .video-preview .fas {
position: absolute;
top: 50%;
left: 7px;
margin-top: -6px;
font-size: 12px;
}
.listing-list-loop .image {
position: relative;
float: left;
min-width: 257px;
width: 100%;
flex-basis: 257px;
margin: 0 28px 20px 0;
overflow: hidden;
flex-shrink: 0;
}
@media (max-width: 768px) {
.listing-list-loop .image {
width: auto;
flex-basis: auto;
margin: 0 15px 20px 0;
}
}
@media (max-width: 767px) {
.listing-list-loop .image {
width: 100%;
max-width: 100%;
margin-bottom: 15px;
}
}
.listing-list-loop .image .stm-car-medias {
position: absolute;
top: 6px;
left: 7px;
z-index: 20;
}
.listing-list-loop .image .stm-car-medias > div {
display: inline-block;
margin-right: 9px;
padding: 2px 5px 0 6px;
border-radius: 2px;
background: var(--motors-bg-alpha-contrast);
color: var(--motors-contrast-text-color);
font-size: 11px;
line-height: 22px;
font-weight: 600;
}
.listing-list-loop .image .stm-car-medias > div:hover {
cursor: pointer;
background: var(--motors-bg-contrast);
}
.listing-list-loop .image .stm-car-medias > div i {
font-size: 12px;
margin-right: 2px;
}
.listing-list-loop .image .stm-car-medias > div span {
position: relative;
top: -1px;
}
.listing-list-loop .image .stm-car-medias > div.stm-listing-videos-unit i {
position: relative;
top: -1px;
left: 1px;
margin-right: 3px;
}
.listing-list-loop .image:hover .stm-listing-compare, .listing-list-loop .image:hover .stm-listing-favorite, .listing-list-loop .image:hover .stm-car-medias {
opacity: 1;
}
.listing-list-loop .image .image-inner {
position: relative;
overflow: hidden;
}
.listing-list-loop .image .image-inner img {
display: block;
width: 100%;
height: auto;
}
.listing-list-loop .content {
flex-grow: 1;
}
.listing-list-loop .content .title {
padding-top: 5px;
font-size: 22px;
line-height: 1.3;
padding-bottom: 5px;
font-weight: 700;
overflow: hidden;
}
@media (max-width: 767px) {
.listing-list-loop .content .title {
font-size: 18px;
padding: 0;
}
}
.listing-list-loop .content .title a {
text-decoration: none;
color: var(--motors-text-color);
}
.listing-list-loop .content .title a .labels {
font-size: 16px;
color: var(--motors-accent-color);
}
.listing-list-loop .content .title a:hover {
color: var(--motors-accent-color);
}
.listing-list-loop .content .meta-top {
margin-bottom: 15px;
}
@media (max-width: 767px) {
.listing-list-loop .content .meta-top {
margin-bottom: 10px;
}
}
.listing-list-loop .content .meta-top:after {
display: table;
content: "";
clear: both;
}
.listing-list-loop .content .meta-top .price {
position: relative;
min-width: 130px;
margin-left: 40px;
float: right;
text-align: right;
background-color: var(--motors-accent-color);
color: var(--motors-contrast-text-color);
}
@media (max-width: 767px) {
.listing-list-loop .content .meta-top .price {
text-align: left;
}
}
.listing-list-loop .content .meta-top .price:before {
position: absolute;
content: "";
display: block;
top: 0;
left: -15px;
right: 100%;
height: 100%;
width: 32px;
background-color: var(--motors-accent-color);
transform: skew(-23deg, 0deg);
z-index: -1;
}
.listing-list-loop .content .meta-top .price .heading-font {
font-size: 22px;
color: var(--motors-contrast-text-color);
font-weight: 700;
letter-spacing: -1px;
}
@media (max-width: 767px) {
.listing-list-loop .content .meta-top .price .heading-font {
font-size: 17px;
}
}
.listing-list-loop .content .meta-top .price .normal-price {
position: relative;
padding: 10px 10px 9px 6px;
}
.listing-list-loop .content .meta-top .price .normal-price .label-price {
position: relative;
top: -3px;
max-width: 45px;
display: inline-block;
vertical-align: middle;
margin-top: -5px;
margin-right: 2px;
font-size: 10px;
line-height: 1.1;
text-transform: uppercase;
opacity: 0.7;
}
.listing-list-loop .content .meta-top .price .normal-price .heading-font {
position: relative;
top: 1px;
font-size: 22px;
line-height: 1.1;
}
@media (max-width: 767px) {
.listing-list-loop .content .meta-top .price .normal-price .heading-font {
font-size: 20px;
}
}
.listing-list-loop .content .meta-top .price.discounted-price {
padding: 1px 4px 3px 4px;
}
.listing-list-loop .content .meta-top .price.discounted-price .price-form-label {
display: block;
overflow: hidden;
padding: 12px 0 9px 0;
}
.listing-list-loop .content .meta-top .price.discounted-price .regular-price {
padding: 5px 8px 0 4px;
vertical-align: bottom;
font-size: 15px;
line-height: 1.4;
text-align: right;
text-decoration: line-through;
position: relative;
left: -4px;
z-index: 10;
}
@media (max-width: 767px) {
.listing-list-loop .content .meta-top .price.discounted-price .regular-price {
font-size: 14px;
}
}
.listing-list-loop .content .meta-top .price.discounted-price .regular-price .label-price {
opacity: 0.7;
font-size: 11px;
display: inline-block;
}
.listing-list-loop .content .meta-top .price.discounted-price .sale-price {
vertical-align: middle;
margin-top: -2px;
text-align: right;
padding: 0 8px 0 4px;
position: relative;
z-index: 10;
}
.listing-list-loop .content .meta-top .price.discounted-price .sale-price .label-price {
display: inline-block;
max-width: 45px;
margin-right: 2px;
position: relative;
top: -2px;
line-height: 10px;
font-size: 10px;
text-transform: uppercase;
vertical-align: middle;
opacity: 0.7;
}
@media (max-width: 767px) {
.listing-list-loop .content .meta-middle {
display: flex;
flex-wrap: wrap;
margin: -10px 0 10px !important;
}
}
.listing-list-loop .content .meta-middle:after {
display: table;
content: "";
clear: both;
}
.listing-list-loop .content .meta-middle .meta-middle-unit {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
float: left;
padding-right: 13px;
margin-right: 9px;
margin-bottom: 23px;
border-right: 1px solid var(--motors-border-color);
}
.listing-list-loop .content .meta-middle .meta-middle-unit .value {
font-weight: 700;
}
@media (max-width: 768px) {
.listing-list-loop .content .meta-middle .meta-middle-unit {
padding-bottom: 10px;
}
}
@media (max-width: 767px) {
.listing-list-loop .content .meta-middle .meta-middle-unit {
padding: 10px 0;
margin: 0 !important;
min-width: 100%;
border: none;
align-items: center;
border-bottom: 1px solid var(--motors-border-color);
}
}
.listing-list-loop .content .meta-middle .meta-middle-unit:last-child {
border-bottom: none;
}
.listing-list-loop .content .meta-middle .meta-middle-unit:after {
display: table;
content: "";
clear: both;
}
.listing-list-loop .content .meta-middle .meta-middle-unit:last-child {
border-right: none;
}
.listing-list-loop .content .meta-middle .meta-middle-unit.font-exists .value {
font-weight: 700;
}
@media (max-width: 767px) {
.listing-list-loop .content .meta-middle .meta-middle-unit .meta-middle-unit-top {
display: flex;
align-items: center;
}
}
.listing-list-loop .content .meta-middle .meta-middle-unit .icon {
position: relative;
top: 0;
left: 0;
color: var(--motors-text-alpha-color);
font-size: 15px;
margin: 3px 5px 0 0;
}
@media (max-width: 767px) {
.listing-list-loop .content .meta-middle .meta-middle-unit .icon {
margin: 0 5px 0 0;
display: flex;
align-items: center;
}
}
.listing-list-loop .content .meta-middle .meta-middle-unit .icon .stm-icon-fuel {
position: relative;
top: -1px;
font-size: 14px;
}
.listing-list-loop .content .meta-middle .meta-middle-unit .icon .stm-icon-engine_fill {
position: relative;
top: 0;
left: 1px;
font-size: 18px;
}
.listing-list-loop .content .meta-middle .meta-middle-unit .icon .stm-icon-transmission_fill {
position: relative;
top: 1px;
left: 1px;
font-size: 17px;
}
.listing-list-loop .content .meta-middle .meta-middle-unit .icon .stm-icon-drive_2 {
position: relative;
top: 1px;
left: 1px;
font-size: 17px;
}
.listing-list-loop .content .meta-middle .meta-middle-unit .name {
text-transform: uppercase;
color: var(--motors-text-alpha-color);
font-size: 10px;
}
@media (max-width: 767px) {
.listing-list-loop .content .meta-middle .meta-middle-unit .name {
margin: 0 5px 0 0;
font-size: 12px;
padding: 3px 0 0;
}
}
.listing-list-loop .content .meta-middle .meta-middle-unit .value {
font-size: 14px;
margin-top: -5px;
margin-bottom: 0;
line-height: normal;
}
@media (max-width: 767px) {
.listing-list-loop .content .meta-middle .meta-middle-unit .value {
margin-top: 0;
}
}
.listing-list-loop .content .meta-bottom .listing-archive-dealer-info .dealer-img {
float: left;
margin-right: 17px;
vertical-align: top;
}
.listing-list-loop .content .meta-bottom .listing-archive-dealer-info .dealer-image {
float: left;
margin-right: 17px;
height: 42px;
width: 42px;
line-height: 42px;
vertical-align: top;
background-color: var(--motors-filter-inputs-color);
border-radius: 50%;
}
.listing-list-loop .content .meta-bottom .listing-archive-dealer-info .dealer-image a {
color: var(--motors-text-alpha-color);
text-decoration: none !important;
}
.listing-list-loop .content .meta-bottom .listing-archive-dealer-info .dealer-image img {
vertical-align: top;
width: 100%;
height: 100%;
max-height: 100%;
}
.listing-list-loop .content .meta-bottom .listing-archive-dealer-info .dealer-image img.stm-user-image {
display: inline-block;
border-radius: 50%;
}
.listing-list-loop .content .meta-bottom .listing-archive-dealer-info .dealer-image .stm-user-image-empty {
width: 42px;
height: 42px;
line-height: 42px;
text-align: center;
background-color: var(--motors-filter-inputs-color);
text-indent: 2px;
border-radius: 50%;
}
.listing-list-loop .content .meta-bottom .listing-archive-dealer-info .dealer-info-block {
overflow: hidden;
position: relative;
top: -3px;
display: inline-block;
max-width: 100%;
vertical-align: top;
}
.listing-list-loop .content .meta-bottom .listing-archive-dealer-info .dealer-info-block div.title {
text-decoration: none !important;
}
.listing-list-loop .content .meta-bottom .listing-archive-dealer-info .dealer-info-block .title {
display: block;
margin: 5px 0 1px;
padding-top: 0;
font-size: 13px;
line-height: 15px;
color: var(--motors-text-color);
font-weight: 400;
}
.listing-list-loop .content .meta-bottom .listing-archive-dealer-info .dealer-info-block .title a {
text-decoration: none;
border: 0;
outline: none;
}
.listing-list-loop .content .meta-bottom .listing-archive-dealer-info .dealer-info-block .dealer-information .phone {
display: inline-block;
margin-right: 12px;
font-size: 13px;
font-weight: 700;
vertical-align: top;
}
.listing-list-loop .content .meta-bottom .listing-archive-dealer-info .dealer-info-block .dealer-information i {
position: relative;
top: 0;
font-size: 14px;
color: var(--motors-accent-color);
margin-left: 1px;
margin-right: 4px;
}
.listing-list-loop .content .meta-bottom .listing-archive-dealer-info .dealer-info-block .dealer-information .stm-show-number {
display: inline-block;
margin-right: 12px;
font-size: 12px;
font-weight: 400;
vertical-align: top;
border-bottom: 1px dotted;
cursor: pointer;
position: relative;
min-width: 20px;
}
@media (max-width: 767px) {
.listing-list-loop .content .meta-bottom .listing-archive-dealer-info .dealer-info-block .dealer-information .stm-show-number {
margin-right: 0;
}
}
@media (max-width: 360px) {
.listing-list-loop .content .meta-bottom .listing-archive-dealer-info .dealer-info-block .dealer-information .stm-show-number {
font-size: 10px;
}
}
.listing-list-loop .content .meta-bottom .listing-archive-dealer-info .dealer-info-block .dealer-information .stm-show-number.load_number {
color: transparent;
}
.listing-list-loop .content .meta-bottom .listing-archive-dealer-info .dealer-info-block .dealer-information .stm-show-number.load_number:before {
content: "\f1ce";
display: block;
font-family: "Font Awesome 6 Free";
font-weight: 600;
color: var(--motors-text-alpha-color);
font-size: 15px;
position: absolute;
left: 0;
animation: spin 2s linear infinite;
}
.listing-list-loop .content .meta-bottom .listing-status {
text-align: center;
padding: 3px 10px;
margin: 5px 0 10px;
position: relative;
z-index: 55;
font-size: 12px;
line-height: 1.3;
font-weight: 600;
background: var(--motors-border-color);
color: var(--motors-text-alpha-color);
}
.listing-list-loop .content .meta-bottom .listing-status-pending {
background: var(--motors-notice-bg-color);
color: var(--motors-success-text-color);
}
.listing-list-loop .content .meta-bottom .listing-status-sold {
background: var(--motors-notice-bg-color);
color: var(--motors-notice-text-color);
}
.listing-list-loop .content .meta-bottom .listing-status-featured {
background: var(--motors-success-bg-color);
color: var(--motors-success-text-color);
}
.listing-list-loop .content .meta-bottom .listing-owner-actions {
position: relative;
z-index: 55;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 4px;
margin: 0 0 5px;
}
.listing-list-loop .content .meta-bottom .listing-owner-actions .action-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 9px 9px 8px;
background-color: var(--motors-bg-contrast);
border: 1px solid var(--motor-bg-contrast);
border-radius: 4px;
min-height: 36px;
min-width: 36px;
color: var(--motors-contrast-text-color);
font-size: 14px;
line-height: 1.2;
margin: 0 0 5px;
}
.listing-list-loop .content .meta-bottom .listing-owner-actions .action-btn:hover {
background-color: var(--motors-accent-color);
border-color: var(--motors-accent-color);
}
.listing-list-loop .content .meta-bottom .listing-owner-actions .action-btn-light {
background-color: var(--motors-bg-contrast);
border-color: var(--motors-bg-contrast);
color: var(--motors-contrast-text-color);
}
.listing-list-loop .content .meta-bottom .listing-owner-actions .action-btn-light:hover {
background-color: var(--motors-accent-color);
border-color: var(--motors-accent-color);
}
.listing-list-loop .content .meta-bottom .listing-owner-actions .action-btn i {
font-size: 115%;
}
.listing-list-loop .content .stm-car-view-more {
display: none;
}
@media (max-width: 767px) {
.listing-list-loop .content .stm-car-view-more {
display: block;
width: 100%;
max-width: 100%;
text-align: center;
}
}
@media (max-width: 767px) {
.listing-list-loop .content .single-car-actions > ul {
margin: 0 0 5px;
}
}
.listing-list-loop .stm-listing-favorite {
position: absolute;
left: 7px;
bottom: 7px;
padding: 3px 5px 3px 6px;
background: var(--motors-bg-alpha-contrast);
color: var(--motors-contrast-text-color);
border-radius: 2px;
font-size: 16px;
opacity: 0;
z-index: 20;
}
.listing-list-loop .stm-listing-favorite:hover {
background: var(--motors-bg-contrast);
cursor: pointer;
}
.listing-list-loop .stm-listing-favorite.active {
background-color: var(--motors-accent-color);
opacity: 1;
}
.listing-list-loop .image:hover .stm-listing-compare,
.listing-list-loop .image:hover .stm-listing-favorite,
.listing-list-loop .image:hover .stm-car-medias {
opacity: 1;
}
@media (max-width: 1024px) {
.listing-list-loop .image .stm-listing-compare,
.listing-list-loop .image .stm-listing-favorite,
.listing-list-loop .image .stm-car-medias {
opacity: 1;
}
}
body.stm-vl-plugin-pure.post-type-archive-listings .container {
--wp--style--global--content-size: 1080px;
}