/* ===== BRASPUMP - Static Site Styles ===== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* ===== CSS Variables (Design Tokens) ===== */
:root {
  --background: hsl(210, 30%, 98%);
  --foreground: hsl(225, 50%, 15%);
  --card: hsl(0, 0%, 100%);
  --card-foreground: hsl(225, 50%, 15%);
  --primary: hsl(230, 60%, 28%);
  --primary-foreground: hsl(0, 0%, 100%);
  --secondary: hsl(200, 80%, 70%);
  --secondary-foreground: hsl(225, 50%, 15%);
  --muted: hsl(210, 25%, 93%);
  --muted-foreground: hsl(220, 15%, 46%);
  --accent: hsl(42, 90%, 52%);
  --accent-foreground: hsl(225, 50%, 15%);
  --destructive: hsl(0, 84.2%, 60.2%);
  --border: hsl(214, 25%, 88%);
  --input: hsl(214, 25%, 88%);
  --ring: hsl(230, 60%, 28%);
  --radius: 0.75rem;
  --navy: hsl(230, 60%, 28%);
  --navy-dark: hsl(230, 65%, 18%);
  --navy-light: hsl(230, 45%, 40%);
  --sky: hsl(200, 80%, 70%);
  --sky-light: hsl(200, 75%, 85%);
  --sky-pale: hsl(200, 60%, 94%);
  --gold: hsl(42, 90%, 52%);
  --gold-light: hsl(42, 85%, 65%);
  --gold-dark: hsl(42, 95%, 42%);
  --success: hsl(152, 60%, 42%);
  --success-foreground: hsl(0, 0%, 100%);
  --shadow-card: 0 4px 24px -4px hsla(230, 60%, 28%, 0.08);
  --shadow-card-hover: 0 12px 40px -8px hsla(230, 60%, 28%, 0.15);
  --shadow-gold: 0 4px 20px -4px hsla(42, 90%, 52%, 0.4);
}

/* ===== Reset & Base ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid var(--border); }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--background);
  color: var(--foreground);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
}
h1, h2, h3, h4, h5, h6 { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; line-height: 1.2; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; height: auto; display: block; }
button { cursor: pointer; font-family: inherit; }

/* ===== Layout ===== */
.container-brand { max-width: 80rem; margin: 0 auto; }
.section-padding { padding: 4rem 1rem; }
@media (min-width: 640px) { .section-padding { padding: 5rem 1.5rem; } }
@media (min-width: 1024px) { .section-padding { padding: 6rem 2rem; } }

/* ===== Animations ===== */
@keyframes fadeUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pulseGentle { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }
.animate-fade-up { animation: fadeUp 0.6s ease-out forwards; }
.animate-fade-in { animation: fadeIn 0.5s ease-out forwards; }
.animate-pulse-gentle { animation: pulseGentle 2s ease-in-out infinite; }
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }
[class*="animate-fade"] { opacity: 0; }

/* ===== Badge ===== */
.badge-silent {
  display: inline-flex; align-items: center; gap: 0.375rem;
  padding: 0.25rem 0.75rem; border-radius: 9999px;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
  background: hsla(42, 90%, 52%, 0.15);
  color: var(--gold-dark);
  border: 1px solid hsla(42, 90%, 52%, 0.3);
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  white-space: nowrap; border-radius: 0.5rem; font-size: 0.875rem; font-weight: 500;
  padding: 0.625rem 1rem; transition: all 0.3s; border: none; outline: none;
}
.btn:focus-visible { box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring); }
.btn svg { width: 1rem; height: 1rem; flex-shrink: 0; }
.btn-gold {
  background: var(--gold); color: var(--navy-dark); font-weight: 700;
  box-shadow: 0 4px 12px -2px hsla(42, 90%, 52%, 0.4);
}
.btn-gold:hover { background: var(--gold-light); box-shadow: 0 8px 20px -4px hsla(42, 90%, 52%, 0.5); }
.btn-hero {
  background: var(--gold); color: var(--navy-dark); font-weight: 800; font-size: 1.125rem;
  padding: 0.875rem 2.5rem; border-radius: 9999px;
  box-shadow: 0 4px 12px -2px hsla(42, 90%, 52%, 0.4);
}
.btn-hero:hover { background: var(--gold-light); }
.btn-hero-outline {
  border: 2px solid hsla(0, 0%, 100%, 0.4); color: var(--primary-foreground);
  font-weight: 600; font-size: 1rem; padding: 0.875rem 2rem; border-radius: 9999px;
  background: transparent;
}
.btn-hero-outline:hover { background: hsla(0, 0%, 100%, 0.1); }
.btn-outline {
  border: 1px solid var(--input); background: var(--background); color: var(--foreground);
  border-radius: 9999px;
}
.btn-outline:hover { background: var(--accent); color: var(--accent-foreground); }
.btn-whatsapp {
  background: var(--success); color: var(--success-foreground); font-weight: 600;
  border-radius: 9999px;
}
.btn-whatsapp:hover { opacity: 0.9; }
.btn-ghost { background: transparent; color: var(--foreground); border-radius: 9999px; }
.btn-ghost:hover { background: var(--muted); }
.btn-round { border-radius: 9999px; }
.btn-lg { padding: 0.875rem 2rem; font-size: 1rem; }
.btn-sm { padding: 0.5rem 0.75rem; font-size: 0.8125rem; }
.btn-full { width: 100%; }

/* ===== Card ===== */
.card-product {
  background: var(--card); border-radius: 1rem; overflow: hidden;
  transition: all 0.3s; box-shadow: var(--shadow-card);
}
.card-product:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-4px); }

/* ===== Header ===== */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  transition: all 0.3s; padding: 1rem 0;
}
.header.scrolled {
  background: hsla(0, 0%, 100%, 0.95); backdrop-filter: blur(12px);
  box-shadow: 0 2px 16px -4px hsla(230, 60%, 28%, 0.1); padding: 0.5rem 0;
}
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: 0 1rem; }
@media (min-width: 640px) { .header-inner { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .header-inner { padding: 0 2rem; } }
.header-logo { height: 2.5rem; }
@media (min-width: 640px) { .header-logo { height: 3rem; } }
.nav-desktop { display: none; align-items: center; gap: 2rem; }
@media (min-width: 768px) { .nav-desktop { display: flex; } }
.nav-link {
  font-size: 0.875rem; font-weight: 500; transition: color 0.2s;
  color: var(--primary-foreground);
}
.nav-link:hover { color: var(--gold); }
.header.scrolled .nav-link { color: var(--foreground); }
.header.scrolled .nav-link:hover { color: var(--gold); }
.mobile-toggle {
  display: flex; padding: 0.5rem; border-radius: 0.5rem; background: none;
  color: var(--primary-foreground); border: none;
}
.header.scrolled .mobile-toggle { color: var(--foreground); }
@media (min-width: 768px) { .mobile-toggle { display: none; } }
.mobile-menu {
  display: none; background: var(--card); border-top: 1px solid var(--border);
  padding: 1rem; flex-direction: column; gap: 0.75rem;
}
.mobile-menu.open { display: flex; }
@media (min-width: 768px) { .mobile-menu { display: none !important; } }
.mobile-menu a {
  color: var(--foreground); font-weight: 500; padding: 0.5rem 0.75rem;
  border-radius: 0.5rem; transition: background 0.2s;
}
.mobile-menu a:hover { background: var(--muted); }
.cart-btn {
  position: relative; padding: 0.5rem; border-radius: 9999px;
  background: none; border: none; transition: all 0.2s;
  color: var(--primary-foreground);
}
.header.scrolled .cart-btn { color: var(--foreground); }
.cart-btn:hover { background: hsla(0, 0%, 100%, 0.1); }
.header.scrolled .cart-btn:hover { background: var(--muted); }
.cart-badge {
  position: absolute; top: -0.25rem; right: -0.25rem;
  width: 1.25rem; height: 1.25rem; border-radius: 9999px;
  background: var(--accent); color: var(--accent-foreground);
  font-size: 0.75rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

/* ===== Hero ===== */
.hero {
  position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0;
}
.hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.hero-overlay {
  position: absolute; inset: 0; background: hsla(230, 65%, 18%, 0.8);
}
.hero-gradient {
  position: absolute; inset: 0; opacity: 0.3;
  background: linear-gradient(135deg, hsl(230, 60%, 28%) 0%, transparent 60%);
}
.hero-content {
  position: relative; z-index: 10; max-width: 48rem;
  padding: 8rem 1rem 4rem;
}
@media (min-width: 640px) { .hero-content { padding: 9rem 1.5rem 4rem; } }
.hero h1 {
  font-size: 2.25rem; font-weight: 800; color: var(--primary-foreground);
  line-height: 1.15; margin-bottom: 1.5rem;
}
@media (min-width: 640px) { .hero h1 { font-size: 3rem; } }
@media (min-width: 1024px) { .hero h1 { font-size: 3.75rem; } }
.hero h1 span { color: var(--gold); }
.hero-subtitle {
  font-size: 1.125rem; color: hsla(0, 0%, 100%, 0.8);
  margin-bottom: 2rem; max-width: 42rem;
}
@media (min-width: 640px) { .hero-subtitle { font-size: 1.25rem; } }
.proof-list { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 2.5rem; }
.proof-item {
  display: flex; align-items: center; gap: 0.5rem;
  background: hsla(0, 0%, 100%, 0.1); backdrop-filter: blur(4px);
  border-radius: 9999px; padding: 0.5rem 1rem;
  font-size: 0.875rem; color: hsla(0, 0%, 100%, 0.9);
}
.proof-item svg { color: var(--gold); width: 1rem; height: 1rem; }
.hero-ctas { display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 640px) { .hero-ctas { flex-direction: row; } }

/* ===== Quick Choice ===== */
.section-title { text-align: center; margin-bottom: 3rem; }
.section-title h2 {
  font-size: 1.875rem; font-weight: 800; color: var(--foreground); margin-bottom: 1rem;
}
@media (min-width: 640px) { .section-title h2 { font-size: 2.25rem; } }
.section-title p { color: var(--muted-foreground); font-size: 1.125rem; max-width: 42rem; margin: 0 auto; }
.grid-3 { display: grid; gap: 1.5rem; max-width: 64rem; margin: 0 auto; }
@media (min-width: 768px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
.choice-card {
  padding: 2rem; text-align: center; border: 2px solid transparent; transition: all 0.3s;
}
.choice-card:hover { border-color: var(--gold); }
.choice-icon {
  width: 4rem; height: 4rem; border-radius: 1rem;
  background: var(--sky-pale); display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1.25rem; transition: background 0.3s;
}
.choice-card:hover .choice-icon { background: hsla(42, 90%, 52%, 0.2); }
.choice-icon svg { width: 2rem; height: 2rem; color: var(--navy); }
.choice-card h3 { font-size: 1.25rem; font-weight: 700; color: var(--foreground); margin-bottom: 0.5rem; }
.choice-card p { color: var(--muted-foreground); font-size: 0.875rem; margin-bottom: 1rem; }
.choice-card .cta-link {
  color: var(--gold-dark); font-weight: 600; font-size: 0.875rem;
  margin-top: 1.5rem; display: block;
}
.choice-card:hover .cta-link { text-decoration: underline; }

/* ===== Silence Section ===== */
.silence-section {
  background: var(--navy); color: var(--primary-foreground);
  position: relative; overflow: hidden;
}
.silence-wave {
  position: absolute; top: 0; left: 0; right: 0; height: 4rem;
  background: var(--background); border-radius: 0 0 50% 50%; transform: scaleX(2);
}
.silence-grid {
  display: grid; gap: 3rem; align-items: center; position: relative; z-index: 10;
}
@media (min-width: 1024px) { .silence-grid { grid-template-columns: 1fr 1fr; } }
.silence-label {
  display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.5rem;
}
.silence-label-icon {
  width: 3rem; height: 3rem; border-radius: 9999px;
  background: hsla(42, 90%, 52%, 0.2); display: flex; align-items: center; justify-content: center;
}
.silence-label-icon svg { width: 1.5rem; height: 1.5rem; color: var(--gold); }
.silence-label span {
  color: var(--gold); font-weight: 600; font-size: 0.875rem;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.silence-section h2 { font-size: 1.875rem; font-weight: 800; margin-bottom: 1.5rem; line-height: 1.2; }
@media (min-width: 640px) { .silence-section h2 { font-size: 2.25rem; } }
.silence-section h2 span { color: var(--gold); }
.silence-text {
  color: hsla(0, 0%, 100%, 0.8); font-size: 1.125rem; line-height: 1.7; margin-bottom: 2rem;
}
.silence-quote {
  padding: 1.5rem; border-radius: 1rem;
  background: hsla(0, 0%, 100%, 0.05); border: 1px solid hsla(0, 0%, 100%, 0.1);
}
.silence-quote p { color: var(--gold); font-weight: 700; font-size: 1.125rem; font-style: italic; }
.silence-visual { display: flex; justify-content: center; }
.sound-circles { position: relative; }
.sound-outer {
  width: 16rem; height: 16rem; border-radius: 9999px;
  background: hsla(230, 45%, 40%, 0.3); display: flex; align-items: center; justify-content: center;
}
@media (min-width: 640px) { .sound-outer { width: 20rem; height: 20rem; } }
.sound-middle {
  width: 12rem; height: 12rem; border-radius: 9999px;
  background: hsla(230, 45%, 40%, 0.3); display: flex; align-items: center; justify-content: center;
  animation: pulseGentle 2s ease-in-out infinite;
}
@media (min-width: 640px) { .sound-middle { width: 15rem; height: 15rem; } }
.sound-inner {
  width: 8rem; height: 8rem; border-radius: 9999px;
  background: hsla(42, 90%, 52%, 0.2); display: flex; align-items: center; justify-content: center;
}
@media (min-width: 640px) { .sound-inner { width: 10rem; height: 10rem; } }
.sound-inner svg { width: 4rem; height: 4rem; color: var(--gold); }
@media (min-width: 640px) { .sound-inner svg { width: 5rem; height: 5rem; } }
.sound-strike {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
}
.sound-strike div {
  width: 100%; height: 0.25rem; background: hsla(42, 90%, 52%, 0.4);
  transform: rotate(45deg); border-radius: 9999px;
}
.silence-stats {
  margin-top: 4rem; display: grid; gap: 1.5rem; text-align: center;
}
@media (min-width: 640px) { .silence-stats { grid-template-columns: repeat(3, 1fr); } }
.stat-card {
  padding: 1.5rem; border-radius: 0.75rem; background: hsla(0, 0%, 100%, 0.05);
}
.stat-card .stat-title { color: var(--gold); font-weight: 800; font-size: 1.25rem; margin-bottom: 0.25rem; }
.stat-card .stat-desc { color: hsla(0, 0%, 100%, 0.6); font-size: 0.875rem; }

/* ===== Why Buy ===== */
.why-buy { background: var(--sky-pale); }
.benefits-grid { display: grid; gap: 1.5rem; max-width: 76rem; margin: 0 auto; }
@media (min-width: 640px) { .benefits-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .benefits-grid { grid-template-columns: repeat(5, 1fr); } }
.benefit-card {
  background: var(--card); border-radius: 1rem; padding: 1.5rem; text-align: center;
  box-shadow: 0 1px 4px hsla(0,0%,0%,0.04); transition: box-shadow 0.3s;
}
.benefit-card:hover { box-shadow: 0 4px 16px hsla(0,0%,0%,0.08); }
.benefit-icon {
  width: 3rem; height: 3rem; border-radius: 0.75rem;
  background: hsla(42, 90%, 52%, 0.15); display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1rem;
}
.benefit-icon svg { width: 1.5rem; height: 1.5rem; color: var(--gold-dark); }
.benefit-card h3 { font-weight: 700; font-size: 0.875rem; color: var(--foreground); margin-bottom: 0.25rem; }
.benefit-card p { color: var(--muted-foreground); font-size: 0.75rem; }

/* ===== Featured Products ===== */
.product-grid { display: grid; gap: 2rem; max-width: 64rem; margin: 0 auto; }
@media (min-width: 768px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }
.product-image-wrap {
  position: relative; background: var(--muted); padding: 1.5rem;
  display: flex; align-items: center; justify-content: center; height: 14rem;
}
.product-image-wrap img {
  height: 100%; width: auto; object-fit: contain;
  transition: transform 0.5s;
}
.card-product:hover .product-image-wrap img { transform: scale(1.05); }
.product-image-wrap .badge-silent { position: absolute; top: 1rem; left: 1rem; }
.product-info { padding: 1.5rem; }
.product-line {
  font-size: 0.75rem; color: var(--muted-foreground); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.25rem;
}
.product-name { font-size: 1.125rem; font-weight: 700; color: var(--foreground); margin-bottom: 0.25rem; }
.product-usage { font-size: 0.875rem; color: var(--muted-foreground); margin-bottom: 0.5rem; }
.product-price { font-size: 1.125rem; font-weight: 700; color: var(--accent); margin-bottom: 1rem; }
.product-actions { display: flex; gap: 0.5rem; }

/* ===== Shop Page ===== */
.shop-hero { background: var(--primary); color: var(--primary-foreground); padding: 3.5rem 1rem; text-align: center; }
.shop-hero h1 { font-size: 2.25rem; font-weight: 800; margin-bottom: 0.75rem; }
@media (min-width: 640px) { .shop-hero h1 { font-size: 3rem; } }
.shop-hero p { color: hsla(0, 0%, 100%, 0.8); font-size: 1.125rem; max-width: 36rem; margin: 0 auto; }
.filter-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-bottom: 2.5rem; }
.filter-btn { padding: 0.5rem 1.25rem; border-radius: 9999px; font-size: 0.875rem; font-weight: 500; border: 1px solid var(--input); background: var(--background); color: var(--foreground); transition: all 0.2s; }
.filter-btn.active, .filter-btn:hover { background: var(--gold); color: var(--navy-dark); border-color: var(--gold); font-weight: 700; }
.shop-grid { display: grid; gap: 1.5rem; }
@media (min-width: 640px) { .shop-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .shop-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .shop-grid { grid-template-columns: repeat(4, 1fr); } }
.shop-card { display: flex; flex-direction: column; height: 100%; }
.shop-card .product-image-wrap { height: 13rem; padding: 1.25rem; }
.shop-card .product-info { display: flex; flex-direction: column; flex: 1; padding: 1.25rem; }
.shop-card .product-name { font-size: 0.875rem; line-height: 1.4; }
.shop-card .product-usage { font-size: 0.75rem; margin-bottom: 0.75rem; }
.shop-card .product-price { font-size: 1rem; margin-top: auto; }

/* ===== Product Page ===== */
.product-page { padding-top: 6rem; padding-bottom: 4rem; }
.back-link {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.875rem; color: var(--muted-foreground); margin-bottom: 2rem; transition: color 0.2s;
}
.back-link:hover { color: var(--accent); }
.product-detail-grid { display: grid; gap: 3rem; }
@media (min-width: 1024px) { .product-detail-grid { grid-template-columns: 1fr 1fr; } }
.product-detail-image {
  background: var(--muted); border-radius: 1rem; padding: 2rem;
  display: flex; align-items: center; justify-content: center; position: relative;
}
.product-detail-image img { max-height: 24rem; width: auto; object-fit: contain; }
.product-detail-image .badge-silent { position: absolute; top: 1rem; left: 1rem; }
.detail-line { font-size: 0.75rem; color: var(--muted-foreground); font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; }
.detail-title { font-size: 1.875rem; font-weight: 800; color: var(--foreground); margin-top: 0.5rem; margin-bottom: 0.5rem; }
@media (min-width: 640px) { .detail-title { font-size: 2.25rem; } }
.detail-price { font-size: 1.5rem; font-weight: 700; color: var(--accent); margin-bottom: 1rem; }
.detail-highlights { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.5rem; }
.detail-highlight { display: flex; align-items: center; gap: 0.375rem; font-size: 0.875rem; color: var(--muted-foreground); }
.detail-highlight svg { width: 1rem; height: 1rem; color: var(--accent); }
.detail-description { color: hsla(225, 50%, 15%, 0.8); line-height: 1.7; margin-bottom: 2rem; }
.voltage-selector { margin-bottom: 1.5rem; }
.voltage-selector h3 { font-weight: 700; font-size: 0.875rem; color: var(--foreground); margin-bottom: 0.5rem; }
.voltage-options { display: flex; gap: 0.75rem; }
.voltage-btn {
  padding: 0.5rem 1rem; border-radius: 9999px; border: 1px solid var(--border);
  font-size: 0.875rem; font-weight: 500; background: transparent; color: var(--foreground); transition: all 0.2s;
}
.voltage-btn.active { border-color: var(--accent); background: hsla(42, 90%, 52%, 0.1); color: var(--accent-foreground); }
.voltage-btn:hover { border-color: var(--accent); }
.for-whom {
  background: var(--sky-pale); border-radius: 1rem; padding: 1.5rem; margin-bottom: 2rem;
}
.for-whom h3 { font-weight: 700; color: var(--foreground); margin-bottom: 0.75rem; }
.for-whom-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: hsla(225, 50%, 15%, 0.8); margin-bottom: 0.5rem; }
.for-whom-item svg { width: 1rem; height: 1rem; color: var(--success); }
.detail-ctas { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem; }
@media (min-width: 640px) { .detail-ctas { flex-direction: row; } .detail-ctas > * { flex: 1; } }
.specs-section { border-top: 1px solid var(--border); padding-top: 1.5rem; }
.specs-section h3 { font-weight: 700; color: var(--foreground); margin-bottom: 1rem; }
.spec-row { display: flex; justify-content: space-between; padding: 0.5rem 0; border-bottom: 1px solid hsla(214, 25%, 88%, 0.5); }
.spec-label { font-size: 0.875rem; color: var(--muted-foreground); }
.spec-value { font-size: 0.875rem; font-weight: 500; color: var(--foreground); }
.guarantees { margin-top: 2rem; background: var(--muted); border-radius: 1rem; padding: 1.5rem; }
.guarantees h3 { font-weight: 700; color: var(--foreground); margin-bottom: 0.75rem; }
.guarantee-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: hsla(225, 50%, 15%, 0.8); margin-bottom: 0.5rem; }
.guarantee-item svg { width: 1rem; height: 1rem; color: var(--accent); }

/* ===== Footer ===== */
.footer { background: var(--navy-dark); color: var(--primary-foreground); }
.footer-grid { display: grid; gap: 2.5rem; }
@media (min-width: 640px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: repeat(4, 1fr); } }
.footer-logo { height: 2.5rem; margin-bottom: 1rem; }
.footer-desc { color: hsla(0, 0%, 100%, 0.6); font-size: 0.875rem; line-height: 1.6; }
.footer h4 { font-weight: 700; color: var(--gold); margin-bottom: 1rem; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.05em; }
.footer-links { display: flex; flex-direction: column; gap: 0.5rem; }
.footer-links a, .footer-links span { color: hsla(0, 0%, 100%, 0.6); font-size: 0.875rem; transition: color 0.2s; }
.footer-links a:hover { color: var(--gold); }
.footer-contact { display: flex; flex-direction: column; gap: 0.75rem; }
.footer-contact a { display: flex; align-items: center; gap: 0.5rem; color: hsla(0, 0%, 100%, 0.6); font-size: 0.875rem; transition: color 0.2s; }
.footer-contact a:hover { color: var(--gold); }
.footer-contact svg { width: 1rem; height: 1rem; }
.footer-bottom {
  margin-top: 3rem; padding-top: 2rem; border-top: 1px solid hsla(0, 0%, 100%, 0.1); text-align: center;
}
.footer-bottom p { color: hsla(0, 0%, 100%, 0.4); font-size: 0.875rem; }

/* ===== WhatsApp Floating Button ===== */
.whatsapp-float {
  position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 50;
}
.whatsapp-float-inner {
  width: 3.5rem; height: 3.5rem; border-radius: 9999px;
  background: var(--success); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px hsla(152, 60%, 42%, 0.4);
  transition: transform 0.2s;
}
.whatsapp-float:hover .whatsapp-float-inner { transform: scale(1.1); }
.whatsapp-float svg { width: 1.75rem; height: 1.75rem; color: var(--success-foreground); }
.whatsapp-tooltip {
  position: absolute; bottom: 100%; right: 0; margin-bottom: 0.5rem;
  background: var(--card); color: var(--foreground); font-size: 0.75rem; font-weight: 500;
  padding: 0.5rem 0.75rem; border-radius: 0.5rem;
  box-shadow: 0 4px 16px hsla(0,0%,0%,0.1);
  opacity: 0; transition: opacity 0.2s; white-space: nowrap; pointer-events: none;
}
.whatsapp-float:hover .whatsapp-tooltip { opacity: 1; }

/* ===== Cart Drawer ===== */
.cart-overlay {
  position: fixed; inset: 0; background: hsla(0, 0%, 0%, 0.5); z-index: 60;
  opacity: 0; pointer-events: none; transition: opacity 0.3s;
}
.cart-overlay.open { opacity: 1; pointer-events: auto; }
.cart-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 100%; max-width: 28rem;
  background: var(--card); z-index: 70; transform: translateX(100%); transition: transform 0.3s;
  display: flex; flex-direction: column; box-shadow: -4px 0 24px hsla(0,0%,0%,0.15);
}
.cart-drawer.open { transform: translateX(0); }
.cart-header {
  padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.cart-header h2 { font-size: 1.125rem; font-weight: 700; display: flex; align-items: center; gap: 0.5rem; }
.cart-header h2 svg { color: var(--accent); }
.cart-close { background: none; border: none; padding: 0.5rem; border-radius: 0.5rem; color: var(--muted-foreground); }
.cart-close:hover { background: var(--muted); }
.cart-body { flex: 1; overflow-y: auto; padding: 1rem 1.5rem; }
.cart-empty { text-align: center; padding: 3rem 0; color: var(--muted-foreground); }
.cart-empty svg { width: 3rem; height: 3rem; margin: 0 auto 0.75rem; opacity: 0.3; }
.cart-item {
  display: flex; gap: 1rem; padding: 0.75rem; border-radius: 0.75rem;
  background: hsla(210, 25%, 93%, 0.5); align-items: center; margin-bottom: 1rem;
}
.cart-item img { width: 4rem; height: 4rem; object-fit: contain; border-radius: 0.5rem; background: var(--muted); padding: 0.25rem; }
.cart-item-info { flex: 1; min-width: 0; }
.cart-item-info .name { font-size: 0.875rem; font-weight: 700; color: var(--foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cart-item-info .voltage { font-size: 0.75rem; color: var(--muted-foreground); }
.cart-item-info .price { font-size: 0.875rem; font-weight: 700; color: var(--accent); margin-top: 0.125rem; }
.cart-item-controls { display: flex; align-items: center; gap: 0.5rem; }
.qty-btn {
  width: 1.75rem; height: 1.75rem; border-radius: 9999px; background: var(--muted);
  display: flex; align-items: center; justify-content: center; border: none; transition: background 0.2s;
}
.qty-btn:hover { background: var(--border); }
.qty-btn svg { width: 0.875rem; height: 0.875rem; }
.qty-value { font-size: 0.875rem; font-weight: 700; width: 1.25rem; text-align: center; }
.remove-btn {
  width: 1.75rem; height: 1.75rem; border-radius: 9999px; background: none; border: none;
  display: flex; align-items: center; justify-content: center;
  color: var(--destructive); margin-left: 0.25rem; transition: background 0.2s;
}
.remove-btn:hover { background: hsla(0, 84.2%, 60.2%, 0.1); }
.remove-btn svg { width: 0.875rem; height: 0.875rem; }
.cart-footer { padding: 1rem 1.5rem; border-top: 1px solid var(--border); }
.cart-total { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 0; margin-bottom: 0.75rem; }
.cart-total span:first-child { font-size: 0.875rem; color: var(--muted-foreground); }
.cart-total span:last-child { font-size: 1.25rem; font-weight: 800; color: var(--foreground); }
.cart-footer .btn { margin-bottom: 0.5rem; }

/* ===== Buyer Form ===== */
.buyer-form { display: flex; flex-direction: column; gap: 1rem; }
.form-group { display: flex; flex-direction: column; gap: 0.25rem; }
.form-group label { font-size: 0.875rem; font-weight: 500; color: var(--foreground); }
.form-group input {
  padding: 0.625rem 0.75rem; border: 1px solid var(--input); border-radius: 0.5rem;
  font-size: 0.875rem; background: var(--background); color: var(--foreground);
  outline: none; transition: border-color 0.2s;
}
.form-group input:focus { border-color: var(--ring); box-shadow: 0 0 0 2px hsla(230, 60%, 28%, 0.1); }
.form-error { font-size: 0.75rem; color: var(--destructive); }
.order-summary {
  background: hsla(210, 25%, 93%, 0.5); border-radius: 0.75rem; padding: 1rem; margin-top: 0.5rem;
}
.order-summary .summary-title { font-size: 0.75rem; color: var(--muted-foreground); font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.5rem; }
.summary-row { display: flex; justify-content: space-between; font-size: 0.875rem; padding: 0.25rem 0; }
.summary-row .label { color: hsla(225, 50%, 15%, 0.8); }
.summary-row .value { font-weight: 500; color: var(--foreground); }
.summary-total { display: flex; justify-content: space-between; padding-top: 0.5rem; margin-top: 0.5rem; border-top: 1px solid var(--border); }
.summary-total span { font-size: 0.875rem; font-weight: 800; color: var(--foreground); }

/* ===== 404 ===== */
.not-found { min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; }
.not-found h1 { font-size: 2rem; font-weight: 700; color: var(--foreground); margin-bottom: 1rem; }

/* ===== Utility ===== */
.text-center { text-align: center; }
.mt-10 { margin-top: 2.5rem; }
.hidden { display: none; }