/* Bibbity’s Baubles — forest/amanita theme */
/* Drop-in replacement for static/site.css */

:root{
  /* forest + amanita vibes */
  --bg:#0a0f0a;           /* deep forest */
  --card:#11150f;         /* damp soil */
  --text:#eae6d9;         /* warm parchment */
  --muted:#b9b3a6;        /* lichen */
  --accent:#d94a4a;       /* amanita cap red */
  --accent-2:#7fb069;     /* moss green */
  --border:#26301e;       /* dark moss */
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  color: var(--text);
  /* Forest gradient + faint red/green glows */
  background:
    radial-gradient(1100px 600px at 15% -10%, rgba(190, 32, 32, .12) 0, transparent 60%),
    radial-gradient(1000px 600px at 110% 0%, rgba(25, 80, 45, .14) 0, transparent 55%),
    linear-gradient(180deg, #070a07, var(--bg) 45%, #0e1510);
}

/* Floating “spores” – super subtle */
body::before{
  content:"";
  position:fixed; inset:0; pointer-events:none;
  background:
    radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.06), transparent 40%),
    radial-gradient(2px 2px at 60% 70%, rgba(255,255,255,.05), transparent 40%),
    radial-gradient(1.5px 1.5px at 80% 20%, rgba(255,255,255,.04), transparent 40%),
    radial-gradient(1.5px 1.5px at 35% 80%, rgba(255,255,255,.04), transparent 40%);
  mix-blend-mode: soft-light;
  opacity:.5;
  z-index:0;
}

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, .btn:focus-visible, .input:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
  border-radius: 8px;
}

.container{ max-width:1100px; margin:0 auto; padding:24px; }

header{
  border-bottom:1px solid var(--border);
  background:rgba(11,12,16,.6);
  backdrop-filter: blur(6px);
  position: sticky; top: 0; z-index: 5;
}
.header-inner{ display:flex; align-items:center; gap:16px; justify-content:space-between; padding:14px 0; position:relative; z-index:1; }
.brand{ font-weight:800; letter-spacing:.3px; margin: 0; }
.brand a{
  background: linear-gradient(135deg, var(--text) 0, #fff 35%, var(--accent-2) 70%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.badge{
  font-size:.72rem; padding:.15rem .45rem; border:1px solid #2f3a25;
  border-radius:999px; color:var(--muted); background: rgba(20,24,17,.5); display:inline-block;
  margin-top:4px;
}
.nav a{ opacity:.9; margin-left:14px; }
.nav a:hover{ opacity:1; text-decoration:underline; }

main{ padding:18px 0; }
footer{ border-top:1px solid var(--border); color:var(--muted); margin-top:28px; padding:16px 0; }

/* Grid of product cards */
.grid{
  display:grid; gap:16px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  margin-top:18px;
}
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  box-shadow: 0 0 0 rgba(0,0,0,0);
}
.card:hover{
  transform: translateY(-2px);
  border-color:#3a4630;
  box-shadow: 0 10px 26px rgba(9, 12, 10, .45), 0 0 0 1px rgba(63, 80, 55, .2) inset;
}
.card-img{ display:block; width:100%; height:180px; object-fit:cover; background:#0f1115; }
.card-body{ padding:12px 14px; }
.card-title{ font-weight:600; margin:0 0 6px 0; }
.card-price{ color: var(--accent-2); font-weight:700; }

/* Buttons & inputs */
.btn{
  display:inline-block; border:1px solid var(--border); background:#1a1d24; color:var(--text);
  padding:.55rem .9rem; border-radius:10px; text-decoration:none; cursor:pointer; font-weight:600;
  transition: filter .12s ease, border-color .12s ease, transform .04s ease;
}
.btn:hover{ border-color:#2e3139; }
.btn:active{ transform: translateY(1px); }
.btn-primary{
  background:linear-gradient(135deg, var(--accent), #7c2a2a);
  border-color:#7c2a2a;
}
.btn-primary:hover{ filter:brightness(1.05); }
.btn-danger{ border-color:#3a1d1d; background:#201416; color:#ffb4b4; }
.input{
  background:#111318; border:1px solid var(--border); color:var(--text);
  padding:.45rem .6rem; border-radius:8px;
}

/* Tables (cart) */
.table{ width:100%; border-collapse:collapse; margin-top:10px; }
.table th,.table td{ border-bottom:1px solid var(--border); padding:10px 8px; text-align:left; vertical-align: top; }
.table th{ color:var(--muted); font-weight:600; }
.total{ font-size:1.1rem; margin-top:10px; }

/* Utilities */
img{ max-width:100%; height:auto; border-radius:10px; }
.center{ display:flex; align-items:center; justify-content:center; }
.muted{ color: var(--muted); }