/* NexView - base: reset, design tokens, typography, utilities
   (retail gadget-store look: soft grey canvas, white image cards, royal blue actions,
   amber announcement strip, near-black footer, Poppins) */
:root {
  /* Brand */
  --blue:#3451d1; --blue-700:#2a41b0; --blue-900:#16205e; --blue-50:#eef1fd; --blue-100:#dde3fb; --blue-200:#bcc7f6;
  --blue-bright:#4f6cf0; --blue-light:#a9b8ff;
  --green:#25D366; --green-700:#1da851; --stock:#16a34a;
  --strip:#ff9f00; --sale:#e02424;
  --accent:#3451d1; --accent-700:#2a41b0; --accent-50:#eef1fd;
  /* Neutrals */
  --ink:#121212; --ink-2:#1f1f1f; --text:#4a4a4a; --muted:#6b6b6b; --muted-2:#9a9a9a;
  --line:#e6e6e6; --bg:#f5f5f5; --bg-soft:#f5f5f5; --bg-card:#ffffff; --dark:#161616;
  /* Effects */
  --radius:16px; --radius-sm:10px; --radius-lg:20px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.05);
  --shadow:0 8px 28px rgba(0,0,0,.07);
  --shadow-lg:0 18px 44px rgba(0,0,0,.12);
  --maxw:1280px;
  --gutter:24px;
  --font:'Poppins','Montserrat',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{ font-family:var(--font); background:var(--bg); color:var(--ink-2); line-height:1.6;
  -webkit-font-smoothing:antialiased; min-height:100vh; display:flex; flex-direction:column; }
main{ flex:1 0 auto; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button,input,select{ font-family:inherit; }
h1,h2,h3,h4{ line-height:1.2; font-weight:600; color:var(--ink); letter-spacing:-.01em; }
:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }

.wrap,.container{ max-width:var(--maxw); margin:0 auto; width:100%; }
.container{ padding-left:var(--gutter); padding-right:var(--gutter); }

/* Generic buttons (also used by admin) */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-weight:700;
  font-size:14px; border-radius:var(--radius-sm); padding:11px 20px; cursor:pointer;
  border:1px solid transparent; transition:background .15s, box-shadow .15s, transform .15s; }
.btn:hover{ transform:translateY(-1px); }
.btn-ghost{ background:#fff; color:var(--ink-2); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--blue); color:var(--blue); }
.btn-wa{ background:var(--green); color:#fff; }
.btn-wa:hover{ background:var(--green-700); }
.btn-danger{ background:#fee2e2; color:#b91c1c; }
.btn-danger:hover{ background:#fecaca; }

/* Utilities */
.hide{ display:none !important; }
.text-center{ text-align:center; }
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.spinner{ width:34px; height:34px; border:3px solid var(--blue-100); border-top-color:var(--blue);
  border-radius:50%; animation:spin .8s linear infinite; margin:48px auto; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.state-msg{ text-align:center; color:var(--muted); padding:48px 16px; font-size:15px; }
.notice{ background:#fef3c7; color:#92400e; border:1px solid #fde68a; border-radius:12px;
  padding:14px 18px; font-size:14px; margin:16px auto; max-width:var(--maxw); }

@media (max-width:768px){ :root{ --gutter:16px; } }
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}