/* MicroSystem 26: header and footer on the owner's reference store (Back Market, owner instruction 2026-10-26).
   Proportions measured in Chrome on the reference: a 1120 px content column, a thin utility bar, a 72 px row with the
   logo, a soft pill search and text/icon actions, a 44 px category row; white footer with link columns. MicroSystem's
   own logo, blue accent, Arabic RTL and fonts. Loaded on every page after chrome-2026.css (it overrides that file). */

:root { --b-ink: #0A0F1C; --b-text: #23272F; --b-mute: #5D6371; --b-line: #E4E6EC; --b-soft: #EDEEF2; --b-page: #F7F8FB; --b-blue: #2563EB; --b-blue-ink: #1D4ED8; --b-r: 6px; --b-ease: cubic-bezier(.23, 1, .32, 1); }

.ms-bh .ms-nh__wrap, .ms-bu .ms-nh__wrap, .ms-bf .ms-nf__wrap { max-width: 1168px; padding-inline: 24px; }

/* ---------- Utility bar (desktop) ---------- */
.ms-bu { display: none; background: #fff; font-family: var(--ms-font-ar); }
.ms-bu a { text-decoration: none; }
.ms-bu__in { display: flex; justify-content: space-between; align-items: center; min-height: 34px; }
.ms-bu p { display: flex; align-items: center; gap: 20px; margin: 0; }
.ms-bu a, .ms-bu span { display: inline-flex; align-items: center; gap: 6px; color: var(--b-ink); font: 600 13px/1 var(--ms-font-ar); }
.ms-bu .ms-icon { width: 16px; height: 16px; }
.ms-bu bdi { font: 600 13px/1 var(--ms-font); }
.ms-bu__store span { color: var(--b-mute); }
@media (min-width: 1024px) { .ms-bu { display: block; } }
@media (hover: hover) and (pointer: fine) { .ms-bu a:hover { text-decoration: underline; text-underline-offset: 3px; } }

/* ---------- Main header ---------- */
.ms-bh { border-bottom: 1px solid var(--b-line); }
.ms-bh.is-scrolled { box-shadow: 0 8px 20px -16px rgba(10, 15, 28, .35); }
.ms-bh .ms-nh__main { grid-template-columns: auto minmax(0, 1fr) auto; gap: 24px; min-height: 72px; }
.ms-bh .ms-nh__brand { height: 30px; }
.ms-bh .ms-nh__search { justify-self: stretch; max-width: none; }
.ms-bh .ms-search { height: 44px; padding-inline: 16px 4px; border-radius: 999px; background: var(--b-soft); }
.ms-bh .ms-search:focus-within { border-color: var(--b-ink); box-shadow: none; background: #fff; }
.ms-bh .ms-search input.ms-search__input[type="search"] { font: 500 15px/1 var(--ms-font-ar); }
.ms-bh .ms-search__submit { width: 36px; height: 36px; padding: 0; justify-content: center; border-radius: 50%; background: var(--b-ink); color: #fff; }
.ms-bh .ms-search__submit .ms-icon { width: 18px; height: 18px; color: #fff; }
.ms-bh .ms-search__submit-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ms-bh .ms-nh__actions { gap: 2px; }
.ms-bh__txt { display: inline-flex; align-items: center; height: 40px; padding: 0 12px; border-radius: var(--b-r); color: var(--b-ink); font: 700 15px/1 var(--ms-font-ar); white-space: nowrap; transition: background-color 160ms var(--b-ease); }
.ms-bh .ms-nh__icon { width: 40px; height: 40px; }
.ms-bh .ms-nh__cart { width: 40px; height: 40px; margin: 0; padding: 0; justify-content: center; border-radius: 50%; background: transparent; color: var(--b-ink); }
.ms-bh .ms-nh__carttxt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ms-bh .ms-nh__cart .ms-count { background: var(--b-blue); color: #fff; border-color: #fff; }
@media (hover: hover) and (pointer: fine) {
	.ms-bh__txt:hover, .ms-bh .ms-nh__icon:hover, .ms-bh .ms-nh__cart:hover { background: var(--b-soft); }
	.ms-bh .ms-search__submit:hover { background: var(--b-blue); }
}

/* Category row */
.ms-bh .ms-nh__nav { border-top: 0; }
.ms-bh .ms-nh__navrow { min-height: 46px; gap: 12px; }
.ms-bh .ms-nh__links { gap: 0; }
.ms-bh .ms-nh__megaitem { margin-inline-end: 4px; }
.ms-bh .ms-nh__megabtn { height: 38px; padding: 0 12px 0 10px; gap: 8px; background: transparent; color: var(--b-blue); font: 700 15px/1 var(--ms-font-ar); }
.ms-bh .ms-nh__megabtn[aria-expanded="true"] { background: #EEF3FF; color: var(--b-blue-ink); }
.ms-bh .ms-nh__grid i:nth-child(4) { background: currentColor; opacity: .45; }
.ms-bh .ms-nh__link { height: 38px; padding: 0 12px; color: var(--b-ink); font: 500 15px/1 var(--ms-font-ar); }
.ms-bh__svc { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.ms-bh__svc a { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 10px; border-radius: var(--b-r); color: var(--b-ink); font: 500 15px/1 var(--ms-font-ar); white-space: nowrap; text-decoration: none; transition: background-color 160ms var(--b-ease); }
.ms-bh__svc .ms-icon { width: 18px; height: 18px; }
@media (hover: hover) and (pointer: fine) { .ms-bh .ms-nh__link:hover, .ms-bh__svc a:hover { background: var(--b-soft); color: var(--b-ink); } .ms-bh .ms-nh__megabtn:hover { background: #EEF3FF; } }
@media (max-width: 1279px) { .ms-bh__svc li:not(:first-child) { display: none; } .ms-bh__txt + .ms-bh__txt { display: none; } }

/* Phones and tablets: logo, account, cart and menu; the pill search under them. */
@media (max-width: 1023px) {
	.ms-bh .ms-nh__main { grid-template-columns: auto minmax(0, 1fr); min-height: 60px; gap: 8px; }
	.ms-bh .ms-nh__brand { height: 26px; }
	.ms-bh__txt { display: none; }
	.ms-bh .ms-nh__cart { width: 44px; height: 44px; }
	.ms-bh .ms-nh__menu { width: 44px; height: 44px; }
	.ms-bh .ms-nh__msearch { padding-bottom: 10px; }
	.ms-bh .ms-nh__msearch .ms-search { height: 44px; padding-inline: 16px 4px; border: 1px solid transparent; border-radius: 999px; background: var(--b-soft); }
	.ms-bh .ms-nh__msearch .ms-search__submit { width: 36px; height: 36px; padding: 0; justify-content: center; border-radius: 50%; background: var(--b-ink); }
	.ms-bh .ms-nh__msearch .ms-search__submit-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

/* ---------- Footer: white, link columns ---------- */
.ms-bf { padding-block: 40px 28px; background: #fff; color: var(--b-text); border-top: 1px solid var(--b-line); }
.ms-bf a { color: var(--b-ink); }
.ms-bf__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 32px; padding-bottom: 32px; }
.ms-bf__ask h2 { margin: 0; font: 700 22px/1.45 var(--ms-font-ar); color: var(--b-ink); }
.ms-bf__ask p { margin: 4px 0 0; font: 400 15px/1.7 var(--ms-font-ar); color: var(--b-mute); }
.ms-bf__btns { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.ms-bf__btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: var(--b-r); box-shadow: inset 0 0 0 1px var(--b-ink); color: var(--b-ink); font: 700 15px/1 var(--ms-font-ar); text-decoration: none; transition: background-color 160ms var(--b-ease), color 160ms var(--b-ease); }
.ms-bf__btn bdi { font-family: var(--ms-font); }
.ms-bf__btn--wa { background: var(--b-ink); color: #fff; box-shadow: none; }
.ms-bf .ms-bf__btn--wa { color: #fff; }
.ms-bf__btn--wa .ms-icon { fill: currentColor; stroke: none; }
.ms-bf__cols { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); gap: 32px; padding-block: 32px; border-top: 1px solid var(--b-line); }
.ms-bf__logo { display: block; height: 28px; width: auto; }
.ms-bf__brand p { margin: 12px 0 0; font: 400 14px/1.8 var(--ms-font-ar); color: var(--b-mute); }
.ms-bf__brand a { color: var(--b-mute); }
.ms-bf .ms-nf__h { margin: 0 0 12px; font: 700 17px/1.4 var(--ms-font-ar); color: var(--b-ink); }
.ms-bf ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ms-bf ul a { display: inline-flex; align-items: center; min-height: 32px; color: var(--b-text); font: 400 14px/1.5 var(--ms-font-ar); text-decoration: none; }
.ms-bf__pay li { font: 400 14px/1.6 var(--ms-font-ar); color: var(--b-text); }
.ms-bf__pay li:last-child { display: flex; flex-wrap: wrap; gap: 6px; }
.ms-bf__pay li span { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--b-line); font: 600 13px/1 var(--ms-font-ar); }
.ms-bf__pay li span[lang="en"] { font-family: var(--ms-font); }
.ms-bf__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin: 0; padding-top: 20px; border-top: 1px solid var(--b-line); color: var(--b-ink); font: 500 14px/1.6 var(--ms-font-ar); }
.ms-bf__legal { display: flex; gap: 20px; }
.ms-bf__bottom a { color: var(--b-ink); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .ms-bf ul a:hover, .ms-bf__bottom a:hover, .ms-bf__brand a:hover { color: var(--b-ink); text-decoration: underline; text-underline-offset: 3px; } .ms-bf__btn:hover { background: var(--b-soft); } .ms-bf__btn--wa:hover { background: #24304A; } }
@media (max-width: 1023px) { .ms-bf__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ms-bf__brand { grid-column: 1 / -1; } }
@media (max-width: 767px) { .ms-bf { padding-block: 32px 96px; } .ms-bf__cols { gap: 24px 16px; } .ms-bf__ask h2 { font-size: 20px; } }
@media (max-width: 1023px) { .ms-bh .ms-nh__msearch .ms-search__submit { display: none; } .ms-bh .ms-nh__msearch .ms-search { padding-inline: 16px; } }
/* The reference has no visible search button: Enter searches; the magnifier sits inside the pill. */
.ms-bh .ms-search__submit { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); padding: 0; }
.ms-bh .ms-search { padding-inline: 16px; }
/* Keyboard users reach the hidden search button: it shows as the dark round button while focused. */
.ms-bh .ms-search__submit:focus-visible { position: static; width: 36px; height: 36px; clip: auto; overflow: visible; flex: none; margin-inline-start: 6px; outline: 2px solid var(--b-blue); outline-offset: 2px; }
.ms-bh .ms-search__submit:focus-visible .ms-icon { display: block; }

/* ---------- Phones and tablets: smooth touch use (owner, 2026-10-27) ---------- */
@media (max-width: 1023px) {
	/* The template-part wrapper is exactly as tall as the header, so "sticky" never engaged. Without the wrapper box the
	   logo row scrolls away and the search pill stays pinned (menu and cart are in the bottom tab bar). Cart, checkout
	   and My account keep a header that scrolls away, so forms get the whole screen. */
	.wp-block-template-part:has(> .ms-bh) { display: contents; }
	.ms-bh { top: -60px; }
	.woocommerce-cart .ms-bh, .woocommerce-checkout .ms-bh, .woocommerce-account .ms-bh { position: relative; top: 0; }
	:root { --ms-header-h: 55px; }
	.ms-listing__bar { top: 55px; }
	/* iOS zooms the page into any field under 16 px; header search and every form field stay at 16 px. */
	.ms-bh .ms-search input.ms-search__input[type="search"] { font-size: 16px; }
	input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]), select, textarea { font-size: 16px !important; }
	/* Touch targets: 44 px rows for the logo and the footer links. */
	.ms-bh .ms-nh__logo, .ms-bf .ms-nf__logo { display: inline-flex; align-items: center; min-height: 44px; }
	.ms-bf ul { gap: 0; }
	.ms-bf ul a { min-height: 44px; }
	.ms-bf__bottom a { display: inline-flex; align-items: center; min-height: 44px; }
	.ms-bf__bottom { padding-top: 12px; }
}
.ms-bf__brand p { text-wrap: pretty; }
/* Speed: the footer is laid out only when it nears the screen (the late Arabic font swap no longer re-lays it out). */
.ms-bf { content-visibility: auto; contain-intrinsic-size: auto 900px; }