/* ============================================================
   JigjigaSale — Redesign Design Foundation  (v2)
   Universal dark-blue system · mobile-first · PWA-ready
   Tokens are global (:root). Components are scoped under .jjs-v2
   so unconverted pages are never affected during rollout.
   ============================================================ */

:root{
  /* Brand */
  --jjs-navy-900:#0A1B3D; --jjs-navy-800:#0F2650; --jjs-navy-700:#17356B; --jjs-navy-600:#1E4079;
  --jjs-blue-500:#2563EB; --jjs-blue-300:#7DA2F5; --jjs-blue-100:#DBEAFE;
  --jjs-gold:#F5A524; --jjs-gold-600:#D98A0B;
  --jjs-green:#16A34A; --jjs-green-050:#E9F7EF;
  --jjs-red:#DC2626; --jjs-red-050:#FDECEC; --jjs-amber-050:#FEF4E2;
  /* Neutrals (blue-biased) */
  --jjs-ink:#0E1726; --jjs-slate-700:#334155; --jjs-slate-600:#475569; --jjs-slate-500:#64748B;
  --jjs-slate-400:#94A3B8; --jjs-slate-300:#CBD5E1; --jjs-slate-200:#E2E8F0; --jjs-slate-100:#F1F5F9;
  --jjs-paper:#FFFFFF; --jjs-canvas:#F4F7FC;
  /* System */
  --jjs-font:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  --jjs-r-sm:9px; --jjs-r:12px; --jjs-r-lg:16px; --jjs-r-xl:22px;
  --jjs-shadow-sm:0 4px 12px -6px rgba(10,27,61,.20);
  --jjs-shadow:0 12px 30px -12px rgba(10,27,61,.28);
  --jjs-shadow-lg:0 24px 60px -20px rgba(10,27,61,.40);
  --jjs-gold-cta:linear-gradient(180deg,var(--jjs-gold),var(--jjs-gold-600));
  --jjs-navy-grad:linear-gradient(150deg,var(--jjs-navy-800),var(--jjs-navy-900));
}

/* ---------- scoped base ---------- */
.jjs-v2{font-family:var(--jjs-font);color:var(--jjs-ink);-webkit-font-smoothing:antialiased}
.jjs-v2 *{box-sizing:border-box}
.jjs-v2 h1,.jjs-v2 h2,.jjs-v2 h3{letter-spacing:-.02em;text-wrap:balance}
.jjs-v2 a{color:var(--jjs-blue-500);text-decoration:none}
.jjs-v2 img{max-width:100%}

/* ---------- brand logo ---------- */
.jjs-logo{display:inline-flex;align-items:center;gap:10px}
.jjs-logo img{display:block}
.jjs-logo--lockup img{height:34px;width:auto}
.jjs-logo--icon img{height:30px;width:30px;object-fit:contain}

/* ---------- buttons ---------- */
.jjs-btn{appearance:none;border:0;cursor:pointer;font-family:inherit;font-weight:700;
  border-radius:var(--jjs-r);padding:13px 20px;font-size:15px;line-height:1;text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease}
.jjs-btn:active{transform:translateY(1px)}
.jjs-btn:focus-visible{outline:3px solid var(--jjs-blue-300);outline-offset:2px}
.jjs-btn--gold{background:var(--jjs-gold-cta);color:#2A1A02;box-shadow:0 10px 24px -8px rgba(245,165,36,.6)}
.jjs-btn--gold:hover{box-shadow:0 14px 30px -8px rgba(245,165,36,.75)}
.jjs-btn--navy{background:var(--jjs-navy-900);color:#fff}
.jjs-btn--blue{background:var(--jjs-blue-500);color:#fff}
.jjs-btn--ghost{background:#fff;color:var(--jjs-slate-700);border:1px solid var(--jjs-slate-200)}
.jjs-btn--ghost:hover{background:var(--jjs-slate-100)}
.jjs-btn--block{width:100%}
.jjs-btn--lg{padding:15px 22px;font-size:16px}

/* ---------- fields ---------- */
.jjs-field-label{display:block;font-size:12px;font-weight:700;color:var(--jjs-slate-600);margin:0 0 6px}
.jjs-field{width:100%;padding:13px 14px;border:1px solid var(--jjs-slate-200);border-radius:var(--jjs-r);
  font-size:14px;font-family:inherit;color:var(--jjs-ink);background:var(--jjs-slate-100);transition:border .12s,box-shadow .12s}
.jjs-field::placeholder{color:var(--jjs-slate-400)}
.jjs-field:focus{outline:0;border-color:var(--jjs-blue-500);background:#fff;box-shadow:0 0 0 3px rgba(37,99,235,.15)}
.jjs-inputgroup{position:relative}
.jjs-inputgroup .jjs-eye{position:absolute;right:12px;top:50%;transform:translateY(-50%);
  background:0;border:0;cursor:pointer;color:var(--jjs-slate-400);font-size:15px;padding:4px}

/* ---------- cards ---------- */
.jjs-card{background:var(--jjs-paper);border:1px solid var(--jjs-slate-200);border-radius:var(--jjs-r-lg);box-shadow:var(--jjs-shadow-sm)}
.jjs-card--pad{padding:18px}

/* ---------- pills / badges ---------- */
.jjs-pill{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px}
.jjs-pill--stock{background:var(--jjs-green-050);color:var(--jjs-green)}
.jjs-pill--cod{background:rgba(37,99,235,.12);color:var(--jjs-blue-500)}
.jjs-pill--disc{background:rgba(245,165,36,.16);color:var(--jjs-gold-600)}

/* order/status semantic chips */
.jjs-st{font-size:11px;font-weight:800;padding:3px 9px;border-radius:999px;white-space:nowrap;display:inline-block}
.jjs-st--proc{background:var(--jjs-blue-100);color:#1D4ED8}
.jjs-st--done{background:var(--jjs-green-050);color:var(--jjs-green)}
.jjs-st--pend{background:var(--jjs-amber-050);color:var(--jjs-gold-600)}
.jjs-st--canc{background:var(--jjs-red-050);color:var(--jjs-red)}
.jjs-st--ship{background:#EDE9FE;color:#6D28D9}

/* ---------- price ---------- */
.jjs-price{font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:var(--jjs-ink)}
.jjs-price .cur{font-size:.62em;color:var(--jjs-slate-400);font-weight:700;margin-right:2px}
.jjs-price .old{font-size:.6em;color:var(--jjs-slate-400);text-decoration:line-through;font-weight:600;margin-left:8px}

/* ---------- rating ---------- */
.jjs-stars{color:var(--jjs-gold);letter-spacing:2px;font-size:15px}

/* ---------- restyle the theme's site-wide mobile bottom nav (navy, shiny) ---------- */
@media (max-width:767px){
  .jigji-mobile-footer{background:linear-gradient(180deg,#1E4079,#0A1B3D)!important;
    border-top:1px solid rgba(255,255,255,.12)!important;box-shadow:0 -8px 28px rgba(10,27,61,.55)!important;
    transition:transform .28s ease!important;will-change:transform}
  .jigji-mobile-footer.jjs-nav-hidden{transform:translateY(130%)!important}
  .jigji-mobile-footer a{color:#b9ccec!important;font-weight:700}
  .jigji-mobile-footer a:hover,.jigji-mobile-footer a:active,.jigji-mobile-footer a.active,
  .jigji-mobile-footer a.current{color:#fff!important}
  .jigji-mobile-footer i{color:inherit!important}
}
@media (prefers-reduced-motion:reduce){.jigji-mobile-footer{transition:none!important}}

/* ---------- helpers ---------- */
.jjs-divider{height:1px;background:var(--jjs-slate-200)}
.jjs-muted{color:var(--jjs-slate-500)}
.jjs-tabnum{font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){.jjs-v2 *{transition:none!important}}