/* ══════════════════════════════════════════════════════════════════
   TechStore — Design System
   Fontes: Sora (display) · DM Sans (body)
   Versão definitiva — zero duplicações
══════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap');

/* ── Tokens ────────────────────────────────────────────────────── */
:root {
  --bg0:#07090e; --bg1:#0d1117; --bg2:#111827; --bg3:#182030;
  --bggl:rgba(9,11,18,.96);
  --b0:rgba(255,255,255,.065); --b1:rgba(255,255,255,.11);
  --ba:rgba(59,130,246,.22);
  --t0:#f1f5f9; --t1:#94a3b8; --t2:#475569;
  --ac:#3b82f6; --acd:#2563eb; --acl:#60a5fa;
  --acg:rgba(59,130,246,.14); --acg2:rgba(59,130,246,.07);
  --ok:#10b981; --warn:#f59e0b; --err:#ef4444;
  --fd:'Sora',sans-serif;
  --fb:'DM Sans',sans-serif;
  --r1:6px; --r2:10px; --r3:14px; --r4:18px; --r5:24px;
  --sh2:0 8px 32px rgba(0,0,0,.45);
  --sha:0 8px 28px rgba(59,130,246,.28);
  --ta:.15s ease; --tb:.22s ease; --tc:.38s cubic-bezier(.4,0,.2,1);
  --nh:64px;
}
html[data-theme='light'] {
  --bg0:#f0f4fb; --bg1:#e6ecf6; --bg2:#ffffff; --bg3:#eef2fa;
  --bggl:rgba(240,244,251,.97);
  --b0:rgba(0,0,0,.07); --b1:rgba(0,0,0,.13); --ba:rgba(59,130,246,.25);
  --t0:#0f172a; --t1:#334155; --t2:#64748b;
  --acg:rgba(59,130,246,.1); --acg2:rgba(59,130,246,.05);
}

/* ── Reset ─────────────────────────────────────────────────────── */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box }
html { scroll-behavior:smooth }
body {
  font-family:var(--fb); background:var(--bg0); color:var(--t0);
  line-height:1.6; -webkit-font-smoothing:antialiased; min-height:100vh;
  transition:background var(--tc),color var(--tc);
}
img { display:block; max-width:100% }
a { color:inherit; text-decoration:none }
button { cursor:pointer; border:none; background:none; font-family:var(--fb) }
input,textarea,select { font-family:var(--fb) }
svg { display:block; flex-shrink:0; pointer-events:none }
::-webkit-scrollbar { width:4px; height:4px }
::-webkit-scrollbar-track { background:var(--bg0) }
::-webkit-scrollbar-thumb { background:var(--b1); border-radius:4px }

/* ── Utilities ─────────────────────────────────────────────────── */
.container { max-width:1240px; margin:0 auto; padding:0 2rem }
section { padding:5rem 0 }
hr,.divider { border:none; border-top:1px solid var(--b0); margin:2rem 0 }
.ok  { color:var(--ok) } .low { color:var(--warn) } .out { color:var(--err) }

/* ══════════════════════════════════════════════════════════════════
   HEADER — nunca quebra, ícones sempre alinhados
══════════════════════════════════════════════════════════════════ */
.site-header {
  position:fixed; top:0; left:0; right:0;
  height:var(--nh); z-index:900;
  background:var(--bggl);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  border-bottom:1px solid var(--b0);
}
.nav-inner {
  height:var(--nh);
  display:flex; flex-direction:row; align-items:center;
  justify-content:space-between; flex-wrap:nowrap; gap:1rem;
}
/* Logo */
.nav-logo {
  display:flex; align-items:center; flex-shrink:0;
  font-family:var(--fd); font-size:1.2rem; font-weight:800;
  letter-spacing:-.03em; color:var(--t0);
}
.logo-dot { color:var(--ac); font-size:.45em; vertical-align:super; margin-left:1px }
/* Desktop links */
.nav-links {
  display:flex; flex-direction:row; align-items:center;
  flex:1; justify-content:center; gap:1.5rem; flex-shrink:1;
}
.nav-links a {
  color:var(--t1); font-weight:500; font-size:.87rem;
  padding:.25rem 0; position:relative; transition:color var(--tb); white-space:nowrap;
}
.nav-links a::after {
  content:''; position:absolute; bottom:-2px; left:0;
  width:0; height:2px; background:var(--ac); border-radius:2px;
  transition:width var(--tb);
}
.nav-links a:hover { color:var(--ac) }
.nav-links a:hover::after,.nav-links a.active::after { width:100% }
.nav-links a.active { color:var(--ac) }
/* Action row */
.nav-actions {
  display:flex; flex-direction:row; align-items:center;
  flex-shrink:0; flex-wrap:nowrap; gap:.35rem;
}
/* Icon button */
.nav-icon-btn {
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; min-width:36px; flex-shrink:0;
  border-radius:var(--r2); background:var(--bg2); border:1px solid var(--b0);
  color:var(--t1); cursor:pointer; position:relative; transition:all var(--tb);
}
.nav-icon-btn:hover { background:var(--bg3); border-color:var(--b1); color:var(--t0) }
.nav-icon-btn svg { width:18px; height:18px }
/* Cart badge */
.cart-dot {
  position:absolute; top:-5px; right:-5px;
  min-width:17px; height:17px; padding:0 3px;
  background:var(--ac); color:#fff;
  font-size:.6rem; font-weight:800; font-family:var(--fd);
  border-radius:99px; border:2px solid var(--bg0);
  display:none; align-items:center; justify-content:center; line-height:1;
}
/* User pill */
.user-wrap { position:relative }
.user-pill {
  display:flex; align-items:center; gap:.4rem; flex-shrink:0;
  padding:.36rem .85rem; border-radius:var(--r2);
  background:var(--bg2); border:1px solid var(--b0);
  color:var(--t0); font-size:.84rem; font-weight:600; font-family:var(--fb);
  cursor:pointer; white-space:nowrap; transition:all var(--tb);
}
.user-pill:hover { background:var(--bg3); border-color:var(--b1) }
.user-pill svg { width:16px; height:16px; color:var(--t1) }
/* User dropdown */
.user-dd {
  position:absolute; top:calc(100% + 8px); right:0;
  background:var(--bg2); border:1px solid var(--b1);
  border-radius:var(--r3); padding:.5rem; min-width:205px;
  box-shadow:var(--sh2); display:none; z-index:999;
  animation:fdDown .18s ease;
}
.user-dd.open { display:block }
.dd-info { padding:.4rem .6rem .65rem; border-bottom:1px solid var(--b0); margin-bottom:.35rem }
.dd-name  { font-weight:700; font-size:.86rem }
.dd-email { color:var(--t2); font-size:.73rem; margin-top:.08rem }
.dd-item {
  display:flex; align-items:center; gap:.45rem;
  padding:.52rem .6rem; border-radius:var(--r2);
  color:var(--t1); font-size:.84rem; font-weight:500;
  transition:all var(--ta); cursor:pointer; width:100%; text-align:left;
}
.dd-item:hover { background:var(--bg3); color:var(--t0) }
.dd-item svg { width:15px; height:15px; color:var(--t2) }
/* Hamburger */
.hamburger {
  display:none; align-items:center; justify-content:center;
  width:36px; height:36px; min-width:36px; flex-shrink:0;
  border-radius:var(--r2); background:var(--bg2); border:1px solid var(--b0);
  color:var(--t1); cursor:pointer; transition:all var(--tb);
}
.hamburger:hover { background:var(--bg3); border-color:var(--b1); color:var(--t0) }
.hamburger svg { width:18px; height:18px }
/* Mobile nav */
.mobile-nav {
  display:none; flex-direction:column;
  position:fixed; top:var(--nh); left:0; right:0; bottom:0;
  background:var(--bg0); z-index:800;
  overflow-y:auto; padding:1rem 1.5rem 2rem;
  border-top:1px solid var(--b0);
}
.mobile-nav.open { display:flex }
.mobile-nav a {
  display:block; padding:.82rem .35rem; font-size:.96rem; font-weight:500;
  border-bottom:1px solid var(--b0); color:var(--t1); transition:color var(--ta);
}
.mobile-nav a:hover,.mobile-nav a.active { color:var(--ac) }
.mob-actions { padding:1rem 0 0; display:flex; flex-direction:column; gap:.6rem }

/* ══════════════════════════════════════════════════════════════════
   AUTH MODAL
══════════════════════════════════════════════════════════════════ */
.auth-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.82);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  z-index:9100; display:none; align-items:center; justify-content:center; padding:1rem;
}
.auth-overlay.open { display:flex }
.auth-card {
  background:var(--bg2); border:1px solid var(--b1);
  border-radius:var(--r5); padding:2.2rem 2.4rem;
  max-width:430px; width:100%; position:relative;
  animation:slideUp .28s ease; max-height:92vh; overflow-y:auto;
}
.auth-card::-webkit-scrollbar { width:0 }
.auth-close {
  position:absolute; top:.9rem; right:.9rem;
  width:30px; height:30px; border-radius:var(--r1);
  background:var(--bg3); border:1px solid var(--b0);
  color:var(--t1); display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all var(--tb);
}
.auth-close:hover { background:var(--err); border-color:var(--err); color:#fff; transform:rotate(90deg) }
.auth-close svg { width:13px; height:13px }
.auth-brand {
  font-family:var(--fd); font-weight:800; font-size:.72rem;
  letter-spacing:3px; color:var(--ac); text-transform:uppercase;
  text-align:center; margin-bottom:1.4rem;
}
.auth-tabs {
  display:flex; background:var(--bg3); border-radius:var(--r2);
  padding:3px; gap:3px; margin-bottom:1.3rem;
}
.auth-tab {
  flex:1; padding:.48rem; border-radius:8px; background:transparent;
  color:var(--t2); font-weight:600; font-size:.83rem;
  transition:all var(--tb); font-family:var(--fb);
}
.auth-tab.on { background:var(--ac); color:#fff; box-shadow:0 2px 10px rgba(59,130,246,.35) }
.auth-panel { display:none }
.auth-panel.on { display:block }
.auth-form { display:flex; flex-direction:column; gap:.8rem }
/* Fields */
.fg { display:flex; flex-direction:column; gap:.28rem }
.fg2 { display:grid; grid-template-columns:1fr 1fr; gap:.7rem }
.fl { font-size:.75rem; font-weight:600; color:var(--t1) }
.req { color:var(--ac) }
.fi {
  width:100%; padding:.75rem .9rem;
  background:var(--bg3); border:1.5px solid var(--b0);
  border-radius:var(--r2); color:var(--t0); font-size:.88rem; font-family:var(--fb);
  transition:all var(--tb);
}
.fi:focus { outline:none; border-color:var(--ac); background:var(--bg2); box-shadow:0 0 0 3px var(--acg) }
.fi::placeholder { color:var(--t2) }
select.fi { appearance:none; cursor:pointer }
textarea.fi { resize:vertical; min-height:100px }
.fi-wrap { position:relative }
.fi-wrap .fi { padding-right:2.7rem }
.fi-eye {
  position:absolute; right:.85rem; top:50%; transform:translateY(-50%);
  color:var(--t2); display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:color var(--ta); padding:.2rem;
}
.fi-eye:hover { color:var(--ac) }
.fi-eye svg { width:15px; height:15px }
.auth-err {
  background:rgba(239,68,68,.08); border:1px solid rgba(239,68,68,.2);
  color:#fca5a5; border-radius:var(--r1); padding:.55rem .85rem;
  font-size:.8rem; display:none; line-height:1.45;
}
.auth-err.on { display:block }
.auth-btn {
  width:100%; padding:.85rem; background:var(--ac); color:#fff;
  border-radius:var(--r2); font-weight:700; font-size:.9rem; font-family:var(--fb);
  border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  transition:all var(--tb);
}
.auth-btn:hover:not(:disabled) { background:var(--acd); transform:translateY(-1px); box-shadow:var(--sha) }
.auth-btn:disabled { opacity:.45; cursor:not-allowed; transform:none; box-shadow:none }
.auth-btn svg { width:14px; height:14px }
.auth-btn .spin {
  width:14px; height:14px; flex-shrink:0;
  border:2px solid rgba(255,255,255,.3); border-top-color:#fff;
  border-radius:50%; animation:spin .6s linear infinite; display:none;
}
.auth-btn.loading .btn-lbl { display:none }
.auth-btn.loading .spin    { display:block }
.auth-note { font-size:.73rem; color:var(--t2); text-align:center; line-height:1.55 }
.auth-note a { color:var(--ac) }
.auth-link {
  color:var(--ac); font-size:.79rem; text-align:center; display:block;
  cursor:pointer; background:none; border:none; width:100%;
  font-family:var(--fb); padding:0; transition:opacity var(--ta);
}
.auth-link:hover { opacity:.8; text-decoration:underline }
/* OTP */
.otp-row { display:flex; gap:.4rem; justify-content:center; margin-bottom:.9rem }
.otp-d {
  width:42px; height:52px; background:var(--bg3);
  border:2px solid var(--b0); border-radius:var(--r2);
  color:var(--t0); font-size:1.25rem; font-weight:800; font-family:var(--fd);
  text-align:center; outline:none; caret-color:transparent;
  transition:border-color var(--tb),box-shadow var(--tb);
}
.otp-d:focus { border-color:var(--ac); box-shadow:0 0 0 3px var(--acg) }
.otp-d.err   { border-color:var(--err); animation:shake .4s ease }
.code-pnl { text-align:center }
.code-ico {
  width:56px; height:56px; border-radius:50%;
  background:var(--acg); border:2px solid var(--ba);
  display:flex; align-items:center; justify-content:center; margin:0 auto .8rem;
}
.code-ico svg { width:24px; height:24px; color:var(--ac) }
.code-title { font-family:var(--fd); font-size:1.18rem; font-weight:800; margin-bottom:.28rem }
.code-sub   { color:var(--t2); font-size:.84rem; line-height:1.6; margin-bottom:1rem }
.code-resend { font-size:.78rem; color:var(--t2); text-align:center; margin-top:.8rem }
.code-resend button { color:var(--ac); font-weight:600; background:none; border:none; cursor:pointer; font-family:var(--fb); font-size:inherit }
.code-resend button:hover { text-decoration:underline }
.code-back {
  display:flex; align-items:center; justify-content:center; gap:.3rem;
  color:var(--t2); font-size:.78rem; margin-top:.5rem;
  cursor:pointer; background:none; border:none; width:100%; font-family:var(--fb);
  transition:color var(--ta);
}
.code-back:hover { color:var(--t0) }
.code-back svg { width:12px; height:12px }
.demo-box {
  background:rgba(16,185,129,.07); border:1px solid rgba(16,185,129,.22);
  border-radius:var(--r2); padding:.65rem; margin-bottom:.9rem;
  font-size:.79rem; color:var(--ok); display:none; text-align:center;
}
.demo-box.on { display:block }
.demo-code {
  font-family:'Courier New',monospace; font-size:1.8rem;
  font-weight:800; letter-spacing:6px; display:block; margin-top:.2rem;
}

/* ══════════════════════════════════════════════════════════════════
   CART SIDEBAR
══════════════════════════════════════════════════════════════════ */
.cart-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.52);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  z-index:8800; display:none;
}
.cart-overlay.open { display:block }
.cart-side {
  position:fixed; right:-420px; top:0;
  width:390px; max-width:100vw; height:100dvh;
  background:var(--bg1); border-left:1px solid var(--b0);
  z-index:8801; display:flex; flex-direction:column;
  transition:right var(--tc); box-shadow:-16px 0 48px rgba(0,0,0,.5);
}
.cart-side.open { right:0 }
.cart-head {
  display:flex; justify-content:space-between; align-items:center;
  padding:1.15rem 1.4rem; border-bottom:1px solid var(--b0); flex-shrink:0;
}
.cart-head h3 {
  font-family:var(--fd); font-size:.97rem; font-weight:700;
  display:flex; align-items:center; gap:.42rem;
}
.cart-head h3 svg { width:17px; height:17px; color:var(--ac) }
.cart-body { flex:1; overflow-y:auto; padding:.9rem 1.3rem }
.cart-body::-webkit-scrollbar { width:3px }
.cart-foot { padding:.9rem 1.3rem; border-top:1px solid var(--b0); flex-shrink:0 }
.ship-note {
  font-size:.75rem; color:var(--ok); margin-bottom:.65rem;
  display:none; align-items:center; gap:.35rem;
}
.ship-note svg { width:13px; height:13px }
.cart-total-row { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:.8rem }
.ct-lbl { color:var(--t1); font-size:.87rem }
.ct-val { font-family:var(--fd); font-size:1.5rem; font-weight:800; color:var(--ac) }
.ck-btn {
  width:100%; background:var(--ac); color:#fff; padding:.85rem;
  border-radius:var(--r2); font-weight:700; font-size:.89rem; font-family:var(--fb);
  display:flex; align-items:center; justify-content:center; gap:.45rem;
  transition:all var(--tb); border:none; cursor:pointer;
}
.ck-btn:hover { background:var(--acd); transform:translateY(-2px); box-shadow:var(--sha) }
.ck-btn svg { width:15px; height:15px }
.cart-empty { text-align:center; padding:2.5rem 1rem; color:var(--t2) }
.cart-empty svg { width:44px; height:44px; margin:0 auto .75rem; opacity:.28 }
.cart-empty p { font-size:.88rem }
/* Cart items */
.cart-item {
  display:flex; gap:.8rem; margin-bottom:.65rem; padding:.85rem;
  background:var(--bg2); border:1px solid var(--b0);
  border-radius:var(--r2); transition:border-color var(--ta);
}
.cart-item:hover { border-color:var(--ba) }
.cart-item-img {
  width:58px; height:58px; border-radius:var(--r1);
  object-fit:cover; background:var(--bg3); flex-shrink:0;
}
.ci-body { flex:1; min-width:0 }
.ci-name  { font-weight:600; font-size:.83rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:.15rem }
.ci-price { color:var(--ac); font-weight:700; font-size:.93rem; margin-bottom:.38rem }
.ci-ctrl  { display:flex; align-items:center; gap:.3rem }
.q-btn {
  width:22px; height:22px; background:var(--bg3); border:1px solid var(--b0);
  color:var(--t0); border-radius:5px; display:flex; align-items:center;
  justify-content:center; transition:all var(--ta); cursor:pointer;
}
.q-btn:hover { background:var(--ac); border-color:var(--ac); color:#fff }
.q-btn svg { width:10px; height:10px }
.q-num { min-width:20px; text-align:center; font-weight:700; font-size:.84rem }
.rm-btn {
  margin-left:auto; color:var(--t2); display:flex; align-items:center;
  padding:.2rem; transition:color var(--ta); cursor:pointer; background:none; border:none;
}
.rm-btn:hover { color:var(--err) }
.rm-btn svg { width:13px; height:13px }

/* ══════════════════════════════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════════════════════════════ */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.42rem;
  padding:.82rem 1.6rem; border-radius:var(--r2); border:none;
  font-weight:700; font-size:.88rem; font-family:var(--fb);
  transition:all var(--tb); cursor:pointer; white-space:nowrap;
}
.btn svg { width:15px; height:15px; flex-shrink:0 }
.btn-primary   { background:var(--ac); color:#fff; box-shadow:0 3px 12px rgba(59,130,246,.22) }
.btn-primary:hover { background:var(--acd); transform:translateY(-2px); box-shadow:var(--sha) }
.btn-secondary { background:var(--bg2); border:1.5px solid var(--b1); color:var(--t0) }
.btn-secondary:hover { border-color:var(--ac); color:var(--ac) }
.btn-outline   { background:transparent; border:1.5px solid var(--b1); color:var(--t0) }
.btn-outline:hover { border-color:var(--ac); color:var(--ac) }
.btn-ghost     { background:var(--bg3); color:var(--t1); border:1px solid var(--b0) }
.btn-ghost:hover { background:var(--bg2); color:var(--t0) }
.btn-sm  { padding:.48rem 1rem; font-size:.8rem }
.btn-lg  { padding:.95rem 2rem; font-size:.95rem }
.btn-xl  { padding:1rem 2.2rem; font-size:.97rem }
.btn-full { width:100% }
.btn:disabled { opacity:.45; cursor:not-allowed; transform:none !important; box-shadow:none !important }
.btn .btn-spin {
  width:15px; height:15px; border:2px solid rgba(255,255,255,.3);
  border-top-color:#fff; border-radius:50%;
  animation:spin .6s linear infinite; display:none; flex-shrink:0;
}
.btn .btn-lbl { display:flex; align-items:center; gap:.4rem }
.btn.loading .btn-lbl { display:none }
.btn.loading .btn-spin { display:block }

/* ══════════════════════════════════════════════════════════════════
   PRODUCT CARDS
══════════════════════════════════════════════════════════════════ */
.pg,.grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:1.25rem;
}
.pc {
  background:var(--bg2); border:1px solid var(--b0); border-radius:var(--r4);
  overflow:hidden; display:flex; flex-direction:column; cursor:pointer;
  transition:transform var(--tb),box-shadow var(--tb),border-color var(--tb);
}
.pc:hover { transform:translateY(-4px); border-color:var(--ba); box-shadow:0 14px 40px rgba(59,130,246,.1) }
.pc-img { position:relative; padding-top:60%; overflow:hidden; background:var(--bg3) }
.pc-img img {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; transition:transform var(--tc);
}
.pc:hover .pc-img img { transform:scale(1.05) }
.pc-badge { position:absolute; top:.55rem; left:.55rem; background:var(--warn); color:#000; padding:.2rem .5rem; border-radius:var(--r1); font-size:.64rem; font-weight:800; font-family:var(--fd); z-index:2 }
.pc-disc  { position:absolute; top:.55rem; right:.55rem; background:var(--ok); color:#fff; padding:.2rem .48rem; border-radius:var(--r1); font-size:.64rem; font-weight:800; font-family:var(--fd); z-index:2 }
.pc-body { padding:1.1rem 1.25rem; display:flex; flex-direction:column; flex:1 }
.pc-cat  { color:var(--ac); font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.6px; margin-bottom:.25rem }
.pc-name { font-family:var(--fd); font-size:.93rem; font-weight:700; line-height:1.28; margin-bottom:.28rem }
.pc-desc { color:var(--t2); font-size:.78rem; line-height:1.55; margin-bottom:.55rem; flex:1; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.pc-specs { display:flex; flex-direction:column; gap:.14rem; margin-bottom:.55rem }
.pc-spec  { font-size:.74rem; color:var(--t1); display:flex; align-items:center; gap:.28rem }
.pc-spec::before { content:'✓'; color:var(--ok); font-weight:700; font-size:.62rem; flex-shrink:0 }
.stars-row { display:flex; align-items:center; gap:.3rem; margin-bottom:.48rem }
.stars     { display:flex; gap:1px; align-items:center }
.star      { display:inline-flex; align-items:center }
.star svg  { width:12px; height:12px }
.stars-n   { font-size:.71rem; color:var(--t2) }
.pc-price-row { display:flex; align-items:baseline; gap:.38rem; margin-bottom:.45rem }
.pc-price { font-family:var(--fd); font-size:1.25rem; font-weight:800; color:var(--ac) }
.pc-old   { font-size:.77rem; color:var(--t2); text-decoration:line-through }
.pc-stock { font-size:.71rem; font-weight:700; margin-bottom:.7rem; display:flex; align-items:center; gap:.28rem }
.pc-stock svg { width:12px; height:12px }
.pc-add {
  width:100%; padding:.68rem; background:var(--bg3); border:1px solid var(--b0);
  color:var(--t0); border-radius:var(--r2); font-weight:600; font-size:.83rem;
  font-family:var(--fb); display:flex; align-items:center; justify-content:center;
  gap:.4rem; transition:all var(--tb); cursor:pointer;
}
.pc-add:hover:not(:disabled) { background:var(--ac); border-color:var(--ac); color:#fff }
.pc-add:disabled { opacity:.35; cursor:not-allowed }
.pc-add svg { width:14px; height:14px }

/* ══════════════════════════════════════════════════════════════════
   SECTION HEADERS
══════════════════════════════════════════════════════════════════ */
.sec-hd {
  display:flex; justify-content:space-between; align-items:flex-end;
  margin-bottom:2.2rem; flex-wrap:wrap; gap:.9rem;
}
.sec-tag {
  display:inline-flex; align-items:center; gap:.38rem;
  background:var(--acg2); border:1px solid var(--ba); color:var(--ac);
  padding:.26rem .8rem; border-radius:99px; font-size:.71rem;
  font-weight:700; letter-spacing:.4px; text-transform:uppercase; margin-bottom:.7rem;
}
.sec-title { font-family:var(--fd); font-size:1.85rem; font-weight:800; letter-spacing:-.03em; line-height:1.15 }
.sec-sub   { color:var(--t2); margin-top:.25rem; font-size:.87rem }
.see-all,.view-all {
  color:var(--ac); font-weight:600; font-size:.85rem;
  display:flex; align-items:center; gap:.28rem;
  transition:gap var(--tb); white-space:nowrap;
}
.see-all:hover,.view-all:hover { gap:.52rem }
.see-all svg,.view-all svg { width:14px; height:14px }

/* ══════════════════════════════════════════════════════════════════
   FORMS
══════════════════════════════════════════════════════════════════ */
.form-group { display:flex; flex-direction:column; gap:.28rem }
.form-label { font-size:.79rem; font-weight:600; color:var(--t1); letter-spacing:.2px }
.form-input,.form-select,.form-textarea {
  padding:.8rem 1rem; background:var(--bg3); border:1.5px solid var(--b0);
  border-radius:var(--r2); color:var(--t0); font-size:.88rem; font-family:var(--fb);
  transition:all var(--tb); width:100%;
}
.form-input:focus,.form-select:focus,.form-textarea:focus {
  outline:none; border-color:var(--ac); box-shadow:0 0 0 3px var(--acg);
}
.form-input::placeholder,.form-textarea::placeholder { color:var(--t2) }
select.form-select { appearance:none; cursor:pointer }
textarea.form-textarea { resize:vertical; min-height:108px }
.form-hint { font-size:.74rem; color:var(--t2) }

/* ══════════════════════════════════════════════════════════════════
   TOAST
══════════════════════════════════════════════════════════════════ */
.toast {
  position:fixed; top:76px; right:1.25rem;
  padding:.8rem 1.2rem; border-radius:var(--r2);
  font-weight:600; font-size:.83rem; font-family:var(--fb);
  box-shadow:var(--sh2); z-index:99999;
  animation:slideR .25s ease; max-width:300px; color:#fff;
  display:flex; align-items:center; gap:.42rem; pointer-events:none;
}
.toast svg { width:14px; height:14px }
.toast.ok   { background:var(--ok) }
.toast.err  { background:var(--err) }
.toast.info { background:var(--ac) }
.toast.warn { background:var(--warn); color:#000 }

/* ══════════════════════════════════════════════════════════════════
   SKELETON
══════════════════════════════════════════════════════════════════ */
.skel,.skeleton {
  background:linear-gradient(90deg,var(--bg3) 25%,var(--bg2) 50%,var(--bg3) 75%);
  background-size:200% 100%; animation:shimmer 1.5s infinite; border-radius:var(--r2);
}

/* ══════════════════════════════════════════════════════════════════
   PAGE HERO
══════════════════════════════════════════════════════════════════ */
.page-hero {
  padding:calc(var(--nh) + 3.5rem) 0 3rem;
  background:linear-gradient(135deg,var(--acg2) 0%,transparent 60%);
  border-bottom:1px solid var(--b0);
}
.page-hero h1 { font-family:var(--fd); font-size:2.2rem; font-weight:800; letter-spacing:-.03em; margin-bottom:.55rem }
.page-hero p  { color:var(--t2); font-size:.93rem; max-width:520px }

/* ══════════════════════════════════════════════════════════════════
   CARD / BADGE
══════════════════════════════════════════════════════════════════ */
.card { background:var(--bg2); border:1px solid var(--b0); border-radius:var(--r4); padding:1.6rem }
.badge,.bdg { display:inline-flex; align-items:center; padding:.22rem .65rem; border-radius:99px; font-size:.71rem; font-weight:700; font-family:var(--fd) }
.badge-blue,  .bdg-blue   { background:var(--acg);                color:var(--acl);  border:1px solid var(--ba) }
.badge-green, .bdg-green  { background:rgba(16,185,129,.1);       color:#6ee7b7;     border:1px solid rgba(16,185,129,.22) }
.badge-yellow,.bdg-yellow { background:rgba(245,158,11,.1);       color:#fde68a;     border:1px solid rgba(245,158,11,.22) }
.badge-red,   .bdg-red    { background:rgba(239,68,68,.1);        color:#fca5a5;     border:1px solid rgba(239,68,68,.22) }
.badge-gray,  .bdg-gray   { background:var(--bg3);                color:var(--t2);   border:1px solid var(--b0) }

/* ══════════════════════════════════════════════════════════════════
   NEWSLETTER
══════════════════════════════════════════════════════════════════ */
.nl-section { background:var(--bg1); border-top:1px solid var(--b0); padding:3rem 0 }
.nl-inner {
  max-width:520px; margin:0 auto; text-align:center;
  display:flex; flex-direction:column; align-items:center;
}
.nl-icon {
  width:50px; height:50px; border-radius:50%;
  background:var(--acg); border:1px solid var(--ba);
  display:flex; align-items:center; justify-content:center; margin-bottom:.6rem;
}
.nl-icon svg { width:21px; height:21px; color:var(--ac) }
.nl-title { font-family:var(--fd); font-size:1.18rem; font-weight:800; margin-bottom:.28rem }
.nl-sub   { color:var(--t2); font-size:.84rem; margin-bottom:1.2rem }
.nl-form  { display:flex; gap:.45rem; max-width:380px; width:100%; margin-bottom:.7rem }
.nl-form input {
  flex:1; min-width:0; padding:.72rem .95rem;
  background:var(--bg2); border:1.5px solid var(--b0);
  border-radius:var(--r2); color:var(--t0); font-size:.84rem; font-family:var(--fb);
  transition:border-color var(--tb);
}
.nl-form input:focus { outline:none; border-color:var(--ac) }
.nl-form input::placeholder { color:var(--t2) }
.nl-msg { font-size:.8rem }

/* ══════════════════════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════════════════════ */
footer { background:var(--bg1); border-top:1px solid var(--b0); padding:4rem 0 2rem; margin-top:5rem }
.ft-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:2.8rem; margin-bottom:2.6rem }
.ft-brand-col { display:flex; flex-direction:column }
/* Footer logo */
.ft-logo {
  display:inline-flex; align-items:center;
  font-family:var(--fd); font-size:1.18rem; font-weight:800;
  letter-spacing:-.03em; margin-bottom:.8rem; color:var(--t0);
}
.ft-logo-accent { color:var(--ac) }
.ft-logo-dot    { color:var(--ac); font-size:.44em; vertical-align:super; margin-left:1px }
.ft-brand-desc  { color:var(--t2); font-size:.84rem; line-height:1.7; max-width:280px; margin-bottom:.9rem }
/* Social icons — SEMPRE em linha */
.ft-socials {
  display:flex; flex-direction:row; align-items:center;
  flex-wrap:wrap; gap:.4rem;
}
.ft-soc {
  display:flex; align-items:center; justify-content:center;
  width:33px; height:33px; min-width:33px; flex-shrink:0;
  border-radius:var(--r1); background:var(--bg2); border:1px solid var(--b0);
  color:var(--t2); transition:all var(--tb);
}
.ft-soc:hover { background:var(--ac); border-color:var(--ac); color:#fff; transform:translateY(-2px) }
.ft-soc svg { width:15px; height:15px; color:inherit }
/* Footer columns */
.ft-col { display:flex; flex-direction:column; gap:.48rem }
.ft-col h4,footer h4 { font-family:var(--fd); font-size:.85rem; font-weight:700; margin-bottom:.45rem }
.ft-col a { color:var(--t2); font-size:.83rem; transition:color var(--ta); display:block }
.ft-col a:hover { color:var(--ac) }
/* Contact lines — ícone + texto sempre lado a lado */
.ft-contact-line {
  display:flex; flex-direction:row; align-items:center;
  gap:.45rem; color:var(--t2); font-size:.82rem; margin-bottom:.4rem;
}
.ft-contact-line svg { width:13px; height:13px; color:var(--ac); flex-shrink:0 }
.ft-bottom {
  border-top:1px solid var(--b0); padding-top:1.6rem;
  display:flex; justify-content:space-between; align-items:center;
  color:var(--t2); font-size:.79rem; flex-wrap:wrap; gap:.65rem;
}
.ft-legal { display:flex; gap:1.5rem }
.ft-legal a { color:var(--t2); transition:color var(--ta) }
.ft-legal a:hover { color:var(--ac) }
/* WhatsApp FAB */
.wa-fab {
  position:fixed; bottom:1.5rem; right:1.5rem; z-index:8000;
  width:50px; height:50px; border-radius:50%; background:#25d366; color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 16px rgba(37,211,102,.38);
  transition:transform var(--tb),box-shadow var(--tb);
}
.wa-fab:hover { transform:scale(1.1); box-shadow:0 8px 24px rgba(37,211,102,.55) }
.wa-fab svg { width:24px; height:24px }

/* ══════════════════════════════════════════════════════════════════
   PRODUCT DETAIL FULLSCREEN
══════════════════════════════════════════════════════════════════ */
.det-screen { position:fixed; inset:0; z-index:9500; background:var(--bg0); display:none; flex-direction:column; opacity:0; transition:opacity .22s ease }
.det-screen.open { display:flex }
.det-screen.vis  { opacity:1 }
.det-bar { height:52px; display:flex; align-items:center; justify-content:space-between; padding:0 1.8rem; background:var(--bg2); border-bottom:1px solid var(--b0); flex-shrink:0 }
.det-bc  { display:flex; align-items:center; gap:.4rem; font-size:.8rem; color:var(--t2) }
.det-bc a { color:var(--ac); cursor:pointer }
.det-bc svg { width:12px; height:12px }
.det-close { width:32px; height:32px; border-radius:var(--r1); background:var(--bg3); border:1px solid var(--b0); color:var(--t1); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .2s ease }
.det-close:hover { background:var(--err); border-color:var(--err); color:#fff; transform:rotate(90deg) }
.det-close svg { width:13px; height:13px }
.det-body  { flex:1; display:grid; grid-template-columns:1fr 1fr; overflow:hidden; min-height:0 }
.det-gal   { background:var(--bg1); border-right:1px solid var(--b0); padding:1.5rem; display:flex; flex-direction:column; gap:.8rem; overflow:hidden }
.det-main  { flex:1; min-height:0; border-radius:var(--r3); overflow:hidden; background:var(--bg0) }
.det-main img { width:100%; height:100%; object-fit:cover; display:block; cursor:zoom-in; transition:transform .35s ease }
.det-main img:hover { transform:scale(1.03) }
.det-thumbs { display:flex; gap:.5rem; justify-content:center; flex-wrap:wrap; flex-shrink:0 }
.det-thumb  { width:64px; height:64px; object-fit:cover; border-radius:var(--r2); border:2px solid var(--b0); cursor:pointer; opacity:.45; transition:all .2s ease; background:var(--bg0) }
.det-thumb:hover { opacity:.82; border-color:var(--b1) }
.det-thumb.on { border-color:var(--ac); opacity:1 }
.det-info { padding:1.8rem 2.2rem; overflow-y:auto; display:flex; flex-direction:column }
.det-info::-webkit-scrollbar { width:3px }
.det-cat  { font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:var(--ac); margin-bottom:.38rem }
.det-name { font-family:var(--fd); font-size:1.6rem; font-weight:800; line-height:1.14; letter-spacing:-.03em; margin-bottom:.55rem }
.det-desc { color:var(--t1); font-size:.87rem; line-height:1.72; margin-bottom:1.2rem }
.det-price-row { display:flex; align-items:baseline; gap:.5rem; margin-bottom:.3rem }
.det-price { font-family:var(--fd); font-size:2rem; font-weight:800; color:var(--ac) }
.det-old   { font-size:.95rem; color:var(--t2); text-decoration:line-through }
.det-disc  { background:rgba(34,197,94,.1); color:var(--ok); border:1px solid rgba(34,197,94,.18); border-radius:4px; padding:.16rem .5rem; font-size:.7rem; font-weight:700 }
.det-stock { display:flex; align-items:center; gap:.35rem; font-size:.8rem; font-weight:700; margin-bottom:1.2rem }
.det-stock svg { width:14px; height:14px }
.det-stock.ok { color:var(--ok) } .det-stock.low { color:var(--warn) } .det-stock.out { color:var(--err) }
.det-actions { display:flex; gap:.65rem; margin-bottom:1.5rem; align-items:center }
.qty-ctrl { display:flex; align-items:center; gap:.4rem; background:var(--bg3); border:1px solid var(--b0); border-radius:var(--r2); padding:.5rem .65rem; flex-shrink:0 }
.qty-ctrl button { width:26px; height:26px; border-radius:5px; background:var(--bg2); border:1px solid var(--b0); color:var(--t0); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .12s ease }
.qty-ctrl button:hover { background:var(--ac); border-color:var(--ac); color:#fff }
.qty-ctrl button svg { width:11px; height:11px }
.qty-n { min-width:24px; text-align:center; font-weight:700; font-size:.95rem }
.det-tabs { display:flex; border-bottom:1px solid var(--b0); margin-bottom:1.1rem; margin-top:.35rem }
.det-tab  { padding:.55rem .9rem; font-size:.8rem; font-weight:600; color:var(--t2); border-bottom:2px solid transparent; margin-bottom:-1px; cursor:pointer; background:none; border-top:none; border-left:none; border-right:none; font-family:var(--fb); transition:all .12s ease }
.det-tab:hover { color:var(--t0) }
.det-tab.on    { color:var(--ac); border-bottom-color:var(--ac) }
.det-pane    { display:none }
.det-pane.on { display:block }
.specs-tbl { width:100%; border-collapse:collapse; font-size:.83rem }
.specs-tbl tr { border-bottom:1px solid var(--b0) }
.specs-tbl tr:last-child { border:none }
.specs-tbl td { padding:.55rem .35rem }
.specs-tbl td:first-child { color:var(--t2); width:44%; font-weight:500 }
.specs-tbl td:last-child  { font-weight:600 }
.rev-card { padding:.85rem; background:var(--bg3); border-radius:var(--r2); margin-bottom:.65rem; border:1px solid var(--b0) }
.rev-top  { display:flex; gap:.58rem; align-items:flex-start; margin-bottom:.38rem }
.rev-av   { width:32px; height:32px; border-radius:50%; background:var(--acg); border:1px solid var(--ba); display:flex; align-items:center; justify-content:center; font-size:.8rem; font-weight:800; color:var(--ac); flex-shrink:0; font-family:var(--fd) }
.rev-name { font-weight:700; font-size:.83rem }
.rev-date { color:var(--t2); font-size:.7rem; margin-top:.07rem }
.rev-txt  { color:var(--t1); font-size:.82rem; line-height:1.58 }
.sp-pick  { display:flex; gap:.2rem; margin-bottom:.8rem }
.sp-star  { font-size:1.35rem; cursor:pointer; opacity:.28; transition:opacity .12s ease; background:none; border:none }
.sp-star.on { opacity:1 }
.auth-wall { background:var(--bg3); border:1px solid var(--b0); border-radius:var(--r3); padding:1.35rem; text-align:center }
.auth-wall p { color:var(--t2); font-size:.84rem; margin-bottom:.85rem }

/* ══════════════════════════════════════════════════════════════════
   ANIMATIONS
══════════════════════════════════════════════════════════════════ */
@keyframes spin     { to { transform:rotate(360deg) } }
@keyframes shake    { 25% { transform:translateX(-5px) } 75% { transform:translateX(5px) } }
@keyframes slideUp  { from { opacity:0; transform:translateY(24px) } to { opacity:1; transform:none } }
@keyframes slideR   { from { transform:translateX(110%); opacity:0 } to { transform:none; opacity:1 } }
@keyframes fdDown   { from { opacity:0; transform:translateY(-7px) } to { opacity:1; transform:none } }
@keyframes fadeIn   { from { opacity:0 } to { opacity:1 } }
@keyframes shimmer  { 0% { background-position:200% 0 } 100% { background-position:-200% 0 } }

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE — Tablet 768-1024px
══════════════════════════════════════════════════════════════════ */
@media (max-width:1024px) {
  .ft-grid { grid-template-columns:1fr 1fr; gap:2rem }
  .pg,.grid { grid-template-columns:repeat(auto-fill,minmax(220px,1fr)) }
}

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE — Mobile <768px
══════════════════════════════════════════════════════════════════ */
@media (max-width:768px) {
  :root { --nh:58px }
  .container { padding:0 1rem }

  /* Header mobile */
  .nav-links { display:none !important }
  .hamburger { display:flex !important }
  .user-pill span#userLabel { display:none }
  .user-pill { padding:.36rem .7rem }

  /* Sections */
  section { padding:2.8rem 0 }
  .sec-title { font-size:1.5rem }
  .sec-hd { flex-direction:column; align-items:flex-start; gap:.55rem }
  .page-hero h1 { font-size:1.75rem }

  /* Grid */
  .pg,.grid { grid-template-columns:repeat(2,1fr); gap:.9rem }

  /* Cart */
  .cart-side { width:100vw; right:-100vw }

  /* Auth */
  .auth-card { padding:1.6rem 1.35rem }
  .fg2 { grid-template-columns:1fr }

  /* Product detail */
  .det-body { grid-template-columns:1fr; overflow-y:auto }
  .det-gal  { border-right:none; border-bottom:1px solid var(--b0); max-height:42vh }
  .det-info { padding:1.25rem 1.1rem }
  .det-name { font-size:1.3rem }
  .det-price { font-size:1.7rem }

  /* Footer */
  .ft-grid { grid-template-columns:1fr 1fr; gap:1.75rem }
  footer { padding:3rem 0 1.5rem; margin-top:3rem }
}

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE — Small mobile <540px
══════════════════════════════════════════════════════════════════ */
@media (max-width:540px) {
  .pg,.grid { grid-template-columns:1fr 1fr; gap:.75rem }
  .ft-grid  { grid-template-columns:1fr }
  .ft-bottom { flex-direction:column; text-align:center }
  .nl-form { flex-direction:column }
  .otp-d   { width:38px; height:48px; font-size:1.1rem }
}

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE — Extra small <380px
══════════════════════════════════════════════════════════════════ */
@media (max-width:380px) {
  .pg,.grid { grid-template-columns:1fr }
  .nav-actions { gap:.25rem }
  .user-pill   { padding:.32rem .55rem }
}

/* ══════════════════════════════════════════════════════
   CORRECÇÕES SINCRONIZAÇÃO (adicionadas na v8)
══════════════════════════════════════════════════════ */

/* Newsletter — remover espaço extra */
.nl-section { padding: 3.5rem 0 !important; }
.nl-icon {
  width: 56px !important; height: 56px !important;
  border-radius: 50% !important;
  background: rgba(59,130,246,.15) !important;
  border: 2px solid rgba(59,130,246,.4) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  margin-bottom: .75rem !important;
  box-shadow: 0 0 28px rgba(59,130,246,.2) !important;
}
.nl-icon svg { width: 24px !important; height: 24px !important; color: #3b82f6 !important; display: block !important; }

/* Ver todos — botão correcto */
a.see-all.btn { text-decoration: none; }
.see-all svg,.view-all svg { width:14px !important; height:14px !important; }

/* Cards — classes legado do produtos.php antigo → remover estilos errados */
.pc-btn { display:none !important }

/* Produto detail — classes legacy */
.badge-feat, .badge-disc { display:none }

/* Full description HTML styling */
.full-desc h1,.full-desc h2,.full-desc h3,.full-desc h4 {
  font-family: var(--fd); font-weight: 700; color: var(--t0);
  margin: 1.4rem 0 .5rem; line-height: 1.2;
}
.full-desc h2 { font-size: 1.15rem }
.full-desc h3 { font-size: 1rem; color: var(--acl) }
.full-desc p  { margin-bottom: .85rem; color: var(--t1); font-size: .9rem; line-height: 1.8 }
.full-desc ul,.full-desc ol { margin: .5rem 0 .85rem 1.4rem }
.full-desc li { margin-bottom: .28rem; color: var(--t1); font-size: .9rem }
.full-desc strong { color: var(--t0); font-weight: 700 }

/* ══ Newsletter redesign ══════════════════════════════════════ */
.nl-section {
  padding: 4rem 0 !important;
  background: linear-gradient(135deg, rgba(59,130,246,.06) 0%, var(--bg1) 50%, rgba(59,130,246,.04) 100%) !important;
  border-top: 1px solid var(--b0);
  border-bottom: 1px solid var(--b0);
  position: relative;
  overflow: hidden;
}
.nl-section::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 600px; height: 300px;
  background: radial-gradient(ellipse, rgba(59,130,246,.08) 0%, transparent 70%);
  pointer-events: none;
}
.nl-inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  max-width: 520px !important;
  margin: 0 auto !important;
  position: relative;
  z-index: 1;
}
.nl-icon {
  width: 60px !important; height: 60px !important;
  border-radius: 50% !important;
  background: rgba(59,130,246,.12) !important;
  border: 2px solid rgba(59,130,246,.38) !important;
  box-shadow: 0 0 32px rgba(59,130,246,.2), inset 0 1px 0 rgba(255,255,255,.08) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  margin: 0 auto 1.1rem auto !important;
  flex-shrink: 0 !important;
}
.nl-icon svg { display: block !important; flex-shrink: 0 !important; }
.nl-title {
  font-family: var(--fd);
  font-size: 1.55rem !important;
  font-weight: 800 !important;
  letter-spacing: -.025em;
  margin-bottom: .5rem !important;
  color: var(--t0);
}
.nl-sub {
  color: var(--t2) !important;
  font-size: .9rem !important;
  line-height: 1.65 !important;
  margin-bottom: 1.6rem !important;
  max-width: 380px;
}
.nl-form {
  display: flex !important;
  gap: .5rem !important;
  width: 100% !important;
  max-width: 420px !important;
  margin: 0 auto .8rem auto !important;
}
.nl-form input {
  flex: 1 !important; min-width: 0 !important;
  padding: .78rem 1.1rem !important;
  background: var(--bg2) !important;
  border: 1.5px solid var(--b1) !important;
  border-radius: var(--r2) !important;
  color: var(--t0) !important;
  font-size: .88rem !important;
  font-family: var(--fb) !important;
  transition: border-color var(--tb), box-shadow var(--tb) !important;
}
.nl-form input:focus {
  outline: none !important;
  border-color: var(--ac) !important;
  box-shadow: 0 0 0 3px var(--acg) !important;
}
.nl-form input::placeholder { color: var(--t2) !important; }
.nl-msg { font-size: .82rem; min-height: 1.2em; }