/*
Theme Name: Kascara
Description: Full Milanese Editorial Style
Version: 3.5
*/

/* --- 1. FONTS & CORE SETUP --- */
@import url('https://fonts.googleapis.com/css2?family=Tenor+Sans&family=Inter:wght@300;400;500&display=swap');

body { 
    margin: 0; 
    font-family: 'Inter', sans-serif; 
    color: #000; 
    background-color: #fff;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

.container { max-width: 1400px; margin: 0 auto; padding: 0 40px; }

/* --- 2. HEADER & NAVIGATION --- */
.announcement-bar { background: #000; color: #fff; text-align: center; padding: 12px 0; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; }

.header-main { display: flex; justify-content: space-between; align-items: center; padding: 40px 0; }
.header-left, .header-right { flex: 1; }
.header-right { text-align: right; }
.header-link { text-decoration: none; color: #000; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; }

.logo { flex: 0 0 auto; text-align: center; }
.logo h1 { font-family: 'Tenor Sans', sans-serif !important; font-size: 42px; letter-spacing: 12px; margin: 0; text-transform: uppercase; font-weight: 400; }
.logo a { text-decoration: none; color: #000; }

.main-navigation { border-top: 1px solid #f2f2f2; border-bottom: 1px solid #f2f2f2; padding: 18px 0; }
.nav-menu { list-style: none; display: flex; justify-content: center; gap: 45px; padding: 0; margin: 0; }
.nav-menu li a { text-decoration: none; color: #000; font-size: 12px; letter-spacing: 2.5px; text-transform: uppercase; }

/* --- 3. HERO & POSTER SECTIONS --- */
.hero-section { height: 80vh; background: #f9f9f9; display: flex; align-items: center; justify-content: center; text-align: center; }
.hero-text h2 { font-family: 'Tenor Sans', sans-serif !important; font-size: 56px; letter-spacing: 6px; text-transform: uppercase; font-weight: 400; }

.poster-banner { width: 100%; height: 75vh; background: #f8f8f8; display: flex; align-items: center; justify-content: center; text-align: center; margin: 80px 0; }
.poster-content h2 { font-family: 'Tenor Sans', sans-serif !important; font-size: 52px; letter-spacing: 12px; text-transform: uppercase; font-weight: 400; }

/* --- 4. PRODUCT GRID (ALIGNMENT FIX) --- */
.product-grid-container {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.product-card {
    flex: 1;
    min-width: 250px;
    text-align: center;
    margin-bottom: 40px;
}

/* Forces perfect box size regardless of image dimensions */
.product-img {
    width: 100%;
    aspect-ratio: 3 / 4; 
    background-color: #f4f4f4;
    margin-bottom: 20px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.product-info h4 {
    font-family: 'Tenor Sans', sans-serif !important;
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 400;
    margin: 0 0 5px 0;
}

.product-info span {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: #666;
    letter-spacing: 1px;
}

/* --- 5. RESPONSIVE --- */
@media (max-width: 768px) {
    .product-card { flex: 0 0 calc(50% - 10px); }
    .logo h1 { font-size: 30px; letter-spacing: 6px; }
}/* --- 1. FONTS & CORE --- */
@import url('https://fonts.googleapis.com/css2?family=Tenor+Sans&family=Inter:wght@300;400&display=swap');

body { margin: 0; font-family: 'Inter', sans-serif; color: #000; -webkit-font-smoothing: antialiased; }
.container { max-width: 1400px; margin: 0 auto; padding: 0 40px; }
.section-padding { padding: 100px 0; }
.section-title { text-align: center; margin-bottom: 60px; }
.section-title h2 { font-family: 'Tenor Sans', sans-serif !important; font-size: 32px; letter-spacing: 4px; text-transform: uppercase; font-weight: 400; }

/* --- 2. HEADER --- */
.announcement-bar { background: #000; color: #fff; text-align: center; padding: 12px 0; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; }
.header-main { display: flex; justify-content: space-between; align-items: center; padding: 40px 0; }
.logo h1 { font-family: 'Tenor Sans', sans-serif !important; font-size: 42px; letter-spacing: 12px; margin: 0; text-transform: uppercase; font-weight: 400; }
.logo a { text-decoration: none; color: #000; }
.header-link { text-decoration: none; color: #000; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; }
.main-navigation { border-top: 1px solid #f2f2f2; border-bottom: 1px solid #f2f2f2; padding: 18px 0; }
.nav-menu { list-style: none; display: flex; justify-content: center; gap: 45px; padding: 0; margin: 0; }
.nav-menu li a { text-decoration: none; color: #000; font-size: 12px; letter-spacing: 2.5px; text-transform: uppercase; }

/* --- 3. SECTIONS --- */
.hero-section { height: 85vh; background: #f9f9f9; display: flex; align-items: center; justify-content: center; text-align: center; }
.hero-text h2 { font-family: 'Tenor Sans', sans-serif !important; font-size: 64px; letter-spacing: 8px; text-transform: uppercase; font-weight: 400; margin-bottom: 10px; }
.btn-minimal { display: inline-block; padding: 15px 30px; border: 1px solid #000; text-decoration: none; color: #000; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; margin-top: 20px; transition: 0.3s; }
.btn-minimal:hover { background: #000; color: #fff; }

.poster-banner { width: 100%; height: 75vh; background: #1a1a1a; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; }
.poster-content h2 { font-family: 'Tenor Sans', sans-serif !important; font-size: 52px; letter-spacing: 12px; text-transform: uppercase; font-weight: 400; }
.btn-minimal-white { display: inline-block; padding: 15px 30px; border: 1px solid #fff; text-decoration: none; color: #fff; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; margin-top: 20px; }

/* --- 4. GRID ALIGNMENT (CRITICAL) --- */
.product-grid, .category-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.category-grid { grid-template-columns: repeat(3, 1fr); }

.product-card, .category-item { text-align: center; }

/* Perfect Size Box Fix */
.product-img, .category-img {
    width: 100%;
    aspect-ratio: 3 / 4; /* Ensures all boxes are the same height */
    overflow: hidden;
    background: #f4f4f4;
    margin-bottom: 20px;
}
.product-img img, .category-img img { width: 100%; height: 100%; object-fit: cover; }

.product-info h4, .category-item h3 { font-family: 'Tenor Sans', sans-serif !important; font-size: 14px; letter-spacing: 2px; text-transform: uppercase; font-weight: 400; margin: 0 0 5px 0; }
.product-info span { font-size: 12px; color: #888; }

/* --- 5. FOOTER --- */
.site-footer { padding: 80px 0 40px; border-top: 1px solid #f2f2f2; background: #fff; }
.footer-grid { display: flex; justify-content: space-between; gap: 40px; }
.footer-col { flex: 1; }
.footer-col h3 { font-family: 'Tenor Sans', sans-serif; font-size: 16px; letter-spacing: 2px; margin-bottom: 20px; }
.footer-col p, .footer-col ul { font-size: 13px; color: #666; line-height: 1.8; }
.footer-col ul { list-style: none; padding: 0; }
.footer-col ul li a { text-decoration: none; color: #666; }
.footer-bottom { text-align: center; padding-top: 60px; font-size: 11px; color: #aaa; letter-spacing: 1px; }

/* --- 6. MOBILE --- */
@media (max-width: 992px) {
    .product-grid { grid-template-columns: repeat(2, 1fr); }
    .category-grid { grid-template-columns: 1fr; }
    .hero-text h2 { font-size: 42px; }
}/* --- 1. CORE & TYPOGRAPHY --- */
@import url('https://fonts.googleapis.com/css2?family=Tenor+Sans&family=Inter:wght@300;400&display=swap');

body { margin: 0; font-family: 'Inter', sans-serif; color: #000; overflow-x: hidden; }
.container { max-width: 1400px; margin: 0 auto; padding: 0 40px; }
.section-padding { padding: 80px 0; }
.section-title h2 { font-family: 'Tenor Sans', sans-serif !important; text-align: center; font-size: 32px; letter-spacing: 4px; text-transform: uppercase; font-weight: 400; margin-bottom: 50px; }

/* --- 2. AUTOMATIC SLIDER (THE MOVING PHOTOS) --- */
.slider-container {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    padding: 20px 0;
}

.slider-track {
    display: flex;
    width: calc(250px * 16); /* Total width of all items duplicated */
    animation: marquee 30s linear infinite;
}

.slider-track:hover {
    animation-play-state: paused; /* Slides stop when user hovers */
}

@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-250px * 4)); } /* Moves by the width of the original set */
}

.product-card-slide {
    flex: 0 0 250px;
    margin: 0 15px;
    text-align: center;
}

/* Perfect Size Alignment (Screenshot 58 Fix) */
.product-img, .category-img {
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: #f4f4f4;
    margin-bottom: 15px;
}

.product-img img, .category-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-info h4 {
    font-family: 'Tenor Sans', sans-serif !important;
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 10px 0 5px;
}

/* --- 3. OTHER SECTIONS (POSTER & GRID) --- */
.hero-section { height: 80vh; background: #f9f9f9; display: flex; align-items: center; justify-content: center; text-align: center; }
.hero-text h2 { font-family: 'Tenor Sans', sans-serif !important; font-size: 56px; letter-spacing: 8px; text-transform: uppercase; }

.poster-banner { width: 100%; height: 60vh; background: #1a1a1a; color: #fff; display: flex; align-items: center; justify-content: center; text-align: center; }
.poster-content h2 { font-family: 'Tenor Sans', sans-serif !important; font-size: 48px; letter-spacing: 10px; text-transform: uppercase; }

.category-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.category-item h3 { font-family: 'Tenor Sans', sans-serif !important; font-size: 14px; letter-spacing: 2px; text-transform: uppercase; margin-top: 15px; text-align: center; }

.btn-minimal { display: inline-block; padding: 12px 25px; border: 1px solid #000; text-decoration: none; color: #000; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; margin-top: 20px; }