/* ─── Existing store styles (announcement bar) ───
Carried over from the previous theme version. Salla does NOT copy
custom code when a version is cloned, so this had to be re-added by
hand — do not delete it. The Magla size calculator starts below. */
.s-alert__content {
display: inline-block !important;
white-space: nowrap !important;
animation: samarMove 12s linear infinite;
padding-left: 100%;
will-change: transform;
}
.s-alert {
overflow: hidden !important;
height: 32px !important;
display: flex !important;
align-items: center !important;
}
@keyframes samarMove {
0% {
transform: translate3d(0,0,0);
}
100% {
transform: translate3d(-100%,0,0);
}
}
@media (max-width: 768px) {
.s-alert {
height: 28px !important;
}
.s-alert__content {
font-size: 11px !important;
animation: samarMove 8s linear infinite;
}
}
/* ── Magla Size Calculator ─────────────────────────────── */
/* ⚠️ HARIR FONT — NOT ACTIVE YET. Deliberately commented out.
────────────────────────────────────────────────────────────
TO TURN HARIR ON (2 steps):
1. Upload harir-regular.woff2 + harir-bold.woff2 somewhere public
(Salla file manager → copy link, or any CDN).
2. Delete the two comment markers below, then paste each URL in
place of PASTE_..._HERE.
Why it's commented out rather than left with placeholder URLs:
a placeholder is not a valid address, so the browser would request
it and get a 404 on EVERY product page view — two wasted requests
per visitor, and the font silently never loads anyway. Commented
out, the widget cleanly uses the theme font until you fill this in.
@font-face {
font-family: 'Harir';
src: url('PASTE_HARIR_REGULAR_WOFF2_URL_HERE') format('woff2');
font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
font-family: 'Harir';
src: url('PASTE_HARIR_BOLD_WOFF2_URL_HERE') format('woff2');
font-weight: 700; font-style: normal; font-display: swap;
}
*/
:root {
--mgla-primary: #000000; /* Magla brand black */
--mgla-accent: #000000; /* monochrome — matches approved cards */
--mgla-bg: #ffffff;
--mgla-soft: #f7f5f3; /* neutral off-white panels */
--mgla-text: #111111;
--mgla-muted: #8a8a8a;
--mgla-rule: #c9c9c9; /* divider gray from the approved cards */
--mgla-radius: 14px;
--mgla-pad: 24px; /* single source of truth for side padding */
/* Harir for Arabic. Harir has NO Latin glyphs, so Latin (XS/S/M/L…)
falls through to the sans below — same as the approved mockups. */
--mgla-font: 'Harir', 'Helvetica Neue', Arial, sans-serif;
--mgla-latin: 'Helvetica Neue', Arial, sans-serif;
}
/* Product-page trigger button.
Full-width by design: it's injected directly above the product options
inside Selia's product