/* =====================================================================
   Al Shifa Hospital — design system & components
   Aesthetic: clean clinical white/teal/mint, soft layered depth, a subtle
   aurora gradient mesh, Sora display + Manrope body (Tajawal for Arabic).
   Mobile-first. Dark mode via html[data-theme="dark"].
   ===================================================================== */

/* ── Design tokens ──────────────────────────────────────────────── */
:root{
	/* These three are also injected from the Customizer (functions.php). */
	--m1-primary:#0D9488;
	--m1-accent:#2DD4BF;
	--m1-ink:#0B2A3A;
	--m1-primary-rgb:13,148,136;
	--m1-accent-rgb:45,212,191;
	/* Readable accent for TEXT on light backgrounds (mint is too light for
	   4.5:1). Re-computed from the Customizer accent in functions.php. */
	--accent-text:#0F766E;
	/* Pharmacy badge colors (re-skinnable, clinical — not generic purple). */
	--m1-sale:#E0443E;
	--m1-rx:#0E7C86;
	--m1-wa:#25D366;
	--m1-star:#F5B301;

	--bg:#FFFFFF;
	--surface:#ECFBF7;
	--surface-2:#D6F3EC;
	--card:#FFFFFF;
	--text:#0B2A3A;
	--muted:#5A7184;
	--border:rgba(11,42,58,.10);
	--border-2:rgba(11,42,58,.06);
	--ring:rgba(var(--m1-primary-rgb),.55);

	--shadow-sm:0 1px 2px rgba(11,42,58,.06),0 1px 3px rgba(11,42,58,.05);
	--shadow-md:0 8px 24px rgba(11,42,58,.08);
	--shadow-lg:0 20px 50px rgba(11,42,58,.12);
	--shadow-primary:0 14px 34px rgba(var(--m1-primary-rgb),.30);

	--r-sm:8px; --r-md:14px; --r-lg:22px; --r-xl:30px; --r-full:999px;
	--container:1200px;
	--gap:24px;
	--ease:cubic-bezier(.16,1,.3,1);
	--dur:.35s;

	--f-display:'Sora',system-ui,sans-serif;
	--f-body:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
}
/* Arabic typography is scoped to the Arabic language specifically, so a
   non-Arabic second language (French, Urdu…) is NOT forced onto Tajawal. */
.medone-lang-ar{ --f-display:'Tajawal',sans-serif; --f-body:'Tajawal',sans-serif; }

html[data-theme="dark"]{
	--bg:#061C24;
	--surface:#0A2A33;
	--surface-2:#0E3540;
	--card:#0C2E38;
	--text:#E8F5F2;
	--muted:#8DAAB0;
	--accent-text:var(--m1-accent); /* sky reads fine on dark surfaces */
	--border:rgba(var(--m1-accent-rgb),.16);
	--border-2:rgba(255,255,255,.05);
	--shadow-sm:0 1px 2px rgba(0,0,0,.4);
	--shadow-md:0 10px 30px rgba(0,0,0,.45);
	--shadow-lg:0 24px 60px rgba(0,0,0,.55);
}

/* ── Base ───────────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:clip; }
body{
	margin:0; background:var(--bg); color:var(--text);
	font-family:var(--f-body); font-size:17px; line-height:1.7;
	-webkit-font-smoothing:antialiased; overflow-x:hidden;
	transition:background .4s ease,color .4s ease;
}
h1,h2,h3,h4{ font-family:var(--f-display); color:var(--text); line-height:1.12; margin:0 0 .5em; font-weight:700; letter-spacing:-.02em; }
p{ margin:0 0 1rem; }
a{ color:var(--m1-primary); text-decoration:none; transition:color .2s; }
a:hover{ color:var(--accent-text); }
img{ max-width:100%; height:auto; display:block; }
ul{ margin:0; padding:0; list-style:none; }
:focus-visible{ outline:3px solid var(--ring); outline-offset:2px; border-radius:4px; }
.m1-ic{ width:1.2em; height:1.2em; display:inline-block; vertical-align:middle; }
.screen-reader-text{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ── Layout primitives ──────────────────────────────────────────── */
.m1-container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:20px; }
.m1-section{ padding-block:clamp(56px,8vw,110px); position:relative; }
.m1-section--tint{ background:var(--surface); }
.m1-section--mesh{ background:
	radial-gradient(40% 60% at 12% 0%,rgba(var(--m1-accent-rgb),.10),transparent 70%),
	radial-gradient(40% 55% at 100% 30%,rgba(var(--m1-primary-rgb),.08),transparent 70%),
	var(--bg); }
.m1-head{ max-width:660px; margin:0 auto clamp(34px,5vw,60px); text-align:center; }
.m1-head--left{ margin-inline:0; text-align:start; }
.m1-eyebrow{
	display:inline-flex; align-items:center; gap:8px; font-family:var(--f-display);
	font-size:.78rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
	color:var(--m1-primary); background:rgba(var(--m1-primary-rgb),.08);
	padding:7px 14px; border-radius:var(--r-full); margin-bottom:18px;
}
.m1-eyebrow .m1-ic{ width:15px; height:15px; }
.m1-h2{ font-size:clamp(1.7rem,3.6vw,2.7rem); }
.m1-lead{ color:var(--muted); font-size:1.06rem; }
.m1-grid{ display:grid; gap:var(--gap); }

/* ── Buttons ────────────────────────────────────────────────────── */
.m1-btn{
	--c:var(--m1-primary);
	display:inline-flex; align-items:center; justify-content:center; gap:10px;
	font-family:var(--f-display); font-weight:600; font-size:.96rem;
	padding:14px 26px; border-radius:var(--r-full); border:1.6px solid transparent;
	cursor:pointer; transition:transform var(--dur) var(--ease),box-shadow var(--dur),background .25s,color .25s,border-color .25s;
	white-space:nowrap; line-height:1;
}
.m1-btn .m1-ic{ width:18px; height:18px; }
.m1-btn--primary{ background:var(--m1-primary); background:linear-gradient(135deg,var(--m1-primary),color-mix(in srgb,var(--m1-accent) 55%,var(--m1-primary))); color:#fff; box-shadow:var(--shadow-primary); }
.m1-btn--primary:hover{ color:#fff; transform:translateY(-3px); box-shadow:0 18px 40px rgba(var(--m1-primary-rgb),.42); }
.m1-btn--ghost{ background:transparent; color:var(--text); border-color:var(--border); }
.m1-btn--ghost:hover{ color:var(--m1-primary); border-color:var(--m1-primary); transform:translateY(-3px); }
.m1-btn--wa{ background:#25D366; color:#fff; box-shadow:0 12px 30px rgba(37,211,102,.32); }
.m1-btn--wa:hover{ color:#fff; transform:translateY(-3px); box-shadow:0 16px 38px rgba(37,211,102,.45); }
.m1-btn--lg{ padding:17px 34px; font-size:1.04rem; }
.m1-btn--block{ width:100%; }

/* ── Top contact bar ────────────────────────────────────────────── */
.m1-topbar{ background:var(--m1-ink); color:#cfe0f5; font-size:.84rem; }
html[data-theme="dark"] .m1-topbar{ background:#050f1d; }
.m1-topbar .m1-container{ display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:42px; flex-wrap:wrap; }
.m1-topbar a{ color:#cfe0f5; display:inline-flex; align-items:center; gap:7px; }
.m1-topbar a:hover{ color:#fff; }
.m1-topbar .m1-ic{ width:15px; height:15px; color:var(--m1-accent); }
.m1-topbar__set{ display:flex; align-items:center; gap:18px; }
.m1-topbar__contact{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
/* Keep the tap-to-call number on mobile (highest-intent action); drop the
   secondary hours + address to save space. */
@media(max-width:720px){ .m1-topbar__contact>span{ display:none; } .m1-topbar__set{ display:none; } }

/* ── Header / navigation ────────────────────────────────────────── */
/* Near-opaque header background instead of backdrop-filter: blur() — the blur
   on a sticky element triggers GPU scroll-paint corruption (smearing/ghost
   trails) on some Android (Adreno/Mali) phones. */
.m1-header{ position:sticky; top:0; z-index:900; background:rgba(255,255,255,.96); border-bottom:1px solid var(--border-2); box-shadow:0 1px 10px rgba(11,42,58,.05); transition:background .3s; }
html[data-theme="dark"] .m1-header{ background:rgba(7,20,38,.96); }
/* The header shadow is static. A scroll-toggled box-shadow on a sticky element
   re-rasterizes its layer each scroll and can smear paint on some Android GPUs. */
.m1-bar{ display:flex; align-items:center; gap:18px; min-height:74px; }
.m1-logo{ display:inline-flex; align-items:center; gap:11px; font-family:var(--f-display); font-weight:700; font-size:1.22rem; color:var(--text); letter-spacing:-.02em; }
.m1-logo:hover{ color:var(--text); }
.m1-logo__mark{ width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:linear-gradient(135deg,var(--m1-primary),var(--m1-accent)); color:#fff; box-shadow:var(--shadow-primary); flex-shrink:0; }
.m1-logo__mark .m1-ic{ width:24px; height:24px; }
.m1-logo b{ color:var(--m1-primary); margin-inline-start:.26em; }
.m1-logo__mark--img{ background:#eef4f8; overflow:hidden; box-shadow:var(--shadow-sm); }
.m1-logo__mark--img img{ width:100%; height:100%; object-fit:cover; display:block; }
.m1-nav{ display:flex; align-items:center; gap:4px; margin-inline-start:auto; }
.m1-nav>ul,.m1-nav .m1-menu{ display:flex; align-items:center; gap:2px; list-style:none; margin:0; padding:0; }
.m1-nav a{ color:var(--text); font-weight:600; font-size:.95rem; padding:10px 14px; border-radius:var(--r-sm); position:relative; display:block; }
.m1-nav a::after{ content:""; position:absolute; left:14px; right:14px; bottom:6px; height:2px; background:var(--m1-accent); transform:scaleX(0); transform-origin:center; transition:transform .25s var(--ease); border-radius:2px; }
.m1-nav a:hover,.m1-nav .current-menu-item>a,.m1-nav .current_page_item>a{ color:var(--m1-primary); }
.m1-nav a:hover::after,.m1-nav .current-menu-item>a::after{ transform:scaleX(1); }
.m1-nav .sub-menu{ position:absolute; top:100%; inset-inline-start:0; min-width:210px; background:var(--card); border:1px solid var(--border); border-radius:var(--r-md); box-shadow:var(--shadow-lg); padding:8px; opacity:0; visibility:hidden; transform:translateY(8px); transition:.25s var(--ease); }
.m1-nav li{ position:relative; }
.m1-nav li:hover>.sub-menu{ opacity:1; visibility:visible; transform:none; }
.m1-nav .sub-menu a{ display:block; }
.m1-nav .sub-menu a::after{ display:none; }
.m1-actions{ display:flex; align-items:center; gap:10px; margin-inline-start:8px; }
.m1-iconbtn{ width:42px; height:42px; border-radius:var(--r-full); display:grid; place-items:center; background:var(--surface); border:1px solid var(--border); color:var(--text); cursor:pointer; transition:.2s; }
.m1-iconbtn:hover{ color:var(--m1-primary); border-color:var(--m1-primary); }
.m1-iconbtn .m1-ic{ width:20px; height:20px; }
.m1-lang{ display:flex; align-items:center; justify-content:center; font-family:var(--f-display); font-weight:700; font-size:.82rem; width:auto; padding-inline:13px; gap:6px; }
.m1-lang .m1-ic{ width:17px; height:17px; }
.m1-iconbtn .m1-ic-sun{ display:none; }
html[data-theme="dark"] .m1-iconbtn .m1-ic-moon{ display:none; }
html[data-theme="dark"] .m1-iconbtn .m1-ic-sun{ display:block; }
#m1-theme .m1-ic{ pointer-events:none; }
.m1-header .m1-btn{ padding:11px 20px; font-size:.9rem; }
.m1-burger{ display:none; }

/* Mobile nav drawer */
.m1-mobile{ position:fixed; inset:0; z-index:1000; visibility:hidden; pointer-events:none; }
.m1-mobile__scrim{ position:absolute; inset:0; background:rgba(5,15,28,.55); opacity:0; transition:opacity .3s; }
.m1-mobile__panel{ position:absolute; inset-block:0; inset-inline-end:0; width:min(86vw,360px); background:var(--bg); box-shadow:var(--shadow-lg); padding:22px; display:flex; flex-direction:column; gap:6px; transform:translateX(100%); transition:transform .35s var(--ease); overflow-y:auto; }
.medone-rtl .m1-mobile__panel{ transform:translateX(-100%); }
.m1-mobile.open{ visibility:visible; pointer-events:auto; }
.m1-mobile.open .m1-mobile__scrim{ opacity:1; }
.m1-mobile.open .m1-mobile__panel{ transform:none; }
.m1-mobile__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.m1-mobile a{ color:var(--text); font-weight:600; padding:13px 12px; border-radius:var(--r-sm); font-size:1.04rem; }
.m1-mobile a:hover{ background:var(--surface); color:var(--m1-primary); }
.m1-mobile .m1-btn{ margin-top:10px; }

/* ── Hero ───────────────────────────────────────────────────────── */
.m1-hero{ position:relative; overflow:hidden; background:
	radial-gradient(60% 80% at 80% 0%,rgba(var(--m1-accent-rgb),.16),transparent 60%),
	radial-gradient(50% 70% at 0% 100%,rgba(var(--m1-primary-rgb),.12),transparent 60%),
	var(--bg); }
.m1-hero__inner{ display:grid; grid-template-columns:1fr; gap:30px; align-items:center; padding-block:clamp(44px,7vw,84px); }
.m1-hero__copy{ position:relative; z-index:2; max-width:620px; }
.m1-hero h1{ font-size:clamp(2.1rem,5.4vw,3.7rem); margin-bottom:18px; }
.m1-hero h1 .hl{ background:linear-gradient(120deg,var(--m1-primary),var(--m1-accent)); -webkit-background-clip:text; background-clip:text; color:transparent; }
/* Solid-color fallback so the headline is never invisible. */
@supports not ((-webkit-background-clip:text) or (background-clip:text)){ .m1-hero h1 .hl{ color:var(--m1-primary); -webkit-text-fill-color:currentColor; } }
@media (forced-colors:active){ .m1-hero h1 .hl{ color:var(--m1-primary); -webkit-text-fill-color:currentColor; } }
.m1-hero__sub{ font-size:clamp(1.02rem,1.6vw,1.18rem); color:var(--muted); margin-bottom:28px; max-width:540px; }
.m1-hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:30px; }
.m1-hero__trust{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; color:var(--muted); font-size:.9rem; font-weight:600; }
.m1-hero__trust span{ display:inline-flex; align-items:center; gap:7px; }
.m1-hero__trust .m1-ic{ width:18px; height:18px; color:var(--m1-primary); }
.m1-hero__visual{ position:relative; min-height:340px; display:grid; place-items:center; }
.m1-hero__canvas{ position:absolute; inset:0; }
.m1-hero__canvas canvas{ width:100%!important; height:100%!important; display:block; }
.m1-hero__ring{ position:absolute; width:min(78%,78vw); aspect-ratio:1; border-radius:50%; border:1px dashed rgba(var(--m1-primary-rgb),.22); animation:m1spin 40s linear infinite; }
.m1-hero__ring::before{ content:""; position:absolute; inset:14%; border-radius:50%; border:1px dashed rgba(var(--m1-accent-rgb),.22); }
@keyframes m1spin{ to{ transform:rotate(360deg); } }
.m1-floatcard{ position:absolute; z-index:3; background:var(--card); border:1px solid var(--border); border-radius:var(--r-md); box-shadow:var(--shadow-lg); padding:13px 16px; display:flex; align-items:center; gap:11px; font-size:.85rem; }
.m1-floatcard b{ display:block; font-family:var(--f-display); color:var(--text); }
.m1-floatcard small{ color:var(--muted); }
.m1-floatcard__ic{ width:38px; height:38px; border-radius:11px; display:grid; place-items:center; background:rgba(var(--m1-primary-rgb),.1); color:var(--m1-primary); flex-shrink:0; }
.m1-floatcard--a{ top:8%; inset-inline-start:0; animation:m1float 6s ease-in-out infinite; }
.m1-floatcard--b{ bottom:10%; inset-inline-end:0; animation:m1float 6s ease-in-out infinite 1.2s; }
.m1-floatcard__ic.is-wa{ background:rgba(37,211,102,.14); color:#1fae57; }

/* Hero "Download the App" banner */
.m1-hero__app{ display:inline-flex; align-items:center; gap:14px; margin-top:26px; padding:11px 16px; background:var(--card); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-md); text-decoration:none; max-width:430px; transition:transform .25s var(--ease),box-shadow .25s; }
.m1-hero__app:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.m1-hero__app-ic{ width:46px; height:46px; flex-shrink:0; border-radius:13px; display:grid; place-items:center; background:linear-gradient(135deg,var(--m1-primary),var(--m1-accent)); color:#fff; box-shadow:var(--shadow-primary); }
.m1-hero__app-ic .m1-ic{ width:26px; height:26px; }
.m1-hero__app-txt{ display:flex; flex-direction:column; line-height:1.3; min-width:0; }
.m1-hero__app-txt b{ font-family:var(--f-display); color:var(--text); font-size:.98rem; }
.m1-hero__app-txt small{ color:var(--muted); font-size:.8rem; }
.m1-hero__app-go{ display:inline-flex; align-items:center; gap:6px; margin-inline-start:auto; flex-shrink:0; font-weight:700; font-size:.85rem; color:var(--m1-primary); white-space:nowrap; }
.m1-hero__app-go .m1-ic{ width:16px; height:16px; }
.medone-rtl .m1-hero__app-go .m1-ic{ transform:scaleX(-1); }
@media(max-width:480px){ .m1-hero__app{ width:100%; max-width:none; gap:12px; } .m1-hero__app-txt small{ font-size:.75rem; } }
@keyframes m1float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } }

/* Reusable 3D object mount (Three.js scenes on inner pages). */
.m1-obj3d{ position:relative; width:100%; min-height:340px; }
.m1-obj3d canvas{ width:100%!important; height:100%!important; display:block; }
.m1-obj3d__ring{ position:absolute; inset:8% ; margin:auto; width:80%; aspect-ratio:1; border-radius:50%; border:1px dashed rgba(var(--m1-primary-rgb),.2); animation:m1spin 44s linear infinite; pointer-events:none; }

/* 3D object filling a split-media box (e.g. the Why-Us molecule). */
.m1-split__media--3d{ cursor:grab; }
.m1-split__media--3d:active{ cursor:grabbing; }
.m1-split__media--3d .m1-obj3d{ position:absolute; inset:0; width:100%; height:100%; min-height:0; }
.m1-obj3d__hint{ position:absolute; inset-block-end:14px; inset-inline-start:14px; z-index:2; display:inline-flex; align-items:center; gap:6px; padding:6px 12px; font-size:.74rem; font-weight:600; letter-spacing:.02em; color:var(--m1-primary); background:rgba(255,255,255,.92); border:1px solid var(--border); border-radius:999px; pointer-events:none; }
[data-theme="dark"] .m1-obj3d__hint{ background:rgba(10,31,56,.9); color:#cfe4ff; }

/* Tactile 3D tilt + drop-shadow on product visuals — DESKTOP (hover) ONLY.
   On touch phones, perspective + preserve-3d + filter promote many GPU layers
   across the scrolling product grid, which corrupts paint on some Android GPUs. */
@media (hover:hover) and (pointer:fine){
	.m1-product__media{ perspective:700px; }
	.m1-pv{ transform-style:preserve-3d; filter:drop-shadow(0 12px 18px rgba(10,31,56,.16)); }
	.m1-product:hover .m1-pv{ transform:translateY(-4px) rotateX(8deg) rotateY(-12deg) scale(1.06); }
	.medone-rtl .m1-product:hover .m1-pv{ transform:translateY(-4px) rotateX(8deg) rotateY(12deg) scale(1.06); }
}

@media(min-width:980px){
	.m1-hero__inner{ grid-template-columns:1.05fr .95fr; gap:40px; }
	.m1-hero__visual{ min-height:520px; }
}

/* The floating hero cards belong only beside the two-column desktop layout;
   hide them on phones AND tablets so they never cover the 3D art. */
@media(max-width:979px){
	.m1-floatcard{ display:none; }
}
@media(max-width:640px){
	.m1-hero__visual{ min-height:360px; }
	.m1-obj3d{ min-height:300px; }
}

/* ── Stat strip ─────────────────────────────────────────────────── */
.m1-stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; }
.m1-stat{ background:var(--card); padding:26px 18px; text-align:center; }
.m1-stat__num{ font-family:var(--f-display); font-weight:800; font-size:clamp(1.9rem,4vw,2.6rem); color:var(--m1-primary); line-height:1; }
.m1-stat__num .sfx{ color:var(--accent-text); }
.m1-stat__lbl{ color:var(--muted); font-weight:600; font-size:.9rem; margin-top:8px; }
@media(min-width:760px){ .m1-stats{ grid-template-columns:repeat(4,1fr); } }

/* ── Service cards ──────────────────────────────────────────────── */
.m1-grid--svc{ grid-template-columns:1fr; }
@media(min-width:560px){ .m1-grid--svc{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:900px){ .m1-grid--svc{ grid-template-columns:repeat(4,1fr); } }
.m1-svc{ background:var(--card); border:1px solid var(--border); border-radius:var(--r-lg); padding:28px 24px; position:relative; overflow:hidden; transition:transform var(--dur) var(--ease),box-shadow var(--dur),border-color var(--dur); }
.m1-svc::before{ content:""; position:absolute; inset-block-start:0; inset-inline:0; height:4px; background:linear-gradient(90deg,var(--m1-primary),var(--m1-accent)); transform:scaleX(0); transform-origin:inline-start; transition:transform var(--dur) var(--ease); }
.m1-svc:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:transparent; }
.m1-svc:hover::before{ transform:scaleX(1); }
.m1-svc__icon{ width:60px; height:60px; border-radius:16px; display:grid; place-items:center; background:linear-gradient(135deg,rgba(var(--m1-primary-rgb),.12),rgba(var(--m1-accent-rgb),.12)); color:var(--m1-primary); margin-bottom:18px; transition:.3s; }
.m1-svc__icon .m1-ic{ width:30px; height:30px; }
.m1-svc:hover .m1-svc__icon{ background:linear-gradient(135deg,var(--m1-primary),var(--m1-accent)); color:#fff; }
.m1-svc h3{ font-size:1.18rem; margin-bottom:8px; }
.m1-svc p{ color:var(--muted); font-size:.95rem; margin-bottom:14px; }
.m1-svc__more{ font-family:var(--f-display); font-weight:600; font-size:.9rem; display:inline-flex; align-items:center; gap:6px; }
.m1-svc__more .m1-ic{ width:16px; height:16px; transition:transform .25s; }
.medone-rtl .m1-svc__more .m1-ic{ transform:scaleX(-1); }
.m1-svc:hover .m1-svc__more .m1-ic{ transform:translateX(4px); }
.medone-rtl .m1-svc:hover .m1-svc__more .m1-ic{ transform:scaleX(-1) translateX(4px); }

/* ── Steps / how it works ───────────────────────────────────────── */
.m1-grid--steps{ grid-template-columns:1fr; counter-reset:step; }
@media(min-width:560px){ .m1-grid--steps{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:980px){ .m1-grid--steps{ grid-template-columns:repeat(4,1fr); } }
.m1-step{ text-align:center; padding:10px; position:relative; }
.m1-step__ic{ width:74px; height:74px; margin:0 auto 16px; border-radius:50%; display:grid; place-items:center; background:var(--card); border:1px solid var(--border); color:var(--m1-primary); box-shadow:var(--shadow-sm); position:relative; }
.m1-step__ic .m1-ic{ width:32px; height:32px; }
.m1-step__ic::after{ counter-increment:step; content:counter(step); position:absolute; inset-block-start:-6px; inset-inline-end:-6px; width:26px; height:26px; border-radius:50%; background:var(--m1-accent); color:#04263a; font-family:var(--f-display); font-weight:700; font-size:.8rem; display:grid; place-items:center; }
.m1-step h3{ font-size:1.1rem; margin-bottom:6px; }
.m1-step p{ color:var(--muted); font-size:.92rem; margin:0; }

/* ── Product / pharmacy cards ───────────────────────────────────── */
.m1-shop-tools{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:34px; }
.m1-filter{ font-family:var(--f-display); font-weight:600; font-size:.9rem; padding:10px 18px; border-radius:var(--r-full); border:1.5px solid var(--border); background:var(--card); color:var(--text); cursor:pointer; transition:.2s; display:inline-flex; align-items:center; gap:8px; }
.m1-filter .m1-ic{ width:16px; height:16px; }
.m1-filter:hover{ border-color:var(--m1-primary); color:var(--m1-primary); }
.m1-filter.active{ background:linear-gradient(135deg,var(--m1-primary),var(--m1-accent)); color:#fff; border-color:transparent; box-shadow:var(--shadow-primary); }
.m1-grid--shop{ grid-template-columns:repeat(2,1fr); }
@media(min-width:720px){ .m1-grid--shop{ grid-template-columns:repeat(3,1fr); } }
@media(min-width:1000px){ .m1-grid--shop{ grid-template-columns:repeat(4,1fr); } }
.m1-product{ background:var(--card); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; display:flex; flex-direction:column; transition:transform var(--dur) var(--ease),box-shadow var(--dur),border-color var(--dur); }
.m1-product:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:transparent; }
.m1-product__media{ position:relative; aspect-ratio:1/.86; background:
	radial-gradient(60% 60% at 50% 38%,rgba(var(--m1-accent-rgb),.14),transparent 70%),var(--surface);
	display:grid; place-items:center; padding:14px; }
.m1-product__media img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.m1-pv{ width:78%; height:78%; transition:transform .4s var(--ease); }
.m1-product:hover .m1-pv{ transform:translateY(-4px) scale(1.04); }
.m1-badge{ position:absolute; inset-block-start:12px; inset-inline-start:12px; font-family:var(--f-display); font-weight:700; font-size:.72rem; letter-spacing:.03em; text-transform:uppercase; padding:5px 11px; border-radius:var(--r-full); background:var(--m1-ink); color:#fff; z-index:2; }
.m1-badge.is-sale{ background:var(--m1-sale); }
.m1-badge.is-rx{ background:var(--m1-rx); }
.m1-product__body{ padding:16px 16px 18px; display:flex; flex-direction:column; flex:1; }
.m1-product__cat{ font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--accent-text); margin-bottom:6px; }
.m1-product__title{ font-family:var(--f-display); font-weight:600; font-size:1rem; line-height:1.3; margin-bottom:6px; color:var(--text); }
.m1-product__desc{ color:var(--muted); font-size:.86rem; margin-bottom:14px; flex:1; }
.m1-price{ font-family:var(--f-display); font-weight:800; font-size:1.22rem; color:var(--text); }
.m1-price-old{ color:var(--muted); text-decoration:line-through; font-weight:600; font-size:.95rem; }
.m1-product__foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; }
.m1-product__wa{ width:44px; height:44px; border-radius:var(--r-full); background:#25D366; color:#fff; display:grid; place-items:center; flex-shrink:0; box-shadow:0 8px 20px rgba(37,211,102,.32); transition:.25s; }
.m1-product__wa:hover{ color:#fff; transform:scale(1.08); }
.m1-product__wa .m1-ic{ width:22px; height:22px; }

/* ── Doctor cards ───────────────────────────────────────────────── */
.m1-grid--docs{ grid-template-columns:repeat(2,1fr); }
@media(min-width:760px){ .m1-grid--docs{ grid-template-columns:repeat(3,1fr); } }
@media(min-width:1040px){ .m1-grid--docs{ grid-template-columns:repeat(4,1fr); } }
.m1-doctor{ background:var(--card); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; transition:transform var(--dur) var(--ease),box-shadow var(--dur),border-color var(--dur); }
.m1-doctor:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:transparent; }
.m1-doctor__photo{ aspect-ratio:1/1.04; position:relative; background:linear-gradient(160deg,rgba(var(--m1-primary-rgb),.16),rgba(var(--m1-accent-rgb),.12)); display:grid; place-items:center; overflow:hidden; }
.m1-doctor__photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.m1-doctor__ph{ width:64%; height:64%; color:rgba(var(--m1-primary-rgb),.5); }
.m1-doctor__tag{ position:absolute; inset-block-end:12px; inset-inline-start:12px; background:var(--card); color:var(--m1-primary); font-family:var(--f-display); font-weight:600; font-size:.78rem; padding:5px 12px; border-radius:var(--r-full); box-shadow:var(--shadow-sm); }
.m1-doctor__body{ padding:18px 18px 20px; text-align:center; }
.m1-doctor__body h3{ font-size:1.1rem; margin-bottom:3px; }
.m1-doctor__role{ color:var(--accent-text); font-weight:600; font-size:.9rem; margin-bottom:12px; }
.m1-doctor__social{ display:flex; justify-content:center; gap:8px; }
.m1-doctor__social a{ width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:var(--surface); color:var(--muted); }
.m1-doctor__social a:hover{ background:var(--m1-primary); color:#fff; }
.m1-doctor__social .m1-ic{ width:17px; height:17px; }

/* ── Split / feature band ───────────────────────────────────────── */
.m1-split{ display:grid; grid-template-columns:1fr; gap:34px; align-items:center; }
@media(min-width:920px){ .m1-split{ grid-template-columns:1fr 1fr; gap:54px; } .m1-split--rev .m1-split__media{ order:-1; } }
.m1-split__media{ position:relative; border-radius:var(--r-xl); overflow:hidden; aspect-ratio:1/.9; background:linear-gradient(160deg,rgba(var(--m1-primary-rgb),.14),rgba(var(--m1-accent-rgb),.1)); box-shadow:var(--shadow-lg); display:grid; place-items:center; }
.m1-split__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.m1-split__media .m1-ic{ width:34%; height:34%; color:rgba(var(--m1-primary-rgb),.45); }
.m1-feat{ display:flex; gap:14px; margin-bottom:18px; }
.m1-feat__ic{ width:48px; height:48px; border-radius:13px; flex-shrink:0; display:grid; place-items:center; background:rgba(var(--m1-primary-rgb),.1); color:var(--m1-primary); }
.m1-feat__ic .m1-ic{ width:24px; height:24px; }
.m1-feat h3{ font-size:1.1rem; margin-bottom:3px; }
.m1-feat p{ color:var(--muted); font-size:.94rem; margin:0; }
.m1-check{ display:flex; align-items:center; gap:10px; margin-bottom:11px; font-weight:600; }
.m1-check .m1-ic{ width:22px; height:22px; color:#fff; background:var(--m1-primary); border-radius:50%; padding:4px; flex-shrink:0; }

/* ── Testimonials ───────────────────────────────────────────────── */
.m1-grid--testi{ grid-template-columns:1fr; }
@media(min-width:820px){ .m1-grid--testi{ grid-template-columns:repeat(3,1fr); } }
.m1-testi{ background:var(--card); border:1px solid var(--border); border-radius:var(--r-lg); padding:28px 26px; position:relative; }
.m1-testi__q{ width:44px; height:44px; color:var(--m1-accent); opacity:.5; margin-bottom:8px; }
.m1-testi__stars{ display:flex; gap:3px; color:var(--m1-star); margin-bottom:14px; }
.m1-testi__stars .m1-ic{ width:18px; height:18px; fill:var(--m1-star); stroke:var(--m1-star); }
.m1-testi p{ font-size:1.02rem; color:var(--text); }
.m1-testi__who{ display:flex; align-items:center; gap:12px; margin-top:18px; }
.m1-testi__av{ width:46px; height:46px; border-radius:50%; background:linear-gradient(135deg,var(--m1-primary),var(--m1-accent)); color:#fff; display:grid; place-items:center; font-family:var(--f-display); font-weight:700; }
.m1-testi__who b{ font-family:var(--f-display); display:block; }
.m1-testi__who small{ color:var(--muted); }

/* ── FAQ accordion ──────────────────────────────────────────────── */
.m1-faq{ max-width:820px; margin-inline:auto; }
.m1-faq__item{ background:var(--card); border:1px solid var(--border); border-radius:var(--r-md); margin-bottom:12px; overflow:hidden; }
.m1-faq__q{ width:100%; text-align:start; background:none; border:0; cursor:pointer; padding:20px 22px; font-family:var(--f-display); font-weight:600; font-size:1.04rem; color:var(--text); display:flex; align-items:center; justify-content:space-between; gap:14px; }
.m1-faq__q .m1-ic{ width:22px; height:22px; color:var(--m1-primary); flex-shrink:0; transition:transform .3s; }
.m1-faq__item.open .m1-faq__q .m1-ic{ transform:rotate(45deg); }
.m1-faq__a{ max-height:0; overflow:hidden; transition:max-height .35s var(--ease); }
.m1-faq__a div{ padding:0 22px 20px; color:var(--muted); }

/* ── CTA band ───────────────────────────────────────────────────── */
.m1-cta{ position:relative; overflow:hidden; border-radius:var(--r-xl); padding:clamp(36px,6vw,64px); text-align:center; color:#fff; background:var(--m1-primary); background:linear-gradient(135deg,var(--m1-primary),color-mix(in srgb,var(--m1-accent) 60%,var(--m1-primary))); box-shadow:var(--shadow-lg); }
.m1-cta::before{ content:""; position:absolute; inset:0; background:radial-gradient(50% 80% at 90% 0%,rgba(255,255,255,.18),transparent 60%); }
.m1-cta>*{ position:relative; z-index:1; }
.m1-cta h2{ color:#fff; font-size:clamp(1.6rem,3.4vw,2.5rem); }
.m1-cta p{ color:rgba(255,255,255,.9); max-width:560px; margin:0 auto 26px; }
.m1-cta .m1-btn--ghost{ color:#fff; border-color:rgba(255,255,255,.5); }
.m1-cta .m1-btn--ghost:hover{ background:#fff; color:var(--m1-primary); }
.m1-cta__row{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ── Blog cards ─────────────────────────────────────────────────── */
.m1-grid--blog{ grid-template-columns:1fr; }
@media(min-width:680px){ .m1-grid--blog{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1000px){ .m1-grid--blog{ grid-template-columns:repeat(3,1fr); } }
.m1-post{ background:var(--card); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; transition:transform var(--dur) var(--ease),box-shadow var(--dur),border-color var(--dur); }
.m1-post:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:transparent; }
.m1-post__media{ aspect-ratio:16/10; background:linear-gradient(150deg,rgba(var(--m1-primary-rgb),.14),rgba(var(--m1-accent-rgb),.1)); position:relative; display:grid; place-items:center; }
.m1-post__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.m1-post__media .m1-ic{ width:30%; height:30%; color:rgba(var(--m1-primary-rgb),.4); }
.m1-post__body{ padding:22px 22px 24px; }
.m1-post__meta{ font-size:.82rem; color:var(--accent-text); font-weight:700; text-transform:uppercase; letter-spacing:.06em; margin-bottom:10px; }
.m1-post__body h3{ font-size:1.16rem; margin-bottom:8px; }
.m1-post__body h3 a{ color:var(--text); }
.m1-post__body h3 a:hover{ color:var(--m1-primary); }
.m1-post__body p{ color:var(--muted); font-size:.93rem; margin-bottom:14px; }

/* ── Forms ──────────────────────────────────────────────────────── */
.m1-form{ background:var(--card); border:1px solid var(--border); border-radius:var(--r-lg); padding:clamp(24px,4vw,38px); box-shadow:var(--shadow-md); }
.m1-form__grid{ display:grid; grid-template-columns:1fr; gap:16px; }
@media(min-width:620px){ .m1-form__grid--2{ grid-template-columns:1fr 1fr; } }
.m1-field{ display:flex; flex-direction:column; gap:7px; }
.m1-field label{ font-family:var(--f-display); font-weight:600; font-size:.88rem; }
.m1-input{ font-family:var(--f-body); font-size:1rem; color:var(--text); background:var(--surface); border:1.5px solid var(--border); border-radius:var(--r-sm); padding:13px 15px; width:100%; transition:border-color .2s,box-shadow .2s; }
.m1-input:focus{ outline:none; border-color:var(--m1-primary); box-shadow:0 0 0 4px var(--ring); }
textarea.m1-input{ resize:vertical; min-height:130px; }
.m1-field--full{ grid-column:1/-1; }

/* ── Page hero (inner pages) ────────────────────────────────────── */
.m1-pagehero{ position:relative; padding-block:clamp(48px,7vw,86px); text-align:center; background:
	radial-gradient(50% 80% at 80% 0%,rgba(var(--m1-accent-rgb),.14),transparent 60%),
	radial-gradient(50% 80% at 0% 100%,rgba(var(--m1-primary-rgb),.1),transparent 60%),
	var(--surface); border-bottom:1px solid var(--border-2); }
.m1-pagehero h1{ font-size:clamp(2rem,4.6vw,3.1rem); margin-bottom:12px; }
.m1-crumbs{ color:var(--muted); font-size:.9rem; font-weight:600; }
.m1-crumbs a{ color:var(--m1-primary); }
.m1-crumbs .sep{ margin-inline:8px; opacity:.5; }

/* ── Article / single content ───────────────────────────────────── */
.m1-article{ max-width:780px; margin-inline:auto; }
.m1-article p{ font-size:1.06rem; }
.m1-article h2,.m1-article h3{ margin-top:1.6em; }
.m1-prose img{ border-radius:var(--r-md); margin-block:1.4em; }

/* ── Footer ─────────────────────────────────────────────────────── */
.m1-footer{ background:var(--m1-ink); color:#b9cbe4; padding-block:clamp(48px,7vw,80px) 0; position:relative; border-top:3px solid transparent; border-image:linear-gradient(90deg,var(--m1-primary),var(--m1-accent)) 1; }
html[data-theme="dark"] .m1-footer{ background:#050f1d; }
.m1-footer a{ color:#b9cbe4; }
.m1-footer a:hover{ color:#fff; }
.m1-foot-grid{ display:grid; grid-template-columns:1fr; gap:34px; }
@media(min-width:680px){ .m1-foot-grid{ grid-template-columns:1.6fr 1fr 1fr; } }
@media(min-width:980px){ .m1-foot-grid{ grid-template-columns:1.8fr 1fr 1fr 1.4fr; } }
.m1-footer .m1-logo{ color:#fff; margin-bottom:16px; }
.m1-footer__about{ font-size:.95rem; color:#92a6c2; max-width:330px; }
.m1-foot-col h4{ color:#fff; font-size:1rem; margin-bottom:16px; }
.m1-foot-col li{ margin-bottom:10px; font-size:.93rem; }
.m1-foot-contact li{ display:flex; gap:10px; align-items:flex-start; }
.m1-foot-contact .m1-ic{ width:18px; height:18px; color:var(--m1-accent); flex-shrink:0; margin-top:3px; }
.m1-foot-social{ display:flex; gap:10px; margin-top:18px; }
.m1-foot-social a{ width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.08); }
.m1-foot-social a:hover{ background:var(--m1-primary); }
.m1-foot-social .m1-ic{ width:19px; height:19px; }
.m1-foot-bottom{ border-top:1px solid rgba(255,255,255,.1); margin-top:48px; padding-block:24px; display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:.86rem; color:#8298b6; }
.m1-foot-bottom a{ color:var(--m1-accent); }

/* ── Floating WhatsApp ──────────────────────────────────────────── */
.m1-wafloat{ position:fixed; inset-block-end:24px; inset-inline-end:24px; z-index:960; width:52px; height:52px; border-radius:50%; background:#25D366; color:#fff; display:grid; place-items:center; box-shadow:0 12px 30px rgba(37,211,102,.45); transition:transform .3s,opacity .3s; }
.m1-wafloat:hover{ color:#fff; transform:scale(1.08); }
.m1-wafloat .m1-ic{ width:27px; height:27px; }
/* Hide the floating WhatsApp while the AI chat panel is open so it never
   overlaps the chat's send button (especially in RTL, where they meet). */
.medi-chat-open .m1-wafloat{ opacity:0; transform:scale(.5); pointer-events:none; }
.m1-wafloat::after{ content:""; position:absolute; inset:0; border-radius:50%; border:2px solid #25D366; animation:m1pulse 2.4s ease-out infinite; }
@keyframes m1pulse{ 0%{ transform:scale(1); opacity:.6; } 70%{ transform:scale(1.5); opacity:0; } 100%{ opacity:0; } }

/* ── Scroll reveal ──────────────────────────────────────────────── */
.m1-reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease),transform .7s var(--ease); }
.m1-reveal.in{ opacity:1; transform:none; }
.m1-reveal[data-d="1"]{ transition-delay:.08s; }
.m1-reveal[data-d="2"]{ transition-delay:.16s; }
.m1-reveal[data-d="3"]{ transition-delay:.24s; }

/* ── Pagination / misc ──────────────────────────────────────────── */
.m1-pager{ display:flex; gap:8px; justify-content:center; margin-top:40px; }
.m1-pager a,.m1-pager span{ min-width:44px; height:44px; padding:0 12px; border-radius:var(--r-sm); border:1px solid var(--border); display:inline-grid; place-items:center; font-weight:600; }
.m1-pager .current{ background:var(--m1-primary); color:#fff; border-color:transparent; }

/* ── Mobile header behaviour ────────────────────────────────────── */
@media(max-width:980px){
	.m1-nav,.m1-header .m1-btn--primary{ display:none; }
	.m1-burger{ display:grid; }
}
/* Small phones: compress the bar so the logo + controls always fit and never
   overflow (the Arabic brand name is wider than the Latin one). */
@media(max-width:560px){
	.m1-container{ padding-inline:15px; }
	.m1-bar{ gap:8px; min-height:64px; }
	.m1-logo{ font-size:1.02rem; gap:8px; min-width:0; }
	.m1-logo>span:last-child{ white-space:nowrap; }
	.m1-logo__mark{ width:38px; height:38px; border-radius:11px; flex-shrink:0; }
	.m1-logo__mark .m1-ic{ width:21px; height:21px; }
	.m1-actions{ gap:11px; margin-inline-start:6px; }
	.m1-iconbtn{ width:40px; height:40px; }
	.m1-lang{ padding-inline:10px; font-size:.78rem; gap:5px; }
	.m1-search-toggle{ display:none; } /* phones use the search field inside the drawer */
	/* Arabic brand is two words ("مستشفى الشفاء") — stack them so the logo stays
	   compact and mobile-friendly, like the short Latin name. */
	.medone-lang-ar .m1-logo{ font-size:.98rem; }
	.medone-lang-ar .m1-logo>span:last-child{ line-height:1.12; }
	.medone-lang-ar .m1-logo b{ display:block; margin-inline-start:0; }
}

/* ── Site search: header overlay + live results ─────────────────── */
.m1-search{ position:fixed; inset:0; z-index:1100; }
.m1-search[hidden]{ display:none; }
.m1-search__scrim{ position:absolute; inset:0; background:rgba(5,15,28,.55); opacity:0; transition:opacity .25s; }
.m1-search.open .m1-search__scrim{ opacity:1; }
.m1-search__box{ position:relative; width:min(640px,92vw); margin:13vh auto 0; background:var(--bg); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-lg); padding:14px; opacity:0; transform:translateY(-14px); transition:.28s var(--ease); }
.m1-search.open .m1-search__box{ opacity:1; transform:none; }
.m1-search__bar{ display:flex; align-items:center; gap:10px; background:var(--surface); border:1.5px solid var(--border); border-radius:var(--r-full); padding-inline:16px 8px; padding-block:6px; }
.m1-search__bar>.m1-ic{ width:22px; height:22px; color:var(--m1-primary); flex-shrink:0; }
.m1-search__bar input{ flex:1; border:0; background:none; outline:none; font:inherit; font-size:1.02rem; color:var(--text); min-width:0; padding-block:8px; }
.m1-search__bar:focus-within{ border-color:var(--m1-primary); }
.m1-search__x{ width:34px; height:34px; border-radius:50%; border:0; background:var(--surface-2); color:var(--muted); cursor:pointer; flex-shrink:0; font-size:1rem; line-height:1; }
.m1-search__x:hover{ color:var(--m1-primary); }
.m1-search__results{ margin-top:8px; max-height:46vh; overflow-y:auto; }
.m1-search__item{ display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:var(--r-md); text-decoration:none; }
.m1-search__item:hover{ background:var(--surface); }
.m1-search__rtype{ font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--m1-primary); background:rgba(var(--m1-primary-rgb),.1); padding:4px 9px; border-radius:100px; flex-shrink:0; }
.m1-search__rt{ color:var(--text); font-weight:600; font-size:.95rem; }
.m1-search__all{ display:block; text-align:center; padding:12px; margin-top:4px; font-weight:700; color:var(--m1-primary); text-decoration:none; border-top:1px solid var(--border-2); }
.m1-search__all:hover{ color:var(--accent-text); }
.m1-search__empty{ padding:24px; text-align:center; color:var(--muted); }
.m1-search__hint{ margin-top:10px; padding-inline:6px; font-size:.78rem; color:var(--muted); }

/* Mobile drawer search field */
.m1-mobile__search{ display:flex; align-items:center; gap:9px; background:var(--surface); border:1.5px solid var(--border); border-radius:var(--r-full); padding:9px 15px; margin-bottom:14px; }
.m1-mobile__search .m1-ic{ width:19px; height:19px; color:var(--m1-primary); flex-shrink:0; }
.m1-mobile__search input{ flex:1; border:0; background:none; outline:none; font:inherit; color:var(--text); min-width:0; }

/* Pharmacy: live product search + filter bar */
.m1-shop-bar{ display:flex; flex-direction:column; gap:14px; margin-bottom:28px; }
.m1-shop-bar .m1-shop-tools{ margin:0; }
.m1-shop-search{ display:flex; align-items:center; gap:11px; background:var(--card); border:1.5px solid var(--border); border-radius:var(--r-full); padding:11px 18px; box-shadow:var(--shadow-sm); }
.m1-shop-search .m1-ic{ width:20px; height:20px; color:var(--m1-primary); flex-shrink:0; }
.m1-shop-search input{ flex:1; border:0; background:none; outline:none; font:inherit; font-size:1rem; color:var(--text); min-width:0; }
.m1-shop-search:focus-within{ border-color:var(--m1-primary); box-shadow:0 0 0 4px rgba(var(--m1-primary-rgb),.12); }
.m1-shop-empty{ text-align:center; padding:44px 0; color:var(--muted); }
.m1-shop-empty[hidden]{ display:none; }
.m1-shop-empty .m1-ic{ width:36px; height:36px; color:var(--muted); opacity:.55; }
@media(min-width:780px){ .m1-shop-bar{ flex-direction:row; align-items:center; justify-content:space-between; } .m1-shop-search{ flex:1; max-width:360px; } }

/* ── Reduced motion ─────────────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
	*,*::before,*::after{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
	.m1-reveal{ opacity:1; transform:none; }
}