@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
  --background: 42 100% 98%;
  --foreground: 150 18% 12%;
  --primary: 26 96% 53%;
  --primary-foreground: 0 0% 100%;
  --secondary: 142 52% 36%;
  --secondary-foreground: 0 0% 100%;
  --muted: 145 8% 42%;
  --destructive: 0 78% 54%;
  --border: 34 33% 87%;
  --card: 0 0% 100%;
  --shadow-sm: 0 6px 18px hsl(30 60% 20% / 0.08);
  --shadow-md: 0 14px 38px hsl(30 60% 20% / 0.12);
  --shadow-lg: 0 28px 70px hsl(30 60% 20% / 0.16);
  --transition-fast: 160ms ease;
  --transition-smooth: 280ms cubic-bezier(.2,.8,.2,1);
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 28px;
}

.dark {
  --background: 150 20% 7%;
  --foreground: 42 100% 96%;
  --primary: 28 100% 58%;
  --primary-foreground: 0 0% 100%;
  --secondary: 142 58% 48%;
  --secondary-foreground: 150 20% 7%;
  --muted: 42 18% 70%;
  --destructive: 0 78% 61%;
  --border: 150 15% 18%;
  --card: 150 18% 10%;
  --shadow-sm: 0 6px 18px hsl(0 0% 0% / 0.22);
  --shadow-md: 0 14px 38px hsl(0 0% 0% / 0.30);
  --shadow-lg: 0 28px 70px hsl(0 0% 0% / 0.38);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, sans-serif; background: hsl(var(--background)); }
a { text-decoration: none; color: inherit; }
button, input, textarea { font: inherit; }

.glass { background: hsl(var(--background) / 0.82); backdrop-filter: blur(18px); }
.logo-mark { width: 42px; height: 42px; border-radius: 15px; display: grid; place-items: center; color: white; font-weight: 900; background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--secondary))); box-shadow: var(--shadow-sm); }
.nav-link { display: block; padding: .55rem .75rem; border-radius: 999px; color: hsl(var(--muted)); font-weight: 700; font-size: .92rem; transition: var(--transition-fast); }
.nav-link:hover { color: hsl(var(--primary)); background: hsl(var(--primary) / .10); }
.icon-btn { width: 42px; height: 42px; border: 1px solid hsl(var(--border)); border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: hsl(var(--card)); color: hsl(var(--foreground)); transition: var(--transition-fast); box-shadow: var(--shadow-sm); }
.icon-btn:hover { transform: translateY(-2px); border-color: hsl(var(--primary)); color: hsl(var(--primary)); }
.cart-badge { position: absolute; top: -5px; right: -5px; min-width: 20px; height: 20px; padding: 0 5px; display: grid; place-items: center; border-radius: 999px; background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); font-size: 11px; font-weight: 900; }
.search-input, .form-input { width: 100%; border: 1px solid hsl(var(--border)); border-radius: 999px; padding: .78rem 1rem; background: hsl(var(--card)); color: hsl(var(--foreground)); outline: none; transition: var(--transition-fast); }
textarea.form-input { border-radius: var(--radius-md); resize: vertical; }
.search-input:focus, .form-input:focus { border-color: hsl(var(--primary)); box-shadow: 0 0 0 4px hsl(var(--primary) / .12); }
.hero-bg { background: radial-gradient(circle at 85% 20%, hsl(var(--primary) / .18), transparent 32%), radial-gradient(circle at 15% 10%, hsl(var(--secondary) / .16), transparent 28%); }
.pill { display: inline-flex; align-items: center; gap: .4rem; padding: .48rem .82rem; border-radius: 999px; background: hsl(var(--primary) / .12); color: hsl(var(--primary)); font-weight: 900; font-size: .78rem; letter-spacing: .01em; }
.btn-primary, .btn-secondary, .btn-whatsapp, .btn-call { min-height: 46px; display: inline-flex; align-items: center; gap: .5rem; padding: .82rem 1.1rem; border-radius: 999px; font-weight: 900; transition: var(--transition-smooth); border: 1px solid transparent; }
.btn-primary { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); box-shadow: var(--shadow-md); }
.btn-primary:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.btn-secondary { background: hsl(var(--card)); color: hsl(var(--foreground)); border-color: hsl(var(--border)); }
.btn-secondary:hover { border-color: hsl(var(--secondary)); color: hsl(var(--secondary)); transform: translateY(-2px); }
.btn-whatsapp { background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); justify-content: center; }
.btn-call { background: hsl(var(--primary) / .12); color: hsl(var(--primary)); justify-content: center; }
.stat-card, .category-card, .product-card, .feature-card, .about-card, .testimonial, .contact-card, .map-card, .cart-item { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.stat-card { padding: .9rem; }
.stat-card b { display: block; font-size: 1.25rem; color: hsl(var(--foreground)); }
.stat-card span { font-size: .78rem; color: hsl(var(--muted)); font-weight: 700; }
.hero-basket { position: relative; min-height: 440px; border-radius: 36px; padding: 1.2rem; background: linear-gradient(145deg, hsl(var(--card)), hsl(var(--primary) / .13)); border: 1px solid hsl(var(--border)); box-shadow: var(--shadow-lg); overflow: hidden; }
.basket-glow { position: absolute; inset: 12% 8% auto auto; width: 210px; height: 210px; border-radius: 50%; background: hsl(var(--secondary) / .22); filter: blur(22px); }
.grocery-grid { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; }
.grocery-tile { min-height: 112px; display: grid; place-items: center; border-radius: 26px; background: hsl(var(--background) / .85); border: 1px solid hsl(var(--border)); font-size: 3rem; transition: var(--transition-smooth); }
.grocery-tile:hover { transform: rotate(-3deg) scale(1.04); }
.delivery-card { position: absolute; left: 22px; right: 22px; bottom: 22px; display: flex; gap: .8rem; align-items: center; padding: 1rem; border-radius: 24px; background: hsl(var(--card) / .92); border: 1px solid hsl(var(--border)); box-shadow: var(--shadow-md); }
.delivery-card b, .delivery-card span { display: block; }
.delivery-card span { color: hsl(var(--muted)); font-size: .85rem; }
.section { width: 100%; max-width: 1280px; margin: 0 auto; padding: 4rem 1rem; }
.bg-soft { max-width: none; padding-left: max(1rem, calc((100vw - 1280px) / 2 + 1rem)); padding-right: max(1rem, calc((100vw - 1280px) / 2 + 1rem)); background: linear-gradient(180deg, hsl(var(--secondary) / .06), hsl(var(--primary) / .05)); }
.category-card { padding: 1rem; text-align: center; transition: var(--transition-smooth); }
.category-card:hover { border-color: hsl(var(--primary)); box-shadow: var(--shadow-md); }
.category-icon { width: 64px; height: 64px; margin: 0 auto .8rem; display: grid; place-items: center; border-radius: 22px; font-size: 2rem; background: hsl(var(--primary) / .12); }
.category-card h3, .product-card h3, .feature-card h3 { font-weight: 900; color: hsl(var(--foreground)); }
.category-card p, .feature-card p { margin-top: .35rem; color: hsl(var(--muted)); font-size: .86rem; }
.product-card { position: relative; padding: 1rem; overflow: hidden; transition: var(--transition-smooth); }
.product-card:hover { border-color: hsl(var(--secondary)); box-shadow: var(--shadow-md); }
.discount { position: absolute; top: 12px; left: 12px; padding: .32rem .55rem; border-radius: 999px; background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); font-weight: 900; font-size: .68rem; }
.product-emoji { height: 130px; display: grid; place-items: center; font-size: 4.2rem; border-radius: 24px; background: linear-gradient(145deg, hsl(var(--primary) / .12), hsl(var(--secondary) / .10)); }
.product-tag { display: inline-block; margin-top: .85rem; color: hsl(var(--primary)); font-weight: 900; font-size: .75rem; }
.rating { margin-top: .5rem; display: inline-flex; align-items: center; gap: .25rem; color: hsl(var(--primary)); font-weight: 900; }
.price { font-size: 1.3rem; font-weight: 1000; }
.mrp { color: hsl(var(--muted)); text-decoration: line-through; font-size: .86rem; }
.add-btn { padding: .65rem 1rem; border-radius: 999px; background: hsl(var(--foreground)); color: hsl(var(--background)); font-weight: 900; transition: var(--transition-fast); }
.add-btn:hover { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.skeleton-card { min-height: 285px; background: linear-gradient(90deg, hsl(var(--card)), hsl(var(--primary) / .10), hsl(var(--card))); background-size: 200% 100%; animation: shimmer 1.2s infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
.empty-state { border: 1px dashed hsl(var(--border)); border-radius: var(--radius-lg); padding: 2rem; text-align: center; color: hsl(var(--muted)); background: hsl(var(--card)); }
.feature-card { padding: 1.2rem; }
.feature-icon { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 18px; background: hsl(var(--secondary) / .13); color: hsl(var(--secondary)); margin-bottom: 1rem; }
.about-card { padding: 1.4rem; }
.about-card h2 { margin-top: 1rem; font-size: clamp(2rem, 4vw, 3rem); font-weight: 1000; line-height: 1.05; }
.about-card p { margin-top: 1rem; color: hsl(var(--muted)); line-height: 1.75; }
.mini-chip { padding: .45rem .7rem; border-radius: 999px; background: hsl(var(--secondary) / .12); color: hsl(var(--secondary)); font-weight: 900; font-size: .78rem; }
.testimonial { display: flex; gap: 1rem; padding: 1rem; }
.avatar { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--secondary))); color: white; font-weight: 900; }
.testimonial p { color: hsl(var(--foreground)); line-height: 1.55; }
.testimonial b, .testimonial span { display: block; }
.testimonial b { margin-top: .6rem; }
.testimonial span { color: hsl(var(--muted)); font-size: .85rem; }
.contact-card { padding: 1.1rem; }
.info-row { display: flex; gap: .75rem; align-items: flex-start; color: hsl(var(--muted)); margin-top: .85rem; }
.map-card { min-height: 420px; overflow: hidden; }
.map-card iframe { width: 100%; height: 100%; min-height: 420px; border: 0; filter: saturate(1.05); }
.footer { border-top: 1px solid hsl(var(--border)); background: hsl(var(--card)); }
.footer h4 { font-weight: 900; margin-bottom: .75rem; }
.footer a, .footer p { display: block; color: hsl(var(--muted)); margin: .38rem 0; font-size: .92rem; }
.footer a:hover { color: hsl(var(--primary)); }
.copyright { border-top: 1px solid hsl(var(--border)); text-align: center; padding: 1rem; color: hsl(var(--muted)); font-size: .9rem; }
.floating-wa { position: fixed; right: 18px; bottom: 18px; z-index: 35; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); box-shadow: var(--shadow-lg); }
.cart-panel { position: absolute; right: 0; top: 0; height: 100%; width: min(420px, 100%); background: hsl(var(--background)); color: hsl(var(--foreground)); padding: 1rem; display: flex; flex-direction: column; box-shadow: var(--shadow-lg); }
.cart-item { display: flex; gap: .85rem; padding: .9rem; border-radius: var(--radius-md); }
.cart-item b { display: block; font-size: .92rem; }
.cart-item p { color: hsl(var(--muted)); font-size: .85rem; }
.qty-row { margin-top: .55rem; display: flex; align-items: center; gap: .45rem; }
.qty-row button { width: 28px; height: 28px; border-radius: 999px; display: grid; place-items: center; border: 1px solid hsl(var(--border)); background: hsl(var(--card)); color: hsl(var(--foreground)); }
.qty-row button:hover { color: hsl(var(--primary)); border-color: hsl(var(--primary)); }
@media (min-width: 640px) { .section { padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 1024px) { .section { padding-top: 5rem; padding-bottom: 5rem; } }
@media (max-width: 520px) { .hero-basket { min-height: 360px; } .grocery-tile { min-height: 82px; font-size: 2.4rem; } .delivery-card { left: 14px; right: 14px; bottom: 14px; } }