/* Dermasia brand — colors lifted from derma.fadaa-marketing.net theme:
   navy #1e306e (primary) + teal #129fae (accent) + cyan #d2edf8 (tint).
   mount.jsx applies these inline on every render so this is just a fallback. */
:root{
  --primary: #1e306e;
  --primary-deep: #15224f;
  --primary-soft: #5a6aa0;
  --primary-tint: #d2edf8;
  --sage: var(--primary);
  --sage-deep: var(--primary-deep);
  --sage-soft: var(--primary-soft);
  --sage-tint: var(--primary-tint);
  --cream: #FFFFFF;
  --cream-2: #FAFAFA;
  --beige: #F4F8FA;
  --terracotta: #129fae;
  --terracotta-soft: #7ed3dc;
  --ink: #1A1F1C;
  --ink-2: #2C342F;
  --muted: #7A7268;
  --muted-2: #A89F92;
  --line: #E5E7EB;
  --line-2: #F0F0F0;
  --white: #FFFFFF;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--cream);color:var(--ink);font-family:'Inter',sans-serif;-webkit-font-smoothing:antialiased}
[dir=rtl] body, [dir=rtl] *{ font-family:'Tajawal','Inter',sans-serif !important; }
[dir=rtl] .serif{ font-family:'Tajawal',serif !important; font-weight:600; letter-spacing:0; }
.serif{font-family:'Cormorant Garamond',serif;font-weight:500;letter-spacing:-0.01em}
.eyebrow{font-family:'Inter',sans-serif;font-size:11px;letter-spacing:0.18em;text-transform:uppercase;font-weight:500;color:var(--muted)}
[dir=rtl] .eyebrow{ font-family:'Tajawal',sans-serif !important; letter-spacing:0.04em; }
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:inherit;font-size:13px;font-weight:500;letter-spacing:0.04em;text-transform:uppercase;padding:14px 22px;border:none;cursor:pointer;transition:all .2s;text-decoration:none}
.btn-primary{background:var(--primary);color:var(--cream)}
.btn-primary:hover{background:var(--primary-deep)}
.btn-outline{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.btn-outline:hover{background:var(--ink);color:var(--cream)}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:var(--white);font-size:12px;color:var(--ink);font-weight:500;cursor:pointer;transition:all .2s}
.chip:hover{border-color:var(--primary)}
.chip.active{background:var(--primary);color:var(--cream);border-color:var(--primary)}
.badge{display:inline-flex;align-items:center;padding:5px 10px;border-radius:4px;font-size:10px;letter-spacing:0.12em;text-transform:uppercase;font-weight:600}
.badge-new{background:var(--primary);color:var(--cream)}
.badge-best{background:var(--terracotta);color:var(--white)}
.badge-save{background:var(--ink);color:var(--cream)}
.badge-bundle{background:var(--beige);color:var(--ink-2)}
hr.rule{border:none;border-top:1px solid var(--line);margin:0}
@keyframes pulse-dot{0%,100%{opacity:1}50%{opacity:.3}}
.live-dot{width:6px;height:6px;border-radius:50%;background:#22c55e;animation:pulse-dot 1.6s ease-in-out infinite;display:inline-block}