/* === Reset & Base === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif;
    line-height: 1.7;
    color: #2d2d2d;
    background: #fafaf8;
}
a { color: #2e7d32; text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; }
.container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }

/* === Typography === */
h1 { font-size: 2.2rem; font-weight: 700; color: #1a1a1a; line-height: 1.3; }
h2 { font-size: 1.6rem; font-weight: 600; margin: 2rem 0 1rem; color: #1a1a1a; }
h3 { font-size: 1.2rem; font-weight: 600; margin: 1.5rem 0 0.75rem; }
p { margin-bottom: 1.2rem; color: #444; }

/* === Header === */
.site-header {
    background: #1a3a2d;
    padding: 15px 0;
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 3px solid #4caf50;
}
.site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.logo { font-size: 1.4rem; font-weight: 700; color: #fff !important; }
.logo span { color: #81c784; }
.site-header nav a {
    color: #c8e6c9 !important;
    margin-left: 24px;
    font-size: 0.95rem;
}
.site-header nav a:hover { color: #fff !important; text-decoration: none; }

/* === Hero === */
.hero {
    background: linear-gradient(135deg, #1a3a2d 0%, #2e7d32 100%);
    color: #fff;
    text-align: center;
    padding: 80px 20px;
}
.hero h1 { color: #fff; font-size: 2.5rem; margin-bottom: 16px; }
.hero p { color: #c8e6c9; font-size: 1.15rem; max-width: 600px; margin: 0 auto; }

/* === Product Grid === */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
    margin: 24px 0;
}
.product-card {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    border: 1px solid #e8e8e8;
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
}
.product-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}
.product-card .card-category {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #2e7d32;
    margin-bottom: 6px;
}
.product-card h3 { margin-top: 0; font-size: 1.1rem; }
.product-card h3 a { color: #1a1a1a; }
.product-card h3 a:hover { color: #2e7d32; }
.product-card .rating { color: #f9a825; font-size: 0.9rem; }
.product-card .reviews { color: #777; font-size: 0.85rem; }
.product-card p { font-size: 0.95rem; color: #555; flex-grow: 1; }
.product-card .price { font-size: 1.1rem; font-weight: 700; color: #2e7d32; margin: 10px 0; }
.product-card .btn { margin-top: auto; }

/* === Buttons === */
.btn {
    display: inline-block;
    padding: 12px 28px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    text-align: center;
    transition: all 0.2s;
    cursor: pointer;
}
.btn:hover { text-decoration: none; transform: scale(1.02); }
.btn-primary {
    background: #2e7d32;
    color: #fff !important;
}
.btn-primary:hover { background: #1b5e20; }
.btn-secondary {
    background: transparent;
    color: #2e7d32 !important;
    border: 2px solid #2e7d32;
}
.btn-secondary:hover { background: #e8f5e9; }

/* === Product Review Page === */
.product-review { padding: 40px 0; }
.breadcrumbs {
    font-size: 0.9rem;
    color: #777;
    margin-bottom: 24px;
}
.breadcrumbs a { color: #2e7d32; }
.product-header { margin-bottom: 24px; }
.product-header h1 { font-size: 1.8rem; }
.product-meta { margin-top: 8px; color: #555; }
.product-meta .rating { color: #f9a825; font-size: 1.1rem; }

/* === Affiliate CTA === */
.affiliate-cta {
    background: #e8f5e9;
    border: 2px solid #a5d6a7;
    border-radius: 12px;
    padding: 24px;
    text-align: center;
    margin: 24px 0;
}
.affiliate-cta .price-tag {
    font-size: 1.8rem;
    font-weight: 700;
    color: #1b5e20;
    display: block;
    margin-bottom: 12px;
}
.affiliate-cta .btn { font-size: 1.1rem; padding: 14px 36px; }
.affiliate-note {
    font-size: 0.8rem;
    color: #888;
    margin-top: 8px;
}
.bottom-cta { margin: 40px 0; }

/* === Features === */
.feature-list { list-style: none; margin: 16px 0; }
.feature-list li {
    padding: 10px 0 10px 28px;
    position: relative;
    border-bottom: 1px solid #eee;
}
.feature-list li::before {
    content: "✓";
    color: #2e7d32;
    font-weight: 700;
    position: absolute;
    left: 0;
}

/* === Pros / Cons === */
.pros-cons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin: 32px 0;
}
.pros, .cons {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    border: 1px solid #e8e8e8;
}
.pros h3 { color: #2e7d32; }
.cons h3 { color: #c62828; }
.pros ul, .cons ul { list-style: none; margin-top: 12px; }
.pros li, .cons li { padding: 6px 0 6px 24px; position: relative; font-size: 0.95rem; }
.pros li::before { content: "✓"; color: #2e7d32; position: absolute; left: 0; font-weight: 700; }
.cons li::before { content: "✗"; color: #c62828; position: absolute; left: 0; }

/* === === */
.verdict-score {
    display: inline-block;
    background: #1a3a2d;
    color: #fff;
    padding: 16px 28px;
    border-radius: 12px;
    font-size: 1.2rem;
    font-weight: 700;
    margin-top: 16px;
}

/* === Categories === */
.featured-products, .categories-section, .about-cta {
    padding: 60px 0;
}
.featured-products { background: #fff; }
.categories-section { background: #f5f5f2; }
.category-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; }
.category-card {
    background: #fff;
    border-radius: 12px;
    padding: 32px;
    text-align: center;
    border: 1px solid #e8e8e8;
    transition: transform 0.2s;
}
.category-card:hover { transform: translateY(-3px); text-decoration: none; }
.category-card h3 { color: #1a3a2d; margin: 0 0 8px; }
.category-card p { color: #666; margin: 0; font-size: 0.9rem; }

.about-cta {
    background: #e8f5e9;
    text-align: center;
}
.about-cta p { font-size: 1.1rem; max-width: 700px; margin: 0 auto 20px; }

/* === Footer === */
.site-footer {
    background: #1a3a2d;
    color: #c8e6c9;
    padding: 48px 0 0;
}
.footer-content {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 32px;
    padding-bottom: 32px;
}
.footer-section h3 { color: #fff; font-size: 1rem; margin-bottom: 12px; }
.footer-section p { color: #a5d6a7; font-size: 0.9rem; }
.footer-section a {
    display: block;
    color: #a5d6a7 !important;
    font-size: 0.9rem;
    margin-bottom: 6px;
}
.footer-section a:hover { color: #fff !important; }
.footer-bottom {
    border-top: 1px solid #2e7d32;
    padding: 20px 0;
    text-align: center;
    font-size: 0.85rem;
}
.footer-bottom p { color: #81c784; margin: 4px 0; }

/* === Responsive === */
@media (max-width: 768px) {
    h1 { font-size: 1.6rem; }
    .hero h1 { font-size: 1.8rem; }
    .hero { padding: 50px 20px; }
    .product-grid { grid-template-columns: 1fr; }
    .pros-cons { grid-template-columns: 1fr; }
    .category-grid { grid-template-columns: 1fr; }
    .footer-content { grid-template-columns: 1fr; }
    .site-header nav a { margin-left: 12px; font-size: 0.85rem; }
}

/* === Affiliate Disclosure === */
.affiliate-disclosure {
    background: #fff8e1;
    border-left: 4px solid #f9a825;
    padding: 12px 16px;
    margin: 16px 0;
    font-size: 0.85rem;
    color: #666;
    border-radius: 0 8px 8px 0;
}

/* === Category Page === */
.category-page { padding: 40px 0; }
.category-intro { font-size: 1.1rem; margin-bottom: 32px; }