isn't practical (e.g. inside a | ). */
bdi,
.bdi-ltr {
unicode-bidi: isolate;
}
.bdi-ltr {
direction: ltr;
display: inline-block;
}
.font-mono {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
}
/* --------------------------------------------------------------------------
3. Typography
-------------------------------------------------------------------------- */
.text-display {
font-size: var(--font-size-display);
line-height: var(--line-height-tight);
font-weight: var(--font-weight-bold);
letter-spacing: -0.01em;
}
.text-h1 {
font-size: var(--font-size-h1);
line-height: var(--line-height-tight);
font-weight: var(--font-weight-bold);
}
.text-h2 {
font-size: var(--font-size-h2);
line-height: var(--line-height-snug);
font-weight: var(--font-weight-semibold);
}
.text-h3 {
font-size: var(--font-size-h3);
line-height: var(--line-height-snug);
font-weight: var(--font-weight-semibold);
}
.text-h4 {
font-size: var(--font-size-h4);
line-height: var(--line-height-snug);
font-weight: var(--font-weight-semibold);
}
.text-body-lg {
font-size: var(--font-size-body-lg);
line-height: var(--line-height-relaxed);
}
.text-body {
font-size: var(--font-size-body);
line-height: var(--line-height-normal);
}
.text-body-sm {
font-size: var(--font-size-body-sm);
line-height: var(--line-height-normal);
}
.text-caption {
font-size: var(--font-size-caption);
line-height: var(--line-height-normal);
}
.text-micro {
font-size: var(--font-size-micro);
line-height: var(--line-height-normal);
}
.text-secondary {
color: var(--text-secondary);
}
.text-muted {
color: var(--text-muted);
}
.text-brand {
color: var(--text-brand);
}
.text-success {
color: var(--text-success);
}
.text-warning {
color: var(--text-warning);
}
.text-danger {
color: var(--text-danger);
}
.text-info {
color: var(--text-info);
}
.text-gold {
color: var(--text-gold);
}
.font-medium {
font-weight: var(--font-weight-medium);
}
.font-semibold {
font-weight: var(--font-weight-semibold);
}
.font-bold {
font-weight: var(--font-weight-bold);
}
.text-prose {
max-width: 68ch;
font-size: var(--font-size-body-lg);
line-height: var(--line-height-loose);
color: var(--text-secondary);
}
.text-prose > * + * {
margin-block-start: var(--space-4);
}
.text-prose h2 {
color: var(--text-primary);
margin-block-start: var(--space-8);
margin-block-end: var(--space-2);
}
/* --------------------------------------------------------------------------
4. Icons
-------------------------------------------------------------------------- */
.icon {
width: 1.25em;
height: 1.25em;
stroke: currentColor;
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
vertical-align: -0.2em;
flex-shrink: 0;
}
.icon--sm {
width: 1em;
height: 1em;
}
.icon--lg {
width: 1.75em;
height: 1.75em;
}
.icon--xl {
width: 2.5em;
height: 2.5em;
}
.icon-filled {
fill: currentColor;
stroke: none;
}
/* Directional chevrons: both built from the same "points toward end" glyph.
Everything else (up/down, x, check, plus…) is direction-agnostic. */
.icon--start {
transform: scaleX(-1);
}
.icon--end {
transform: none;
}
[dir='rtl'] .icon--start {
transform: none;
}
[dir='rtl'] .icon--end {
transform: scaleX(-1);
}
/* --------------------------------------------------------------------------
5. Buttons
-------------------------------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
height: var(--control-height-md);
padding-inline: var(--space-4);
border-radius: var(--control-radius);
font-size: var(--control-font-size);
font-weight: var(--font-weight-semibold);
border: 1px solid transparent;
white-space: nowrap;
transition:
background-color var(--duration-fast) var(--ease-standard),
border-color var(--duration-fast) var(--ease-standard),
color var(--duration-fast) var(--ease-standard),
box-shadow var(--duration-fast) var(--ease-standard);
user-select: none;
}
.btn:disabled,
.btn[aria-disabled='true'] {
opacity: 0.5;
cursor: not-allowed;
}
.btn--primary {
background: var(--action-brand-default);
color: var(--text-on-brand);
}
.btn--primary:hover:not(:disabled) {
background: var(--action-brand-hover);
}
.btn--primary:active:not(:disabled) {
background: var(--action-brand-active);
}
.btn--secondary {
background: var(--bg-surface);
color: var(--text-primary);
border-color: var(--border-strong);
}
.btn--secondary:hover:not(:disabled) {
background: var(--bg-surface-sunken);
}
.btn--outline {
background: transparent;
color: var(--text-brand);
border-color: var(--border-brand);
}
.btn--outline:hover:not(:disabled) {
background: var(--bg-brand-subtle);
}
.btn--ghost {
background: transparent;
color: var(--text-secondary);
}
.btn--ghost:hover:not(:disabled) {
background: var(--bg-surface-sunken);
color: var(--text-primary);
}
.btn--danger {
background: var(--action-danger-default);
color: #fff;
}
.btn--danger:hover:not(:disabled) {
background: var(--action-danger-hover);
}
.btn--danger:active:not(:disabled) {
background: var(--action-danger-active);
}
.btn--danger-outline {
background: transparent;
color: var(--text-danger);
border-color: var(--border-danger);
}
.btn--danger-outline:hover:not(:disabled) {
background: var(--bg-danger-subtle);
}
.btn--link {
height: auto;
padding: 0;
background: none;
color: var(--text-link);
font-weight: var(--font-weight-medium);
text-decoration: underline;
text-underline-offset: 3px;
}
.btn--link:hover:not(:disabled) {
color: var(--action-brand-hover);
}
.btn--sm {
height: var(--control-height-sm);
padding-inline: var(--space-3);
font-size: var(--font-size-body-sm);
}
.btn--lg {
height: var(--control-height-lg);
padding-inline: var(--space-6);
font-size: var(--font-size-body-lg);
}
.btn--icon-only {
width: var(--control-height-md);
padding-inline: 0;
}
.btn--icon-only.btn--sm {
width: var(--control-height-sm);
}
.btn--icon-only.btn--lg {
width: var(--control-height-lg);
}
.btn--full {
width: 100%;
}
.btn-group {
display: inline-flex;
}
.btn-group > .btn {
border-radius: 0;
margin-inline-start: -1px;
}
.btn-group > .btn:first-child {
border-start-start-radius: var(--control-radius);
border-end-start-radius: var(--control-radius);
margin-inline-start: 0;
}
.btn-group > .btn:last-child {
border-start-end-radius: var(--control-radius);
border-end-end-radius: var(--control-radius);
}
/* Loading state: hide label text visually (keep for a11y), show spinner */
.btn.is-loading {
color: transparent !important;
pointer-events: none;
position: relative;
}
.btn.is-loading::after {
content: '';
position: absolute;
inset: 0;
margin: auto;
width: 1.1em;
height: 1.1em;
border-radius: 50%;
border: 2px solid currentColor;
border-inline-end-color: transparent;
color: var(--text-on-brand);
animation: sz-spin 0.7s linear infinite;
}
.btn--secondary.is-loading::after,
.btn--outline.is-loading::after,
.btn--ghost.is-loading::after,
.btn--link.is-loading::after {
color: var(--text-brand);
}
.btn--danger-outline.is-loading::after {
color: var(--text-danger);
}
@keyframes sz-spin {
to {
transform: rotate(360deg);
}
}
/* --------------------------------------------------------------------------
6. Badges / status pills
-------------------------------------------------------------------------- */
.badge {
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding-inline: var(--space-2);
height: 1.5rem;
border-radius: var(--radius-full);
font-size: var(--font-size-caption);
font-weight: var(--font-weight-semibold);
white-space: nowrap;
line-height: 1;
}
.badge--neutral {
background: var(--bg-surface-sunken);
color: var(--text-secondary);
}
.badge--brand {
background: var(--bg-brand-subtle);
color: var(--text-brand);
}
.badge--success {
background: var(--bg-success-subtle);
color: var(--text-success);
}
.badge--warning {
background: var(--bg-warning-subtle);
color: var(--text-warning);
}
.badge--danger {
background: var(--bg-danger-subtle);
color: var(--text-danger);
}
.badge--info {
background: var(--bg-info-subtle);
color: var(--text-info);
}
.badge--gold {
background: var(--bg-gold-subtle);
color: var(--text-gold);
}
.badge--outline {
background: transparent;
border: 1px solid var(--border-strong);
color: var(--text-secondary);
}
.badge__dot {
width: 0.4rem;
height: 0.4rem;
border-radius: 50%;
background: currentColor;
flex-shrink: 0;
}
/* --------------------------------------------------------------------------
7. Forms
-------------------------------------------------------------------------- */
.field {
display: flex;
flex-direction: column;
gap: var(--space-1);
max-width: 100%;
}
.field__label {
font-size: var(--font-size-body-sm);
font-weight: var(--font-weight-medium);
color: var(--text-secondary);
}
.field__required {
color: var(--text-danger);
margin-inline-start: var(--space-1);
}
.field__hint {
font-size: var(--font-size-caption);
color: var(--text-muted);
}
.field__error {
font-size: var(--font-size-caption);
color: var(--text-danger);
display: flex;
align-items: center;
gap: var(--space-1);
}
.field__success {
font-size: var(--font-size-caption);
color: var(--text-success);
display: flex;
align-items: center;
gap: var(--space-1);
}
.input,
.textarea,
.select-wrap select {
width: 100%;
height: var(--control-height-md);
padding-inline: var(--space-3);
border: 1px solid var(--border-strong);
border-radius: var(--control-radius);
background: var(--bg-surface);
color: var(--text-primary);
font-size: 1rem; /* never below 16px: prevents iOS input-zoom */
}
.textarea {
height: auto;
min-height: 6rem;
padding-block: var(--space-2);
resize: vertical;
}
.input::placeholder,
.textarea::placeholder {
color: var(--text-muted);
}
.input:focus,
.textarea:focus,
.select-wrap select:focus {
border-color: var(--border-brand);
box-shadow: 0 0 0 3px var(--bg-brand-subtle);
}
.input:disabled,
.textarea:disabled,
.select-wrap select:disabled {
background: var(--bg-surface-sunken);
color: var(--text-disabled);
cursor: not-allowed;
}
/* NOT --border-danger here. That token is the tint used on an alert's edge, and it
measures 2.03:1 on the surface — BELOW 1.4.11's 3:1 for a state indicator, and
weaker than the 3.31:1 --border-strong every VALID field already draws. An invalid
field was therefore outlined more faintly than a valid one, which is backwards.
--color-danger-500 is 4.21:1, and the extra weight makes the state read at a glance
rather than only via the message below. (Colour is never the sole channel: the
field also carries aria-invalid and a role="alert" message.) */
.field.is-invalid .input,
.field.is-invalid .textarea,
.field.is-invalid .select-wrap select {
border-color: var(--color-danger-500);
border-width: 2px;
}
.input--sm {
height: var(--control-height-sm);
}
.input--lg {
height: var(--control-height-lg);
font-size: var(--font-size-body-lg);
}
.input--mono,
.input.font-mono {
font-family: var(--font-mono);
}
/* The mono stack (IBM Plex Mono, ui-monospace, …) has NO Arabic glyphs, so an
Arabic placeholder inside a mono field falls back per-glyph and the cursive
joining breaks — "امـسـح أو اكـتـب" instead of connected script. The VALUE in
these fields is always a Latin code (SKU, barcode, coupon, order number), so
keep mono for the value and set the placeholder in the Arabic-capable sans. */
.input--mono::placeholder,
.input.font-mono::placeholder {
font-family: var(--font-sans);
}
/* Select: custom chevron, symmetric so it needs no RTL mirroring */
.select-wrap {
position: relative;
display: block;
}
.select-wrap select {
-webkit-appearance: none;
appearance: none;
-moz-appearance: none;
padding-inline-end: var(--space-8);
cursor: pointer;
}
.select-wrap::after {
content: '';
position: absolute;
inset-inline-end: var(--space-3);
top: 50%;
transform: translateY(-20%);
width: 0;
height: 0;
border-inline-start: 5px solid transparent;
border-inline-end: 5px solid transparent;
border-block-start: 6px solid var(--text-secondary);
pointer-events: none;
}
/* Input group: icon / unit prefix-suffix */
.input-group {
position: relative;
display: flex;
align-items: stretch;
}
.input-group .input {
padding-inline-start: var(--space-9, 2.25rem);
}
.input-group__icon {
position: absolute;
inset-inline-start: var(--space-3);
top: 50%;
transform: translateY(-50%);
color: var(--text-muted);
pointer-events: none;
}
.input-group__addon {
display: inline-flex;
align-items: center;
padding-inline: var(--space-3);
background: var(--bg-surface-sunken);
border: 1px solid var(--border-strong);
color: var(--text-secondary);
font-size: var(--font-size-body-sm);
white-space: nowrap;
}
.input-group__addon:first-child {
border-start-start-radius: var(--control-radius);
border-end-start-radius: var(--control-radius);
border-inline-end: 0;
}
.input-group__addon:last-child {
border-start-end-radius: var(--control-radius);
border-end-end-radius: var(--control-radius);
border-inline-start: 0;
}
.input-group__addon ~ .input {
border-start-start-radius: 0;
border-end-start-radius: 0;
}
/* Checkbox / Radio */
.checkbox,
.radio {
display: inline-flex;
align-items: center;
gap: var(--space-2);
cursor: pointer;
font-size: var(--font-size-body-sm);
color: var(--text-primary);
}
.checkbox input,
.radio input {
-webkit-appearance: none;
appearance: none;
width: 1.25rem;
height: 1.25rem;
flex-shrink: 0;
border: 1.5px solid var(--border-strong);
background: var(--bg-surface);
position: relative;
cursor: pointer;
}
.checkbox input {
border-radius: var(--radius-xs);
}
.radio input {
border-radius: var(--radius-full);
}
.checkbox input:checked,
.radio input:checked {
background: var(--action-brand-default);
border-color: var(--action-brand-default);
}
.checkbox input:checked::after {
content: '';
position: absolute;
inset: 0;
margin: auto;
width: 0.7rem;
height: 0.45rem;
/* Physical (not logical) properties are intentional: a checkmark glyph is a
fixed visual symbol that must render identically in RTL and LTR. Using
border-inline-start/border-block-end here would flip which side is drawn
under dir="rtl" while the -45deg rotation stays fixed, mirroring the tick
into a chevron-like shape instead of a checkmark. */
border-left: 2px solid #fff;
border-bottom: 2px solid #fff;
transform: rotate(-45deg) translateY(-1px);
}
.radio input:checked::after {
content: '';
position: absolute;
inset: 0;
margin: auto;
width: 0.5rem;
height: 0.5rem;
border-radius: 50%;
background: #fff;
}
.checkbox input:focus-visible,
.radio input:focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: 2px;
}
.checkbox input:disabled,
.radio input:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* Switch */
.switch {
display: inline-flex;
align-items: center;
gap: var(--space-2);
cursor: pointer;
}
.switch input {
-webkit-appearance: none;
appearance: none;
width: 2.5rem;
height: 1.5rem;
border-radius: var(--radius-full);
background: var(--border-strong);
position: relative;
cursor: pointer;
transition: background var(--duration-fast) var(--ease-standard);
flex-shrink: 0;
}
.switch input::after {
content: '';
position: absolute;
top: 2px;
inset-inline-start: 2px;
width: 1.25rem;
height: 1.25rem;
border-radius: 50%;
background: #fff;
box-shadow: var(--shadow-e1);
transition: inset-inline-start var(--duration-fast) var(--ease-standard);
}
.switch input:checked {
background: var(--action-brand-default);
}
.switch input:checked::after {
inset-inline-start: calc(100% - 1.25rem - 2px);
}
.switch input:focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: 2px;
}
/* Stepper (POS qty +/-) */
.stepper {
display: inline-flex;
align-items: stretch;
border: 1px solid var(--border-strong);
border-radius: var(--control-radius);
overflow: hidden;
height: var(--control-height-md);
}
.stepper button {
width: var(--control-height-md);
display: flex;
align-items: center;
justify-content: center;
background: var(--bg-surface-sunken);
color: var(--text-primary);
font-size: 1.25rem;
font-weight: var(--font-weight-semibold);
}
.stepper button:hover {
background: var(--bg-brand-subtle);
color: var(--text-brand);
}
.stepper button:disabled {
opacity: 0.4;
}
.stepper input {
width: 3.5rem;
border: 0;
border-inline: 1px solid var(--border-default);
text-align: center;
font-variant-numeric: tabular-nums;
direction: ltr;
}
.stepper--lg {
height: var(--control-height-lg);
}
.stepper--lg button {
width: var(--control-height-lg);
font-size: 1.5rem;
}
/* File input (styled as a button trigger) */
.file-drop {
display: flex;
align-items: center;
gap: var(--space-3);
border: 1.5px dashed var(--border-strong);
border-radius: var(--radius-md);
padding: var(--space-4);
background: var(--bg-surface-sunken);
color: var(--text-secondary);
}
.file-drop input[type='file'] {
display: none;
}
/* --------------------------------------------------------------------------
8. Cards
-------------------------------------------------------------------------- */
.card {
background: var(--bg-surface);
border: 1px solid var(--border-default);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-e1);
}
.card__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
padding: var(--space-4) var(--space-5);
border-block-end: 1px solid var(--border-default);
}
.card__title {
font-size: var(--font-size-h4);
font-weight: var(--font-weight-semibold);
}
.card__subtitle {
font-size: var(--font-size-body-sm);
color: var(--text-secondary);
margin-block-start: var(--space-1);
}
.card__actions {
display: flex;
align-items: center;
gap: var(--space-2);
flex-shrink: 0;
}
.card__body {
padding: var(--space-5);
}
.card__body + .card__body {
border-block-start: 1px solid var(--border-default);
}
.card__footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--space-2);
padding: var(--space-4) var(--space-5);
border-block-start: 1px solid var(--border-default);
background: var(--bg-surface-sunken);
border-end-start-radius: var(--radius-lg);
border-end-end-radius: var(--radius-lg);
}
.card--flush .card__body {
padding: 0;
}
/* Stat / KPI tile */
.stat-tile {
background: var(--bg-surface);
border: 1px solid var(--border-default);
border-radius: var(--radius-lg);
padding: var(--space-5);
}
.stat-tile__label {
font-size: var(--font-size-body-sm);
color: var(--text-secondary);
}
.stat-tile__value {
font-size: var(--font-size-h1);
font-weight: var(--font-weight-bold);
margin-block-start: var(--space-1);
font-variant-numeric: tabular-nums;
direction: ltr;
unicode-bidi: isolate;
}
.stat-tile__trend {
display: inline-flex;
align-items: center;
gap: var(--space-1);
font-size: var(--font-size-caption);
font-weight: var(--font-weight-medium);
margin-block-start: var(--space-2);
}
.stat-tile__trend--up {
color: var(--text-success);
}
.stat-tile__trend--down {
color: var(--text-danger);
}
/* Product card: superseded by section 18 (Product card v2). The former block
lived here and set `direction: ltr` on .product-card__price, which forced the
currency symbol to the visual LEFT in Arabic — the reader met the number
before the symbol. Removed with the markup sweep, not shadowed. */
/* --------------------------------------------------------------------------
9. Tables
-------------------------------------------------------------------------- */
/* Horizontally scrollable table shell.
The scrolling always worked — what was missing is any SIGNAL that it scrolls,
so a cut-off column read as a deleted column (in a screenshot it is
indistinguishable). The edge fades + shadows below appear only when there is
actually more content in that direction (background-attachment: local vs
scroll does the detection with no JS). The pair is symmetric, so it is
direction-agnostic and behaves identically in RTL and LTR. */
.table-scroll {
width: 100%;
overflow-x: auto;
border: 1px solid var(--border-default);
border-radius: var(--radius-lg);
scrollbar-width: thin;
background:
linear-gradient(to right, var(--bg-surface) 30%, rgba(255, 255, 255, 0)) 0 0 / 2.5rem 100%
no-repeat local,
linear-gradient(to left, var(--bg-surface) 30%, rgba(255, 255, 255, 0)) 100% 0 / 2.5rem 100%
no-repeat local,
radial-gradient(farthest-side at 0 50%, rgba(15, 20, 22, 0.14), rgba(15, 20, 22, 0)) 0 0 /
0.85rem 100% no-repeat scroll,
radial-gradient(farthest-side at 100% 50%, rgba(15, 20, 22, 0.14), rgba(15, 20, 22, 0)) 100% 0 /
0.85rem 100% no-repeat scroll;
background-color: var(--bg-surface);
}
.table {
width: 100%;
min-width: 32rem;
border-collapse: collapse;
background: var(--bg-surface);
}
.table th,
.table td {
padding: var(--space-3) var(--space-4);
text-align: start;
font-size: var(--font-size-body-sm);
border-block-end: 1px solid var(--border-default);
white-space: nowrap;
}
.table th {
color: var(--text-secondary);
font-weight: var(--font-weight-semibold);
font-size: var(--font-size-caption);
text-transform: uppercase;
letter-spacing: 0.02em;
background: var(--bg-surface-sunken);
position: sticky;
top: 0;
}
.table tbody tr:last-child td {
border-block-end: 0;
}
.table tbody tr:hover {
background: var(--bg-surface-hover);
}
.table--zebra tbody tr:nth-child(even) {
background: var(--bg-surface-sunken);
}
.table td.is-numeric,
.table th.is-numeric {
direction: ltr;
text-align: end;
font-variant-numeric: tabular-nums;
}
.table__actions {
display: flex;
gap: var(--space-2);
justify-content: flex-end;
white-space: nowrap;
}
/* M29 — when the class lands on the | ITSELF (3 cells in the delivery-zone
table), `display: flex` takes the cell out of the table formatting context, so
its row no longer shares the others' baseline and the divider draws a visible
step. Keep it a table-cell and space the buttons with a sibling margin, which
needs no flex context and leaves the row intact. */
td.table__actions,
th.table__actions {
display: table-cell;
text-align: end;
vertical-align: middle;
}
td.table__actions > * + *,
th.table__actions > * + * {
margin-inline-start: var(--space-2);
}
.table-empty {
padding: var(--space-12) var(--space-4);
text-align: center;
color: var(--text-muted);
}
th.is-sortable {
cursor: pointer;
-webkit-user-select: none;
user-select: none;
}
th.is-sortable .icon {
opacity: 0.5;
}
th.is-sortable[aria-sort='ascending'] .icon,
th.is-sortable[aria-sort='descending'] .icon {
opacity: 1;
color: var(--text-brand);
}
/* --------------------------------------------------------------------------
10. Modals / dialogs
-------------------------------------------------------------------------- */
.modal-scrim {
position: fixed;
inset: 0;
background: var(--bg-overlay-scrim);
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-4);
z-index: var(--z-modal);
}
.modal-scrim[hidden] {
display: none;
}
.modal {
background: var(--bg-surface);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-e4);
width: 100%;
max-width: 30rem;
max-height: calc(100vh - var(--space-8));
display: flex;
flex-direction: column;
animation: sz-modal-in var(--duration-base) var(--ease-decelerate);
}
.modal--sm {
max-width: 24rem;
}
.modal--lg {
max-width: 42rem;
}
.modal--xl {
max-width: 56rem;
}
@keyframes sz-modal-in {
from {
opacity: 0;
transform: translateY(8px) scale(0.98);
}
to {
opacity: 1;
transform: none;
}
}
.modal__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-3);
padding: var(--space-5) var(--space-5) var(--space-3);
}
.modal__title {
font-size: var(--font-size-h3);
font-weight: var(--font-weight-semibold);
}
.modal__close {
flex-shrink: 0;
width: 2rem;
height: 2rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-full);
color: var(--text-muted);
}
.modal__close:hover {
background: var(--bg-surface-sunken);
color: var(--text-primary);
}
.modal__body {
padding: 0 var(--space-5) var(--space-5);
overflow-y: auto;
color: var(--text-secondary);
}
.modal__body > * + * {
margin-block-start: var(--space-3);
}
.modal__footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--space-2);
padding: var(--space-4) var(--space-5);
border-block-start: 1px solid var(--border-default);
}
.modal__footer--between {
justify-content: space-between;
}
.modal--danger .modal__title {
color: var(--text-danger);
}
/* --------------------------------------------------------------------------
11. Tabs
-------------------------------------------------------------------------- */
.tabs__list {
display: flex;
gap: var(--space-1);
border-block-end: 1px solid var(--border-default);
overflow-x: auto;
}
.tabs__tab {
padding: var(--space-3) var(--space-4);
font-size: var(--font-size-body-sm);
font-weight: var(--font-weight-medium);
color: var(--text-secondary);
border-block-end: 2px solid transparent;
margin-block-end: -1px;
white-space: nowrap;
}
.tabs__tab:hover {
color: var(--text-primary);
}
.tabs__tab[aria-selected='true'] {
color: var(--text-brand);
border-block-end-color: var(--action-brand-default);
}
.tabs__panel {
padding-block: var(--space-5);
}
.tabs__panel[hidden] {
display: none;
}
/* --------------------------------------------------------------------------
12. Alerts / banners
-------------------------------------------------------------------------- */
.alert {
display: flex;
gap: var(--space-3);
padding: var(--space-4);
border-radius: var(--radius-md);
border: 1px solid transparent;
font-size: var(--font-size-body-sm);
}
.alert__icon {
flex-shrink: 0;
margin-block-start: 1px;
}
.alert__body {
flex: 1;
}
.alert__title {
font-weight: var(--font-weight-semibold);
margin-block-end: var(--space-1);
}
.alert--info {
background: var(--bg-info-subtle);
border-color: var(--border-info);
color: var(--text-info);
}
.alert--success {
background: var(--bg-success-subtle);
border-color: var(--border-success);
color: var(--text-success);
}
.alert--warning {
background: var(--bg-warning-subtle);
border-color: var(--border-warning);
color: var(--text-warning);
}
.alert--danger {
background: var(--bg-danger-subtle);
border-color: var(--border-danger);
color: var(--text-danger);
}
.alert__body :where(p) {
color: var(--text-primary);
}
.alert__dismiss {
flex-shrink: 0;
color: inherit;
opacity: 0.7;
}
.alert__dismiss:hover {
opacity: 1;
}
/* --------------------------------------------------------------------------
13. Toasts
-------------------------------------------------------------------------- */
.toast-region {
position: fixed;
inset-block-start: var(--space-4);
inset-inline-end: var(--space-4);
z-index: var(--z-toast);
display: flex;
flex-direction: column;
gap: var(--space-2);
width: 22rem;
max-width: calc(100vw - var(--space-8));
}
.toast {
display: flex;
align-items: flex-start;
gap: var(--space-3);
background: var(--color-neutral-900);
color: var(--text-on-dark);
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-md);
box-shadow: var(--shadow-e3);
animation: sz-toast-in var(--duration-base) var(--ease-decelerate);
}
@keyframes sz-toast-in {
from {
opacity: 0;
transform: translateY(-6px);
}
to {
opacity: 1;
transform: none;
}
}
.toast--success {
background: var(--color-success-800);
}
.toast--danger {
background: var(--color-danger-800);
}
.toast--warning {
background: var(--color-warning-800);
}
/* --------------------------------------------------------------------------
14. Empty / error / loading states
-------------------------------------------------------------------------- */
.empty-state,
.error-state {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: var(--space-12) var(--space-6);
color: var(--text-secondary);
}
.empty-state__icon,
.error-state__icon {
width: 3.5rem;
height: 3.5rem;
border-radius: var(--radius-full);
background: var(--bg-surface-sunken);
color: var(--text-muted);
display: flex;
align-items: center;
justify-content: center;
margin-block-end: var(--space-4);
}
.error-state__icon {
background: var(--bg-danger-subtle);
color: var(--text-danger);
}
.empty-state__title,
.error-state__title {
font-size: var(--font-size-h4);
font-weight: var(--font-weight-semibold);
color: var(--text-primary);
}
.empty-state__desc,
.error-state__desc {
max-width: 32rem;
margin-block-start: var(--space-1);
}
.empty-state__actions,
.error-state__actions {
margin-block-start: var(--space-4);
display: flex;
gap: var(--space-2);
}
.skeleton {
background: linear-gradient(
90deg,
var(--bg-surface-sunken) 25%,
var(--border-default) 37%,
var(--bg-surface-sunken) 63%
);
background-size: 400% 100%;
animation: sz-skeleton 1.4s ease infinite;
border-radius: var(--radius-sm);
}
@keyframes sz-skeleton {
0% {
background-position: 100% 50%;
}
100% {
background-position: 0 50%;
}
}
.skeleton--text {
height: 0.85em;
margin-block: 0.15em;
}
.skeleton--title {
height: 1.5rem;
width: 40%;
}
.skeleton--avatar {
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
}
.spinner {
display: inline-block;
width: 1.25em;
height: 1.25em;
border: 2px solid var(--border-strong);
border-inline-end-color: var(--action-brand-default);
border-radius: 50%;
animation: sz-spin 0.7s linear infinite;
}
.spinner--lg {
width: 2.5rem;
height: 2.5rem;
border-width: 3px;
}
.loading-line {
display: flex;
align-items: center;
gap: var(--space-2);
color: var(--text-secondary);
padding: var(--space-6) 0;
}
/* --------------------------------------------------------------------------
15. Misc
-------------------------------------------------------------------------- */
/* Pagination */
.pagination {
display: flex;
align-items: center;
gap: var(--space-2);
}
/* M30 — this box deliberately opts OUT of the page direction: "1–12 / 41" is a run
of European numerals, and under an RTL base the runs reverse to "41 / 1–12", so
`direction: ltr` has to stay. The catch is that a logical margin resolves against
the element's OWN direction, so `margin-inline-end: auto` became margin-RIGHT
inside an RTL flex line — absorbing the space on the range's right and dragging it
off the edge to sit beside the pager (measured 466px from the container edge).
The RTL override below is the one place a direction-specific rule is correct:
the element's direction and its parent's genuinely differ. */
.pagination__range {
font-size: var(--font-size-body-sm);
color: var(--text-secondary);
margin-inline-end: auto;
direction: ltr;
unicode-bidi: isolate;
}
[dir='rtl'] .pagination__range {
margin-inline-end: 0;
margin-inline-start: auto;
}
.pagination__btn {
min-width: var(--control-height-sm);
height: var(--control-height-sm);
padding-inline: var(--space-2);
border-radius: var(--radius-sm);
color: var(--text-secondary);
display: inline-flex;
align-items: center;
justify-content: center;
}
.pagination__btn:hover:not(:disabled) {
background: var(--bg-surface-sunken);
}
.pagination__btn[aria-current='page'] {
background: var(--action-brand-default);
color: var(--text-on-brand);
}
.pagination__btn:disabled {
opacity: 0.35;
pointer-events: none;
}
/* Breadcrumb */
.breadcrumb {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--font-size-body-sm);
color: var(--text-secondary);
flex-wrap: wrap;
}
.breadcrumb a:hover {
color: var(--text-brand);
}
.breadcrumb__sep {
color: var(--text-muted);
width: 0.85em;
height: 0.85em;
}
.breadcrumb__current {
color: var(--text-primary);
font-weight: var(--font-weight-medium);
}
/* Tooltip (CSS-only) */
[data-tooltip] {
position: relative;
}
[data-tooltip]::after {
content: attr(data-tooltip);
position: absolute;
bottom: calc(100% + 6px);
inset-inline-start: 50%;
transform: translateX(-50%) translateY(4px);
background: var(--color-neutral-900);
color: #fff;
font-size: var(--font-size-micro);
padding: var(--space-1) var(--space-2);
border-radius: var(--radius-sm);
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition:
opacity var(--duration-fast) var(--ease-standard),
transform var(--duration-fast) var(--ease-standard);
z-index: var(--z-tooltip);
}
[dir='rtl'] [data-tooltip]::after {
transform: translateX(50%) translateY(4px);
}
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
transform: translateX(-50%) translateY(0);
opacity: 1;
}
[dir='rtl'] [data-tooltip]:hover::after,
[dir='rtl'] [data-tooltip]:focus-visible::after {
transform: translateX(50%) translateY(0);
}
/* Segmented control */
.segmented {
display: inline-flex;
background: var(--bg-surface-sunken);
border-radius: var(--control-radius);
padding: 3px;
gap: 2px;
}
.segmented__option {
padding-inline: var(--space-4);
height: calc(var(--control-height-md) - 6px);
border-radius: calc(var(--control-radius) - 2px);
font-size: var(--font-size-body-sm);
font-weight: var(--font-weight-medium);
color: var(--text-secondary);
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
}
.segmented__option[aria-pressed='true'] {
background: var(--bg-surface);
color: var(--text-brand);
box-shadow: var(--shadow-e1);
font-weight: var(--font-weight-semibold);
}
/* Chip (filter / category) */
.chip {
display: inline-flex;
align-items: center;
gap: var(--space-1);
height: 2rem;
/* Fixed-height pill in a horizontally scrolling row: multi-word Arabic labels
("منزل ومطبخ") wrapped to a second line and were clipped by the 2rem height.
Keep them on one line and let the row scroll instead. */
white-space: nowrap;
flex-shrink: 0;
padding-inline: var(--space-3);
border-radius: var(--radius-full);
border: 1px solid var(--border-strong);
font-size: var(--font-size-body-sm);
color: var(--text-secondary);
background: var(--bg-surface);
}
.chip:hover {
border-color: var(--border-brand);
color: var(--text-brand);
}
/* aria-current is the anchor form of the same state. The storefront category
rail is a set of real navigations (§3.7 — the URL must stay crawlable), and a
link cannot carry aria-pressed, so without this the current category renders
with no active pill at all. */
.chip[aria-pressed='true'],
.chip[aria-current='page'] {
background: var(--color-neutral-900);
border-color: var(--color-neutral-900);
color: #fff;
}
.chip__remove {
margin-inline-start: var(--space-1);
opacity: 0.7;
}
.chip__remove:hover {
opacity: 1;
}
/* Progress bar */
.progress {
height: 0.5rem;
border-radius: var(--radius-full);
background: var(--bg-surface-sunken);
overflow: hidden;
}
.progress__bar {
height: 100%;
background: var(--action-brand-default);
border-radius: var(--radius-full);
transition: width var(--duration-slow) var(--ease-standard);
}
.progress--indeterminate .progress__bar {
width: 40% !important;
animation: sz-progress-indet 1.2s ease-in-out infinite;
}
@keyframes sz-progress-indet {
0% {
margin-inline-start: -40%;
}
100% {
margin-inline-start: 100%;
}
}
/* Status timeline (order lifecycle / referral chain) */
.timeline {
display: flex;
width: 100%;
}
.timeline__step {
flex: 1;
position: relative;
text-align: center;
padding-block-start: 0.7rem;
}
.timeline__step:not(:first-child)::before {
content: '';
position: absolute;
inset-inline-end: 50%;
top: 0.6rem;
width: 100%;
height: 2px;
background: var(--border-default);
z-index: 0;
}
.timeline__step--done:not(:first-child)::before {
background: var(--color-brand-400);
}
.timeline__dot {
position: relative;
z-index: 1;
width: 1.2rem;
height: 1.2rem;
border-radius: 50%;
background: var(--bg-surface);
border: 2px solid var(--border-strong);
margin-inline: auto;
}
.timeline__step--done .timeline__dot {
background: var(--action-brand-default);
border-color: var(--action-brand-default);
}
.timeline__step--current .timeline__dot {
border-color: var(--action-brand-default);
box-shadow: 0 0 0 4px var(--bg-brand-subtle);
}
.timeline__label {
display: block;
margin-block-start: var(--space-2);
font-size: var(--font-size-caption);
color: var(--text-secondary);
}
.timeline__step--done .timeline__label,
.timeline__step--current .timeline__label {
color: var(--text-primary);
font-weight: var(--font-weight-medium);
}
/* Avatar */
.avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
border-radius: var(--radius-full);
background: var(--bg-brand-subtle);
color: var(--text-brand);
font-weight: var(--font-weight-semibold);
font-size: var(--font-size-body-sm);
flex-shrink: 0;
overflow: hidden;
}
.avatar--sm {
width: 2rem;
height: 2rem;
font-size: var(--font-size-caption);
}
.avatar--lg {
width: 3.5rem;
height: 3.5rem;
font-size: var(--font-size-h4);
}
/* Logo placeholder (shop / brand mark) */
.logo-mark {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-md);
background: var(--action-brand-default);
color: #fff;
font-weight: var(--font-weight-bold);
flex-shrink: 0;
}
/* Notification bell */
.icon-btn {
position: relative;
width: var(--control-height-md);
height: var(--control-height-md);
border-radius: var(--radius-full);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--text-secondary);
}
.icon-btn:hover {
background: var(--bg-surface-sunken);
color: var(--text-primary);
}
.icon-btn__badge {
position: absolute;
top: 6px;
inset-inline-end: 6px;
width: 0.5rem;
height: 0.5rem;
border-radius: 50%;
background: var(--color-danger-500);
border: 2px solid var(--bg-surface);
}
.divider {
height: 1px;
background: var(--border-default);
border: 0;
}
.divider--vertical {
width: 1px;
height: 100%;
background: var(--border-default);
}
/* --------------------------------------------------------------------------
16. Prototype-only chrome (not part of the real app — reviewer affordances)
-------------------------------------------------------------------------- */
/* Reviewer-only chrome. It was previously a FULL-WIDTH BLACK SLAB sitting in the
content flow of all 68 screens — inside the login card, inside the checkout
form, six times on the admin KPI page — which dominated every screenshot and
made a finished design read as a dev harness.
Now: a compact, recessive pill aligned to the inline-end, out of the way of
the composition. Append `?proto=0` to any URL to hide all prototype chrome
entirely (for stakeholder demos and screenshot handoffs). */
.proto-bar {
/* Deliberately NOT sticky: the app shells already stick their own topbar to
top:0, and this reviewer-only affordance must never fight it for space. */
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-1) var(--space-2);
background: transparent;
color: var(--text-secondary);
border: 1px dashed var(--border-strong);
font-size: var(--font-size-micro);
flex-wrap: wrap;
border-radius: var(--radius-full);
margin-block-end: var(--space-2);
margin-inline-start: auto;
opacity: 0.75;
}
.proto-bar:hover,
.proto-bar:focus-within {
opacity: 1;
}
/* The bar is inline-flex, so it needs a full-width flow parent to sit at the end. */
.proto-bar {
align-self: flex-end;
}
.proto-bar__label {
font-weight: var(--font-weight-medium);
}
.proto-bar select {
height: 1.5rem;
background: var(--bg-surface);
color: var(--text-primary);
border: 1px solid var(--border-strong);
border-radius: var(--radius-sm);
padding-inline: var(--space-2);
font-size: var(--font-size-micro);
}
/* `?proto=0` — hide every reviewer-only affordance. */
html.proto-hidden [data-proto-chrome] {
display: none !important;
}
.proto-bar__group {
display: inline-flex;
align-items: center;
gap: var(--space-2);
}
.proto-bar a {
color: var(--color-brand-300);
text-decoration: underline;
}
.planned-item {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-sm);
color: var(--text-muted);
font-size: var(--font-size-body-sm);
}
.planned-item .badge {
flex-shrink: 0;
}
.built-item {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-sm);
font-size: var(--font-size-body-sm);
}
.built-item:hover {
background: var(--bg-brand-subtle-hover, var(--bg-surface-sunken));
}
.built-item a {
font-weight: var(--font-weight-medium);
color: var(--text-primary);
flex: 1;
}
.built-item a:hover {
color: var(--text-brand);
}
/* --------------------------------------------------------------------------
17. Nav shells
-------------------------------------------------------------------------- */
/* ---- Storefront: header + category rail + footer ------------------------ */
/* NOTE: .sf-header, .sf-header__search and .sf-header__cart-count moved to
section 20 (rebuilt search-first). The rules below are still canonical and
section 20 builds on them rather than restating them. */
.sf-utility-bar {
background: var(--color-neutral-900);
color: var(--text-on-dark);
font-size: var(--font-size-micro);
}
.sf-utility-bar .container {
display: flex;
align-items: center;
justify-content: space-between;
height: 2rem;
}
.sf-utility-bar a {
opacity: 0.85;
}
.sf-utility-bar a:hover {
opacity: 1;
}
.sf-header .container {
display: flex;
align-items: center;
gap: var(--space-4);
padding-block: var(--space-3);
}
.sf-header__brand {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--font-size-h4);
font-weight: var(--font-weight-bold);
color: var(--text-brand);
flex-shrink: 0;
}
.sf-header__search form {
display: flex;
}
.sf-header__search input {
border-start-end-radius: 0;
border-end-end-radius: 0;
border-inline-end: 0;
}
.sf-header__search button {
border-start-start-radius: 0;
border-end-start-radius: 0;
}
.sf-header__actions {
display: flex;
align-items: center;
gap: var(--space-1);
flex-shrink: 0;
margin-inline-start: auto;
}
.sf-header__mobile-toggle {
display: none;
}
.sf-category-nav {
background: var(--bg-surface);
border-block-end: 1px solid var(--border-default);
}
.sf-category-nav .container {
display: flex;
gap: var(--space-2);
padding-block: var(--space-3);
overflow-x: auto;
}
.sf-footer {
background: var(--color-neutral-900);
color: var(--color-neutral-300);
margin-block-start: var(--space-16);
}
.sf-footer .container {
padding-block: var(--space-10);
display: grid;
gap: var(--space-8);
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}
.sf-footer h3 {
color: #fff;
font-size: var(--font-size-body-sm);
margin-block-end: var(--space-3);
}
.sf-footer ul {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.sf-footer a {
font-size: var(--font-size-body-sm);
}
.sf-footer a:hover {
color: #fff;
}
.sf-footer__bottom {
border-block-start: 1px solid var(--color-neutral-800);
padding-block: var(--space-4);
font-size: var(--font-size-caption);
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--space-2);
}
@media (max-width: 767px) {
.sf-header .container {
flex-wrap: wrap;
}
/* `width` is ignored for a flex item's main size — the base `flex: 1` sets
flex-basis:0, so the field only wrapped onto its own row when something
else happened to force a wrap. At 390px that left a 35px input stub, while
360px (which did wrap) gave a usable 274px. Set the basis explicitly. */
.sf-header__search {
order: 3;
max-width: none;
flex: 1 0 100%;
}
}
/* ---- Merchant: topbar + collapsible grouped sidebar ---------------------- */
.mc-shell {
display: grid;
grid-template-columns: auto 1fr;
min-height: 100vh;
}
.mc-sidebar {
width: 17rem;
background: var(--color-neutral-900);
color: var(--color-neutral-300);
display: flex;
flex-direction: column;
transition: width var(--duration-base) var(--ease-standard);
overflow: hidden;
}
.mc-shell.is-sidebar-collapsed .mc-sidebar {
width: 4.25rem;
}
.mc-sidebar__brand {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-4);
font-weight: var(--font-weight-bold);
color: #fff;
white-space: nowrap;
}
.mc-sidebar__scroll {
flex: 1;
overflow-y: auto;
padding: var(--space-2);
}
.mc-sidebar__group + .mc-sidebar__group {
margin-block-start: var(--space-4);
}
/* --text-muted-on-dark, not --color-neutral-500: the raw ramp value measured 4.05:1
against the sidebar's --color-neutral-900, short of 1.4.3's 4.5:1, on all 40
authenticated merchant screens. (The letter-spacing is safe on Arabic — Chromium
does not insert it between joined letterforms, verified by measuring the rendered
run; it only affects the Latin mirror.) */
.mc-sidebar__group-title {
font-size: var(--font-size-micro);
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-muted-on-dark);
padding: var(--space-2) var(--space-3);
white-space: nowrap;
}
/* Collapsed rail. Shrinking the width alone is NOT enough — the label spans
must be removed from layout, otherwise they overflow the 4.25rem rail and
every nav item renders chopped mid-word ("لوح", "نقط" / "Da", "PO"). */
.mc-shell.is-sidebar-collapsed .mc-sidebar__group-title {
opacity: 0;
height: 0;
padding-block: 0;
overflow: hidden;
}
/* Visually hidden, NOT display:none — the label is the link's accessible name,
so an icon-only rail must keep it in the a11y tree. */
.mc-shell.is-sidebar-collapsed .mc-sidebar__link > span,
.mc-shell.is-sidebar-collapsed .mc-sidebar__brand > span:not(.logo-mark) {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.mc-shell.is-sidebar-collapsed .mc-sidebar__link,
.mc-shell.is-sidebar-collapsed .mc-sidebar__brand {
justify-content: center;
gap: 0;
}
.mc-shell.is-sidebar-collapsed .mc-sidebar__link .icon {
flex-shrink: 0;
}
.mc-sidebar__link {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-md);
font-size: var(--font-size-body-sm);
color: var(--color-neutral-300);
white-space: nowrap;
}
.mc-sidebar__link .icon {
flex-shrink: 0;
}
.mc-sidebar__link:hover {
background: var(--color-neutral-800);
color: #fff;
}
.mc-sidebar__link[aria-current='page'] {
background: var(--color-brand-700);
color: #fff;
}
.mc-sidebar__toggle {
margin: var(--space-2);
color: var(--color-neutral-400);
align-self: flex-end;
}
.mc-sidebar__toggle:hover {
color: #fff;
}
.mc-main {
display: flex;
flex-direction: column;
min-width: 0;
}
.mc-topbar {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3) var(--space-5);
background: var(--bg-surface);
border-block-end: 1px solid var(--border-default);
position: sticky;
top: 0;
z-index: var(--z-sticky);
}
.mc-topbar__title {
font-size: var(--font-size-h4);
font-weight: var(--font-weight-semibold);
}
.mc-topbar__spacer {
flex: 1;
}
.mc-impersonation-banner {
background: var(--color-warning-500);
color: var(--color-neutral-900);
font-size: var(--font-size-body-sm);
font-weight: var(--font-weight-medium);
padding: var(--space-2) var(--space-5);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
}
.mc-content {
padding: var(--space-6);
flex: 1;
}
/* The drawer opener. Hidden on desktop where the sidebar is always visible;
revealed below 1024px, which is the ONLY way to reach navigation there.
(Do NOT re-add an inline style="display:none" to the button — that is what
previously made the merchant + admin apps unnavigable at the 768px tablet
floor, their stated primary form factor.) */
[data-sidebar-open-toggle] {
display: none;
}
@media (max-width: 1023px) {
.mc-shell {
grid-template-columns: 1fr;
}
/* `visibility: hidden` while closed is doing two jobs, both load-bearing:
(1) a11y — without it the drawer's 29 nav links stay in the tab order, so a
keyboard user tabs off the header into an invisible menu and is lost;
(2) layout — a position:fixed element parked outside the viewport still
contributes to the document's scrollable overflow in Chromium, which is
what put a phantom horizontal scrollbar on every merchant and admin
screen below 1024px. `visibility` is animatable in the discrete sense, so
delaying it until the slide-out finishes keeps the close transition. */
.mc-sidebar {
position: fixed;
inset-block: 0;
inset-inline-start: 0;
z-index: var(--z-modal);
transform: translateX(-100%);
visibility: hidden;
transition:
transform var(--duration-base) var(--ease-standard),
visibility 0s linear var(--duration-base);
box-shadow: var(--shadow-e4);
}
[dir='rtl'] .mc-sidebar {
transform: translateX(100%);
}
.mc-shell.is-sidebar-open .mc-sidebar {
transform: none;
width: 17rem;
visibility: visible;
transition:
transform var(--duration-base) var(--ease-standard),
visibility 0s;
}
.mc-sidebar__toggle {
display: none;
}
.mc-content {
padding: var(--space-4);
}
[data-sidebar-open-toggle] {
display: inline-flex;
}
/* Dismiss scrim — tapping outside the drawer closes it. */
.mc-shell.is-sidebar-open::before,
.ad-shell.is-sidebar-open::before {
content: '';
position: fixed;
inset: 0;
background: var(--bg-overlay-scrim);
z-index: var(--z-overlay);
}
}
/* ---- Admin: topbar + grouped sidebar (desktop-only, denser) --------------- */
.ad-shell {
display: grid;
grid-template-columns: 15rem 1fr;
min-height: 100vh;
}
.ad-sidebar {
background: var(--bg-surface);
border-inline-end: 1px solid var(--border-default);
display: flex;
flex-direction: column;
}
.ad-sidebar__brand {
padding: var(--space-4);
font-weight: var(--font-weight-bold);
color: var(--text-brand);
border-block-end: 1px solid var(--border-default);
}
.ad-sidebar__scroll {
flex: 1;
overflow-y: auto;
padding: var(--space-2);
}
.ad-sidebar__group + .ad-sidebar__group {
margin-block-start: var(--space-3);
}
.ad-sidebar__group-title {
font-size: var(--font-size-micro);
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-muted);
padding: var(--space-2) var(--space-3);
}
.ad-sidebar__link {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-sm);
font-size: var(--font-size-body-sm);
color: var(--text-secondary);
}
.ad-sidebar__link:hover {
background: var(--bg-surface-sunken);
color: var(--text-primary);
}
.ad-sidebar__link[aria-current='page'] {
background: var(--bg-brand-subtle);
color: var(--text-brand);
font-weight: var(--font-weight-medium);
}
.ad-main {
display: flex;
flex-direction: column;
min-width: 0;
}
.ad-topbar {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3) var(--space-5);
background: var(--bg-surface);
border-block-end: 1px solid var(--border-default);
}
.ad-topbar__title {
font-size: var(--font-size-h4);
font-weight: var(--font-weight-semibold);
}
.ad-topbar__spacer {
flex: 1;
}
.ad-content {
padding: var(--space-5);
flex: 1;
}
@media (max-width: 1023px) {
.ad-shell {
grid-template-columns: 1fr;
}
.ad-sidebar {
position: fixed;
inset-block: 0;
inset-inline-start: 0;
width: 15rem;
z-index: var(--z-modal);
transform: translateX(-100%);
transition: transform var(--duration-base) var(--ease-standard);
box-shadow: var(--shadow-e4);
}
[dir='rtl'] .ad-sidebar {
transform: translateX(100%);
}
.ad-shell.is-sidebar-open .ad-sidebar {
transform: none;
}
.ad-content {
padding: var(--space-4);
}
}
/* --------------------------------------------------------------------------
18. Commerce: product card v2, pricing, rating, grid
-------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
1. Product card v2
Anatomy is a FIXED source order — media, badge, shop, name, rating, price,
stock — so an Arabic card and an English card clamp at the same places and a
mixed-locale screenshot diff stays readable.
-------------------------------------------------------------------------- */
.product-card {
position: relative;
/* Contains the stretched-link ::after below so its z-index cannot escape the
card and paint over a sticky header or the badge of the next card. */
isolation: isolate;
display: flex;
flex-direction: column;
background: var(--bg-surface);
border: 1px solid var(--border-default);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-e1);
overflow: hidden;
color: var(--text-primary);
/* Grid items default to min-inline-size:auto, so one unbroken model number
("SKU-AJW-1000-XLPACK") stretched its track and dragged every sibling
column wider. The grid also uses minmax(0,1fr); belt and braces. */
min-inline-size: 0;
}
/* Media: always 1:1. A fixed-height slot (the old 8rem) means a portrait photo
and a landscape photo produce different card heights in the same row. */
.product-card__media {
position: relative;
aspect-ratio: 1 / 1;
overflow: hidden;
background: var(--bg-media);
/* Block-start corners only — the media sits flush against the body below it. */
border-start-start-radius: var(--radius-media);
border-start-end-radius: var(--radius-media);
}
.product-card__media > img {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
}
/* Letterbox instead of behead. Use when the photo's intrinsic ratio deviates
more than ~25% from square: `cover` on a 3:1 banner-shaped shot crops the
product out entirely, and on a tall bottle it cuts the label off. The
--bg-media field is the letterbox, which is why that token is not white. */
.product-card__media--contain > img {
object-fit: contain;
padding: var(--space-3);
}
/* No image yet: a shop-initial monogram on the shop's own subtle accent.
Deliberately NOT the generic box glyph — that icon is already three storefront
nav items, the cart empty state, the 404 state and the search empty state, so a
grid of box glyphs reads as "everything is broken" rather than "no photo yet".
Mark the monogram aria-hidden; the shop name is already in the card text. */
.product-card__media--empty {
display: grid;
place-items: center;
background: var(--shop-accent-subtle);
}
.product-card__monogram {
font-size: var(--font-size-h1);
font-weight: var(--font-weight-bold);
line-height: 1;
color: var(--shop-accent);
/* An initial is a single glyph run of unknown script — isolate it so a Latin
"T" inside an Arabic card cannot reorder against neighbouring punctuation. */
unicode-bidi: isolate;
}
/* Absolutely positioned so it takes NO flow space: a card with a sale badge and
a card without must be exactly the same height in the same row. */
.product-card__badge {
position: absolute;
inset-block-start: var(--space-2);
inset-inline-start: var(--space-2);
z-index: 1;
}
.product-card__body {
display: flex;
flex-direction: column;
gap: var(--space-1);
padding: var(--space-3);
flex: 1;
min-inline-size: 0;
}
/* Mall surfaces only (search, mall home, category). On a shop's own storefront
every card is that shop, so the line is pure noise. */
.product-card__shop {
position: relative;
z-index: 1; /* above the stretched-link overlay so the shop link stays clickable */
font-size: var(--font-size-micro);
color: var(--text-muted);
text-align: start;
unicode-bidi: plaintext;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
/* An inline text link is exempt from the 44px target floor (WCAG 2.5.8's
"inline" exception) — growing it to 44px would add ~27px to every card on
the surface where space is scarcest. The negative margin buys a little slop
without changing the card's block size. */
padding-block: var(--space-0-5);
margin-block: calc(var(--space-0-5) * -1);
}
.product-card__shop:hover {
color: var(--text-brand);
}
.product-card__name {
font-size: var(--font-size-card-title);
font-weight: var(--font-weight-card-title);
line-height: var(--line-height-snug);
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
overflow-wrap: anywhere;
/* `plaintext` resolves EACH title's direction from its own first strong
character, and `start` then aligns to that resolved direction. Without it a
Latin brand name ("Anker PowerCore 20000") inside the Arabic grid is laid
out RTL — the trailing model number jumps to the front of the line — and an
Arabic title inside the English grid does the mirror. This is the one place
in the card where direction is decided per-item rather than per-page. */
unicode-bidi: plaintext;
text-align: start;
/* `2lh` is exactly two lines of THIS element's line box. The old card used
`min-height: 2.6em`, wrong twice: em is the font size, not the line box, and
the Arabic type step raises --line-height-snug to 1.5 while Latin stays 1.35,
so no single em value can be right for both scripts. The calc() is the same
computation for engines without `lh`, derived from the same token, so the two
cannot drift apart. */
min-block-size: calc(2 * var(--line-height-snug) * 1em);
min-block-size: 2lh;
}
/* Reserved ALWAYS, even for an unrated product. Ratings arrive per-item from the
review aggregate; without the reservation the price lines of a mixed row sit at
four different heights and the grid visibly reflows as data lands. */
.product-card__rating {
display: flex;
align-items: center;
min-block-size: 1.25rem;
}
/* Pins the price to the foot of the card so a 1-line title and a 2-line title
still align their prices. Markup may also put `.price` on this same element
(class="product-card__price-row price") — both shapes are supported. */
.product-card__price-row {
margin-block-start: auto;
padding-block-start: var(--space-1);
}
.product-card__stock {
align-self: start;
} /* pill visuals live in §6 */
/* Compact variant for the PDP "more from this shop" rail. */
.product-card--compact .product-card__body {
padding: var(--space-2);
}
.product-card--compact .product-card__monogram {
font-size: var(--font-size-h3);
}
/* The rail already carries the heading "المزيد من هذا المتجر" — repeating the
shop name on all six cards below it is redundant. */
.product-card--compact .product-card__shop {
display: none;
}
/* Stretched link: the card is not an , because a card that wraps everything
cannot also contain the shop link (nested anchors are invalid and Safari
silently drops the inner one). The name link covers the card instead. */
.product-card__link,
.shop-card__link {
color: inherit;
text-decoration: none;
}
.product-card__link::after,
.shop-card__link::after {
content: '';
position: absolute;
inset: 0;
z-index: 0;
}
/* Put the ring on the CARD, not on the two-line name fragment. The `:has()`
selector is the whole rule's guard: engines without it drop the rule and the
link keeps its own default ring, so focus is never lost. */
.product-card:has(.product-card__link:focus-visible),
.shop-card:has(.shop-card__link:focus-visible) {
outline: 2px solid var(--focus-ring);
outline-offset: 2px;
}
.product-card:has(.product-card__link:focus-visible) .product-card__link,
.shop-card:has(.shop-card__link:focus-visible) .shop-card__link {
outline: none;
}
/* Hover lift. Guarded twice: `hover: hover` keeps a touch device from latching a
sticky hover shadow after a tap, and the transition only exists when motion is
welcome. The Phase-1 block applied both unconditionally — the first line here
neutralises it for coarse pointers, which is the whole point of the guard. */
.product-card:hover {
box-shadow: var(--shadow-e1);
transform: none;
}
@media (prefers-reduced-motion: no-preference) {
.product-card {
transition:
box-shadow var(--duration-fast) var(--ease-standard),
transform var(--duration-fast) var(--ease-standard);
}
}
@media (hover: hover) {
.product-card:hover {
box-shadow: var(--shadow-e3);
/* -2px, expressed through the spacing scale rather than a raw px literal. */
transform: translateY(calc(var(--space-0-5) * -1));
}
}
@media (prefers-reduced-motion: reduce) {
.product-card:hover {
transform: none;
}
}
/* --------------------------------------------------------------------------
2. Price block
SOURCE ORDER IS THE FEATURE: current price FIRST, compare-at SECOND, discount
badge THIRD. In a logical flex row the first item sits at the inline-start
edge, which is where an Arabic reader's eye lands first — so the payable
figure is read before the struck-out one, in both scripts, with no `order:`
hack. Never reorder these with `order:`: the accessibility tree follows DOM
order, so a screen reader would announce the price the customer does NOT pay.
-------------------------------------------------------------------------- */
.price {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: var(--space-1) var(--space-2);
/* Reserved slot. A card WITHOUT a compare-at price must occupy the same block
size as one WITH it, or a mixed grid loses its baselines and jumps as prices
resolve. Two lines are reserved because at the 2-up mobile width the
compare-at and the discount badge wrap below the current price. The calc is
built from the same tokens the children use, including --line-height-snug,
so it follows the Arabic type step automatically. */
min-block-size: calc(
var(--font-size-body-lg) * var(--line-height-snug) + var(--font-size-caption) *
var(--line-height-normal) + var(--space-1)
);
}
.price__current {
font-size: var(--font-size-body-lg);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-snug);
color: var(--text-primary);
font-variant-numeric: tabular-nums;
/* MONEY IS NEVER FORCED TO LTR. formatMoney emits "ر.س 45.00" — symbol first
LOGICALLY — which renders correctly inside an RTL run. Forcing direction:ltr
flips it to "45.00 ر.س" visually, so the Arabic reader meets the number
before the currency. `isolate` alone is what we want: it seals the money run
off from neighbouring neutrals (brackets, dashes, "من") without touching the
order inside it. */
unicode-bidi: isolate;
}
/* Rendered on an . The strike must not be the only signal — markup carries a
.visually-hidden "السعر قبل الخصم" label, because a line-through is invisible
to a screen reader and `text-decoration` alone is a colour/decoration-only cue.
(line-through does survive forced-colors, which is why it is the base signal
rather than a grey tint.) */
.price__compare {
font-size: var(--font-size-caption);
line-height: var(--line-height-normal);
color: var(--text-muted);
text-decoration: line-through;
font-variant-numeric: tabular-nums;
unicode-bidi: isolate; /* same reason as .price__current — isolate, never ltr */
}
/* NOT .badge--danger. Red in this system means error or destructive action; a
discount is neither, and reusing the danger pill trains customers to read the
colour that also means "payment failed" as good news. This is its own solid
treatment because the cream gold pill was illegible over arbitrary product
photography. */
.price__discount-badge {
display: inline-flex;
align-items: center;
block-size: 1.5rem;
padding-inline: var(--space-2);
border-radius: var(--radius-full);
background: var(--badge-sale-bg);
color: var(--badge-sale-fg);
font-size: var(--font-size-caption);
font-weight: var(--font-weight-bold);
line-height: 1;
white-space: nowrap;
font-variant-numeric: tabular-nums;
/* "-27%" is a BARE NUMERAL RUN, not money: no currency symbol, so there is no
symbol/number order to preserve, and a leading minus in an RTL run migrates
to the wrong end of the digits. Numerals, SKUs, phones and order ids get the
LTR island; prices never do. */
direction: ltr;
unicode-bidi: isolate;
}
/* PDP ONLY. Cards must NOT use this: the card price slot has room for exactly
one supporting line, and that line is legally required to be the VAT label. */
.price__save {
flex-basis: 100%; /* always starts its own line inside the same flex container */
font-size: var(--font-size-caption);
font-weight: var(--font-weight-medium);
color: var(--text-success);
}
.price__vat-note {
flex-basis: 100%;
font-size: var(--font-size-micro);
font-weight: var(--font-weight-regular);
line-height: var(--line-height-normal);
color: var(--text-muted);
}
/* PDP buy box. The reserve is recomputed at the larger step for the same reason. */
.price--lg {
min-block-size: calc(
var(--font-size-h2) * var(--line-height-tight) + var(--font-size-body-sm) *
var(--line-height-normal) + var(--space-1)
);
}
.price--lg .price__current {
font-size: var(--font-size-h2);
line-height: var(--line-height-tight);
}
.price--lg .price__compare {
font-size: var(--font-size-body-sm);
}
/* Compat + repair for the Phase-1 money classes still present in the storefront
markup, where every price is wrapped in . An author rule beats
the UA's [dir] rule regardless of specificity, so this restores the correct
Arabic rendering immediately — but the markup must still drop the attribute,
because `dir="ltr"` also lies to assistive tech about the run's language. */
.product-card__price,
.product-card__price--list,
.variant-row__price,
.variant-row__list-price {
direction: inherit;
unicode-bidi: isolate;
}
.product-card__price {
font-size: var(--font-size-body-lg);
font-weight: var(--font-weight-bold);
color: var(--text-primary);
}
.product-card__price--list {
font-size: var(--font-size-caption);
color: var(--text-muted);
text-decoration: line-through;
}
/* --------------------------------------------------------------------------
3. Sale badge — a modifier on the existing .badge
-------------------------------------------------------------------------- */
.badge--sale {
background: var(--badge-sale-bg);
color: var(--badge-sale-fg);
font-weight: var(--font-weight-bold);
}
@media (forced-colors: active) {
/* Backgrounds collapse to the system palette, so a solid pill loses its shape
against the card. The border is what keeps it readable as a badge. */
.badge--sale,
.price__discount-badge {
border: 1px solid CanvasText;
}
}
/* --------------------------------------------------------------------------
4. Rating stars
-------------------------------------------------------------------------- */
.rating {
display: inline-flex;
align-items: center;
gap: var(--space-1);
}
/* Plain logical flex, no explicit direction: a rating is a METER, and a meter
fills in reading direction. Under RTL the row therefore fills from the
inline-start (right) edge for free. An LTR-pinned star row inside an Arabic
page reads as an empty rating with a stray filled star at the far end. */
.rating__stars {
display: inline-flex;
align-items: center;
gap: var(--space-0-5);
flex-shrink: 0;
font-size: var(--font-size-body); /* the 1em box the star glyphs size against */
}
.rating__star {
position: relative;
display: inline-block;
inline-size: 1em;
block-size: 1em;
flex-shrink: 0;
}
.rating__star-glyph {
display: block;
inline-size: 100%;
block-size: 100%;
stroke-width: 2;
stroke-linejoin: round;
}
/* The on/off distinction is FILL, not hue: a solid star vs an outlined star.
Two shades of gold read as one continuous smear in greyscale, at 14px on a
phone, and identically in forced-colors — the shape difference survives all
three. */
.rating__star--on .rating__star-glyph {
fill: var(--rating-star-on);
stroke: none;
}
.rating__star--off .rating__star-glyph,
.rating__star--half .rating__star-glyph {
fill: none;
stroke: var(--rating-star-off);
}
/* Half star: an outline glyph with a solid copy clipped to the inline-start 50%.
The clip is logical, so a 4.5 rating fills the right half of the third star in
Arabic and the left half in English, both times "half filled from the start". */
.rating__star-fill {
position: absolute;
inset-block: 0;
inset-inline-start: 0;
inline-size: 50%;
overflow: hidden;
}
.rating__star-fill .rating__star-glyph {
position: absolute;
inset-block-start: 0;
inset-inline-start: 0;
/* Full size and pinned: the parent's overflow does the CLIPPING. Sizing the
glyph to 100% of the half-width container would squash the star instead. */
inline-size: 1em;
/* …and §1's `img, svg { max-width: 100% }` reset is exactly that squash, applied
from the other direction: it clamps this copy to its 50%-wide clipping parent,
so `inline-size: 1em` above never wins and EVERY half star renders as a
miniature star inside a full-size outline. Measured 7px inside a 14px glyph
before this line. Two screens hit it independently and patched it page-locally. */
max-inline-size: none;
block-size: 1em;
fill: var(--rating-star-on);
stroke: none;
}
/* A bare "4.5" or "128" IS an LTR island — unlike money it carries no currency
symbol whose order matters, and some engines reorder a lone decimal run
against adjacent Arabic parentheses. dir="ltr" is correct here. */
.rating__value,
.rating__count {
direction: ltr;
unicode-bidi: isolate;
font-variant-numeric: tabular-nums;
}
.rating__value {
font-weight: var(--font-weight-semibold);
color: var(--text-primary);
}
.rating__count {
font-size: var(--font-size-caption);
color: var(--text-muted);
}
/* When the rating links to the reviews section (PDP). Visual size stays at the
type's height so the buy box keeps its rhythm; the HIT area is expanded to the
44px floor with an overlay instead of by growing the box. */
.rating__link {
position: relative;
display: inline-flex;
align-items: center;
gap: var(--space-1);
color: inherit;
text-decoration: underline;
text-underline-offset: 3px;
}
.rating__link::after {
content: '';
position: absolute;
inset-inline: 0;
inset-block-start: 50%;
block-size: var(--tap-target-min);
min-inline-size: var(--tap-target-min);
transform: translateY(-50%);
}
.rating--sm .rating__stars {
font-size: var(--font-size-body-sm);
} /* 14px, card */
.rating--sm .rating__count {
font-size: var(--font-size-micro);
}
.rating--lg .rating__stars {
font-size: var(--font-size-h4);
} /* 20px, PDP */
.rating--lg .rating__value {
font-size: var(--font-size-body-lg);
}
@media (forced-colors: active) {
.rating__star--on .rating__star-glyph,
.rating__star-fill .rating__star-glyph {
fill: CanvasText;
stroke: CanvasText;
}
.rating__star--off .rating__star-glyph,
.rating__star--half .rating__star-glyph {
fill: none;
stroke: CanvasText;
}
}
/* --------------------------------------------------------------------------
5. Rating histogram
-------------------------------------------------------------------------- */
.rating-histogram {
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.rating-histogram__row {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: var(--space-2);
inline-size: 100%;
text-align: start;
}
/* The five bars must START on a common line or the histogram reads as noise
rather than a distribution. Each row is its own grid, so the shared alignment
comes from a floor on the label and count columns, not from subgrid. */
.rating-histogram__label {
min-inline-size: 3.5rem;
font-size: var(--font-size-caption);
color: var(--text-secondary);
white-space: nowrap;
}
.rating-histogram__count {
min-inline-size: 2.75rem;
text-align: end;
font-size: var(--font-size-caption);
color: var(--text-muted);
direction: ltr; /* bare count — an LTR island, same rule as .rating__count */
unicode-bidi: isolate;
font-variant-numeric: tabular-nums;
}
.rating-histogram__bar {
position: relative;
block-size: var(--space-2);
border-radius: var(--radius-full);
background: var(--bg-surface-sunken);
overflow: hidden;
}
/* Grows from the INLINE-START edge. A bar anchored left inside an RTL page is
read as a different value — the eye starts at the right, sees empty track, and
scores the row as low. `inline-size` is set inline by the markup (as
.progress__bar already does with width). */
.rating-histogram__fill {
position: absolute;
inset-block: 0;
inset-inline-start: 0;
inline-size: 0;
background: var(--rating-star-on);
border-radius: var(--radius-full);
}
@media (prefers-reduced-motion: no-preference) {
/* Animating inline-size rather than scaleX on purpose: transform-origin has no
logical keyword, so `transform-origin: left` would grow an RTL bar from the
wrong edge and there is no direction-agnostic way to express the other one. */
.rating-histogram__fill {
transition: inline-size var(--duration-slow) var(--ease-standard);
}
}
/* Rows double as review filters on the PDP; only then do they need the 44px
floor — applying it to a static histogram would make it 220px tall. */
.rating-histogram--interactive .rating-histogram__row {
min-block-size: var(--tap-target-min);
}
.rating-histogram--interactive .rating-histogram__row:hover .rating-histogram__bar {
background: var(--bg-brand-subtle);
}
.rating-histogram--interactive
.rating-histogram__row[aria-pressed='true']
.rating-histogram__label {
font-weight: var(--font-weight-semibold);
color: var(--text-primary);
}
@media (forced-colors: active) {
/* Both backgrounds collapse to Canvas, which would erase the bar entirely. */
.rating-histogram__bar {
border: 1px solid CanvasText;
}
.rating-histogram__fill {
background: Highlight;
}
}
/* --------------------------------------------------------------------------
6. Stock pill
The LABEL is the signal ("متوفر" / "غير متوفر"); the dot and the tint are
redundant reinforcement, which is what keeps this out of 1.4.1 colour-alone.
-------------------------------------------------------------------------- */
.stock-pill,
.product-card__stock {
display: inline-flex;
align-items: center;
gap: var(--space-1);
block-size: 1.5rem;
padding-inline: var(--space-2);
border-radius: var(--radius-full);
font-size: var(--font-size-caption);
font-weight: var(--font-weight-medium);
line-height: 1;
white-space: nowrap;
}
.stock-pill__dot {
inline-size: 0.4rem;
block-size: 0.4rem;
border-radius: 50%;
background: currentColor;
flex-shrink: 0;
}
.stock-pill--in,
.product-card__stock--in {
background: var(--bg-success-subtle);
color: var(--text-success);
}
.stock-pill--low {
background: var(--bg-warning-subtle);
color: var(--text-warning);
}
.stock-pill--out,
.product-card__stock--out {
background: var(--bg-surface-sunken);
color: var(--text-muted);
}
@media (forced-colors: active) {
.stock-pill,
.product-card__stock {
border: 1px solid CanvasText;
}
/* All three dots force to CanvasText, so hollow the non-available ones — the
same fill-not-hue trick the stars use. */
.stock-pill--low .stock-pill__dot,
.stock-pill--out .stock-pill__dot,
.product-card__stock--out .stock-pill__dot {
background: Canvas;
border: 1px solid CanvasText;
}
}
/* --------------------------------------------------------------------------
7. Product grid
EXPLICIT TRACKS, never auto-fill. `repeat(auto-fill, minmax(13rem, 1fr))`
produced a different column count at every viewport width, so a 24-result page
routinely ended in a half-empty row of one or two orphan cards, and the card
width drifted continuously instead of landing on a designed size.
Breakpoints are card-width-driven (640/1024/1440), not the layout breakpoint
tokens — a card stops being legible below ~150px, which is what sets 640.
-------------------------------------------------------------------------- */
.product-grid {
display: grid;
/* THE 2-UP MOBILE GRID IS THE SINGLE BIGGEST MOBILE FIX in this phase. One card
per row meant a customer saw one and a half products per screen and had to
scroll six times to compare three; every competing Saudi marketplace is 2-up.
minmax(0,1fr) rather than 1fr so a long unbroken SKU cannot widen a track. */
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--grid-gap-card);
}
@media (min-width: 640px) {
.product-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
--grid-gap-card: var(--space-4);
}
}
@media (min-width: 1024px) {
.product-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
--grid-gap-card: var(--space-5);
}
}
@media (min-width: 1440px) {
.product-grid {
grid-template-columns: repeat(5, minmax(0, 1fr));
--grid-gap-card: var(--space-6);
}
}
/* Placed AFTER the base breakpoints so it wins at every width from 1024 up: with
a 17rem facet rail eating the inline space, a fifth column at 1440 leaves each
card under 190px and the two-line title clamps mid-word. */
@media (min-width: 1024px) {
.product-grid--with-rail {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
/* --------------------------------------------------------------------------
8. Skeleton card
DIMENSIONALLY IDENTICAL to .product-card — same 1:1 media, same body padding
and gap, a 2lh name block, the reserved rating row and the real price reserve.
The old placeholder was a fixed 8rem block inside a .card while the result was
a 1:1 .product-card, so the entire results grid jumped on every single load.
Any change to §1's geometry must be mirrored here.
-------------------------------------------------------------------------- */
.skeleton-card {
display: flex;
flex-direction: column;
background: var(--bg-surface);
border: 1px solid var(--border-default);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-e1);
overflow: hidden;
}
.skeleton-card__media {
aspect-ratio: 1 / 1;
border-start-start-radius: var(--radius-media);
border-start-end-radius: var(--radius-media);
}
.skeleton-card__body {
display: flex;
flex-direction: column;
gap: var(--space-1);
padding: var(--space-3);
flex: 1;
}
.skeleton-card__shop {
inline-size: 45%;
}
.skeleton-card__name {
display: flex;
flex-direction: column;
justify-content: center;
gap: var(--space-1);
font-size: var(--font-size-card-title);
line-height: var(--line-height-snug);
min-block-size: calc(2 * var(--line-height-snug) * 1em); /* `lh` fallback, see §1 */
min-block-size: 2lh;
}
.skeleton-card__name > .skeleton:last-child {
inline-size: 62%;
}
.skeleton-card__rating {
display: flex;
align-items: center;
min-block-size: 1.25rem;
}
.skeleton-card__rating > .skeleton {
inline-size: 6rem;
}
.skeleton-card__price {
display: flex;
flex-direction: column;
gap: var(--space-1);
margin-block-start: auto;
padding-block-start: var(--space-1);
min-block-size: calc(
var(--font-size-body-lg) * var(--line-height-snug) + var(--font-size-caption) *
var(--line-height-normal) + var(--space-1)
);
}
/* The price bar must be the real weight, not a hairline: a thin grey line where a
bold 18px price is about to appear is the most visible part of the jump. */
.skeleton-card__price > .skeleton:first-child {
inline-size: 55%;
block-size: calc(var(--font-size-body-lg) * var(--line-height-snug));
}
@media (prefers-reduced-motion: reduce) {
/* components.css runs `sz-skeleton` as an INFINITE shimmer with no motion guard
at all — on a slow connection that is a perpetual 1.4s sweep across a full
grid of cards, which is exactly the pattern vestibular guidance asks us to
stop. Freeze it flat; the placeholder still says "loading" through its shape. */
.skeleton {
animation: none;
background: var(--bg-surface-sunken);
}
}
@media (forced-colors: active) {
/* Gradients are dropped, leaving invisible placeholders. Outline them instead. */
.skeleton {
background: Canvas;
border: 1px solid GrayText;
}
}
/* --------------------------------------------------------------------------
9. Category tile
-------------------------------------------------------------------------- */
.category-tile {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-2);
aspect-ratio: 1 / 1;
min-block-size: var(--tap-target-min);
min-inline-size: var(--tap-target-min);
padding: var(--space-3);
border-radius: var(--radius-media);
background: var(--bg-brand-subtle);
color: var(--text-brand);
text-align: center;
}
.category-tile__glyph {
inline-size: 2rem;
block-size: 2rem;
flex-shrink: 0;
}
.category-tile__label {
font-size: var(--font-size-card-title);
font-weight: var(--font-weight-card-title);
line-height: var(--line-height-snug);
color: var(--text-primary);
/* Arabic category names are short but multi-word ("جمال وعناية"); let them wrap
to two lines inside the square rather than clip like the fixed-height .chip. */
overflow-wrap: anywhere;
}
.category-tile__count {
font-size: var(--font-size-micro);
color: var(--text-muted);
direction: ltr; /* bare count, LTR island */
unicode-bidi: isolate;
font-variant-numeric: tabular-nums;
}
/* Inside a themed shop region the tile picks up that shop's accent instead of
platform brand — the accent allow-list already covers tinted surfaces. */
.category-tile--accent {
background: var(--shop-accent-subtle);
color: var(--shop-accent);
}
@media (prefers-reduced-motion: no-preference) {
.category-tile {
transition: background-color var(--duration-fast) var(--ease-standard);
}
}
@media (hover: hover) {
.category-tile:hover {
background: var(--bg-brand-subtle-hover);
}
}
@media (forced-colors: active) {
.category-tile {
border: 1px solid CanvasText;
}
}
/* --------------------------------------------------------------------------
10. Shop card (Mall home + /sellers directory)
-------------------------------------------------------------------------- */
.shop-card {
position: relative;
isolation: isolate;
display: grid;
grid-template-columns: auto minmax(0, 1fr);
grid-template-areas:
'logo heading'
'logo city'
'tags tags'
'cta cta';
align-items: start;
column-gap: var(--space-3);
row-gap: var(--space-1);
padding: var(--space-4);
background: var(--bg-surface);
border: 1px solid var(--border-default);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-e1);
}
.shop-card__logo {
grid-area: logo;
align-self: center;
inline-size: 3rem;
block-size: 3rem;
border-radius: var(--radius-md);
object-fit: contain;
background: var(--bg-media);
}
/* Same reasoning as the product card's empty media: an accent monogram, never a
generic placeholder glyph repeated down a directory of forty shops. */
.shop-card__monogram {
grid-area: logo;
align-self: center;
display: grid;
place-items: center;
inline-size: 3rem;
block-size: 3rem;
border-radius: var(--radius-md);
background: var(--shop-accent-subtle);
color: var(--shop-accent);
font-size: var(--font-size-h4);
font-weight: var(--font-weight-bold);
line-height: 1;
unicode-bidi: isolate;
}
.shop-card__heading {
grid-area: heading;
display: flex;
align-items: center;
gap: var(--space-1);
min-inline-size: 0;
}
.shop-card__name {
font-size: var(--font-size-body);
font-weight: var(--font-weight-semibold);
/* Shop names are user-supplied and mix scripts freely ("Tomorrow Tech تقنية"). */
unicode-bidi: plaintext;
text-align: start;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Renders as .badge.badge--brand with a check icon. The icon and its
.visually-hidden "متجر موثّق" text are required — a colour-only tint next to a
shop name is unreadable as "verified" in greyscale or forced-colors. */
.shop-card__verified {
flex-shrink: 0;
}
.shop-card__city {
grid-area: city;
font-size: var(--font-size-caption);
color: var(--text-muted);
}
.shop-card__tags {
grid-area: tags;
display: flex;
gap: var(--space-1);
margin-block-start: var(--space-2);
min-inline-size: 0;
overflow: hidden;
}
/* Hard cap at three. The API returns every category a shop sells; a fourth tag
wraps the row and the directory's cards stop sharing a height, which is the
whole point of a directory grid. */
.shop-card__tags > :nth-child(n + 4) {
display: none;
}
.shop-card__cta {
grid-area: cta;
position: relative;
z-index: 1; /* above the stretched-link overlay */
margin-block-start: var(--space-3);
min-block-size: var(--tap-target-min);
min-inline-size: var(--tap-target-min);
}
@media (prefers-reduced-motion: no-preference) {
.shop-card {
transition: box-shadow var(--duration-fast) var(--ease-standard);
}
}
@media (hover: hover) {
.shop-card:hover {
box-shadow: var(--shadow-e3);
}
}
/* --------------------------------------------------------------------------
19. Commerce: facets, sort, breadcrumb, sheets, empty states
-------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
1. Search shell + facet rail
-------------------------------------------------------------------------- */
/* Replaces the boxed 4-across .filter-form whose full-bleed submit button was the
heaviest element on the search page — a card of empty inputs sat above the
results and pushed the actual products below the fold, and nothing on screen
ever showed what was already filtered.
Arithmetic (storefront --container-max-width: 1280px): 1280 - 2×--space-8
padding = 1216, minus the 17rem rail, minus the --space-6 gap = 920px of grid,
which is exactly a 5-up product row at the --grid-gap-card step. */
.search-shell {
display: grid;
grid-template-columns: 17rem minmax(0, 1fr);
gap: var(--space-6);
align-items: start;
}
/* minmax(0,1fr) above and min-inline-size:0 here for the same reason the PDP
layout needs it: a grid child defaults to min-width:auto, so one wide card
name would blow the track out past the viewport instead of ellipsing. */
.search-shell > * {
min-inline-size: 0;
}
@media (max-width: 1023px) {
.search-shell {
grid-template-columns: minmax(0, 1fr);
gap: var(--space-4);
}
}
.facet-rail {
position: sticky;
inset-block-start: calc(var(--header-h) + var(--space-4));
/* dvh, never vh: on mobile Safari vh measures against the COLLAPSED toolbar,
so the rail would be taller than the visible viewport and its last facet
group unreachable. */
max-block-size: calc(100dvh - var(--header-h) - var(--space-8));
overflow-y: auto;
/* Without this, flicking past the end of the rail chains the scroll to the
document and throws the results grid off screen. */
overscroll-behavior: contain;
scrollbar-width: thin;
/* The inline padding is not decoration: focus-visible draws at
outline-offset 2px, and an outline on the first/last control would be
clipped by the scroll container's own edge without it. */
padding-inline: var(--space-1);
background: var(--bg-surface);
border: 1px solid var(--border-default);
border-radius: var(--radius-lg);
}
@media (max-width: 1023px) {
/* One column: a sticky rail here would pin filters over the results instead of
beside them. Screens that move filters into .bottom-sheet add
.facet-rail--sheet-only; the rail is NOT hidden by default, because on a
screen without the sheet that would delete the only copy of the filters. */
.facet-rail {
position: static;
max-block-size: none;
overflow: visible;
}
.facet-rail--sheet-only {
display: none;
}
}
.facet-rail__header {
display: flex;
align-items: center;
gap: var(--space-2);
min-block-size: var(--tap-target-min);
padding: var(--space-2) var(--space-3);
border-block-end: 1px solid var(--border-default);
}
.facet-rail__title {
font-size: var(--font-size-body-sm);
font-weight: var(--font-weight-semibold);
}
.facet-rail__clear {
margin-inline-start: auto;
min-block-size: var(--tap-target-min);
min-inline-size: var(--tap-target-min);
display: inline-flex;
align-items: center;
justify-content: center;
padding-inline: var(--space-2);
font-size: var(--font-size-caption);
color: var(--text-link);
text-decoration: underline;
text-underline-offset: 3px;
}
.facet-group {
border-block-end: 1px solid var(--border-default);
}
.facet-group:last-child {
border-block-end: 0;
}
.facet-group__summary {
display: flex;
align-items: center;
gap: var(--space-2);
min-block-size: var(--tap-target-min);
padding-inline: var(--space-3);
font-size: var(--font-size-body-sm);
font-weight: var(--font-weight-semibold);
color: var(--text-primary);
cursor: pointer;
/* Both spellings: list-style covers Firefox/Chromium, the -webkit marker
pseudo covers Safari, which still paints its own triangle otherwise —
and that triangle does NOT mirror in RTL. */
list-style: none;
}
.facet-group__summary::-webkit-details-marker {
display: none;
}
.facet-group__summary:hover {
background: var(--bg-surface-hover);
}
/* Uses the .icon--end mirroring convention (components.css §4) so the closed
chevron points inline-FORWARD in both locales. The open state composes the
rotation ON TOP of the RTL flip instead of replacing transform, which is what
silently unmirrors an icon: `transform: rotate(90deg)` alone would overwrite
`[dir="rtl"] .icon--end { transform: scaleX(-1) }`. */
.facet-group__chevron {
margin-inline-start: auto;
color: var(--text-muted);
}
.facet-group[open] .facet-group__chevron.icon--end {
transform: rotate(90deg);
}
[dir='rtl'] .facet-group[open] .facet-group__chevron.icon--end {
transform: scaleX(-1) rotate(90deg);
}
@media (prefers-reduced-motion: no-preference) {
.facet-group__chevron {
transition: transform var(--duration-fast) var(--ease-standard);
}
}
.facet-group__body {
display: flex;
flex-direction: column;
padding: var(--space-1) var(--space-2) var(--space-3);
}
/* A long facet list (brands, cities) is capped and revealed by this toggle
rather than making the rail scroll twice. */
.facet-group__more {
align-self: start;
min-block-size: var(--tap-target-min);
display: inline-flex;
align-items: center;
padding-inline: var(--space-2);
font-size: var(--font-size-caption);
color: var(--text-link);
}
/* Pair with .checkbox on the |