/* Modern WebShop UI – modern.css */

[data-theme="dark"]{
  --bg:#0b0f1a;
  --fg:#e7e9f1;
  --muted:#9aa3b2;
  --primary:#6aa7ff;
  --primary-contrast:#0b0f1a;
  --surface:#0e1422;
  --surface-2:#0b0f1a;
  --card: rgba(255,255,255,.04);
  --border: rgba(255,255,255,.12);
  --ring: rgba(106,167,255,.35);
  --shadow: 0 16px 32px rgba(0,0,0,.35);
  --shadow-hover: 0 24px 50px rgba(0,0,0,.45);
}
*{ box-sizing: border-box; }
html, body{ height: 100%; }
body{
  font-family: var(--font);
  background: var(--bg);
  color: var(--fg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
.container{ width: min(1100px, 92vw); margin-inline: auto; padding-block: 1.5rem; }
.grid{ display:grid; gap: var(--gap); }
.grid.cols-2{ grid-template-columns: repeat(2, 1fr); }
.grid.cols-3{ grid-template-columns: repeat(3, 1fr); }
.grid.cols-4{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px){
  .grid.cols-4{ grid-template-columns: repeat(2, 1fr); }
  .grid.cols-3{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .grid.cols-4, .grid.cols-3, .grid.cols-2{ grid-template-columns: 1fr; }
}
.card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition), background var(--transition);
}
.card.hover:hover{ transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.btn{
  appearance: none;
  border: 1px solid var(--border);
  background: var(--surface);
  padding: .7rem 1rem;
  border-radius: calc(var(--radius) - 6px);
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), border-color var(--transition), color var(--transition);
}
.btn:hover{ transform: translateY(-1px); box-shadow: var(--shadow); }
.btn:focus-visible{ outline: none; box-shadow: 0 0 0 4px var(--ring); }
.btn.primary{ background: var(--primary); border-color: transparent; color: var(--primary-contrast); }
.btn.ghost{ background: transparent; border-color: var(--border); }
.input, input[type="text"], input[type="search"], input[type="number"], select{
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 8px);
  padding: .7rem .9rem;
  color: var(--fg);
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.input:focus, input:focus, select:focus{ outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px var(--ring); }
.chip{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.45rem .8rem;
  border-radius: 999px;
  background: var(--surface-2);
  border:1px solid var(--border);
  font-size:.9rem;
}
.badge{
  display:inline-block;
  padding:.35rem .6rem;
  background: var(--surface-2);
  border:1px solid var(--border);
  border-radius: 999px;
  font-size:.8rem;
  color: var(--muted);
}
.toast{ position: fixed; inset: auto 1rem 1rem auto; display: grid; gap: .5rem; width: min(360px, 92vw); z-index: 60; }
.toast .msg{ background: var(--card); border:1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: .85rem 1rem; }
.navbar{ display:flex; align-items:center; justify-content:space-between; padding: .8rem 0; }
.brand{ font-weight: 700; letter-spacing: .2px; text-decoration: none; color: var(--fg); }
.product{ display:flex; flex-direction:column; gap:.6rem; padding: .9rem; }
.product img{ width:100%; height:auto; border-radius: calc(var(--radius) - 8px); border:1px solid var(--border); background: var(--surface); }
.drawer{ position: fixed; top: 0; right: 0; width: min(420px, 92vw); height: 100dvh; background: var(--surface); border-left: 1px solid var(--border); box-shadow: var(--shadow-hover); transform: translateX(100%); transition: transform var(--transition); z-index: 70; display:flex; flex-direction:column; }
.drawer.open{ transform: translateX(0); }
.drawer .drawer-header{ display:flex; align-items:center; justify-content:space-between; padding: 1rem; border-bottom:1px solid var(--border); background: var(--card); }
.drawer .drawer-body{ padding: 1rem; overflow:auto; flex:1; }
.drawer .drawer-footer{ padding: 1rem; border-top:1px solid var(--border); display:flex; gap:.6rem; background: var(--card); }
.fade-in{ animation: fadeIn .25s ease both; }
@keyframes fadeIn{ from{ opacity: 0; transform: translateY(2px); } to{ opacity: 1; transform: none; } }
.hidden{ display:none !important; }
.muted{ color: var(--muted); }
.wide{ width: 100%; }