/* --- Hero Carousel --- */
.carousel-container {
max-width: 1400px;
margin: 2rem auto;
padding: 0 var(--spacing-unit);
position: relative;
border-radius: 12px;
overflow: hidden;
}
.carousel-wrapper {
display: flex;
transition: transform 0.6s ease-in-out;
will-change: transform;
}
.carousel-slide {
min-width: 100%;
position: relative;
aspect-ratio: 16 / 5.7;
flex-shrink: 0;
}
.carousel-slide .carousel-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
opacity: 0;
transition: opacity 0.4s ease-in;
}
.carousel-slide .carousel-img.loaded {
opacity: 1;
}
/* picture element inside slide must fill it */
.carousel-slide picture {
display: block;
width: 100%;
height: 100%;
}
.carousel-content {
position: absolute;
top: 50%;
left: 40px;
transform: translateY(-50%);
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
padding: 2.5rem;
border-radius: 12px;
max-width: 380px;
box-shadow: var(--shadow-md);
border: 1px solid rgba(255,255,255,0.5);
}
.carousel-content.right {
left: auto;
right: 40px;
text-align: right;
}
.hero-title {
font-size: 2rem;
font-weight: 800;
color: var(--primary-black);
margin-bottom: 0.5rem;
line-height: 1.2;
}
.hero-subtitle {
font-size: 1.1rem;
color: var(--text-gray);
margin-bottom: 1.5rem;
font-weight: 500;
}
.btn-elevated {
background-color: var(--primary-black);
color: var(--white);
padding: 0.8rem 2rem;
border-radius: 6px;
font-weight: 600;
font-size: 1rem;
display: inline-block;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
transition: all 0.2s;
}
.btn-elevated:hover {
transform: translateY(-2px);
box-shadow: 0 6px 12px rgba(0,0,0,0.15);
background-color: #222;
}
.btn-primary-blue {
background-color: var(--primary-blue);
color: var(--white);
padding: 0.8rem 2rem;
border-radius: 6px;
font-weight: 600;
font-size: 1rem;
display: inline-block;
box-shadow: 0 4px 10px rgba(0, 86, 179, 0.3);
transition: all 0.2s;
}
.btn-primary-blue:hover {
background-color: var(--primary-dark-blue);
transform: translateY(-2px);
box-shadow: 0 6px 15px rgba(0, 86, 179, 0.4);
}
/* Carousel Navigation */
.carousel-nav {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 10px;
z-index: 10;
}
.carousel-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(255,255,255,0.5);
border: 2px solid rgba(255,255,255,0.8);
cursor: pointer;
transition: all 0.3s;
padding: 0;
}
.carousel-dot.active {
background: var(--primary-blue);
border-color: var(--primary-blue);
transform: scale(1.2);
}
/* Carousel Arrow Buttons */
.carousel-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(255,255,255,0.85);
border: none;
cursor: pointer;
font-size: 1.3rem;
color: var(--text-dark);
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
box-shadow: 0 2px 10px rgba(0,0,0,0.12);
}
.carousel-arrow:hover {
background: var(--white);
box-shadow: 0 4px 16px rgba(0,0,0,0.18);
}
.carousel-arrow.prev { left: 16px; }
.carousel-arrow.next { right: 16px; }
/* --- Horizontal Scroll Sections --- */
.section-container {
max-width: 1400px;
margin: 4rem auto;
padding: 0 var(--spacing-unit);
}
.section-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 1.5rem;
}
.section-title {
font-size: 1.75rem;
font-weight: 800;
color: var(--primary-black);
letter-spacing: -0.5px;
}
.view-all-link {
font-weight: 600;
color: var(--primary-blue);
font-size: 0.95rem;
}
.scroll-wrapper {
display: flex;
gap: 1.5rem;
overflow-x: auto;
padding-bottom: 1.5rem;
scroll-behavior: smooth;
-ms-overflow-style: none;
scrollbar-width: none;
}
.scroll-wrapper::-webkit-scrollbar { display: none; }
/* Category Icons */
.category-item {
min-width: 130px;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.8rem;
cursor: pointer;
}
.cat-icon-circle {
width: 110px;
height: 110px;
border-radius: 50%;
background: var(--white);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border: 1px solid #eee;
box-shadow: var(--shadow-sm);
transition: all 0.3s;
}
.category-item:hover .cat-icon-circle {
box-shadow: var(--shadow-md);
transform: translateY(-5px);
border-color: var(--primary-blue);
}
.cat-icon-circle img { width: 100%; height: 100%; object-fit: cover; }
.cat-name {
font-size: 0.9rem;
font-weight: 600;
text-align: center;
color: var(--text-dark);
line-height: 1.3;
}
/* Product Cards (Horizontal) */
.product-card-h {
min-width: 240px;
background: var(--white);
border-radius: 12px;
overflow: hidden;
cursor: pointer;
transition: all 0.3s;
border: 1px solid transparent;
}
.product-card-h:hover {
box-shadow: var(--shadow-lg);
transform: translateY(-5px);
border-color: #eee;
}
.prod-img-box {
width: 100%;
padding-top: 100%;
position: relative;
background: #f9f9f9;
}
.prod-img-box img {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
object-fit: contain;
padding: 1.5rem;
}
.price-badge {
position: absolute;
top: 12px; left: 12px;
background: var(--primary-blue);
color: white;
font-size: 0.75rem;
padding: 5px 10px;
border-radius: 20px;
font-weight: 700;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.prod-info { padding: 1rem; }
.prod-title { font-size: 0.95rem; font-weight: 600; margin-bottom: 0.3rem; color: var(--text-dark); }
.prod-price { font-size: 0.85rem; color: var(--text-gray); }
/* --- Mid Banners --- */
.mid-banners {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
max-width: 1400px;
margin: 2rem auto;
padding: 0 var(--spacing-unit);
}
.mid-banner {
position: relative;
height: 400px;
border-radius: 12px;
overflow: hidden;
box-shadow: var(--shadow-md);
}
.mid-banner img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.mid-banner:hover img { transform: scale(1.05); }
.mid-content {
position: absolute;
top: 50%;
left: 40px;
transform: translateY(-50%);
background: rgba(255,255,255,0.9);
backdrop-filter: blur(5px);
padding: 2.5rem;
border-radius: 12px;
max-width: 350px;
box-shadow: var(--shadow-md);
}
.mid-title { font-size: 1.8rem; font-weight: 800; margin-bottom: 0.5rem; color: var(--primary-black); }
.mid-desc { font-size: 1rem; color: var(--text-gray); margin-bottom: 1.5rem; }
.btn-group { display: flex; gap: 0.8rem; flex-wrap: wrap; }
.btn-outline-elevated {
border: 1px solid var(--primary-black);
background: transparent;
color: var(--primary-black);
padding: 0.6rem 1.2rem;
border-radius: 6px;
font-weight: 600;
font-size: 0.9rem;
transition: all 0.2s;
}
.btn-outline-elevated:hover {
background: var(--primary-black);
color: var(--white);
}
/* --- Newsletter --- */
.newsletter {
background: #f4f4f4;
padding: 5rem var(--spacing-unit);
text-align: center;
margin-top: 4rem;
border-radius: 12px;
max-width: 1400px;
margin-left: auto;
margin-right: auto;
}
.newsletter h2 { font-size: 2rem; font-weight: 800; margin-bottom: 0.5rem; color: var(--primary-black); }
.newsletter p { margin-bottom: 2rem; color: var(--text-gray); font-size: 1.1rem; }
.newsletter-form {
max-width: 500px;
margin: 0 auto;
display: flex;
gap: 0.5rem;
}
.newsletter-input {
flex-grow: 1;
padding: 1rem;
border: 1px solid #ccc;
border-radius: 6px;
font-size: 1rem;
}
.newsletter-input:focus { outline: 2px solid var(--primary-black); border-color: transparent; }

/* --- Carousel Button Spacing --- */
.btn-elevated-mt { margin-top: 0.5rem; }