/* PRODUCT CARD */
.products-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:2rem; }
.product-card{
  background:var(--card); border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow-sm); transition:transform 0.35s, box-shadow 0.35s;
  display:flex; flex-direction:column; animation:fadeUp 0.6s ease forwards;
  position:relative; border:1px solid rgba(0,180,216,0.06);
}
.product-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-lg); }
.product-img{
  height:200px; background:linear-gradient(135deg,#e6f0fa,#cfe2f3);
  display:flex; align-items:center; justify-content:center;
  font-size:4rem; color:var(--accent); position:relative; overflow:hidden;
}
.product-img::after{ content:''; position:absolute; inset:0; background:radial-gradient(circle at 30% 30%, rgba(255,255,255,0.5), transparent 60%); pointer-events:none; }
.badge{ position:absolute; top:12px; left:12px; background:var(--gold); color:var(--primary); padding:0.28rem 0.85rem; border-radius:40px; font-size:0.68rem; font-weight:800; text-transform:uppercase; letter-spacing:0.5px; z-index:2; }
.wish-btn{ position:absolute; top:12px; right:12px; width:36px; height:36px; background:rgba(255,255,255,0.9); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--muted); transition:all 0.25s; z-index:2; backdrop-filter:blur(4px); cursor:pointer; }
.wish-btn:hover{ color:#e74c3c; transform:scale(1.1); }
.product-info{ padding:1.2rem 1.2rem 1.4rem; display:flex; flex-direction:column; flex:1; }
.product-category{ font-size:0.68rem; text-transform:uppercase; letter-spacing:1px; color:var(--accent); font-weight:700; margin-bottom:0.35rem; }
.product-title{ font-size:1.1rem; font-weight:700; margin-bottom:0.4rem; color:var(--primary); }
.product-title a:hover{ color:var(--accent); }
.product-rating{ display:flex; align-items:center; gap:0.5rem; margin-bottom:0.6rem; font-size:0.8rem; color:var(--muted); }
.product-desc{ font-size:0.85rem; color:var(--muted); margin-bottom:0.9rem; flex:1; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.product-bottom{ display:flex; align-items:center; justify-content:space-between; margin-top:auto; gap:0.5rem; }
.price{ font-size:1.3rem; font-weight:800; color:var(--primary); }
.add-btn{
  background:var(--primary); color:white; width:42px; height:42px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:1.1rem;
  transition:all 0.3s; flex-shrink:0;
}
.add-btn:hover{ background:var(--accent); transform:scale(1.15) rotate(90deg); box-shadow:0 8px 20px -5px var(--accent); }
.buy-link{
  display:inline-flex; align-items:center; gap:0.4rem; background:var(--accent); color:white;
  padding:0.55rem 1rem; border-radius:40px; font-size:0.78rem; font-weight:600;
  transition:all 0.25s; justify-content:center;
}
.buy-link:hover{ background:var(--primary); transform:translateY(-2px); gap:0.6rem; }

/* STARS */
.stars{ display:inline-flex; gap:0.1rem; color:var(--gold); font-size:0.85rem; }
.stars .far{ color:#cbd5e1; }
.stars.small{ font-size:0.7rem; }
.stars.large{ font-size:1.1rem; }

/* CATEGORY CARD */
.category-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:1.2rem; }
.category-card{
  background:var(--card); border-radius:var(--radius); padding:1.8rem 1rem;
  display:flex; flex-direction:column; align-items:center; gap:0.7rem;
  box-shadow:var(--shadow-sm); transition:all 0.3s; cursor:pointer;
  border:2px solid transparent; position:relative; overflow:hidden;
}
.category-card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background:var(--cat-color, var(--accent)); transform:scaleX(0); transition:transform 0.3s;
}
.category-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); border-color:var(--cat-color, var(--accent)); }
.category-card:hover::before{ transform:scaleX(1); }
.category-card i{ font-size:2.2rem; color:var(--cat-color, var(--accent)); }
.category-card span{ font-weight:600; color:var(--primary); font-size:0.95rem; }

/* TESTIMONIALS */
.testimonial-track{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.5rem; }
.testimonial-card{
  background:var(--card); border-radius:var(--radius); padding:1.6rem;
  box-shadow:var(--shadow-sm); border-left:4px solid var(--accent);
  transition:transform 0.3s, box-shadow 0.3s;
}
.testimonial-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.testimonial-card p{ font-size:0.95rem; color:var(--text); margin:0.8rem 0 1rem; font-style:italic; line-height:1.6; }
.reviewer{ display:flex; align-items:center; gap:0.7rem; }
.reviewer .avatar{ width:38px; height:38px; background:var(--accent); color:white; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:0.95rem; }
.reviewer span{ font-weight:600; font-size:0.9rem; }

/* WHY US */
.why-us{ background:linear-gradient(135deg,#0a1e3c,#0f2b4a); color:white; }
.why-us .section-title h2{ color:white; }
.why-us .section-title p{ color:rgba(255,255,255,0.7); }
.why-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1.5rem; }
.why-card{
  background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1);
  border-radius:var(--radius); padding:1.8rem 1.4rem; text-align:center;
  transition:all 0.3s; backdrop-filter:blur(10px);
}
.why-card:hover{ background:rgba(0,180,216,0.15); border-color:var(--accent); transform:translateY(-6px); }
.why-card i{ font-size:2.2rem; color:var(--accent); margin-bottom:0.9rem; }
.why-card h3{ color:white; font-size:1.15rem; margin-bottom:0.5rem; }
.why-card p{ color:rgba(255,255,255,0.7); font-size:0.9rem; }

/* NEWSLETTER */
.newsletter{ padding:3rem 0; }
.newsletter-box{
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  border-radius:28px; padding:3rem; color:white;
  display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:center;
  box-shadow:0 30px 60px -20px var(--accent-glow);
}
.newsletter-box h2{ font-size:2rem; margin-bottom:0.5rem; color:white; }
.newsletter-box p{ opacity:0.9; }
.newsletter-form{ display:flex; gap:0.6rem; background:rgba(255,255,255,0.15); padding:0.5rem; border-radius:60px; }
.newsletter-form input{ flex:1; background:transparent; border:none; padding:0.8rem 1.2rem; color:white; font-size:0.95rem; outline:none; }
.newsletter-form input::placeholder{ color:rgba(255,255,255,0.7); }
.newsletter-form .btn{ background:white; color:var(--primary); padding:0.8rem 1.8rem; font-size:0.9rem; }
.newsletter-form .btn:hover{ background:var(--primary); color:white; transform:none; }
@media(max-width:700px){ .newsletter-box{ grid-template-columns:1fr; text-align:center; padding:2rem 1.5rem; } .newsletter-form{ flex-direction:column; background:transparent; padding:0; } .newsletter-form input{ background:rgba(255,255,255,0.15); border-radius:60px; } }

/* Keep cards readable without forcing horizontal scrolling on narrow screens */
.products-grid{ grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:clamp(1rem,3vw,2rem); }
.testimonial-track{ grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); }
.category-grid{ grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr)); }
@media(max-width:480px){
  .product-img{ height:175px; }
  .product-info{ padding:1rem; }
  .newsletter-box{ border-radius:20px; }
}

/* PAGE HERO */
.page-hero{
  background:linear-gradient(135deg,#0a1e3c,#0f2b4a); color:white;
  padding:4rem 0 3rem; text-align:center; margin-bottom:3rem;
  position:relative; overflow:hidden;
}
.page-hero::before{ content:''; position:absolute; top:-50%; right:-10%; width:400px; height:400px; background:radial-gradient(circle, rgba(0,180,216,0.2), transparent 70%); }
.page-hero h1{ font-size:2.8rem; margin-bottom:0.6rem; position:relative; }
.page-hero p{ opacity:0.8; max-width:600px; margin:0 auto; position:relative; }

/* FORMS */
.form-group{ margin-bottom:1rem; display:flex; flex-direction:column; gap:0.4rem; }
.form-group label{ font-size:0.82rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:0.5px; }
.form-group input, .form-group textarea, .form-group select{
  padding:0.85rem 1.2rem; border-radius:14px; border:2px solid var(--border);
  font-size:0.95rem; transition:all 0.25s; background:white; width:100%;
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus{
  border-color:var(--accent); box-shadow:0 0 0 4px rgba(0,180,216,0.1); outline:none;
}
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media(max-width:600px){ .form-row{ grid-template-columns:1fr; } }

/* VALUES */
.values-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.5rem; }
.value-card{ background:var(--card); border-radius:var(--radius); padding:2rem 1.5rem; text-align:center; box-shadow:var(--shadow-sm); transition:all 0.3s; }
.value-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.value-icon{ width:60px; height:60px; margin:0 auto 1rem; background:linear-gradient(135deg,var(--accent),var(--accent-2)); border-radius:50%; display:flex; align-items:center; justify-content:center; color:white; font-size:1.5rem; }
.value-card h3{ font-size:1.15rem; margin-bottom:0.5rem; color:var(--primary); }
.value-card p{ font-size:0.9rem; color:var(--muted); }

/* TEAM */
.team-section{ background:linear-gradient(180deg,#f5f7fb,#e8eef7); }
.team-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1.5rem; }
.team-card{ background:var(--card); border-radius:var(--radius); padding:2rem 1rem; text-align:center; box-shadow:var(--shadow-sm); transition:all 0.3s; }
.team-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.team-avatar{ width:80px; height:80px; margin:0 auto 1rem; background:linear-gradient(135deg,var(--accent),var(--accent-2)); border-radius:50%; display:flex; align-items:center; justify-content:center; color:white; font-size:2rem; }
.team-card h4{ font-size:1rem; color:var(--primary); margin-bottom:0.2rem; }
.team-card span{ font-size:0.85rem; color:var(--muted); }

/* CTA */
.cta-banner{ background:linear-gradient(135deg,var(--primary),#0f2b4a); color:white; padding:4rem 0; text-align:center; margin-top:3rem; }
.cta-banner h2{ font-size:2.2rem; margin-bottom:0.8rem; }
.cta-banner p{ opacity:0.8; margin-bottom:2rem; }

/* CONTACT */
.contact-grid{ display:grid; grid-template-columns:1fr 1.3fr; gap:3rem; margin-bottom:3rem; }
.contact-info h2{ font-size:1.8rem; margin-bottom:1rem; color:var(--primary); }
.contact-info > p{ color:var(--muted); margin-bottom:2rem; }
.contact-item{ display:flex; gap:1rem; margin-bottom:1.5rem; align-items:flex-start; }
.contact-icon{ width:48px; height:48px; background:#e6f0fa; color:var(--accent); border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:1.2rem; flex-shrink:0; }
.contact-item h4{ font-size:0.95rem; color:var(--primary); margin-bottom:0.15rem; }
.contact-item p{ font-size:0.9rem; color:var(--muted); }
.contact-form{ background:var(--card); padding:2rem; border-radius:var(--radius); box-shadow:var(--shadow); }
.contact-form h2{ font-size:1.5rem; margin-bottom:1.5rem; color:var(--primary); }
.map-section{ margin-bottom:4rem; }
.map-placeholder{
  background:linear-gradient(135deg,#e6f0fa,#cfe2f3); border-radius:var(--radius);
  padding:4rem 2rem; text-align:center; color:var(--primary); box-shadow:var(--shadow-sm);
}
.map-placeholder i{ font-size:3rem; color:var(--accent); margin-bottom:1rem; display:block; }
.map-placeholder p{ font-weight:600; }

/* ABOUT */
.about-section{ margin-bottom:4rem; }
.about-grid{ display:grid; grid-template-columns:1.2fr 1fr; gap:3rem; align-items:center; }
.about-text h2{ font-size:2rem; color:var(--primary); margin-bottom:1.2rem; }
.about-text p{ color:var(--muted); margin-bottom:1rem; font-size:1rem; line-height:1.7; }
.about-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:2rem; }
.about-stats > div{ text-align:center; background:var(--card); border-radius:var(--radius-sm); padding:1.2rem 0.5rem; box-shadow:var(--shadow-sm); }
.about-stats strong{ display:block; font-size:1.6rem; color:var(--accent); font-family:'Space Grotesk',sans-serif; }
.about-stats span{ font-size:0.8rem; color:var(--muted); }
.about-visual{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.about-card{ background:var(--card); border-radius:var(--radius); aspect-ratio:1; display:flex; align-items:center; justify-content:center; font-size:3rem; color:var(--accent); box-shadow:var(--shadow); }
.about-card:first-child{ grid-column:span 2; aspect-ratio:2/1; }