/* ============================================================
   LdConnect — Loja Virtual
   Tema do ecossistema ElidConn (base dark) + acento LdConnect (rosa)
   Compartilhado por index.html (home) e por loja/*.html
   ============================================================ */

:root{
  --ink-950:#070a18; --ink-900:#0b1020; --ink-850:#0f1530;
  --brand1:#6366f1; --brand2:#22d3ee;      /* gradiente do ecossistema */
  --store1:#fb7185; --store2:#f472b6;       /* gradiente do LdConnect */
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ font-family:'Inter',sans-serif; background:var(--ink-950); color:#e2e8f0; -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4,.font-display{ font-family:'Space Grotesk',sans-serif; }
::selection{ background:rgba(251,113,133,.35); }
a{ text-decoration:none; }

/* ---------- Fundos / marca ---------- */
.grid-bg{
  background-image:
    radial-gradient(60% 60% at 50% 0%, rgba(251,113,133,.14), transparent 70%),
    radial-gradient(42% 50% at 90% 8%, rgba(34,211,238,.10), transparent 70%),
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:100% 100%,100% 100%,44px 44px,44px 44px;
}
.brand-gradient{ background-image:linear-gradient(120deg,var(--brand1),var(--brand2)); }
.store-gradient{ background-image:linear-gradient(120deg,var(--store1),var(--store2)); }
.brand-text{ background-image:linear-gradient(120deg,#818cf8,#22d3ee); -webkit-background-clip:text; background-clip:text; color:transparent; }
.store-text{ background-image:linear-gradient(120deg,#fb7185,#f472b6); -webkit-background-clip:text; background-clip:text; color:transparent; }

.glass{ background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.08); backdrop-filter:blur(6px); }

.card{ transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.card:hover{ transform:translateY(-5px); border-color:rgba(251,113,133,.45); box-shadow:0 22px 50px -24px rgba(251,113,133,.45), 0 0 0 1px rgba(251,113,133,.18); }

.reveal{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }

/* ---------- Navbar ---------- */
.nav-link{ padding:.5rem .75rem; border-radius:.5rem; font-size:.875rem; color:#cbd5e1; transition:.2s; }
.nav-link:hover{ color:#fff; background:rgba(255,255,255,.05); }
.nav-link.active{ color:#fff; background:rgba(251,113,133,.15); }
.cart-badge{ position:absolute; top:-5px; right:-5px; min-width:18px; height:18px; padding:0 5px; border-radius:9px;
  background-image:linear-gradient(120deg,var(--store1),var(--store2)); color:#20040f; font-size:11px; font-weight:700; display:grid; place-items:center; }

/* ---------- Botões ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.65rem 1.1rem; border-radius:.75rem;
  font-weight:600; font-size:.9rem; cursor:pointer; transition:.2s; border:1px solid transparent; line-height:1; }
.btn-primary{ background-image:linear-gradient(120deg,var(--store1),var(--store2)); color:#20040f; }
.btn-primary:hover{ opacity:.92; }
.btn-brand{ background-image:linear-gradient(120deg,var(--brand1),var(--brand2)); color:#08122a; }
.btn-brand:hover{ opacity:.92; }
.btn-outline{ border-color:rgba(255,255,255,.16); color:#fff; background:transparent; }
.btn-outline:hover{ background:rgba(255,255,255,.06); }
.btn-ghost{ background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.08); color:#fff; }
.btn-ghost:hover{ background:rgba(255,255,255,.1); }
.btn:disabled{ opacity:.5; cursor:not-allowed; }

/* ---------- "Imagem" do produto (tile com gradiente + ícone) ---------- */
.prod-tile{ position:relative; aspect-ratio:4/3; display:grid; place-items:center; overflow:hidden;
  background-image:linear-gradient(135deg, var(--g1,#6366f1), var(--g2,#22d3ee)); }
.prod-tile::after{ content:''; position:absolute; inset:0;
  background:radial-gradient(120% 120% at 28% 18%, rgba(255,255,255,.28), transparent 55%), rgba(7,10,24,.34); }
.prod-tile i{ position:relative; z-index:1; font-size:3rem; color:rgba(255,255,255,.94); text-shadow:0 6px 20px rgba(0,0,0,.35); }
.prod-tile-lg{ aspect-ratio:1/1; border-radius:1rem; }
.prod-tile-lg i{ font-size:5.5rem; }

/* ---------- Preço ---------- */
.price{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.3rem; color:#fff; line-height:1.1; }
.price-lg{ font-size:2.1rem; }
.price-old{ font-size:.8rem; color:#64748b; text-decoration:line-through; }

/* ---------- Badges ---------- */
.badge{ font-size:11px; font-weight:700; padding:.2rem .55rem; border-radius:999px; letter-spacing:.02em; }
.badge-top{ background:rgba(34,211,238,.15); color:#67e8f9; border:1px solid rgba(34,211,238,.3); }
.badge-oferta{ background-image:linear-gradient(120deg,var(--store1),var(--store2)); color:#20040f; }

/* ---------- Chips (filtro de categoria) ---------- */
.chip{ padding:.45rem .9rem; border-radius:999px; font-size:.85rem; border:1px solid rgba(255,255,255,.1);
  color:#cbd5e1; cursor:pointer; transition:.2s; white-space:nowrap; background:transparent; }
.chip:hover{ color:#fff; border-color:rgba(255,255,255,.25); }
.chip.active{ background-image:linear-gradient(120deg,var(--store1),var(--store2)); color:#20040f; border-color:transparent; }

/* ---------- Inputs ---------- */
.input{ width:100%; padding:.72rem .9rem; border-radius:.75rem; background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1); color:#fff; outline:none; transition:.2s; font-size:.92rem; }
.input:focus{ border-color:rgba(251,113,133,.55); background:rgba(255,255,255,.06); }
.input::placeholder{ color:#64748b; }
select.input option{ background:#0b1020; color:#fff; }

/* ---------- Qty stepper ---------- */
.qty{ display:inline-flex; align-items:center; border:1px solid rgba(255,255,255,.12); border-radius:.6rem; overflow:hidden; }
.qty button{ width:34px; height:34px; background:rgba(255,255,255,.03); color:#e2e8f0; cursor:pointer; border:none; transition:.2s; }
.qty button:hover{ background:rgba(255,255,255,.1); }
.qty span{ min-width:38px; text-align:center; font-weight:600; color:#fff; }

/* ---------- Toast ---------- */
.toast{ position:fixed; bottom:22px; left:50%; transform:translateX(-50%) translateY(20px); opacity:0;
  background:#0b1020; border:1px solid rgba(251,113,133,.45); color:#fff; padding:.7rem 1.1rem; border-radius:.75rem;
  font-size:.9rem; z-index:60; transition:.3s; box-shadow:0 20px 50px -20px rgba(0,0,0,.65); display:flex; align-items:center; gap:.5rem; }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.toast i{ color:#4ade80; }

/* ---------- Utilitários ---------- */
.line-clamp-2{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.stars i{ font-size:.72rem; }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:#0b1020; }
::-webkit-scrollbar-thumb{ background:#26305c; border-radius:8px; }
::-webkit-scrollbar-thumb:hover{ background:#37427a; }