/* Added to every page by the server: real inputs inside the design's input boxes,
   toasts/modals for the live platform, and the phone/tablet layout (1.6).
   At desktop width nothing here changes the approved design. */
[hidden]{display:none!important}
a,button,[data-open],[data-send]{cursor:pointer}
.input input,.inp input,.inp select,.inp textarea{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--text);font:inherit;font-size:inherit}
.input input::placeholder,.inp input::placeholder,.inp textarea::placeholder,.mx-prompt::placeholder,.mx-search::placeholder{color:#7a6e61}
.input:focus-within{border-color:var(--gold);box-shadow:0 0 0 4px rgba(216,173,108,.08)}
.inp select{appearance:none;cursor:pointer}
.inp select option{background:#100d0a;color:#efe6d8}
.inp textarea{resize:vertical;min-height:70px;line-height:1.75}
button.btn{cursor:pointer;font-family:inherit}
.form-msg{min-height:22px;color:#ec8a78;font-size:14px;margin:-6px 0 10px}
.form-msg.ok{color:#5fd38c}
.alt-panel{margin-bottom:6px}
.mx-prompt{width:calc(100% - 44px);display:inline-block;vertical-align:top;background:none;border:0;outline:0;resize:none;color:var(--text);font:inherit;font-size:inherit;line-height:1.7}
.mx-search{flex:1;background:none;border:0;outline:0;color:var(--text);font:inherit;font-size:14px;min-width:0}
.mx-drop{position:absolute;top:52px;right:0;left:0;background:#100d0a;border:1px solid var(--gold3);border-radius:14px;padding:8px;z-index:30;display:grid;gap:2px;box-shadow:0 20px 40px rgba(0,0,0,.6)}
.mx-drop a{padding:8px 10px;border-radius:9px;color:var(--text);font-size:14px}
.mx-drop a:hover{background:rgba(216,173,108,.1)}

.mx-toast{position:fixed;bottom:24px;right:50%;transform:translateX(50%);z-index:1000;background:#100d0a;color:#efe6d8;border:1px solid #9c7442;border-radius:14px;padding:12px 20px;font-family:Tajawal,sans-serif;font-size:15px;box-shadow:0 20px 50px rgba(0,0,0,.6);transition:opacity .4s;max-width:90vw}
.mx-toast.ok{border-color:rgba(31,168,85,.6)}
.mx-toast.err{border-color:rgba(217,96,76,.7);color:#f0a493}
.mx-toast.out{opacity:0}
.mx-toast.keep{top:16px;bottom:auto;display:flex;flex-wrap:wrap;align-items:center;gap:10px;justify-content:center}
.mx-toast-val{font-size:20px;letter-spacing:2px;color:#f3d39c;user-select:all}
.mx-toast-btn{background:transparent;color:inherit;border:1px solid #9c7442;border-radius:10px;padding:5px 12px;font:inherit;font-size:14px;cursor:pointer}
.mx-modal{position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:900;display:grid;place-items:center;padding:16px;font-family:Tajawal,sans-serif}
.mx-box{width:min(460px,100%);max-height:86vh;overflow:auto;background:#100d0a;border:1px solid #9c7442;border-radius:20px;padding:18px 20px;color:#efe6d8;box-shadow:0 40px 80px rgba(0,0,0,.7)}
.mx-box.wide{width:min(760px,100%)}
.mx-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;font-size:18px}
.mx-x{background:none;border:0;color:#a8998a;font-size:18px}
.mx-row{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:12px;border:1px solid rgba(214,170,105,.14);background:#0a0806;margin-bottom:8px;font-size:15px;color:#efe6d8}
.mx-row small{margin-inline-start:auto;color:#a8998a;font-size:12px}
.mx-dot{width:8px;height:8px;border-radius:50%;background:#f3d39c;flex:none}
.mx-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.mx-tabs a{padding:6px 12px;border-radius:16px;border:1px solid rgba(214,170,105,.22);font-size:13px;color:#a8998a}
.mx-tabs a.on{background:linear-gradient(135deg,#f6dba6,#d6a864 45%,#8f6838);color:#1a1209;font-weight:700}
.mx-files{display:grid;gap:8px}
.mx-file{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:12px;background:#0a0806;border:1px solid rgba(214,170,105,.14)}
.mx-file img,.mx-file .mx-ic{width:48px;height:48px;border-radius:10px;object-fit:cover;display:grid;place-items:center;background:#1b150e;font-size:22px;flex:none}
.mx-file div{flex:1;min-width:0}
.mx-file b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mx-file small{color:#a8998a;font-size:12px}
.mx-thumb{position:relative;width:48px;height:48px;border-radius:10px;overflow:hidden;background:#1b150e;border:0;padding:0;cursor:pointer;flex:none;display:grid;place-items:center;font-size:22px}
.mx-thumb video{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.mx-thumb i{position:absolute;inset:0;display:grid;place-items:center;font-style:normal;font-size:16px;color:#fff;background:rgba(0,0,0,.35);text-shadow:0 1px 4px #000}
.mx-thumb:hover i{background:rgba(0,0,0,.15)}
.mx-btn{padding:7px 14px;border-radius:16px;background:linear-gradient(135deg,#f6dba6,#d6a864 45%,#8f6838);color:#1a1209;font-weight:700;font-size:13px;border:0;font-family:inherit}
.mx-btn.ghost{background:none;border:1px solid rgba(217,96,76,.4);color:#ec8a78}
.mx-form{display:grid;gap:12px}
.mx-form label{font-size:13px;color:#f3d39c;display:grid;gap:6px}
.mx-form input,.mx-form select,.mx-form textarea{height:44px;border-radius:12px;border:1px solid rgba(214,170,105,.25);background:#0a0806;color:#efe6d8;padding:0 12px;font:inherit;font-size:15px;outline:0}
.mx-form textarea{height:90px;padding:10px 12px}
.mx-form input:focus,.mx-form select:focus{border-color:#d8ad6c}
.muted{color:var(--muted,#a8998a)}
[contenteditable=true]{outline:0;border-radius:6px}
[contenteditable=true]:focus{box-shadow:0 0 0 2px rgba(216,173,108,.4)}
.mx-burger{display:none}

/* scrollbars in Madar's identity: thin gold thumb on the dark background (page, boxes, lists, text areas) */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#0b0908}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#f6dba6,#d6a864 45%,#8f6838);border-radius:10px;border:2px solid #0b0908}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#fbe6bd,#e0b676 45%,#a37a45)}
::-webkit-scrollbar-corner{background:#0b0908}
@supports not selector(::-webkit-scrollbar){*{scrollbar-color:#c89a5c #0b0908;scrollbar-width:thin}}

/* panels side by side can be resized by dragging the line between them (js/panels.js) */
.mx-split{position:absolute;top:0;bottom:0;width:14px;margin-inline-end:-7px;cursor:col-resize;z-index:5;touch-action:none;display:flex;justify-content:center}
.mx-split::before{content:'';width:2px;height:100%;border-radius:2px;background:transparent;transition:background .15s}
.mx-split::after{content:'';position:absolute;top:50%;width:6px;height:44px;margin-top:-22px;border-radius:6px;background:rgba(216,173,108,.22);border:1px solid rgba(216,173,108,.35);transition:background .15s}
.mx-split:hover::before,.mx-split.drag::before{background:rgba(216,173,108,.45)}
.mx-split:hover::after,.mx-split.drag::after{background:linear-gradient(180deg,#f6dba6,#d6a864 45%,#8f6838)}
body.mx-resizing,body.mx-resizing *{cursor:col-resize!important;user-select:none!important}

/* flexible cards (js/cards.js): bar on hover, fold, close to a bubble, drag, float as a window */
.mx-ctl{position:absolute;top:10px;inset-inline-end:12px;display:flex;gap:4px;z-index:6;opacity:0;transition:opacity .15s}
.card:hover>.mx-ctl,.mx-float>.mx-ctl,.mx-ctl.mx-follow{opacity:1}
.mx-ctl.mx-follow{transition:opacity .15s}
.mx-ctl b{width:24px;height:24px;border-radius:8px;display:grid;place-items:center;font-size:12px;font-weight:700;cursor:pointer;color:#d8ad6c;background:rgba(11,9,8,.82);border:1px solid rgba(216,173,108,.3);user-select:none}
.mx-ctl b:hover{background:linear-gradient(135deg,#f6dba6,#d6a864 45%,#8f6838);color:#1a1209}
.mx-ctl b[data-a=drag]{cursor:grab}
.card:has(>.mx-ctl)>.ct{padding-inline-end:62px}
.card.mx-min>:not(.ct):not(.mx-ctl){display:none!important}
.card.mx-min{padding-bottom:14px}
.card.mx-closed{display:none!important}
.card.mx-flash{box-shadow:0 0 0 3px rgba(216,173,108,.55);transition:box-shadow .3s}
.mx-ph{border:2px dashed rgba(216,173,108,.45);border-radius:22px;background:rgba(216,173,108,.05);margin-bottom:20px}
.card.mx-dragging{opacity:.92;box-shadow:0 24px 60px rgba(0,0,0,.6),0 0 0 1px rgba(216,173,108,.5);transform:rotate(.6deg)}
body.mx-moving,body.mx-moving *{cursor:grabbing!important;user-select:none!important}
.card.mx-float{position:fixed!important;z-index:55;overflow:auto!important;resize:both;margin:0!important;min-width:280px;min-height:120px;max-width:96vw;max-height:92vh;box-shadow:0 30px 80px rgba(0,0,0,.65),0 0 0 1px rgba(216,173,108,.45)}
.card.mx-float>.ct{cursor:move}
.mx-home{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 18px;margin-bottom:20px;border:1px dashed rgba(216,173,108,.4);border-radius:18px;color:#a8998a;font-size:13px}
.mx-home a{color:#d8ad6c;cursor:pointer;font-weight:700}
.mx-dock{position:fixed;inset-inline-end:30px;bottom:130px;display:flex;flex-direction:column-reverse;gap:10px;z-index:58}
.mx-bub{position:relative;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:#f6dba6;background:radial-gradient(circle at 30% 25%,#2a2016,#0b0908 70%);border:2px solid transparent;background-clip:padding-box;box-shadow:0 0 0 2px #c89a5c,0 10px 26px rgba(0,0,0,.55);transition:transform .15s}
.mx-bub:hover{transform:scale(1.08)}
.mx-bub svg.s{width:20px;height:20px}
.mx-bub span{position:absolute;inset-inline-end:58px;white-space:nowrap;font-size:12.5px;padding:5px 10px;border-radius:10px;background:rgba(11,9,8,.92);border:1px solid rgba(216,173,108,.3);opacity:0;pointer-events:none;transition:opacity .15s}
.mx-bub:hover span{opacity:1}
.mx-bub.mx-reset{width:34px;height:34px;margin-inline-start:7px;box-shadow:0 0 0 1px rgba(216,173,108,.5)}
.mx-menu{position:fixed;z-index:70;min-width:170px;padding:8px;border-radius:14px;background:#120e0a;border:1px solid rgba(216,173,108,.35);box-shadow:0 20px 50px rgba(0,0,0,.6);display:flex;flex-direction:column;gap:2px}
.mx-menu small{color:#a8998a;font-size:11.5px;padding:4px 8px}
.mx-menu a{padding:8px 10px;border-radius:9px;cursor:pointer;font-size:13.5px}
.mx-menu a:hover{background:rgba(216,173,108,.12);color:#f3d39c}
.mx-borrow{position:fixed;z-index:57;display:flex;flex-direction:column;border-radius:18px;overflow:hidden;resize:both;min-width:300px;min-height:44px;background:#0b0908;border:1px solid rgba(216,173,108,.45);box-shadow:0 30px 80px rgba(0,0,0,.65)}
.mx-borrow .mx-bh{display:flex;align-items:center;gap:8px;padding:9px 12px;cursor:move;background:linear-gradient(180deg,#1a140e,#100c08);border-bottom:1px solid rgba(216,173,108,.25);user-select:none}
.mx-borrow .mx-bh b{font-size:13.5px}
.mx-borrow .mx-bh small{color:#a8998a;font-size:11.5px;margin-inline-end:auto}
.mx-borrow .mx-bh a{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;cursor:pointer;color:#d8ad6c;border:1px solid rgba(216,173,108,.3);font-size:12px}
.mx-borrow iframe{flex:1;border:0;width:100%;background:#070605}
.mx-borrow.mx-min{height:44px!important;resize:none}
.mx-borrow.mx-min iframe{display:none}
.mx-borrow.mx-moving-w iframe{pointer-events:none}
body.mx-embed{display:block!important;width:auto!important;max-width:none!important;padding:10px!important;background:#070605}
body.mx-embed>:not(.mx-embedwrap):not(script):not(.mx-modal):not(.mx-toast):not(.toast){display:none!important}
body.mx-embed .mx-embedwrap .card{margin:0}
.mx-ctl b[data-a=drag]{touch-action:none}
/* narrow screens and touch: the bar is always visible (no hover), floating windows only on wide screens */
@media (max-width:1100px),(hover:none){.mx-ctl{opacity:1}.mx-dock{inset-inline-end:14px;bottom:96px}.mx-bub{width:42px;height:42px}.mx-bub span{display:none}}

/* desktop: the 1440px design never causes a sideways scrollbar */
@media (min-width:1101px){body{width:auto!important;max-width:1440px}}
/* tablet and narrow desktop windows: big titles shrink with the screen instead of being cut at the edge */
@media (max-width:1100px) and (min-width:701px){
  .hero h1{font-size:clamp(34px,6.4vw,76px)!important}
  body[data-sf] .info h1{font-size:clamp(26px,3.8vw,44px)!important}
  body[data-sf] .sh h2,.phead h1{font-size:clamp(24px,3.6vw,40px)!important}
}
h1,h2,h3{overflow-wrap:anywhere}

/* ---------- tablet & phone ---------- */
@media (max-width:1100px){
  html,body{width:100%!important;max-width:100%;overflow-x:hidden}
  body{min-width:0!important}
  .wrap{width:auto!important;padding:0 16px}
  /* app pages: sidebar becomes a drawer */
  body:has(> aside){display:block!important}
  body > aside{position:fixed;top:0;right:0;bottom:0;width:280px;z-index:800;overflow-y:auto;transform:translateX(100%);transition:transform .25s;min-height:0}
  body.mx-nav-open > aside{transform:none;box-shadow:-20px 0 60px rgba(0,0,0,.7)}
  .mx-burger{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;border:1px solid var(--line);background:var(--panel2);color:var(--gold2);font-size:20px;flex:none}
  main{padding:14px 16px 120px!important;min-width:0}
  .topbar{gap:10px;flex-wrap:wrap}
  .topbar .search{width:auto;flex:1;min-width:0}
  .topbar .search kbd,.topbar .mode,.me > div:last-child{display:none}
  .grid2,.grid3,.layout,.g2,.modes,.idwrap,.brief,.out,.feat,.plans,.quote,.recent,.tools,.styles,.lc,.srcs,.mocks,.facts,.sw{grid-template-columns:1fr 1fr!important}
  .phead{flex-direction:column;align-items:flex-start;gap:12px}
}
@media (max-width:700px){
  .grid2,.grid3,.layout,.g2,.modes,.idwrap,.brief,.out,.feat,.plans,.quote,.styles,.srcs,.mocks{grid-template-columns:1fr!important}
  .recent,.tools,.lc,.facts,.idsteps,.kpis{grid-template-columns:1fr 1fr!important}
  .stepper{grid-template-columns:repeat(3,1fr)!important;row-gap:14px}
  .sp:after{display:none}
  .ring{margin:0 auto}
  .hero h1,.phead h1{font-size:24px!important}
  .agents{flex-wrap:wrap}
  .prompt .bot{flex-direction:column;align-items:stretch;gap:10px}
  .go{justify-content:flex-end}
  .acts{flex-wrap:wrap}
  .lib-pop{display:none}
  .lib,.fab-lib{inset-inline-end:16px!important;bottom:16px!important}
  /* landing */
  header .wrap{height:auto;padding:12px 16px;flex-wrap:wrap;gap:10px}
  header nav{gap:18px;font-size:15px}
  .hero{padding:40px 0 50px!important}
  .hero h1,h1{font-size:32px!important}
  .lead{font-size:16px!important}
  .prompt{width:auto!important;margin:24px 0 14px!important}
  .tools{flex-wrap:wrap}
  .head h2{font-size:28px!important}
  .f{border-inline-end:0!important}
  .quote{padding:28px 22px!important}
  .quote .big{display:none}
  .quote p{font-size:18px!important}
  footer .wrap{flex-direction:column;gap:12px;text-align:center}
  footer .links{flex-wrap:wrap;justify-content:center;gap:14px}
  section{padding:50px 0!important}
}
/* auth pages (two halves) */
@media (max-width:1000px){
  body:has(> .form-side){display:block!important;min-height:0}
  .form-side{padding:24px 16px 40px!important}
  .brand-side{display:none!important}
  .top{margin-bottom:28px!important}
  .form-side h1{font-size:30px}
  .row,.types{grid-template-columns:1fr!important}
  .socials{grid-template-columns:1fr 1fr 1fr}
  .otp input{width:44px!important;height:50px!important}
}
/* storefront and academy headers on phones (section 8): logo and icons on top, the menu scrolls sideways under them */
@media (max-width:760px){
  body[data-sf] .nav .w,body[data-ac] .hd .w{height:auto!important;flex-wrap:wrap;gap:8px 12px;padding:10px 16px}
  body[data-sf] .nav .links,body[data-ac] .hd .links{order:3;width:100%;overflow-x:auto;white-space:nowrap;gap:20px;font-size:14px;padding-bottom:6px;scrollbar-width:none}
  body[data-sf] .nav .links::-webkit-scrollbar,body[data-ac] .hd .links::-webkit-scrollbar{display:none}
  body[data-sf] .icons{gap:14px}
  body[data-sf] .logo b{font-size:18px}
}
/* storefront, academy and marketer pages on phones (1.6): the 1240px designs fold into one column */
@media (max-width:900px){
  body[data-sf] .w,body[data-ac] .w{width:auto!important;max-width:100%;padding-inline-end:16px;padding-inline-start:16px;box-sizing:border-box}
  body[data-sf] .nav .w,body[data-ac] .hd .w{padding:10px 16px}
  body[data-sf] :is(.co,.cont,.dual,.g,.g2,.hero,.hero .w,.lab,.labprev,.lay,.mk,.ob,.pg,.story,.stage,.wrap,.gal,.cgrid,.learn,.att,.shr,.r2,.buy),
  body[data-ac] :is(.co,.cont,.dual,.g,.g2,.hero,.hero .w,.lab,.labprev,.lay,.mk,.ob,.pg,.story,.stage,.wrap,.gal,.cgrid,.learn,.att,.shr,.r2,.buy){grid-template-columns:1fr!important}
  body[data-sf] :is(.grid,.cg,.books,.cards,.g4,.why,.how,.rates,.rev,.rv,.notes,.trust,.types,.trk,.pm,.cats),
  body[data-ac] :is(.grid,.cg,.books,.cards,.g4,.why,.how,.rates,.rev,.rv,.notes,.trust,.types,.trk,.pm,.cats){grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body[data-sf] .days,body[data-ac] .days{grid-template-columns:repeat(4,1fr)!important}
  body[data-sf] .times{grid-template-columns:repeat(3,1fr)!important}
  body[data-sf] .acc,body[data-ac] .acc{grid-template-columns:1fr!important;display:block!important}
  body[data-sf] aside.side,body[data-ac] aside.mside{position:static!important;margin-bottom:16px;width:auto!important}
  body[data-ac] .pr{grid-template-columns:48px 1fr!important}
  body[data-sf] .main{height:360px!important}
  body[data-sf] .info h1,body[data-ac] h1{font-size:28px!important}
  body[data-sf] .foot .w,body[data-ac] .foot .w{flex-direction:column;gap:10px;text-align:center}
  body[data-sf] .page{min-height:0!important}
  .lp-gal{grid-template-columns:1fr 1fr}
  body[data-sf] .steps{overflow-x:auto;justify-content:flex-start;gap:6px;font-size:12.5px}
  body[data-sf] .steps .ln{min-width:14px}
}

/* [75] launch plan session 17: accessibility basics. A visible ring for the keyboard only (a mouse click looks as before),
   the skip link at the top of Madar's pages, and much less motion for people who ask their device for it. */
:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.nav a:focus-visible,.btn:focus-visible,.mx-btn:focus-visible,.mx-row:focus-visible,[role=button]:focus-visible{outline:2px solid #f3d39c;outline-offset:2px}
body[data-sf] .btn:focus-visible,body[data-sf] [role=button]:focus-visible,body[data-ac] .btn:focus-visible{outline-color:currentColor}
.skip{position:fixed;top:-80px;inset-inline-start:12px;z-index:2100;padding:10px 18px;border-radius:12px;background:#100d0a;color:#f3d39c;border:1px solid #9c7442;font-weight:700;font-size:15px;text-decoration:none}
.skip:focus{top:12px}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
main[tabindex="-1"]:focus,#doc:focus{outline:0}

/* [74] launch plan session 17: the phone and tablet review. A sweep of every merchant and owner page at 375, 768 and 900px
   found boxes wider than the screen: on these right-to-left pages the extra width falls off the left edge, where it cannot be
   scrolled to, so the text was cut. App pages only (body:has(> aside)), and only under 1100px: the desktop design is untouched. */
@media (max-width:1100px){
  body:has(> aside) main :is(.toolbar,.tabs2,.tabsx,.ft,.flow,.opt,.thead,.ctx,.who,.cmpm,.compose,.planb,.h2,.hb,.dev,.lp-cd,.calbar,.pft,.ptabs,.chkhead,.xl,.logo-up,.ct,.row,.card.hero,.dact,.tlh,.hd,.bulk,.cmp){flex-wrap:wrap}
  body:has(> aside) main :is(.opt,.toolbar,.ct,.row,.flow,.planb,.who,.thead) > *{min-width:0}
  body:has(> aside) main :is(.g5,.accs,.segs,.rules,.qa,.kb,.bgo,.src,.mt){grid-template-columns:repeat(3,minmax(0,1fr))!important}
  body:has(> aside) main :is(.g4,.g3,.flow3,.row3,.extra,.bt3,.bulk,.carriers,.pk,.engines,.socs){grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body:has(> aside) main :is(.provs,.svc,.cl,.inbox,.sl,.hm,.bl,.layout,.prev,.eg,.wa,.col){grid-template-columns:minmax(0,1fr)!important}
  body:has(> aside) main :is(.inbox,.sl,.hm,.bl,.layout,.wa) > .mx-split{display:none}
  body:has(> aside) main table{display:block;max-width:100%;overflow-x:auto}
  body:has(> aside) main :has(> .wk){overflow-x:auto}
  body:has(> aside) main .wk{min-width:600px}
  body:has(> aside) main .empty-slot{white-space:normal;overflow-wrap:anywhere}
  body:has(> aside) main .hm .pg{max-width:100%;overflow-x:auto}
  body:has(> aside) main .hm > .card{overflow-x:auto}   /* the heatmap keeps its drawing size and scrolls inside its card */
}
@media (max-width:700px){
  body:has(> aside) main :is(.g4,.g5,.accs,.segs,.rules,.qa,.kb,.flow3,.src,.mt){grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body:has(> aside) main :is(.g3,.row2,.row3,.extra,.bt3,.bulk,.carriers,.pk,.req){grid-template-columns:minmax(0,1fr)!important}
}

/* ج6 (expert UX review 2026-10-30, merchant and buyer pages). Phones and small screens only, except the contrast line.
   - product page: the main picture first, the thumbnails a small row under it, name, price and «أضف للسلة» on the first screen
   - merchant home: the greeting card keeps its inner space (a landing rule took it away), floating buttons smaller and out of the menu
   - KPI numbers stay on one line; tap targets of 40px and more on the cart, checkout and product page
   - storefront home on phones: no empty band above the title, the picture above the text, nothing wider than the screen */
.navlbl,.topbar .search,.sbox,.inp.ph{color:#9c8d7b}
.input input::placeholder,.inp input::placeholder,.inp textarea::placeholder,.mx-prompt::placeholder,.mx-search::placeholder{color:#958775}
@media (max-width:900px){
  body[data-sf=product] .gal{display:flex!important;flex-direction:column;gap:10px}
  body[data-sf=product] .gal .main{order:-1;height:min(80vw,330px)!important}
  body[data-sf=product] .thumbs{display:flex!important;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  body[data-sf=product] .thumbs::-webkit-scrollbar{display:none}
  body[data-sf=product] .thumbs:empty{display:none!important}
  body[data-sf=product] .thumbs i{flex:0 0 58px;height:58px!important;border-radius:12px}
  body[data-sf=product] .pg{gap:16px!important}
  body[data-sf=product] .crumbs{margin:8px 0 10px!important;font-size:12.5px}
  body[data-sf=product] .info h1{font-size:24px!important;margin:2px 0!important}
  body[data-sf=product] .price{margin:6px 0 2px!important}
  body[data-sf=product] .price b{font-size:28px}
  body[data-sf=product] .buy{position:sticky;bottom:0;z-index:6;grid-template-columns:120px 1fr!important;padding:10px 0;background:var(--ink,#0b0908);box-shadow:0 -10px 20px var(--ink,#0b0908)}
  body[data-sf=product] .qty span{min-width:40px;min-height:44px;display:grid;place-items:center}
  body[data-sf] [data-fav]{display:inline-grid;place-items:center;min-width:40px;min-height:40px}
  body[data-sf] .nav .icons > span:not(.sfx-hb){min-width:40px;min-height:40px;display:inline-grid;place-items:center}
  body[data-sf] .it [data-q],body[data-sf] .it [data-rm],body[data-sf] .qty a,body[data-sf] .cp a{display:inline-grid;place-items:center;min-width:40px;min-height:40px;padding:0 8px}
  /* storefront home («فخامة»): the picture above the text, the title clear of the edge, the video badge in the flow */
  body[data-sf=home] .hero{height:auto!important;display:flex;flex-direction:column}
  body[data-sf=home] .hero .bt{position:relative!important;inset:auto!important;width:auto!important;height:210px!important;margin:16px 16px 0;border-radius:24px!important;opacity:1!important}
  body[data-sf=home] .hero .w{padding-top:20px!important;padding-bottom:34px}
  body[data-sf=home] .hero .vid{position:static!important;align-self:flex-start;margin:0 16px 24px;max-width:calc(100% - 32px)}
  body[data-sf=home] .cats{margin-top:20px!important}
}
@media (max-width:1100px){
  body:has(> aside) main .card.hero{padding:22px 18px 24px!important}
  .card:has(>.mx-ctl)>.ct{padding-inline-end:92px}
  .mx-ctl b{width:40px;height:40px}
  .topbar .hbtn{min-width:44px;min-height:44px}
  .mxc-fab{width:46px!important;height:46px!important;bottom:76px!important;inset-inline-end:14px!important}
  body.mx-nav-open :is(.mxc-fab,.fab-lib,.mx-dock,.sfx-fwa){display:none!important}
  /* ج4 (ج6 leftover): the floating buttons (support chat, library, dock) sit over the bottom of the page: the merchant pages end with
     room for them (and the phone's home bar), so the last card scrolls fully above them */
  body:has(> aside) main{padding-bottom:calc(150px + env(safe-area-inset-bottom, 0px))!important}
}
@media (max-width:700px){
  body:has(> aside) main .card.hero h1{font-size:22px!important;line-height:1.45;padding-inline-end:96px}
  body:has(> aside) main .card.hero p{font-size:14.5px!important}
  body:has(> aside) main .kpi b{white-space:nowrap;font-size:clamp(17px,5.4vw,24px)!important}
}
.tcard .row2>*{min-width:0}   /* ج6: «مدة الاستشارة» stays inside its box */
@media (max-width:760px){   /* ج6: the logo and the icons share the first row from the first paint (no jump when the store name replaces the design text) */
  body[data-sf] .nav .logo{flex:1 1 0;min-width:0;overflow:hidden}
  body[data-sf] .nav .logo b,body[data-sf] .nav .logo small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
  body[data-sf] .nav .icons{flex:none}
}