/* app.css — минимальные улучшения поверх Bootstrap */
:root{
  --card-radius: 16px;
}

body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.card{
  border-radius: var(--card-radius);
}

.badge{
  font-weight: 600;
}

.text-truncate-2{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.shadow-soft{
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
}

[data-bs-theme="dark"] .shadow-soft{
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

.hover-lift{
  transition: transform .15s ease, box-shadow .15s ease;
}
.hover-lift:hover{
  transform: translateY(-2px);
}


/* Marketplace UI */
:root{
  --accent: 109 84% 56%;
  --soft-border: rgba(0,0,0,.08);
  --soft-border-dark: rgba(255,255,255,.10);
}

.page-hero{
  border-radius: var(--card-radius);
  padding: 20px;
  background: radial-gradient(1200px 400px at 0% 0%, rgba(13,110,253,.18) 0%, rgba(13,110,253,0) 60%),
              radial-gradient(900px 380px at 100% 20%, rgba(25,135,84,.14) 0%, rgba(25,135,84,0) 55%);
  border: 1px solid var(--soft-border);
}

[data-bs-theme="dark"] .page-hero{
  border-color: var(--soft-border-dark);
  background: radial-gradient(1200px 400px at 0% 0%, rgba(13,110,253,.22) 0%, rgba(13,110,253,0) 60%),
              radial-gradient(900px 380px at 100% 20%, rgba(25,135,84,.18) 0%, rgba(25,135,84,0) 55%);
}

.product-card{
  border: 1px solid var(--soft-border);
  overflow: hidden;
}

[data-bs-theme="dark"] .product-card{
  border-color: var(--soft-border-dark);
}

.product-thumb{
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(13,110,253,.18), rgba(25,135,84,.12));
}

[data-bs-theme="dark"] .product-thumb{
  background: linear-gradient(135deg, rgba(13,110,253,.22), rgba(25,135,84,.16));
}

.product-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}

.product-thumb .thumb-fallback{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color: rgba(255,255,255,.85);
  font-size: 34px;
  text-shadow: 0 6px 18px rgba(0,0,0,.25);
}

.product-meta{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem .75rem;
  align-items:center;
  color: var(--bs-secondary-color);
  font-size: .875rem;
}

.product-meta .dot{
  width:4px;height:4px;border-radius:50%;
  background: currentColor;
  opacity:.6;
}

.price-pill{
  font-weight:700;
  letter-spacing:.2px;
  padding:.35rem .55rem;
  border-radius: 999px;
}

.product-card .card-body{
  padding: 14px 14px 12px;
}

.product-card .card-footer{
  padding: 0 14px 14px;
}

.btn-soft{
  background: rgba(13,110,253,.08);
  border: 1px solid rgba(13,110,253,.14);
}
.btn-soft:hover{ background: rgba(13,110,253,.12); }
[data-bs-theme="dark"] .btn-soft{
  background: rgba(13,110,253,.14);
  border-color: rgba(13,110,253,.22);
}



/* ====== Shop cards (badge + quick view) ====== */
.product-thumb{ position: relative; overflow: hidden; border-top-left-radius: var(--card-radius); border-top-right-radius: var(--card-radius); }
.product-badges{
  position:absolute; top:10px; left:10px;
  display:flex; flex-wrap:wrap; gap:6px;
  z-index:2;
}
.badge-soft{
  border-radius: 999px;
  padding: .35rem .55rem;
  font-size: .72rem;
  letter-spacing: .02em;
  background: rgba(255,255,255,.92);
  color: #111;
  border: 1px solid rgba(0,0,0,.06);
}
body.dark .badge-soft,
[data-theme="dark"] .badge-soft{
  background: rgba(20,20,20,.88);
  color: #fff;
  border-color: rgba(255,255,255,.08);
}
.badge-new{ }
.badge-top{ }
.badge-sale{ }

.product-qv{
  position:absolute; right:10px; bottom:10px;
  z-index:2;
  border-radius: 999px;
  padding: .35rem .5rem;
  line-height: 1;
  opacity: .92;
}
.product-qv:hover{ opacity: 1; }

.qv-modal{ border-radius: 18px; }
.qv-thumb{
  border-radius: 16px;
  overflow: hidden;
  background: rgba(0,0,0,.03);
}
.qv-thumb img{
  width:100%;
  height: 260px;
  object-fit: cover;
  display:block;
}
.qv-thumb-fallback{
  height:260px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 44px;
  color: rgba(0,0,0,.35);
}
body.dark .qv-thumb-fallback,
[data-theme="dark"] .qv-thumb-fallback{
  color: rgba(255,255,255,.35);
}