/* MicroSystem 26: homepage on Concept 07 (owner 2026-11-09: «اخر ورقه … اللي فيها الرخام»). Tokens in
   chrome-editorial.css. Measured on the reference (1280 wide): a centred title (62 px), one line (26 px) and a blue
   pill (228 × 44) over three laptops on stone that fill the width; «اختيارات تستاهل» with a short blue mark, a white
   list of three series (thumbnail, name, round arrow) beside a Dell close-up (radius 16). Sizes scale with the width
   (vw) so the words never reach the laptops; phones stack the words above the picture. No new fonts. */
.ms-ed { --ed-pad: clamp(16px, 3.3vw, 50px); background: var(--ed-paper); color: var(--ed-text); font-family: var(--ms-font-ar); }
.ms-ed a { color: inherit; text-decoration: none; }
.ms-ed :focus-visible { outline: 2px solid var(--ed-wine); outline-offset: 3px; }
.ms-ed-arrow { flex: none; transition: transform 220ms cubic-bezier(.22, 1, .36, 1); }

/* ---- first screen: words over the laptops on stone ---- */
.ms-ed-hero { position: relative; background: var(--ed-paper); overflow: hidden; }
.ms-ed-hero__pic { margin: 0 auto; max-width: 1600px; }
.ms-ed-hero__pic img { display: block; width: 100%; height: auto; aspect-ratio: 1280 / 533; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 3%, #000 97%, transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 3%, #000 97%, transparent 100%); }
.ms-ed-hero__txt { position: absolute; inset: 0 0 auto; z-index: 1; display: flex; flex-direction: column; align-items: center; padding-top: clamp(14px, 1.5vw, 26px); text-align: center; }
.ms-ed-h1 { margin: 0; color: var(--ed-ink); font: 800 clamp(34px, 4.85vw, 80px)/1.18 var(--ms-font-ar); letter-spacing: 0; text-wrap: balance; }
.ms-ed-kicker { margin: clamp(2px, .4vw, 8px) 0 0; color: var(--ed-text); font: 400 clamp(17px, 2.03vw, 33px)/1.4 var(--ms-font-ar); }
.ms-ed-cta { margin: clamp(10px, 1.4vw, 24px) 0 0; }
.ms-ed-btn { display: inline-flex; align-items: center; justify-content: center; gap: clamp(14px, 1.8vw, 28px); min-width: clamp(190px, 17.8vw, 290px); min-height: clamp(44px, 3.45vw, 56px); padding: 0 26px; border-radius: 999px; background: var(--ed-wine); color: #fff !important; font: 700 clamp(15px, 1.3vw, 20px)/1 var(--ms-font-ar); box-shadow: 0 10px 24px -14px rgba(21, 48, 184, .7); transition: background-color 200ms ease; }
.ms-ed-btn .ms-ed-arrow { width: 1.2em; height: 1.2em; }
.ms-ed-btn--light { min-width: 0; gap: 12px; background: #fff; color: var(--ed-ink) !important; box-shadow: none; }
.ms-ed-search { display: none; }

/* ---- section heads ---- */
.ms-ed-sec { max-width: 1600px; margin-inline: auto; padding: 0 var(--ed-pad); }
.ms-ed-h2 { margin: 0; color: var(--ed-ink); font: 800 clamp(28px, 3vw, 48px)/1.3 var(--ms-font-ar); }
.ms-ed-h2--mark { padding-bottom: 14px; margin-bottom: 22px; background: linear-gradient(var(--ed-wine), var(--ed-wine)) no-repeat right bottom / 72px 3px; }
.ms-ed-head { display: flex; align-items: center; gap: 28px; margin-bottom: 28px; }
.ms-ed-head .ms-ed-h2 { flex: none; padding-bottom: 14px; background: linear-gradient(var(--ed-wine), var(--ed-wine)) no-repeat right bottom / 72px 3px; }
.ms-ed-head__rule { display: none; }
.ms-ed-head__link { margin-inline-start: auto; }
.ms-ed-more { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ed-text); font: 600 15px/1.4 var(--ms-font-ar); white-space: nowrap; }

/* ---- «اختيارات تستاهل» ---- */
.ms-ed-picks { padding-top: clamp(8px, 1vw, 16px); }
.ms-ed-picks__grid { display: grid; grid-template-columns: minmax(0, 567fr) minmax(0, 606fr); gap: clamp(14px, 1.6vw, 24px); }
.ms-ed-series { display: flex; flex-direction: column; justify-content: center; margin: 0; padding: 4px clamp(16px, 2vw, 30px); list-style: none; border-radius: 16px; background: #FAF9F6; box-shadow: 0 0 0 1px rgba(21, 22, 26, .04), 0 14px 30px -26px rgba(21, 22, 26, .4); }
.ms-ed-series li + li { border-top: 1px solid var(--ed-line); }
.ms-ed-series a { display: grid; grid-template-columns: clamp(96px, 9.7vw, 140px) minmax(0, 1fr) auto; align-items: center; gap: 18px; min-height: clamp(60px, 4.6vw, 76px); }
.ms-ed-series__img img { display: block; width: 100%; height: auto; aspect-ratio: 124 / 58; object-fit: contain; mix-blend-mode: multiply; }
.ms-ed-series__t { justify-self: start; color: var(--ed-ink); font: 700 clamp(17px, 1.6vw, 24px)/1.2 var(--ms-font); }
.ms-ed-circle { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #8C8D93; color: var(--ed-ink); transition: background-color 200ms ease, box-shadow 200ms ease; }
.ms-ed-circle--light { position: absolute; inset-inline-end: 18px; bottom: 18px; background: #fff; box-shadow: none; }
.ms-ed-brands { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 18px); margin: 0; padding: 0; list-style: none; }
.ms-ed-brands a { display: flex; flex-direction: column; height: 100%; padding: clamp(10px, 1vw, 14px); border-radius: 16px; background: #FAF9F6; color: var(--ed-ink); box-shadow: 0 0 0 1px rgba(21, 22, 26, .04), 0 14px 30px -26px rgba(21, 22, 26, .4); }
.ms-ed-brand__img { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.ms-ed-brand__img img { position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); max-width: none; object-fit: contain; mix-blend-mode: multiply; transition: transform 500ms cubic-bezier(.22, 1, .36, 1); }
.ms-ed-brand__t { margin-top: 8px; font: 800 clamp(18px, 1.6vw, 24px)/1.2 var(--ms-font); text-align: center; }
.ms-ed-brand__go { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; margin-top: 2px; color: var(--ed-wine); font: 600 14px/1.3 var(--ms-font-ar); }
.ms-ed-brand__short { display: none; }
@media (max-width: 767px) { .ms-ed-brand__long { display: none; } .ms-ed-brand__short { display: inline; white-space: nowrap; } }

/* ---- «متاح دلوقتي» ---- */
.ms-ed-units { padding-top: clamp(56px, 6vw, 96px); }
.ms-ed-units__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 28px; margin: 0; padding: 0; list-style: none; }
.ms-ed-unit a { display: flex; flex-direction: column; height: 100%; min-width: 0; }
.ms-ed-unit__img { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 16px; background: #FAF9F6; overflow: hidden; }
/* the photo always fits inside its frame, whatever its own shape (square, 4:3, wide) */
.ms-ed-unit__img img { position: absolute; inset: 18px; width: calc(100% - 36px); height: calc(100% - 36px); max-width: none; object-fit: contain; mix-blend-mode: multiply; transition: transform 500ms cubic-bezier(.22, 1, .36, 1); }
.ms-ed-unit__none { position: absolute; inset: 0; display: grid; place-items: center; }
.ms-ed-unit__none { color: var(--ed-muted); }
.ms-ed-unit__txt { display: flex; flex-direction: column; flex: 1; gap: 4px; padding-top: 14px; }
.ms-ed-unit__name { color: var(--ed-ink); font: 700 18px/1.35 var(--ms-font); text-align: right; text-wrap: balance; }
.ms-ed-unit__fit { color: var(--ed-muted); font: 500 14px/1.5 var(--ms-font-ar); }
.ms-ed-unit__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 8px; }
.ms-ed-unit__price { color: var(--ed-ink); font: 800 20px/1.3 var(--ms-font-ar); white-space: nowrap; }
.ms-ed-unit .ms-ed-more { min-height: 0; font-size: 14px; color: var(--ed-wine); }

/* ---- by use / by budget ---- */
.ms-ed-ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 64px; padding-top: clamp(56px, 6vw, 96px); }
.ms-ed-h3 { margin: 0 0 14px; color: var(--ed-ink); font: 800 28px/1.3 var(--ms-font-ar); }
.ms-ed-index { margin: 0; padding: 0 clamp(16px, 2vw, 28px); list-style: none; border-radius: 16px; background: #FAF9F6; }
.ms-ed-index li + li { border-top: 1px solid var(--ed-line); }
.ms-ed-index a { display: flex; align-items: center; gap: 14px; min-height: 60px; color: var(--ed-ink); font: 700 18px/1.4 var(--ms-font-ar); }
.ms-ed-index a > span:first-child { flex: 1; }
.ms-ed-about { padding-top: clamp(48px, 5vw, 80px); }
.ms-ed-about p { max-width: 68ch; margin: 0 0 10px; color: var(--ed-text); font: 400 17px/1.9 var(--ms-font-ar); }

/* ---- help ---- */
.ms-ed-help { max-width: 1600px; margin: clamp(56px, 6vw, 96px) auto 0; padding: 0 var(--ed-pad) clamp(40px, 4vw, 64px); }
.ms-ed-help__in { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 20px 48px; padding: clamp(28px, 3vw, 48px) clamp(20px, 3vw, 48px); border-radius: 20px; background: var(--ed-ink); color: #EDEEF2; }
.ms-ed-help__h { margin: 0; color: #fff; font: 800 clamp(28px, 2.8vw, 42px)/1.3 var(--ms-font-ar); }
.ms-ed-help__txt p { margin: 8px 0 0; color: #C9CBD3; font: 500 17px/1.6 var(--ms-font-ar); }
.ms-ed-help__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px; }
.ms-ed-help__link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: #fff !important; font: 600 16px/1.3 var(--ms-font-ar); border-bottom: 1px solid rgba(255, 255, 255, .4); }
.ms-ed-help__visit { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 0; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .16); color: #B9BCC6; font: 500 15px/1.6 var(--ms-font-ar); }
.ms-ed-help__visit a { display: inline-flex; align-items: center; min-height: 44px; color: #fff !important; font-weight: 700; text-decoration: underline !important; text-underline-offset: 4px; }

/* ---- mouse only ---- */
@media (hover: hover) {
	.ms-ed-btn:hover { background: var(--ed-wine-2); }
	.ms-ed-btn--light:hover { background: #EEF0F7; }
	.ms-ed-btn:hover .ms-ed-arrow, .ms-ed-more:hover .ms-ed-arrow, .ms-ed a:hover .ms-ed-more .ms-ed-arrow, .ms-ed-index a:hover .ms-ed-arrow, .ms-ed-help__link:hover .ms-ed-arrow { transform: translateX(-4px); }
	.ms-ed-series a:hover .ms-ed-circle { background: var(--ed-wine); box-shadow: none; color: #fff; }
	.ms-ed-brands a:hover .ms-ed-brand__img img, .ms-ed-unit a:hover .ms-ed-unit__img img { transform: scale(1.03); }
	.ms-ed-index a:hover { color: var(--ed-wine); }
}
/* touch feedback */
.ms-ed-btn:active { background: #0B1D7A; }
.ms-ed-series a:active, .ms-ed-index a:active { background: var(--ed-paper-2); }
.ms-ed-brands a:active, .ms-ed-unit a:active .ms-ed-unit__img { opacity: .88; }
@media (prefers-reduced-motion: reduce) { .ms-ed *, .ms-ed *::before { transition: none !important; } }

/* ---- tablets and small laptops ---- */
@media (max-width: 1023px) {
	.ms-ed-picks__grid { grid-template-columns: minmax(0, 1fr); }
	.ms-ed-unit__foot { flex-direction: column; align-items: flex-start; gap: 0; }
	.ms-ed-unit .ms-ed-more { display: none; }
	.ms-ed-units__grid { gap: 32px 16px; }
	.ms-ed-ways { grid-template-columns: minmax(0, 1fr); }
	.ms-ed-help__in { grid-template-columns: minmax(0, 1fr); }
}

/* ---- tablets held upright: the words above the whole picture (they would reach the middle laptop) ---- */
@media (max-width: 900px) {
	.ms-ed-hero__txt { position: static; padding: 30px 24px 8px; }
	.ms-ed-h1 { font-size: clamp(30px, 5.4vw, 46px); line-height: 1.25; }
	.ms-ed-kicker { margin-top: 6px; font-size: clamp(17px, 2.4vw, 22px); }
	.ms-ed-cta { margin-top: 18px; }
	.ms-ed-btn { min-width: 220px; min-height: 52px; font-size: 17px; }
}

/* ---- phones: words first, then the laptops ---- */
@media (max-width: 767px) {
	.ms-ed-hero__txt { position: static; padding: 26px 16px 4px; }
	.ms-ed-h1 { font-size: clamp(30px, 8.8vw, 40px); line-height: 1.3; }
	.ms-ed-kicker { margin-top: 6px; font-size: 17px; }
	.ms-ed-cta { margin-top: 18px; }
	.ms-ed-btn { min-width: 220px; min-height: 52px; font-size: 17px; }
	.ms-ed-search { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 50px; margin-top: 14px; padding: 0 16px; border: 1px solid var(--ed-line); border-radius: 999px; background: #FAF9F6; color: var(--ed-muted); font: 500 16px/1.4 var(--ms-font-ar); text-align: start; cursor: pointer; }
	.ms-ed-search .ms-icon { color: var(--ed-ink); flex: none; }
	/* All three laptops whole (owner 2026-11-09): only the empty stone above and below them is trimmed. */
	.ms-ed-hero__pic img { aspect-ratio: 1140 / 400; object-fit: cover; object-position: 50% 68%; -webkit-mask-image: none; mask-image: none; }

	.ms-ed-sec { padding: 0 16px; }
	.ms-ed-h2 { font-size: clamp(26px, 7.4vw, 32px); }
	.ms-ed-picks { padding-top: 22px; }
	.ms-ed-series { padding: 2px 14px; }
	.ms-ed-series a { grid-template-columns: 92px minmax(0, 1fr) auto; gap: 12px; min-height: 64px; }
	.ms-ed-series__t { font-size: 17px; }
	.ms-ed-brands { gap: 8px; }
	.ms-ed-brands a { padding: 8px 6px 6px; border-radius: 14px; }
	.ms-ed-brand__t { font-size: 17px; margin-top: 4px; }
	.ms-ed-brand__go { font-size: 13px; min-height: 30px; gap: 4px; }
	.ms-ed-circle { width: 34px; height: 34px; }
	.ms-ed-circle--light { inset-inline-end: 12px; bottom: 12px; }

	.ms-ed-units { padding-top: 48px; }
	.ms-ed-head { margin-bottom: 20px; }
	.ms-ed-head__link { display: none; }
	.ms-ed-units__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
	.ms-ed-unit__img { border-radius: 12px; }
	.ms-ed-unit__img img { inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); }
	.ms-ed-unit__name { font-size: 15.5px; }
	.ms-ed-unit__fit { font-size: 13px; }
	.ms-ed-unit__price { font-size: 17px; }
	.ms-ed-ways { gap: 32px; padding-top: 48px; }
	.ms-ed-h3 { font-size: 23px; }
	.ms-ed-index a { min-height: 54px; font-size: 16.5px; }
	.ms-ed-about { padding-top: 40px; }
	.ms-ed-about p { font-size: 16px; line-height: 1.85; }
	.ms-ed-help { margin-top: 48px; padding: 0 16px 32px; }
	.ms-ed-help__in { padding: 28px 18px; border-radius: 16px; }
	.ms-ed-help__txt p { font-size: 16px; }
	.ms-ed-help__acts { width: 100%; }
	.ms-ed-help__acts .ms-ed-btn { width: 100%; }
}
@media (max-width: 359px) {
	.ms-ed-units__grid { grid-template-columns: minmax(0, 1fr); }
	.ms-ed-series a { grid-template-columns: 76px minmax(0, 1fr) auto; }
}
/* phones held sideways: keep the words over the picture but smaller */
@media (max-width: 1023px) and (orientation: landscape) and (max-height: 500px) {
	.ms-ed-hero__txt { position: absolute; padding-top: 10px; }
	.ms-ed-h1 { font-size: clamp(24px, 4.6vw, 40px); }
	.ms-ed-kicker { font-size: clamp(14px, 1.9vw, 18px); margin-top: 0; }
	.ms-ed-cta { margin-top: 8px; }
	.ms-ed-btn { min-width: 180px; min-height: 44px; font-size: 15px; }
	.ms-ed-search { display: none; }
	.ms-ed-hero__pic img { aspect-ratio: 1280 / 533; object-position: center; }
}