/* MicroSystem 26: Apple Store global bar, search panel and footer (owner 2026-10-27, option A). Loaded on every page
   after chrome-bm.css. Measured on apple.com: a 44 px translucent bar (48 px on phones) with small dark links, icon
   buttons, a search panel dropping from the bar, and a #F5F5F7 footer with small grey text. Text stays at 13 px or
   more and every control at 44 px (project rules, stricter than the reference's 12 px). */

:root { --ap-ink: #1D1D1F; --ap-soft: #6E6E73; --ap-line: #D2D2D7; --ap-blue-ink: #1D4ED8; --ap-bar: rgba(250, 250, 252, .86); }

/* Sticky bar: the template-part box is exactly as tall as the header, so it is taken out of the way. */
.wp-block-template-part:has(> .ms-ah) { display: contents; }
.ms-nh.ms-ah { position: sticky; top: 0; z-index: 60; height: 60px; border-bottom: 0; background: var(--ap-bar); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); font-family: var(--ms-font-ar); box-shadow: none; }
.ms-ah.is-scrolled { box-shadow: 0 1px 0 rgba(0, 0, 0, .08); }
:root { --ms-header-h: 60px; }
@media (min-width: 1024px) { .ms-nh.ms-ah { height: 64px; } :root { --ms-header-h: 64px; } }
.ms-ah__in { display: flex; align-items: center; gap: 8px; height: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 16px; }
@media (min-width: 1068px) { .ms-ah__in { padding-inline: 40px; } }
.ms-ah .ms-nh__logo { display: inline-flex; align-items: center; min-height: 44px; flex: none; }
/* Logo (owner 2026-10-27): big and clear, laptop symbol + MICROSYSTEM + the Arabic company name. */
.ms-ah .ms-nh__brand { display: block; height: 40px; width: auto; }
@media (max-width: 359px) { .ms-ah .ms-nh__brand { height: 36px; } }
@media (min-width: 1024px) { .ms-ah .ms-nh__brand { height: 44px; } }

/* Links: the reference's small dark text, spread across the bar. */
.ms-ah .ms-nh__nav { position: static; flex: 1; min-width: 0; border: 0; }
.ms-ah .ms-nh__links { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0; padding: 0; list-style: none; }
.ms-ah .ms-nh__megaitem { position: static; margin: 0; }
.ms-ah .ms-nh__megabtn, .ms-ah .ms-nh__link { display: inline-flex; align-items: center; height: 44px; padding: 0 9px; border: 0; border-radius: 0; background: none; color: rgba(0, 0, 0, .8); font: 600 15px/1 var(--ms-font-ar); white-space: nowrap; cursor: pointer; transition: color 200ms ease; }
.ms-ah .ms-nh__megabtn[aria-expanded="true"] { color: #000; background: none; }
@media (hover: hover) and (pointer: fine) { .ms-ah .ms-nh__megabtn:hover, .ms-ah .ms-nh__link:hover { color: #000; background: none; } }
.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: 2px solid #2563EB; outline-offset: -2px; border-radius: 6px; }

/* Icon buttons. */
.ms-ah .ms-nh__actions { display: flex; align-items: center; gap: 0; margin-inline-start: auto; flex: none; }
.ms-ah .ms-nh__icon, .ms-ah .ms-nh__cart { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; color: rgba(0, 0, 0, .8); }
.ms-ah .ms-nh__carttxt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ms-ah .ms-count { top: 2px; inset-inline-end: 0; min-width: 19px; height: 19px; padding: 0 4px; border: 2px solid var(--ap-bar); background: var(--ap-ink); color: #fff; font: 700 13px/15px var(--ms-font); }
@media (hover: hover) and (pointer: fine) { .ms-ah .ms-nh__icon:hover, .ms-ah .ms-nh__cart:hover { color: #000; background: none; } }

/* Phones and tablets: logo, then search, cart and menu (the links live in the menu and the bottom tabs). */
@media (max-width: 1023px) {
	.ms-ah .ms-nh__nav, .ms-ah .ms-ah__desk { display: none; }
	.ms-ah .ms-nh__actions > .ms-ah__search, .ms-ah .ms-nh__actions > .ms-nh__menu { display: inline-grid; }
	.ms-listing__bar { top: 60px; }
}
@media (min-width: 1024px) { .ms-ah .ms-nh__menu { display: none; } }

/* Mega menu: drops full width under the bar, the reference's flyout (white, soft shadow). */
.ms-ah .ms-nh-mega { top: 100%; border-top: 0; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .25); }

/* Search: a panel dropping from the top over a dimmed page (the reference's search). */
#ms-search-sheet { inset: 0 0 auto 0; max-height: 100vh; max-height: 100dvh; overflow: auto; padding: 0 0 28px; background: #FBFBFD; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .28); }
#ms-search-sheet .ms-sheet__head { min-height: 48px; max-width: 760px; width: 100%; margin-inline: auto; padding-inline: 16px; border: 0; }
#ms-search-sheet .ms-sheet__head h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
#ms-search-sheet .ms-sheet__head button { margin-inline-start: auto; display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; background: none; color: var(--ap-soft); cursor: pointer; }
#ms-search-sheet .ms-sheet__body { max-width: 760px; width: 100%; margin-inline: auto; padding: 4px 16px 0; overflow: visible; }
#ms-search-sheet .ms-search { display: flex; align-items: center; gap: 12px; height: 56px; padding: 0; border: 0; border-bottom: 1px solid var(--ap-line); border-radius: 0; background: none; }
#ms-search-sheet .ms-search__glyph { position: static; transform: none; color: var(--ap-soft); }
#ms-search-sheet .ms-search__glyph .ms-icon { width: 24px; height: 24px; }
#ms-search-sheet input.ms-search__input[type="search"] { flex: 1; min-height: 0; height: 100%; padding: 0; border: 0; background: none; font: 600 22px/1.2 var(--ms-font-ar); color: var(--ap-ink); }
#ms-search-sheet .ms-search__input:focus { outline: none; }
#ms-search-sheet .ms-search:focus-within { border-bottom-color: var(--ap-ink); }
#ms-search-sheet .ms-search__submit { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); padding: 0; }
.ms-ah-quick__h { margin: 26px 0 8px; color: var(--ap-soft); font: 400 13px/1.4 var(--ms-font-ar); }
.ms-ah-quick { margin: 0; padding: 0; list-style: none; }
.ms-ah-quick a { display: flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ap-ink); font: 600 15px/1.3 var(--ms-font-ar); text-decoration: none; }
.ms-ah-quick .ms-icon { color: var(--ap-soft); flex: none; }
@media (hover: hover) and (pointer: fine) { .ms-ah-quick a:hover { color: var(--ap-blue-ink); } }
@media (min-width: 768px) { #ms-search-sheet { padding-bottom: 44px; } #ms-search-sheet input.ms-search__input[type="search"] { font-size: 26px; } }

/* Footer: the reference's grey footer with small text; a contact line, link columns, the bottom line. */
.ms-nf.ms-bf { padding-block: 22px 26px; border-top: 0; background: #F5F5F7; color: var(--ap-soft); font-family: var(--ms-font-ar); }
.ms-bf .ms-nf__wrap { max-width: 1200px; padding-inline: 22px; }
@media (min-width: 1068px) { .ms-bf .ms-nf__wrap { padding-inline: 40px; } }
.ms-bf__top { gap: 8px 24px; padding-bottom: 16px; border-bottom: 1px solid var(--ap-line); }
.ms-bf__ask h2 { font: 600 15px/1.5 var(--ms-font-ar); color: var(--ap-ink); }
.ms-bf__ask p { margin: 2px 0 0; font: 400 13px/1.6 var(--ms-font-ar); color: var(--ap-soft); }
.ms-bf__btns { gap: 4px 20px; }
.ms-bf__btn, .ms-bf__btn--wa { min-height: 44px; padding: 0; border-radius: 0; box-shadow: none; background: none; color: var(--ap-blue-ink); font: 500 14px/1 var(--ms-font-ar); }
.ms-bf .ms-bf__btn--wa { color: var(--ap-blue-ink); }
.ms-bf__btn--wa .ms-icon { fill: none; stroke: currentColor; }
@media (hover: hover) and (pointer: fine) { .ms-bf__btn:hover, .ms-bf__btn--wa:hover { background: none; text-decoration: underline; text-underline-offset: 3px; } }
.ms-bf__cols { gap: 20px 24px; padding-block: 22px; border-top: 0; }
.ms-bf .ms-nf__h { margin: 0 0 8px; font: 600 13px/1.4 var(--ms-font-ar); color: var(--ap-ink); }
.ms-bf ul { gap: 0; }
.ms-bf ul a { min-height: 30px; color: #424245; font: 400 13px/1.5 var(--ms-font-ar); }
.ms-bf__brand p, .ms-bf__pay li { font-size: 13px; color: var(--ap-soft); }
.ms-bf__brand a { color: #424245; }
.ms-bf__logo { height: 44px; }
.ms-nh-drawer__brand { height: 38px; }
.ms-bf__pay li span { min-height: 26px; box-shadow: inset 0 0 0 1px var(--ap-line); color: #424245; }
.ms-bf__bottom { padding-top: 14px; border-top: 1px solid var(--ap-line); color: var(--ap-soft); font: 400 13px/1.6 var(--ms-font-ar); }
.ms-bf__bottom a { color: #424245; }
@media (hover: hover) and (pointer: fine) { .ms-bf ul a:hover, .ms-bf__bottom a:hover, .ms-bf__brand a:hover { color: var(--ap-ink); text-decoration: underline; } }
@media (max-width: 1023px) { .ms-bf ul a, .ms-bf__bottom a { min-height: 44px; } .ms-bf__brand a { display: inline-flex; align-items: center; min-height: 44px; } }
@media (max-width: 767px) { .ms-nf.ms-bf { padding-block: 18px 96px; } }