/* ---------- Base ---------- */
:root{
  --bg:#f8faf8;
  --card:#ffffff;
  --ink:#0f172a;
  --muted:#475569;
  --line:#e5e7eb;
  --brand:#1b9b60;
  --brand-ink:#0e5e3a;
  --accent:#e6f4ea;
  --shadow:0 10px 30px rgba(2, 6, 23, 0.08);
  --radius:16px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  color:var(--ink);
  background:var(--bg);
  line-height:1.5;
}

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:30; background:rgba(255,255,255,.8);
  backdrop-filter: blur(8px); border-bottom:1px solid var(--line);
}
.container{max-width:1200px; margin:0 auto; padding:0 20px;}
.header-inner{display:flex; align-items:center; justify-content:space-between; height:68px;}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.2px;}
.logo-dot{width:12px;height:12px;border-radius:50%;background:var(--brand);}
.brand-name{font-size:1.05rem;}
.nav-actions{display:flex; gap:10px;}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 16px; border-radius:999px; text-decoration:none; font-weight:600; border:1px solid transparent; transition:.25s}
.btn-solid{background:var(--brand); color:#fff;}
.btn-solid:hover{background:var(--brand-ink);}
.btn-outline{border-color:var(--brand); color:var(--brand);}
.btn-outline:hover{background:var(--accent);}
.btn-ghost{color:var(--brand); border-color:transparent;}
.btn-ghost:hover{background:var(--accent);}

/* ---------- Hero ---------- */
.hero{background:linear-gradient(180deg, var(--accent), #fff 70%);}
.hero-inner{display:grid; grid-template-columns:1.15fr .85fr; gap:24px; padding:64px 0 48px;}
.hero-copy h1{font-size:clamp(32px,4vw,54px); line-height:1.1; margin:0 0 8px;}
.hero-copy p{color:var(--muted); max-width:56ch; margin:0 0 18px;}
.hero-cta{display:flex; gap:10px; flex-wrap:wrap;}
.hero-art{height:320px; border-radius:var(--radius); background:
  radial-gradient(120px 120px at 20% 30%, #b7ffd8 0, transparent 60%),
  radial-gradient(140px 140px at 80% 20%, #c8ffe2 0, transparent 60%),
  radial-gradient(160px 160px at 60% 80%, #e3ffe7 0, transparent 60%),
  #f7fff9; box-shadow:var(--shadow);}

/* ---------- Toolbar ---------- */
.toolbar{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 0;}
.tabs{display:flex; flex-wrap:wrap; gap:10px;}
.tab{border:1px solid var(--line); background:#fff; color:var(--ink); padding:8px 14px; border-radius:999px; cursor:pointer; transition:.25s; font-weight:600;}
.tab:hover{border-color:var(--brand); background:var(--accent);}
.tab.active{background:var(--brand); color:#fff; border-color:var(--brand);}
.search input{width:260px; max-width:100%; padding:10px 14px; border-radius:10px; border:1px solid var(--line); outline:0;}
.search input:focus{border-color:var(--brand); box-shadow:0 0 0 3px #1b9b6022}

/* ---------- Grid & Cards ---------- */
.grid{display:grid; grid-template-columns:repeat(12, 1fr); gap:22px;}
.card{grid-column: span 3; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); transition:.3s; position:relative;}
@media (max-width:1100px){ .card{grid-column: span 4;} }
@media (max-width:780px){ .card{grid-column: span 6;} }
@media (max-width:520px){ .card{grid-column: 1 / -1;} }

.card-media{position:relative; overflow:hidden; aspect-ratio: 1 / 1.05;}
.card-media img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease;}
.card:hover .card-media img{transform:scale(1.06);}
.overlay{
  position:absolute; inset:0; display:flex; align-items:end; justify-content:center; padding:14px; background:linear-gradient(0deg, rgba(0,0,0,.45), rgba(0,0,0,0) 55%); opacity:0; transition:.35s;
}
.card:hover .overlay{opacity:1;}
.overlay .btn{backdrop-filter:blur(6px);}

.sale-badge{
  position:absolute; top:12px; left:12px; background:#0ea5e9; color:#fff; font-weight:700; font-size:.78rem;
  padding:6px 10px; border-radius:999px; box-shadow:var(--shadow);
}

.card-body{padding:14px 14px 16px;}
.card-title{font-weight:700; font-size:1.05rem; margin:0 0 6px;}
.card-desc{color:var(--muted); font-size:.92rem; min-height:44px; margin:0 0 10px;}
.price-row{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;}
.price-sale{font-weight:800; color:var(--brand); font-size:1.05rem;}
.price-mrp{text-decoration:line-through; color:#94a3b8;}
.price-off{color:#0ea5e9; font-weight:700;}

/* ---------- Reveal on Scroll ---------- */
.reveal{opacity:0; transform: translateY(18px); transition: .6s ease;}
.reveal.show{opacity:1; transform:none;}

/* ---------- Modal ---------- */
.modal{position:fixed; inset:0; background:rgba(15, 23, 42, .55); display:none; align-items:center; justify-content:center; padding:18px; z-index:50;}
.modal-panel{background:#fff; border-radius:20px; width:min(980px, 100%); box-shadow:var(--shadow);}
.modal-close{position:absolute; margin:14px; right:0; border:0; background:#fff; width:36px; height:36px; border-radius:50%; box-shadow:var(--shadow); cursor:pointer; font-size:20px; line-height:36px;}
.modal-body{display:grid; grid-template-columns: 1.05fr .95fr; gap:22px; padding:26px;}
@media (max-width:900px){ .modal-body{grid-template-columns:1fr;} }

.modal-media{display:flex; flex-direction:column; gap:10px;}
.modal-media img{width:100%; aspect-ratio: 1 / 1; object-fit:cover; border-radius:14px; border:1px solid var(--line);}
.thumbs{display:grid; grid-template-columns:repeat(4, 1fr); gap:10px;}
.thumbs img{width:100%; aspect-ratio: 1 / 1; object-fit:cover; border-radius:10px; border:1px solid var(--line); cursor:pointer; opacity:.8;}
.thumbs img.active, .thumbs img:hover{opacity:1; outline:2px solid var(--brand);}

.modal-info h2{margin:0 0 8px;}
.muted{color:var(--muted);}
.pay-box{margin-top:16px; border:1px dashed var(--line); border-radius:14px; padding:14px;}
.pay-steps{display:grid; gap:10px; margin-bottom:12px;}
.step{display:flex; gap:10px; align-items:center;}
.step-num{width:24px; height:24px; display:grid; place-items:center; background:var(--accent); color:var(--brand-ink); font-weight:800; border-radius:50%;}
.pay-actions{display:flex; gap:10px; flex-wrap:wrap;}
.qr{margin-top:10px; width:160px; height:160px; object-fit:contain; border:1px solid var(--line); border-radius:10px;}

/* ---------- Footer ---------- */
.site-footer{margin-top:40px; background:#fff; border-top:1px solid var(--line);}
.footer-inner{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding:28px 0;}
.footer-inner h4{margin:0 0 6px;}
.footer-inner a{color:var(--brand); text-decoration:none;}
.footer-inner a:hover{text-decoration:underline;}
.footer-base{padding:12px 0 24px; color:var(--muted); border-top:1px solid var(--line);}