:root{
  --glass-bg: rgba(255,255,255,.75);
  --glass-border: rgba(255,255,255,.35);
  --shadow: 0 20px 60px rgba(0,0,0,.10);
  --radius: 18px;
}

[data-bs-theme="dark"]{
  --glass-bg: rgba(20,20,25,.68);
  --glass-border: rgba(255,255,255,.10);
  --shadow: 0 25px 70px rgba(0,0,0,.45);
}

body{
  background:
    radial-gradient(1200px 800px at 20% -10%, rgba(99,102,241,.25), transparent 60%),
    radial-gradient(900px 600px at 110% 30%, rgba(16,185,129,.18), transparent 55%),
    radial-gradient(800px 600px at 40% 120%, rgba(236,72,153,.12), transparent 55%),
    var(--bs-body-bg);
  min-height: 100vh;
}

.glass{
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
}

.brand-mark{
  display:inline-flex;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(99,102,241,.95), rgba(16,185,129,.85));
  box-shadow: 0 10px 25px rgba(99,102,241,.25);
}

.navbar{
  border-radius: 18px;
}

.hero-banner{
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  padding: 32px;
  background:
    radial-gradient(800px 300px at 10% 10%, rgba(255,255,255,.35), transparent 60%),
    linear-gradient(135deg, rgba(99,102,241,.95), rgba(16,185,129,.85));
  box-shadow: 0 30px 80px rgba(0,0,0,.18);
  color: #fff;
}
.hero-overlay{
  position:absolute;
  inset:0;
  background: radial-gradient(900px 450px at 80% 20%, rgba(0,0,0,.18), transparent 60%);
  pointer-events:none;
}
.hero-content{ position: relative; }

.product-card{
  border-radius: 22px;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
.product-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 35px 90px rgba(0,0,0,.18);
}
.product-thumb{
  aspect-ratio: 1 / 1;
  width: 100%;
  object-fit: cover;
}

.hover-raise{
  transition: transform .18s ease;
}
.hover-raise:hover{ transform: translateY(-2px); }

.cart-fab{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1030;
}

.badge-soft{
  background: rgba(99,102,241,.12);
  color: rgb(99,102,241);
  border: 1px solid rgba(99,102,241,.25);
}

.thumb-strip img{
  cursor:pointer;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.08);
  transition: transform .15s ease;
}
[data-bs-theme="dark"] .thumb-strip img{ border-color: rgba(255,255,255,.12); }
.thumb-strip img:hover{ transform: scale(1.03); }

.fade-up{
  animation: fadeUp .35s ease both;
}
@keyframes fadeUp{
  from{ opacity: 0; transform: translateY(10px); }
  to{ opacity: 1; transform: translateY(0); }
}

.small-muted{ color: var(--bs-secondary-color); font-size: .875rem; }