<?php
/**
 * 1. BROWSER HEADER: 
 * Ye line browser ko batati hai ke ye PHP file nahi, balkay CSS file hai.
 */
header("Content-type: text/css; charset: UTF-8");

/**
 * 2. DATABASE CONNECTION:
 * Path check kar lena (file/db.php ya ../file/db.php)
 */
include '../file/db.php';

/**
 * 3. FETCH SETTINGS:
 */
try {
    $query = $pdo->query("SELECT body_bg, body_text, heading_color FROM header_settings WHERE id = 1");
    $settings = $query->fetch(PDO::FETCH_ASSOC);

    // Database se values uthana, agar na milein to default set karna
    $body_bg       = $settings['body_bg'] ?? '#faf8f5';
    $body_text     = $settings['body_text'] ?? '#3d2b1f';
    $heading_color = $settings['heading_color'] ?? '#3d2b1f';

} catch (PDOException $e) {
    // Error ki surat mein default colors
    $body_bg = "#faf8f5"; $body_text = "#3d2b1f"; $heading_color = "#3d2b1f";
}
?>


:root {
    /* Base Colors */
    --primary-beige: #F5F0E8;
    --cream: #FAF8F5;
    --gold: #D4AF37;
    --gold-hover: #B8960C;
    --dark-brown: #3D2B1F;
    --light-brown: #8B7355;
    --white: #FFFFFF;
    --text-dark: #2C2C2C;
    --text-light: #6B6B6B;
    --shadow: rgba(0, 0, 0, 0.08);
    
    /* Body Colors */
    --body-bg: <?php echo $body_bg; ?>;
    --body-text: <?php echo $body_text; ?>;
    --heading-color: <?php echo $heading_color; ?>;
    
    /* Hero Slider Colors */
    --hero-overlay-start: rgba(61,43,31,0.85);
    --hero-overlay-mid: rgba(61,43,31,0.4);
    --hero-overlay-end: rgba(0,0,0,0.2);
    --hero-heading-color: #fff;
    --hero-heading-gradient-start: #fff;
    --hero-heading-gradient-end: var(--gold);
    --hero-text-color: white;
    --hero-btn-bg: var(--gold);
    --hero-btn-text: white;
    --hero-btn-border: var(--gold);
    --hero-btn-hover-bg: transparent;
    --hero-btn-hover-text: var(--gold);
    --hero-btn-shadow: 0 15px 40px rgba(212,175,55,0.4);
    --hero-btn-shimmer: rgba(255,255,255,0.3);
    --hero-dot-inactive: rgba(255,255,255,0.4);
    --hero-dot-active: var(--gold);
    --hero-dot-border: white;
    --hero-arrow-bg: rgba(255,255,255,0.15);
    --hero-arrow-border: rgba(255,255,255,0.3);
    --hero-arrow-color: white;
    --hero-arrow-hover-bg: var(--gold);
    --hero-arrow-hover-border: var(--gold);
    
    /* Marquee Colors */
    --marquee-bg-start: var(--dark-brown);
    --marquee-bg-end: var(--light-brown);
    --marquee-text: white;
    --marquee-icon: var(--gold);
    
    /* Section Header Colors */
    --section-header-bg: transparent;
    --section-title-color: var(--dark-brown);
    --section-title-underline: var(--gold);
    --section-subtitle-color: var(--text-light);
    
    /* Product Card Colors */
    --product-card-bg: white;
    --product-card-shadow: 0 4px 20px var(--shadow);
    --product-card-hover-shadow: 0 20px 40px rgba(0,0,0,0.12);
    --product-image-bg: var(--primary-beige);
    
    /* Product Badge Colors */
    --badge-discount-bg: var(--gold);
    --badge-discount-text: white;
    --badge-trending-bg: #FF6B6B;
    --badge-trending-text: white;
    --badge-new-bg: #4ECDC4;
    --badge-new-text: white;
    
    /* Wishlist Button Colors */
    --wishlist-btn-bg: white;
    --wishlist-btn-color: var(--text-dark);
    --wishlist-btn-shadow: 0 2px 10px rgba(0,0,0,0.1);
    --wishlist-btn-hover-bg: #FF6B6B;
    --wishlist-btn-hover-color: white;
    --wishlist-btn-active-bg: #FF6B6B;
    --wishlist-btn-active-color: white;
    
    /* Buy Now Button Colors */
    --buy-now-bg: var(--dark-brown);
    --buy-now-text: white;
    --buy-now-hover-bg: var(--gold);
    
    /* Product Info Colors */
    --product-name-color: var(--dark-brown);
    --product-price-color: var(--gold);
    --product-original-price-color: var(--text-light);
    
    /* Category Section Colors */
    --category-section-bg: var(--primary-beige);
    --category-overlay-start: rgba(61,43,31,0.9);
    --category-overlay-end: transparent;
    --category-title-color: white;
    --category-subtitle-color: white;
    
    /* Category Controls Colors */
    --scroll-btn-bg: white;
    --scroll-btn-color: var(--dark-brown);
    --scroll-btn-shadow: 0 4px 20px rgba(0,0,0,0.15);
    --scroll-btn-hover-bg: var(--gold);
    --scroll-btn-hover-color: white;
    
    /* Progress Track Colors */
    --progress-track-line: rgba(139,115,85,0.4);
    --progress-dot-inactive: rgba(139,115,85,0.3);
    --progress-dot-inactive-border: rgba(139,115,85,0.35);
    --progress-dot-active: var(--gold);
    --progress-dot-active-border: var(--gold);
    --progress-dot-passed: var(--light-brown);
    --progress-dot-passed-border: var(--light-brown);
    --progress-dot-active-glow: 0 0 0 4px rgba(212,175,55,0.2);
    
    /* Promo Banner Colors */
    --promo-bg-overlay-start: rgba(61,43,31,0.6);
    --promo-bg-overlay-end: rgba(0,0,0,0.4);
    --promo-title-color: white;
    --promo-text-color: white;
    --promo-btn-bg: transparent;
    --promo-btn-color: white;
    --promo-btn-border: var(--gold);
    --promo-btn-hover-bg: var(--gold);
    --promo-btn-hover-color: white;
    
    /* Reviews Section Colors */
    --reviews-section-bg: var(--primary-beige);
    --review-card-bg: white;
    --review-card-shadow: 0 4px 20px var(--shadow);
    --stars-color: var(--gold);
    --review-text-color: var(--text-light);
    --reviewer-name-color: var(--dark-brown);
    
    /* Features Section Colors */
    --features-section-bg: transparent;
    --feature-item-bg: transparent;
    --feature-icon-bg: var(--primary-beige);
    --feature-icon-color: var(--gold);
    --feature-icon-hover-bg: var(--gold);
    --feature-icon-hover-color: white;
    --feature-title-color: var(--dark-brown);
    --feature-desc-color: var(--text-light);
    
    /* FAQ Colors */
    --faq-container-bg: transparent;
    --faq-item-bg: white;
    --faq-item-shadow: 0 2px 10px var(--shadow);
    --faq-question-color: var(--text-dark);
    --faq-question-hover-bg: var(--primary-beige);
    --faq-icon-color: var(--gold);
    --faq-answer-color: var(--text-light);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--body-bg);
    color: var(--body-text);
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair Display', serif;
    font-weight: 500;
    color: var(--heading-color);
}

.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.fade-in.visible { opacity: 1; transform: translateY(0); }


/* Hero Slider */
.hero-slider { position: relative; width: 100%; height: 100vh; overflow: hidden; }
.slide {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    opacity: 0; transition: opacity 1.5s ease-in-out; z-index: 1;
}
.slide.active { opacity: 1; z-index: 2; }
.slide img {
    width: 100%; height: 100%; object-fit: cover;
    animation: kenBurns 8s ease-in-out infinite alternate;
}
@keyframes kenBurns {
    0%   { transform: scale(1) translate(0,0); }
    100% { transform: scale(1.15) translate(-2%,-2%); }
}
.slide-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(135deg, var(--hero-overlay-start) 0%, var(--hero-overlay-mid) 50%, var(--hero-overlay-end) 100%);
    display: flex; align-items: center; justify-content: center; z-index: 3;
}
.slide-content {
    text-align: center; color: var(--hero-text-color);
    max-width: 900px; padding: 2rem;
    animation: fadeInUp 1.2s cubic-bezier(0.4,0,0.2,1);
}
.slide-content h1 {
    font-size: 5rem; margin-bottom: 1.5rem; line-height: 1.1;
    text-shadow: 3px 3px 6px rgba(0,0,0,0.4);
    font-family: 'Playfair Display', serif; font-weight: 600; letter-spacing: 2px;
    background: linear-gradient(135deg, var(--hero-heading-gradient-start) 0%, var(--hero-heading-gradient-end) 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    animation: shimmer 3s ease-in-out infinite;
}
@keyframes shimmer { 0%,100% { opacity:1; } 50% { opacity:0.9; } }
@keyframes fadeInUp {
    from { opacity:0; transform:translateY(50px); }
    to   { opacity:1; transform:translateY(0); }
}
.slide-content p {
    font-size: 1.4rem; margin-bottom: 2.5rem; opacity: 0.95;
    font-weight: 300; letter-spacing: 1px; line-height: 1.6;
    max-width: 600px; margin-left: auto; margin-right: auto;
}
.btn-primary {
    display: inline-block; padding: 1.2rem 3rem;
    background: var(--hero-btn-bg); color: var(--hero-btn-text); text-decoration: none;
    font-weight: 500; letter-spacing: 2px; border-radius: 50px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); border: 2px solid var(--hero-btn-border);
    text-transform: uppercase; font-size: 0.9rem;
    position: relative; overflow: hidden;
}
.btn-primary::before {
    content: ''; position: absolute; top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, var(--hero-btn-shimmer), transparent);
    transition: 0.5s;
}
.btn-primary:hover::before { left: 100%; }
.btn-primary:hover {
    background: var(--hero-btn-hover-bg); color: var(--hero-btn-hover-text);
    transform: translateY(-3px); box-shadow: var(--hero-btn-shadow);
}
.slider-controls {
    position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);
    display: flex; gap: 1rem; z-index: 10;
}
.slider-dot {
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--hero-dot-inactive); cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); border: 2px solid transparent;
}
.slider-dot.active { background: var(--hero-dot-active); transform: scale(1.3); border-color: var(--hero-dot-border); }
.slider-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: var(--hero-arrow-bg); border: 1px solid var(--hero-arrow-border);
    width: 60px; height: 60px; border-radius: 50%; cursor: pointer;
    color: var(--hero-arrow-color); font-size: 1.3rem; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(10px); z-index: 10;
}
.slider-arrow:hover { background: var(--hero-arrow-hover-bg); border-color: var(--hero-arrow-hover-border); transform: translateY(-50%) scale(1.1); }
.slider-arrow.prev { left: 40px; }
.slider-arrow.next { right: 40px; }

/* Marquee */
.marquee-container {
    background: linear-gradient(135deg, var(--marquee-bg-start) 0%, var(--marquee-bg-end) 100%);
    color: var(--marquee-text); padding: 1.5rem 0; overflow: hidden;
    position: relative; min-height: 70px; display: flex; align-items: center;
}
.marquee { display: flex; animation: marquee 20s linear infinite; white-space: nowrap; }
.marquee-content {
    display: flex; gap: 4rem; padding: 0 2rem;
    font-size: 1.1rem; font-weight: 500; letter-spacing: 1px;
}
.marquee-content span { display: flex; align-items: center; gap: 0.5rem; }
@keyframes marquee { 0% { transform:translateX(0); } 100% { transform:translateX(-50%); } }

/* Sections */
section { padding: 5rem 2rem; max-width: 1400px; margin: 0 auto; }
.section-header { text-align: center; margin-bottom: 3rem; background: var(--section-header-bg); }
.section-header h2 {
    font-size: 2.5rem; color: var(--section-title-color); margin-bottom: 0.5rem;
    position: relative; display: inline-block; font-weight: 500;
}
.section-header h2::after {
    content: ''; position: absolute; bottom: -10px; left: 50%;
    transform: translateX(-50%); width: 60px; height: 3px; background: var(--section-title-underline);
}
.section-header p { color: var(--section-subtitle-color); margin-top: 1.5rem; font-size: 1.1rem; }

/* Products */
.products-grid {
    display: grid; grid-template-columns: repeat(4,1fr);
    gap: 1.5rem; max-width: 1400px; margin: 0 auto;
}
.product-card {
    background: var(--product-card-bg); border-radius: 16px; overflow: hidden;
    box-shadow: var(--product-card-shadow); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative;
}
.product-card:hover { transform: translateY(-10px); box-shadow: var(--product-card-hover-shadow); }
.product-image { position: relative; height: 320px; overflow: hidden; background: var(--product-image-bg); }
.product-image img { width:100%; height:100%; object-fit:cover; transition: transform 0.6s ease; }
.product-card:hover .product-image img { transform: scale(1.1); }
.discount-badge {
    position: absolute; top: 15px; left: 15px;
    background: var(--badge-discount-bg); color: var(--badge-discount-text); padding: 0.4rem 0.8rem;
    border-radius: 20px; font-size: 0.8rem; font-weight: 600; z-index: 2;
}
.trending-badge {
    position: absolute; top: 15px; right: 15px;
    background: var(--badge-trending-bg); color: var(--badge-trending-text); padding: 0.3rem 0.8rem;
    border-radius: 15px; font-size: 0.75rem; font-weight: 600; z-index: 2;
}
.trending-badge.new { background: var(--badge-new-bg); color: var(--badge-new-text); }
.wishlist-btn {
    position: absolute; top: 15px; right: 15px;
    background: var(--wishlist-btn-bg); border: none; width: 40px; height: 40px;
    border-radius: 50%; cursor: pointer; display: flex;
    align-items: center; justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); z-index: 2; box-shadow: var(--wishlist-btn-shadow);
    color: var(--wishlist-btn-color);
}
.wishlist-btn:hover { background: var(--wishlist-btn-hover-bg); color: var(--wishlist-btn-hover-color); transform: scale(1.1); }
.wishlist-btn.active { background: var(--wishlist-btn-active-bg); color: var(--wishlist-btn-active-color); }
.buy-now-btn {
    position: absolute; bottom: -50px; left: 50%; transform: translateX(-50%);
    background: var(--buy-now-bg); color: var(--buy-now-text); border: none;
    padding: 0.8rem 2rem; border-radius: 25px; cursor: pointer;
    font-weight: 500; transition: all 0.3s ease; opacity: 0; white-space: nowrap;
}
.product-card:hover .buy-now-btn { bottom: 20px; opacity: 1; }
.buy-now-btn:hover { background: var(--buy-now-hover-bg); }
.product-info { padding: 1.5rem; }
.product-name { font-family:'Playfair Display',serif; font-size:1.1rem; color: var(--product-name-color); margin-bottom:0.5rem; }
.product-price { font-size:1.1rem; font-weight:600; color: var(--product-price-color); }
.original-price { text-decoration:line-through; color: var(--product-original-price-color); margin-left:0.5rem; font-size:0.9rem; }

/* ── CATEGORIES ─────────────────────────────────────── */
.categories-section {
    background: var(--category-section-bg);
    padding: 5rem 0; overflow: hidden; position: relative;
}
.categories-container {
    max-width: 1400px; margin: 0 auto;
    padding: 0 2rem; position: relative;
}
.categories-scroll {
    display: flex; gap: 2rem; overflow-x: auto; scroll-behavior: smooth;
    padding: 1rem 0 2rem; scrollbar-width: none; -ms-overflow-style: none;
}
.categories-scroll::-webkit-scrollbar { display: none; }
.category-card {
    min-width: 280px; height: 380px; position: relative;
    border-radius: 20px; overflow: hidden; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.category-card:hover { transform: scale(1.05); }
.category-card img { width:100%; height:100%; object-fit:cover; transition: transform 0.6s ease; }
.category-card:hover img { transform: scale(1.1); }
.category-overlay {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: linear-gradient(to top, var(--category-overlay-start), var(--category-overlay-end));
    padding: 2rem; color: var(--category-title-color);
}
.category-overlay h3 { font-size:1.5rem; margin-bottom:0.5rem; }
.category-overlay p  { font-size:0.9rem; opacity:0.9; }

/* ── FLOATING ARROWS ─────────────────────────────────── */
.category-controls {
    position: absolute;
    left: 0; right: 0;
    display: flex; justify-content: space-between; align-items: center;
    padding: 0 1rem;
    pointer-events: none;
    z-index: 10;
    /* top set by JS */
}
.scroll-btn {
    background: var(--scroll-btn-bg); border: none;
    width: 50px; height: 50px; border-radius: 50%;
    cursor: pointer; box-shadow: var(--scroll-btn-shadow);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); display: flex;
    align-items: center; justify-content: center;
    color: var(--scroll-btn-color); font-size: 1.2rem;
    pointer-events: all;
}
.scroll-btn:hover { background: var(--scroll-btn-hover-bg); color: var(--scroll-btn-hover-color); transform: scale(1.1); }

/* ── PROGRESS TRACK ──────────────────────────────────────
   Track width = (N dots × dot-size) + ((N-1) × gap-between-dots)
   gap-between-dots is set to 50px in JS.
   The dashed ::before line spans from centre of dot-0 to centre of dot-N.
   left: half-dot-size; right: half-dot-size keeps it between dot centres.
─────────────────────────────────────────────────────── */
.category-progress-wrapper {
    display: flex; justify-content: center; align-items: center;
    padding: 0.8rem 0 1.5rem;
}
.category-progress-track {
    position: relative;
    display: flex; align-items: center; justify-content: space-between;
    /* width injected by JS */
}
.category-progress-track::before {
    content: '';
    position: absolute; top: 50%; transform: translateY(-50%);
    left: 6px; right: 6px;   /* 6px = half of 12px dot */
    height: 2px;
    background-image: repeating-linear-gradient(
        to right,
        var(--progress-track-line) 0px, var(--progress-track-line) 6px,
        transparent 6px, transparent 13px
    );
    z-index: 0;
}
.progress-dot {
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--progress-dot-inactive);
    border: 2px solid var(--progress-dot-inactive-border);
    transition: all 0.35s cubic-bezier(0.4,0,0.2,1);
    position: relative; z-index: 1; cursor: pointer; flex-shrink: 0;
}
.progress-dot.active {
    background: var(--progress-dot-active); border-color: var(--progress-dot-active-border);
    transform: scale(1.5); box-shadow: var(--progress-dot-active-glow);
}
.progress-dot.passed { background: var(--progress-dot-passed); border-color: var(--progress-dot-passed-border); }

/* Promo Banner */
.simple-promo-banner {
    position: relative; width: 100%; height: 500px;
    overflow: hidden; display: flex; align-items: center; justify-content: center;
    background-image: url('https://images.unsplash.com/photo-1445205170230-053b83016050?w=1920&h=1080&fit=crop');
    background-position: center; background-repeat: no-repeat; background-size: cover;
}
.simple-promo-overlay {
    position: absolute; top:0; left:0; width:100%; height:100%;
    background: linear-gradient(135deg, var(--promo-bg-overlay-start) 0%, var(--promo-bg-overlay-end) 100%); z-index:1;
}
.simple-promo-content {
    position:relative; z-index:2; text-align:center; color: var(--promo-title-color); padding:2rem; max-width:800px;
}
.simple-promo-content h2 { font-family:'Playfair Display',serif; font-size:3.5rem; font-weight:600; margin-bottom:1rem; letter-spacing:2px; }
.simple-promo-content p  { font-family:'Poppins',sans-serif; font-size:1.2rem; font-weight:300; margin-bottom:2rem; opacity:0.9; }
.simple-promo-btn {
    display:inline-block; padding:1rem 3rem; background: var(--promo-btn-bg); color: var(--promo-btn-color);
    text-decoration:none; font-weight:500; letter-spacing:2px;
    border:2px solid var(--promo-btn-border); text-transform:uppercase; font-size:0.9rem; transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.simple-promo-btn:hover { background: var(--promo-btn-hover-bg); color: var(--promo-btn-hover-color); }

/* Reviews */
.reviews-section { background: var(--reviews-section-bg); padding: 5rem 2rem; }
.reviews-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; max-width:1400px; margin:0 auto; }
.review-card { background: var(--review-card-bg); padding:2.5rem; border-radius: 20px; box-shadow: var(--review-card-shadow); transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1); text-align:center; }
.review-card:hover { transform:translateY(-5px); }
.reviewer-img { width:80px; height:80px; border-radius:50%; object-fit:cover; margin-bottom:1rem; border: 3px solid var(--gold); }
.stars { color: var(--stars-color); margin-bottom:1rem; font-size:1.1rem; }
.review-text { font-style:italic; color: var(--review-text-color); line-height:1.8; margin-bottom:1rem; font-size:0.95rem; }
.reviewer-name { font-weight:600; color: var(--reviewer-name-color); font-family:'Playfair Display',serif; }

/* Features */
.features-section { padding: 5rem 2rem; background: var(--features-section-bg); }
.features-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; max-width:1400px; margin:0 auto; text-align:center; }
.feature-item { padding:2rem; transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1); background: var(--feature-item-bg); }
.feature-item:hover { transform:translateY(-5px); }
.feature-icon { width:70px; height:70px; background: var(--feature-icon-bg); border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 1.5rem; font-size:1.5rem; color: var(--feature-icon-color); transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.feature-item:hover .feature-icon { background: var(--feature-icon-hover-bg); color: var(--feature-icon-hover-color); transform:rotateY(360deg); }
.feature-item h3 { font-size:1.2rem; margin-bottom:0.5rem; color: var(--feature-title-color); font-family:'Playfair Display',serif; }
.feature-item p  { color: var(--feature-desc-color); font-size:0.9rem; }

/* FAQ */
.faq-container { max-width:800px; margin:0 auto; background: var(--faq-container-bg); }
.faq-item { background: var(--faq-item-bg); margin-bottom: 1rem; border-radius: 12px; overflow:hidden; box-shadow: var(--faq-item-shadow); }
.faq-question { padding: 1.5rem; display:flex; justify-content:space-between; align-items:center; cursor:pointer; transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1); font-weight:500; }
.faq-question:hover { background: var(--faq-question-hover-bg); }
.faq-question h3 { font-family:'Poppins',sans-serif; font-size:1.1rem; font-weight:500; color: var(--faq-question-color); }
.faq-icon { transition:transform 0.3s ease; color: var(--faq-icon-color); }
.faq-item.active .faq-icon { transform:rotate(180deg); }
.faq-answer { max-height:0; overflow:hidden; transition:max-height 0.3s ease,padding 0.3s ease; padding:0 1.5rem; }
.faq-item.active .faq-answer { max-height:200px; padding:0 1.5rem 1.5rem; }
.faq-answer p { color: var(--faq-answer-color); line-height:1.8; }

/* ── RESPONSIVE ────────────────────────────────────── */
@media (max-width: 1024px) {
    .reviews-grid    { grid-template-columns: repeat(2,1fr); }
    .features-grid   { grid-template-columns: repeat(2,1fr); }
    .products-grid   { grid-template-columns: repeat(2,1fr); }
    .simple-promo-banner { height:400px; }
    .simple-promo-content h2 { font-size:2.8rem; }
}
@media (max-width: 768px) {
    .slide-content h1 { font-size:2.8rem; }
    .slide-content p  { font-size:1.1rem; }
    .products-grid   { grid-template-columns:repeat(2,1fr); gap:1rem; }
    .product-image   { height:220px; }
    .reviews-section { padding:3rem 1rem; }
    .reviews-grid {
        display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
        gap:1rem; padding-bottom:1rem; -webkit-overflow-scrolling:touch;
        scrollbar-width:none; -ms-overflow-style:none;
    }
    .reviews-grid::-webkit-scrollbar { display:none; }
    .review-card { min-width:280px; max-width:280px; scroll-snap-align:start; flex-shrink:0; padding:1.5rem; }
    .features-section { padding:3rem 1rem; }
    .features-grid {
        display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
        gap:1rem; padding-bottom:1rem; -webkit-overflow-scrolling:touch;
        scrollbar-width:none; -ms-overflow-style:none;
    }
    .features-grid::-webkit-scrollbar { display:none; }
    .feature-item { min-width:200px; max-width:200px; scroll-snap-align:start; flex-shrink:0; background: var(--product-card-bg); border-radius:20px; box-shadow: var(--product-card-shadow); padding:1.5rem; }
    .simple-promo-banner { height:350px; }
    .simple-promo-content { padding:1.5rem; }
    .simple-promo-content h2 { font-size:2.2rem; }
    .simple-promo-content p  { font-size:1rem; }
    .hero-slider { height:90vh; }
    .slider-arrow { width:45px; height:45px; font-size:1rem; }
    .slider-arrow.prev { left:15px; }
    .slider-arrow.next { right:15px; }
    .category-controls { padding:0 0.5rem; }
    .scroll-btn { width:42px; height:42px; font-size:1rem; }
}
@media (max-width: 480px) {
    .slide-content h1    { font-size:2.2rem; }
    .marquee-content     { font-size:0.9rem; }
    .products-grid       { gap:0.8rem; }
    .product-image       { height:180px; }
    .product-info        { padding:1rem; }
    .product-name        { font-size:0.95rem; }
    .product-price       { font-size:1rem; }
    .review-card         { min-width:260px; max-width:260px; padding:1.5rem; }
    .reviewer-img        { width:60px; height:60px; }
    .review-text         { font-size:0.9rem; }
    .feature-item        { min-width:180px; max-width:180px; padding:1.5rem; }
    .feature-icon        { width:60px; height:60px; font-size:1.3rem; }
    .simple-promo-banner { height:300px; }
    .simple-promo-content h2 { font-size:1.8rem; }
    .simple-promo-btn    { padding:0.8rem 2rem; font-size:0.85rem; }
}