:root {
  --max: 1200px;
  --gap: 1rem;
  --ink: #0a0a0a;            /* primary text on light bg */
  --muted: #3a3a3a;          /* secondary text */
  --line: rgba(0,0,0,0.15);  /* subtle borders */
  --soft: rgba(0,0,0,0.06);  /* hover / fills */
  --card: rgba(255,255,255,0.88); /* card surface */
  --btn: #ffffff;            /* button surface */
  --btn-border: rgba(0,0,0,0.2);
  --badge-bg: #0a84ff;       /* cart badge */
  --badge-ink: #ffffff;
}

/* Resets & basics */
* { box-sizing: border-box; }
img { max-width: 100%; height: auto; display: block; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;

  /* The gradient you asked for */
  background: linear-gradient(90deg,
    #87ceeb 0%,    /* sky blue (left) */
    #ffffff 50%,   /* white (center) */
    #faf58c 100%   /* sun yellow (right) */
  );
}

/* Links */
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }

/* Header / Nav (centered) */
header {
  position: sticky;
  top: 0;
  width: 100%;
  backdrop-filter: blur(8px);
  background: linear-gradient(90deg,
    #87ceeb 0%,    /* sky blue (left) */
    #ffffff 50%,   /* white (center) */
    #faf58c 100%   /* sun yellow (right) */
  );
  border-bottom: 1px solid var(--line);
  z-index: 10;
  display: flex;
  justify-content: center;
}

nav {
  width: 100%;
  max-width: var(--max);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  padding: .75rem 1rem;
}

.brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-weight: 700;
  letter-spacing: .5px;
  line-height: 0; /* keeps image tight */
}

.brand .logo {
  height: 60px !important;
  max-height: 60px !important;
  width: auto !important;
  display: block;
}

nav .links {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}

nav .links a {
  padding: .5rem .75rem;
  border-radius: .5rem;
  transition: background .15s ease;
}

nav .links a:hover {
  background: var(--soft);
  text-decoration: none;
}

/* Cart badge */
.cart { position: relative; display: inline-block; }
.cart-count {
  position: absolute; top: -6px; right: -6px;
  background: var(--badge-bg); color: var(--badge-ink);
  padding: 2px 6px; border-radius: 999px;
  font-size: .75rem; min-width: 18px; text-align: center;
}

/* Main layout */
main {
  width: 100%;
  max-width: var(--max);
  margin: 1rem auto 3rem;
  padding: 0 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Fix black-on-black hero text */
.hero { color: #e9e9f2; }               /* default text inside hero */
.hero h1 { color: #ffffff; }             /* title */
.hero .tagline { color: #c8c8d6; }       /* subtitle */
.hero a.btn { color: #111; background:#fff; border:1px solid #ddd; } /* ensure CTA contrast */
.hero a.btn:hover { background:#f5f5f5; }

/* Optional subtle lift for readability */
.hero h1, .hero .tagline { text-shadow: 0 1px 2px rgba(0,0,0,.35); }


/* Grid & cards */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px,1fr));
  gap: var(--gap);
  justify-items: center;
}

/* Poppy cards on dark backgrounds */
.card {
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 16px;
  box-shadow:
    0 8px 28px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #ececf1;
}

/* Optional: slightly brighter headings inside cards */
.card h1, .card h2, .card h3 { color: #fff; }

/* Hover lift (subtle) */
.card:hover { transform: translateY(-1px); transition: transform .15s ease; }

/* If you use .btn on dark cards, ensure contrast */
.btn { background:#fff; color:#111; border-radius:10px; border:1px solid #ddd; }
.btn:hover { background:#f5f5f5; }


.card .thumb {
  width: 100%;
  aspect-ratio: 1.6 / 1;
  background: var(--soft);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.card .thumb img, .card .thumb video {
  width: 100%; height: 100%; object-fit: cover;
}

.card .body {
  padding: .85rem;
  display: flex; flex-direction: column; gap: .4rem;
}

.card p  { margin: 0; color: var(--muted); font-size: .95rem; }

.price-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: .6rem;
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .55rem .85rem;
  border: 1px solid var(--btn-border);
  border-radius: .65rem;
  background: var(--btn);
  color: var(--ink);
  cursor: pointer;
  text-align: center;
  transition: background .15s ease, transform .02s ease;
}

.btn:hover { background: #f4e57b; text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn.small { padding:.35rem .6rem; font-size:.9rem; }

/* Tags */
.tag {
  font-size: .78rem;
  color: var(--muted);
  border: 1px solid var(--line);
  padding: .15rem .5rem;
  border-radius: 999px;
  margin-right: .25rem;
}

/* Filters / Inputs */
.filterbar {
  display: flex; gap: .5rem; flex-wrap: wrap; align-items: center;
  justify-content: center; margin-bottom: 1rem;
}

.filterbar input[type="search"],
input[type="text"], input[type="email"], select, textarea {
  padding: .6rem .8rem;
  border-radius: .5rem;
  border: 1px solid var(--line);
  background: linear-gradient(90deg,
    #87ceeb 0%,    /* sky blue (left) */
    #ffffff 50%,   /* white (center) */
    #faf58c 100%   /* sun yellow (right) */
  );
  color: var(--ink);
  text-align: center;
}

/* Dividers / media */
hr.sep {
  border: none; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
  margin: 2rem 0;
}
.media { margin: .5rem 0; }
.audio { width: 100%; }

/* Footer */
footer {
  width: 100%;
  max-width: var(--max);
  margin: auto;
  padding: 2rem 1rem;
  color: linear-gradient(90deg,
    #87ceeb 0%,    /* sky blue (left) */
    #ffffff 50%,   /* white (center) */
    #faf58c 100%   /* sun yellow (right) */
  );
  border-top: 1px solid var(--line);
  text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}

/* Responsive tweaks */
@media (max-width: 640px) {
  .brand .logo { height: 48px !important; max-height: 48px !important; }
  .links { flex-direction: column; }
  .card { max-width: 100%; }
}