/* ============================================================
   SHOPLYHUB — Global design tokens & shared base
   Shared by every module. Module-specific styles live in
   each module's own .css file.
   ============================================================ */
:root{
  /* Brand palette */
  --sh-navy:#0f1b3d;
  --sh-navy-2:#16265a;
  --sh-gold:#e8b53d;
  --sh-gold-2:#f4cd6b;
  --sh-red:#e63946;
  --sh-green:#1faa59;
  --sh-ink:#1a1d29;
  --sh-muted:#6b7280;
  --sh-line:#e6e8ee;
  --sh-bg:#ffffff;
  --sh-bg-soft:#f6f7fb;

  /* Type */
  --sh-font:'Segoe UI',system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;

  /* Shape */
  --sh-radius:12px;
  --sh-radius-sm:8px;
  --sh-shadow:0 8px 28px rgba(15,27,61,.12);
  --sh-shadow-sm:0 2px 10px rgba(15,27,61,.08);

  /* Layout */
  --sh-maxw:1280px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--sh-font);
  color:var(--sh-ink);
  background:var(--sh-bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

/* Shared button */
.sh-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:inherit;font-weight:600;font-size:14px;
  padding:10px 18px;border-radius:var(--sh-radius-sm);
  border:1px solid transparent;cursor:pointer;transition:.18s ease;
  background:var(--sh-navy);color:#fff;
}
.sh-btn:hover{background:var(--sh-navy-2)}
.sh-btn--gold{background:var(--sh-gold);color:var(--sh-navy)}
.sh-btn--gold:hover{background:var(--sh-gold-2)}
.sh-btn--ghost{background:transparent;border-color:var(--sh-line);color:var(--sh-ink)}
.sh-btn--ghost:hover{background:var(--sh-bg-soft)}

.sh-container{max-width:var(--sh-maxw);margin:0 auto;padding:0 20px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* Dashboard sound controls (seller + admin) */
.sh-snd{display:flex;align-items:center;gap:18px;flex-wrap:wrap;background:var(--sh-bg-soft);border:1px solid var(--sh-line);border-radius:12px;padding:12px 16px}
.sh-snd label{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:#444}
.sh-snd input[type=range]{accent-color:var(--sh-navy)}
.sh-snd__test{border:1px solid var(--sh-line);background:#fff;border-radius:8px;padding:6px 12px;font-weight:700;font-size:12.5px;cursor:pointer;font-family:inherit}