:root{
  --drina:#3AB7BF;
  --pine:#2F6B3E;
  --ink:#333;
  --sand:#F8F4EE;
  --gold:#C59D5F;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family: "Open Sans", Arial, sans-serif;color:var(--ink);background:var(--sand);
}
a{color:var(--pine);text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:20px}
.header{background:#fff;border-bottom:1px solid #eee}
.header .wrap{display:flex;align-items:center;gap:20px;padding:10px 0}
.header img{height:56px}
.header .brand{display:flex;flex-direction:column}
.brand h1{font-family:"Playfair Display", Georgia, serif;margin:0;font-size:28px;line-height:1.1}
.brand small{color:var(--gold)}

.nav{margin-left:auto;display:flex;gap:16px}
.btn{display:inline-block;padding:10px 16px;border-radius:8px;background:var(--drina);color:#fff;font-weight:600;border:0;cursor:pointer}
.btn.alt{background:var(--pine)}
.btn.ghost{background:transparent;border:2px solid var(--drina);color:var(--drina)}
.btn:disabled{opacity:.6;cursor:not-allowed}

.hero{background:linear-gradient(180deg,#e8f7f8,transparent);padding:40px 0}
.hero h2{font-family:"Playfair Display", Georgia, serif;font-size:36px;margin:0 0 10px}
.hero p{font-size:16px;margin:0 0 20px}
.search{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.search input,.search select{padding:10px;border-radius:8px;border:1px solid #ddd;min-width:160px;background:#fff}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin-top:20px}
.card{background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 6px 16px rgba(0,0,0,.06);display:flex;flex-direction:column}
.card img{width:100%;height:180px;object-fit:cover}
.card .pad{padding:12px}
.price{color:#000;font-weight:700}
.tag{display:inline-block;background:#eef9fa;color:#10646a;padding:4px 10px;border-radius:999px;font-size:12px;margin-right:6px}

.form{background:#fff;border-radius:14px;padding:16px;box-shadow:0 6px 16px rgba(0,0,0,.06)}
.form input,.form select,.form textarea{width:100%;padding:10px;border:1px solid #ddd;border-radius:8px;margin:6px 0 12px;background:#fff}
.table{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden}
.table th,.table td{padding:10px;border-bottom:1px solid #eee;text-align:left}
.badge{padding:6px 10px;border-radius:999px;background:#eef0f0;font-size:12px}
.footer{padding:30px 0;color:#666}
.alert{padding:10px 12px;border-radius:8px;background:#e8fff1;border:1px solid #93e0ae;margin:10px 0}
.err{background:#ffecec;border:1px solid #f5a4a4}
.gallery{display:flex;gap:8px;flex-wrap:wrap}
.gallery img{width:120px;height:90px;object-fit:cover;border-radius:8px;border:1px solid #eee}
.kicker{color:var(--gold);font-weight:600;letter-spacing:.4px;text-transform:uppercase;font-size:12px}
.small{font-size:12px;color:#666}
.center{text-align:center}