/* ============================================================
   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}
/* Webview-friendly base: stable text sizing, no tap flash, no sideways
   scroll - the same layout wraps cleanly into Android/iOS webviews. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  font-family:var(--sh-font);
  color:var(--sh-ink);
  background:var(--sh-bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  -webkit-tap-highlight-color:transparent;
  overflow-x:hidden;
}
button,input,select,textarea{font-family:inherit}
button,a{touch-action:manipulation}
a{color:inherit;text-decoration:none}
/* Image safety net: fluid on every viewport, no overflow / CLS surprises.
   Wrappers with a fixed aspect-ratio override height via their own rules. */
img{display:block;max-width:100%;height:auto}
img[width][height]{height:auto}

/* 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}

/* ============================================================
   Dark Mode (toggled by assets/js/theme.js -> html.sh-dark)
   Full-coverage inversion on the root keeps every module readable,
   while images / video / brand marks are counter-inverted so
   product photos keep their TRUE colors. invert(1)+hue-rotate(180)
   applied twice is an exact identity, so photos are pixel-perfect.
   ============================================================ */
html.sh-dark{background:#0d1017;color-scheme:dark;filter:invert(1) hue-rotate(180deg)}
html.sh-dark img,
html.sh-dark video,
html.sh-dark iframe,
html.sh-dark canvas,
html.sh-dark .sh-zoomlens,
html.sh-dark .sh-cur__flag{filter:invert(1) hue-rotate(180deg)}
/* Windows renders flag emoji as plain letters ("SG"); counter-inverting kept
   that text dark on the inverted dark menu = invisible labels. Force it light
   so the text reads, while true emoji flags keep their colors elsewhere. */
html.sh-dark .sh-cur__flag{color:#e8ecf3}

/* header moon/sun toggle */
.sh-theme-btn{border:0;background:var(--sh-bg-soft);border-radius:50%;width:34px;height:34px;
  font-size:16px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.sh-theme-btn:hover{background:var(--sh-line)}

/* Animated LIVE dot (product is live) - used in seller + admin product tables */
@keyframes sh-pulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.6)}70%{box-shadow:0 0 0 6px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}