/*
 * Generated by ACE Design System
 * Palette: home (Home & Living)
 * Typography: minimal-elegant (Minimal & Elegant)
 * Niche: robot-vacuums
 */

@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400,600&family=Source+Sans+Pro:wght@300,400,600&display=swap');

:root {
  --color-primary: #6B7280;
  --color-primary-dark: #4B5563;
  --color-primary-light: #9CA3AF;
  --color-secondary: #92785C;
  --color-secondary-dark: #786248;
  --color-secondary-light: #B8A68D;
  --color-accent: #3B82F6;
  --color-accent-dark: #2563EB;
  --color-background: #FAF9F7;
  --color-background-alt: #F3F2EE;
  --color-text: #1F2937;
  --color-text-light: #4B5563;
  --color-text-muted: #9CA3AF;
  --color-border: #E5E4E0;
  --color-success: #059669;
  --color-warning: #D97706;
  --color-error: #DC2626;
  --color-link: #3B82F6;
  --color-link-hover: #2563EB;

  --font-heading: 'Lora', Georgia, serif;
  --font-body: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-size-h1: 2.5rem;
  --font-size-h2: 2rem;
  --font-size-h3: 1.5rem;
  --font-size-h4: 1.25rem;
  --font-size-body: 1.125rem;
  --font-size-small: 0.9375rem;
  --line-height-heading: 1.4;
  --line-height-body: 1.8;
  --letter-spacing-heading: 0em;
  --letter-spacing-body: 0.01em;

  --section-gap: 5rem;
  --card-gap: 1.5rem;
  --container-padding: 1.5rem;
  --content-max-width: 1280px;
  --radius-small: 6px;
  --radius-medium: 16px;
  --radius-large: 20px;
  --radius-button: 6px;
  --shadow-small: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-medium: 0 6px 16px rgba(0,0,0,0.06);
  --shadow-large: 0 8px 30px rgba(0,0,0,0.08);
  --transition-speed: 0.25s;
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font-body); font-size: var(--font-size-body); line-height: var(--line-height-body); letter-spacing: var(--letter-spacing-body); color: var(--color-text); background-color: var(--color-background); }

h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); line-height: var(--line-height-heading); letter-spacing: var(--letter-spacing-heading); color: var(--color-text); margin-top: 0; }
h1 { font-size: var(--font-size-h1); margin-bottom: 1.5rem; font-weight: 700; }
h2 { font-size: var(--font-size-h2); margin-bottom: 1.25rem; font-weight: 600; }
h3 { font-size: var(--font-size-h3); margin-bottom: 1rem; font-weight: 600; }
h4 { font-size: var(--font-size-h4); margin-bottom: 0.75rem; font-weight: 600; }
p { margin: 0 0 1.25rem 0; color: var(--color-text-light); }
a { color: var(--color-link); text-decoration: none; transition: color var(--transition-speed) ease; }
a:hover { color: var(--color-link-hover); }
img { max-width: 100%; height: auto; }

.container { max-width: var(--content-max-width); margin: 0 auto; padding: 0 var(--container-padding); }

.site-header { background: var(--color-background); border-bottom: 1px solid var(--color-border); position: sticky; top: 0; z-index: 100; }
.header-content { display: flex; justify-content: space-between; align-items: center; padding: 1rem 0; }
.site-title { font-size: 1.5rem; margin: 0; }
.site-title a { color: var(--color-text); text-decoration: none; }
.site-title a:hover { color: var(--color-primary); }
.site-nav { display: flex; gap: 2rem; }
.site-nav a { color: var(--color-text-light); font-weight: 500; font-size: var(--font-size-small); text-transform: uppercase; letter-spacing: 0.05em; }
.site-nav a:hover, .site-nav a.active { color: var(--color-primary); }

.site-main { padding: var(--section-gap) 0; min-height: 60vh; }

.article { max-width: 800px; margin: 0 auto; }
.article-header { margin-bottom: 3rem; text-align: center; }
.article-title { font-size: var(--font-size-h1); margin-bottom: 1rem; }
.article-meta { color: var(--color-text-muted); font-size: var(--font-size-small); }
.article-content { font-size: var(--font-size-body); }
.article-content h2 { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--color-border); }
.article-content h3 { margin-top: 2rem; }
.article-content ul, .article-content ol { padding-left: 1.5rem; margin-bottom: 1.5rem; }
.article-content li { margin-bottom: 0.5rem; color: var(--color-text-light); }

.product-card { display: grid; grid-template-columns: 200px 1fr; gap: 2rem; padding: 2rem; background: var(--color-background-alt); border-radius: var(--radius-large); margin: 2rem 0; box-shadow: var(--shadow-medium); }
.product-image img { width: 100%; border-radius: var(--radius-medium); }
.product-info h2 { margin-top: 0; font-size: var(--font-size-h3); }
.product-rating { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; }
.product-rating .stars { color: var(--color-accent); font-size: 1.25rem; }
.buy-button { display: inline-block; padding: 0.875rem 1.75rem; background: var(--color-primary); color: white; font-weight: 600; border-radius: var(--radius-button); transition: all var(--transition-speed) ease; text-align: center; }
.buy-button:hover { background: var(--color-primary-dark); color: white; transform: translateY(-2px); box-shadow: var(--shadow-medium); }
.buy-button-large { padding: 1rem 2rem; font-size: 1.125rem; }
.affiliate-notice { margin-top: 1rem; font-size: var(--font-size-small); color: var(--color-text-muted); }

.pros-cons { display: grid; grid-template-columns: 1fr 1fr; gap: var(--card-gap); margin: 2rem 0; }
.pros, .cons { padding: 1.5rem; border-radius: var(--radius-medium); }
.pros { background: color-mix(in srgb, var(--color-success) 10%, var(--color-background)); border: 1px solid color-mix(in srgb, var(--color-success) 30%, transparent); }
.cons { background: color-mix(in srgb, var(--color-error) 10%, var(--color-background)); border: 1px solid color-mix(in srgb, var(--color-error) 30%, transparent); }
.pros h3, .cons h3 { margin-top: 0; font-size: var(--font-size-h4); }
.pros ul, .cons ul { margin: 0; padding-left: 1.25rem; }
.pros li, .cons li { margin-bottom: 0.5rem; }

.article-cta { text-align: center; padding: 3rem 2rem; background: var(--color-background-alt); border-radius: var(--radius-large); margin: 3rem 0; }
.article-cta h3 { margin-top: 0; }

.article-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--card-gap); margin: 2rem 0; }
.article-card { padding: 1.5rem; background: var(--color-background); border: 1px solid var(--color-border); border-radius: var(--radius-medium); transition: all var(--transition-speed) ease; }
.article-card:hover { box-shadow: var(--shadow-medium); border-color: var(--color-primary-light); }
.article-card h3 { margin-top: 0; font-size: var(--font-size-h4); }
.article-card h3 a { color: var(--color-text); }
.article-card h3 a:hover { color: var(--color-primary); }
.article-card p { font-size: var(--font-size-small); margin-bottom: 1rem; }
.read-more { font-size: var(--font-size-small); font-weight: 600; color: var(--color-primary); }
.view-all-link { display: inline-block; margin-top: 1rem; font-weight: 600; }

.category-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--card-gap); margin: 2rem 0; }
.category-card { padding: 2rem; background: var(--color-background-alt); border-radius: var(--radius-medium); text-align: center; transition: all var(--transition-speed) ease; }
.category-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-large); }
.category-card h3 { margin: 0 0 0.5rem 0; color: var(--color-text); }
.category-card p { margin: 0; font-size: var(--font-size-small); }

.home-hero { text-align: center; padding: 4rem 0; margin-bottom: 2rem; }
.home-hero h1 { font-size: calc(var(--font-size-h1) * 1.2); margin-bottom: 1rem; }
.hero-subtitle { font-size: 1.25rem; color: var(--color-text-light); max-width: 600px; margin: 0 auto; }

.site-footer { background: var(--color-secondary); color: var(--color-background); padding: 3rem 0; margin-top: var(--section-gap); }
.footer-content { text-align: center; }
.disclosure { max-width: 700px; margin: 0 auto 2rem; padding: 1.5rem; background: rgba(255,255,255,0.1); border-radius: var(--radius-medium); font-size: var(--font-size-small); }
.disclosure p { margin: 0; color: rgba(255,255,255,0.9); }
.footer-links { display: flex; justify-content: center; gap: 2rem; margin-bottom: 1.5rem; }
.footer-links a { color: rgba(255,255,255,0.8); font-size: var(--font-size-small); }
.footer-links a:hover { color: white; }
.copyright { font-size: var(--font-size-small); color: rgba(255,255,255,0.6); margin: 0; }

.cookie-consent { position: fixed; bottom: 0; left: 0; right: 0; background: var(--color-secondary); color: white; padding: 1rem; display: none; z-index: 1000; }
.cookie-consent.show { display: block; }
.cookie-consent-content { max-width: var(--content-max-width); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.cookie-consent p { margin: 0; font-size: var(--font-size-small); color: rgba(255,255,255,0.9); }
.cookie-consent button { padding: 0.5rem 1.5rem; background: var(--color-primary); color: white; border: none; border-radius: var(--radius-button); cursor: pointer; font-weight: 600; }

@media (max-width: 768px) {
  :root { --font-size-h1: 2rem; --font-size-h2: 1.5rem; --font-size-h3: 1.25rem; --section-gap: 3rem; }
  .site-nav { gap: 1rem; }
  .product-card { grid-template-columns: 1fr; text-align: center; }
  .product-image { max-width: 200px; margin: 0 auto; }
  .pros-cons { grid-template-columns: 1fr; }
  .article-grid { grid-template-columns: 1fr; }
  .cookie-consent-content { flex-direction: column; text-align: center; }
}