/* ===========================================================================
   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.
   =========================================================================== */

:root {
    --acc: #880290;
    --acc-dark: #6a0171;
    --acc-soft: rgba(136, 2, 144, .08);
    --acc-line: rgba(136, 2, 144, .22);
    --acc-rgb: 136, 2, 144;

    /* 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);

    --bg: #f7f4fa;
    --card: #ffffff;
    --ink: #1d1520;
    --ink-2: #5a5164;
    --ink-3: #8b8396;
    --line: #eae4f0;
    --line-2: #f4f0f8;

    --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);
    --mute-soft: #f1edf5;

    --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);
}

* {
    box-sizing: border-box;
}

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

body {
    font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

[dir="rtl"],
.ar,
.ms-ar {
    font-family: "Cairo", "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.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(--acc);
    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: #eae4f1;
}

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

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

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

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

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

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

.ms-btn-danger {
    background: #fff;
    border-color: rgba(192, 38, 52, .25);
    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: #fff;
    border-color: var(--acc);
    color: var(--acc);
    /* 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-dark);
    border-color: var(--acc-dark);
}

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

.ms-linkbtn {
    background: none;
    border: 0;
    padding: 0;
    color: var(--acc);
    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: rgba(255, 255, 255, .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), #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;
}

/* ============================== 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);
}

.ms-input,
.ms-select,
.ms-textarea {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: var(--r-xs);
    background: #fff;
    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: #fff;
    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: "Cairo", "Poppins", sans-serif;
}

.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);
}

.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);
}

.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: #eef2f6;
    color: #46586b;
}

.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);
    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: #fff;
    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: #fff;
    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);
    border-color: var(--acc);
    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: #fbf9fd;
    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, #f1ecf6 25%, #f8f5fb 37%, #f1ecf6 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: #fff;
    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: #fff;
    color: var(--acc);
    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);
    border-color: var(--acc);
    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: rgba(29, 21, 32, .42);
    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: #fff;
    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: #fff;
    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: #fff;
    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);
    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);
    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: #fff;
    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);
    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: #fff;
    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: #fff;
    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), #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: 48px;
    max-width: 1180px;
    margin: 0 auto;
}

.sf-logo {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 10px;
    background: #fff;
    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);
}

.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: #fff;
    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: "Cairo", "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    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);
    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);
    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: rgba(247, 244, 250, .96);
    backdrop-filter: blur(8px);
    padding: 8px 0 7px;
    border-bottom: 1px solid var(--line);
}

/* The header search. It sits where the store name was: it takes the free
   space, and it may shrink to nothing rather than push the controls off the
   row (min-width: 0 — a bare input would keep its intrinsic width and
   overflow a 360px phone). */
.sf-search {
    flex: 1 1 0%;
    min-width: 0;
    width: auto;
    height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: #fff;
    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);
}

.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: #fff;
    color: var(--ink-2);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.sf-chip.is-on {
    background: var(--acc);
    border-color: var(--acc);
    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: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
    box-shadow: var(--sh-sm);
}

.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-weight: 700;
    font-size: 20px;
    overflow: hidden;
}

.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(--err);
    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;
}

.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;
    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);
}

.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);
    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);
    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);
}

.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);
    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: rgba(20, 12, 24, .45);
    backdrop-filter: blur(2px);
}

.sf-panel {
    position: relative;
    width: 100%;
    max-width: 560px;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    background: #fff;
    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: #fff;
}

.sf-close {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: #fff;
    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;
    gap: 6px;
    padding: 4px;
    background: var(--line-2);
    border-radius: 999px;
    margin-bottom: 12px;
}

.sf-seg button {
    flex: 1 1 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: #fff;
    color: var(--acc);
    box-shadow: var(--sh-sm);
}

/* ---- 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: #fff;
    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);
    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);
}

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

.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;
}

.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);
    box-shadow: 0 0 0 4px var(--acc-soft);
}

.sf-step.is-now .sf-step-dot {
    background: var(--acc);
    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: #fbf9fd;
}

.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: #fff;
}

.ms-dns-type {
    flex: 0 0 auto;
    padding: 3px 7px;
    border-radius: 6px;
    background: var(--acc-soft);
    color: var(--acc);
    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: #fbf9fd;
    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: #fff;
    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);
    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: 56px;
    }

    .sf-logo {
        width: 34px;
        height: 34px;
        flex: 0 0 34px;
        border-radius: 11px;
        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. */
    .sf-search {
        max-width: 420px;
        margin-inline: auto;
        height: 38px;
        padding: 0 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: #fff;
    color: var(--acc);
    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);
    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: #fff;
    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);
}

.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: #F4F4F4;
    color: #2b2b2b;
    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: #2b2b2b;
    line-height: 22px;
}

.sf-ft-a {
    font-size: 13.5px;
    line-height: 24px;
    color: #2b2b2b;
    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: #5c5c5c;
    text-align: center;
}

/* ---- middle: the social circles ---- */
.sf-ft-soc-wrap {
    margin-top: 30px;
    text-align: center;
}

.sf-ft-soc-h {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #2b2b2b;
}

.sf-ft-socials {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 14px;
}

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

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

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

/* ---- bottom bar ---- */
.sf-ft-bar {
    margin-top: 26px;
    padding: 14px 0 18px;
    border-top: 1px solid #dedede;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    font-size: 12px;
    color: #4a4a4a;
}

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

.sf-ft-pays {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
}

.sf-ft-pay {
    padding: 3px 10px;
    border: 1px solid #dedede;
    border-radius: 999px;
    background: #fff;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 18px;
    color: #2b2b2b;
    white-space: nowrap;
}

.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: #2b2b2b;
    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 170px columns as fit — never more than the five the model can make —
       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(170px, 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;
    }

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

@media (max-width: 719px) {
    /* 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: #fff;
    color: #2b2b2b;
    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);
}

.sf-fabx:focus-visible {
    outline: 2px solid var(--acc);
    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);
    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-dark);
    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: #fff;
}

/* 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: #fff;
    color: var(--acc);
}

.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: #fff;
    color: var(--acc);
    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: #fff;
    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;
}

.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;
}

.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);
}

@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(--err);
    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: #a51f2b;
}

.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: #fff;
    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: #fff;
}

/* 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);
    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: #fff;
    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: #fff;
}

.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: #fff;
    color: var(--acc);
    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);
}

/* 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: #fff;
    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(--line);
    background: #fff;
    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);
    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-dark);
}

.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(--err);
    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: #fff;
    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);
}

.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: #fbf9fd;
    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-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: #fff;
    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-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: "Cairo", "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    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: #fff;
    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);
    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);
    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-dark);
}

@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: #fff;
    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(--err);
    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: #fff;
    color: var(--acc);
}

/* 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: #fbf9fd;
}

/* 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: #fbf9fd;
    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: #fff;
    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: #fff;
    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 rgba(192, 38, 52, .35);
    background: #fdeaea;
    color: #a81b28;
    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: #f6f1fa;
    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: #fff;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--ink-2);
    white-space: nowrap;
}

.msd-drvchip.is-none {
    background: #fff;
    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: #fff;
    color: var(--acc);
    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: rgba(29, 21, 32, .45);
}

.msd-sheet {
    width: 100%;
    max-width: 440px;
    max-height: 88vh;
    overflow: auto;
    padding: 16px;
    background: #fff;
    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);
}

.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);
}

/* 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: #fbf9fd;
    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: #241a28;
    color: #fff;
    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: "Cairo", "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

[dir="ltr"] .drv {
    direction: ltr;
    font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.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);
    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 small AR / EN switch */
.drv-lang {
    flex: 0 0 auto;
    padding: 7px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    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: #fff;
    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: #fff;
    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: #fff;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--ink-2);
}

/* One order. */
.drv-order {
    padding: 13px 14px;
    background: #fff;
    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: #fbf9fd;
    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);
    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 rgba(192, 38, 52, .35);
    background: #fdeaea;
    color: #a81b28;
    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: #fff;
    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: rgba(29, 21, 32, .45);
}

.drv-sheet {
    width: 100%;
    max-width: 620px;
    max-height: 92vh;
    overflow: auto;
    padding: 16px 16px 20px;
    background: #fff;
    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: #fff;
    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);
    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: #fff;
    color: var(--acc);
    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);
    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: rgba(18, 12, 22, .66);
    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: #fff;
    border: 1px solid var(--acc-line);
    border-radius: 999px;
    color: var(--acc);
    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);
}

.ms-staff-permtab:focus-visible {
    outline: 2px solid var(--acc);
    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: #fff;
    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);
    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-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;

    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: rgba(242, 242, 252, .94);
    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 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: #ded9f6;
    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: #fff;
    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: #fff;
    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: #fff;
    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: #fff;
}

.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 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. */
.ld-art-txt {
    font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    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;
    }
}