/* MicroSystem 26: site bar and footer in the Concept 07 voice (owner 2026-11-09): warm off-white paper, near-black
   ink, one deep blue for actions and marks. Loads after chrome-apple.css on every page and only recolours/re-spaces
   the same markup (no class or id renamed). Token names are kept from the first draft (wine = the action colour). */
:root {
	--ed-paper: #F4F1EA;
	--ed-paper-2: #ECE8E0;
	--ed-paper-3: #E3DED5;
	--ed-ink: #15161A;
	--ed-text: #2A2B30;
	--ed-muted: #5E5F66;
	--ed-wine: #1530B8;
	--ed-wine-2: #0E2495;
	--ed-clay: #1530B8;
	--ed-line: #E0DBD2;
	--ed-bar: #F4F1EA;
	--ed-serif: Georgia, "Times New Roman", "Noto Serif", serif;
}

/* ---- bar ---- */
.ms-nh.ms-ah { background: var(--ed-bar); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 1px 0 var(--ed-line); }
.ms-ah.is-scrolled { box-shadow: 0 1px 0 var(--ed-line), 0 10px 24px -20px rgba(21, 22, 26, .25); }
.ms-ah .ms-nh__megabtn, .ms-ah .ms-nh__link { color: var(--ed-ink); font-weight: 600; }
.ms-ah .ms-nh__megabtn[aria-expanded="true"], .ms-ah .ms-nh__link[aria-current="page"] { color: var(--ed-wine); box-shadow: inset 0 -2px 0 var(--ed-clay); }
@media (hover: hover) { .ms-ah .ms-nh__megabtn:hover, .ms-ah .ms-nh__link:hover { color: var(--ed-wine); } }
.ms-ah .ms-nh__icon, .ms-ah .ms-nh__cart { color: var(--ed-ink); }
.ms-ah .ms-count { border-color: var(--ed-bar); background: var(--ed-wine); color: #fff; }
.ms-ah .ms-nh__megabtn:focus-visible, .ms-ah .ms-nh__link:focus-visible, .ms-ah .ms-nh__icon:focus-visible, .ms-ah .ms-nh__cart:focus-visible, .ms-ah .ms-nh__logo:focus-visible { outline-color: var(--ed-wine); }
@media (min-width: 1024px) { .ms-ah .ms-nh__links { gap: 22px; } }
/* store panel, drawer and search panel on the same paper */
.ms-ah .ms-nh-mega, .ms-nh-drawer, #ms-search-sheet { background: #FAF8F4; color: var(--ed-text); }
.ms-nh-mega__h, .ms-nh-drawer__h, .ms-ah-quick__h { color: var(--ed-muted); }
.ms-nh-mega a, .ms-nh-drawer a, .ms-ah-quick a { color: var(--ed-ink); }
.ms-nh-mega__fprice { color: var(--ed-wine); }
.ms-nh-mega__chips a { box-shadow: inset 0 0 0 1px var(--ed-line); background: transparent; }
@media (hover: hover) { .ms-nh-mega__chips a:hover { background: var(--ed-paper-2); } }

/* ---- footer ---- */
.ms-nf.ms-bf { background: var(--ed-paper-2); color: var(--ed-muted); }
.ms-bf__top, .ms-bf__bottom { border-color: var(--ed-line); }
.ms-bf__ask h2, .ms-bf .ms-nf__h { color: var(--ed-ink); }
.ms-bf__ask p, .ms-bf__brand p, .ms-bf__pay li, .ms-bf__bottom { color: var(--ed-muted); }
.ms-bf ul a, .ms-bf__brand a, .ms-bf__bottom a, .ms-bf__pay li span { color: var(--ed-text); }
.ms-bf__btn, .ms-bf .ms-bf__btn--wa { color: var(--ed-wine); font-weight: 600; }
.ms-bf__pay li span { box-shadow: inset 0 0 0 1px var(--ed-line); }
@media (hover: hover) { .ms-bf ul a:hover, .ms-bf__bottom a:hover { color: var(--ed-wine); } }

/* ---- phones: the five-tab bar ---- */
.ms-mbar--tabs.ms-nt { background: var(--ed-bar); box-shadow: 0 -1px 0 var(--ed-line); }
.ms-mbar--tabs.ms-nt a, .ms-mbar--tabs.ms-nt button { color: var(--ed-muted); }
.ms-mbar--tabs.ms-nt [aria-current="page"] { color: var(--ed-wine); }
.ms-mbar--tabs.ms-nt .ms-count { border-color: var(--ed-bar); background: var(--ed-wine); color: #fff; }
.ms-mbar--tabs.ms-nt .ms-mbar__wa { color: #0E6B38; }
.ms-mbar--tabs.ms-nt a[aria-current="page"]::before { background: var(--ed-clay); }
.ms-mbar--tabs.ms-nt a:focus-visible, .ms-mbar--tabs.ms-nt button:focus-visible { outline-color: var(--ed-wine); }

/* ---- the «MICRO SYSTEM EG» wordmark (owner 2026-11-09) ---- */
.ms-ah .ms-nh__brand { height: 30px; width: auto; }
.ms-bf__logo { height: 28px; width: auto; }
.ms-nh-drawer__brand { height: 24px; width: auto; }
@media (max-width: 1023px) { .ms-ah .ms-nh__brand { height: 24px; } }
@media (max-width: 440px) { .ms-ah .ms-nh__brand { height: 20px; } }
@media (max-width: 370px) { .ms-ah .ms-nh__brand { height: 16px; } .ms-ah .ms-nh__logo { min-width: 0; flex: 0 1 auto; } }

/* ---- narrow product cards (2026-11-09 phone review) ----
   Phones show the card with the photo beside the details. When the card itself is narrow (swipe row on the product
   page, Finder results, 320 px phones) that squeezed the specs, cut model numbers and hid the «متاح» badge under
   «قارن». A narrow card now puts the photo on top, the same layout as the rails. */
.ms-grid > li, .ms-finder__card { container-type: inline-size; }
@container (max-width: 330px) {
	.ms-card { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
	.ms-card__media { aspect-ratio: 4 / 3; min-height: 0; }
}
@media (max-width: 767px) {
	.ms-pdp__related .ms-card { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
	.ms-pdp__related .ms-card__media { aspect-ratio: 4 / 3; min-height: 0; }
}

/* ---- small tags (2026-11-09 phone review): the old monospace tag style spaced letters apart, which breaks Arabic
   joining («1. الأنسب», «حالة ممتازة»). Tags use the theme's Arabic face with normal spacing. */
.ms-tag { font-family: var(--ms-font-ar); letter-spacing: 0; text-transform: none; }
/* Very narrow cards (3 columns beside a side panel at 1024 px): «عرض التفاصيل» gets its own full row, the WhatsApp and
   call buttons share the row under it, so the label is never cut. */
@container (max-width: 240px) {
	.ms-card__actions { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.ms-card__actions .ms-card__cta { grid-column: 1 / -1; }
	.ms-card__actions .ms-card__icon { width: 100%; }
}