: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);
  --ok: #16a34a;
  --danger: #ef4444;
  --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;
  --accent: var(--brand-teal);
  --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;}

.breadcrumbs{margin:16px 0; display:flex; flex-wrap:wrap; gap:8px; align-items:center;}
.breadcrumbs a{color:var(--muted); text-decoration:none; padding:6px 10px; background: var(--glass); border: var(--border); border-radius:999px;}
.breadcrumbs .current{color:var(--text); background: transparent; padding:0; box-shadow:none; border:none;}

.searchbar{display:grid; grid-template-columns: 1fr auto; gap:10px; align-items:center; margin: 16px 0 20px;}
.searchbar input{width:100%; padding:12px 14px; background: var(--glass); border: var(--border); border-radius:14px; color:var(--text); outline:none; box-shadow: var(--shadow);}
.searchbar input::placeholder{color:var(--muted)}
.searchbar button{padding:12px 18px; border-radius:14px; border: var(--border); background: linear-gradient(135deg, rgba(17,126,119,.95), rgba(11,59,58,.95)); box-shadow: var(--shadow); color:#fff; cursor:pointer;}
.searchbar button:hover{transform: translateY(-1px)}
@media (max-width: 900px){.searchbar{grid-template-columns: 1fr;}}

.loading, .error{background: var(--glass); border: var(--border); box-shadow: var(--shadow); border-radius: var(--radius); padding:40px 20px; text-align:center; margin:20px 0;}
.error{background: rgba(239,68,68,0.1); color: var(--danger);}

.catalogue{background: var(--glass); border: var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding:20px;}
.catalogue header{margin-bottom:20px;}
.catalogue h2{margin:0; font-size:24px; font-weight:800;}

.cat-grid{display:grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap:16px;}
.cat-card{display:flex; flex-direction:column; align-items:center; gap:12px; padding:24px 16px; border-radius:14px; border: var(--border); background: var(--glass); cursor:pointer; box-shadow: var(--shadow); text-decoration:none; color:var(--text); text-align:center; transition: transform 0.2s;}
.cat-card:hover{background: var(--glass-strong); transform: translateY(-2px);}
.cat-icon{width:64px; height:64px; border-radius:14px; display:grid; place-items:center; font-size:32px; background:linear-gradient(135deg, rgba(17,126,119,.15), rgba(11,59,58,.05));}
.cat-name{font-weight:700; font-size:16px; letter-spacing:.2px;}

[data-theme="dark"] .cat-card:hover{background: rgba(255,255,255,0.12);}

.searchbar{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;}