/* سولفنا — هوية صفحة المتجر v0.1 — 2026-11-05 (معاينة).
   تتبدّل هنا متغيرات الألوان والخط والشكل داخل .screen[data-brand…] فقط، أي صفحة المتجر والمنتج؛ بقية التطبيق بهوية سولفنا.
   القيم المحسوبة (--bb-* --bk-* --bs-*) يضعها brand.js بعد ضمان تباين النص 4.5:1 في المظهرين. */
@font-face{font-family:'Tajawal';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/Tajawal-400.woff') format('woff')}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/Tajawal-500.woff') format('woff')}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/Tajawal-700.woff') format('woff')}

.screen[data-brand],[data-brand-preview][data-brand]{--blue:var(--bb-l);--on-blue:var(--bb-on-l);--blue-ink:var(--bk-l);--link:var(--bk-l);--focus:var(--bk-l);--blue-soft:var(--bs-l);--me-meta:var(--bs-l)}
:root[data-effective-theme="dark"] .screen[data-brand],:root[data-effective-theme="dark"] [data-brand-preview][data-brand]{--blue:var(--bb-d);--on-blue:var(--bb-on-d);--blue-ink:var(--bk-d);--link:var(--bk-d);--focus:var(--bk-d);--blue-soft:var(--bs-d);--me-meta:var(--bs-d)}

.screen[data-brand-font="tajawal"],[data-brand-preview][data-brand-font="tajawal"]{--font:'Tajawal','IBM Plex Sans Arabic','Noto Sans Arabic','Segoe UI',system-ui,sans-serif;font-family:var(--font)}
.screen[data-brand-font="tajawal"] button,.screen[data-brand-font="tajawal"] input,.screen[data-brand-font="tajawal"] textarea{font-family:inherit}

.screen[data-brand-shape="sharp"],[data-brand-preview][data-brand-shape="sharp"]{--radius:6px}
.screen[data-brand-shape="sharp"] .btn,[data-brand-preview][data-brand-shape="sharp"] .btn{border-radius:6px}
.screen[data-brand-shape="sharp"] .btn.small,[data-brand-preview][data-brand-shape="sharp"] .btn.small{border-radius:4px}
.screen[data-brand-shape="sharp"] .chip,[data-brand-preview][data-brand-shape="sharp"] .chip{border-radius:6px}
.screen[data-brand-shape="sharp"] .pbig,.screen[data-brand-shape="sharp"] .pimg,.screen[data-brand-shape="sharp"] .cover{border-radius:6px}
.screen[data-brand-shape="sharp"] .input,.screen[data-brand-shape="sharp"] textarea{border-radius:6px}
.screen[data-brand-shape="sharp"] .ptile{border-radius:6px}