/* Base styles for MamigloExclusive */
:root{
  --bg:#fbfbfb;
  --surface:#ffffff;
  --muted:#6b7280;
  --accent:#1f2937; /* deep neutral */
  --accent-2:#374151;
  --primary:#0b5f3a; /* subtle deep green */
  --gap:1.25rem;
  --radius:8px;
  font-size:16px;
}

html.dark-mode {
  --bg:#0f1419;
  --surface:#1a1f2e;
  --muted:#a0aec0;
  --accent:#e5e7eb;
  --accent-2:#cbd5e0;
  --primary:#10b981;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Montserrat,system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial;
  background:var(--bg);
  color:var(--accent-2);
  line-height:1.5;
  transition:background-color 0.3s ease, color 0.3s ease;
}

html{
  scroll-behavior:smooth;
}

.container{max-width:1100px;margin:0 auto;padding:2rem}
.site-header{background:var(--surface);padding:1rem 0;margin-top:0;box-shadow:0 2px 12px rgba(15,23,42,0.05);position:sticky;top:0;z-index:100}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.nav-controls{display:flex;align-items:center;gap:1rem}

.theme-toggle{
  background:transparent;
  border:none;
  font-size:1.5rem;
  cursor:pointer;
  padding:0.5rem;
  border-radius:6px;
  transition:background-color 0.2s ease, transform 0.2s ease;
}

.theme-toggle:hover{
  background:rgba(11,95,58,0.1);
  transform:rotate(20deg);
}

html.dark-mode .theme-toggle::after{
  content:'☀️';
  position:absolute;
}

.brand{font-weight:700;color:var(--accent);text-decoration:none;font-size:1.25rem;letter-spacing:-.5px;transition:color .2s ease;font-family:'Playfair Display',serif}
.brand:hover{color:var(--primary)}
.nav{display:flex;align-items:center;gap:1rem}
.nav a{color:var(--accent-2);text-decoration:none;font-size:.95rem;font-weight:500;padding:.5rem .75rem;border-radius:6px;transition:all .2s ease;position:relative}
.nav a:hover{color:var(--primary);background:rgba(11,95,58,0.05)}
.nav a.btn-cta:hover{background:var(--primary);color:#fff}
.nav.open{display:flex;flex-direction:column;position:absolute;top:64px;right:1.5rem;background:var(--surface);padding:.75rem;border-radius:8px;box-shadow:0 8px 24px rgba(15,23,42,0.08);z-index:1000}
.menu-toggle{display:none;background:transparent;border:0;padding:.25rem;margin-left:1rem;cursor:pointer}
.menu-toggle .hamburger{display:block;width:28px;height:2px;background:var(--accent);position:relative;border-radius:2px;transition:all 0.3s ease}
.menu-toggle .hamburger::before,.menu-toggle .hamburger::after{content:"";position:absolute;left:0;right:0;height:2px;background:var(--accent);border-radius:2px;transition:all 0.3s ease}
.menu-toggle .hamburger::before{top:-8px}
.menu-toggle .hamburger::after{top:8px}

.menu-toggle.active .hamburger{background:transparent}
.menu-toggle.active .hamburger::before{top:0;transform:rotate(45deg)}
.menu-toggle.active .hamburger::after{top:0;transform:rotate(-45deg)}

.btn{display:inline-block;padding:.6rem 1rem;border-radius:6px;text-decoration:none;font-weight:600;transition:all 0.3s ease;border:none;cursor:pointer}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 16px rgba(11,95,58,0.2)}
.btn-outline{background:transparent;border:1px solid #e5e7eb;color:var(--accent-2)}
.btn-outline:hover{background:var(--accent-2);color:#fff}
.btn-cta{background:var(--primary);color:#fff}
.btn-whatsapp{background:#25D366;color:white}
.btn-cta:hover,.btn-primary:hover{box-shadow:0 8px 24px rgba(11,95,58,0.2)}
.site-header{background:transparent;padding:.75rem 0}

/* Hero Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.8; }
}

.hero{
  padding:4rem 0;
  background:linear-gradient(135deg, rgba(11,95,58,0.03) 0%, rgba(251,251,251,0) 100%);
  border-radius:16px;
  margin:1rem 0;
}

html.dark-mode .hero {
  background:linear-gradient(135deg, rgba(16,185,129,0.05) 0%, rgba(15,23,42,0) 100%);
}

.hero-inner{display:grid;grid-template-columns:1fr 520px;gap:3rem;align-items:center}
.hero-copy{animation:fadeInUp 0.8s ease-out}
.hero-copy h1{font-family:'Playfair Display',serif;font-size:2.25rem;margin:0 0 1rem;color:var(--accent);line-height:1.2;font-weight:700}
.lead{color:var(--muted);margin-top:0;font-size:1.05rem;line-height:1.6}
.hero-ctas{margin-top:2rem}
.hero-ctas .btn{margin-right:.75rem;margin-bottom:.5rem;display:inline-block}
.hero-image{animation:slideInRight 0.8s ease-out}
.hero-image img{width:100%;height:auto;border-radius:16px;object-fit:cover;box-shadow:0 20px 40px rgba(15,23,42,0.12)}
.collections{padding:3rem 0;background:var(--surface)}
.collections h2{font-size:2rem;margin:0 0 .5rem;color:var(--accent);font-family:'Playfair Display',serif;font-weight:600}
.section-sub{color:var(--muted);font-size:1.05rem;margin:0 0 2rem}
.categories{display:flex;flex-wrap:wrap;gap:.6rem;list-style:none;padding:0;margin:0 0 2.5rem}
.categories li{background:linear-gradient(135deg, #f9f9f9 0%, #f5f5f5 100%);padding:.65rem 1rem;border-radius:999px;border:1px solid #e8e8e8;font-size:.9rem;font-weight:500;color:var(--accent-2);transition:all .2s ease}

html.dark-mode .categories li {
  background:linear-gradient(135deg, #2a3142 0%, #242d3d 100%);
  border-color:#3a4557;
}

.categories li:hover{background:var(--primary);color:#fff;border-color:var(--primary)}
.gallery{display:grid;grid-template-columns:repeat(5,1fr);gap:1.5rem}
.card{
  background:var(--surface);
  padding:0;
  border-radius:12px;
  box-shadow:0 8px 24px rgba(15,23,42,0.08);
  transition:transform .3s ease,box-shadow .3s ease;
  overflow:hidden;
  animation:fadeInUp 0.6s ease-out;
  animation-fill-mode:both;
}

.card:nth-child(2) { animation-delay: 0.1s; }
.card:nth-child(3) { animation-delay: 0.2s; }
.card:nth-child(4) { animation-delay: 0.3s; }
.card:nth-child(5) { animation-delay: 0.4s; }

.card:hover{transform:translateY(-8px);box-shadow:0 16px 48px rgba(15,23,42,0.12)}
.card img{width:100%;height:220px;object-fit:cover}
.card-content{padding:1.25rem}
.card h3{margin:0 0 .5rem;font-size:1.05rem;color:var(--accent);font-family:'Playfair Display',serif;font-weight:600}
.card p{color:var(--muted);font-size:.9rem;margin:0;line-height:1.5}
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.service{background:var(--surface);padding:1.75rem;border-radius:12px;box-shadow:0 8px 24px rgba(15,23,42,0.08);border-top:4px solid var(--primary);transition:all .2s ease}
.service:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(15,23,42,0.1)}
.service::before{content:"";width:0;height:0}  
.service h3{margin:0 0 .75rem;font-size:1.1rem;color:var(--accent);font-weight:600;font-family:'Playfair Display',serif}
.service p{color:var(--muted);margin:0;line-height:1.6;font-size:.95rem}
.contact{padding:2.5rem 0;background:linear-gradient(135deg, rgba(11,95,58,0.04) 0%, rgba(251,251,251,0) 100%);border-radius:12px;margin:2rem 0}
.contact h2{
  margin-bottom:.5rem;
  font-family:'Playfair Display',serif;
  font-size:2rem;
  color:var(--accent);
  font-weight:600;
}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:start}
.contact-info{background:linear-gradient(180deg, #ffffff 0%, #fbfbfb 100%);padding:2rem;border-radius:12px;box-shadow:0 8px 32px rgba(15,23,42,0.08);border-left:4px solid var(--primary)}
.contact-info h3{
  margin:0 0 1.5rem;
  font-size:1.15rem;
  color:var(--accent);
  font-family:'Playfair Display',serif;
  font-weight:600;
}
.contact-list{list-style:none;padding:0;margin:0}
.contact-list li{margin:1rem 0;display:flex;align-items:center;gap:.75rem}
.contact-list li strong{color:var(--accent);font-weight:600;min-width:90px}
.contact-list a{color:var(--primary);text-decoration:none;font-weight:500;transition:color .2s ease}
.contact-list a:hover{color:var(--accent)}
.contact-info .cta-small{margin-top:1.5rem;font-size:.95rem;color:var(--muted);display:block}
.contact-info .btn-cta{margin-top:1rem;width:100%}
.contact-form{background:var(--surface);padding:2rem;border-radius:12px;box-shadow:0 8px 32px rgba(15,23,42,0.08);border:1px solid #f0f0f0}
.contact-form label{display:block;margin:1.25rem 0 .5rem;font-size:.95rem;font-weight:600;color:var(--accent)}
.contact-form input,.contact-form textarea{width:100%;padding:.85rem;border-radius:8px;border:1px solid #e9ecef;font-family:inherit;font-size:.95rem;transition:border-color .2s ease,box-shadow .2s ease}
.contact-form input:focus,.contact-form textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(11,95,58,0.1)}
.contact-form textarea{resize:vertical}
.form-actions{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1.5rem}
.form-actions .btn-outline{grid-column:2}
.contact-form .btn-primary{grid-column:1}
.form-note{font-size:.8rem;color:var(--muted);margin-top:1rem;text-align:center}
.site-footer{background:linear-gradient(135deg, #1f2937 0%, #374151 100%);color:#fff;padding:3rem 0 1rem;margin-top:3rem;position:relative;overflow:hidden}
.site-footer::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent)}
.footer-inner{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;padding-bottom:2rem;border-bottom:1px solid rgba(255,255,255,0.1);margin-bottom:1.5rem}
.footer-col h3{font-size:.95rem;font-weight:700;margin:0 0 1rem;text-transform:uppercase;letter-spacing:1px;color:#fff}
.footer-col ul{list-style:none;padding:0;margin:0}
.footer-col ul li{margin:.5rem 0}
.footer-col a{color:rgba(255,255,255,0.75);text-decoration:none;font-size:.9rem;transition:color .2s ease}
.footer-col a:hover{color:#fff;text-decoration:underline}
.footer-social{display:flex;gap:1rem;margin-top:1rem}
.footer-social a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;background:rgba(255,255,255,0.1);border-radius:50%;text-decoration:none;color:#fff;font-size:.9rem;transition:all .2s ease}
.footer-social a:hover{background:rgba(11,95,58,0.8);transform:translateY(-3px)}
.brand-small{font-weight:700;font-size:1.1rem;color:#fff;margin:0}
.small{color:rgba(255,255,255,0.7);font-size:.85rem;margin:.25rem 0 0}
.footer-bottom{text-align:center;padding-top:1rem;border-top:1px solid rgba(255,255,255,0.1);font-size:.85rem;color:rgba(255,255,255,0.6)}
@media (min-width:1200px){
  .container{max-width:1300px}
}
@media (max-width:900px){
  .hero-inner{grid-template-columns:1fr;}
  .gallery{grid-template-columns:repeat(3,1fr)}
  .service-grid{grid-template-columns:repeat(2,1fr)}
  .contact-grid{grid-template-columns:1fr}
  .nav{display:none}
  .header-inner{gap:1rem}
  .menu-toggle{display:block}
  .footer-inner{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:768px){
  .gallery{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:480px){
  :root{font-size:15px}
  .hero-copy h1{font-size:1.5rem}
  .gallery{grid-template-columns:1fr}
  .service-grid{grid-template-columns:1fr}
  .footer-inner{grid-template-columns:1fr}
  .footer-col h3{font-size:.85rem}
}
/* Accessibility focus */
a:focus,button:focus,input:focus,textarea:focus{outline:3px solid rgba(11,95,58,0.15);outline-offset:3px}
/* Testimonials Section */
.testimonials{
  padding:3rem 0;
  background:var(--surface);
}

.testimonials h2{
  font-size:2rem;
  margin:0 0 .5rem;
  color:var(--accent);
  font-family:'Playfair Display',serif;
  font-weight:600;
}

.testimonials-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.5rem;
  margin-top:2.5rem;
}

.testimonial-card{
  background:linear-gradient(135deg, rgba(11,95,58,0.02) 0%, rgba(251,251,251,0) 100%);
  padding:2rem;
  border-radius:12px;
  border-left:4px solid var(--primary);
  box-shadow:0 8px 24px rgba(15,23,42,0.08);
  transition:all 0.3s ease;
  animation:fadeInUp 0.6s ease-out;
  animation-fill-mode:both;
}

.testimonial-card:nth-child(2) { animation-delay: 0.1s; }
.testimonial-card:nth-child(3) { animation-delay: 0.2s; }

.testimonial-card:hover{
  transform:translateY(-8px);
  box-shadow:0 16px 48px rgba(15,23,42,0.12);
}

.stars{
  font-size:1.2rem;
  color:#fbbf24;
  margin-bottom:1rem;
}

.testimonial-text{
  font-size:0.95rem;
  line-height:1.7;
  color:var(--accent-2);
  margin:1rem 0;
  font-style:italic;
}

.testimonial-author{
  margin-top:1.5rem;
  padding-top:1rem;
  border-top:1px solid rgba(11,95,58,0.1);
}

.testimonial-author strong{
  display:block;
  color:var(--accent);
  font-weight:600;
  margin-bottom:0.25rem;
}

.testimonial-author span{
  font-size:0.85rem;
  color:var(--muted);
}

/* Newsletter Section */
.newsletter{
  padding:3rem 0;
  background:linear-gradient(135deg, var(--primary) 0%, rgba(11,95,58,0.8) 100%);
  color:#fff;
  border-radius:16px;
  margin:2rem 0;
}

.newsletter-inner{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2rem;
  align-items:center;
}

.newsletter-content h2{
  color:#fff;
  margin:0 0 0.5rem;
  font-size:1.75rem;
  font-family:'Playfair Display',serif;
  font-weight:600;
}

.newsletter-content p{
  color:rgba(255,255,255,0.85);
  margin:0;
}

.newsletter-form{
  display:flex;
  gap:0.5rem;
  flex-wrap:wrap;
}

.newsletter-form input{
  flex:1;
  min-width:200px;
  padding:0.85rem;
  border:none;
  border-radius:6px;
  font-family:inherit;
  font-size:0.95rem;
}

.newsletter-form .btn-primary{
  background:#fff;
  color:var(--primary);
  white-space:nowrap;
  flex-shrink:0;
}

.newsletter-form .btn-primary:hover{
  background:rgba(255,255,255,0.9);
}

.newsletter-note{
  grid-column:1/-1;
  font-size:0.8rem;
  color:rgba(255,255,255,0.6);
  margin:0;
}

/* Product Page Styles */
.product-hero{
  padding:4rem 0 2rem;
  background:linear-gradient(135deg, rgba(11,95,58,0.05) 0%, rgba(16,185,129,0.02) 50%, rgba(251,251,251,0) 100%);
  border-bottom:2px solid rgba(11,95,58,0.1);
  position:relative;
  overflow:hidden;
}

html.dark-mode .product-hero {
  background:linear-gradient(135deg, rgba(16,185,129,0.08) 0%, rgba(16,185,129,0.03) 50%, transparent 100%);
  border-bottom-color:rgba(16,185,129,0.2);
}

.product-hero::before{
  content:"";
  position:absolute;
  top:0;
  right:-100px;
  width:400px;
  height:400px;
  background:radial-gradient(circle, rgba(11,95,58,0.08) 0%, transparent 70%);
  border-radius:50%;
  pointer-events:none;
}

.product-nav{
  margin-bottom:2rem;
}

.back-link{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  color:var(--primary);
  text-decoration:none;
  font-weight:500;
  font-size:0.95rem;
  transition:all 0.3s ease;
  padding:0.5rem 1rem;
  border-radius:8px;
}

.back-link:hover{
  background:rgba(11,95,58,0.08);
  transform:translateX(-4px);
}

.back-link svg{
  transition:transform 0.3s ease;
}

.back-link:hover svg{
  transform:translateX(-3px);
}

.product-header{
  display:grid;
  grid-template-columns:1fr auto;
  gap:2rem;
  align-items:flex-start;
}

.product-title-section{
  animation:fadeInUp 0.8s ease-out;
}
'Playfair Display'
.product-title-section h1{
  font-family:Merriweather,serif;
  font-size:3rem;
  margin:0 0 0.5rem;
  color:var(--accent);
  line-height:1.1;
  font-weight:700;
}

.product-title-section .section-sub{
  font-size:1.15rem;
  color:var(--muted);
  margin:0;
}

.product-stats{
  display:flex;
  gap:1.5rem;
  animation:slideInRight 0.8s ease-out;
}

.stat{
  background:var(--surface);
  padding:1.5rem;
  border-radius:12px;
  border:2px solid rgba(11,95,58,0.1);
  text-align:center;
  box-shadow:0 4px 12px rgba(15,23,42,0.08);
  transition:all 0.3s ease;
}

html.dark-mode .stat {
  border-color:rgba(16,185,129,0.2);
}

.stat:hover{
  transform:translateY(-4px);
  box-shadow:0 8px 24px rgba(11,95,58,0.12);
  border-color:var(--primary);
}

.stat-number{
  display:block;
  font-size:2rem;
  font-weight:700;
  color:var(--primary);
  margin-bottom:0.25rem;
}

.stat-label{
  font-size:0.85rem;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:1px;
}

.product-gallery{
  padding:4rem 0;
  background:var(--surface);
}

.product-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1.75rem;
}

.product-item{
  position:relative;
  overflow:hidden;
  border-radius:16px;
  box-shadow:0 10px 30px rgba(15,23,42,0.1);
  transition:all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  cursor:zoom-in;
  animation:fadeInUp 0.6s ease-out;
  animation-fill-mode:both;
  margin:0;
  background:var(--surface);
  border:1px solid rgba(11,95,58,0.05);
}

html.dark-mode .product-item {
  border-color:rgba(16,185,129,0.1);
}

.product-item:nth-child(1) { animation-delay: 0.05s; }
.product-item:nth-child(2) { animation-delay: 0.1s; }
.product-item:nth-child(3) { animation-delay: 0.15s; }
.product-item:nth-child(4) { animation-delay: 0.2s; }
.product-item:nth-child(5) { animation-delay: 0.25s; }
.product-item:nth-child(6) { animation-delay: 0.3s; }
.product-item:nth-child(7) { animation-delay: 0.35s; }
.product-item:nth-child(8) { animation-delay: 0.4s; }

.product-item:hover{
  transform:translateY(-12px);
  box-shadow:0 20px 40px rgba(11,95,58,0.2);
}

.product-item img{
  width:100%;
  height:350px;
  object-fit:cover;
  display:block;
  transition:transform 0.4s ease;
}

.product-item:hover img{
  transform:scale(1.05);
}

.product-item figcaption{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  background:linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.75) 60%, rgba(0,0,0,0.9) 100%);
  padding:2.5rem 1.5rem 1.5rem;
  color:#fff;
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:80px;
  transform:translateY(100%);
  transition:transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  backdrop-filter:blur(5px);
}

.product-item:hover figcaption{
  transform:translateY(0);
}

.btn-sm{
  padding:0.65rem 1.5rem;
  font-size:0.9rem;
  font-weight:600;
  white-space:nowrap;
  background:var(--primary);
  color:#fff;
  border:none;
  border-radius:8px;
  text-decoration:none;
  transition:all 0.3s ease;
  display:inline-block;
}

.btn-sm:hover{
  background:#0a4d2e;
  transform:translateY(-2px);
  box-shadow:0 6px 12px rgba(11,95,58,0.3);
}

.product-cta{
  padding:4rem 0;
  background:linear-gradient(135deg, var(--primary) 0%, rgba(11,95,58,0.7) 100%);
  color:#fff;
  border-radius:20px;
  margin:2rem 0;
  position:relative;
  overflow:hidden;
}

.product-cta::before{
  content:"";
  position:absolute;
  top:-50%;
  right:-50%;
  width:500px;
  height:500px;
  background:radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
  border-radius:50%;
  pointer-events:none;
}

.cta-content{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:3rem;
  align-items:center;
}

.cta-text h2{
  color:#fff;
  font-family:'Playfair Display',serif;
  font-size:2rem;
  margin:0 0 1rem;
  line-height:1.3;
}

.cta-text p{
  color:rgba(255,255,255,0.9);
  font-size:1rem;
  line-height:1.7;
  margin:0;
}

.cta-buttons{
  display:flex;
  gap:1rem;
  flex-direction:column;
}

.btn-lg{
  padding:1rem 2rem;
  font-size:1rem;
  border-radius:10px;
  text-align:center;
  transition:all 0.3s ease;
}

.cta-buttons .btn-primary{
  background:#fff;
  color:var(--primary);
}

.cta-buttons .btn-primary:hover{
  background:rgba(255,255,255,0.9);
  transform:translateY(-3px);
  box-shadow:0 10px 20px rgba(0,0,0,0.2);
}

.cta-buttons .btn-cta{
  background:rgba(255,255,255,0.2);
  border:2px solid #fff;
  color:#fff;
}

.cta-buttons .btn-cta:hover{
  background:#fff;
  color:var(--primary);
  transform:translateY(-3px);
  box-shadow:0 10px 20px rgba(0,0,0,0.2);
}

@media (max-width:1024px){
  .product-grid{grid-template-columns:repeat(3,1fr)}
  .product-item img{height:300px}
  .product-header{grid-template-columns:1fr}
  .product-stats{flex-direction:row}
  .cta-content{grid-template-columns:1fr;text-align:center}
  .cta-buttons{flex-direction:row;justify-content:center}
}

@media (max-width:768px){
  .product-grid{grid-template-columns:repeat(2,1fr);gap:1.25rem}
  .product-item img{height:250px}
  .product-title-section h1{font-size:2rem}
  .cta-buttons{flex-direction:column}
  .btn-lg{width:100%}
}

@media (max-width:480px){
  .product-grid{grid-template-columns:1fr}
  .product-item img{height:200px}
  .product-title-section h1{font-size:1.5rem}
  .product-stats{flex-direction:column}
  .stat{padding:1rem}
  .stat-number{font-size:1.5rem}
  .cta-content{gap:1.5rem;padding:0}
  .cta-text h2{font-size:1.5rem;margin-bottom:0.75rem}
  .cta-text p{font-size:0.9rem}
}

/* Card Link Styling */
.card-link{
  text-decoration:none;
  color:inherit;
  display:flex;
  flex-direction:column;
}

.view-collection{
  display:inline-block;
  color:var(--primary);
  font-weight:600;
  font-size:0.9rem;
  margin-top:0.5rem;
  transition:all 0.2s ease;
}

.card-link:hover .view-collection{
  color:#fff;
  background:var(--primary);
  padding:0.25rem 0.75rem;
  border-radius:4px;
}

/* Lightbox Modal */
.lightbox-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.95);
  backdrop-filter:blur(10px);
  padding:0;
  border:none;
  z-index:1000;
  animation:fadeInUp 0.3s ease-out;
}

.lightbox-modal::backdrop{
  background:rgba(0,0,0,0.95);
}

.lightbox-content{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  position:relative;
}

.lightbox-modal img{
  max-width:90%;
  max-height:90%;
  object-fit:contain;
  border-radius:8px;
}

.lightbox-close{
  position:absolute;
  top:2rem;
  right:2rem;
  background:transparent;
  border:none;
  color:#fff;
  font-size:3rem;
  cursor:pointer;
  padding:0;
  width:50px;
  height:50px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all 0.2s ease;
  z-index:1001;
}

.lightbox-close:hover{
  transform:scale(1.2);
}

.product-cta{
  padding:3rem 0;
  background:linear-gradient(135deg, var(--primary) 0%, rgba(11,95,58,0.8) 100%);
  color:#fff;
  border-radius:16px;
  margin:2rem 0;
  text-align:center;
}

.product-cta h2{
  color:#fff;
  margin-bottom:0.5rem;
}

.product-cta p{
  color:rgba(255,255,255,0.85);
}

/* Related Collections */
.related-collections{
  padding:4rem 0;
  background:var(--surface);
}

.related-collections h2{
  font-size:2rem;
  margin:0 0 0.5rem;
  color:var(--accent);
  text-align:center;
  font-family:'Playfair Display',serif;
  font-weight:600;
}

.related-collections .section-sub{
  text-align:center;
  margin-bottom:3rem;
}

.related-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:1.5rem;
}

.related-item{
  display:flex;
  flex-direction:column;
  text-decoration:none;
  color:inherit;
  background:var(--surface);
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(11,95,58,0.08);
  transition:all 0.3s ease;
  animation:fadeInUp 0.6s ease-out;
  animation-fill-mode:both;
}

.related-item:nth-child(1) { animation-delay: 0.1s; }
.related-item:nth-child(2) { animation-delay: 0.15s; }
.related-item:nth-child(3) { animation-delay: 0.2s; }
.related-item:nth-child(4) { animation-delay: 0.25s; }
.related-item:nth-child(5) { animation-delay: 0.3s; }

.related-item:hover{
  transform:translateY(-8px);
  border-color:var(--primary);
  box-shadow:0 12px 32px rgba(11,95,58,0.12);
}

.related-thumbnail{
  position:relative;
  overflow:hidden;
  width:100%;
  height:180px;
  background:#f5f5f5;
}

html.dark-mode .related-thumbnail {
  background:#242d3d;
}

.related-thumbnail img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 0.3s ease;
}

.related-item:hover .related-thumbnail img{
  transform:scale(1.08);
}

.related-badge{
  position:absolute;
  top:0.75rem;
  right:0.75rem;
  background:var(--primary);
  color:#fff;
  padding:0.4rem 0.8rem;
  border-radius:20px;
  font-size:0.75rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.5px;
}

.related-item h3{
  margin:1rem 1rem 0.5rem;
  font-size:1rem;
  color:var(--accent);
  font-weight:600;
  font-family:'Playfair Display',serif;
}

.related-item p{
  margin:0 1rem 1rem;
  font-size:0.85rem;
  color:var(--muted);
  flex:1;
}

@media (max-width:900px){
  .testimonials-grid{grid-template-columns:repeat(2,1fr)}
  .newsletter-inner{grid-template-columns:1fr}
  .newsletter-form{flex-direction:column}
  .product-grid{grid-template-columns:repeat(2,1fr)}
  .related-grid{grid-template-columns:repeat(3,1fr)}
}

@media (max-width:768px){
  .related-grid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:480px){
  .testimonials-grid{grid-template-columns:1fr}
  .product-grid{grid-template-columns:1fr}
  .related-grid{grid-template-columns:1fr}
  .lightbox-modal img{max-width:95%;max-height:95%}
  .lightbox-close{top:1rem;right:1rem;font-size:2rem}
}

/* ======================================
   MOBILE-FIRST RESPONSIVE OPTIMIZATION
   ====================================== */

/* Ultra Small Devices (320px - 479px) */
@media (max-width:479px){
  :root{
    font-size:14px;
  }
  
  .container{
    padding:1rem;
  }
  
  .site-header{
    padding:0.5rem 0;
  }
  
  .header-inner{
    gap:0.5rem;
  }
  
  .brand{
    font-size:1rem;
  }
  
  .nav{
    display:none;
  }
  
  .menu-toggle{
    display:block;
  }
  
  .nav.open{
    top:56px;
    right:0.75rem;
    width:calc(100% - 1.5rem);
  }
  
  .hero-inner{
    flex-direction:column;
    padding:1rem;
  }
  
  .hero-copy h1{
    font-size:1.5rem;
    line-height:1.3;
  }
  
  .hero-copy .lead{
    font-size:0.9rem;
  }
  
  .hero-ctas{
    flex-direction:column;
    gap:0.75rem;
  }
  
  .hero-image{
    display:none;
  }
  
  .btn{
    padding:0.5rem 0.75rem;
    font-size:0.9rem;
    width:100%;
    text-align:center;
  }
  
  .categories{
    grid-template-columns:1fr;
    gap:0.5rem;
  }
  
  .gallery{
    grid-template-columns:1fr;
    gap:1rem;
  }
  
  .card{
    padding:0.75rem;
  }
  
  h2{
    font-size:1.5rem !important;
  }
  
  h3{
    font-size:1.2rem !important;
  }
  
  .contact-inner{
    flex-direction:column;
  }
  
  .contact-form{
    width:100%;
  }
  
  .contact-info{
    width:100%;
  }
  
  .footer{
    padding:1rem 0;
  }
  
  table{
    font-size:0.85rem;
  }
}

/* Small Devices (480px - 767px) */
@media (min-width:480px) and (max-width:767px){
  :root{
    font-size:15px;
  }
  
  .container{
    padding:1.5rem;
  }
  
  .hero-copy h1{
    font-size:2rem;
  }
  
  .categories{
    grid-template-columns:repeat(2,1fr);
  }
  
  .gallery{
    grid-template-columns:repeat(2,1fr);
  }
  
  .nav.open{
    width:90%;
  }
  
  .menu-toggle{
    display:block;
  }
  
  .hero-image{
    max-height:300px;
  }
}

/* Medium Devices (768px - 1023px) */
@media (min-width:768px) and (max-width:1023px){
  .container{
    padding:1.75rem;
  }
  
  .gallery{
    grid-template-columns:repeat(3,1fr);
  }
  
  .hero-inner{
    gap:2rem;
  }
  
  .menu-toggle{
    display:none;
  }
  
  .nav{
    display:flex;
  }
}

/* Large Devices (1024px and above) */
@media (min-width:1024px){
  .menu-toggle{
    display:none;
  }
  
  .nav{
    display:flex;
  }
  
  .gallery{
    grid-template-columns:repeat(4,1fr);
  }
  
  .container{
    padding:2rem;
  }
}

/* ======================================
   TOUCH-FRIENDLY INTERFACE
   ====================================== */

/* Touch targets should be 44x44px minimum */
@media (hover:none) and (pointer:coarse){
  .btn,
  .nav a,
  .menu-toggle,
  .theme-toggle,
  button,
  a{
    min-height:44px;
    min-width:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  
  .btn{
    padding:0.75rem 1.25rem;
  }
  
  .nav a{
    padding:0.75rem 1rem;
  }
}

/* ======================================
   LANDSCAPE ORIENTATION
   ====================================== */

@media (max-height:500px) and (orientation:landscape){
  .hero-inner{
    min-height:auto;
    gap:1rem;
  }
  
  .hero-copy h1{
    font-size:1.5rem;
  }
  
  .hero-copy .lead{
    display:none;
  }
  
  .hero-image{
    max-height:300px;
  }
}

/* ======================================
   HIGH PIXEL DENSITY SCREENS
   ====================================== */

@media (-webkit-min-device-pixel-ratio:2), (min-resolution:192dpi){
  /* Crisp text rendering */
  body{
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
  }
}

/* ======================================
   PRINT STYLES
   ====================================== */

@media print{
  .site-header,
  .footer,
  .menu-toggle,
  .theme-toggle,
  .contact-form,
  nav{
    display:none;
  }
  
  body{
    background:#fff;
    color:#000;
  }
  
  .container{
    max-width:100%;
  }
  
  a{
    text-decoration:underline;
  }
  
  img{
    max-width:100%;
  }
}