.card-container {
    width: 100%;
    margin-bottom: 20px;
}
.car-card {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
  border: 1px solid #f3f4f6;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), box-shadow 0.4s ease;
  cursor: pointer;
}
.car-head-title {
    display: flex;
    justify-content: space-between;
	margin-bottom: 15px;
}

.car-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -8px rgba(0,0,0,0.08);
}

@media (min-width: 768px) {
  .car-card { flex-direction: row;  height: 215px; }
}

/* --- Carousel Section --- */
.carousel-section {
  position: relative;
  height: 192px;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .carousel-section { width: 280px; height: 100%; }
}

.slider-track {
  display: flex;
  overflow-x: auto;
  height: 100%;
  width: 100%;
}

.slider-track::-webkit-scrollbar { display: none; }
.slider-track { }

.slide {
  width: 100%;
  height: 100%;
  object-fit: cover;
  flex-shrink: 0;
  scroll-snap-align: start;
}

.gradient-overlay { position: absolute; inset: 0; display: flex; pointer-events: none; }
.gradient-left { width: 40px; height: 100%; background: linear-gradient(to right, rgba(0,0,0,0.2), transparent); }
.gradient-right { width: 40px; height: 100%; background: linear-gradient(to left, rgba(0,0,0,0.2), transparent); margin-left: auto; }

.carousel-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255,255,255,0.9); backdrop-filter: blur(4px);
  border: none; box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  display: none; align-items: center; justify-content: center;
  color: #374151; cursor: pointer; z-index: 10; opacity: 0;
  transition: opacity 0.3s, background 0.2s;
}

.carousel-btn:hover { background: #ffffff; }
.btn-left { left: 8px; }
.btn-right { right: 8px; }

@media (min-width: 768px) {
  .carousel-btn { display: flex; }
  .carousel-section:hover .carousel-btn { opacity: 1; }
}

.dots-container { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; z-index: 10; }
.slider-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.5); transition: all 0.3s; }
.slider-dot.active { background: #ffffff; transform: scale(1.4); }

/* --- Content Section --- */
.card-content { padding: 16px; display: flex; flex-direction: column; justify-content: space-between; flex: 1; min-width: 0; }
@media (min-width: 768px) { .card-content { padding: 20px; } }

.location-row { display: flex;align-items: flex-end;
    flex-direction: column;}
.location-info { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 500; color: #6b7280; }
span.time-ago { font-size: 11px; color: #9ca3af; }
.location-info span{font-size:12px;}
.car-title { 
        font-size: 20px;
    font-family: "Open Sans", sans-serif;
    color: #111827;
    letter-spacing: -0.025em;
    line-height: 1.2; }

.user-row-text{
	border-top: 1px solid #f3f4f6;
    padding-top: 10px;
	    display: flex;
    align-items: baseline;
	justify-content: space-between;
}

.user-row-text p {
	    color: #545454;
    font-size: 14px;
}

.car-subtitle { 
	font-size: 15px;
    color: #333; 
	}

.specs-row { 
	display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 12px;
    margin: 12px 0;
    color: #333;
	}
@media (min-width: 768px) { .specs-row { margin: auto 0; } }
.spec-item { display: flex;
    align-items: center;
    gap: 6px;
    font-size: 15px; }

.icon { color: #9ca3af; flex-shrink: 0; }
.icon-xs { width: 13px; height: 13px; }
.icon-sm { width: 16px; height: 16px; }

.price-row { display: flex; align-items: baseline; gap: 10px;     padding-top: 7px; }
.price-main { 
	font-size: 18px;
    color: #1967d7;
    letter-spacing: -0.025em;
    line-height: 1;
    margin: 0;
    font-family: "Inter", sans-serif;
    font-weight: 900; }
.price-secondary { font-size: 12px; color: #9ca3af;  margin: 0; }
.vin-row {
    display: flex;
    background: #4caf502e;
    border-radius: 7px;
    align-items: center;
    padding: 3px 10px;
	margin-left:auto;
	margin-left: 20px;
   
}
.vin-row span{
color: #4caf50;
    display: flex;
    align-items: center;
    font-size: 12px;
    letter-spacing: 1px;
}


.condition-row {
    display: flex;
    background: #ff572226;
    border-radius: 7px;
    align-items: center;
    padding: 3px 10px;
   
}
.condition-row span{
color: #f93c00;
    display: flex;
    align-items: center;
    font-size: 12px;
    letter-spacing: 1px;
}

.other-row {
    display: flex;
    align-items: center;
    margin-left: auto;
}

.gallery {
            position: relative;
            
            flex-shrink: 0;
            overflow: hidden;
            
            background: #f5f5f5;
        }
 .gallery-slide {
            position: absolute;
            inset: 0;
            opacity: 0;
        }

        .gallery-slide.active {
            opacity: 1;
        }


        .gallery-progress {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 3px;
            display: flex;
            z-index: 3;
            opacity: 0;
        }

        .gallery:hover .gallery-progress {
            opacity: 1;
        }

        .gallery-progress-segment {
            flex: 1;
            background: rgba(0, 0, 0, 0.12);
        }

        .gallery-progress-segment.active {
            background: #1967d7;
        }		

@media screen and (max-width:594px){
        .block__cars-main {
           
            margin: initial;
        }
		
		span.time-ago{
			display:none;
		}
    }
	
@media screen and (max-width:768px){	

	.gallery-progress{
		display:none;
	}
	
	.gallery-slide{
		position: initial; 
		inset: initial;  
		opacity: 1;
	}
	
	.slide{	
		width: 260px;
        height: 200px;
        flex-shrink: 0;
        object-fit: cover;
	
	}
	
	.carousel-section{
		 height: initial;
		     position: initial;
   
			flex-shrink: initial;
	}
	
	img.slide.mobile-slide {
		margin-left: 2px;
	}
	
	.slider-track {
    
			display: flex;
            overflow-x: auto;
            
            -webkit-overflow-scrolling: touch;
			height: initial;
        width: initial;
	}
	
	.car-card:hover {
	  transform: initial;
	  box-shadow: initial;
	}
}