/* =========================================================================
   GROCIA — Fresh Grocery & Supermarket Theme
   Hand-written styles & animations (100% original)
   Works alongside Tailwind CSS. MIT-style license — you own this code.
   ========================================================================= */

:root {
  --brand: #16a34a;
  --brand-700: #15803d;
  --accent: #f59e0b;
  --ink: #18271d;
}

* { -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }

body {
  font-family: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
  color: var(--ink);
  background: #ffffff;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.font-display { font-family: 'Poppins', 'DM Sans', sans-serif; }

::selection { background: var(--brand); color: #fff; }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #eef2ef; }
::-webkit-scrollbar-thumb { background: #c4d3c8; border-radius: 999px; border: 2px solid #eef2ef; }
::-webkit-scrollbar-thumb:hover { background: var(--brand); }

/* hide scrollbar for horizontal scrollers */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ---------- Gradient helpers ---------- */
.text-gradient {
  background: linear-gradient(90deg, #16a34a, #65a30d);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in-view { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: .07s; }
.reveal-delay-2 { transition-delay: .14s; }
.reveal-delay-3 { transition-delay: .21s; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ---------- Category card ---------- */
.cat-card { transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.cat-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -22px rgba(22,163,74,.5); border-color: rgba(22,163,74,.4); }
.cat-card:hover .cat-img { transform: scale(1.08); }
.cat-img { transition: transform .5s cubic-bezier(.2,.7,.2,1); }

/* ---------- Product card ---------- */
.product-card { transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.product-card:hover { transform: translateY(-5px); box-shadow: 0 24px 50px -24px rgba(22,40,29,.28); border-color: rgba(22,163,74,.35); }
.product-card .product-img { transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.product-card:hover .product-img { transform: scale(1.07); }
.product-card .quick { opacity: 0; transform: translateY(6px); transition: opacity .3s ease, transform .3s ease; }
.product-card:hover .quick { opacity: 1; transform: none; }

/* ---------- Header on scroll ---------- */
.site-header { transition: box-shadow .3s ease; }
.site-header.scrolled { box-shadow: 0 10px 30px -18px rgba(22,40,29,.35); }

/* ---------- Buttons ---------- */
.btn-shine { position: relative; overflow: hidden; }
.btn-shine::after { content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255,255,255,.45), transparent); transform: skewX(-20deg); }
.btn-shine:hover::after { left: 130%; transition: left .8s ease; }

/* ---------- Cart badge ---------- */
.cart-count.bump { animation: bump .4s ease; }
@keyframes bump { 0%{transform:scale(1)} 50%{transform:scale(1.4)} 100%{transform:scale(1)} }

/* ---------- Marquee (brands) ---------- */
.marquee { overflow: hidden; }
.marquee__track { display: flex; width: max-content; animation: marquee 26s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Drawers / overlay / menu ---------- */
.drawer { transition: transform .42s cubic-bezier(.4,0,.2,1); }
.overlay { transition: opacity .35s ease; }
.mobile-menu { transition: transform .4s cubic-bezier(.4,0,.2,1); }
.filter-panel { transition: transform .4s cubic-bezier(.4,0,.2,1); }
.mega-menu { transition: opacity .25s ease, transform .25s ease, visibility .25s; }

/* ---------- Accordion ---------- */
.acc-body { max-height: 0; overflow: hidden; transition: max-height .4s ease; }

/* ---------- Range slider ---------- */
input[type="range"].brand-range { -webkit-appearance: none; appearance: none; height: 4px; border-radius: 999px; background: #e2e8e4; outline: none; }
input[type="range"].brand-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--brand); cursor: pointer; box-shadow: 0 0 0 4px rgba(22,163,74,.2); }
input[type="range"].brand-range::-moz-range-thumb { width: 18px; height: 18px; border: none; border-radius: 50%; background: var(--brand); cursor: pointer; }

/* ---------- Stars ---------- */
.stars { color: #f59e0b; letter-spacing: 1px; }

/* ---------- Link underline ---------- */
.link-underline { position: relative; }
.link-underline::after { content: ""; position: absolute; left: 0; bottom: -3px; width: 0; height: 2px; background: var(--brand); transition: width .3s ease; }
.link-underline:hover::after { width: 100%; }

/* ---------- Toast ---------- */
.toast { transition: transform .4s cubic-bezier(.2,.8,.2,1), opacity .4s ease; }

/* ---------- Misc ---------- */
body.no-scroll { overflow: hidden; }
.float { animation: float 6s ease-in-out infinite; }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }