/* ===========================================================================
   MAGMA Store Platform — design system.

   One stylesheet for the three surfaces:
     .ms-*  dashboards (platform + store), English, light admin look
     .sf-*  public storefront, bilingual (LTR / RTL)
   White cards on a light background, rounded, soft shadows, accent #880290.
   Mobile first: every layout is written for a phone and widened from there.
   =========================================================================== */

/* ============================== the tokens ================================

   EVERY colour of the three surfaces is read from these properties, so the
   whole app — dashboards, till, storefront, driver app, tracking page — is one
   theme with two readings. `html[data-theme="light"]` is today's look, byte for
   byte; `html[data-theme="dark"]` is the dark one. The attribute is written by
   the small bootstrap script in index.html BEFORE the first paint (and by
   MS.paintTheme afterwards), so there is no white flash on load or on a route
   change, and nothing here is a component's own business.

   The dark reading is for the dashboards (the store's, the platform's, the
   till, the driver app) and the landing page. The customer-facing storefront and
   its tracking page are always the light one — MS.isStorefront in ms.js keeps
   `data-theme` at "light" there, so not one `html[data-theme="dark"]` rule below
   ever reaches a shopper.

   Names, in one list:
     page background ..................... --bg
     surface / card ...................... --card
     elevated (modal, sheet, dropdown) ... --elev
     a quiet inset inside a card ......... --surface-2
     borders / dividers .................. --line · --line-2
     text primary / secondary / muted .... --ink · --ink-2 · --ink-3
     link & accent ink ................... --link (= --acc-text)
     input background / border ........... --input-bg · --input-line
     hover / active-selected ............. --hover · --btn-hover · --sel
     overlay / scrim ..................... --scrim · --scrim-strong
     shadow .............................. --sh · --sh-sm · --sh-lg
     brand purple (+ hover, fills) ....... --acc · --acc-dark · --acc-fill · --acc-fill-h
     success / warning / danger / info ... --ok · --warn · --err · --info (each with -soft)
   ============================================================================ */

:root {
    /* ---- the brand -------------------------------------------------------
       --acc is the store's own accent (written inline by MS.applyAccent). The
       three readings below carry it to the right place: --acc-text for words,
       links, icons, borders and focus rings, --acc-fill behind a filled button
       or a picked chip (white ink on it), --acc-fill-h its hover. In light mode
       all of them are the accent itself, exactly as before. */
    --acc: #880290;
    --acc-dark: #6a0171;
    --acc-text: var(--acc);
    --acc-fill: var(--acc);
    --acc-fill-h: var(--acc-dark);
    --acc-text-strong: var(--acc-dark);
    --acc-soft: rgba(136, 2, 144, .08);
    --acc-line: rgba(136, 2, 144, .22);
    --acc-rgb: 136, 2, 144;
    --link: var(--acc-text);

    /* The ink of the storefront service bar: white on the accent, unless the
       store's colour is too light for white to read (set by the storefront). */
    --sf-svc-ink: rgba(255, 255, 255, .9);

    /* ---- surfaces and ink ------------------------------------------------ */
    --bg: #f7f4fa;
    --card: #ffffff;
    --elev: #ffffff;
    --surface-2: #fbf9fd;
    --ink: #1d1520;
    --ink-2: #5a5164;
    --ink-3: #8b8396;
    --line: #eae4f0;
    --line-2: #f4f0f8;
    --hover: #f4f0f8;
    --btn-hover: #eae4f1;
    --sel: rgba(136, 2, 144, .08);
    --input-bg: #ffffff;
    --input-line: #eae4f0;
    --mute-soft: #f1edf5;

    /* ---- overlay, toast, skeleton, scrollbar ----------------------------- */
    --scrim: rgba(20, 12, 24, .45);
    --scrim-soft: rgba(29, 21, 32, .42);
    --scrim-mid: rgba(18, 12, 22, .66);
    --scrim-strong: rgba(12, 8, 14, .84);
    --toast-bg: #241a28;
    --toast-ink: #ffffff;
    --skel-a: #f1ecf6;
    --skel-b: #f8f5fb;
    --star-off: #cfcadb;
    --sb-thumb: #d8d0e2;
    --sb-track: transparent;

    /* translucent bars (the sticky headers and tool rows) */
    --surf-92: rgba(255, 255, 255, .92);
    --surf-94: rgba(255, 255, 255, .94);
    --bg-96: rgba(247, 244, 250, .96);

    /* ---- statuses -------------------------------------------------------- */
    --ok: #0f8a5f;
    --ok-soft: rgba(15, 138, 95, .1);
    --warn: #b47300;
    --warn-soft: rgba(180, 115, 0, .12);
    --err: #c02634;
    --err-soft: rgba(192, 38, 52, .1);
    --err-line: rgba(192, 38, 52, .25);
    --danger-fill: #c02634;
    --danger-fill-h: #a51f2b;
    --danger-bg: #fdeaea;
    --danger-ink: #a81b28;
    --info: #1f6fb2;
    --info-soft: rgba(31, 111, 178, .12);
    --done-soft: #eef2f6;
    --done-ink: #46586b;

    /* ---- the storefront footer band -------------------------------------- */
    --ft-bg: #F4F4F4;
    --ft-ink: #2b2b2b;
    --ft-ink-2: #5c5c5c;
    --ft-ink-3: #4a4a4a;
    --ft-line: #dedede;

    --r: 18px;
    --r-sm: 12px;
    --r-xs: 10px;
    --sh: 0 1px 2px rgba(29, 21, 32, .05), 0 10px 26px rgba(29, 21, 32, .06);
    --sh-sm: 0 1px 2px rgba(29, 21, 32, .05), 0 4px 14px rgba(29, 21, 32, .05);
    --sh-lg: 0 24px 60px rgba(29, 21, 32, .18);
}

/* ============================== the dark reading ==========================

   Deep neutral ground (#0f1115), cards a step above it, sheets and menus one
   more, borders a hair lighter than the card so nothing disappears. The brand
   purple is kept, its ink lifted until body text, links, buttons and table
   text all clear WCAG AA on these grounds; the status colours are softened so
   they read as information instead of glare. Nothing here changes a layout,
   a size or a spacing — only colour.
   ========================================================================= */

html[data-theme="dark"] {
    color-scheme: dark;

    --bg: #0f1115;
    --card: #171a21;
    --elev: #1d2129;
    --surface-2: #1b1f27;
    --ink: #e8eaf0;
    --ink-2: #b9c0cf;
    --ink-3: #98a0b3;
    --line: #262b35;
    --line-2: #22262f;
    --hover: #1f242d;
    --btn-hover: #262c37;
    --sel: rgba(207, 151, 242, .16);
    --input-bg: #1d2129;
    --input-line: #2f3643;
    --mute-soft: #1f242d;

    /* The accent, read for the dark ground: words and icons are lifted until
       they clear AA on it, the fill keeps the brand behind its white ink. The
       plain values below are the platform purple, lifted; MS.paintTheme lifts
       the STORE's own accent the same way and writes the three inline, so a
       shop with an orange or a teal accent keeps its hue and its contrast. */
    --acc-text: #cf97f2;
    --link: var(--acc-text);
    --acc-fill: var(--acc);
    --acc-fill-h: #ae53b4;
    --acc-text-strong: #e2b7fa;
    /* the store's accent written inline as a faint tint is too faint on a dark
       card: the same hue, a stronger hand (!important to win over the inline
       value MS.applyAccent writes). */
    --acc-soft: rgba(var(--acc-rgb), .18) !important;
    --acc-line: rgba(var(--acc-rgb), .42) !important;

    --scrim: rgba(0, 0, 0, .62);
    --scrim-soft: rgba(0, 0, 0, .55);
    --scrim-mid: rgba(0, 0, 0, .78);
    --scrim-strong: rgba(0, 0, 0, .9);
    --toast-bg: #262c37;
    --toast-ink: #e8eaf0;
    --skel-a: #1f242d;
    --skel-b: #262c37;
    --star-off: #3b4250;
    --sb-thumb: #333a47;
    --sb-track: transparent;

    --surf-92: rgba(23, 26, 33, .92);
    --surf-94: rgba(23, 26, 33, .94);
    --bg-96: rgba(15, 17, 21, .96);

    --ok: #4ed6a2;
    --ok-soft: rgba(78, 214, 162, .14);
    --warn: #e8b04b;
    --warn-soft: rgba(232, 176, 75, .14);
    --err: #f4818f;
    --err-soft: rgba(244, 129, 143, .14);
    --err-line: rgba(244, 129, 143, .38);
    /* a SOLID red keeps white ink readable on it, so it is its own token: the
       softened --err above is for words and tints, never for a fill under
       white text */
    --danger-fill: #b33a46;
    --danger-fill-h: #c94a56;
    --danger-bg: rgba(244, 129, 143, .16);
    --danger-ink: #f7a3ad;
    --info: #82bdea;
    --info-soft: rgba(130, 189, 234, .14);
    --done-soft: rgba(130, 189, 234, .14);
    --done-ink: #a9cdea;

    --ft-bg: #12151b;
    --ft-ink: #d5dae5;
    --ft-ink-2: #98a0b3;
    --ft-ink-3: #98a0b3;
    --ft-line: #262b35;

    --sh: 0 1px 2px rgba(0, 0, 0, .5), 0 10px 26px rgba(0, 0, 0, .45);
    --sh-sm: 0 1px 2px rgba(0, 0, 0, .5), 0 4px 14px rgba(0, 0, 0, .4);
    --sh-lg: 0 24px 60px rgba(0, 0, 0, .7);
}

/* The theme switch is colour only, about 150ms, and never a layout move: the
   properties below are the ones that change, nothing else is transitioned.
   `:where()` keeps it at zero specificity, so a component that already sets
   its own transition keeps it. */
:where(html, body, body *) {
    transition: background-color .15s ease, border-color .15s ease, color .15s ease,
        fill .15s ease, stroke .15s ease, box-shadow .15s ease;
}

@media (prefers-reduced-motion: reduce) {
    :where(html, body, body *) {
        transition: none;
    }
}

/* A thin, themed scrollbar everywhere (the dark one is a grey on the dark
   ground, the light one today's grey). */
html {
    scrollbar-color: var(--sb-thumb) var(--sb-track);
    scrollbar-width: thin;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--sb-track);
}

::-webkit-scrollbar-thumb {
    background: var(--sb-thumb);
    border-radius: 8px;
}

* {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
}

/* ---- the two font stacks ------------------------------------------------
   Every surface is read in two faces: Poppins for Latin, Cairo for Arabic.
   Both are loaded in index.html, and BOTH always sit in the stack — a page read
   in English can still hold Arabic text the owner or the shopper typed (a
   product description, a banner title, a coupon note, an order note, a policy,
   a message from the server …), and Poppins carries no Arabic glyph at all, so
   an Arabic word under the English stack used to come out as empty boxes. The
   browser picks the face per character: Latin still starts at Poppins, first in
   the stack, so the English look is exactly what it was, and an Arabic
   character falls through to the already-loaded Cairo instead of the generic
   fallbacks. The Arabic-first stack does the same the other way round: Cairo
   first, Poppins carried behind it for a Latin sentence inside an Arabic page. */

:root {
    --font-ui: "Poppins", "Cairo", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-ar: "Cairo", "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
}

body {
    font-family: var(--font-ui);
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

/* An Arabic reading of the page (the storefront's dir, a driver app, an Arabic
   span in an English page): Cairo in front for the whole subtree. --font-ui is
   flipped here as well, so anything below that asks for the UI stack gets the
   Arabic-first one — no rule of its own can bring Poppins alone back. */
[dir="rtl"],
.ar,
.ms-ar {
    font-family: var(--font-ar);
    --font-ui: var(--font-ar);
}

/* The same two stacks named on every place the owner's or the shopper's own
   text is shown, so a later restyle of one of them can never fall back to a
   face without Arabic glyphs: the product / category / store descriptions, the
   policy pages, the banners and their titles and subtitles, the coupon and
   order notes, the toasts, the footer, and every form control with its
   placeholder (a placeholder inherits the face of its own field, so it needs no
   rule of its own). The printed receipt has its own stack in the @media print
   block at the end of this file. */
.sf-prod-desc,
.sf-prod-desc-h,
.sf-prod-p,
.sf-pdesc,
.sf-catpage-title,
.sf-policy-p,
.sf-slide-t,
.sf-slide-s,
.sf-coupon,
.sf-coupon-tag,
.sf-coupon-amt,
.sf-ft,
.ms-note,
.ms-toast,
.ms-input,
.ms-select,
.ms-textarea,
.sf-search,
.sf-fprice-in,
.sf-news-input,
.sf-coupon-in,
.pos-search,
.pos-coupon-in {
    font-family: var(--font-ui);
}

.is-hidden {
    display: none !important;
}

.ms-wrap {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 16px;
}

/* The dashboard's own content column — everything under the sticky top bar,
   the sections bar and the sheets — may never grow the page sideways.
   `overflow-x: clip` clips that overflow without turning the column into a
   scroll container, so vertical scrolling, the sticky top bar above it and the
   fixed drawer/sheets inside it behave exactly as before; a browser without
   `clip` simply falls back to today's behaviour. The cap is the plain-screen
   one: 1180px on a desktop, never more than the screen on a phone. */
.ms-page .ms-wrap {
    max-width: min(1180px, 100%);
    overflow-x: clip;
}

h1,
h2,
h3,
h4 {
    margin: 0;
    line-height: 1.25;
    letter-spacing: -.01em;
}

p {
    margin: 0;
}

a {
    color: var(--link);
    text-decoration: none;
}

button {
    font-family: inherit;
}

/* ============================== buttons ================================= */

.ms-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 18px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--mute-soft);
    color: var(--ink);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.1;
    cursor: pointer;
    transition: transform .12s ease, background .15s ease, box-shadow .15s ease, opacity .15s ease;
    white-space: nowrap;
}

.ms-btn:hover {
    background: var(--btn-hover);
}

.ms-btn:active {
    transform: translateY(1px);
}

.ms-btn[disabled] {
    opacity: .55;
    cursor: default;
}

.ms-btn-primary {
    background: var(--acc-fill);
    color: #fff;
    box-shadow: 0 8px 20px rgba(var(--acc-rgb), .22);
}

.ms-btn-primary:hover {
    background: var(--acc-fill-h);
}

.ms-btn-ghost {
    background: var(--card);
    border-color: var(--line);
    color: var(--ink-2);
}

.ms-btn-ghost:hover {
    background: var(--line-2);
}

.ms-btn-danger {
    background: var(--card);
    border-color: var(--err-line);
    color: var(--err);
}

.ms-btn-danger:hover {
    background: var(--err-soft);
}

.ms-btn-sm {
    padding: 8px 14px;
    font-size: 13px;
}

.ms-btn-block {
    width: 100%;
}

/* The order panel's "Send WhatsApp to the customer": the primary colour as an
   outline, full width, so it reads as an action without competing with the
   status chips beside it. */
.ms-btn-wa {
    width: 100%;
    background: var(--card);
    border-color: var(--acc-text);
    color: var(--acc-text);
    /* the label is a whole sentence in either language: let it wrap on a phone */
    white-space: normal;
    line-height: 1.3;
    text-align: center;
}

.ms-btn-wa:hover {
    background: var(--acc-soft);
    color: var(--acc-text-strong);
    border-color: var(--acc-dark);
}

.ms-btn-wa svg {
    flex: 0 0 auto;
}

.ms-linkbtn {
    background: none;
    border: 0;
    padding: 0;
    color: var(--acc-text);
    font-size: inherit;
    font-weight: 600;
    cursor: pointer;
}

/* ============================== cards =================================== */

.ms-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--sh-sm);
    padding: 18px;
}

.ms-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.ms-card-title {
    font-size: 16px;
    font-weight: 600;
}

.ms-card-sub {
    font-size: 13px;
    color: var(--ink-3);
    margin-top: 2px;
}

.ms-sec {
    margin-top: 18px;
}

.ms-muted {
    color: var(--ink-3);
    font-size: 13px;
}

/* ============================== topbar ================================== */

.ms-topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--surf-92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
}

.ms-topbar-in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    max-width: 1180px;
    min-width: 0;
    margin: 0 auto;
    flex-wrap: wrap;
}

.ms-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    max-width: 100%;
}

.ms-mark {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 12px;
    background: linear-gradient(140deg, var(--acc-fill), #b93fc4);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 17px;
    letter-spacing: -.02em;
    box-shadow: 0 8px 18px rgba(var(--acc-rgb), .3);
}

.ms-brand-txt {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

/* The store's own name never pushes the header buttons off the screen: it
   takes what the row has (and never more than half the screen) and loses its
   tail to an ellipsis. */
.ms-brand-name {
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: min(52vw, 100%);
}

.ms-brand-sub {
    font-size: 12px;
    color: var(--ink-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: min(52vw, 100%);
}

.ms-topbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
    max-width: 100%;
}

/* A header button wraps inside itself rather than pushing the row wider. */
.ms-topbar-actions .ms-btn {
    min-width: 0;
    max-width: 100%;
    white-space: normal;
}

/* ---- the live date and time in every header ----------------------------- */
/* One shared component (MS.clock): the long form — weekday, date and the time to
   the second — and, under 720px, the short one (date and HH:MM), so a phone's
   header keeps its shape instead of being pushed apart. The box never wraps, and
   it sits in the actions row, clear of the logo and of the account buttons. */

.ms-clock {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    padding: 0 2px;
    color: var(--ink-3);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    text-align: end;
    font-variant-numeric: tabular-nums;
}

.ms-clock-long {
    display: inline;
}

.ms-clock-short {
    display: none;
}

@media (max-width: 720px) {
    .ms-clock {
        font-size: 11.5px;
    }

    .ms-clock-long {
        display: none;
    }

    .ms-clock-short {
        display: inline;
    }
}

/* the till's own header is a tighter row than the dashboards' */
.pos-clock {
    color: var(--ink-2);
    font-size: 11.5px;
}

/* ============================== page head =============================== */

.ms-page {
    padding: 18px 0 48px;
}

.ms-page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.ms-h1 {
    font-size: 22px;
    font-weight: 600;
}

.ms-lead {
    font-size: 14px;
    color: var(--ink-2);
    margin-top: 4px;
    max-width: 62ch;
}

/* ============================== KPI grid ================================ */

.ms-kpis {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.ms-kpi {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 14px;
    box-shadow: var(--sh-sm);
}

.ms-kpi-k {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.ms-kpi-v {
    font-size: 21px;
    font-weight: 600;
    margin-top: 6px;
    line-height: 1.15;
    word-break: break-word;
}

.ms-kpi-v-sm {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
}

.ms-kpi-sub {
    font-size: 12px;
    color: var(--ink-3);
    margin-top: 4px;
}

/* ============================== forms =================================== */

.ms-form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.ms-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.ms-label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-2);
}

.ms-hint {
    font-size: 12px;
    color: var(--ink-3);
}

/* ========================== star ratings ================================ */

/* Products.Rating, drawn as five inline SVG stars (MS.starsRow / MS.starSvg):
   a filled star takes the current colour — the store's accent on the storefront
   and .ms-star-btn's own accent on a dashboard — and an empty one is a light
   grey outline with no fill. The row is inline-flex, so it follows the page's
   direction: the first star is at the reading start, which is the right-hand
   side in Arabic. 14px a star, 2px between them. */
.ms-stars {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    line-height: 0;
}

.ms-star {
    display: block;
    flex: 0 0 auto;
    fill: none;
    stroke: var(--star-off);
    stroke-width: 1.7;
    stroke-linejoin: round;
}

.ms-star.is-on {
    fill: currentColor;
    stroke: currentColor;
    color: var(--acc-text);
}

/* The row as it sits on a storefront card and on the product page: one line,
   aligned to the reading start in both directions. */
.sf-pstars {
    display: flex;
    align-items: center;
    min-width: 0;
}

/* The clickable five stars of a dashboard form: one button a star, so the
   control is reachable with a keyboard and reads as a group. */
.ms-stars-input {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.ms-star-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: auto;
    padding: 3px;
    border: 0;
    border-radius: 8px;
    background: none;
    line-height: 0;
    cursor: pointer;
}

.ms-star-btn:hover {
    background: var(--acc-soft);
}

.ms-star-btn:focus-visible {
    outline: 2px solid var(--acc-line);
    outline-offset: 1px;
}

.ms-input,
.ms-select,
.ms-textarea {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--input-line);
    border-radius: var(--r-xs);
    background: var(--input-bg);
    color: var(--ink);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.4;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.ms-input:focus,
.ms-select:focus,
.ms-textarea:focus {
    outline: 0;
    border-color: var(--acc-line);
    box-shadow: 0 0 0 3px var(--acc-soft);
}

.ms-textarea {
    min-height: 88px;
    resize: vertical;
}

/* ---- the controls own their height, and a select looks like a select -----
   The framework stylesheet ships a global element rule for selects —
   `select { height: 25px; line-height: 25px; background-image: <grey arrow>;
   background-position: 100% center; padding: 0 10px; … }` — and the padding
   above is taller than 25px, so the chosen value was cut off at the top and at
   the bottom; our own `background: #fff` shorthand also wiped the arrow, which
   left a dropdown looking exactly like a text box. These rules come after both,
   so the controls grow with their text and the arrow is drawn here, in this
   design system's own ink (the focus ring, border colour and radius above are
   untouched). The compact controls of an order card are handled further down,
   after their own padding rule. */
.ms-input,
.ms-select,
.ms-textarea {
    height: auto;
}

.ms-select,
.ms-input {
    min-height: 42px;
}

.ms-select {
    /* room for the arrow, on the reading-end side of the control */
    padding-inline-end: 34px;
    background-color: var(--input-bg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%236b6472' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 11px 7px;
    background-position: right 12px center;
    -webkit-appearance: none;
    appearance: none;
}

/* Arabic: the arrow sits at the left edge, and the logical padding above keeps
   the text clear of it without a second rule. */
[dir="rtl"] .ms-select,
.rtl .ms-select {
    background-position: left 12px center;
}

.ms-input[dir="rtl"],
.ms-textarea[dir="rtl"] {
    font-family: var(--font-ar);
}

.ms-check {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    color: var(--ink-2);
    cursor: pointer;
    padding: 8px 0;
}

.ms-check input {
    width: 18px;
    height: 18px;
    accent-color: var(--acc);
    margin: 0;
}

.ms-note {
    display: none;
    font-size: 13px;
    border-radius: var(--r-xs);
    padding: 10px 12px;
    margin-top: 12px;
}

.ms-note.is-on {
    display: block;
}

.ms-note.is-err {
    background: var(--err-soft);
    color: var(--err);
}

.ms-note.is-ok {
    background: var(--ok-soft);
    color: var(--ok);
}

/* ============================== badges / pills ========================== */

.ms-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    background: var(--mute-soft);
    color: var(--ink-2);
    white-space: nowrap;
    /* never wider than the box that holds it */
    max-width: 100%;
}

.ms-badge.is-on {
    background: var(--ok-soft);
    color: var(--ok);
}

.ms-badge.is-off {
    background: var(--err-soft);
    color: var(--err);
}

.ms-badge.is-plan {
    background: var(--acc-soft);
    color: var(--acc-text);
}

.ms-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
    background: var(--mute-soft);
    color: var(--ink-2);
    max-width: 100%;
}

.ms-pill.is-new {
    background: var(--acc-soft);
    color: var(--acc-text);
}

.ms-pill.is-ok {
    background: var(--ok-soft);
    color: var(--ok);
}

.ms-pill.is-warn {
    background: var(--warn-soft);
    color: var(--warn);
}

.ms-pill.is-done {
    background: var(--done-soft);
    color: var(--done-ink);
}

.ms-pill.is-off {
    background: var(--err-soft);
    color: var(--err);
}

/* ============================== rows / lists ============================ */

.ms-rows {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    max-width: 100%;
}

.ms-row {
    display: grid;
    gap: 10px;
    padding: 12px 14px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    box-shadow: var(--sh-sm);
    min-width: 0;
    max-width: 100%;
}

.ms-row-main {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
    max-width: 100%;
}

/* The text column of a card: a long word, a chip row or a number may never
   stretch the card past the screen. */
.ms-row-main > div {
    min-width: 0;
    max-width: 100%;
}

.ms-thumb {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 10px;
    background: var(--mute-soft);
    object-fit: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--acc-text);
    font-size: 15px;
    overflow: hidden;
}

.ms-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ms-row-title {
    font-size: 14.5px;
    font-weight: 600;
    word-break: break-word;
}

.ms-row-sub {
    font-size: 12.5px;
    color: var(--ink-3);
    word-break: break-word;
}

.ms-row-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    font-size: 12.5px;
    color: var(--ink-2);
    min-width: 0;
    max-width: 100%;
}

/* One label + value of a card: it wraps with the row instead of stretching it. */
.ms-row-meta > div {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: break-word;
}

.ms-row-meta b {
    display: block;
    font-size: 11px;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ink-3);
    font-weight: 600;
}

.ms-row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
    max-width: 100%;
}

/* A row's buttons wrap and shrink with it; a long label wraps inside its own
   button instead of widening the card. */
.ms-row-actions .ms-btn {
    min-width: 0;
    max-width: 100%;
    white-space: normal;
}

.ms-row-head {
    display: none;
}

.ms-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.ms-toolbar .ms-input,
.ms-toolbar .ms-select {
    flex: 1 1 150px;
    min-width: 0;
}

.ms-empty {
    text-align: center;
    padding: 34px 18px;
    border: 1px dashed var(--line);
    border-radius: var(--r);
    background: var(--card);
    color: var(--ink-2);
}

.ms-empty-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
}

/* status / filter chips used in the dashboards */
.ms-chip {
    /* inline-block rather than plain inline, so the max-width below is real even
       where a block of chips sits outside a flex row */
    display: inline-block;
    padding: 7px 13px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--card);
    color: var(--ink-2);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    /* one absurdly long chip shortens inside its own row instead of running off
       the screen: it may never be wider than the box that holds it */
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ms-chip:hover {
    background: var(--line-2);
}

.ms-chip.is-on {
    background: var(--acc-fill);
    border-color: var(--acc-text);
    color: #fff;
    box-shadow: 0 6px 14px rgba(var(--acc-rgb), .2);
}

/* small square image preview next to an upload field */
.ms-preview {
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    border-radius: 12px;
    border: 1px dashed var(--line);
    background: var(--surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10.5px;
    line-height: 1.2;
    text-align: center;
    color: var(--ink-3);
    overflow: hidden;
}

.ms-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ms-empty-text {
    font-size: 13px;
    color: var(--ink-3);
    margin-top: 5px;
    max-width: 46ch;
    margin-inline: auto;
}

.ms-skel {
    height: 62px;
    border-radius: var(--r-sm);
    background: linear-gradient(90deg, var(--skel-a) 25%, var(--skel-b) 37%, var(--skel-a) 63%);
    background-size: 400% 100%;
    animation: ms-shimmer 1.4s ease infinite;
}

@keyframes ms-shimmer {
    0% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0 50%;
    }
}

/* ============================ section menu ============================= */
/* The store dashboard carries a dozen sections. They used to be a wrapping
   strip of pills; they are now one compact bar — the open section's name and a
   three-dot button — plus a panel that slides in from the right edge over the
   page. The platform dashboard, which still has its own two-tab strip, keeps
   the .ms-tabs / .ms-tab look at the end of this block. */

/* The bar's own box: full width, never clipping, never a fixed height. */
.ms-tabs-wrap {
    width: 100%;
    max-width: 100%;
    overflow: visible;
    height: auto;
}

.ms-tabbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-block: 6px;
    padding-inline-start: 16px;
    padding-inline-end: 6px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 22px;
    box-shadow: var(--sh-sm);
}

/* Where the owner is: a quiet label, never a button. */
.ms-tabbar-now {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink-2);
}

/* The three dots, in a row. */
.ms-tabdots {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--card);
    color: var(--acc-text);
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease, color .16s ease;
}

.ms-tabdots span {
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
}

.ms-tabdots:hover,
.ms-tabdots:focus-visible {
    background: var(--acc-soft);
    border-color: var(--acc-line);
}

.ms-tabdots[aria-expanded="true"] {
    background: var(--acc-fill);
    border-color: var(--acc-text);
    color: #fff;
}

/* The page behind the panel: a soft dark layer, gone when it is closed. */
.ms-sections-shade {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: var(--scrim-soft);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, visibility .2s ease;
}

.ms-sections-shade.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* The panel: anchored to the right edge in either direction, rounded on its
   left corners, sliding about 200ms. Closed it is off screen and untouchable. */
.ms-sections {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 91;
    width: 320px;
    max-width: 86vw;
    width: min(320px, 86vw);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    background: var(--card);
    border-radius: 22px 0 0 22px;
    box-shadow: -18px 0 48px rgba(29, 21, 32, .22);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .2s ease, visibility .2s ease;
}

.ms-sections.is-open {
    transform: translateX(0);
    visibility: visible;
}

/* The panel's head stays put while the list scrolls under it. */
.ms-sections-head {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: calc(12px + env(safe-area-inset-top, 0px)) 12px 10px 16px;
    background: var(--card);
    border-bottom: 1px solid var(--line-2);
}

.ms-sections-title {
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.ms-sections-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--card);
    color: var(--ink-2);
    cursor: pointer;
}

.ms-sections-x:hover,
.ms-sections-x:focus-visible {
    background: var(--mute-soft);
    color: var(--ink);
}

/* One section per row, in the same order as the old strip. */
.ms-sections-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: calc(100% - 16px);
    margin: 3px 8px;
    padding: 11px 12px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--ink-2);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    text-align: start;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.ms-sections-row:hover {
    background: var(--mute-soft);
    color: var(--ink);
}

/* The open section, in the store's own accent. */
.ms-sections-row.is-on {
    background: var(--acc-fill);
    color: #fff;
    box-shadow: 0 6px 16px rgba(var(--acc-rgb), .22);
}

.ms-sections-row-k {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ms-sections-row:focus-visible,
.ms-sections-x:focus-visible,
.ms-tabdots:focus-visible {
    outline: 2px solid var(--acc-text);
    outline-offset: 2px;
}

/* ---- the platform dashboard's own two-tab strip: unchanged ------------- */
.ms-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
    max-width: 100%;
    overflow: visible;
    padding: 6px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 22px;
    box-shadow: var(--sh-sm);
}

.ms-tab {
    flex: 0 0 auto;
    padding: 9px 15px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--ink-2);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.ms-tab.is-on {
    background: var(--acc-fill);
    color: #fff;
    box-shadow: 0 6px 16px rgba(var(--acc-rgb), .22);
}

/* A phone: still wrapping, with a slightly tighter pill so more fit per line. */
@media (max-width: 640px) {
    .ms-tabs {
        flex-wrap: wrap;
        padding: 6px;
    }

    .ms-tab {
        padding: 8px 12px;
        font-size: 13px;
    }
}

/* ============================== auth screen ============================ */

.ms-auth {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px 16px;
    background:
        radial-gradient(900px 420px at 50% -10%, rgba(var(--acc-rgb), .16), transparent 70%),
        var(--bg);
}

.ms-auth-card {
    width: 100%;
    max-width: 420px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 24px;
    box-shadow: var(--sh-lg);
    padding: 26px 22px 22px;
}

.ms-auth-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

.ms-auth-title {
    font-size: 21px;
    font-weight: 600;
}

.ms-auth-sub {
    font-size: 13.5px;
    color: var(--ink-2);
    margin-top: 6px;
    line-height: 1.6;
}

.ms-auth-foot {
    margin-top: 18px;
    font-size: 12px;
    color: var(--ink-3);
    text-align: center;
}

.ms-boot {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-3);
    font-size: 14px;
}

/* ======================= storefront: shell + header ===================== */

.sf {
    min-height: 100vh;
    background: var(--bg);
    padding-bottom: 96px;
    /* The sticky header is ONE compact row (logo · search · controls). Its
       height lives here so the chip row that sticks under it lines up, and
       only this number changes on wider screens. */
    --sf-head-h: 49px;
}

.sf-head {
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--card);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 6px 18px rgba(29, 21, 32, .05);
}

/* The cover sits above the sticky bar, not inside it, so the sticky bar keeps a
   fixed height on every screen and the tool row can line up right under it. */
.sf-cover {
    height: 104px;
    background: linear-gradient(120deg, var(--acc-fill), #b93fc4);
    background-size: cover;
    background-position: center;
}

/* One row, never wrapping: logo, search (where the store name used to be),
   then currency, language and cart. */
.sf-head-in {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    min-height: 54px;
    max-width: 1180px;
    margin: 0 auto;
}

.sf-logo {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 12px;
    background: var(--card);
    border: 2px solid #fff;
    box-shadow: var(--sh-sm);
    object-fit: cover;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: var(--acc-text);
}

.sf-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* The storefront header no longer prints the store name (the search field
   carries it); the tracking page still uses this title block, so it stays. */
.sf-titles {
    min-width: 0;
    flex: 1 1 auto;
}

.sf-name {
    font-size: 16px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sf-tagline {
    font-size: 12.5px;
    color: var(--ink-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sf-head-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

/* Language toggle: a normal pill. It must never be squeezed by the flex row —
   in Arabic the word is wider, so it keeps its own width and never wraps. */
.sf-lang {
    flex: 0 0 auto;
    max-width: none;
    min-width: 0;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--card);
    color: var(--ink-2);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    word-break: keep-all;
    cursor: pointer;
}

.sf-lang:hover {
    background: var(--line-2);
}

/* The button shows the other language: while the storefront is English it
   reads "العربية", so it needs the Arabic face and its taller line box. */
.sf-lang.is-ar {
    font-family: var(--font-ar);
    font-size: 13px;
    line-height: 1.5;
    letter-spacing: 0;
}

.sf-iconbtn {
    position: relative;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 50%;
    border: 0;
    background: var(--acc-soft);
    color: var(--acc-text);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sf-cart-ico {
    display: block;
    width: 18px;
    height: 18px;
}

.sf-count {
    position: absolute;
    top: -4px;
    inset-inline-end: -4px;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--acc-fill);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Only the category chips are left in this sticky row; the search moved up
   into the header. The top offset is the header's own height. */
.sf-tools {
    position: sticky;
    top: var(--sf-head-h);
    z-index: 25;
    background: var(--bg-96);
    backdrop-filter: blur(8px);
    padding: 8px 0 7px;
    border-bottom: 1px solid var(--line);
}

/* The header search and the hint that cycles over it. The wrapper is the item
   that takes the free space of the row (a bare input would keep its intrinsic
   width and overflow a 360px phone) and it is the box the hint is positioned
   in; the field itself fills it. */
.sf-searchwrap {
    position: relative;
    flex: 1 1 0%;
    min-width: 0;
}

.sf-search {
    display: block;
    width: 100%;
    height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid var(--input-line);
    background: var(--input-bg);
    font-family: inherit;
    font-size: 14px;
    line-height: normal;
    color: var(--ink);
    text-overflow: ellipsis;
    -webkit-appearance: none;
    appearance: none;
}

.sf-search::placeholder {
    color: var(--ink-3);
    opacity: 1;
}

.sf-search:focus {
    outline: 0;
    border-color: var(--acc-line);
    box-shadow: 0 0 0 3px var(--acc-soft);
}

/* The hint over the empty field: the store's own product and category names,
   faded from one to the next (see buildSearchHint in the storefront view). It
   lies over the field's text area — the same inline border and padding as
   .sf-search, so a phrase starts exactly where typed text would — in the
   placeholder's own grey, and it never takes a tap: pointer-events: none sends
   the press straight to the field. The offsets are logical, so an Arabic page
   mirrors without a rule of its own. */
.sf-search-ph {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    display: flex;
    align-items: center;
    padding-inline: 14px;
    border-inline: 1px solid transparent;
    overflow: hidden;
    pointer-events: none;
    font-family: inherit;
    font-size: 14px;
    font-weight: inherit;
    letter-spacing: normal;
    color: var(--ink-3);
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
    transition: opacity .45s ease-out, transform .45s ease-out, filter .45s ease-out;
}

/* one phrase, on one line: a name too long for a phone's field is cut with an
   ellipsis rather than wrapped over the border */
.sf-search-ph-t {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* on its way out: a short step up and a touch of blur, then the next name */
.sf-search-ph.is-out {
    opacity: 0;
    transform: translateY(-6px);
    filter: blur(2px);
    transition-duration: .35s;
}

/* away — the field has the focus, or words in it already. No transition at all,
   so a tap on the bar takes the hint out of the way as it lands. */
.sf-search-ph.is-off {
    opacity: 0;
    visibility: hidden;
    transition: none;
}

/* Motion is unwelcome: no travel and no blur, the names simply cross-fade (and
   the view holds each of them much longer, see HINT_HOLD_CALM). */
@media (prefers-reduced-motion: reduce) {
    .sf-search-ph,
    .sf-search-ph.is-out {
        transform: none;
        filter: none;
    }
}

.sf-chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 0 2px;
    scrollbar-width: none;
}

.sf-chips::-webkit-scrollbar {
    display: none;
}

.sf-chip {
    flex: 0 0 auto;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--card);
    color: var(--ink-2);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.sf-chip.is-on {
    background: var(--acc-fill);
    border-color: var(--acc-text);
    color: #fff;
    box-shadow: 0 6px 16px rgba(var(--acc-rgb), .2);
}

/* ======================= storefront: product grid ====================== */

.sf-main {
    padding-top: 14px;
}

.sf-cat-title {
    font-size: 15px;
    font-weight: 600;
    margin: 6px 0 10px;
}

.sf-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.sf-card {
    display: flex;
    flex-direction: column;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
    box-shadow: var(--sh-sm);
}

/* The picture and the name are the way to the product's own page (the "+"
   button beside them is not inside either link, so adding never navigates). */
.sf-thumb {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--line-2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-3);
    font-family: inherit;
    font-weight: 700;
    font-size: 20px;
    overflow: hidden;
    text-decoration: none;
}

.sf-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sf-off {
    position: absolute;
    top: 8px;
    inset-inline-start: 8px;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--danger-fill);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}

.sf-card-b {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 10px 11px 11px;
    flex: 1 1 auto;
}

.sf-pname {
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
}

a.sf-pname:hover {
    color: var(--acc-text);
}

/* The card's summary of the owner's description — never the whole text. Two
   lines at most, with the clamp's own ellipsis: `-webkit-line-clamp` draws the
   "…" and the `max-height` (two lines of the 1.4 line-height below) is the hard
   cap that still holds when a browser ignores the clamp, so the description can
   never turn into a wall of text, never push the price and the "+" down and
   never stretch the grid row. `overflow: hidden` clips what is left, so not one
   pixel leaves the card. The same rule serves LTR and RTL, both themes, and
   every card that prints it (the shop grid, the category page, the search
   results, the Finder's results). `overflow-wrap: break-word` is deliberately
   NOT set here: next to `display: -webkit-box` it is what stopped the clamp
   from clamping and let the full description through. The full text stays on
   the product page, untouched. */
.sf-pdesc {
    font-size: 11.5px;
    color: var(--ink-3);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    max-height: calc(1.4em * 2);
    overflow: hidden;
}

.sf-prow {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 6px;
}

.sf-price {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sf-price-v {
    font-size: 14px;
    font-weight: 700;
    color: var(--acc-text);
}

.sf-price-old {
    font-size: 11.5px;
    color: var(--ink-3);
    text-decoration: line-through;
}

.sf-add {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 50%;
    border: 0;
    background: var(--acc-fill);
    color: #fff;
    font-size: 19px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 14px rgba(var(--acc-rgb), .26);
}

.sf-qty {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    border: 1px solid var(--acc-line);
    border-radius: 999px;
    background: var(--acc-soft);
    padding: 2px;
}

.sf-qty button {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--acc-text);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    line-height: 1;
}

.sf-qty span {
    min-width: 20px;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--acc-text);
}

.sf-stock-off {
    font-size: 11px;
    font-weight: 600;
    color: var(--err);
}

/* ======================= storefront: cart + checkout =================== */

.sf-fab {
    position: fixed;
    inset-inline: 14px;
    bottom: 14px;
    z-index: 35;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 999px;
    border: 0;
    background: var(--acc-fill);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 14px 34px rgba(var(--acc-rgb), .34);
    max-width: 520px;
    margin: 0 auto;
}

.sf-fab-total {
    font-weight: 700;
}

.sf-sheet {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.sf-sheet-back {
    position: absolute;
    inset: 0;
    background: var(--scrim);
    backdrop-filter: blur(2px);
}

.sf-panel {
    position: relative;
    width: 100%;
    max-width: 560px;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    background: var(--card);
    border-radius: 22px 22px 0 0;
    box-shadow: var(--sh-lg);
    overflow: hidden;
}

.sf-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
}

.sf-panel-title {
    font-size: 16px;
    font-weight: 600;
}

.sf-panel-body {
    padding: 14px 16px;
    overflow-y: auto;
    flex: 1 1 auto;
}

.sf-panel-foot {
    padding: 12px 16px 16px;
    border-top: 1px solid var(--line);
    background: var(--card);
}

.sf-close {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--card);
    color: var(--ink-2);
    font-size: 17px;
    cursor: pointer;
    line-height: 1;
}

.sf-line {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line-2);
}

.sf-line-img {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    border-radius: 10px;
    background: var(--line-2);
    object-fit: cover;
    overflow: hidden;
}

.sf-line-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sf-line-txt {
    flex: 1 1 auto;
    min-width: 0;
}

.sf-line-name {
    font-size: 13.5px;
    font-weight: 600;
}

.sf-line-price {
    font-size: 12px;
    color: var(--ink-3);
}

.sf-sum {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13.5px;
    color: var(--ink-2);
    padding: 3px 0;
}

.sf-sum-total {
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
    border-top: 1px dashed var(--line);
    margin-top: 6px;
    padding-top: 10px;
}

.sf-seg {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 4px;
    background: var(--line-2);
    border-radius: 999px;
    margin-bottom: 12px;
}

.sf-seg button {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 0;
    padding: 9px 8px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--ink-2);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.sf-seg button.is-on {
    background: var(--card);
    color: var(--acc-text);
    box-shadow: var(--sh-sm);
}

/* ---- Whish Money at the checkout ---------------------------------------- */
/* The method's own little badge, in the store's accent, and the block it opens:
   the amount due, the store's own account (only the details it really has), how
   to pay it and the transfer reference. Every colour is a token, so the dark
   reading keeps its own ink and its own tint. */
.sf-payico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    border-radius: 50%;
    background: var(--acc-soft);
    color: var(--acc-text);
}

.sf-payico svg {
    display: block;
}

.sf-whish {
    margin-top: 2px;
    padding: 11px 13px 12px;
    border: 1px solid var(--acc-line);
    border-radius: var(--r-xs);
    background: var(--acc-soft);
}

.sf-whish-amt {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-2);
}

.sf-whish-amt b {
    font-size: 15px;
    font-weight: 700;
    color: var(--acc-text);
}

.sf-whish-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-top: 5px;
    font-size: 12.5px;
    color: var(--ink-2);
}

.sf-whish-row b {
    font-weight: 600;
    color: var(--ink);
    text-align: end;
    overflow-wrap: anywhere;
}

.sf-whish-note {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--ink-2);
}

.sf-whish-field {
    margin-top: 10px;
}

/* On a phone's narrow panel the fourth choice takes a row of its own, so every
   label stays on one line and nothing is squeezed. */
@media (max-width: 520px) {
    .sf-seg .sf-pay-whish {
        flex: 1 1 100%;
    }
}

/* ---- the delivery areas at checkout (/api/zones.php) ---- */
/* One pill per area, two to a row on a phone and more when there is room; the
   name on the first line and the fee (with the trip time) under it. */
.sf-zones {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
}

.sf-zone {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--r-xs);
    background: var(--card);
    color: var(--ink);
    font-family: inherit;
    text-align: start;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.sf-zone:hover {
    background: var(--line-2);
}

.sf-zone.is-on {
    border-color: var(--acc-text);
    background: var(--acc-soft);
    box-shadow: 0 0 0 3px var(--acc-soft);
}

.sf-zone-n {
    font-size: 13.5px;
    font-weight: 600;
    word-break: break-word;
}

.sf-zone.is-on .sf-zone-n {
    color: var(--acc-text);
}

.sf-zone-m {
    font-size: 12px;
    color: var(--ink-3);
    word-break: break-word;
}

/* ---- the coupon, in the cart and at the checkout ---- */
/* One field and one Apply button, then the code it accepted with the amount it
   took off. The amount is the server's own figure (see applyCoupon). */
.sf-coupon {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--line-2);
}

.sf-coupon-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sf-coupon-in {
    flex: 1 1 auto;
    min-width: 0;
    text-transform: uppercase;
}

.sf-coupon-btn {
    flex: 0 0 auto;
    height: 40px;
    padding: 0 16px;
    border: 1px solid var(--acc-line);
    border-radius: var(--r-xs);
    background: var(--acc-soft);
    color: var(--acc-text);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.sf-coupon-btn:hover {
    background: var(--acc-line);
}

.sf-coupon-on {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 8px 10px;
    border: 1px dashed var(--acc-line);
    border-radius: var(--r-xs);
    background: var(--acc-soft);
}

.sf-coupon-tag {
    font-size: 13px;
    font-weight: 700;
    color: var(--acc-text);
    letter-spacing: .03em;
    word-break: break-all;
}

.sf-coupon-amt {
    margin-inline-start: auto;
    font-size: 13px;
    font-weight: 700;
    color: var(--ok);
}

.sf-coupon-x {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 50%;
    background: var(--card);
    color: var(--ink-3);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

.sf-coupon-x:hover {
    color: var(--err);
}

.sf-sum-disc {
    color: var(--ok);
    font-weight: 600;
}

.sf-line-opt {
    font-size: 12px;
    color: var(--acc-text);
    font-weight: 600;
}

.sf-done-disc {
    color: var(--ok);
    font-weight: 600;
}

.sf-done {
    text-align: center;
    padding: 16px 4px 4px;
}

.sf-done-mark {
    width: 62px;
    height: 62px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: var(--ok-soft);
    color: var(--ok);
    font-size: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sf-done-no {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: .02em;
    margin: 4px 0;
}

/* the Whish Money order's transfer reference, handed back to the shopper */
.sf-done-ref {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-2);
    overflow-wrap: anywhere;
}

.sf-empty-cart {
    text-align: center;
    color: var(--ink-3);
    font-size: 13.5px;
    padding: 26px 10px;
}

/* ============================== tracking =============================== */

.sf-track {
    max-width: 560px;
    margin: 0 auto;
    padding: 22px 16px 40px;
}

.sf-steps {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 14px;
}

.sf-step {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding-bottom: 14px;
    position: relative;
}

.sf-step-dot {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    border-radius: 50%;
    background: var(--line);
    margin-top: 3px;
}

.sf-step.is-done .sf-step-dot {
    background: var(--acc-fill);
    box-shadow: 0 0 0 4px var(--acc-soft);
}

.sf-step.is-now .sf-step-dot {
    background: var(--acc-fill);
    box-shadow: 0 0 0 5px var(--acc-soft);
}

.sf-step-t {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink-3);
}

.sf-step.is-done .sf-step-t,
.sf-step.is-now .sf-step-t {
    color: var(--ink);
}

/* ============================== custom domains ========================== */

.ms-dom-state {
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface-2);
}

.ms-dom-name {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.ms-dom-domain {
    font-size: 15px;
    font-weight: 600;
    word-break: break-all;
}

.ms-dom-how {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

.ms-dom-group {
    margin-top: 14px;
}

.ms-dns {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}

.ms-dns-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: var(--r-xs);
    background: var(--card);
}

.ms-dns-type {
    flex: 0 0 auto;
    padding: 3px 7px;
    border-radius: 6px;
    background: var(--acc-soft);
    color: var(--acc-text);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.ms-dns-host {
    flex: 0 0 auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
    color: var(--ink-3);
}

.ms-dns-v {
    flex: 1 1 140px;
    min-width: 0;
    padding: 5px 8px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface-2);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
    color: var(--ink);
    word-break: break-all;
    direction: ltr;
    text-align: left;
}

.ms-dns-copy {
    flex: 0 0 auto;
    padding: 5px 11px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--card);
    color: var(--ink-2);
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
}

.ms-dns-copy:hover {
    background: var(--line-2);
}

.ms-dom-steps {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 14px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink-2);
}

.ms-dom-step {
    display: flex;
    align-items: flex-start;
    gap: 9px;
}

.ms-dom-step-n {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    border-radius: 999px;
    background: var(--acc-soft);
    color: var(--acc-text);
    font-size: 11.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ============================== small print ============================ */

.ms-foot {
    text-align: center;
    font-size: 12px;
    color: var(--ink-3);
    padding: 22px 16px 34px;
}

.ms-foot a {
    color: var(--ink-2);
}

/* The last line of the dashboard, clear of the iPhone's bottom bar: the fixed
   bottom padding above is replaced by the screen's own safe area plus 16px, so
   the line never sits under the bar. */
.ms-foot {
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}

/* ============================== desktop ================================ */

@media (min-width: 720px) {
    .ms-wrap {
        padding: 0 24px;
    }

    .ms-kpis {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
    }

    .ms-kpi {
        padding: 16px 18px;
    }

    .ms-kpi-v {
        font-size: 24px;
    }

    .ms-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ms-form-grid .ms-span2 {
        grid-column: span 2;
    }

    .ms-h1 {
        font-size: 26px;
    }

    .ms-row {
        grid-template-columns: 2.2fr 1fr 1fr auto;
        align-items: center;
        gap: 14px;
    }

    .ms-row-head {
        display: grid;
        padding: 0 14px;
        font-size: 11px;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--ink-3);
        font-weight: 600;
    }

    .ms-row-head span {
        display: block;
    }

    .sf-cover {
        height: 176px;
    }

    .sf-head-in {
        padding: 8px 20px;
        gap: 12px;
        min-height: 64px;
    }

    .sf-logo {
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
        border-radius: 13px;
        font-size: 15px;
    }

    .sf-name {
        font-size: 17px;
    }

    /* Wide screens: the search stops growing at 420px and centres itself in
       the space the store name used to fill (the hint follows the field, since
       it is positioned in the same wrapper). */
    .sf-searchwrap {
        max-width: 420px;
        margin-inline: auto;
    }

    .sf-search {
        height: 38px;
        padding: 0 16px;
    }

    .sf-search-ph {
        padding-inline: 16px;
    }

    .sf-iconbtn {
        width: 36px;
        height: 36px;
        flex: 0 0 36px;
    }

    .sf {
        --sf-head-h: 57px;
    }

    .sf-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }

    .sf-fab {
        display: none;
    }

    .sf-sheet {
        align-items: stretch;
        justify-content: flex-end;
    }

    .sf-panel {
        max-width: 420px;
        max-height: 100vh;
        height: 100%;
        border-radius: 22px 0 0 22px;
    }

    .ms-auth-card {
        padding: 30px 28px 26px;
    }
}

@media (min-width: 1040px) {
    .ms-kpis {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .ms-kpi-v {
        font-size: 22px;
    }

    .sf-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 16px;
    }

    .sf-cover {
        height: 224px;
    }
}

/* Right-to-left: the framework ships RTL-first utilities, so flip only what
   the layout itself assumes. */
[dir="rtl"] .sf-price,
[dir="rtl"] .sf-line-txt {
    text-align: right;
}

[dir="rtl"] .ms-pill,
[dir="rtl"] .ms-badge {
    direction: rtl;
}

/* ====================== storefront: currency switcher =================== */

/* Sits in the header next to the language pill: a small segmented control,
   only for the currencies this store actually offers. */
.sf-cur {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--line-2);
}

.sf-curbtn {
    border: 0;
    border-radius: 999px;
    padding: 5px 6px;
    background: transparent;
    color: var(--ink-3);
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .02em;
    white-space: nowrap;
    cursor: pointer;
}

/* On the narrowest phones every control gives back a few pixels, so the search
   field keeps enough width to stay usable at 360px. */
@media (max-width: 419px) {
    .sf-head-actions {
        gap: 4px;
    }

    .sf-curbtn {
        padding: 5px 5px;
        font-size: 10px;
    }

    .sf-lang {
        padding: 7px 9px;
        font-size: 12px;
    }

    .sf-lang.is-ar {
        font-size: 12.5px;
    }
}

[dir="rtl"] .sf-curbtn {
    letter-spacing: 0;
}

.sf-curbtn:hover {
    color: var(--ink-2);
}

.sf-curbtn.is-on {
    background: var(--card);
    color: var(--acc-text);
    box-shadow: var(--sh-sm);
}

/* ---------------- phones: one compact currency pill + menu --------------- */
/* From 640px down the three pills would eat the header row, so they fold into
   a single pill showing the current code. Wide screens never see it. */

.sf-cur-m {
    position: relative;
    display: none;
    align-items: center;
    flex: 0 0 auto;
}

.sf-cur-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    height: 30px;
    padding: 0 9px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--line-2);
    color: var(--acc-text);
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .02em;
    white-space: nowrap;
    cursor: pointer;
}

.sf-cur-chev {
    display: block;
    flex: 0 0 auto;
    opacity: .7;
}

/* The menu drops straight below the pill — so it always opens under the
   sticky header — and grows towards the middle of the screen: aligned to the
   pill's inline end and capped at the viewport, it can never leave it. */
.sf-cur-menu {
    position: absolute;
    top: calc(100% + 10px);
    inset-inline-end: 0;
    z-index: 40;
    min-width: 96px;
    max-width: calc(100vw - 24px);
    padding: 5px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--sh);
}

.sf-cur-opt {
    border: 0;
    border-radius: 9px;
    padding: 9px 10px;
    background: transparent;
    color: var(--ink-2);
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .02em;
    text-align: start;
    white-space: nowrap;
    cursor: pointer;
}

.sf-cur-opt:hover {
    background: var(--line-2);
}

/* The currency in use: accent tint plus a tick. */
.sf-cur-opt.is-on {
    background: var(--acc-soft);
    color: var(--acc-text);
}

.sf-cur-opt.is-on::after {
    content: "✓";
    margin-inline-start: 6px;
    font-size: 10px;
}

.sf-cur-pill:focus-visible,
.sf-cur-opt:focus-visible {
    outline: 0;
    border-color: var(--acc-line);
    box-shadow: 0 0 0 3px var(--acc-soft);
}

@media (max-width: 640px) {
    /* Only the storefront's own pills fold away; the tracking page keeps its
       switcher, so the rule is scoped to .sf-cur-pills. */
    .sf-cur-pills {
        display: none;
    }

    .sf-cur-m {
        display: inline-flex;
    }
}

/* "Prices shown in X · charged in Y" — under the total, in the cart, in the
   checkout summary and on the confirmation. */
.sf-chargenote {
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--ink-3);
    margin-top: 6px;
}

/* ===================== storefront: footer (reference style) ============= */
/* A full-width, very light grey band on every store page: the store's own
   categories as columns of links, then the social circles, then the payment
   chips and the legal line. The accent is the store's own AccentColor. */

.sf-ft {
    width: 100%;
    /* the storefront shell keeps 96px below for the floating cart bar: the band
       reaches the bottom of the page instead of leaving a strip under it */
    margin-bottom: -96px;
    background: var(--ft-bg);
    color: var(--ft-ink);
    font-size: 13.5px;
    line-height: 24px;
}

.sf-ft-in {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 28px 16px 20px;
}

/* ---- top: the link columns ---- */
.sf-ft-cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 16px;
}

.sf-ft-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
}

.sf-ft-h {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ft-ink);
    line-height: 22px;
}

.sf-ft-a {
    font-size: 13.5px;
    line-height: 24px;
    color: var(--ft-ink);
    text-decoration: none;
    max-width: 100%;
    word-break: break-word;
}

.sf-ft-a:hover {
    text-decoration: underline;
}

/* the address and the hours: a small line under the columns */
.sf-ft-meta {
    margin-top: 22px;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--ft-ink-2);
    text-align: center;
}

/* ---- middle: the contact lines and the social circles on one row ---- */
/* One row with two ends: the store's own email and WhatsApp number on the
   reading start (the left in English, the right in Arabic) and the "Connect
   with us" heading with its circles on the reading end. Nothing is centred, and
   the ends mirror with the page's direction. */
.sf-ft-connect {
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px 24px;
}

/* Stores.Email and Stores.WhatsApp, one small icon + text line each. */
.sf-ft-contact {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
    max-width: 100%;
}

.sf-ft-contact-a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 100%;
    font-size: 12.5px;
    line-height: 20px;
    color: var(--ft-ink);
    text-decoration: none;
}

.sf-ft-contact-a svg {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
}

/* a long address wraps inside the row rather than pushing the circles out */
.sf-ft-contact-t {
    min-width: 0;
    overflow-wrap: anywhere;
}

.sf-ft-contact-a:hover {
    text-decoration: underline;
}

.sf-ft-contact-a:focus-visible {
    outline: 2px solid var(--acc-text);
    outline-offset: 2px;
    border-radius: 4px;
}

/* the circles stay the smallest thing on the row: 28px each, 8px apart (about
   18% smaller than the 34px / 10px they used to be) and still a full tap. */
.sf-ft-soc-wrap {
    text-align: end;
}

.sf-ft-soc-h {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ft-ink);
}

.sf-ft-socials {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
}

.sf-ft-soc {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border-radius: 50%;
    background: var(--acc-fill);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background .15s ease;
}

.sf-ft-soc svg {
    width: 15px;
    height: 15px;
}

.sf-ft-soc:hover {
    background: var(--acc-fill-h);
}

.sf-ft-soc:focus-visible {
    outline: 2px solid var(--acc-text);
    outline-offset: 2px;
}

/* ---- bottom bar ---- */
.sf-ft-bar {
    margin-top: 26px;
    padding: 14px 0 18px;
    border-top: 1px solid var(--ft-line);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    font-size: 12px;
    color: var(--ft-ink-3);
}

.sf-ft-copy {
    font-size: 12px;
    line-height: 1.6;
}

/* The payment-methods strip: one white picture of the four tiles the store
   takes (cash, Visa, Mastercard, Western Union), centred in the bottom bar
   between the copyright line and the small links. The height is the only size
   set, so the whole strip always shows, never cropped and never stretched. */
.sf-ft-pays {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 2px 0;
    max-width: 100%;
    min-width: 0;
}

.sf-ft-pay-img {
    display: block;
    height: 22px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

.sf-ft-bar-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}

.sf-ft-bar-a {
    font-size: 12.5px;
    line-height: 18px;
    color: var(--ft-ink);
    text-decoration: none;
}

.sf-ft-bar-a:hover {
    text-decoration: underline;
}

/* Arabic has no uppercase, and wide letter-spacing breaks the words there. */
[dir="rtl"] .sf-ft-h,
[dir="rtl"] .sf-ft-soc-h {
    font-size: 12.5px;
    letter-spacing: 0;
    text-transform: none;
}

@media (min-width: 720px) {
    .sf-ft-in {
        padding: 48px 24px 28px;
    }

    /* The columns spread across the band instead of hugging its left edge: as
       many 160px columns as fit — never more than the six the model can make
       (five category columns, the store column and the policies column) — capped
       at 1120px and centred, so one or two columns still fill the width and a
       lone column keeps the same left rhythm as the others. */
    .sf-ft-cols {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: 24px 28px;
        max-width: 1120px;
        margin: 0 auto;
    }

    .sf-ft-bar {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: 14px;
        text-align: start;
    }

    /* one row: copyright on the reading start, the strip in the middle, the
       links on the reading end — the strip a little taller than on a phone */
    .sf-ft-pay-img {
        height: 26px;
    }

    .sf-ft-bar-links {
        justify-content: flex-end;
    }
}

@media (max-width: 719px) {
    /* On a phone the two ends stack: the contact lines first, still on the
       reading start, and the circles right under them, still on the reading
       end — the same row block, nothing pushed off the edge. */
    .sf-ft-connect {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }

    /* On a phone the bar is a column (see .sf-ft-bar above), so the payment
       strip already sits on its own line under the copyright text and the
       links keep their own line under it — under 420px included, where it is
       never squeezed below its 22px height. */
    /* On a phone the floating cart bar sits over the bottom of the screen: the
       footer's own lines keep clear of it while the grey band still reaches the
       bottom edge of the page. */
    .sf-ft-in {
        padding-bottom: 76px;
    }
}

/* ---- the floating shortcuts (bottom right) ---- */
/* 40px white squares, stacked 8px apart, on screen at all times — the page is
   never at rest without them. On a phone they sit above the floating cart bar,
   so the bar can never cover them. */

.sf-fabs {
    position: fixed;
    inset-inline-end: 14px;
    bottom: 84px;              /* lifted clear of the floating cart bar on a phone */
    z-index: 36;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sf-fabx {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--card);
    color: var(--ft-ink);
    box-shadow: 0 4px 14px rgba(29, 21, 32, .10);
    cursor: pointer;
    text-decoration: none;
}

.sf-fabx:hover {
    background: var(--acc-soft);
    border-color: var(--acc-line);
    color: var(--acc-text);
}

.sf-fabx:focus-visible {
    outline: 2px solid var(--acc-text);
    outline-offset: 2px;
}

@media (min-width: 720px) {
    /* the cart bar is hidden from 720px up: the shortcuts sit nearer the edge */
    .sf-fabs {
        bottom: 24px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .sf-ft-soc {
        transition: none;
    }
}

/* ====================== storefront: poster slider ======================= */

/* The store owner's posters (Banners), a rounded card directly under the
   category chips. Phones get a 16:10 card, desktops a wide 2.4:1 poster with a
   cap of 380px so it never eats the whole screen. Slides fade over each other,
   so every one of them fills the same box and nothing jumps. */
.sf-slider {
    position: relative;
    width: 100%;
    max-width: 100%;
    border-radius: var(--r);
    overflow: hidden;
    background: var(--line-2);
    box-shadow: var(--sh-sm);
    isolation: isolate;
}

.sf-slides {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.sf-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    /* visibility flips only once the fade is done, so the slide is neither
       clickable nor in the tab order while it is hidden */
    transition: opacity .45s ease, visibility 0s linear .45s;
}

.sf-slide.is-on {
    opacity: 1;
    visibility: visible;
    z-index: 1;
    transition: opacity .45s ease, visibility 0s;
}

.sf-slide-img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* No picture: a gradient taken from the store's AccentColor, never a broken
   image box. */
.sf-slide-grad {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
            rgb(var(--acc-rgb)) 0%,
            rgba(var(--acc-rgb), .72) 58%,
            rgba(var(--acc-rgb), .38) 100%);
}

/* A soft dark gradient, so white text stays readable on any photo. */
.sf-slide-ov {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: stretch;
    padding: 16px 16px 30px;
    text-align: start;
    background: linear-gradient(to top,
            rgba(12, 6, 15, .82) 0%,
            rgba(12, 6, 15, .44) 46%,
            rgba(12, 6, 15, 0) 80%);
}

/* Heading, subtitle and button are one block, pinned to the inline start —
   left in LTR, right in RTL — on a phone and on the desktop alike. Each line
   hugs its text, so no inherited text-align can drag one of them to the
   middle while the others stay at the start. */
.sf-slider .sf-slide-in {
    align-self: flex-start;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    text-align: start;
}

.sf-slider .sf-slide-t {
    max-width: 100%;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.01em;
    word-break: break-word;
    text-align: start;
    text-shadow: 0 1px 10px rgba(0, 0, 0, .35);
}

.sf-slider .sf-slide-s {
    max-width: 100%;
    color: rgba(255, 255, 255, .92);
    font-size: 13px;
    line-height: 1.45;
    word-break: break-word;
    text-align: start;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .35);
}

/* The slide's button: the same accent CTA as the rest of the storefront, and
   directly under the text, on the same side. */
.sf-slider .sf-slide-btn {
    align-self: flex-start;
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 22px;
    border-radius: 999px;
    background: var(--acc-fill);
    color: #fff;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.1;
    text-align: center;
    white-space: normal;
    text-decoration: none;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .28);
}

.sf-slider .sf-slide-btn:hover {
    background: var(--acc-fill-h);
    color: #fff;
}

/* Dots sit in the overlay's reserved bottom padding, clear of the button. */
.sf-sl-dots {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 9px;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.sf-sl-dot {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .55);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .16);
    cursor: pointer;
    transition: width .2s ease, background .2s ease;
}

.sf-sl-dot.is-on {
    width: 20px;
    background: var(--card);
}

/* The arrows and the dots both live in the card; the wrapper only groups them. */
.sf-sl-nav {
    display: contents;
}

.sf-sl-arrow {
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .92);
    color: var(--ink);
    box-shadow: var(--sh);
    cursor: pointer;
}

.sf-sl-arrow:hover {
    background: var(--card);
    color: var(--acc-text);
}

.sf-sl-arrow.is-prev {
    left: 12px;
}

.sf-sl-arrow.is-next {
    right: 12px;
}

[dir="rtl"] .sf-sl-arrow.is-prev {
    left: auto;
    right: 12px;
}

[dir="rtl"] .sf-sl-arrow.is-next {
    right: auto;
    left: 12px;
}

[dir="rtl"] .sf-sl-arrow svg {
    transform: scaleX(-1);
}

@media (min-width: 720px) {
    .sf-slides {
        aspect-ratio: 2.4 / 1;
        max-height: 380px;
    }

    .sf-sl-arrow {
        display: flex;
    }

    .sf-slide-ov {
        padding: 26px 26px 40px;
    }

    /* A comfortable measure on a wide poster; on a phone the block keeps the
       full width minus the overlay padding. */
    .sf-slider .sf-slide-in {
        max-width: 60%;
        gap: 10px;
    }

    .sf-slider .sf-slide-t {
        font-size: 24px;
    }

    .sf-slider .sf-slide-s {
        font-size: 15px;
    }
}

@media (prefers-reduced-motion: reduce) {
    /* Reduced motion drops the cross-fade only: the posters still advance on
       their own (the timer lives in storefront.view), they just switch
       instantly. The active slide needs its own rule, because
       .sf-slide.is-on sets a transition and outranks .sf-slide. */
    .sf-slide,
    .sf-slide.is-on {
        transition: none;
    }

    .sf-sl-dot {
        transition: none;
    }
}

/* =================== dashboard: banner tab helpers ===================== */

/* A poster is wide, so its thumbnail and its upload preview keep an
   approximate 2.4:1 shape instead of the square product thumb. */
.ms-thumb.is-wide {
    width: 62px;
    flex: 0 0 62px;
}

.ms-preview-wide {
    width: 118px;
    height: 49px;
    flex: 0 0 118px;
    border-radius: 10px;
}

/* ============== storefront: header → chips → poster spacing ============ */

/* The chip row is one slim, horizontally scrolling line, and the poster sits
   right under the header: 4px between the bar and the chips and 2px between
   the chips and the poster (6px in total), 2px + 2px on a phone (4px). The
   slider keeps its own rounded card with no padding or margin above it, so
   the same rhythm holds on a phone, on a desktop and in RTL. */
.sf-tools {
    padding: 4px 0 2px;
    border-bottom: 0;
}

.sf-main {
    padding-top: 2px;
}

.sf-chips {
    gap: 6px;
    padding: 0 1px;
    align-items: center;
}

.sf-chip {
    padding: 4px 11px;
    font-size: 12px;
    line-height: 1.35;
}

@media (max-width: 640px) {
    .sf-tools {
        padding: 2px 0;
    }

    .sf-main {
        padding-top: 2px;
    }
}

/* ============ storefront: home covers + viral items ==================== */

/* The home (nothing picked, nothing typed) puts the category covers where the
   product list used to be; the products come back under a chip or a search. */
.sf-cats {
    margin-top: 14px;
}

.sf-cats-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.sf-cats-title,
.sf-viral-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -.01em;
}

.sf-cat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

/* One cover: the picture fills the tile, cropped — never stretched. The name
   sits on a soft dark gradient so white text stays readable on any photo. */
.sf-cat-tile {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    aspect-ratio: 1 / 1;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    overflow: hidden;
    background: linear-gradient(135deg,
            rgb(var(--acc-rgb)) 0%,
            rgba(var(--acc-rgb), .72) 60%,
            rgba(var(--acc-rgb), .45) 100%);
    box-shadow: var(--sh-sm);
    cursor: pointer;
    text-align: start;
    isolation: isolate;
}

.sf-cat-img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* No cover (or a picture that fails to load): the store's accent colour and
   the initials — never a broken image and never an empty box. */
.sf-cat-fill {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, .94);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: .02em;
}

.sf-cat-ov {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 24px 9px 8px;
    text-align: start;
    background: linear-gradient(to top,
            rgba(12, 6, 15, .84) 0%,
            rgba(12, 6, 15, .46) 55%,
            rgba(12, 6, 15, 0) 100%);
}

.sf-cat-name {
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.25;
    color: #fff;
    word-break: break-word;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .35);
}

.sf-cat-count {
    font-size: 10.5px;
    font-weight: 500;
    color: rgba(255, 255, 255, .86);
}

/* The way back from a filter to the covers. */
.sf-allcats {
    margin-top: 12px;
}

.sf-allcats-btn {
    padding: 6px 13px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--card);
    color: var(--acc-text);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
}

.sf-allcats-btn:hover {
    background: var(--acc-soft);
    border-color: var(--acc-line);
}

/* ---- viral items: heading, one explanation line, then the cards ---- */

.sf-viral {
    margin-top: 20px;
}

.sf-viral-expl {
    margin-top: 4px;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--ink-2);
}

.sf-viral-note {
    margin-top: 3px;
    font-size: 11px;
    color: var(--ink-3);
}

.sf-vgrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 10px;
}

.sf-vskel {
    aspect-ratio: 1 / 1;
    height: auto;
    border-radius: var(--r);
}

.sf-vcard {
    display: flex;
    flex-direction: column;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
    box-shadow: var(--sh-sm);
}

.sf-vthumb {
    position: relative;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: linear-gradient(135deg,
            rgb(var(--acc-rgb)) 0%,
            rgba(var(--acc-rgb), .72) 60%,
            rgba(var(--acc-rgb), .45) 100%);
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    text-decoration: none;
}

.sf-vthumb img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sf-vbody {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 auto;
    padding: 9px 10px 10px;
}

.sf-vname {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
}

a.sf-vname:hover {
    color: var(--acc-text);
}

.sf-vrow {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding-top: 4px;
}

.sf-vcard .sf-price-v {
    font-size: 13px;
}

.sf-vcard .sf-add {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    font-size: 17px;
}

.sf-vcard .sf-qty button {
    width: 24px;
    height: 24px;
    font-size: 15px;
}

.sf-vcard .sf-qty span {
    min-width: 16px;
    font-size: 12px;
}

.sf-vshare {
    font-size: 11px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--acc-text);
}

@media (min-width: 720px) {
    .sf-cat-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
    }

    .sf-cat-tile {
        aspect-ratio: 4 / 3;
    }

    .sf-cat-name {
        font-size: 13.5px;
    }

    .sf-cat-count {
        font-size: 11px;
    }

    .sf-cat-ov {
        padding: 26px 11px 9px;
    }

    .sf-vgrid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
    }
}

@media (min-width: 1040px) {
    .sf-cat-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 12px;
    }

    .sf-vgrid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

/* ============== dashboard: category cover picker ====================== */

/* The cover preview sits next to its file input, with a small X that clears
   the picture again (the row is only saved on "Save category"). */
.ms-cover-pick {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.ms-cover-box {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
}

.ms-preview-cover {
    width: 74px;
    height: 56px;
    flex: 0 0 74px;
    border-radius: 10px;
}

.ms-x {
    position: absolute;
    top: -7px;
    inset-inline-end: -7px;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--danger-fill);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--sh-sm);
}

.ms-x:hover {
    background: var(--danger-fill-h);
}

.ms-cover-pick .ms-input {
    flex: 1 1 190px;
    min-width: 0;
}

/* A small square of the cover in the categories list, so a missing picture is
   visible at a glance. */
.ms-thumb.is-cover {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    border-radius: 11px;
}

/* ============== storefront: our brands strip + service bar ============= */

/* The brands strip sits right under the Viral items. One brand is a single
   static card; two or more become a track that slides on its own — the list is
   rendered twice, so the loop has no seam and never jumps. Like the poster
   slider it is NOT stopped by prefers-reduced-motion: it only pauses under the
   pointer, or under a finger (the view adds .is-held while it is touched). */
.sf-brands {
    margin-top: 20px;
}

.sf-brands-head {
    margin-bottom: 10px;
}

.sf-brands-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -.01em;
}

.sf-brands-sub {
    margin-top: 3px;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--ink-2);
}

.sf-brands-skel {
    display: flex;
    gap: 10px;
    overflow: hidden;
}

.sf-brand-skel {
    width: 104px;
    height: 58px;
    flex: 0 0 104px;
    border-radius: 14px;
}

/* The window the cards travel through. */
.sf-brand-strip {
    overflow: hidden;
}

.sf-brand-track {
    display: flex;
    width: max-content;
    animation: sf-brand-ltr 35s linear infinite;
}

/* Right to left in Arabic: the same track, mirrored. */
[dir="rtl"] .sf-brand-track {
    animation-name: sf-brand-rtl;
}

/* A single brand (or none): no motion at all, the card just sits there. */
.sf-brand-track.is-static {
    width: 100%;
    justify-content: center;
    animation: none;
}

/* Half the track is exactly one copy of the list: the card gap lives on the
   cards themselves (margin-inline-end), so the seam has the same gap as the
   rest and the loop restarts invisibly. */
@keyframes sf-brand-ltr {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

@keyframes sf-brand-rtl {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(50%);
    }
}

/* A mouse resting on the strip holds it. Only on devices that really hover, so
   a tap on a phone never leaves it stuck. */
@media (hover: hover) {
    .sf-brand-strip:hover .sf-brand-track {
        animation-play-state: paused;
    }
}

.sf-brand-strip.is-held .sf-brand-track {
    animation-play-state: paused;
}

/* One white card with the logo and 10px of air around it. The accent gradient
   and the initials sit in the same box underneath, so a brand without a picture
   — or with a picture that fails to load — still shows a card, never a broken
   image. */
.sf-brand-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 104px;
    height: 58px;
    flex: 0 0 auto;
    margin-inline-end: 10px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--card);
    box-shadow: var(--sh-sm);
    overflow: hidden;
}

.sf-brand-fill {
    position: absolute;
    inset: 10px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg,
            rgb(var(--acc-rgb)) 0%,
            rgba(var(--acc-rgb), .72) 60%,
            rgba(var(--acc-rgb), .45) 100%);
    color: rgba(255, 255, 255, .94);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .04em;
}

.sf-brand-img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: var(--card);
}

/* The service bar: a full-bleed strip in the store's own colour, edge to edge,
   no rounded card and no side margin. Its ink is set by the view — white, or
   dark when the accent is too light for white to read. */
.sf-svc {
    margin-top: 18px;
    background: var(--acc-fill);
    color: var(--sf-svc-ink, rgba(255, 255, 255, .9));
}

.sf-svc-in {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 16px;
    max-width: 1180px;
    margin: 0 auto;
    padding: 13px 16px;
    text-align: center;
}

.sf-svc-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    max-width: 100%;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.35;
    color: inherit;
}

.sf-svc-ico {
    display: block;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
}

@media (min-width: 720px) {

    .sf-brand-card,
    .sf-brand-skel {
        width: 132px;
        height: 72px;
        flex: 0 0 132px;
        border-radius: 16px;
    }

    .sf-brand-card {
        margin-inline-end: 12px;
    }

    .sf-brand-fill {
        font-size: 17px;
    }

    .sf-brands-sub {
        font-size: 13px;
    }

    .sf-svc-in {
        justify-content: space-evenly;
        padding: 15px 24px;
    }

    .sf-svc-item {
        font-size: 13px;
    }
}

@media (min-width: 1024px) {

    /* One row on a desktop, the five items evenly spaced and centred. */
    .sf-svc-in {
        flex-wrap: nowrap;
    }
}

/* ============== dashboard: brands tab helpers ========================== */

.ms-note.is-warn {
    background: var(--warn-soft);
    color: var(--warn);
}

/* A brand card is wide and the logos are transparent, so the thumbnail and the
   upload preview contain the picture instead of cropping it. */
.ms-thumb.is-brand {
    width: 64px;
    height: 44px;
    flex: 0 0 64px;
    background: var(--card);
    border: 1px solid var(--line);
}

.ms-thumb.is-brand img {
    object-fit: contain;
    padding: 4px;
}

.ms-preview-brand {
    width: 106px;
    height: 58px;
    flex: 0 0 106px;
    border-radius: 12px;
    background: var(--card);
}

.ms-preview-brand img {
    object-fit: contain;
    padding: 6px;
}

@media (min-width: 720px) {
    .ms-row.is-brand {
        grid-template-columns: 2.4fr 1fr auto;
    }

    /* email + date: no thumbnail and no actions in the subscribers list */
    .ms-row.is-subs {
        grid-template-columns: 2.2fr 1fr;
    }
}

/* ============ storefront: category page + newsletter =================== */

/* /store/<slug>/category/<id> — the header and the chips row stay exactly as
   they are; under them: the way back, the category's name, its item count and
   its whole product grid (the same cards as the shop list). */
.sf-catpage {
    padding-top: 10px;
}

.sf-backlink {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--card);
    color: var(--acc-text);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

.sf-backlink:hover {
    background: var(--acc-soft);
    border-color: var(--acc-line);
}

.sf-catpage-head {
    margin-top: 12px;
}

.sf-catpage-title {
    font-size: 19px;
    font-weight: 700;
    color: var(--ink);
}

.sf-catpage-count {
    margin-top: 4px;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--ink-3);
}

/* ============ storefront: the product page ============================= */

/* /store/<slug>/product/<id> — the same header, chips, cart and footer as the
   rest of the storefront; under them the way back, the picture large (with a
   thumbnail strip when the product holds more than one), the name, the rating,
   the price with its old price and badge, the description and the add button.
   Phone: one column; from 720px the picture and the text stand side by side. */
.sf-prodpage {
    padding-top: 10px;
}

.sf-prod {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    margin-top: 14px;
}

.sf-prod-media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    background: var(--line-2);
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
    color: var(--ink-3);
    font-size: 30px;
    font-weight: 700;
}

.sf-prod-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.sf-prod-media.is-oos .sf-prod-img {
    opacity: .55;
}

.sf-prod-shots {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.sf-shot {
    width: 62px;
    height: 62px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--r-xs);
    background: var(--card);
    overflow: hidden;
    cursor: pointer;
}

.sf-shot img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sf-shot.is-on {
    border-color: var(--acc-text);
    box-shadow: 0 0 0 2px var(--acc-soft);
}

.sf-prod-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.sf-prod-name {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ink);
    letter-spacing: -.01em;
}

.sf-prod-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
}

.sf-prod-price .sf-price-v {
    font-size: 22px;
}

.sf-prod-price .sf-price-old {
    font-size: 14px;
}

.sf-prod-off {
    align-self: center;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--danger-fill);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

.sf-prod-oos {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--err);
}

.sf-prod-desc-h {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 6px;
}

.sf-prod-p {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--ink-2);
    /* one line per <p>, each one keeping its own breaks; a long word (a URL, a
       long Arabic run) wraps inside the card instead of pushing it sideways */
    overflow-wrap: break-word;
}

.sf-prod-p + .sf-prod-p {
    margin-top: 6px;
}

.sf-prod-buy {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    border-top: 1px solid var(--line);
    padding-top: 13px;
    margin-top: 2px;
}

.sf-prod-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 22px;
    border: 0;
    border-radius: 999px;
    background: var(--acc-fill);
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(var(--acc-rgb), .26);
}

.sf-prod-add[disabled] {
    background: var(--mute-soft);
    color: var(--ink-3);
    box-shadow: none;
    cursor: not-allowed;
}

.sf-prod .sf-qty button {
    width: 34px;
    height: 34px;
}

.sf-prod .sf-qty span {
    min-width: 24px;
    font-size: 14px;
}

/* ---- the product's options (ProductVariants) ---- */
/* One block per OptionName, its values as pills beside it; the chosen one is
   the store's accent, a value with nothing left is dimmed. The price and the
   stock line above follow the choice (see productPageModel). */
.sf-variants {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sf-vgroup {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.sf-vg-h {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ink-2);
    text-transform: none;
    min-width: 56px;
}

.sf-vg-vals {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.sf-vval {
    min-width: 42px;
    padding: 7px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--card);
    color: var(--ink);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.sf-vval:hover {
    border-color: var(--acc-line);
    background: var(--acc-soft);
}

.sf-vval.is-on {
    border-color: var(--acc-text);
    background: var(--acc-fill);
    color: #fff;
}

.sf-vval.is-oos {
    color: var(--ink-3);
    text-decoration: line-through;
}

.sf-vnote {
    font-size: 12.5px;
    color: var(--ink-3);
}

.sf-vnote.is-err {
    color: var(--err);
}

@media (min-width: 720px) {
    .sf-prod {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 24px;
        align-items: start;
    }

    .sf-prod-name {
        font-size: 24px;
    }

    .sf-prod-price .sf-price-v {
        font-size: 26px;
    }
}

/* The newsletter card sits under the full-width service bar, 24px down, inside
   the normal page container. Phone: the field and the button are both full
   width, the button under the field. Desktop: one row. */
.sf-news {
    margin-top: 24px;
}

.sf-news-card {
    padding: 16px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--sh-sm);
}

.sf-news-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -.01em;
}

.sf-news-sub {
    margin-top: 4px;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--ink-2);
}

.sf-news-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}

.sf-news-input {
    width: 100%;
    min-width: 0;
    height: 42px;
    padding: 0 15px;
    border-radius: 999px;
    border: 1px solid var(--input-line);
    background: var(--input-bg);
    color: var(--ink);
    font-family: inherit;
    font-size: 14px;
    -webkit-appearance: none;
    appearance: none;
}

.sf-news-input:focus {
    outline: 0;
    border-color: var(--acc-line);
    box-shadow: 0 0 0 3px var(--acc-soft);
}

.sf-news-btn {
    width: 100%;
    height: 42px;
    padding: 0 22px;
    border: 0;
    border-radius: 999px;
    background: var(--acc-fill);
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(var(--acc-rgb), .2);
}

.sf-news-btn:hover {
    background: var(--acc-fill-h);
}

.sf-news-btn:disabled {
    opacity: .72;
    cursor: default;
    box-shadow: none;
}

.sf-news-note {
    margin-top: 9px;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--ink-3);
}

/* ==================== discount + sold-out marks ========================= */
/* Products.DiscountPercent / Products.OutOfStock, one wording on both surfaces:
   the dashboard list, the storefront cards, the cart lines and the viral strip.
   Everything is sized for a phone first. */

/* dashboard: the old price next to the new one, and the green -X% badge */
.ms-price-now {
    font-weight: 600;
}

.ms-price-was {
    margin-inline-start: 6px;
    font-size: 12px;
    text-decoration: line-through;
    color: var(--ink-3);
}

.ms-badge.is-sale {
    margin-inline-start: 6px;
    background: var(--ok-soft);
    color: var(--ok);
}

/* storefront: the red "Out of stock" badge sits opposite the -X% one */
.sf-thumb.is-oos img {
    opacity: .55;
}

.sf-oos-badge {
    position: absolute;
    top: 8px;
    inset-inline-end: 8px;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--danger-fill);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

/* the disabled stand-in for the round Add button on a sold-out card */
.sf-add.is-oos {
    width: auto;
    height: 30px;
    flex: 0 0 auto;
    padding: 0 10px;
    border-radius: 999px;
    background: var(--err-soft);
    color: var(--err);
    font-size: 10.5px;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: none;
    cursor: not-allowed;
}

/* a long price beside that pill wraps onto its own line on a narrow phone
   (a normal card never needs it: its round Add button is 34px) */
.sf-prow {
    flex-wrap: wrap;
}

/* storefront cart: the sold-out note under a line, and its remove button */
.sf-line-oos {
    margin-top: 2px;
    font-size: 11px;
    font-weight: 700;
    color: var(--err);
}

.sf-line-x {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--card);
    color: var(--ink-3);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

.sf-line-x:hover {
    color: var(--err);
    border-color: var(--err-soft);
}

/* storefront viral strip: price above the struck-through old price */
.sf-vprices {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sf-vcard .sf-price-old {
    font-size: 11px;
}

@media (min-width: 720px) {

    .sf-catpage-title {
        font-size: 22px;
    }

    .sf-news-card {
        padding: 18px 20px;
    }

    .sf-news-row {
        flex-direction: row;
        align-items: center;
        gap: 10px;
    }

    .sf-news-input {
        flex: 1 1 auto;
    }

    .sf-news-btn {
        width: auto;
        flex: 0 0 auto;
    }
}

/* ======================== dashboard: inventory panel ==================== */
/* The stock table is wider than a phone, so it scrolls sideways inside its own
   card and keeps the product column pinned on the left. Same palette and type
   as the rest of the dashboard — no new colours. */

.ms-inv-line {
    margin-top: 12px;
    font-size: 13px;
    color: var(--ink-2);
}

.ms-inv-line b {
    color: var(--ink);
    font-weight: 600;
}

.ms-inv-scroll {
    margin-top: 12px;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--card);
}

.ms-inv-table {
    width: 100%;
    min-width: 860px;
    border-collapse: collapse;
    font-size: 13px;
    color: var(--ink-2);
}

.ms-inv-table th,
.ms-inv-table td {
    padding: 10px 12px;
    text-align: start;
    vertical-align: middle;
    white-space: nowrap;
    border-bottom: 1px solid var(--line-2);
}

.ms-inv-table thead th {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-3);
    border-bottom: 1px solid var(--line);
}

.ms-inv-table tbody tr:last-child td {
    border-bottom: 0;
}

/* the sortable headers */
.ms-inv-th {
    display: inline-block;
    cursor: pointer;
    user-select: none;
}

.ms-inv-th:hover {
    color: var(--ink-2);
}

.ms-inv-th.is-on {
    color: var(--acc-text);
}

.ms-inv-arrow {
    margin-inline-start: 5px;
    font-size: 9px;
    vertical-align: 1px;
}

/* the product cell: 40px thumbnail, name, SKU, category */
.ms-inv-table .ms-inv-cell-prod {
    min-width: 210px;
    max-width: 280px;
    white-space: normal;
}

.ms-inv-prod {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.ms-inv-prod .ms-thumb {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 10px;
    font-size: 14px;
}

.ms-inv-name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
    word-break: break-word;
}

.ms-inv-sub {
    font-size: 11.5px;
    color: var(--ink-3);
    word-break: break-word;
}

/* the product column stays put while the numbers scroll */
.ms-inv-table th:first-child,
.ms-inv-table td:first-child {
    position: sticky;
    inset-inline-start: 0;
    z-index: 1;
    background: var(--card);
    box-shadow: 1px 0 0 var(--line-2);
}

.ms-inv-table thead th:first-child {
    z-index: 2;
}

/* totals row */
.ms-inv-table tfoot td {
    font-weight: 600;
    color: var(--ink);
    background: var(--line-2);
    border-top: 1px solid var(--line);
    border-bottom: 0;
}

.ms-inv-table tfoot td:first-child {
    background: var(--line-2);
    color: var(--ink);
}

/* the discount chip, old price and margin */
.ms-inv-was {
    margin-inline-start: 6px;
    font-size: 11.5px;
    color: var(--ink-3);
    text-decoration: line-through;
}

/* no purchase price yet: a dash that says so on hover, not a real zero */
.ms-inv-missing {
    color: var(--ink-3);
    cursor: help;
}

.ms-inv-on {
    color: var(--ink-2);
    font-weight: 600;
}

.ms-inv-on.is-low {
    color: var(--warn);
}

.ms-inv-on.is-out {
    color: var(--err);
}

.ms-badge.is-low {
    margin-inline-start: 6px;
    background: var(--warn-soft);
    color: var(--warn);
}

.ms-inv-table .ms-badge.is-off {
    margin-inline-start: 6px;
}

.ms-inv-margin {
    color: var(--ink-2);
}

.ms-inv-margin.is-err {
    color: var(--err);
}

/* the live "On hand: X" line in the editor */
.ms-inv-onhand {
    padding: 11px 13px;
    border: 1px dashed var(--line);
    border-radius: var(--r-xs);
    background: var(--surface-2);
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
}

/* ---------------- inventory editor: stock movement history -------------- */
/* Phone first: the figures sit on one short line with the delete button at the
   end, and the note wraps onto a second line. From 720px everything fits on a
   single line. Nothing is clipped at any width. */

.ms-inv-divider {
    height: 1px;
    margin: 18px 0 14px;
    background: var(--line);
}

.ms-inv-mov-totals {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 12px;
    margin-top: 4px;
    font-size: 13px;
    color: var(--ink-2);
}

.ms-inv-mov-stock {
    font-weight: 600;
    color: var(--ink);
}

.ms-inv-movs {
    margin-top: 10px;
}

.ms-inv-mov {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--line-2);
}

.ms-inv-mov:last-child {
    border-bottom: 0;
}

.ms-inv-mov-main {
    order: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 9px;
    min-width: 0;
    font-size: 12.5px;
    color: var(--ink-2);
}

.ms-inv-mov-date {
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
}

.ms-inv-mov-fig {
    white-space: nowrap;
}

.ms-inv-mov-total {
    font-weight: 600;
    color: var(--ink);
}

.ms-inv-mov-note {
    order: 3;
    flex: 1 1 100%;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 3px 8px;
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--ink-3);
    word-break: break-word;
}

.ms-inv-mov-supplier {
    color: var(--ink-3);
}

.ms-inv-mov-inv {
    font-size: 11px;
    font-weight: 600;
    color: var(--acc-text);
    text-decoration: none;
    white-space: nowrap;
}

.ms-inv-mov-inv:hover {
    text-decoration: underline;
}

.ms-inv-mov-x {
    order: 2;
    margin-inline-start: auto;
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--card);
    color: var(--ink-3);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

.ms-inv-mov-x:hover {
    color: var(--err);
    border-color: var(--err-soft);
}

.ms-inv-mov-x[disabled] {
    opacity: .6;
    cursor: default;
}

@media (min-width: 720px) {
    .ms-inv-mov-note {
        order: 2;
        flex: 1 1 120px;
    }

    .ms-inv-mov-x {
        order: 3;
    }
}

/* ===================== dashboard: purchase invoices tab ================= */
/* The table reuses the inventory table's base look (ms-inv-table): same
   header, borders and sticky first column — here the Date, so the figures
   stay readable while a phone scrolls the invoice columns. */

.ms-pu-kpis {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

@media (min-width: 720px) {
    .ms-pu-kpis {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
    }
}

.ms-pu-table .ms-pu-cell-date {
    min-width: 96px;
}

.ms-pu-table .ms-pu-cell-prod {
    min-width: 150px;
    max-width: 240px;
    white-space: normal;
}

/* the invoice picture: a rounded thumbnail drawn as a background, so a photo
   that no longer loads shows an empty muted square instead of a broken image */
.ms-pu-inv {
    display: block;
    width: 36px;
    height: 36px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background-color: var(--mute-soft);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.ms-pu-table .ms-pu-note-cell {
    max-width: 240px;
}

.ms-pu-note-txt {
    display: block;
    max-width: 220px;
    overflow: hidden;
    font-size: 11.5px;
    color: var(--ink-3);
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .ms-inv-table {
        min-width: 780px;
    }

    .ms-inv-table th,
    .ms-inv-table td {
        padding: 9px 10px;
    }

    .ms-inv-table .ms-inv-cell-prod {
        min-width: 190px;
        max-width: 220px;
    }
}

/* ===================== dashboard: customers tab ========================= */
/* The shoppers who created an account. The table reuses the inventory table's
   base look (ms-inv-table): same header, borders and sticky first column — here
   the Name, so the dates stay readable while a phone scrolls the other
   columns. Three small cards sit on top of it. */

.ms-cu-kpis {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

@media (min-width: 720px) {
    .ms-cu-kpis {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
    }
}

/* fewer columns than the inventory table, so a phone scrolls less */
.ms-cu-table {
    min-width: 640px;
}

.ms-cu-table .ms-cu-cell-name {
    min-width: 200px;
    max-width: 300px;
    white-space: normal;
}

.ms-cu-name {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ink);
}

.ms-cu-chip {
    flex: 0 0 auto;
}

/* the other emails of the same shopper, under the name */
.ms-cu-others {
    margin-top: 3px;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--ink-3);
    word-break: break-word;
}

.ms-cu-link {
    color: var(--acc-text);
    text-decoration: none;
}

.ms-cu-link:hover {
    text-decoration: underline;
}

/* ===================== storefront: shopper account ====================== */
/* New rules only: the account control reuses the language pill (.sf-lang), the
   panel reuses the cart's card parts (.sf-panel-*, .sf-seg, .ms-field, …). */

/* The header control: same pill as the language toggle, one row. Only the
   shopper's first name may be shortened, so nothing can overflow. */
.sf-acct {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.sf-acct-hello {
    flex: 0 0 auto;
}

.sf-acct-name {
    min-width: 0;
    max-width: 96px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* In Arabic the pill needs the Arabic face, like the language toggle. */
[dir="rtl"] .sf-acct {
    font-family: var(--font-ar);
    letter-spacing: 0;
}

/* The green confirmation line under the header. */
.sf-acct-flash {
    padding: 8px 0 0;
}

.sf-acct-flash .ms-note {
    margin-top: 0;
}

/* The account panel: a centred card — the same white card, radius and accent
   button as the cart, which is a bottom sheet instead. */
.sf-modal {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 16px;
}

.sf-modal-card {
    position: relative;
    width: 100%;
    max-width: 420px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    background: var(--card);
    border-radius: 22px;
    box-shadow: var(--sh-lg);
    overflow: hidden;
}

/* The signed-in address: wrapped, never overflowing the card. */
.sf-acct-mail {
    margin-top: 6px;
    font-size: 14px;
    color: var(--ink);
    word-break: break-word;
}

/* Inside the account card the fields always stack, at every width: the card is
   narrow, and a two-up row would squeeze the labels. */
.sf-modal-card .ms-form-grid {
    grid-template-columns: 1fr;
}

/* The asterisk that marks the register tab's phone as required. */
.sf-req {
    color: var(--err);
    font-weight: 700;
}

/* "Forgot your password?" — a small link under the password field; one tap
   switches the panel to the state that sends the reset link. */
.sf-acct-forgot {
    align-self: flex-start;
    padding: 0;
    border: 0;
    background: none;
    color: var(--acc-text);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.4;
    text-align: start;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

/* "← Back to sign in": the way out of that state, in the tabs' place. */
.sf-acct-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--acc-text);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
}

.sf-acct-forgot:hover,
.sf-acct-back:hover {
    color: var(--acc-text-strong);
}

@media (max-width: 640px) {
    /* Full width with 12px margins; the fields are one column at this width. */
    .sf-modal {
        padding: 12px;
    }

    .sf-modal-card {
        width: 100%;
        max-width: none;
        max-height: calc(100vh - 24px);
    }

    .sf-acct-name {
        max-width: 62px;
    }
}

/* ==================== storefront: the "My orders" page =================== */
/* /store/<slug>/account, and /account on a store's own domain. The same
   back-link, heading and white cards as the category page, and one card per
   order — one column at every width, so a phone gets the full-width card and
   the item lines never squeeze. */

.sf-acctpage {
    padding-top: 10px;
}

.sf-orders {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 14px;
}

.sf-order {
    padding: 14px 16px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    box-shadow: var(--sh-sm);
}

.sf-order-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.sf-order-no {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    word-break: break-word;
}

.sf-order-date {
    margin-top: 2px;
    font-size: 12px;
    color: var(--ink-3);
}

.sf-order-sum {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 12px;
    margin-top: 10px;
}

.sf-order-total {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--ink);
}

.sf-order-count {
    font-size: 12px;
    color: var(--ink-3);
}

.sf-order-items {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--line);
}

.sf-order-item {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--ink-2);
    word-break: break-word;
}

/* the API's own line under the "sign in" card (a 401 is text, not JSON) */
.sf-order-err {
    margin-top: 8px;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--err);
}

/* The "Set a new password" card of a reset link (?reset=<token>): the same
   white card as the orders, its two fields one under the other at every width
   — a phone gets the full-width field, and a desktop card stays readable. */
.sf-reset-card .ms-form-grid {
    grid-template-columns: 1fr;
}

/* ---- the policy page (/store/<slug>/policy/<key>) ---- */
/* One readable paragraph per line the owner wrote, one column at every width;
   the PDF button sits under the text and never pushes past the card. */
.sf-policy-p {
    font-size: 14px;
    line-height: 1.75;
    color: var(--ink-2);
    margin-top: 10px;
    word-break: break-word;
}

.sf-policy-p:first-child {
    margin-top: 0;
}

@media (min-width: 720px) {
    .sf-order {
        padding: 16px 18px;
    }

    .sf-reset-card {
        max-width: 460px;
        padding: 20px;
    }
}

/* ===========================================================================
   Store dashboard — Dispatch (the delivery board and its setup)
   .msd-*  Dispatch tab: driver chips, one column per status, cards, sheets
   =========================================================================== */

/* Board / Setup, on the right of the panel's own heading. */
.msd-sub {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* The count on the Dispatch tab: the orders still waiting for a driver. */
.msd-tabn {
    display: inline-block;
    min-width: 18px;
    margin-inline-start: 6px;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--danger-fill);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
}

.ms-tab.is-on .msd-tabn,
.ms-sections-row.is-on .msd-tabn {
    background: var(--card);
    color: var(--acc-text);
}

/* A section and a form inside the Dispatch card: a separating line rather than
   a card in a card, and a soft panel for the form while it is open. */
.msd-block {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

.msd-form {
    margin-top: 18px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface-2);
}

/* The areas a driver covers, in his form: one toggle chip per area. The list
   wraps inside its own field, so a phone never scrolls sideways; an area that is
   closed is dimmed and is a disabled button, so it can never be chosen. */
.msd-areas {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
    max-width: 100%;
}

/* A store with many areas: the search box that narrows the areas card and the
   driver's chips, and the line under them that counts the rows drawn and offers
   the next page. Both sit inside the card, so a phone keeps them full width. */
.msd-find {
    margin-top: 12px;
    max-width: 100%;
}

.msd-more {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 10px;
}

.msd-more .ms-muted {
    margin: 0;
}

/* The line right under a search box: how many of the matching areas are drawn
   ("Showing 50 of 500 areas"). */
.msd-count {
    margin-top: 6px;
}

.msd-count .ms-muted {
    margin: 0;
}

/* The driver form's Areas field: how many areas are ticked, always on screen
   above the chips, and the two buttons under them kept together on a phone. */
.msd-selcount {
    margin-top: 6px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ink-2);
}

.msd-more-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* the chips right under the search box keep their own gap */
.msd-find + .msd-areas {
    margin-top: 10px;
}

.msd-areas .ms-chip {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    white-space: normal;
    line-height: 1.35;
    text-align: start;
}

.msd-areas .ms-chip.is-off {
    opacity: .45;
    background: var(--line-2);
    cursor: not-allowed;
}

/* The areas under a driver's name on a board card: one quiet line. */
.msd-drvareas {
    margin-top: 3px;
    font-size: 11.5px;
    line-height: 1.4;
    word-break: break-word;
}

/* The driver filter: All, then one chip per driver in his own colour. */
.msd-chips {
    display: flex;
    gap: 6px;
    margin-top: 12px;
    padding-bottom: 4px;
    overflow-x: auto;
}

.msd-chips::-webkit-scrollbar {
    height: 0;
}

.msd-chips .ms-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

/* A driver's colour, used in the chips, on the card and in the setup list. */
.msd-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    border-radius: 50%;
    background: var(--ink-3);
}

/* The board itself: one column per status. A wide screen scrolls sideways so
   all seven columns keep a readable width; a phone stacks them. */
.msd-board {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 12px;
    padding-bottom: 10px;
    overflow-x: auto;
}

.msd-col {
    flex: 0 0 264px;
    width: 264px;
    padding: 10px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
}

.msd-col-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 2px 8px;
}

.msd-col-name {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-2);
}

.msd-col-n {
    min-width: 24px;
    padding: 1px 7px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--card);
    font-size: 11.5px;
    font-weight: 700;
    color: var(--ink-2);
    text-align: center;
}

.msd-col-body {
    min-height: 24px;
}

.msd-col-empty {
    padding: 4px 2px 2px;
    font-size: 12px;
    color: var(--ink-3);
}

@media (max-width: 860px) {
    .msd-board {
        flex-direction: column;
        align-items: stretch;
        overflow-x: visible;
    }

    .msd-col {
        flex: 1 1 auto;
        width: auto;
    }
}

/* One order card inside a column. */
.msd-card {
    padding: 10px 11px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--sh-sm);
}

.msd-card+.msd-card {
    margin-top: 8px;
}

.msd-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.msd-no {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ink);
    word-break: break-word;
}

.msd-time {
    margin-top: 1px;
    font-size: 11px;
    color: var(--ink-3);
}

.msd-name {
    margin-top: 7px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    word-break: break-word;
}

.msd-line {
    margin-top: 3px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--ink-2);
    word-break: break-word;
}

.msd-items {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed var(--line);
    font-size: 12px;
    line-height: 1.5;
    color: var(--ink-2);
    word-break: break-word;
}

.msd-money {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin-top: 7px;
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
}

.msd-money small {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--ink-3);
}

/* "CASH" — the loud one: the driver has to collect this money. */
.msd-cash {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid var(--err-line);
    background: var(--danger-bg);
    color: var(--danger-ink);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    white-space: nowrap;
}

/* The driver on a card, loud: his own colour, his name and the "مسند إلى" tag,
   then — under it — whether he has opened the order yet and, once he scanned
   its label at the shop, the time he took it. Everything comes from the
   delivery module's own answer (driverSeen / pickedUpAt). */
.msd-drvchip {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 6px 9px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface-2);
    font-size: 12px;
    font-weight: 700;
    color: var(--ink);
}

.msd-drvchip .msd-dot {
    width: 10px;
    height: 10px;
    flex: 0 0 10px;
}

.msd-drvchip-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.msd-drvchip-tag {
    margin-inline-start: auto;
    padding: 1px 7px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--card);
    font-size: 10.5px;
    font-weight: 700;
    color: var(--ink-2);
    white-space: nowrap;
}

.msd-drvchip.is-none {
    background: var(--card);
    border-style: dashed;
    font-weight: 600;
    color: var(--ink-3);
}

/* "لم يفتحه الدريفر" — the assignment is still unopened on his phone. */
.msd-seen {
    margin-top: 5px;
    font-size: 11px;
    font-weight: 700;
    color: var(--warn);
}

/* "تم الاستلام HH:MM" — he scanned the label at the shop — and, on a cancelled
   order whose pieces are back, "تم الإرجاع للمخزون HH:MM". */
.msd-picked {
    margin-top: 5px;
    font-size: 11px;
    font-weight: 700;
    color: var(--ok);
}

/* The card's printer: the order's own label page. */
.msd-print {
    gap: 6px;
}

.msd-acts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 9px;
}

.msd-acts .ms-btn {
    padding: 6px 10px;
    font-size: 12px;
}

.msd-acts .ms-select,
.msd-acts .ms-input {
    flex: 1 1 110px;
    min-width: 0;
    padding: 7px 9px;
    font-size: 12.5px;
}

/* The card's own controls keep that small padding, but they must not clip
   either, and the dropdown still needs its slice of room for the arrow — these
   two come after the padding above on purpose (same specificity, later wins). */
.msd-acts .ms-select {
    min-height: 34px;
    padding-inline-end: 26px;
}

.msd-acts .ms-input {
    min-height: 34px;
}

/* The small phone / WhatsApp links on a card. */
.msd-ico {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--card);
    color: var(--acc-text);
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}

.msd-ico:hover {
    background: var(--acc-soft);
}

/* A sheet: the failed-delivery reason and the order's history. */
.msd-overlay {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: var(--scrim);
}

.msd-sheet {
    width: 100%;
    max-width: 440px;
    max-height: 88vh;
    overflow: auto;
    padding: 16px;
    background: var(--card);
    border-radius: 18px;
    box-shadow: var(--sh-lg);
}

.msd-sheet-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.msd-sheet-title {
    font-size: 15px;
    font-weight: 700;
}

@media (max-width: 640px) {
    .msd-overlay {
        align-items: flex-end;
        padding: 0;
    }

    .msd-sheet {
        max-height: 92vh;
        border-radius: 20px 20px 0 0;
    }
}

/* The order's history: one dot and one line per event. */
.msd-tl {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.msd-tl-row {
    display: flex;
    gap: 10px;
}

.msd-tl-dot {
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    margin-top: 5px;
    border-radius: 50%;
    background: var(--acc-fill);
}

.msd-tl-t {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    word-break: break-word;
}

.msd-tl-m {
    font-size: 12px;
    color: var(--ink-3);
    word-break: break-word;
}

/* The quick reasons of the "Failed delivery" sheet. */
.msd-reasons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

/* A driver's PIN, shown once, right after it was saved. */
.msd-pin {
    margin-top: 12px;
    padding: 14px;
    border: 1px solid var(--acc-line);
    border-radius: var(--r-sm);
    background: var(--acc-soft);
}

.msd-pin-v {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}

.msd-pin-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: .16em;
    color: var(--acc-text);
}

/* The driver link, ready to copy and send. */
.msd-link {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}

.msd-link code {
    flex: 1 1 220px;
    min-width: 0;
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: var(--r-xs);
    background: var(--surface-2);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12.5px;
    color: var(--ink);
    word-break: break-all;
}

/* ===== the toast: one line at the bottom, no re-render of the page ===== */
.ms-toast {
    position: fixed;
    left: 50%;
    bottom: 22px;
    z-index: 120;
    max-width: calc(100vw - 32px);
    padding: 10px 16px;
    border-radius: 999px;
    background: var(--toast-bg);
    color: var(--toast-ink);
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    box-shadow: var(--sh-lg);
    opacity: 0;
    transform: translate(-50%, 12px);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
}

.ms-toast.is-on {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* ===========================================================================
   The driver app — /driver
   Mobile first, its own chrome (no dashboard, no storefront), Arabic RTL by
   default and English when the driver taps the AR/EN switch. The buttons take
   the store's accent colour, which the view sets on the document root.
   =========================================================================== */

.drv {
    min-height: 100vh;
    max-width: 620px;
    margin: 0 auto;
    padding: 14px 12px 96px;
    background: var(--bg);
    color: var(--ink);
    /* Arabic RTL is the default; the view puts dir="ltr" on the document when
       the driver switches to English. Both rules are here, so the first paint
       is Arabic even before the script runs. */
    direction: rtl;
    font-family: var(--font-ar);
}

[dir="ltr"] .drv {
    direction: ltr;
    font-family: var(--font-ui);
}

.drv-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 4px 2px 12px;
}

.drv-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.drv-mark {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 13px;
    background: var(--acc-fill);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-weight: 700;
    overflow: hidden;
    box-shadow: 0 8px 18px rgba(var(--acc-rgb), .28);
}

.drv-mark img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.drv-brand-txt {
    min-width: 0;
}

.drv-store {
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.drv-sub {
    font-size: 11.5px;
    color: var(--ink-3);
}

/* the header's two switches, kept together at the reading end: the language
   pill and the theme button, 6px apart, never squeezed by the store's name */
.drv-topacts {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

/* the small AR / EN switch */
.drv-lang {
    flex: 0 0 auto;
    padding: 7px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--card);
    color: var(--ink-2);
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    cursor: pointer;
}

.drv-lang:hover {
    background: var(--line-2);
}

.drv-card {
    padding: 16px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--sh-sm);
}

.drv-h1 {
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3;
    word-break: break-word;
}

.drv-h2 {
    font-size: 15px;
    font-weight: 700;
}

.drv-p {
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--ink-3);
}

.drv-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 12px;
}

.drv-label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-2);
}

/* Login: phone and PIN, then one big button. */
.drv-login {
    margin-top: 8px;
}

.drv-err {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: var(--r-xs);
    background: var(--err-soft);
    color: var(--err);
    font-size: 13px;
    font-weight: 600;
}

.drv-big {
    width: 100%;
    margin-top: 14px;
    padding: 14px 16px;
    font-size: 15px;
}

/* Driver name + the three figures. */
.drv-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.drv-hero-acts {
    display: flex;
    gap: 6px;
}

.drv-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.drv-stat {
    padding: 10px 8px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 14px;
    text-align: center;
}

.drv-stat-k {
    font-size: 10.5px;
    line-height: 1.3;
    color: var(--ink-3);
}

.drv-stat-v {
    margin-top: 3px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ink);
    word-break: break-word;
}

/* "طلباتي" / "تم اليوم" */
.drv-sec {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 18px 2px 8px;
}

.drv-sec-n {
    padding: 2px 9px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--card);
    font-size: 11.5px;
    font-weight: 700;
    color: var(--ink-2);
}

/* One order. */
.drv-order {
    padding: 13px 14px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--sh-sm);
}

.drv-order+.drv-order {
    margin-top: 10px;
}

.drv-order.is-done {
    opacity: .6;
}

.drv-order-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.drv-no {
    font-size: 14px;
    font-weight: 700;
    word-break: break-word;
}

.drv-line {
    margin-top: 5px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink-2);
    word-break: break-word;
}

.drv-line b {
    color: var(--ink);
    font-weight: 600;
}

.drv-items {
    margin-top: 8px;
    padding: 8px 10px;
    border-radius: var(--r-xs);
    background: var(--surface-2);
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--ink-2);
    white-space: pre-line;
    word-break: break-word;
}

.drv-note {
    margin-top: 8px;
    padding: 8px 10px;
    border-inline-start: 3px solid var(--acc-text);
    border-radius: var(--r-xs);
    background: var(--acc-soft);
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--ink-2);
    word-break: break-word;
}

/* The money to collect: loud, on purpose. */
.drv-cash {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 8px 12px;
    border-radius: var(--r-xs);
    border: 1px solid var(--err-line);
    background: var(--danger-bg);
    color: var(--danger-ink);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .02em;
}

.drv-total {
    margin-top: 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
}

.drv-total small {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--ink-3);
}

/* Call / WhatsApp / Map: even touch targets, as many as the order has. */
.drv-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.drv-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 8px;
    border: 1px solid var(--line);
    border-radius: var(--r-xs);
    background: var(--card);
    color: var(--ink);
    font-size: 12.5px;
    font-weight: 600;
    text-align: center;
}

.drv-link:hover {
    background: var(--line-2);
}

.drv-link svg {
    flex: 0 0 auto;
}

/* The order's own actions. */
.drv-acts {
    display: grid;
    gap: 8px;
    margin-top: 10px;
}

.drv-acts .ms-btn {
    padding: 12px 14px;
    font-size: 14px;
    white-space: normal;
}

.drv-acts-2 {
    grid-template-columns: 1fr 1fr;
}

@media (min-width: 480px) {
    .drv-acts {
        grid-template-columns: 1fr 1fr;
    }
}

/* The sheet: delivered (note + photo) and failed (a reason). */
.drv-shade {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: var(--scrim);
}

.drv-sheet {
    width: 100%;
    max-width: 620px;
    max-height: 92vh;
    overflow: auto;
    padding: 16px 16px 20px;
    background: var(--card);
    border-radius: 22px 22px 0 0;
    box-shadow: var(--sh-lg);
}

@media (min-width: 640px) {
    .drv-shade {
        align-items: center;
        padding: 16px;
    }

    .drv-sheet {
        border-radius: 22px;
    }
}

.drv-sheet-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

.drv-reasons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.drv-reasons .ms-chip {
    padding: 8px 12px;
    font-size: 12.5px;
}

.drv-photo {
    margin-top: 10px;
}

.drv-photo img {
    max-width: 160px;
    margin-top: 8px;
    border-radius: var(--r-xs);
    border: 1px solid var(--line);
}

.drv-empty {
    padding: 26px 16px;
    border: 1px dashed var(--line);
    border-radius: var(--r);
    background: var(--card);
    text-align: center;
    color: var(--ink-3);
    font-size: 13px;
    line-height: 1.6;
}

.drv-foot {
    margin-top: 22px;
    text-align: center;
}

.drv-loading {
    padding: 40px 16px;
    text-align: center;
    color: var(--ink-3);
    font-size: 13px;
}

/* ---- the assignment banner -------------------------------------------- */
/* The orders the shop handed him that he has not opened yet. Fixed above the
   page's own header, in the store's accent colour; the page's top padding is
   set from its real height (drvNotifPad), so the header is never hidden. */
.drv-notif {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 70;
    background: var(--acc-fill);
    color: #fff;
    box-shadow: 0 10px 26px rgba(var(--acc-rgb), .32);
}

.drv-notif-in {
    max-width: 620px;
    margin: 0 auto;
    padding: 12px 14px 13px;
    padding-top: calc(12px + env(safe-area-inset-top, 0px));
}

.drv-notif-k {
    font-size: 12px;
    font-weight: 700;
    opacity: .92;
}

.drv-notif-o {
    margin-top: 3px;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.3;
    word-break: break-word;
}

.drv-notif-m {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.5;
    opacity: .94;
    word-break: break-word;
}

.drv-notif-a {
    margin-top: 4px;
    font-size: 11.5px;
    font-weight: 600;
    opacity: .88;
}

.drv-notif-btns {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.drv-notif-btn {
    flex: 1 1 0;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, .6);
    border-radius: 999px;
    background: var(--card);
    color: var(--acc-text);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 800;
    cursor: pointer;
}

.drv-notif-btn.is-ghost {
    background: transparent;
    color: #fff;
}

/* A card the banner's "اعرض الطلب" brought into view, for a moment. */
.drv-order.is-new {
    border-color: var(--acc-text);
    box-shadow: 0 0 0 3px var(--acc-soft), var(--sh-sm);
}

/* "تم الاستلام 14:32" — he scanned this order's label. */
.drv-picked {
    margin-top: 5px;
    font-size: 12px;
    font-weight: 700;
    color: var(--ok);
}

/* ---- pickup by scan ---------------------------------------------------- */
/* A full-screen sheet: the camera, then the manual field as the always-there
   fallback. The wrapper overrides the sheet's own placement at every width. */
.drv-shade.drv-scan-shade {
    align-items: stretch;
    justify-content: center;
    padding: 0;
}

.drv-sheet.drv-scan-sheet {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    overflow-y: auto;
    padding: calc(14px + env(safe-area-inset-top, 0px)) 14px calc(18px + env(safe-area-inset-bottom, 0px));
    border-radius: 0;
}

.drv-scan-cam {
    position: relative;
    flex: 1 1 auto;
    min-height: 200px;
    margin-top: 4px;
    border-radius: 14px;
    overflow: hidden;
    background: #120c16;
}

.drv-scan-cam video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #120c16;
}

.drv-scan-hint {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    margin: 0;
    padding: 10px 12px;
    background: var(--scrim-mid);
    color: #fff;
    font-size: 12.5px;
    line-height: 1.5;
    text-align: center;
}

.drv-scan-sheet .drv-err {
    margin-top: 10px;
}

.drv-scan-sheet .drv-big {
    margin-top: 12px;
}

/* ===========================================================================
   Store dashboard — Staff (the team's logins) and the password sheet
   .ms-staff-*  a login's permissions tab and panel, its section chips, and the
                checkbox grid of the form
   =========================================================================== */

/* ---- one row's permissions: a small tab, and the box it opens ------------ */

/* The tab sits under "Username:" / "Email:", the same size family as the row's
   other small controls but quiet, so the card stays calm. It may take the whole
   width of the text column and its label wraps there, so on a phone it simply
   sits on its own line under the email and never widens the row. */
.ms-staff-permtab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 100%;
    margin-top: 8px;
    padding: 6px 12px;
    background: var(--card);
    border: 1px solid var(--acc-line);
    border-radius: 999px;
    color: var(--acc-text);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.4;
    text-align: start;
    white-space: normal;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}

.ms-staff-permtab:hover,
.ms-staff-permtab[aria-expanded="true"] {
    background: var(--acc-soft);
    border-color: var(--acc-text);
}

.ms-staff-permtab:focus-visible {
    outline: 2px solid var(--acc-text);
    outline-offset: 2px;
}

/* The chevron: two sides of a small box, turned to point down; it turns over
   when the panel is open. aria-hidden in the markup, so the button reads as
   "Permissions · 8". */
.ms-staff-chev {
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    border-right: 1.6px solid currentColor;
    border-bottom: 1.6px solid currentColor;
    transform: rotate(45deg);
    transition: transform .15s ease;
}

.ms-staff-permtab[aria-expanded="true"] .ms-staff-chev {
    transform: rotate(-135deg);
}

/* The panel: the dashboard's usual white box, opened directly under the tab and
   inside the row. Closed it takes no room at all — no height, no border, no
   padding — so every row stays short until its tab is tapped, and the page
   below it does not move before then. */
.ms-staff-panel {
    max-height: 0;
    margin-top: 0;
    padding: 0 12px;
    border: 0 solid var(--line);
    border-radius: var(--r-sm);
    background: var(--card);
    box-shadow: var(--sh-sm);
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    min-width: 0;
    max-width: 100%;
    transition: max-height .15s ease, opacity .15s ease, visibility .15s ease,
        margin-top .15s ease, padding-top .15s ease, padding-bottom .15s ease,
        border-width .15s ease;
}

.ms-staff-panel.is-open {
    /* far above the eleven keys the API can answer (they wrap to a handful of
       rows at any width), so the box never needs to scroll while it is open */
    max-height: 460px;
    margin-top: 8px;
    padding: 10px 12px;
    border-width: 1px;
    opacity: 1;
    visibility: visible;
}

/* The sections a login may use, as small chips inside that box. They are read
   only, so they keep the accent's soft tone and never react to a hover. */
.ms-staff-perms {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 7px;
    /* the chip row shrinks with its card and wraps; it never widens the row */
    min-width: 0;
    max-width: 100%;
}

/* the box already pads itself, so its own chip row sits flush at the top */
.ms-staff-panel .ms-staff-perms {
    margin-top: 0;
}

.ms-chip.is-perm {
    padding: 3px 9px;
    font-size: 11.5px;
    line-height: 1.5;
    background: var(--acc-soft);
    border-color: var(--acc-line);
    color: var(--acc-text);
    cursor: default;
    max-width: 100%;
}

.ms-chip.is-perm:hover {
    background: var(--acc-soft);
}

/* One checkbox per section in the form: one column on a phone, two on a wide
   screen, so the whole list stays readable without scrolling. */
.ms-staff-perms-edit {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2px 14px;
    margin-top: 4px;
    min-width: 0;
    max-width: 100%;
}

.ms-staff-perms-edit .ms-check {
    padding: 6px 0;
    font-size: 13.5px;
    min-width: 0;
    max-width: 100%;
}

@media (min-width: 640px) {
    .ms-staff-perms-edit {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* A staff card: who he is, then his store and last sign-in, then the actions. */
@media (min-width: 720px) {
    .ms-row.is-staff {
        grid-template-columns: 2fr 1.2fr auto;
        align-items: center;
    }
}

/* ---- the same rule for the two boxes the Staff section can open ---------- */

/* The generated password and its buttons: the code shortens inside its box
   instead of running past the card, the buttons wrap under it. */
.msd-pin {
    max-width: 100%;
}

.msd-pin-v {
    min-width: 0;
    max-width: 100%;
}

.msd-pin-code {
    max-width: 100%;
    overflow-wrap: anywhere;
}

/* A sheet's heading: the title column shrinks, the Close button keeps its
   place at the end of the row. */
.msd-sheet-head > div {
    min-width: 0;
    max-width: 100%;
}

/* ===========================================================================
   The public landing page — "/" on a platform host.

   Its look is borrowed from the company's own theme (magmasolutions.net): plum
   headings and outlines, orange actions, a pale lavender field, peach
   highlighter strips behind the section titles, flat lavender-white cards. The
   theme's values live in the --ld-* variables below and are scoped to .ld, so
   nothing else changes: the dashboards and the storefront keep the app's own
   design system untouched.

   Bilingual (LTR / RTL, `dir` on .ld), phone first: one column, then two.
   Nothing here may widen the page sideways on a 360px phone.
   =========================================================================== */

.ld {
    /* the borrowed theme, once, scoped to this page */
    --ld-plum: #7e059b;
    --ld-deep: #4b0082;
    --ld-ink: #301934;
    --ld-body: #6c6678;
    --ld-orange: #fd6a02;
    --ld-orange-h: #e05a10;
    --ld-ghost: #eae8fa;
    --ld-ghost-2: #ded9f6;
    --ld-page: #f2f2fc;
    --ld-card: #f7f6fd;
    --ld-line: #e4e1f4;
    --ld-lilac: #c494d6;
    --ld-lav: #eee7fa;
    --ld-peach: #f9a166;
    --ld-peach-soft: #fbe3d6;
    --ld-panel-a: #4b1063;
    --ld-panel-b: #6e1b7e;
    --ld-head-bg: rgba(242, 242, 252, .94);

    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--ld-page);
    color: var(--ld-ink);
    /* clips a wide child without becoming a scroll container, so the sticky
       header above it keeps working exactly like the dashboards' top bar */
    overflow-x: clip;
}

.ld-main {
    flex: 1 1 auto;
}

/* The landing page's one heading: real text for screen readers and search
   engines, invisible on screen because the logo is what a visitor sees. */
.ld-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ------------------------------ header ---------------------------------- */

.ld-head {
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--ld-head-bg);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--ld-line);
}

.ld-head-in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 16px;
    max-width: 1180px;
    margin: 0 auto;
}

.ld-brand {
    display: flex;
    align-items: center;
    min-width: 0;
    color: inherit;
}

/* The client's own logo file, exactly as supplied: purple and orange on
   transparent, never recoloured and never stretched — only a height is set and
   the width follows the file's own 288 × 79 proportions. */
.ld-logo {
    display: block;
    flex: 0 0 auto;
    width: auto;
    height: 30px;
}

@media (min-width: 900px) {
    .ld-logo {
        height: 38px;
    }
}

.ld-head-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

/* The header's copy of the page's button: the short label, never squeezed. */
.ld-head-cta {
    flex: 0 0 auto;
    padding: 8px 13px;
    font-size: 12.5px;
}

/* The header's own tab (Pricing), between the language pill and the account
   button: the same small bold label the header speaks, a lavender plate on
   hover, and — while its page is open — the lavender plate plus a 2px plum bar
   under the words. The bar is an inset shadow, so nothing moves and nothing is
   added to the markup. The row is a flex row with the logical properties, so
   the tab changes sides with the page in Arabic. */
.ld-head-link {
    flex: 0 0 auto;
    padding: 7px 11px;
    border: 1px solid transparent;
    border-radius: 5px;
    color: var(--ld-body);
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
    text-decoration: none;
}

.ld-head-link:hover {
    background: var(--ld-lav);
    border-color: var(--ld-line);
    color: var(--ld-plum);
}

.ld-head-link.is-on {
    background: var(--ld-lav);
    border-color: var(--ld-line);
    color: var(--ld-ink);
    box-shadow: inset 0 -2px 0 var(--ld-plum);
}

/* On the narrowest phones the brand, the language pill, the tab and the account
   button share one row: each of them gives up a little padding and a point of
   type rather than letting the row run past the screen. */
@media (max-width: 420px) {
    .ld-head-in {
        gap: 6px;
        padding-inline: 12px;
    }

    .ld-head-actions {
        gap: 4px;
    }

    .ld-logo {
        height: 26px;
    }

    .ld-head-link {
        padding: 6px 8px;
        font-size: 12px;
    }

    .ld-head-cta {
        padding: 7px 10px;
        font-size: 12px;
    }
}

/* ------------------------- the theme's buttons -------------------------- */

/* Every button on this page takes the theme's shape: a 5px radius and a 2px
   edge, so the orange primary and the outlined secondary line up exactly. */
.ld .ms-btn {
    border-width: 2px;
    border-radius: 5px;
}

/* primary: solid orange, white bold label */
.ld .ms-btn-primary {
    background: var(--ld-orange);
    border-color: var(--ld-orange);
    color: #fff;
    font-weight: 700;
    box-shadow: none;
}

.ld .ms-btn-primary:hover {
    background: var(--ld-orange-h);
    border-color: var(--ld-orange-h);
}

/* secondary: solid pale lavender with a plum outline and plum bold label */
.ld .ms-btn-ghost {
    background: var(--ld-ghost);
    border-color: var(--ld-plum);
    color: var(--ld-plum);
    font-weight: 700;
}

.ld .ms-btn-ghost:hover {
    background: var(--ld-ghost-2);
    border-color: var(--ld-deep);
    color: var(--ld-deep);
}

/* the language pill, in the theme's own hairline style */
.ld .sf-lang {
    border-radius: 5px;
    border: 1px solid var(--ld-line);
    background: var(--card);
    color: var(--ld-plum);
    font-weight: 700;
}

.ld .sf-lang:hover {
    background: var(--ld-lav);
    color: var(--ld-deep);
}

/* ------------------------------- hero ----------------------------------- */

/* The hero sits on the pale lavender field with the theme's ornaments behind
   it: a soft peach circle cropped at the top-left, a translucent plum circle
   cropped at the right edge and one thin plum ring. `overflow: hidden` crops
   them at the page edge, so they can never widen the page — in either
   direction — on a phone. */
.ld-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 26px 0 10px;
}

.ld-orn {
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    pointer-events: none;
}

.ld-orn-peach {
    width: 480px;
    height: 480px;
    inset-inline-start: -200px;
    top: -250px;
    background: rgba(249, 161, 102, .32);
}

.ld-orn-plum {
    width: 360px;
    height: 360px;
    inset-inline-end: -170px;
    top: 70px;
    background: rgba(75, 0, 130, .07);
}

/* the one thin plum ring, cropped at the bottom-left corner */
.ld-orn-ring {
    width: 220px;
    height: 220px;
    inset-inline-start: -70px;
    bottom: -90px;
    border: 2px solid rgba(126, 5, 155, .26);
}

.ld-hero .ms-wrap {
    position: relative;
    z-index: 1;
}

/* Text first, the drawing under it on a phone; side by side from 900px. In
   Arabic the two columns swap with the page — the drawing keeps its own
   internal layout (dir="ltr" on its wrapper). */
.ld-hero-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
    align-items: center;
    min-width: 0;
}

.ld-hero-txt {
    min-width: 0;
}

/* The illustration's panel: the theme's purple gradient with a faint diagonal
   lighter sweep across it. */
.ld-hero-art {
    position: relative;
    z-index: 1;
    min-width: 0;
    max-width: 460px;
    margin-inline: auto;
    padding: 16px 12px 12px;
    border-radius: 20px;
    background-image:
        linear-gradient(118deg, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, 0) 48%),
        linear-gradient(145deg, var(--ld-panel-a), var(--ld-panel-b));
    overflow: hidden;
    /* a picture, never mirrored by the page */
    direction: ltr;
}

/* the orange half circle peeking out from behind that panel */
.ld-orn-orange {
    position: absolute;
    z-index: 0;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    background: var(--ld-orange);
    inset-inline-end: -24px;
    bottom: 26px;
}

@media (min-width: 900px) {
    .ld-hero-card {
        grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
        gap: 34px;
    }

    .ld-hero-art {
        max-width: none;
        padding: 20px 16px 14px;
        border-radius: 24px;
    }

    .ld-orn-orange {
        inset-inline-end: -58px;
        bottom: 40px;
    }
}

/* The hero's logo takes the headline's place: large, centred in the column,
   with clear space under it before the tagline. Width is set, height follows
   the file's own proportions. */
.ld-hero-logo {
    display: block;
    width: 260px;
    max-width: 100%;
    height: auto;
    margin-block: 0 18px;
    margin-inline: auto;
}

@media (min-width: 900px) {
    .ld-hero-logo {
        width: 420px;
        margin-bottom: 22px;
    }
}

.ld-lead {
    margin-top: 12px;
    font-size: clamp(16px, 4vw, 19px);
    font-weight: 600;
    line-height: 1.45;
    color: var(--ld-ink);
}

.ld-sub {
    margin-top: 8px;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--ld-body);
}

.ld-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 22px;
}

/* Both buttons are whole sentences in either language: one per row on a
   phone, wrapped rather than clipped. */
.ld-btn {
    flex: 1 1 100%;
    padding: 13px 20px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    white-space: normal;
    text-align: center;
}

@media (min-width: 560px) {
    .ld-btn {
        flex: 0 1 auto;
    }
}

/* ----------------------------- sections --------------------------------- */

.ld-sec {
    padding-top: 22px;
}

.ld-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
}

@media (min-width: 780px) {
    .ld-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* The theme's card: 8px radius, flat lavender-white, a hairline border and no
   heavy shadow. */
.ld-card {
    background: var(--ld-card);
    border: 1px solid var(--ld-line);
    border-radius: 8px;
    box-shadow: none;
    padding: 22px 20px;
    min-width: 0;
}

.ld-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

/* the icon badge: a white circle with a thin lavender ring, plum icon */
.ld-ico {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 50%;
    background: var(--card);
    border: 1px solid var(--ld-line);
    color: var(--ld-plum);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(126, 5, 155, .05);
}

.ld-ico svg {
    display: block;
}

.ld-h2 {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--ld-plum);
    min-width: 0;
    overflow-wrap: break-word;
}

/* The section title's peach highlighter strip. It is a background on the words
   themselves (not on the box), cloned at every line break, so it sits behind
   wrapped English and behind Arabic exactly the same way. */
.ld-hl {
    background-image: linear-gradient(to top,
            var(--ld-peach-soft) 0%,
            var(--ld-peach-soft) 62%,
            rgba(0, 0, 0, 0) 62%);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    padding-inline: .12em;
}

.ld-p {
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--ld-body);
    overflow-wrap: break-word;
}

/* a short emphasised line: the theme's small bold orange */
.ld-note {
    margin-top: 12px;
    font-size: 13px;
    font-weight: 700;
    color: var(--ld-orange);
}

/* A path or a code inside a sentence: isolated from the Arabic line, so
   "/driver" is never reordered by the bidi algorithm. */
.ld-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .92em;
    background: var(--ld-lav);
    border: 1px solid var(--ld-line);
    border-radius: 4px;
    padding: 1px 6px;
    color: var(--ld-plum);
    unicode-bidi: isolate;
    white-space: nowrap;
}

.ld-list {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.ld-li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    min-width: 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--ld-body);
}

.ld-tick {
    flex: 0 0 auto;
    margin-top: 4px;
    color: var(--ld-orange);
}

.ld-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 14px;
}

/* the 13 dashboard sections: small lavender pills, plum text, a hairline edge */
.ld-chip {
    max-width: 100%;
    padding: 5px 11px;
    border-radius: 999px;
    border: 1px solid var(--ld-line);
    background: var(--ld-lav);
    color: var(--ld-plum);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

/* --------------------------- how it works -------------------------------- */

.ld-how-title {
    margin-bottom: 16px;
}

/* The three steps: stacked on a phone, one row from 760px, always joined by a
   thin plum dashed line that runs from one numbered circle to the next. The
   line is a pseudo-element on every step but the first, drawn in the gap, so it
   flips with the page in Arabic without any extra markup. */
.ld-how {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
}

@media (min-width: 760px) {
    .ld-how {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
    }
}

.ld-step {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    background: var(--ld-card);
    border: 1px solid var(--ld-line);
    border-radius: 8px;
    box-shadow: none;
    padding: 16px 18px;
}

/* the dashed connector: vertical between stacked steps… */
.ld-step + .ld-step::before {
    content: "";
    position: absolute;
    inset-inline-start: 33px;
    top: -14px;
    width: 2px;
    height: 14px;
    background: repeating-linear-gradient(to bottom, rgba(126, 5, 155, .55) 0 4px, transparent 4px 8px);
}

/* …and horizontal in the one-row layout, in the gap before each circle. */
@media (min-width: 760px) {
    .ld-step + .ld-step::before {
        inset-inline-start: -16px;
        top: 31px;
        width: 16px;
        height: 2px;
        background: repeating-linear-gradient(to right, rgba(126, 5, 155, .55) 0 4px, transparent 4px 8px);
    }
}

/* the number: a white circle with a 2px plum outline and a plum numeral */
.ld-step-n {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 50%;
    background: var(--card);
    border: 2px solid var(--ld-plum);
    color: var(--ld-plum);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    box-shadow: none;
}

.ld-step-t {
    min-width: 0;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ld-ink);
}

/* ------------------------------- footer --------------------------------- */

/* the theme's closing band: deep plum, white and lilac text, orange on hover */
.ld-foot {
    margin-top: 34px;
    background: linear-gradient(160deg, var(--ld-deep) 0%, var(--ld-ink) 100%);
    border-top: 0;
}

.ld-foot-in {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 24px 16px;
    max-width: 1180px;
    margin: 0 auto;
}

.ld-foot-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

/* The footer's logo sits on a small white plate: the mark is purple and orange,
   and it has to stay legible on the deep plum band. The artwork itself is
   untouched — only a background is added behind it. */
.ld-foot-logo {
    display: block;
    flex: 0 0 auto;
    box-sizing: content-box;
    width: auto;
    height: 26px;
    padding: 5px 7px;
    border-radius: 5px;
    background: var(--card);
}

.ld-foot-txt {
    min-width: 0;
}

.ld-foot-name {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
}

/* the small bold lilac link, orange on hover */
.ld-foot-link {
    display: inline-block;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ld-lilac);
    overflow-wrap: anywhere;
}

.ld-foot-link:hover {
    color: var(--ld-orange);
}

.ld-foot-btn {
    flex: 0 0 auto;
}

@media (max-width: 460px) {
    .ld-foot-btn {
        flex: 1 1 100%;
    }
}

/* ===========================================================================
   The pricing page — "/pricing" on a platform host.

   The landing page's sibling: the same .ld shell, header, footer and --ld-*
   theme values. The plans are the only thing of its own, and they are drawn
   with borders, shadows and gradients alone — no picture, no icon font, no
   library, and nothing invented:

   * one soft wash behind everything (lavender into a warm peach, with two very
     light glows), the head, the cards and the closing line all sitting on it;
   * five cards in one row from 1080px, three from 860px, two from 620px, one on
     a phone — equal heights, because the grid stretches every card in a row and
     each card is a column;
   * a clear hierarchy inside a card: the period name small and quiet, the price
     very large and tight, "for 3 months" small and muted under it, the button,
     a hairline, then the six shared lines with their small accent checks;
   * the 1 Year card is the hero: the accent gradient (plum to a deeper plum),
     white text, the orange button and the "Popular" pill on its top edge, with
     a deeper shadow so it sits above the other four;
   * the other four stay light: a hairline border, a subtle accent line across
     the top, and on hover the border takes the accent and the card lifts 5px;
   * everything is laid out with logical properties, so the page mirrors in
     Arabic exactly like the landing page does.

   The two marketing pages are always light (ALWAYS_LIGHT_PATHS in index.html,
   MS.isAlwaysLight in ms.js), so nothing here has a dark reading.
   =========================================================================== */

/* The pricing page and the signup page share one wash and one accent: a
   lavender-to-peach field with two very light glows, and the brand accent
   scoped to the section. */
.pr-band,
.su-band {
    /* the brand accent, scoped to these sections */
    --pr-acc: #880290;
    --pr-acc-deep: #4b0082;
    --pr-acc-line: rgba(136, 2, 144, .16);

    padding: 56px 0 60px;
    background-color: var(--ld-page);
    background-image:
        radial-gradient(620px 300px at 10% 0%, rgba(249, 161, 102, .16) 0%, rgba(249, 161, 102, 0) 70%),
        radial-gradient(640px 320px at 92% 4%, rgba(136, 2, 144, .08) 0%, rgba(136, 2, 144, 0) 72%),
        linear-gradient(180deg, rgba(238, 231, 250, .85) 0%, rgba(251, 227, 214, .4) 100%);
    background-repeat: no-repeat;
    background-size: cover;
}

@media (min-width: 860px) {
    .pr-band,
    .su-band {
        padding: 72px 0 76px;
    }
}

/* the wash runs straight into the footer band on these pages */
.ld-pricing .ld-foot,
.ld-signup .ld-foot {
    margin-top: 0;
}

/* -------------------------------- the head ------------------------------- */

.pr-top {
    text-align: center;
    margin-bottom: 40px;
}

/* the small uppercase label over the title */
.pr-eyebrow {
    margin: 0;
    color: var(--pr-acc);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.pr-title {
    margin-top: 14px;
    font-size: clamp(28px, 5vw, 46px);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -.02em;
    color: var(--ld-ink);
    overflow-wrap: break-word;
}

/* the key words of the title, in the accent and a little firmer */
.pr-title-acc {
    color: var(--pr-acc);
    font-weight: 600;
}

.pr-sub {
    margin: 14px auto 0;
    max-width: 560px;
    font-size: 15px;
    line-height: 1.65;
    color: var(--ld-body);
}

/* -------------------------------- the grid ------------------------------- */

.pr-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    /* room for the Popular pill, which sits on a card's top edge */
    padding-top: 16px;
    align-items: stretch;
}

@media (min-width: 620px) {
    .pr-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 860px) {
    .pr-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1080px) {
    .pr-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 14px;
    }
}

/* --------------------------------- a card -------------------------------- */

/* The light card: white, a 1px hairline, a 22px radius, a soft layered shadow
   and the subtle accent line across its top (a 3px background strip, which the
   rounded corners clip by themselves). */
.pr-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 26px 22px 24px;
    border: 1px solid rgba(48, 25, 52, .08);
    border-radius: 22px;
    background-color: #fff;
    background-image: linear-gradient(90deg,
            var(--pr-acc) 0%,
            rgba(136, 2, 144, .22) 55%,
            rgba(249, 161, 102, .55) 100%);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% 3px;
    box-shadow: 0 1px 2px rgba(48, 25, 52, .04), 0 14px 30px -20px rgba(48, 25, 52, .35);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

@media (min-width: 620px) {
    .pr-card {
        padding: 28px 24px 26px;
    }
}

/* five in a row: a little less air, so each column still reads comfortably */
@media (min-width: 1080px) {
    .pr-card {
        padding: 24px 20px 22px;
    }
}

/* the four light cards lift 5px and their hairline turns accent-coloured */
.pr-card:not(.pr-card-hero):hover {
    border-color: var(--pr-acc-line);
    box-shadow: 0 1px 2px rgba(48, 25, 52, .05), 0 22px 40px -24px rgba(136, 2, 144, .4);
    transform: translateY(-5px);
}

/* the 1 Year card: the hero, filled with the accent gradient. Its own
   background-image replaces the light card's 3px strip, so the size is reset. */
.pr-card-hero {
    border-color: transparent;
    color: #fff;
    background-color: var(--pr-acc-deep);
    background-image: linear-gradient(160deg, var(--pr-acc) 0%, var(--pr-acc-deep) 100%);
    background-position: center;
    background-size: 100% 100%;
    box-shadow: 0 2px 4px rgba(48, 25, 52, .08), 0 24px 46px -22px rgba(75, 0, 130, .62);
}

.pr-card-hero:hover {
    transform: translateY(-6px);
    box-shadow: 0 2px 6px rgba(48, 25, 52, .1), 0 30px 54px -24px rgba(75, 0, 130, .7);
}

.pr-card-hero .pr-name {
    color: rgba(255, 255, 255, .82);
}

.pr-card-hero .pr-amount {
    color: #fff;
}

.pr-card-hero .pr-per {
    color: rgba(255, 255, 255, .8);
}

.pr-card-hero .pr-feats {
    border-top-color: rgba(255, 255, 255, .24);
}

.pr-card-hero .pr-feat {
    color: rgba(255, 255, 255, .92);
}

.pr-card-hero .pr-tick {
    color: #fff;
}

/* the "Popular" pill on the hero card's top edge — never wider than the card */
.pr-badge {
    position: absolute;
    top: 0;
    inset-inline-start: 50%;
    transform: translate(-50%, -50%);
    max-width: calc(100% - 24px);
    padding: 5px 13px;
    border-radius: 999px;
    background: #fff;
    color: var(--pr-acc);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0 8px 18px -8px rgba(75, 0, 130, .55);
}

/* Arabic is never letter-spaced and never uppercased */
.ld[lang="ar"] .pr-eyebrow,
.ld[lang="ar"] .pr-badge {
    letter-spacing: 0;
}

/* the period name: small and quiet, above the price */
.pr-name {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .01em;
    color: var(--ld-body);
    overflow-wrap: break-word;
}

/* the price: very large and tight, isolated from the words around it so "$70"
   is never reordered on an Arabic page */
.pr-amount {
    margin-top: 12px;
    font-size: clamp(34px, 4.6vw, 44px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.035em;
    color: var(--ld-ink);
    unicode-bidi: isolate;
}

.pr-per {
    margin-top: 8px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--ld-body);
}

.pr-btn {
    width: 100%;
    margin-top: 20px;
    padding: 12px 14px;
    font-size: 14px;
    line-height: 1.25;
    white-space: normal;
    text-align: center;
}

/* the section's buttons take the cards' softer shape (the .ld theme's 5px
   radius belongs to the landing page's own buttons) */
.pr-band .pr-btn,
.pr-band .pr-close-btn {
    border-radius: 12px;
}

/* the thin divider, then the six shared lines with their small accent checks */
.pr-feats {
    list-style: none;
    margin: 22px 0 0;
    padding: 18px 0 0;
    border-top: 1px solid rgba(48, 25, 52, .1);
    display: grid;
    gap: 10px;
}

.pr-feat {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    min-width: 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--ld-body);
    overflow-wrap: break-word;
}

.pr-tick {
    flex: 0 0 auto;
    margin-top: 3px;
    color: var(--pr-acc);
}

/* ---------------------------- the closing line --------------------------- */

.pr-close {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-top: 40px;
    text-align: center;
}

.pr-close-line {
    margin: 0;
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.6;
    color: var(--ld-ink);
}

.pr-close-btn {
    flex: 0 0 auto;
    padding: 13px 26px;
    font-size: 15px;
}

@media (min-width: 720px) {
    .pr-close {
        flex-direction: row;
        justify-content: center;
        gap: 20px;
    }
}

/* the lift is the only motion on this page: none of it when the visitor asked
   for less motion */
@media (prefers-reduced-motion: reduce) {
    .pr-card {
        transition: none;
    }

    .pr-card:hover,
    .pr-card:not(.pr-card-hero):hover,
    .pr-card-hero:hover {
        transform: none;
    }
}

/* ===========================================================================
   The signup page — "/signup" on a platform host.

   The marketing pages' sibling: it rides the same wash and the same accent
   (.pr-band / .su-band above) and holds one white card with the form. Always
   light, like the landing page and /pricing.

   The fields are the app's own (.ms-form-grid / .ms-field / .ms-label /
   .ms-input), so they read exactly like the sign-in card's; the note line is
   .ms-note, the same line the sign-in card uses for its errors.
   =========================================================================== */

.su-card {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    padding: 28px 22px 24px;
    border: 1px solid rgba(48, 25, 52, .08);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(48, 25, 52, .04), 0 20px 40px -26px rgba(48, 25, 52, .4);
}

@media (min-width: 620px) {
    .su-card {
        padding: 34px 32px 30px;
    }
}

.su-title {
    margin: 0;
    font-size: clamp(24px, 4vw, 30px);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.02em;
    color: var(--ld-ink);
    text-align: center;
    overflow-wrap: break-word;
}

.su-sub {
    margin: 10px auto 0;
    max-width: 420px;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--ld-body);
    text-align: center;
}

.su-form {
    margin-top: 24px;
}

/* two columns once the card is wide enough: email and phone share a row, the
   three longer fields take the whole width */
@media (min-width: 560px) {
    .su-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .su-form .su-span2 {
        grid-column: span 2;
    }
}

/* the honeypot ("website"): off-screen and out of the tab order, but still a
   field a bot fills — a person never meets it */
.su-hp {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.su-submit {
    width: 100%;
    margin-top: 18px;
    padding: 13px 18px;
    font-size: 15px;
    line-height: 1.25;
    text-align: center;
}

/* the section's buttons take the cards' softer shape (the .ld theme's 5px
   radius belongs to the landing page's own buttons) */
.su-card .su-submit {
    border-radius: 12px;
}

/* the busy ring inside the button, shown while the endpoint is working */
.su-spin {
    display: none;
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    border: 2px solid rgba(255, 255, 255, .45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: su-spin .7s linear infinite;
}

.su-submit.is-busy .su-spin {
    display: block;
}

@keyframes su-spin {
    to {
        transform: rotate(360deg);
    }
}

/* a busy ring that stops turning says nothing: it only turns slower */
@media (prefers-reduced-motion: reduce) {
    .su-spin {
        animation-duration: 2.4s;
    }
}

.su-alt {
    margin-top: 16px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--ld-body);
    text-align: center;
}

/* the quiet line under the card: the trial, and the way to the plans */
.su-trial {
    margin: 22px auto 0;
    max-width: 460px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--ld-body);
    text-align: center;
}

.su-alt a,
.su-trial a {
    color: var(--pr-acc);
    font-weight: 700;
}

.su-alt a:hover,
.su-trial a:hover {
    text-decoration: underline;
}

/* ===========================================================================
   The landing page's illustrations.

   Everything is hand-written inline SVG: a shared palette of classes (below),
   shapes only. No external files, no icon font, no library. Every drawing is a
   viewBox that fills its container, so it scales down to a 360px phone and up
   to a desktop without a single fixed pixel in the markup.
   =========================================================================== */

.ld-art {
    display: block;
    width: 100%;
    height: auto;
}

/* A drawing sits beside the text in a card: centred, capped, never wider than
   the card, and never mirrored — a picture, not a layout. */
.ld-fig {
    margin-top: 14px;
    max-width: 520px;
    margin-inline: auto;
    direction: ltr;
}

/* ---- the palette: the theme's plum, orange and peach --------------------- */

/* the soft washes inside the composition (they read on the purple panel) */
.ld-art-bg {
    fill: rgba(255, 255, 255, .07);
}

.ld-art-bg2 {
    fill: rgba(255, 255, 255, .05);
}

/* a mocked screen: white, a hairline plum edge, the theme's small radius feel */
.ld-art-card {
    fill: #fff;
    stroke: rgba(75, 0, 130, .14);
    stroke-width: 1.5;
}

/* the driver's phone: the one orange outline, so it reads first */
.ld-art-phone {
    fill: #fff;
    stroke: var(--ld-orange);
    stroke-width: 2.5;
}

.ld-art-soft {
    fill: #f1ebfa;
}

.ld-art-soft2 {
    fill: #e6dcf4;
}

.ld-art-ink {
    fill: #cfc0e2;
}

/* plum blocks (the theme's headings and outlines) */
.ld-art-acc {
    fill: var(--ld-plum);
}

/* soft lilac */
.ld-art-acc2 {
    fill: var(--ld-lilac);
}

.ld-art-accsoft {
    fill: rgba(126, 5, 155, .2);
}

/* the actions drawn inside the screens */
.ld-art-orange {
    fill: var(--ld-orange);
}

.ld-art-peach {
    fill: var(--ld-peach);
}

.ld-art-white {
    fill: #fff;
}

.ld-art-line {
    fill: none;
    stroke: #e6e0f2;
    stroke-width: 1.5;
    stroke-linecap: round;
}

/* the arrows of the flow, in the accent */
.ld-art-outline {
    fill: none;
    stroke: var(--ld-orange);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* the QR: three finder rings and a handful of modules */
.ld-qr-ring {
    fill: none;
    stroke: var(--ld-plum);
    stroke-width: 2.4;
    stroke-linejoin: round;
}

/* the scan frame over a label, and the line it reads */
.ld-art-scanframe {
    fill: none;
    stroke: var(--ld-orange);
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ld-art-scan {
    fill: none;
    stroke: var(--ld-orange);
    stroke-width: 2;
    stroke-linecap: round;
    opacity: .5;
}

/* the label's trim: a printed, dashed cut line */
.ld-art-dash {
    fill: none;
    stroke: rgba(126, 5, 155, .3);
    stroke-width: 1.6;
    stroke-dasharray: 6 6;
}

/* The one word on a label. Poppins, spaced, in plum — with Cairo behind it, so
   a label in Arabic is not a row of boxes either. */
.ld-art-txt {
    font-family: var(--font-ui);
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 3px;
    fill: var(--ld-plum);
}

/* ---- motion: one short rise, and nothing else ---------------------------- */

@keyframes ld-rise {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ld-hero-txt {
    animation: ld-rise .45s ease-out both;
}

.ld-hero-art {
    animation: ld-rise .55s ease-out .06s both;
}

.ld-card {
    animation: ld-rise .45s ease-out both;
}

.ld-card:nth-child(1) {
    animation-delay: .02s;
}

.ld-card:nth-child(2) {
    animation-delay: .07s;
}

.ld-card:nth-child(3) {
    animation-delay: .12s;
}

.ld-card:nth-child(4) {
    animation-delay: .17s;
}

.ld-card:nth-child(5) {
    animation-delay: .22s;
}

.ld-card:nth-child(6) {
    animation-delay: .27s;
}

.ld-fig {
    animation: ld-rise .5s ease-out both;
}

@media (prefers-reduced-motion: reduce) {

    .ld-hero-txt,
    .ld-hero-art,
    .ld-card,
    .ld-fig {
        animation: none;
    }
}

/* ===========================================================================
   Storefront: the catalogue's filters.

   One panel, two shapes: a bottom sheet on a phone and a column beside the
   product grid from 960px up. The same elements and the same controls in both,
   so the two devices can never show different filters — only the CSS moves
   them. Left/right is always written with the logical properties, so Arabic
   mirrors itself.
   =========================================================================== */

.sf-shop {
    margin-top: 12px;
}

/* ---- the panel: a bottom sheet on a phone ------------------------------- */

.sf-filters {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 66;
    display: flex;
    flex-direction: column;
    max-height: 86vh;
    background: var(--card);
    border-radius: 22px 22px 0 0;
    box-shadow: var(--sh-lg);
    transform: translateY(101%);
    visibility: hidden;
    transition: transform .22s ease, visibility .22s ease;
}

.sf-filters.is-open {
    transform: translateY(0);
    visibility: visible;
}

/* the sheet's backdrop, only ever shown with the sheet — and only where the
   sheet exists (a wide screen shows the panel as a column instead) */
.sf-fback {
    display: none;
}

@media (max-width: 959px) {
    .sf-fback.is-on {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 65;
        background: var(--scrim);
        backdrop-filter: blur(2px);
    }
}

.sf-filters-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
}

.sf-filters-title {
    font-size: 16px;
    font-weight: 600;
}

.sf-filters-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.sf-filters-foot {
    padding: 12px 16px 16px;
    border-top: 1px solid var(--line);
    background: var(--card);
}

.sf-fblock {
    padding: 14px 16px;
    border-bottom: 1px solid var(--line-2);
}

.sf-fblock:last-child {
    border-bottom: 0;
}

.sf-fh {
    margin-bottom: 10px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ink-3);
}

/* ---- the categories: a row each, ticked when picked --------------------- */

.sf-fcats {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sf-fcat {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: var(--r-xs);
    background: var(--card);
    color: var(--ink-2);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    text-align: start;
    cursor: pointer;
}

.sf-fcat::before {
    content: "";
    flex: 0 0 15px;
    width: 15px;
    height: 15px;
    border: 1.5px solid var(--line);
    border-radius: 4px;
    background: var(--card);
}

.sf-fcat.is-on {
    border-color: var(--acc-line);
    background: var(--acc-soft);
    color: var(--acc-text);
}

.sf-fcat.is-on::before {
    border-color: var(--acc-text);
    background: var(--acc-fill);
    box-shadow: inset 0 0 0 2px #fff;
}

.sf-fcat-n {
    flex: 1 1 auto;
    min-width: 0;
}

.sf-fcat-c {
    flex: 0 0 auto;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--ink-3);
}

.sf-fcat.is-on .sf-fcat-c {
    color: var(--acc-text);
}

/* ---- the store's option groups: Size · Color · Volume … ------------------ */
/* One block per OptionName the owner typed, built exactly like the CATEGORY
   block above it: the same heading, a direct child of the block and on the same
   start edge, then the values in a list that fills the panel. The chips keep the
   category rows' gap, border, radius and selected state — only the tick box
   gives way to a colour swatch. Every side is a logical property, so Arabic
   mirrors itself exactly as the category rows do. */

/* the loop wrapper makes no box of its own: its heading and its list are laid
   out as the category block's own children (see the markup) */
.sf-foptgroup {
    text-align: start;
}

/* the same heading as the CATEGORY block, on the start edge, with the space
   between one group and the next above it */
.sf-foptgroup > .sf-fh {
    margin-top: 14px;
    text-align: start;
}

.sf-foptgroup:first-child > .sf-fh {
    margin-top: 0;
}

.sf-fopts {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: 6px;
    width: 100%;
    text-align: start;
}

/* one value: the category row's own box, minus the tick box */
.sf-fopt {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    max-width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: var(--r-xs);
    background: var(--card);
    color: var(--ink-2);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    text-align: start;
    cursor: pointer;
}

.sf-fopt:hover {
    border-color: var(--acc-line);
    color: var(--acc-text);
}

.sf-fopt.is-on {
    border-color: var(--acc-line);
    background: var(--acc-soft);
    color: var(--acc-text);
}

/* the value's own label holds the row's spare width, like the category row's
   name, so the number always sits on the far end */
.sf-fopt-n {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.sf-fopt-c {
    flex: 0 0 auto;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--ink-3);
}

.sf-fopt.is-on .sf-fopt-c {
    color: var(--acc-text);
}

/* The option block is aligned exactly like the CATEGORY block above it — heading
   and chips on the panel's start edge, rows sharing the panel's width. The id of
   the panel is in these four selectors so nothing else can pull the block to the
   middle: the same rules hold in the bottom sheet (the very same element). */
#sf-filters .sf-foptgroup,
#sf-filters .sf-foptgroup > .sf-fh,
#sf-filters .sf-fopts,
#sf-filters .sf-fopt {
    text-align: start;
}

#sf-filters .sf-fopts {
    justify-content: flex-start;
}

/* the swatch: its own colour, ringed so white and near-white still read */
.sf-sw {
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(20, 12, 24, .22);
}

/* ---- the price window --------------------------------------------------- */

.sf-fprice {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sf-fprice-in {
    width: 100%;
    min-width: 0;
    height: 38px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: var(--r-xs);
    background: var(--card);
    color: var(--ink);
    font-family: inherit;
    font-size: 13.5px;
    -webkit-appearance: none;
    appearance: none;
}

.sf-fprice-in:focus {
    outline: 0;
    border-color: var(--acc-line);
    box-shadow: 0 0 0 3px var(--acc-soft);
}

.sf-fprice-dash {
    flex: 0 0 auto;
    color: var(--ink-3);
}

.sf-fapply {
    width: 100%;
    height: 36px;
    margin-top: 8px;
    border: 1px solid var(--acc-line);
    border-radius: var(--r-xs);
    background: var(--acc-soft);
    color: var(--acc-text);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.sf-fapply:hover {
    background: var(--acc-fill);
    color: #fff;
}

.sf-fchips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.sf-frange {
    padding: 6px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--card);
    color: var(--ink-2);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
}

.sf-frange:hover {
    border-color: var(--acc-line);
    color: var(--acc-text);
}

.sf-frange.is-on {
    border-color: var(--acc-text);
    background: var(--acc-fill);
    color: #fff;
}

.sf-fmuted {
    margin-top: 9px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--ink-3);
}

/* ---- the bar over the grid: Filters · results · sort -------------------- */

.sf-fbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.sf-fbtn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 36px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--card);
    color: var(--ink);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.sf-fbtn:hover {
    border-color: var(--acc-line);
    color: var(--acc-text);
}

.sf-fbtn-n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--acc-fill);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}

.sf-fcount {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--ink-2);
}

.sf-sortwrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-inline-start: auto;
}

.sf-sortlab {
    font-size: 12px;
    color: var(--ink-3);
}

.sf-sort {
    height: 36px;
    max-width: 190px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--card);
    color: var(--ink);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
}

.sf-sort:focus {
    outline: 0;
    border-color: var(--acc-line);
    box-shadow: 0 0 0 3px var(--acc-soft);
}

/* ---- what is in force: one removable pill per filter -------------------- */

.sf-fapplied {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
}

.sf-fapplied-h {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.sf-fpill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 1px solid var(--acc-line);
    border-radius: 999px;
    background: var(--acc-soft);
    color: var(--acc-text);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
}

.sf-fpill:hover {
    background: var(--acc-fill);
    color: #fff;
}

.sf-fpill.is-query {
    border-color: var(--line);
    background: var(--card);
    color: var(--ink-2);
}

.sf-fx {
    font-size: 13px;
    line-height: 1;
}

.sf-fclear {
    padding: 5px 8px;
    border: 0;
    background: none;
    color: var(--err);
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.sf-fclear-block {
    display: block;
    width: 100%;
    margin-bottom: 8px;
    text-align: center;
}

/* On a phone the sort label takes the row's spare space; a narrow screen keeps
   only the picker. */
@media (max-width: 479px) {
    .sf-sortlab {
        display: none;
    }

    .sf-sort {
        max-width: 150px;
    }
}

/* ---- a wide screen: the same panel, as a column beside the grid --------- */

@media (min-width: 960px) {
    .sf-fbtn,
    .sf-fback,
    .sf-filters-x,
    .sf-filters-done {
        display: none !important;
    }

    .sf-shop {
        display: grid;
        grid-template-columns: 256px minmax(0, 1fr);
        gap: 18px;
        align-items: start;
        margin-top: 14px;
    }

    .sf-filters {
        position: sticky;
        top: calc(var(--sf-head-h) + 62px);
        inset-inline: auto;
        bottom: auto;
        max-height: none;
        transform: none;
        visibility: visible;
        border: 1px solid var(--line);
        border-radius: var(--r);
        box-shadow: var(--sh-sm);
    }

    .sf-filters-head {
        padding: 12px 14px;
    }

    .sf-filters-body {
        overflow: visible;
    }

    .sf-filters-foot {
        padding: 12px 14px 14px;
    }

    .sf-fblock {
        padding: 12px 14px;
    }

    .sf-fcount {
        font-size: 13px;
    }
}

/* Phones: only the Filters pill, the result count and the sort fit one row. */
@media (max-width: 959px) {
    .sf-fcount {
        order: 3;
        flex: 1 1 100%;
    }

    .sf-sortwrap {
        margin-inline-start: auto;
    }
}

/* ===========================================================================
   Storefront: the product page's gallery, stock line and share row.
   =========================================================================== */

/* Products.TrackStock / Products.Stock, one line above the buy button: a dot in
   the tone of the state and the count the store really has. Nothing at all when
   the store does not track stock. */
.sf-prod-stock {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
}

.sf-prod-stock::before {
    content: "";
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

.sf-prod-stock.is-in {
    color: var(--ok);
}

.sf-prod-stock.is-low {
    color: var(--warn);
}

.sf-prod-stock.is-out {
    color: var(--err);
}

/* The whole picture is a button that opens the zoom lightbox. It sits above the
   picture but below the arrows, and carries a small magnifier in its corner. */
.sf-zoom-open {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
}

.sf-zoom-open svg {
    position: absolute;
    inset-inline-end: 10px;
    bottom: 10px;
    width: 30px;
    height: 30px;
    padding: 7px;
    border-radius: 50%;
    background: var(--surf-94);
    color: var(--ink-2);
    box-shadow: var(--sh-sm);
    box-sizing: content-box;
}

/* The prev/next arrows of the strip: only when there is more than one picture.
   They keep their reading-order place in Arabic (inline-start is the right). */
/* The arrows' wrapper makes no box of its own, so the two buttons sit on the
   picture's own edges and the picture stays centred. */
.sf-prod-nav {
    display: contents;
}

.sf-prod-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: rgba(255, 255, 255, .94);
    color: var(--ink);
    cursor: pointer;
    box-shadow: var(--sh-sm);
}

.sf-prod-arrow:hover {
    background: var(--acc-fill);
    border-color: var(--acc-text);
    color: #fff;
}

.sf-prod-arrow.is-prev {
    inset-inline-start: 8px;
}

.sf-prod-arrow.is-next {
    inset-inline-end: 8px;
}

/* The share row: two outline pills under the buy button. */
.sf-prod-share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}

.sf-prod-share-h {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.sf-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--card);
    color: var(--ink-2);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    cursor: pointer;
}

.sf-share-btn:hover {
    border-color: var(--acc-line);
    background: var(--acc-soft);
    color: var(--acc-text);
}

.sf-share-btn.is-wa {
    border-color: var(--acc-line);
    color: var(--acc-text);
}

/* The out-of-stock product's own action: the accent as an outline, so it reads
   as an offer and never competes with a real "Add to cart". */
.sf-prod-add.is-notify {
    background: var(--card);
    border: 1px solid var(--acc-text);
    color: var(--acc-text);
    box-shadow: none;
}

.sf-prod-add.is-notify:hover {
    background: var(--acc-soft);
}

/* ===========================================================================
   Storefront: the zoom lightbox.

   Plain DOM, built when a picture is opened and removed when it is closed: a
   dark stage over the page, the picture in the middle, the close button in the
   corner and the hint along the bottom. The picture's own transform is written
   by the view (zoom on hover, the wheel, a pinch and a drag).
   =========================================================================== */

.sf-zoom {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sf-zoom-back {
    position: absolute;
    inset: 0;
    background: var(--scrim-strong);
}

.sf-zoom-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 52px 12px;
    overflow: hidden;
    touch-action: none;
}

.sf-zoom-img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    transform-origin: 50% 50%;
    will-change: transform;
    cursor: zoom-in;
    user-select: none;
    -webkit-user-drag: none;
}

.sf-zoom-close {
    position: absolute;
    top: 12px;
    inset-inline-end: 12px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: var(--surf-94);
    color: var(--ink);
    font-family: inherit;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--sh);
}

.sf-zoom-hint {
    position: absolute;
    inset-inline: 0;
    bottom: 14px;
    z-index: 3;
    padding: 0 16px;
    text-align: center;
    font-size: 12px;
    line-height: 1.4;
    color: rgba(255, 255, 255, .82);
    pointer-events: none;
}

/* ===========================================================================
   Dashboard: the catalogue's own modules (Stage 2).

   The bell and its counter in the top bar, the product form's picture strip
   and its variant rows, the warehouse bar of the Inventory screen, and the
   coupons table. Everything is built for a phone first and widened from there,
   like the rest of the dashboard.
   =========================================================================== */

/* ---- the notifications bell in the top bar ------------------------------ */

.ms-bell {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--card);
    color: var(--ink-2);
    cursor: pointer;
}

.ms-bell:hover {
    border-color: var(--acc-line);
    color: var(--acc-text);
}

.ms-bell-n {
    position: absolute;
    top: -4px;
    inset-inline-end: -4px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--danger-fill);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1;
}

/* ---- the product form's pictures --------------------------------------- */

.ms-mediagrid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}

.ms-media {
    position: relative;
    width: 104px;
    flex: 0 0 104px;
    border: 1px solid var(--line);
    border-radius: var(--r-xs);
    background: var(--line-2);
    overflow: hidden;
}

.ms-media.is-cover {
    border-color: var(--acc-text);
    box-shadow: 0 0 0 2px var(--acc-soft);
}

.ms-media img {
    display: block;
    width: 100%;
    height: 76px;
    object-fit: cover;
}

.ms-media-acts {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 4px;
    background: var(--card);
}

.ms-media-btn {
    flex: 1 1 auto;
    min-width: 22px;
    padding: 3px 5px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--card);
    color: var(--ink-2);
    font-family: inherit;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
}

.ms-media-btn:hover:not([disabled]) {
    border-color: var(--acc-line);
    color: var(--acc-text);
}

.ms-media-btn[disabled] {
    opacity: .4;
    cursor: default;
}

.ms-media-btn.is-on {
    border-color: var(--acc-text);
    background: var(--acc-fill);
    color: #fff;
}

.ms-media-btn.is-x {
    flex: 0 0 24px;
    color: var(--err);
}

.ms-mediatools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.ms-mediatools .ms-input {
    flex: 1 1 220px;
    min-width: 0;
}

/* a field row with a button beside it (the barcode and its Generate) */
.ms-inline {
    display: flex;
    gap: 8px;
}

.ms-inline .ms-input {
    flex: 1 1 auto;
    min-width: 0;
}

.ms-inline .ms-btn {
    flex: 0 0 auto;
}

/* ---- the product form's variants --------------------------------------- */

.ms-pv {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

.ms-pv-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.ms-pv-head .ms-toolbar {
    margin: 0;
}

.ms-pv-head .ms-select {
    max-width: 160px;
}

.ms-pv-rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 12px;
}

/* one heading per option group above its own values */
.ms-pv-group-h {
    margin-top: 10px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.ms-pv-group-h:first-child {
    margin-top: 0;
}

/* one row: option · value · price · qty · barcode · remove */
.ms-pv-row {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.1fr) minmax(0, .9fr) minmax(0, .7fr)
        minmax(0, 1.2fr) 32px;
    gap: 6px;
    align-items: center;
}

.ms-pv-row .ms-inv-mov-x {
    position: static;
}

.ms-pv-in {
    min-width: 0;
}

.ms-pv-empty {
    margin-top: 10px;
    font-size: 12.5px;
    color: var(--ink-3);
}

.ms-pv-addrow {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
    align-items: center;
}

.ms-pv-addrow .ms-input {
    flex: 1 1 200px;
    min-width: 0;
}

/* On a phone the six fields stack: one variant is a small card. */
@media (max-width: 719px) {
    .ms-pv-row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        padding: 8px;
        border: 1px solid var(--line-2);
        border-radius: var(--r-xs);
    }

    .ms-pv-row .ms-inv-mov-x {
        grid-column: 2;
        justify-self: end;
    }
}

/* ---- the Inventory screen's warehouse bar ------------------------------ */

.ms-wh-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--line-2);
}

.ms-wh-bar .ms-label {
    margin: 0;
}

.ms-wh-bar .ms-select {
    max-width: 260px;
}

.ms-wh-bar .ms-hint {
    flex: 1 1 180px;
}

/* the quantity of one product in the warehouse on screen */
.ms-inv-qty {
    width: 82px;
    height: 32px;
    padding: 0 8px;
    text-align: end;
}

/* ---- the coupons table ------------------------------------------------- */

.ms-cp-table {
    min-width: 820px;
}

.ms-cp-table .ms-cp-cell-code {
    min-width: 150px;
    white-space: normal;
}

.ms-cp-code {
    display: inline-block;
    padding: 2px 8px;
    border: 1px dashed var(--acc-line);
    border-radius: 6px;
    background: var(--acc-soft);
    color: var(--acc-text);
    font-weight: 700;
    letter-spacing: .04em;
}

.ms-cp-table .ms-cp-cell-scope {
    white-space: normal;
    min-width: 160px;
    max-width: 240px;
}

.ms-cp-acts {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* The notification list's date and contact lines wrap like the other rows. */
.ms-row-meta a {
    color: var(--acc-text);
    overflow-wrap: anywhere;
}

/* ===========================================================================
   POS — the till (/pos, /pos/<slug>).

   A public page of its own: no dashboard chrome, no storefront chrome. Mobile
   first (one column: the product grid, then the cart under it), two columns
   from 1000px (grid beside a cart that stays put). Every side is written with a
   logical property, so an Arabic page mirrors itself — the keypad included.
   =========================================================================== */

.pos {
    min-height: 100vh;
    padding-bottom: 24px;
    background: var(--bg);
    color: var(--ink);
}

/* ---- the header --------------------------------------------------------- */

.pos-top {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--card);
    border-bottom: 1px solid var(--line);
}

.pos-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.pos-mark {
    flex: 0 0 40px;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--acc-soft);
    color: var(--acc-text);
    font-weight: 700;
    font-family: inherit;
}

.pos-mark img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pos-brand-txt {
    min-width: 0;
}

.pos-store {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pos-sub {
    font-size: 11.5px;
    line-height: 1.35;
    color: var(--ink-3);
    overflow-wrap: anywhere;
}

.pos-topacts {
    margin-inline-start: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.pos-lang {
    height: 34px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--card);
    color: var(--ink);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}

.pos-lang:hover {
    border-color: var(--acc-line);
    color: var(--acc-text);
}

.pos-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 34px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--card);
    color: var(--ink);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}

.pos-btn.is-ghost:hover {
    border-color: var(--acc-line);
    color: var(--acc-text);
}

.pos-btn.pos-block {
    width: 100%;
    margin-top: 8px;
    border-radius: var(--r-sm);
    height: 44px;
}

.pos-loading {
    padding: 28px 16px;
    text-align: center;
    font-size: 14px;
    color: var(--ink-3);
}

/* ---- the drawer line under the header ---------------------------------- */
/* Both drawers, side by side: each one's running cash and what moved in and out
   of it. The server's own figures, painted under the header. */
.pos-cashline {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 14px;
    background: var(--mute-soft);
    border-bottom: 1px solid var(--line);
}

.pos-drawerbox {
    flex: 1 1 150px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 6px 10px;
    border: 1px solid var(--line);
    border-radius: var(--r-xs);
    background: var(--card);
    text-align: start;
}

.pos-drawerbox-k {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--ink-3);
}

.pos-drawerbox-v {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.pos-drawerbox-s {
    font-size: 10.5px;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.pos-cashitem {
    font-variant-numeric: tabular-nums;
}

/* ---- the keypad's own branding ----------------------------------------- */
/* The store above the keypad: its logo when it has one, its name otherwise (an
   initial in a circle), then its own WhatsApp and email under the keys and the
   platform line. */
.pos-login-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

.pos-login-logo {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    overflow: hidden;
    border-radius: 50%;
    background: var(--acc-soft);
    color: var(--acc-text);
    font-size: 24px;
    font-weight: 700;
}

.pos-login-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pos-login-name {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    overflow-wrap: anywhere;
}

.pos-login-contact {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 16px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--line-2);
}

.pos-contact-a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-2);
    text-decoration: none;
    overflow-wrap: anywhere;
    text-align: start;
}

.pos-contact-a:hover {
    color: var(--acc-text);
}

.pos-powered {
    margin-top: 12px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .08em;
    color: var(--ink-3);
    text-align: center;
}

/* ---- the drawer panel's own rows --------------------------------------- */

.pos-dfield {
    margin-top: 12px;
}

.pos-dcur {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: 8px;
    margin-top: 6px;
}

/* ---- the shift panel: orders and drawer movements ----------------------- */

.pos-shift-sec {
    margin-top: 14px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--line-2);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-3);
    text-align: start;
}

.pos-move {
    padding: 9px 0;
    border-bottom: 1px solid var(--line-2);
    text-align: start;
}

.pos-move-dir {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ink);
    overflow-wrap: anywhere;
}

.pos-move-note {
    font-size: 11.5px;
    color: var(--ink-2);
    overflow-wrap: anywhere;
}

.pos-move-meta,
.pos-move-bal {
    font-size: 11px;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}

/* ---- the drawer panel: cash in, cash out, an expense -------------------- */

.pos-modal {
    position: fixed;
    inset: 0;
    z-index: 75;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: var(--scrim);
}

.pos-modal-back {
    position: absolute;
    inset: 0;
}

.pos-modal-card {
    position: relative;
    width: 100%;
    max-width: 460px;
    max-height: 88vh;
    padding: 16px 16px 20px;
    overflow-y: auto;
    background: var(--card);
    border-radius: 20px 20px 0 0;
    box-shadow: var(--sh-lg);
}

.pos-modal-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pos-h3 {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 16px;
    font-weight: 700;
    text-align: start;
}

.pos-dtypes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.pos-dtype {
    height: 44px;
    padding: 0 8px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--card);
    color: var(--ink);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.pos-dtype:hover {
    border-color: var(--acc-line);
    color: var(--acc-text);
}

.pos-dtype.is-on {
    border-color: var(--acc-text);
    background: var(--acc-fill);
    color: #fff;
}

@media (min-width: 700px) {
    .pos-modal {
        align-items: center;
    }

    .pos-modal-card {
        border-radius: var(--r);
    }
}

/* ---- the orders of the open shift (each one printable again) ------------ */

.pos-order {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line-2);
}

.pos-order-txt {
    flex: 1 1 auto;
    min-width: 0;
    text-align: start;
}

.pos-order-no {
    font-size: 13.5px;
    font-weight: 700;
}

.pos-order-m {
    font-size: 11.5px;
    color: var(--ink-3);
    overflow-wrap: anywhere;
}

.pos-order-b {
    flex: 0 0 auto;
}


/* ---- the cards: keypad, shift, confirmation, close ---------------------- */

.pos-card {
    width: 100%;
    max-width: 560px;
    margin: 16px auto;
    padding: 18px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--sh-sm);
}

.pos-h1 {
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3;
    text-align: start;
}

.pos-p {
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink-2);
    text-align: start;
}

.pos-field {
    margin-top: 12px;
}

.pos-label {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-2);
    text-align: start;
}

.pos-biginput {
    height: 52px;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: .02em;
}

.pos-big {
    display: block;
    width: 100%;
    height: 52px;
    margin-top: 12px;
    border: 1px solid var(--acc-text);
    border-radius: var(--r-sm);
    background: var(--acc-fill);
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

.pos-big:hover {
    background: var(--acc-fill-h);
    border-color: var(--acc-dark);
}

.pos-big:disabled {
    opacity: .6;
    cursor: default;
}

/* ---- the keypad --------------------------------------------------------- */

.pos-codedisp {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 64px;
    margin-top: 14px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--mute-soft);
    color: var(--ink);
    font-size: 30px;
    font-weight: 700;
    letter-spacing: .12em;
    font-variant-numeric: tabular-nums;
    direction: ltr;
}

.pos-codedisp.is-empty {
    color: var(--ink-3);
    letter-spacing: .2em;
}

.pos-keypad {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}

.pos-key {
    height: 64px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--card);
    color: var(--ink);
    font-family: inherit;
    font-size: 24px;
    font-weight: 700;
    cursor: pointer;
    font-variant-numeric: tabular-nums;
}

.pos-key:hover {
    border-color: var(--acc-line);
    color: var(--acc-text);
}

.pos-key:active {
    background: var(--acc-soft);
}

.pos-key.is-soft {
    font-size: 16px;
    color: var(--ink-2);
}

.pos-key.is-enter {
    grid-column: 1 / -1;
    height: 56px;
    border-color: var(--acc-text);
    background: var(--acc-fill);
    color: #fff;
    font-size: 16px;
}

.pos-key.is-enter:hover {
    background: var(--acc-fill-h);
    color: #fff;
}

/* ---- the till: the grid and the cart ------------------------------------ */

.pos-shop {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding: 14px;
}

.pos-left {
    min-width: 0;
}

.pos-searchbar {
    display: flex;
    gap: 8px;
}

.pos-search {
    flex: 1 1 auto;
    min-width: 0;
    height: 48px;
    padding: 0 14px;
    border: 1px solid var(--input-line);
    border-radius: var(--r-sm);
    background: var(--input-bg);
    color: var(--ink);
    font-family: inherit;
    font-size: 15px;
    text-align: start;
    -webkit-appearance: none;
    appearance: none;
}

.pos-search:focus {
    outline: 0;
    border-color: var(--acc-line);
    box-shadow: 0 0 0 3px var(--acc-soft);
}

/* ---- the category tabs above the tiles ---------------------------------- */
/* One scrollable row on a phone (the row never wraps, so a small screen keeps a
   single line and swipes it), and a wrapping row from 900px where there is room.
   The picked tab wears the store's accent; each one carries its own count. */

.pos-cats {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    padding-bottom: 2px;
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.pos-cats::-webkit-scrollbar {
    display: none;
}

.pos-cat {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--card);
    color: var(--ink);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.pos-cat:hover {
    border-color: var(--acc-line);
    color: var(--acc-text);
}

.pos-cat.is-on {
    border-color: var(--acc-text);
    background: var(--acc-fill);
    color: #fff;
}

.pos-cat-n {
    font-size: 11px;
    font-weight: 700;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}

.pos-cat.is-on .pos-cat-n {
    color: #fff;
    opacity: .85;
}

/* the All button of the empty state: one tap clears the tab */
.pos-empty-all {
    display: inline-flex;
    align-items: center;
    height: 34px;
    margin-top: 10px;
    padding: 0 14px;
    border: 1px solid var(--acc-text);
    border-radius: 999px;
    background: var(--acc-fill);
    color: #fff;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
}

@media (min-width: 900px) {
    .pos-cats {
        flex-wrap: wrap;
        overflow: visible;
    }
}

.pos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.pos-tile {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--card);
    color: inherit;
    font-family: inherit;
    text-align: start;
    cursor: pointer;
}

.pos-tile:hover {
    border-color: var(--acc-line);
    box-shadow: var(--sh-sm);
}

.pos-tile-img {
    display: grid;
    place-items: center;
    aspect-ratio: 1 / 1;
    background: var(--mute-soft);
    color: var(--ink-3);
    font-size: 18px;
    font-weight: 700;
    overflow: hidden;
}

.pos-tile-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pos-tile-b {
    display: block;
    padding: 8px 10px 10px;
    min-width: 0;
}

.pos-tile-n {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ink);
    overflow-wrap: anywhere;
}

.pos-tile-p {
    display: block;
    margin-top: 3px;
    font-size: 13px;
    font-weight: 700;
    color: var(--acc-text);
    line-height: 1.4;
}

.pos-tile-p b {
    font-weight: 700;
}

/* the same three marks the storefront card prints */
.pos-tile-from {
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-3);
}

.pos-tile-was {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--ink-3);
    text-decoration: line-through;
}

.pos-off {
    display: inline-block;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--acc-soft);
    color: var(--acc-text);
    font-size: 10.5px;
    font-weight: 700;
    font-style: normal;
    vertical-align: 1px;
}

.pos-tile-stock {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    color: var(--ink-3);
}

.pos-empty {
    display: none;
    padding: 14px 2px;
    font-size: 13px;
    color: var(--ink-3);
    text-align: start;
}

.pos-empty.is-on {
    display: block;
}

/* the sentence and the All button sit on one line when there is room */
.pos-empty span + .pos-empty-all {
    margin-inline-start: 8px;
    margin-top: 0;
    vertical-align: middle;
}

/* ---- the cart ----------------------------------------------------------- */

.pos-cart {
    min-width: 0;
    padding: 14px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--sh-sm);
}

.pos-cart-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line-2);
    font-size: 14px;
    font-weight: 700;
}

.pos-cart-n {
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-3);
}

.pos-lines {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 44vh;
    margin-top: 10px;
    overflow-y: auto;
}

.pos-cart-empty {
    padding: 12px 0;
    font-size: 13px;
    color: var(--ink-3);
}

.pos-line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 8px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line-2);
}

.pos-line-txt {
    min-width: 0;
    text-align: start;
}

.pos-line-n {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.pos-line-o {
    font-size: 11.5px;
    color: var(--ink-3);
}

.pos-line-p {
    font-size: 11.5px;
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

/* the struck-through price and what the line saved */
.pos-line-was {
    color: var(--ink-3);
    text-decoration: line-through;
}

.pos-line-save {
    display: inline-block;
    margin-inline-start: 4px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--acc-soft);
    color: var(--acc-text);
    font-size: 10.5px;
    font-weight: 700;
    white-space: nowrap;
}

.pos-qty {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    border: 1px solid var(--line);
    border-radius: 999px;
    overflow: hidden;
}

.pos-qty-b {
    width: 30px;
    height: 30px;
    border: 0;
    background: var(--card);
    color: var(--ink);
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}

.pos-qty-b:hover {
    background: var(--acc-soft);
    color: var(--acc-text);
}

.pos-qty span {
    min-width: 22px;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.pos-line-x {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--ink-3);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.pos-line-x:hover {
    background: var(--err-soft);
    color: var(--err);
}

.pos-sum {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
    font-size: 13px;
    color: var(--ink-2);
}

.pos-sum b {
    font-variant-numeric: tabular-nums;
}

.pos-sum.is-total {
    padding-top: 10px;
    border-top: 1px solid var(--line-2);
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
}

.pos-sum.is-change {
    margin-top: 6px;
    color: var(--ink-2);
}

/* the same total in the second drawer */
.pos-sum.is-alt {
    margin-top: 2px;
    font-size: 12px;
    color: var(--ink-3);
}

/* a discount line — the coupon's or the cashier's */
.pos-sum.is-disc {
    margin-top: 6px;
    color: var(--acc-text);
    font-weight: 600;
}

/* ---- the coupon, in the till's payment step ---------------------------- */
/* The storefront's own shape: one field and Apply, then the applied code as a
   tag with what it is worth and an × to drop it. */

.pos-coupon {
    margin-top: 12px;
}

.pos-coupon-row {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

.pos-coupon-in {
    flex: 1 1 auto;
    min-width: 0;
    text-transform: uppercase;
}

.pos-coupon-btn {
    flex: 0 0 auto;
    padding: 0 14px;
    height: 42px;
    border: 1px solid var(--line);
    border-radius: var(--r-xs);
    background: var(--card);
    color: var(--ink);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
}

.pos-coupon-btn:hover {
    border-color: var(--acc-text);
    color: var(--acc-text);
}

.pos-coupon-on {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 6px 8px;
    border: 1px dashed var(--acc-text);
    border-radius: var(--r-xs);
    background: var(--acc-soft);
}

.pos-coupon-tag {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--acc-text);
    overflow-wrap: anywhere;
}

.pos-coupon-amt {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--acc-text);
    font-variant-numeric: tabular-nums;
}

.pos-coupon-x {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--acc-text);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

.pos-coupon-x:hover {
    background: var(--card);
}

/* ---- one drawer's own block in the close panel ------------------------- */

.pos-drawer-block {
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--card);
}

.pos-drawer-h {
    margin-bottom: 6px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--ink-3);
    text-align: start;
}

/* ---- the store's drawers, one card each --------------------------------- */
/* A closed drawer asks for its float in its own currency; an open one shows the
   cash it holds now and its own counts, and can be closed on its own. */

.pos-dcards {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

.pos-dcard {
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--card);
    text-align: start;
}

.pos-dcard.is-open {
    border-color: var(--acc-line);
    background: var(--acc-soft);
}

.pos-dcard-h {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.pos-dcard-n {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14.5px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.pos-dcard-cur {
    flex: 0 0 auto;
    padding: 2px 8px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--card);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--ink-3);
}

/* ---- the Whish Money drawer --------------------------------------------- */
/* It is a drawer of the store, with its own figures — but not a cash box a
   cashier works with: it wears this small badge in the store's accent wherever
   drawers are listed, and it is never one of the cash pickers. */
.pos-wbadge {
    flex: 0 0 auto;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--acc-soft);
    color: var(--acc-text);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.pos-drawerbox-k .pos-wbadge {
    margin-inline-start: 5px;
    vertical-align: middle;
}

.pos-drawerbox.is-whish,
.pos-dcard.is-whish {
    border-color: var(--acc-line);
}

.pos-dcard-state {
    margin-top: 2px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}

.pos-dcard-state.is-open {
    color: var(--acc-text);
}

.pos-dcard-figs {
    margin-top: 8px;
}

.pos-dcard-figs .pos-fig {
    padding: 3px 0;
}

.pos-dcard-acts {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.pos-dcard-open {
    margin-top: 8px;
}

.pos-dcard-in {
    height: 44px;
    font-size: 17px;
    font-weight: 700;
}

.pos-dcard-open .pos-big {
    height: 44px;
    margin-top: 8px;
}

@media (min-width: 700px) {
    .pos-dcards {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }
}

.pos-methods {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.pos-method {
    height: 46px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--card);
    color: var(--ink);
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.pos-method:hover {
    border-color: var(--acc-line);
    color: var(--acc-text);
}

.pos-method.is-on {
    border-color: var(--acc-text);
    background: var(--acc-fill);
    color: #fff;
}

/* The Whish Money block of the payment step: the currency the transfer arrived
   in (USD, or LBP when the store keeps a rate) above the reference field. */
.pos-whish-curs {
    margin: 6px 0 10px;
}

/* ---- the variant sheet -------------------------------------------------- */

.pos-sheet {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: flex;
    align-items: flex-end;
    background: var(--scrim);
}

.pos-sheet.is-hidden {
    display: none !important;
}

.pos-sheet-back {
    position: absolute;
    inset: 0;
}

.pos-sheet-card {
    position: relative;
    width: 100%;
    max-height: 82vh;
    padding: 14px 16px 18px;
    overflow-y: auto;
    background: var(--card);
    border-radius: 20px 20px 0 0;
    box-shadow: var(--sh-lg);
}

.pos-sheet-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pos-sheet-t {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 15px;
    font-weight: 700;
    text-align: start;
}

.pos-sheet-x {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: var(--mute-soft);
    color: var(--ink-2);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.pos-sheet-sub {
    margin-top: 4px;
    font-size: 12px;
    color: var(--ink-3);
    text-align: start;
}

.pos-vars {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.pos-var {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--r-xs);
    background: var(--card);
    color: var(--ink);
    font-family: inherit;
    text-align: start;
    cursor: pointer;
}

.pos-var:hover {
    border-color: var(--acc-line);
    color: var(--acc-text);
}

.pos-var.is-out {
    opacity: .55;
    text-decoration: line-through;
    cursor: default;
}

.pos-var-n {
    font-size: 13px;
    font-weight: 600;
}

.pos-var-p {
    font-size: 12px;
    color: var(--ink-2);
}

.pos-var-s {
    font-size: 11px;
    color: var(--err);
}

/* ---- the confirmations -------------------------------------------------- */

.pos-done .pos-h1 {
    text-align: center;
}

.pos-done .pos-p {
    text-align: center;
}

.pos-done-mark {
    width: 46px;
    height: 46px;
    margin: 4px auto 10px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--ok-soft);
    color: var(--ok);
    font-size: 24px;
    font-weight: 700;
}

.pos-done-body,
.pos-figs {
    margin-top: 12px;
}

.pos-fig {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px solid var(--line-2);
    font-size: 13px;
    color: var(--ink-2);
    text-align: start;
}

.pos-fig b {
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

/* ---- a wide screen: the grid beside a cart that stays put --------------- */
@media (min-width: 1000px) {
    .pos-shop {
        grid-template-columns: minmax(0, 1fr) 380px;
        align-items: start;
        padding: 18px;
        max-width: 1440px;
        margin: 0 auto;
    }

    .pos-cart {
        position: sticky;
        top: 78px;
    }

    .pos-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }

    .pos-lines {
        max-height: none;
    }

    .pos-keypad {
        gap: 12px;
    }

    .pos-key {
        height: 70px;
    }
}

/* ===========================================================================
   Dashboard: the till's books (Accounting).

   Two tables — the shifts and the movements — under one set of filters, with the
   totals bar the filters leave and one shift's detail. The tables keep their
   columns and scroll sideways on a phone instead of squeezing twelve figures
   into 390px; the section itself is `dir`-ed by its own language, so Arabic
   reads from the right.
   =========================================================================== */

.ms-acc-totals {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.ms-acc-tot {
    flex: 1 1 140px;
    min-width: 120px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--card);
}

.ms-acc-tot-k {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ink-3);
    text-align: start;
}

.ms-acc-tot-v {
    display: block;
    margin-top: 4px;
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    text-align: start;
}

/* the sideways scroll of the two wide tables */
.ms-acc-scroll {
    margin-top: 12px;
    overflow-x: auto;
}

/* ---- the drawers card --------------------------------------------------- */
/* One shift's two drawers: their balances, the four movements that can be
   recorded against them, and every movement since the shift opened with the cash
   each drawer held right after it. */
.ms-acc-rec {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--line-2);
}

.ms-chiprow {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.ms-chiprow:first-child {
    margin-top: 0;
}

.ms-hint-sm {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
    text-align: start;
}

/* the two currencies stacked in one cell of the shifts table */
.ms-acc-pair {
    display: block;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ms-acc-pair + .ms-acc-pair {
    color: var(--ink-2);
    font-size: 12px;
}

.ms-acc-t {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    font-size: 12.5px;
}

.ms-acc-t th {
    padding: 8px 10px;
    border-bottom: 1px solid var(--line);
    background: var(--mute-soft);
    color: var(--ink-3);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .02em;
    text-align: start;
    white-space: nowrap;
}

.ms-acc-t td {
    padding: 9px 10px;
    border-bottom: 1px solid var(--line-2);
    color: var(--ink-2);
    text-align: start;
    vertical-align: top;
    font-variant-numeric: tabular-nums;
}

.ms-acc-t tbody tr:hover {
    background: var(--acc-soft);
}

/* a shift row opens its own detail */
.ms-acc-row {
    cursor: pointer;
}

/* the counted-vs-expected difference: green at zero, red otherwise */
.ms-acc-t td.is-ok {
    color: var(--ok);
    font-weight: 700;
}

.ms-acc-t td.is-err {
    color: var(--err);
    font-weight: 700;
}

.ms-acc-pager {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.ms-acc-pagen {
    font-size: 12px;
    color: var(--ink-3);
}

@media (max-width: 479px) {
    .ms-acc-tot {
        flex: 1 1 calc(50% - 10px);
        min-width: 0;
    }
}

/* ---- the drawers of the store (stage 2) ---------------------------------- */
/* The cash every drawer holds now, one card per drawer with its open shift and
   its last closed one, and the list the owner edits. Two currencies are never
   added together: every figure is printed in its own drawer's currency. */

.ms-acc-dsum {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.ms-acc-dsum-h {
    margin-top: 14px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .03em;
    color: var(--ink-3);
    text-align: start;
}

.ms-acc-dsum-i,
.ms-acc-dsum-tot {
    flex: 1 1 150px;
    min-width: 128px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--card);
}

.ms-acc-dsum-i.is-open {
    border-color: var(--acc-line);
    background: var(--acc-soft);
}

.ms-acc-dsum-tot {
    background: var(--mute-soft);
}

.ms-acc-dsum-k {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ink-3);
    text-align: start;
    overflow-wrap: anywhere;
}

.ms-acc-dsum-v {
    display: block;
    margin-top: 4px;
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    text-align: start;
}

/* the total line: one block per currency, under the drawers */
.ms-acc-dsum-tots {
    flex: 0 0 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 4px;
    border-top: 1px dashed var(--line);
}

.ms-acc-dcards {
    display: grid;
    gap: 12px;
    margin-top: 14px;
}

.ms-acc-dcard {
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--card);
    text-align: start;
}

.ms-acc-dcard.is-open {
    border-color: var(--acc-line);
}

/* the whole card opens its drawer's history */
.ms-acc-dcard[data-dw-hist] {
    cursor: pointer;
}

.ms-acc-dcard-h {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.ms-acc-dcard-n {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14.5px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.ms-acc-dcard-cur,
.ms-acc-flag {
    flex: 0 0 auto;
    padding: 2px 8px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--card);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--ink-3);
}

.ms-acc-flag {
    border-color: var(--acc-line);
    color: var(--acc-text);
    font-weight: 600;
    letter-spacing: 0;
}

.ms-acc-flag.is-off {
    border-color: var(--line);
    color: var(--ink-3);
}

/* ---- the Whish Money drawer in the books -------------------------------- */
/* It is one of the store's drawers and is drawn with the others — its cash, its
   movements, its open shift and its last closed one — wearing this badge in the
   store's accent. It is not a cash box a person works with, so it is never one
   of the drawers a cash movement or a transfer may name. */
.ms-acc-wbadge {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--acc-soft);
    color: var(--acc-text);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    vertical-align: middle;
    white-space: nowrap;
}

.ms-acc-dcard.is-whish,
.ms-acc-dsum-i.is-whish {
    border-color: var(--acc-line);
}

.ms-acc-dcard-now {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-top: 8px;
    padding: 8px 10px;
    border-radius: var(--r-sm);
    background: var(--mute-soft);
    font-size: 12.5px;
    color: var(--ink-3);
}

.ms-acc-dcard-now b {
    font-size: 15px;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.ms-acc-dcard-blk {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--line-2);
}

.ms-acc-dcard-h2 {
    margin-bottom: 4px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .03em;
    color: var(--ink-3);
}

.ms-acc-dfig {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 2px 0;
    font-size: 12.5px;
    color: var(--ink-2);
}

.ms-acc-dfig b {
    font-weight: 700;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ms-acc-dfig.is-ok b {
    color: var(--ok);
}

.ms-acc-dfig.is-err b {
    color: var(--err);
}

.ms-acc-dcard-acts,
.ms-acc-acts {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.ms-acc-rec-head {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ink-2);
    text-align: start;
}

@media (min-width: 900px) {
    .ms-acc-dcards {
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    }
}

/* ===========================================================================
   The printed receipt (a thermal roll).

   The block lives on <body> (#ms-rcpt, filled by MS.receiptPrint) and is hidden
   on screen: it exists for paper only. @media print takes the whole app away,
   keeps the receipt alone, removes every margin and lets the roll's own width
   set the page — the @page size itself is written by MS.receiptPage, because a
   page size cannot be read from a class. Nothing here has a height, a minimum
   height or a page break after it, so an 80mm roll prints one continuous receipt
   with no blank sheet behind it.
   =========================================================================== */

.rcpt {
    display: none;
}

@media print {
    html,
    body {
        margin: 0 !important;
        padding: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        background: #fff !important;
        color: #000 !important;
    }

    /* the app, its sheets, its modals and its toasts: off the paper */
    body > *:not(.rcpt) {
        display: none !important;
    }

    .rcpt {
        display: block !important;
        width: 80mm;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
        color: #000 !important;
        /* the receipt's own typewriter face, with the Arabic one behind it: the
           owner's header and footer may be Arabic, and Courier has no Arabic
           glyph (the roll printed empty boxes there) */
        font-family: "Courier New", "Courier", "Cairo", ui-monospace, monospace;
        font-size: 12px;
        line-height: 1.35;
        letter-spacing: 0;
        text-align: center;
        page-break-after: avoid;
        break-after: avoid;
    }

    .rcpt-w80 {
        width: 80mm;
    }

    .rcpt-w58 {
        width: 58mm;
        font-size: 11px;
    }

    .rcpt * {
        background: transparent !important;
        color: #000 !important;
    }

    /* the store's logo, small: never wider than 20mm */
    .rcpt-logo {
        margin: 0 0 2mm;
        text-align: center;
    }

    .rcpt-logo img {
        width: auto;
        height: auto;
        max-width: 20mm;
        max-height: 20mm;
    }

    .rcpt-store {
        margin-bottom: 1mm;
        font-size: 14px;
        font-weight: 700;
        text-transform: uppercase;
    }

    /* the store's contact, the owner's header and footer: one free line each,
       wrapping, never cut */
    .rcpt-c {
        font-size: 11px;
        overflow-wrap: anywhere;
    }

    .rcpt-title {
        margin-top: 2mm;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: .1em;
    }

    .rcpt-no {
        margin-bottom: 1mm;
        font-size: 16px;
        font-weight: 700;
    }

    /* a label at the reading start, its figure at the reading end (right in
       English, left in Arabic) */
    .rcpt-row,
    .rcpt-line,
    .rcpt-total {
        display: flex;
        justify-content: space-between;
        gap: 2mm;
        font-variant-numeric: tabular-nums;
        text-align: start;
    }

    .rcpt-row,
    .rcpt-line {
        font-size: 11.5px;
    }

    .rcpt-row > span:last-child,
    .rcpt-line > span:last-child,
    .rcpt-total > span:last-child {
        text-align: end;
        white-space: nowrap;
    }

    .rcpt-hr {
        margin: 1.5mm 0;
        border-top: 1px dashed #000;
    }

    .rcpt-item {
        font-size: 11.5px;
        text-align: start;
        overflow-wrap: anywhere;
    }

    .rcpt-total {
        margin-top: 1mm;
        font-size: 14px;
        font-weight: 700;
    }

    .rcpt-thanks {
        margin-top: 2mm;
        font-size: 11.5px;
        font-weight: 700;
    }

    /* Who printed the document and the moment it went on the paper: the last
       small block, above the thank-you line, in the receipt's own small type. */
    .rcpt-by {
        margin-top: 2mm;
        padding-top: 1mm;
        border-top: 1px dashed #000;
        font-size: 10.5px;
        line-height: 1.35;
        overflow-wrap: anywhere;
    }

    .rcpt-by-line span {
        font-weight: 700;
    }
}

/* ===========================================================================
   Storefront: the Smart Product Finder.

   /store/<slug>/finder — a short guided quiz over the rows the store already
   sells. One centred column (720px at most), big tappable chips, the store's own
   cards under it. Every side is written with the logical properties, so Arabic
   mirrors itself; nothing here scrolls sideways at 390px.
   =========================================================================== */

/* ---- the two entries on the shop page ---------------------------------- */

/* The chip in the category row: the same pill as its neighbours, in the store's
   accent outline so it reads as an action and not as another category. */
.sf-chip-find {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-color: var(--acc-line);
    background: var(--acc-soft);
    color: var(--acc-text);
    text-decoration: none;
    font-weight: 700;
}

.sf-chip-find:hover {
    border-color: var(--acc-text);
}

.sf-chip-find-ico {
    flex: 0 0 auto;
}

/* The button beside Filters and Sort: a solid accent pill, the same height as
   the two controls beside it. */
.sf-findbtn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    border: 1px solid var(--acc-text);
    border-radius: 999px;
    background: var(--acc-fill);
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    box-shadow: 0 6px 16px rgba(var(--acc-rgb), .18);
}

.sf-findbtn:hover {
    color: #fff;
    filter: brightness(.94);
}

.sf-findbtn-ico {
    flex: 0 0 auto;
}

/* A narrow screen gets the short word, so the bar never has to overflow. */
.sf-findbtn-s {
    display: none;
}

@media (max-width: 560px) {
    .sf-findbtn {
        padding: 0 12px;
        font-size: 12.5px;
    }

    .sf-findbtn-l {
        display: none;
    }

    .sf-findbtn-s {
        display: inline;
    }
}

/* ---- the page ---------------------------------------------------------- */

.sf-finder {
    margin-top: 6px;
}

.sf-finder-in {
    width: 100%;
    max-width: 720px;
    margin: 14px auto 0;
}

.sf-finder-head {
    margin-bottom: 12px;
}

.sf-finder-title {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--ink);
}

.sf-finder-sub {
    margin-top: 6px;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--ink-2);
}

.sf-finder-step {
    margin-top: 5px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-3);
}

/* the progress dots: one per question, filled as they are answered */
.sf-finder-dots {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 12px;
}

.sf-fdot {
    display: block;
    width: 24px;
    height: 5px;
    border-radius: 999px;
    background: var(--line);
}

.sf-fdot.is-on {
    background: var(--acc-line);
}

.sf-fdot.is-done {
    background: var(--acc-fill);
}

/* one question per card: the same white card, radius and shadow as the shop */
.sf-fstep {
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--card);
    box-shadow: var(--sh-sm);
}

/* the small fade-and-rise between two questions. The class is put on the live
   node by finderAnim(), never written in the markup, so an ordinary repaint of
   the same question never replays it. */
.sf-fstep.is-in {
    animation: sf-fstep-in .22s ease both;
}

@keyframes sf-fstep-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sf-fstep.is-in {
        animation: none;
    }
}

.sf-fq {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--ink);
}

.sf-fq-sub {
    margin: 6px 0 14px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--ink-2);
}

/* ---- the chips: big enough to tap, and they wrap ------------------------ */

.sf-find-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sf-find-chips + .sf-find-chips {
    margin-top: 8px;
}

.sf-find-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 40px;
    padding: 8px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--card);
    color: var(--ink-2);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
    text-align: start;
    cursor: pointer;
}

.sf-find-chip:hover {
    border-color: var(--acc-line);
    color: var(--acc-text);
}

.sf-find-chip.is-on {
    border-color: var(--acc-text);
    background: var(--acc-fill);
    color: #fff;
    box-shadow: 0 6px 16px rgba(var(--acc-rgb), .2);
}

.sf-find-cn {
    min-width: 0;
}

.sf-find-cc {
    flex: 0 0 auto;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--line-2);
    color: var(--ink-3);
    font-size: 11px;
    font-weight: 700;
}

.sf-find-chip.is-on .sf-find-cc {
    background: rgba(255, 255, 255, .22);
    color: #fff;
}

/* ---- the from / to pair ------------------------------------------------ */

.sf-find-range {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 12px 0;
}

.sf-find-range .sf-fprice-in {
    flex: 1 1 96px;
    min-width: 0;
    max-width: 140px;
    height: 40px;
}

/* the panel's own apply button is a full-width row of its own: here it sits in
   the same row as the two boxes */
.sf-find-range .sf-fapply {
    flex: 0 0 auto;
    width: auto;
    height: 40px;
    margin-top: 0;
    padding: 0 16px;
    border-radius: 999px;
}

.sf-find-picked {
    margin-top: 12px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--acc-text);
}

.sf-find-note,
.sf-find-loading {
    margin-top: 12px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--ink-3);
}

.sf-find-group {
    margin-top: 16px;
}

.sf-find-group .sf-fh {
    margin-bottom: 8px;
}

/* ---- the results ------------------------------------------------------- */

.sf-find-count {
    margin: 16px 0 10px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--ink-3);
}

.sf-find-empty {
    margin-top: 4px;
}

.sf-find-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

@media (min-width: 640px) {
    .sf-find-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }
}

.sf-find-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

/* why this product is here: only what is really true of it */
.sf-fwhy {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.sf-fwhy-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--line-2);
    color: var(--ink-2);
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.6;
}

.sf-fwhy-chip.is-budget {
    background: var(--acc-soft);
    color: var(--acc-text);
}

.sf-fwhy-chip.is-ok {
    background: var(--ok-soft);
    color: var(--ok);
}

.sf-fwhy-chip.is-sale {
    background: var(--err-soft);
    color: var(--err);
}

.sf-fwhy-chip.is-over {
    background: var(--warn-soft);
    color: var(--warn);
}

/* ---- the way forward and back ------------------------------------------ */

.sf-find-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--line-2);
}

.sf-find-back,
.sf-find-skip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--card);
    color: var(--ink-2);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.sf-find-back:hover,
.sf-find-skip:hover {
    border-color: var(--acc-line);
    color: var(--acc-text);
}

.sf-find-skip,
.sf-find-next {
    margin-inline-start: auto;
}

.sf-find-nav .sf-find-skip + .sf-find-next {
    margin-inline-start: 0;
}

.sf-find-next {
    min-height: 40px;
}

/* ===========================================================================
   THE DARK READING — the few places a token cannot reach.

   Everything else in this file already reads a token, so the two readings come
   out of :root and html[data-theme="dark"] alone. What is left is (1) the
   surfaces that must sit a step ABOVE a card — sheets, modals, drawers,
   dropdowns and the toast — and (2) the public landing page, which carries its
   own little palette, and its illustration.

   Every rule here is scoped to [data-theme="dark"], so light mode is untouched.
   Photos are never filtered, inverted or dimmed: only the surfaces, the text,
   the borders and the controls around them change.
   ========================================================================= */

/* ---- the elevated layer ------------------------------------------------- */

html[data-theme="dark"] .sf-panel,
html[data-theme="dark"] .sf-modal-card,
html[data-theme="dark"] .sf-filters,
html[data-theme="dark"] .sf-cur-menu,
html[data-theme="dark"] .msd-sheet,
html[data-theme="dark"] .ms-sections,
html[data-theme="dark"] .ms-staff-panel,
html[data-theme="dark"] .ms-auth-card,
html[data-theme="dark"] .ms-toast,
html[data-theme="dark"] .drv-sheet,
html[data-theme="dark"] .pos-modal-card,
html[data-theme="dark"] .pos-sheet-card {
    background: var(--elev);
}

/* the dashboard's slide-in sections panel casts its shadow on the page, not on
   white paper */
html[data-theme="dark"] .ms-sections {
    box-shadow: -18px 0 48px rgba(0, 0, 0, .6);
}

/* A pick inside a sunken track (the storefront's two-step switch sits on a
   --line-2 groove): on the dark ground the pick has to be LIGHTER than its
   track, or the chosen side reads as the disabled one. */
html[data-theme="dark"] .sf-seg button.is-on {
    background: var(--elev);
}

/* Every native control reads the dark ground, including the few that carry no
   class of ours (a bare checkbox in a form, a date field, a colour well): the
   framework's own element rules paint them white otherwise. */
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
    color: var(--ink);
    background-color: var(--input-bg);
    border-color: var(--input-line);
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: var(--ink-3);
}

html[data-theme="dark"] input[type="checkbox"],
html[data-theme="dark"] input[type="radio"] {
    background-color: transparent;
    accent-color: var(--acc-fill);
}

/* The select's arrow is drawn as a data-URI SVG, which cannot read a token: the
   dark reading gets its own copy in the dark muted ink. */
html[data-theme="dark"] .ms-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2398a0b3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* the landing page's own palette, read dark */
html[data-theme="dark"] .ld {
    --ld-ink: #e8eaf0;
    --ld-body: #b9c0cf;
    --ld-ghost: #241a2c;
    --ld-ghost-2: #2e2237;
    --ld-page: #0f1115;
    --ld-card: #171a21;
    --ld-line: #262b35;
    --ld-lav: #211a29;
    --ld-head-bg: rgba(15, 17, 21, .94);
}

/* The pricing section has no dark reading of its own: the two marketing pages
   are always light (ALWAYS_LIGHT_PATHS in index.html, MS.isAlwaysLight in
   ms.js), so .pr-band and its cards are painted in their light reading for
   every visitor — the rules above are the only ones they ever get. */

/* the header's Pricing tab: its plum bar is invisible on the dark ground */
html[data-theme="dark"] .ld-head-link:hover,
html[data-theme="dark"] .ld-head-link.is-on {
    color: var(--ld-ink);
}

html[data-theme="dark"] .ld-head-link.is-on {
    box-shadow: inset 0 -2px 0 var(--ld-lilac);
}

/* the illustration's paper, ink and hairlines: a white panel would be a hole in
   the dark page */
html[data-theme="dark"] .ld-art-card,
html[data-theme="dark"] .ld-art-phone {
    fill: #1d2129;
}

html[data-theme="dark"] .ld-art-card {
    stroke: #2f3643;
}

html[data-theme="dark"] .ld-art-soft {
    fill: #232a35;
}

html[data-theme="dark"] .ld-art-soft2 {
    fill: #2a3140;
}

html[data-theme="dark"] .ld-art-ink {
    fill: #3a4150;
}

html[data-theme="dark"] .ld-art-line {
    stroke: #2f3643;
}

/* ===========================================================================
   THE THEME TOGGLE (sun / moon) and the three-way choice in Settings.

   One button in each DASHBOARD header — the store's top bar, the platform's,
   the till and the driver app. It carries both icons and the CSS shows the one
   that is the ACTION (a moon while the page is light, a sun while it is dark),
   so a press never needs a script to redraw it. The row it sits in is a flex
   row with the logical properties, so it mirrors with the page in Arabic and
   nothing beside it moves.

   The customer-facing storefront and its tracking page have no such button and
   never darken: those pages are always the light shop (see MS.isStorefront in
   ms.js), so nothing below is used there.
   ========================================================================= */

.rx-theme-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--card);
    color: var(--ink-2);
    line-height: 1;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.rx-theme-btn:hover {
    background: var(--hover);
    color: var(--ink);
    border-color: var(--acc-line);
}

.rx-theme-btn:focus-visible {
    outline: 2px solid var(--acc-text);
    outline-offset: 2px;
}

.rx-theme-btn svg {
    width: 16px;
    height: 16px;
    display: block;
    pointer-events: none;
}

/* light page → the moon (press for dark); dark page → the sun */
.rx-theme-btn .rx-th-sun {
    display: none;
}

html[data-theme="dark"] .rx-theme-btn .rx-th-sun {
    display: block;
}

html[data-theme="dark"] .rx-theme-btn .rx-th-moon {
    display: none;
}

/* the till's and the driver app's header pills are a little tighter than the
   dashboard's, so the button borrows their height instead of pushing the row */
.pos-topacts .rx-theme-btn,
.drv-top .rx-theme-btn {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
}

/* The storefront header (.sf-head-actions) carries no theme button: the moon /
   sun and its sizing rules above were removed with it, and its flex row simply
   closes the 6px gap between the currency, the language pill, the account and
   the cart. */

/* ---- Settings: Light / Dark / System ------------------------------------ */

.rx-theme-seg {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface-2);
}

.rx-theme-seg button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--ink-2);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.rx-theme-seg button:hover {
    background: var(--hover);
    color: var(--ink);
}

.rx-theme-seg button.is-on,
html[data-theme-pref="light"] .rx-theme-seg [data-theme-set="light"],
html[data-theme-pref="dark"] .rx-theme-seg [data-theme-set="dark"],
html[data-theme-pref="system"] .rx-theme-seg [data-theme-set="system"] {
    background: var(--acc-fill);
    color: #fff;
    box-shadow: 0 4px 12px rgba(var(--acc-rgb), .28);
}

.rx-theme-seg button:focus-visible {
    outline: 2px solid var(--acc-text);
    outline-offset: 2px;
}

.rx-theme-seg svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    pointer-events: none;
}

.rx-theme-preview {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin-top: 12px;
    font-size: 12.5px;
    color: var(--ink-3);
}

/* ===========================================================================
   Dashboard: Reports / التقارير — the store's own figures as charts.

   No chart library: every drawing is plain CSS (bars, columns, a segmented
   strip) or inline SVG (the trend's two series, the payment donut), and every
   colour is a token, so the whole section reads in both the light and the dark
   reading without one rule of its own. The section is `dir`-ed by its own
   language: the flex rows mirror themselves in Arabic and the two time charts
   are mirrored where they are built. A wide chart scrolls sideways on a phone
   instead of being squeezed into 390px, and each figure is also printed as text,
   so nothing on it needs a hover to be read.
   =========================================================================== */

/* the compact strip of the same KPIs at the top of Overview */
.ms-rep-ov {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

@media (min-width: 720px) {
    .ms-rep-ov {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.ms-rep-ov .ms-kpi {
    box-shadow: none;
    background: var(--surface-2);
}

/* an empty-state sentence that sits in a KPI grid takes the whole row */
.ms-kpis > .ms-rep-empty,
.ms-rep-ov > .ms-rep-empty {
    grid-column: 1 / -1;
    margin: 0;
}

/* the period selector */
.ms-rep-periods {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.ms-rep-range {
    margin-top: 2px;
}

.ms-rep-range .ms-label {
    flex: 0 0 auto;
    margin: 0;
}

.ms-rep-period-line {
    margin-top: 10px;
    font-variant-numeric: tabular-nums;
}

/* a heading inside a card, above a second drawing (the suppliers, the drawer
   comparison) */
.ms-rep-subhead {
    margin: 18px 0 6px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .03em;
    color: var(--ink-3);
    text-align: start;
}

/* the count above the shift cards ("2 on shift" / "٢ على رأس العمل") */
.ms-rep-count {
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
    text-align: start;
}

/* the honest empty state of one chart: a sentence, never a row of zeros */
.ms-rep-empty {
    margin: 8px 0 2px;
    padding: 14px 12px;
    border: 1px dashed var(--line);
    border-radius: var(--r-sm);
    color: var(--ink-3);
    font-size: 13px;
    text-align: center;
}

/* a wide drawing keeps its size and scrolls instead of shrinking */
.ms-rep-scroll {
    margin-top: 6px;
    padding-bottom: 2px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.ms-rep-svg {
    display: block;
    width: 100%;
    height: auto;
}

.ms-rep-grid-line {
    stroke: var(--line);
    stroke-width: 1;
    shape-rendering: crispEdges;
}

.ms-rep-ylab,
.ms-rep-xlab {
    fill: var(--ink-3);
    font-family: var(--font-ui);
    font-size: 10.5px;
    font-variant-numeric: tabular-nums;
}

.ms-rep-line {
    fill: none;
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.ms-rep-area {
    stroke: none;
}

.ms-rep-dot {
    stroke: var(--card);
    stroke-width: 1.2;
}

/* ---- the legend ---------------------------------------------------------- */
.ms-rep-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-bottom: 6px;
    font-size: 12px;
    color: var(--ink-2);
}

.ms-rep-legend-i {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ms-rep-sw {
    display: inline-block;
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background: var(--ink-3);
}

/* ---- the columns (purchases, expenses, the hours) ------------------------ */
.ms-rep-cols {
    display: flex;
    align-items: flex-end;
    gap: 6px;
}

.ms-rep-col {
    flex: 1 1 0;
    min-width: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.ms-rep-colbars {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 2px;
    width: 100%;
    height: 120px;
}

.ms-rep-colbar {
    flex: 1 1 0;
    min-width: 4px;
    border-radius: 4px 4px 2px 2px;
    background: var(--acc-text);
}

.ms-rep-colbar.is-zero {
    border-radius: 2px;
    background: var(--line);
}

.ms-rep-collab {
    font-size: 10.5px;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ---- the horizontal bars (suppliers, products, drawers, customers) ------- */
.ms-rep-bars {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 6px;
}

.ms-rep-bar {
    min-width: 0;
}

.ms-rep-bar-k {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    font-size: 13px;
}

.ms-rep-bar-n {
    min-width: 0;
    font-weight: 600;
    color: var(--ink);
    overflow-wrap: anywhere;
}

.ms-rep-bar-v {
    flex: 0 0 auto;
    font-weight: 700;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.ms-rep-bar-track {
    margin-top: 6px;
    height: 8px;
    border-radius: 999px;
    background: var(--mute-soft);
    overflow: hidden;
}

.ms-rep-bar-fill {
    display: block;
    height: 100%;
    min-width: 2px;
    border-radius: 999px;
    background: var(--acc-text);
}

.ms-rep-bar-sub {
    margin-top: 4px;
    font-size: 11.5px;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}

.ms-rep-cur {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--ink-3);
}

/* ---- the payment donut --------------------------------------------------- */
.ms-rep-donut {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    margin-top: 8px;
}

.ms-rep-donut-art {
    flex: 0 0 124px;
    width: 124px;
}

.ms-rep-donut-art svg {
    display: block;
    width: 124px;
    height: 124px;
}

.ms-rep-donut-v {
    fill: var(--ink);
    font-family: var(--font-ui);
    font-size: 12.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.ms-rep-donut-k {
    fill: var(--ink-3);
    font-family: var(--font-ui);
    font-size: 10px;
    letter-spacing: .06em;
}

.ms-rep-donut-leg {
    flex: 1 1 200px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.ms-rep-legrow {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 12.5px;
    color: var(--ink-2);
}

.ms-rep-legname {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.ms-rep-legv {
    flex: 0 0 auto;
    font-weight: 700;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.ms-rep-legp {
    flex: 0 0 46px;
    text-align: end;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}

/* ---- the status strip ---------------------------------------------------- */
.ms-rep-segbar {
    display: flex;
    height: 16px;
    margin-top: 10px;
    border-radius: 999px;
    background: var(--mute-soft);
    overflow: hidden;
}

.ms-rep-segb {
    display: block;
    height: 100%;
    background: var(--ink-3);
}

/* ---- the four report tables --------------------------------------------- */
.ms-rep-t {
    min-width: 420px;
}

/* ---- the colours: one token per series, in both readings ----------------- */
.ms-rep-line.is-pos,
.ms-rep-line.is-purchase,
.ms-rep-line.is-product {
    stroke: var(--acc-text);
}

.ms-rep-line.is-online {
    stroke: var(--info);
}

.ms-rep-area.is-pos {
    fill: var(--acc-text);
    opacity: .16;
}

.ms-rep-area.is-online {
    fill: var(--info);
    opacity: .13;
}

.ms-rep-dot.is-pos {
    fill: var(--acc-text);
}

.ms-rep-dot.is-online {
    fill: var(--info);
}

.ms-rep-sw.is-pos,
.ms-rep-sw.is-purchase,
.ms-rep-sw.is-product,
.ms-rep-sw.is-hour,
.ms-rep-sw.is-drawer,
.ms-rep-sw.is-ready,
.ms-rep-sw.is-out_for_delivery,
.ms-rep-sw.is-supplier,
.ms-rep-sw.is-whish {
    background: var(--acc-text);
}

.ms-rep-sw.is-online,
.ms-rep-sw.is-cashout,
.ms-rep-sw.is-card,
.ms-rep-sw.is-new {
    background: var(--info);
}

.ms-rep-sw.is-expense,
.ms-rep-sw.is-cashlbp,
.ms-rep-sw.is-preparing {
    background: var(--warn);
}

.ms-rep-sw.is-cashusd,
.ms-rep-sw.is-confirmed {
    background: var(--ok);
}

.ms-rep-sw.is-picked_up {
    background: var(--ink-3);
}

.ms-rep-sw.is-delivered {
    background: var(--done-ink);
}

.ms-rep-sw.is-cancelled {
    background: var(--err);
}

.ms-rep-colbar.is-expense {
    background: var(--warn);
}

.ms-rep-colbar.is-cashout {
    background: var(--info);
}

.ms-rep-bar-fill.is-supplier,
.ms-rep-bar-fill.is-product,
.ms-rep-bar-fill.is-drawer {
    background: var(--acc-text);
}

.ms-rep-seg.is-cashusd,
.ms-rep-segb.is-cashusd,
.ms-rep-segb.is-confirmed {
    stroke: var(--ok);
    background: var(--ok);
}

.ms-rep-seg.is-cashlbp,
.ms-rep-segb.is-cashlbp,
.ms-rep-segb.is-preparing {
    stroke: var(--warn);
    background: var(--warn);
}

.ms-rep-seg.is-card,
.ms-rep-segb.is-card,
.ms-rep-segb.is-new {
    stroke: var(--info);
    background: var(--info);
}

.ms-rep-seg.is-whish,
.ms-rep-segb.is-whish,
.ms-rep-segb.is-ready,
.ms-rep-segb.is-out_for_delivery {
    stroke: var(--acc-text);
    background: var(--acc-text);
}

.ms-rep-segb.is-picked_up {
    background: var(--ink-3);
}

.ms-rep-segb.is-delivered {
    background: var(--done-ink);
}

.ms-rep-segb.is-cancelled {
    background: var(--err);
}

/* a slice of the donut is a stroke, never a fill */
.ms-rep-seg {
    fill: none;
}

/* ===========================================================================
   Dashboard: Overview — the analytics block.

   The period's charts, drawn under the KPI cards of Overview: stacked bars in
   inline SVG (the sales trend), columns in plain CSS (sales against purchases
   and expenses, the hours), a donut, a status strip, bar lists and cards. Every
   colour is one of the tokens above, so the block reads in both the light and
   the dark reading without a rule of its own, and every drawing sits inside a
   card that scrolls sideways on a phone instead of being squeezed. The block is
   `dir`-ed by its own language, so its rows mirror in Arabic.
   =========================================================================== */

/* the four KPIs of the strip: a touch smaller than the cards above them, and
   the change of the period printed under each figure */
.ms-an-kpi .ms-kpi-v {
    font-size: 19px;
}

.ms-an-drow {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 7px;
}

.ms-an-delta {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    background: var(--mute-soft);
    color: var(--ink-3);
}

.ms-an-delta.is-up {
    background: var(--ok-soft);
    color: var(--ok);
}

.ms-an-delta.is-down {
    background: var(--err-soft);
    color: var(--err);
}

.ms-an-delta.is-flat {
    background: var(--mute-soft);
    color: var(--ink-3);
}

.ms-an-dk {
    font-size: 11px;
    color: var(--ink-3);
}

/* "as of …", the last line of every card */
.ms-an-asof {
    margin: 12px 0 0;
    font-size: 11.5px;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
    text-align: start;
}

.ms-an-asof-full {
    grid-column: 1 / -1;
    margin-top: 0;
}

/* a one-line state or an empty sentence inside one of the block's grids takes
   the whole row instead of one cell */
.ms-kpis > .ms-an-fail,
.ms-an-dcards > .ms-an-fail,
.ms-an-dcards > .ms-rep-empty {
    grid-column: 1 / -1;
}

/* the loading placeholder of one card */
.ms-an-skel {
    border-radius: var(--r-sm);
}

/* one line and a Retry button when the figures could not be read */
.ms-an-fail {
    padding: 10px 0 4px;
    text-align: center;
}

.ms-an-fail-t {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--err);
}

/* ---- the drawings and their tooltip -------------------------------------- */
.ms-an-chart {
    position: relative;
}

.ms-an-chart-in {
    position: relative;
}

.ms-an-tip {
    position: absolute;
    z-index: 6;
    max-width: 230px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: var(--r-xs);
    background: var(--elev);
    box-shadow: var(--sh);
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: 11.5px;
    line-height: 1.5;
    text-align: start;
    pointer-events: none;
}

.ms-an-tip[hidden] {
    display: none;
}

.ms-an-tip-h {
    display: block;
    margin-bottom: 3px;
    font-weight: 700;
    color: var(--ink);
}

.ms-an-tip-r {
    display: block;
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
}

/* the two stacked series of the trend (SVG: a fill, not a background) */
.ms-an-stack.is-pos {
    fill: var(--acc-text);
}

.ms-an-stack.is-online {
    fill: var(--info);
}

/* the day's whole column is the target: a hover or a tap opens its tooltip */
.ms-an-hit {
    fill: transparent;
    cursor: pointer;
}

.ms-an-hit:hover {
    fill: var(--sel);
}

/* the three series of the grouped columns */
.ms-rep-colbar.is-sales {
    background: var(--acc-text);
}

.ms-rep-colbar.is-purchases {
    background: var(--info);
}

.ms-rep-colbar.is-expenses {
    background: var(--warn);
}

/* ---- the cash boxes ------------------------------------------------------ */
/* One card per drawer: 1 to a phone, 2 from 720px, 3–4 on a wide screen, and
   never narrower than a balance and four figures can be read in. */
.ms-an-dcards {
    grid-template-columns: minmax(0, 1fr);
}

.ms-an-dcard.is-cash {
    border-inline-start: 3px solid var(--ok);
}

.ms-an-dcard.is-whish {
    border-inline-start: 3px solid var(--acc-text);
}

/* the balance of the drawer, big, in its own currency */
.ms-an-bal b {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

/* the Open / Closed badge (green for open, grey for closed) */
.ms-an-flag {
    flex: 0 0 auto;
    padding: 2px 8px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--card);
    color: var(--ink-3);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
}

.ms-an-flag.is-on {
    border-color: var(--ok);
    background: var(--ok-soft);
    color: var(--ok);
}

@media (min-width: 768px) {
    .ms-an-dcards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1080px) {
    .ms-an-dcards {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
}

/* ---- the four extra widgets ---------------------------------------------- */
/* One column under 768px, two from there up. */
.ms-an-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}

@media (min-width: 768px) {
    .ms-an-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---- the busiest hours: 24 small bars ------------------------------------ */
.ms-an-hours-wrap {
    margin-top: 10px;
}

.ms-an-hours {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    min-width: 300px;
    height: 108px;
    padding-top: 6px;
}

.ms-an-hour {
    flex: 1 1 0;
    min-width: 4px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    height: 100%;
    cursor: pointer;
}

.ms-an-hour-b {
    display: block;
    flex: 0 0 auto;
    width: 100%;
    min-height: 2px;
    max-height: calc(100% - 17px);
    border-radius: 3px 3px 2px 2px;
    background: var(--acc-text);
    opacity: .5;
}

/* the busiest hour of the period, at full strength */
.ms-an-hour.is-peak .ms-an-hour-b,
.ms-an-hour:hover .ms-an-hour-b {
    opacity: 1;
}

.ms-an-hour-k {
    margin-top: 5px;
    height: 12px;
    font-size: 9.5px;
    line-height: 12px;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ms-an-hsum {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    font-size: 12px;
    color: var(--ink-3);
}

.ms-an-hsum-i b {
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

/* ---- the two compact tables (the shift list, the low stock) --------------- */
.ms-an-t {
    min-width: 560px;
}

.ms-an-t-narrow {
    min-width: 260px;
}

/* a product with nothing left is printed in the danger ink */
.ms-an-out {
    color: var(--err) !important;
    font-weight: 700;
}

/* ===========================================================================
   THE PRINTED RECEIPT stays black on white paper.

   The rules at "@media print" above already take the app away and put the
   receipt alone on the roll in black on white. These two add the one thing a
   dark theme can still spoil: the browser's own colour scheme, which decides
   how form controls and the paper margin are painted. A receipt is always
   light, whatever the screen was set to.
   ========================================================================= */

html[data-theme="dark"] .rcpt {
    /* hidden on screen, but a dark ancestor must never bleed into a preview */
    color-scheme: light;
}

@media print {
    html,
    html[data-theme="dark"] {
        color-scheme: light !important;
        background: #fff !important;
    }

    .rcpt,
    .rcpt * {
        background-color: #fff !important;
        color: #000 !important;
        border-color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
        filter: none !important;
        opacity: 1 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .rcpt-hr,
    .rcpt-by {
        border-top: 1px dashed #000 !important;
    }
}