/* ==========================================================================
 * Prinso Fashion — design tokens
 * Same palette as FajrOne Visits.html — navy / gold / ivory
 * ========================================================================== */
:root{
  --navy:#1a2f3f; --navy-900:#0f1f2b; --navy-800:#152633; --navy-700:#22404f;
  --navy-600:#2f4e5f; --navy-500:#3f6075;
  --gold:#d4a853; --gold-soft:#e6c687; --gold-dim:#8a6d34;
  --gold-glow:rgba(212,168,83,.18);
  --ivory:#f5f1e8; --ivory-2:#ebe5d4;
  --paper:#f7f5ef; --paper-2:#ffffff;
  --ink:#14222c; --ink-2:#2c3e4a;
  --muted:#5b6d78; --muted-2:#8a9aa3;
  --line:rgba(20,34,44,.08); --line-2:rgba(20,34,44,.14);
  --line-gold:rgba(212,168,83,.28); --line-dark:rgba(245,241,232,.08);
  --green:#3f8a5a; --green-soft:#e6f0ea;
  --red:#b54a3a; --red-soft:#f6e4e0;
  --blue:#2f5d7a; --blue-soft:#e2ebf1;
  --amber:#b8860b; --amber-soft:#faf0d8;
  --violet:#5d4a7a; --violet-soft:#ece6f3;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Tajawal",system-ui,sans-serif;
  background:var(--paper); color:var(--ink);
  -webkit-font-smoothing:antialiased; line-height:1.55;
}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace;direction:ltr;unicode-bidi:isolate}
a{color:inherit;text-decoration:none;cursor:pointer}
button{font-family:inherit}
.shop-container{max-width:1320px;margin:0 auto;padding:0 28px;width:100%}

/* ===== shared buttons ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 18px;border-radius:9px;border:1px solid var(--line-2);
  background:var(--paper-2);color:var(--ink);font-size:13.5px;font-weight:500;
  cursor:pointer;transition:all .15s;font-family:inherit;text-decoration:none;
}
.btn:hover{border-color:var(--gold);color:var(--gold-dim)}
.btn.primary{background:var(--navy);color:var(--ivory);border-color:var(--navy)}
.btn.primary:hover{background:var(--navy-700);color:var(--ivory);border-color:var(--navy-700)}
.btn.gold{background:var(--gold);color:var(--navy-900);border-color:var(--gold);font-weight:700}
.btn.gold:hover{background:var(--gold-soft);color:var(--navy-900);border-color:var(--gold-soft)}
.btn.ghost{background:transparent;border-color:var(--line-2)}
.btn.lg{padding:14px 22px;font-size:14px}
.btn.block{width:100%}
.btn .ico{font-size:12px}

/* eyebrow */
.eyebrow{
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;
  color:var(--gold-dim);letter-spacing:.2em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:8px;
}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 3px var(--gold-glow)}

/* labels (small mono uppercase) */
.lbl{
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;
  color:var(--muted);letter-spacing:.16em;text-transform:uppercase;direction:ltr;
  font-weight:600;
}

/* card */
.card{
  background:var(--paper-2);border:1px solid var(--line);
  border-radius:14px;
}

/* toast */
#toastHost{position:fixed;top:20px;left:50%;transform:translateX(-50%);z-index:9999;display:flex;flex-direction:column;gap:10px;pointer-events:none}
.toast{
  background:var(--paper-2);border:1px solid var(--line-gold);
  border-radius:10px;padding:12px 16px;display:flex;align-items:center;gap:10px;
  min-width:280px;box-shadow:0 12px 32px -10px rgba(15,31,43,.25);
  font-size:13px;color:var(--ink);pointer-events:auto;
  transform:translateY(-12px);opacity:0;transition:all .25s;
}
.toast.show{transform:translateY(0);opacity:1}
.toast i{color:var(--gold-dim)}
.toast.success i{color:var(--green)}
.toast.err i{color:var(--red)}