:root{
  --brand-teal: #117e77;
  --brand-deep: #0b3b3a;
  --brand-gold: #e3b34b;
  --brand-orange: #d96a2b;
  --brand-cream: #f5e7c6;

  --bg: radial-gradient(900px 600px at -10% -10%, rgba(245,231,198,0.75) 0%, transparent 60%),
        radial-gradient(900px 600px at 110% 0%, rgba(17,126,119,0.12) 0%, transparent 60%),
        linear-gradient(180deg, #ffffff, #f8fafc);
  --panel: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(248,250,252,0.9));
  --glass: rgba(255,255,255,0.65);
  --glass-strong: rgba(255,255,255,0.86);
  --text: #0f172a;
  --muted: #64748b;
  --accent: var(--brand-teal);
  --border: 1px solid rgba(2,6,23,0.08);
  --shadow: 0 10px 30px rgba(2,6,23,0.08), inset 0 1px 0 rgba(255,255,255,0.6);
  --radius: 18px;
}

[data-theme="dark"]{
  --bg: radial-gradient(1200px 800px at 20% -10%, rgba(17,126,119,0.35) 0%, transparent 60%),
        radial-gradient(1000px 800px at 120% 10%, rgba(227,179,75,0.15) 0%, transparent 60%),
        linear-gradient(180deg, #0b1217, #0b1217);
  --panel: linear-gradient(180deg, #18222b, #0f1720);
  --glass: rgba(255,255,255,0.08);
  --glass-strong: rgba(255,255,255,0.14);
  --text: #e5e7eb;
  --muted: #9ca3af;
  --border: 1px solid rgba(255,255,255,0.15);
  --shadow: 0 10px 30px rgba(0,0,0,0.4), inset 0 1px 1px rgba(255,255,255,0.06);
}

*{box-sizing:border-box}
body{
  margin:0;
  font: 15px/1.5 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial;
  color:var(--text);
  background:#fff;
  background-image: var(--bg);
  min-height:100vh;
}
.container{max-width:1200px;margin:0 auto;padding:24px;}

.hero{margin-top:18px; display:grid; grid-template-columns: 1.3fr 1fr; gap:20px; align-items:stretch;}
.hero-card{background: var(--glass); border: var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding:24px; display:flex; flex-direction:column; justify-content:center;}
.hero h1{margin:0 0 6px 0; font-size:34px; line-height:1.15;}
.hero p{margin:0 0 16px 0; color:var(--muted)}
.hero-search{display:grid; grid-template-columns: 1fr auto; gap:10px; align-items:center; margin-top:14px;}
.hero-search input{width:100%; padding:12px 14px; background: var(--glass); border: var(--border); border-radius:14px; color:var(--text); outline:none; box-shadow: var(--shadow);}
.hero-search button{padding:12px 18px; border-radius:14px; border: var(--border); background: linear-gradient(135deg, rgba(17,126,119,.95), rgba(11,59,58,.95)); color:#fff; cursor:pointer; box-shadow: var(--shadow);}
.actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px;}
.btn-primary{padding:12px 18px; border-radius:14px; border: var(--border); background: linear-gradient(135deg, rgba(17,126,119,.95), rgba(11,59,58,.95)); color:#fff; font-weight:800; box-shadow: var(--shadow); cursor:pointer;}
.btn-ghost{padding:12px 18px; border-radius:14px; border: var(--border); background: var(--glass); cursor:pointer; text-decoration:none; color:var(--text);}
.hero-side{background: var(--glass); border: var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding:0; overflow:hidden;}
.hero-side img{width:100%; height:100%; object-fit:cover; display:block;}

.quick-cats{margin-top:22px;}
#quick-categories-grid{display:grid; grid-template-columns: repeat(6, 1fr); gap:10px;}
.cat{display:flex; align-items:center; justify-content:center; gap:8px; padding:12px 14px; border-radius:14px; background: var(--glass); border: var(--border); box-shadow: var(--shadow); cursor:pointer; text-decoration:none; color:var(--text);}
.cat:hover{background: var(--glass-strong)}

.section{margin-top:26px;}
.section h2{margin:0 0 10px 0; font-size:22px;}
.cards{display:grid; grid-template-columns: repeat(3, 1fr); gap:14px;}
.product{background: var(--glass); border: var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding:14px; display:flex; flex-direction:column; text-decoration:none; color:var(--text);}
.product:hover{transform: translateY(-2px); background: var(--glass-strong);}
.product .pic{aspect-ratio: 4/3; border-radius:12px; background: var(--panel); display:grid; place-items:center; overflow:hidden;}
.product .pic img{width:100%; height:100%; object-fit:contain;}
.product .title{margin:10px 0 6px 0; font-weight:700;}
.product .meta{color:var(--muted); font-size:14px;}
.product .row{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:10px;}
.product .price{font-weight:800; color:var(--accent);}

.promo{margin-top:24px; display:grid; grid-template-columns: repeat(3, 1fr); gap:12px;}
.promo .tile{background: var(--glass); border: var(--border); border-radius:16px; box-shadow: var(--shadow); padding:14px; text-align:center;}

.newsletter{margin-top:24px; background: var(--glass); border: var(--border); border-radius:16px; box-shadow: var(--shadow); padding:18px; display:grid; grid-template-columns: 1.2fr 1fr; gap:14px; align-items:center;}
.newsletter h3{margin:0 0 6px 0;}
.newsletter p{margin:0; color:var(--muted)}
.newsletter form{display:flex; gap:10px;}
.newsletter input{flex:1; padding:12px 14px; border-radius:12px; border: var(--border); background: var(--glass); color:var(--text);}
.newsletter button{padding:12px 16px; border-radius:12px; border: var(--border); background: linear-gradient(135deg, rgba(17,126,119,.95), rgba(11,59,58,.95)); color:#fff; cursor:pointer;}

@media (max-width: 980px){
  .hero{grid-template-columns: 1fr;}
  .hero-side{min-height:160px}
  #quick-categories-grid{grid-template-columns: repeat(3, 1fr);}
  .cards{grid-template-columns: repeat(2, 1fr);}
  .promo{grid-template-columns: 1fr;}
  .newsletter{grid-template-columns: 1fr;}
  .newsletter form{flex-direction:column;}
}

@media (max-width: 640px){
  #quick-categories-grid{grid-template-columns: repeat(2, 1fr);}
  .cards{grid-template-columns: 1fr;}
}



.hero-search{position:relative;}
.search-dropdown{position:absolute; top:100%; left:0; right:0; margin-top:8px; background:var(--glass); backdrop-filter:blur(14px) saturate(140%); border:var(--border); border-radius:14px; box-shadow:var(--shadow); z-index:100; max-height:400px; overflow-y:auto; display:none;}
.search-section{padding:12px;}
.search-section-title{font-weight:700; font-size:12px; color:var(--muted); margin-bottom:8px; text-transform:uppercase;}
.search-item{display:block; padding:10px 12px; border-radius:10px; text-decoration:none; color:var(--text); margin-bottom:4px;}
.search-item:hover{background:var(--glass-strong);}
.search-product{display:flex; justify-content:space-between; align-items:center;}
.search-product-name{font-weight:600;}
.search-product-price{color:var(--accent); font-weight:700;}
.search-empty{padding:20px; text-align:center; color:var(--muted);}
.search-footer{padding:8px 12px; border-top:var(--border); font-size:11px; color:var(--muted); text-align:center;}