/*
Theme Name: Nutreevastore
Theme URI: https://example.com/nutreevastore
Author: You
Description: Single-pay storefront (Home + Shop + About + Order). Colors auto-picked from your uploaded product images.
Version: 1.0.1
License: GPL-2.0-or-later
Text Domain: nutreevastore
*/

:root{
  --bg:#D9E7E1;
  --ink:#141C18;
  --ink-2:#4A5850;
  --line:#d7e2db;
  --card:#ffffff;
  --btn:#1A6E49;
  --btn-ink:#ffffff;
  --accent:#388C67;
  --radius:18px;
  --wrap:1140px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);
font:16px/1.65 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial}
img{max-width:100%;display:block} a{text-decoration:none;color:inherit}

.container{max-width:var(--wrap);margin:0 auto;padding:24px}
.site-header{position:sticky;top:0;background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.88));
backdrop-filter:saturate(180%) blur(6px);border-bottom:1px solid var(--line);z-index:20}
.brand{font-weight:800;letter-spacing:.3px}
.nav{display:flex;gap:20px;align-items:center}
.nav a{color:var(--ink-2);padding:6px 10px;border-radius:10px}
.nav a.active{background:var(--card);color:var(--ink);border:1px solid var(--line)}
.nav .btn{background:var(--btn);color:var(--btn-ink);padding:10px 14px;border-radius:999px;font-weight:700}

.hero{padding:72px 0 12px}
.hero h1{font-size:44px;line-height:1.1;margin:0 0 12px;letter-spacing:.2px}
.hero p{margin:0;color:var(--ink-2)}
.cta{margin-top:18px;display:inline-block;background:var(--btn);color:var(--btn-ink);padding:12px 18px;border-radius:999px;font-weight:800}
.note{display:inline-block;margin-left:10px;color:var(--ink-2)}

.section{padding:30px 0}
.section h2{font-size:22px;margin:0 0 8px;letter-spacing:.2px;color:var(--ink)}

.grid{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;
box-shadow:0 10px 28px rgba(0,0,0,.06);transition:transform .18s ease, box-shadow .18s ease}
.card:hover{transform:translateY(-4px);box-shadow:0 18px 42px rgba(0,0,0,.12)}
.card img{height:260px;object-fit:cover;border-radius:14px}
.card h3{margin:12px 0 6px;letter-spacing:.2px}
.badge{display:inline-block;background:linear-gradient(180deg,var(--accent),#ffffff);
color:var(--ink);font-weight:700;font-size:12px;padding:6px 10px;border-radius:999px;margin-bottom:10px;border:1px solid var(--line)}
.price{font-weight:900;margin:8px 0 12px;color:var(--ink)}
.buy{display:inline-block;background:var(--btn);color:var(--btn-ink);padding:10px 14px;border-radius:999px;font-weight:800}
.buy:hover{filter:saturate(108%);}

.footer{border-top:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.96));margin-top:56px}
.footer .container{padding-top:18px;padding-bottom:18px;font-size:14px;color:var(--ink-2)}

.form-wrap{max-width:820px;margin:20px auto;border:1px solid var(--line);border-radius:var(--radius);padding:24px;background:#fff;
box-shadow:0 12px 34px rgba(0,0,0,.08)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-row .full{grid-column:1/-1}
label{display:block;font-weight:700;margin-bottom:6px;color:var(--ink)}
input,textarea{width:100%;padding:13px;border:1px solid var(--line);border-radius:12px;background:#fff}
input:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,0,0,.06)}
textarea{min-height:120px;resize:vertical}
button.primary{background:var(--btn);color:var(--btn-ink);padding:12px 18px;border:0;border-radius:999px;font-weight:900;cursor:pointer}
.alert{padding:12px;border:1px solid #b7f7c3;background:#ecfff1;color:#155e2d;border-radius:10px;margin-bottom:16px}

.muted{color:var(--ink-2)} .center{text-align:center}