:root {
--carousel-primary-color: #2c3e50;
--carousel-secondary-color: #1e435e;
--carousel-background: #ffffff;
--carousel-gray-bg: #f0f0f0;
--carousel-text-color: #333333;
--carousel-light-text: #666666;
--carousel-border-color: #ffffff;
--carousel-shadow: 0 2px 15px rgba(0,0,0,0.1);
--carousel-orange: #0e7300;
--carousel-spec-blue: #007acc;
--carousel-transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
} .products-carousel-wrapper {
position: relative;
width: 100%;
max-width: 1600px;
margin: 40px auto;
padding: 0;
box-sizing: border-box;
overflow: visible;
display: flex;
justify-content: center;
}  .products-carousel {
width: 1510px;
overflow: hidden;
position: relative;
padding: 20px 0;
margin: 0;
} .carousel-track {
display: flex;
transition: transform 0.5s ease-in-out;
gap: 20px;
padding: 5px 10px;
} .carousel-item {
flex: 0 0 auto;
width: 280px;
scroll-snap-align: start;
} .carousel-item:first-child {
margin-left: 0;
}
.carousel-item:last-child {
margin-right: 0;
} .carousel-product-card {
background: var(--carousel-background);
border: 1px solid var(--carousel-border-color);
border-radius: 8px;
overflow: hidden;
transition: var(--carousel-transition);
box-shadow: 0 -1px 8px rgba(0,0,0,0.06), 
0 2px 12px rgba(0,0,0,0.08),
2px 0 8px rgba(0,0,0,0.05),
-2px 0 8px rgba(0,0,0,0.05);
height: 100%;
max-height: 520px; display: flex;
flex-direction: column;
} .carousel-item {
box-sizing: border-box;
}
.carousel-product-card:hover {
transform: translateY(-5px);
box-shadow: 0 -2px 15px rgba(0,0,0,0.1), 
0 4px 20px rgba(0,0,0,0.15),
4px 0 15px rgba(0,0,0,0.1),
-4px 0 15px rgba(0,0,0,0.1);
}
.carousel-product-image {
position: relative;
width: 100%;
height: 200px; display: flex;
align-items: center; justify-content: center;
background: var(--carousel-background);
padding: 0px;
box-sizing: border-box;
border-bottom: 1px solid var(--carousel-border-color);
margin: 30; }
.carousel-product-img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain; transition: transform 0.3s ease;
margin: 30px;
}
.carousel-product-card:hover .carousel-product-img {
transform: scale(1.05);
}
.carousel-no-image {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: var(--carousel-gray-bg);
color: var(--carousel-light-text);
font-size: 0.9em;
} .carousel-product-badge {
position: absolute;
top: 10px;
right: 10px;
background: var(--carousel-secondary-color);
color: white;
padding: 4px 10px;
border-radius: 12px;
font-size: 0.85em;
font-weight: 500;
z-index: 1;
} .carousel-product-content {
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
flex: 1;
gap: 0px;
} .carousel-product-title {
font-size: 1em; color: var(--carousel-primary-color);
margin: 0 0 5px 0; font-weight: 600;
line-height: 1.3;
word-wrap: break-word;
min-height: 2.6em;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.carousel-product-card:hover .carousel-product-title {
color: var(--carousel-secondary-color);
} .carousel-product-meta {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
width: 100%;
} .carousel-product-manufacturer {
background: white;
border: 2px solid var(--carousel-spec-blue);
color: var(--carousel-spec-blue);
padding: 8px 12px;
border-radius: 8px;
font-size: 0.85em;
font-weight: 600;
transition: all 0.3s ease;
min-width: 56px;
min-height: 56px;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
}
.carousel-product-card:hover .carousel-product-manufacturer {
background: var(--carousel-spec-blue);
color: white;
} .carousel-check-price-button {
margin-top: auto;
background-color: var(--carousel-orange) !important;
color: white !important;
border: 2px solid var(--carousel-orange) !important;
padding: 10px 30px;
border-radius: 15px;
font-weight: 600;
font-size: 1em !important;
line-height: 1.2;
text-align: center;
text-decoration: none;
transition: all 0.3s ease;
width: 100%;
box-sizing: border-box;
display: inline-block;
letter-spacing: 0.05em !important;
cursor: pointer;
outline: none; }
.carousel-check-price-button:focus {
outline: none; }
.carousel-check-price-button:hover {
background-color: white !important;
color: var(--carousel-orange) !important;
border: 2px solid var(--carousel-orange) !important;
transform: translateY(-2px);
} .carousel-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 100;
background: rgba(255, 255, 255, 0.9);
border: 2px solid var(--carousel-primary-color);
color: var(--carousel-primary-color);
width: 45px;
height: 45px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 10;
transition: all 0.3s ease;
font-size: 24px;
font-weight: bold;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.carousel-nav:hover {
background: var(--carousel-primary-color);
color: white;
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.carousel-nav:active {
transform: translateY(-50%) scale(0.95);
}
.carousel-prev {
left: 5px;
}
.carousel-next {
right: 5px;
}
.carousel-nav:disabled {
opacity: 0.3;
cursor: not-allowed;
pointer-events: none;
} .carousel-indicators {
display: none;
}
.carousel-indicator {
width: 12px;
height: 12px;
border-radius: 50%;
background: #ddd;
border: 2px solid transparent;
cursor: pointer;
transition: all 0.3s ease;
padding: 0;
}
.carousel-indicator:hover {
background: #bbb;
transform: scale(1.2);
}
.carousel-indicator.active {
background: var(--carousel-primary-color);
border-color: var(--carousel-primary-color);
transform: scale(1.3);
} .no-products-message {
text-align: center;
padding: 40px;
font-size: 1.1em;
color: var(--carousel-light-text);
} @media (min-width: 1666px) {
.products-carousel { width: 1500px;
}
}
@media (min-width: 1400px) and (max-width: 1665px) {
.products-carousel { width: 1200px;
}
} @media (min-width: 1200px) and (max-width: 1399px) {
.products-carousel { width: 900px;
}
} @media (min-width: 950px) and (max-width: 1199px) {
.products-carousel { width: 900px;
}
}
@media (min-width: 769px) and (max-width: 950px) {
.products-carousel { width: 600px;
}
}
@media (min-width: 260px) and (max-width: 768px) {
.products-carousel { width: 300px;
}
.carousel-product-image {
height: 180px; padding: 15px;
}
.carousel-product-card {
max-height: 480px;
} .carousel-product-img {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
} @keyframes slideIn {
from {
opacity: 0;
transform: translateX(-20px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.carousel-item {
animation: slideIn 0.3s ease-out;
} @media (hover: none) and (pointer: coarse) {
.products-carousel {
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth;
}
}