/* ==========================================================================
   Megakhan UX layer  (V2.9.23)
   Loaded AFTER site.css. Purely additive: nothing here removes or renames an
   existing rule, and every new component is created by mk-ux.js (progressive
   enhancement), so every page still works if this file or the script is missing.

   Sections
    1  Foundations      (text-size, viewport units, grid blow-out, safe areas)
    2  Focus + skip link
    3  Cross-browser fallbacks (backdrop-filter, color-mix, dvh, :has)
    4  Forms            (touch size, iOS zoom, RTL numeric fields, errors, required)
    5  Error summary, counters, password reveal
    6  Busy buttons + page progress bar
    7  Mobile bottom navigation + sticky buy bar + sticky form actions
    8  Back-to-top, network banner, toasts
    9  Dark-theme (midnight) adjustments for the new components
   10  Accessibility modes (reduced motion, forced colours, print)
   ========================================================================== */

/* ---------- design tokens for the new layer ---------- */
:root{
  --mk-focus:#2563eb;
  --mk-focus-soft:rgba(37,99,235,.28);
  --mk-danger:#b42318;
  --mk-danger-soft:rgba(180,35,24,.16);
  --mk-ok:#067647;
  --mk-ctl-h:44px;                 /* minimum height of a tappable control */
  --mk-bn-h:60px;                  /* bottom navigation bar height */
  --mk-layer-nav:900;              /* below the sticky header (1000), above page content */
}
html[data-theme="midnight"]{
  --mk-focus:#7dd3fc;
  --mk-focus-soft:rgba(125,211,252,.35);
  --mk-danger:#fda29b;
  --mk-danger-soft:rgba(253,162,155,.22);
  --mk-ok:#6ce9a6;
}
html[data-theme="amazon"]{--mk-focus:#007185;--mk-focus-soft:rgba(0,113,133,.3)}
html[data-theme="sunset"]{--mk-focus:#c2410c;--mk-focus-soft:rgba(194,65,12,.3)}
html[data-theme="emerald"]{--mk-focus:#047857;--mk-focus-soft:rgba(4,120,87,.3)}
html[data-theme="shopify"]{--mk-focus:#2c6ecb;--mk-focus-soft:rgba(44,110,203,.3)}

/* ==========================================================================
   1  Foundations
   ========================================================================== */
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;                    /* stop iOS/Android inflating text on rotate */
  -webkit-tap-highlight-color:transparent;
  scroll-padding-top:calc(var(--nav-h,68px) + 64px);   /* anchors are not hidden under the sticky header */
}
body{
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
@supports (min-height:100dvh){ body{min-height:100dvh} }   /* mobile browser toolbars no longer cut the page */
main{overflow-wrap:break-word}
img,video,canvas{max-width:100%}
img{height:auto}                                         /* attribute sizes never distort an image */
/* grid / flex children may shrink: long words, tables and URLs can no longer push the page sideways */
.cat-main,.cat-layout>*,.cart-layout>*,.product-detail>*,.hero-grid>*,.support-layout>*,.form-grid>*,.footergrid>*{min-width:0}
/* iPhone notch / Android gesture bar */
@supports (padding:env(safe-area-inset-top)){
  .topbar{padding-top:env(safe-area-inset-top)}
  body{padding-inline:env(safe-area-inset-left) env(safe-area-inset-right)}
}
/* 300 ms tap delay + accidental double-tap zoom on controls */
a,button,summary,label,select,input,textarea,[role=button]{touch-action:manipulation}
/* opt-in helper for a wide table: scrolls inside itself instead of widening the page (existing .table-card rules are left alone) */
.mk-table-scroll{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ==========================================================================
   2  Focus + skip link
   ========================================================================== */
:focus-visible{outline:2px solid var(--mk-focus);outline-offset:2px}
.mk-search:focus-within{box-shadow:0 0 0 3px var(--mk-focus-soft)}
.mk-skip{
  position:fixed;inset-block-start:8px;inset-inline-start:8px;z-index:100000;
  padding:11px 18px;border-radius:10px;background:var(--primary,#4f46e5);color:var(--on-primary,#fff);
  font-weight:800;text-decoration:none;transform:translateY(-250%);transition:transform .15s ease
}
.mk-skip:focus{transform:none}
main:focus{outline:none}                                  /* target of the skip link, not an interactive control */

/* ==========================================================================
   3  Cross-browser fallbacks
   ========================================================================== */
.topbar{-webkit-backdrop-filter:blur(14px)}               /* Safari < 18 only understands the prefixed property */
.floating-card{-webkit-backdrop-filter:blur(14px)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .topbar{background:var(--header-bg,var(--surface,#fff))}
  .portal-modal-backdrop,.mk-modal{background:rgba(2,6,23,.82)}
}
/* browsers without color-mix() (Chrome < 111, Safari < 16.2, Firefox < 113) keep solid, readable surfaces */
@supports not (color:color-mix(in srgb,red,blue)){
  .mk-search{border-color:var(--primary,#4f46e5)}
  .mk-search-row{border-top:1px solid var(--border,#e6e8ef)}
}
/* Firefox draws a second dotted focus border inside buttons */
button::-moz-focus-inner{border:0;padding:0}
/* Safari draws inner shadows and its own radius on text fields */
input[type=text],input[type=email],input[type=tel],input[type=url],input[type=search],input[type=password],textarea{-webkit-appearance:none;appearance:none}
input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}
/* empty date fields collapse to a few pixels in iOS Safari */
input[type=date],input[type=time],input[type=datetime-local],input[type=month]{min-height:var(--mk-ctl-h);line-height:1.2}
input[type=date]::-webkit-date-and-time-value{text-align:start;min-height:1.2em}

/* ==========================================================================
   4  Forms
   ========================================================================== */
/* RTL: e-mail, phone, URL, numbers and passwords are always typed left-to-right.
   Leaving them RTL scrambles "+20 101 234 5678" and "name@shop.com" for Arabic users. */
html[dir=rtl] :is(input[type=email],input[type=tel],input[type=url],input[type=number],input[type=password],input[inputmode=numeric],input[inputmode=decimal],input[inputmode=tel],input[data-digits]){
  direction:ltr;text-align:right
}
html[dir=rtl] :is(input[type=email],input[type=tel],input[type=url],input[type=number],input[inputmode=numeric],input[inputmode=decimal],input[inputmode=tel],input[data-digits])::placeholder{direction:rtl}
/* invalid state, the same in every theme */
.mk-invalid,.input-validation-error,input[aria-invalid=true],select[aria-invalid=true],textarea[aria-invalid=true]{
  border-color:var(--mk-danger)!important;
  box-shadow:0 0 0 3px var(--mk-danger-soft)
}
.mk-field-error,.field-validation-error{color:var(--mk-danger)}
.mk-field-error::before{content:"\26A0\FE0E\00a0";font-weight:700}      /* icon + text: colour is never the only signal */
.mk-field-error:empty::before{content:none}
/* required marker, added by mk-ux.js */
.mk-req{color:var(--mk-danger);font-weight:800;margin-inline-start:.2em;text-decoration:none}
.mk-req-note{display:block;box-sizing:border-box;width:100%;flex:0 0 100%;grid-column:1/-1;order:-1;font-size:12.5px;line-height:1.5;color:var(--muted,#667085);margin:0 0 18px;padding:0 0 12px;border-bottom:1px dashed var(--border,#e3e6ef);text-align:start}
.mk-req-note .mk-req{margin-inline-start:0;margin-inline-end:.25em}
/* product-card rating: nothing is drawn when a product has no approved review yet */
.mk-rate:empty{display:none}
/* helper text under a field, one look everywhere */
.field-help,label>small,.mk-help{color:var(--muted,#667085);font-size:12.5px;line-height:1.4}
/* read-only / disabled controls are visibly different (not only greyed text) */
input:disabled,select:disabled,textarea:disabled{opacity:.65;cursor:not-allowed}
input[readonly]:not([type=checkbox]):not([type=radio]){background-image:none}

/* ----- touch devices: every control is a comfortable target and never triggers iOS zoom ----- */
@media (pointer:coarse){
  html[lang] body :is(.btn,button:not(.mk-pw-toggle),.nav-cart,.nav-group>summary,.pager a,.chips a){min-height:var(--mk-ctl-h)}
  html[lang] body main :is(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]):not([type=hidden]),select,textarea){
    font-size:16px!important;                                  /* below 16px iOS Safari zooms the page on focus */
    min-height:var(--mk-ctl-h)!important
  }
  html[lang] body .topbar select,html[lang] body .mk-search input[type=search]{font-size:16px!important;min-height:var(--mk-ctl-h)}
  html[lang] body :is(input[type=checkbox],input[type=radio]){width:22px;height:22px;flex:0 0 auto}
  html[lang] body :is(label.check-row,.cat-checks label,.cat-list a){min-height:var(--mk-ctl-h);display:flex;align-items:center}
  .mk-density-btn{min-height:var(--mk-ctl-h)}
}

/* ==========================================================================
   5  Error summary, counters, password reveal
   ========================================================================== */
.mk-error-summary{
  margin:0 0 16px;padding:14px 16px;border-radius:12px;
  border:1px solid var(--mk-danger);background:var(--mk-danger-soft);color:var(--text,#101828)
}
.mk-error-summary:focus{outline:2px solid var(--mk-focus);outline-offset:2px}
.mk-error-summary strong{display:block;margin-bottom:6px;color:var(--mk-danger)}
.mk-error-summary ul{margin:0;padding-inline-start:20px}
.mk-error-summary a{color:var(--text,#101828)!important;text-decoration:underline;font-weight:650}   /* theme link colours do not reach 4.5:1 on the tinted summary */
.mk-count{display:block;position:static;clear:both;width:100%;margin-top:3px;font-size:12px;color:var(--muted,#667085);text-align:end}
.mk-count.is-near{color:#b54708}
.mk-count.is-over{color:var(--mk-danger);font-weight:700}
html[data-theme="midnight"] .mk-count.is-near{color:#fec84b}
/* The password box and the eye share the first grid row, so the eye is exactly as tall as the box on every page and theme and always centred.
   Anything else placed in the wrapper (the password-rules box on Register) goes to the rows below and never stretches the eye. */
.mk-pw{position:relative;display:grid;grid-template-columns:minmax(0,1fr);width:100%;min-width:0;max-width:100%}      /* min-width:0 lets a grid/flex parent shrink the wrapper */
.mk-pw>input{grid-area:1/1;padding-inline-end:48px!important;width:100%;min-width:0;max-width:100%}
.mk-pw-toggle{
  grid-area:1/1;justify-self:end;align-self:stretch;position:relative;height:auto;min-height:0;min-width:44px;padding:0 10px;
  display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;color:var(--muted,#667085);
  border-radius:0 10px 10px 0;cursor:pointer;font-size:12.5px;font-weight:700
}
html[dir=rtl] .mk-pw-toggle{border-radius:10px 0 0 10px}
.mk-pw-toggle:hover{color:var(--primary,#4f46e5)}
.mk-pw-toggle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ==========================================================================
   6  Busy buttons + page progress bar
   ========================================================================== */
@keyframes mk-spin{to{transform:rotate(360deg)}}
button[aria-busy=true],.btn[aria-busy=true]{pointer-events:none;opacity:.85}
button[aria-busy=true]::after,.btn[aria-busy=true]::after{
  content:"";display:inline-block;width:1em;height:1em;margin-inline-start:.6em;vertical-align:-.15em;
  border:2px solid currentColor;border-inline-end-color:transparent;border-radius:50%;animation:mk-spin .7s linear infinite
}
.mk-progress{
  position:fixed;inset-block-start:0;inset-inline:0;height:3px;z-index:100002;pointer-events:none;
  background:linear-gradient(90deg,var(--primary,#4f46e5),var(--accent,var(--primary2,#7c3aed)));
  transform:scaleX(0);transform-origin:left center;opacity:0;transition:transform .4s ease,opacity .2s
}
html[dir=rtl] .mk-progress{transform-origin:right center}
html.mk-loading .mk-progress{opacity:1;transform:scaleX(.82);transition:transform 6s cubic-bezier(.1,.7,.2,1),opacity .1s}

/* ==========================================================================
   7  Mobile bottom navigation, sticky buy bar, sticky form actions
   ========================================================================== */
.mk-bottomnav,.mk-buybar{display:none}
@media (max-width:700px){
  html.mk-has-bottomnav body{padding-bottom:calc(var(--mk-bn-h) + env(safe-area-inset-bottom,0px))}
  .mk-bottomnav{
    display:grid;grid-template-columns:repeat(5,1fr);position:fixed;inset-inline:0;bottom:0;z-index:var(--mk-layer-nav);
    height:calc(var(--mk-bn-h) + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);
    background:var(--surface,#fff);color:var(--text,#101828);border-top:1px solid var(--border,#e6e8ef);
    box-shadow:0 -6px 20px rgba(16,24,40,.08)
  }
  .mk-bottomnav a,.mk-bottomnav button{
    position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    min-width:0;padding:6px 2px;border:0;background:transparent;color:var(--muted,#667085);
    font:inherit;font-size:11px;font-weight:650;line-height:1.1;text-decoration:none;cursor:pointer
  }
  .mk-bottomnav svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  /* Phase 5 (owner: never cut words): a long label (Arabic "تسجيل الدخول" on a 320 px phone) wraps between words onto a second line
     instead of being cut with "…"; the smaller padding keeps icon + two lines inside the 60 px bar */
  .mk-bottomnav a,.mk-bottomnav button{padding-block:4px}
  .mk-bottomnav span.lbl{max-width:100%;white-space:normal;text-align:center;overflow-wrap:break-word}
  .mk-bottomnav [aria-current=page]{color:var(--primary,#4f46e5)}
  .mk-bottomnav [aria-current=page] svg{stroke-width:2.3}
  .mk-bottomnav .mk-bn-badge{
    position:absolute;inset-block-start:4px;inset-inline-start:calc(50% + 6px);min-width:18px;height:18px;padding:0 5px;
    border-radius:99px;background:var(--mk-danger-solid,#d92d20);color:#fff;font-size:11px;font-weight:800;line-height:18px;text-align:center
  }
  .mk-bottomnav .mk-bn-badge[hidden]{display:none}
  /* toasts and the back-to-top button sit above the bar */
  html.mk-has-bottomnav .mk-toast-host,html.mk-has-bottomnav .mk-toast,html.mk-has-bottomnav #mkToast{bottom:calc(var(--mk-bn-h) + 12px + env(safe-area-inset-bottom,0px))}
  html.mk-has-bottomnav .mk-totop{bottom:calc(var(--mk-bn-h) + 16px + env(safe-area-inset-bottom,0px))}

  /* sticky "Add to cart" on the product page: price + button, shown once the real button has scrolled away */
  html.mk-has-buybar body{padding-bottom:calc(var(--mk-bn-h) + 64px + env(safe-area-inset-bottom,0px))}
  .mk-buybar{
    position:fixed;inset-inline:0;bottom:calc(var(--mk-bn-h) + env(safe-area-inset-bottom,0px));z-index:calc(var(--mk-layer-nav) - 1);
    display:flex;align-items:center;gap:12px;padding:8px 14px;background:var(--surface,#fff);border-top:1px solid var(--border,#e6e8ef);
    box-shadow:0 -6px 20px rgba(16,24,40,.08);transform:translateY(130%);transition:transform .22s ease;visibility:hidden
  }
  .mk-buybar.is-on{transform:none;visibility:visible}
  /* 2026-10-26: while the bar shows, the back-to-top button sits above it (it covered "Add to cart") */
  html.mk-buybar-on .mk-totop{bottom:calc(var(--mk-bn-h) + var(--mk-bb-h,64px) + 12px + env(safe-area-inset-bottom,0px))}
  html.mk-buybar-on:not(.mk-has-bottomnav) .mk-totop{bottom:calc(var(--mk-bb-h,64px) + 12px + env(safe-area-inset-bottom,0px))}
  .mk-buybar .mk-bb-price{flex:1;min-width:0;font-weight:900;font-size:19px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mk-buybar .mk-bb-price small{display:block;font-size:11.5px;font-weight:600;color:var(--muted,#667085)}
  .mk-buybar .mk-bb-priceinner{margin:0!important;font-size:20px!important;line-height:1.1!important;display:inline-flex;align-items:baseline;gap:3px}
  .mk-buybar .mk-bb-priceinner .az-int{font-size:1em!important}
  .mk-buybar .mk-bb-priceinner .az-cur,.mk-buybar .mk-bb-priceinner .az-dec{font-size:.6em!important}
  .mk-buybar .btn{flex:0 0 auto;min-width:150px}
  html:not(.mk-has-bottomnav) .mk-buybar{bottom:env(safe-area-inset-bottom,0px)}

  /* long forms: the Save / Submit row stays reachable (opt-in, set by mk-ux.js on forms with many fields) */
  form.mk-long .form-actions.mk-sticky-actions{
    position:sticky;bottom:calc(var(--mk-bn-h) * 0 + env(safe-area-inset-bottom,0px));z-index:30;margin-top:14px;padding:10px 0;
    background:linear-gradient(180deg,transparent,var(--surface,#fff) 32%)
  }
}
/* bottom nav is a storefront pattern: never on admin / vendor workspaces; hidden while the on-screen keyboard is open */
html[data-admin="1"] .mk-bottomnav{display:none!important}
html.mk-kb .mk-bottomnav,html.mk-kb .mk-buybar{display:none!important}
@media (max-width:700px){
  /* the sticky "Place order" button must clear the bar when both exist */
  html.mk-has-bottomnav #placeOrderBtn{bottom:calc(var(--mk-bn-h) + 12px + env(safe-area-inset-bottom,0px))}
}

/* ==========================================================================
   8  Back-to-top, network banner
   ========================================================================== */
.mk-totop{
  position:fixed;inset-inline-end:16px;bottom:20px;z-index:var(--mk-layer-nav);width:44px;height:44px;border-radius:50%;
  border:1px solid var(--border,#e6e8ef);background:var(--surface,#fff);color:var(--text,#101828);
  box-shadow:0 6px 18px rgba(16,24,40,.18);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .18s,transform .18s,visibility .18s
}
.mk-totop.is-on{opacity:1;visibility:visible;transform:none}
.mk-totop svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mk-net{
  position:fixed;inset-inline:0;top:0;z-index:100001;padding:8px 14px;text-align:center;font-size:13.5px;font-weight:700;
  background:#b54708;color:#fff;transform:translateY(-110%);transition:transform .2s
}
.mk-net.is-on{transform:none}
.mk-net.is-ok{background:#067647}

/* ==========================================================================
   9  Midnight (dark) theme: the new components use the dark surface tokens
   ========================================================================== */
/* native controls (scrollbars, date pickers, autofill, select popups) follow the theme instead of staying white in the dark theme */
:root{color-scheme:light}
html[data-theme="midnight"]{color-scheme:dark}
html[data-theme="midnight"] .mk-bottomnav,
html[data-theme="midnight"] .mk-buybar,
html[data-theme="midnight"] .mk-totop{background:var(--surface,#101827);color:var(--text,#f8fafc);border-color:var(--border,#263449);box-shadow:0 -6px 20px rgba(0,0,0,.45)}
html[data-theme="midnight"] .mk-bottomnav a,
html[data-theme="midnight"] .mk-bottomnav button{color:var(--muted,#a5b4c7)}
html[data-theme="midnight"] .mk-bottomnav [aria-current=page]{color:var(--primary,#38bdf8)}

/* ==========================================================================
   10  Accessibility modes + print
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
@media (forced-colors:active){
  .btn,button,.mk-bottomnav,.mk-buybar,.mk-totop,.mk-error-summary{border:1px solid ButtonText}
  .mk-bottomnav [aria-current=page]{text-decoration:underline}
  .mk-invalid,.input-validation-error{border:2px solid Mark!important}
}
@media print{
  .mk-bottomnav,.mk-buybar,.mk-totop,.mk-net,.mk-progress,.mk-skip,.mk-pw-toggle,.mk-count,.mk-error-summary{display:none!important}
  html.mk-has-bottomnav body{padding-bottom:0}
}

/* V2.9.24: plan badges sit in the top inline-end corner (right in LTR, left in RTL) */
.sv-step-card{position:relative}
.sv-step-card .sv-flags{position:absolute;inset-block-start:8px;inset-inline-end:8px;display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-end;max-width:70%;z-index:1}
.sv-step-card .sv-flags .badge{font-size:10px;letter-spacing:.04em;padding:2px 8px;white-space:nowrap}
.sv-step-card:has(.sv-flags) header{padding-inline-end:0;margin-block-start:14px}

/* V2.9.24: chart type switcher (bar / line / pie / horizontal bar) */
.mk-chart-switch{display:inline-flex;flex-wrap:wrap;gap:4px;margin:0 0 8px;padding:3px;border:1px solid var(--border);border-radius:10px;background:var(--surface)}
.mk-chart-switch button{border:0;background:transparent;color:var(--muted);font:600 12px/1 inherit;padding:7px 12px;border-radius:7px;cursor:pointer;min-height:30px}
.mk-chart-switch button[aria-pressed=true]{background:var(--primary);color:var(--on-primary,#fff)}
.mk-chart-switch button:focus-visible{outline:2px solid var(--primary);outline-offset:1px}
@media (pointer:coarse){.mk-chart-switch button{min-height:40px;padding:10px 14px}}

/* V2.9.24: form alignment + spacing */
.form-grid{align-items:start}
.form-grid>label,.form-grid>.field,.form-grid>div:not(.form-actions){align-content:start;min-width:0}
.form-grid .form-actions,.form-card .form-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-block-start:8px}
.mk-btn-gap{margin-inline-start:10px}
.mk-btn-top{margin-block-start:14px}
@media (max-width:640px){.form-actions .btn,.form-actions button{flex:1 1 140px}}

/* V2.9.24: localization hub */
.lh-table .lh-c{text-align:center;white-space:nowrap}
.lh-cell{display:inline-block;min-width:56px;padding:3px 8px;border-radius:8px;font-weight:700;font-size:12px}
.lh-ok{background:#e6f6ef;color:#0b6b49}.lh-warn{background:#fef3e2;color:#8a4a06}.lh-bad{background:#fdecec;color:#a11d24}.lh-na{background:var(--border);color:var(--muted)}
.lh-miss{display:block;font-size:11.5px;margin-block-start:3px}
html[data-theme="midnight"] .lh-ok{background:#12372b;color:#7ee2b8}html[data-theme="midnight"] .lh-warn{background:#3b2a10;color:#f5c47a}html[data-theme="midnight"] .lh-bad{background:#3d1a1d;color:#f5a3a8}
.lh-review{color:#8a4a06;font-weight:700}
html[data-theme="midnight"] .lh-review{color:#f5c47a}

/* V2.9.27: language chips (one field, many languages) */
.mk-lang-off{display:none!important}
.mk-lang-bar{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-block:2px -4px}
.mk-lang-tabs{display:flex;flex-wrap:wrap;gap:6px}
.mk-lang-chip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:999px;padding:5px 12px;font:700 12px/1.2 inherit;cursor:pointer;min-height:30px}
.mk-lang-chip[aria-selected=true]{background:var(--primary);border-color:var(--primary);color:var(--on-primary,#fff)}
.mk-lang-chip:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.mk-lang-dot{width:9px;height:9px;border-radius:50%;background:#c0262d;flex:none;box-shadow:0 0 0 2px var(--surface)}
.mk-lang-chip[data-state=ok] .mk-lang-dot{background:#0f8a5f}
.mk-lang-chip[data-state=machine] .mk-lang-dot{background:#e08a00}
.mk-lang-chip[aria-selected=true] .mk-lang-dot{box-shadow:0 0 0 2px #fff}
.mk-lang-meter{font-size:12px;color:var(--muted)}
@media (pointer:coarse){.mk-lang-chip{min-height:40px;padding:8px 14px}}
.mk-lang-meter{unicode-bidi:plaintext}

/* V2.9.28: review queue */
.mk-rq-title{margin:0 0 14px;font-size:1.15rem}
.mk-rq-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-block-end:16px}
.mk-rq-lbl{display:block;font-weight:700;font-size:12.5px;color:var(--muted);margin-block-end:6px}
.mk-rq-src{border:1px solid var(--border);border-radius:10px;padding:10px 12px;background:color-mix(in srgb,var(--surface) 92%,var(--border));white-space:pre-wrap;min-height:44px;overflow-wrap:break-word}
.mk-rq input:not([type=hidden]),.mk-rq textarea{width:100%}
.mk-rq-hint{font-size:12px}
@media (max-width:760px){.mk-rq-row{grid-template-columns:1fr}}

/* V2.9.30 — #1 Best Seller badge: top-left (LTR) / top-right (RTL) of the card image; the SALE badge is pushed below it */
.mk-bs-corner{position:absolute;top:8px;inset-inline-start:8px;z-index:3;background:#c45500;color:#fff;font-size:.72rem;font-weight:800;line-height:1.2;padding:3px 9px;border-radius:6px;box-shadow:0 3px 10px rgba(196,85,0,.35);pointer-events:none;white-space:nowrap}
.product-card .product-image:has(.mk-bs-corner) .discount-badge{top:40px!important}
.mk-best-badge{display:inline-block;background:#c45500;color:#fff;font-size:.8rem;font-weight:800;padding:3px 10px;border-radius:6px;margin:4px 0}

/* V2.9.30 — portal font: Noto Sans (Latin) + Noto Sans Arabic, served from /fonts so every device shows the same letterforms (SIL Open Font License) */
@font-face{font-family:"Noto Sans";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/noto-sans-latin-400.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Noto Sans";font-style:normal;font-weight:500 600;font-display:swap;src:url(/fonts/noto-sans-latin-600.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Noto Sans";font-style:normal;font-weight:700 900;font-display:swap;src:url(/fonts/noto-sans-latin-700.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Noto Sans Arabic";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/noto-sans-arabic-400.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Noto Sans Arabic";font-style:normal;font-weight:500 600;font-display:swap;src:url(/fonts/noto-sans-arabic-600.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Noto Sans Arabic";font-style:normal;font-weight:700 900;font-display:swap;src:url(/fonts/noto-sans-arabic-700.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
:root:root:root{--mk-font:"Noto Sans","Noto Sans Arabic",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
:root:root:root[lang^="ar"]{--mk-font:"Noto Sans Arabic","Noto Sans",Tahoma,"Segoe UI",ui-sans-serif,system-ui,Arial,sans-serif}
:root:root:root[lang^="zh"]{--mk-font:"Noto Sans","PingFang SC","Microsoft YaHei","Noto Sans SC","Hiragino Sans GB",ui-sans-serif,system-ui,sans-serif}
/* phase 5 (owner): Cairo for Arabic, English and French in every theme and density; Chinese keeps the font list above. Self-hosted (SIL OFL, fonts/OFL-Cairo.txt), one variable file per script. */
@font-face{font-family:"Cairo";font-style:normal;font-weight:200 1000;font-display:swap;src:url(/fonts/cairo-arabic-variable.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1}
@font-face{font-family:"Cairo";font-style:normal;font-weight:200 1000;font-display:swap;src:url(/fonts/cairo-latin-ext-variable.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Cairo";font-style:normal;font-weight:200 1000;font-display:swap;src:url(/fonts/cairo-latin-variable.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root:root:root:not([lang^="zh"]){--mk-font:"Cairo","Noto Sans Arabic","Noto Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
:root:root:root:not([lang^="zh"]) :is(input,button,select,textarea,optgroup){font-family:var(--mk-font)}
html body{font-family:var(--mk-font)}

/* V2.9.30 — header "Sign in" / "Create account" and every other header link use one size that follows the density: 14px (expand) / 12px (compact) */
html{--mk-nav-fs:14px}html[data-density=compact]{--mk-nav-fs:12px}
html body .topbar :is(.actions>a,.nav-group summary,.nav-dropdown a,.auth-nav a,.auth-nav .nav-link,.nav-register,.nav-cart,.account-trigger,.account-dropdown a){font-size:var(--mk-nav-fs)!important;font-family:var(--mk-font)}

/* V2.9.30 — ChangeApprovals preview (live now / after approval) */
.mk-pv-tools{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.mk-pv-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}.mk-pv-grid.v-live,.mk-pv-grid.v-after{grid-template-columns:minmax(0,760px)}
.mk-pv-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:16px;min-width:0}
.mk-pv-card.side-after{border-color:var(--primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 18%,transparent)}
.mk-pv-tag{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:3px 10px;border-radius:99px;background:var(--surface-2,#eef0f6);color:var(--muted)}.mk-pv-tag.t-after{background:var(--primary);color:var(--on-primary,#fff)}
.mk-pv-main{display:block;width:100%;max-height:300px;object-fit:contain;background:var(--surface-2,#f3f4f8);border-radius:12px;margin-top:10px}.mk-pv-thumbs{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}.mk-pv-thumbs img{width:56px;height:56px;object-fit:cover;border-radius:8px;border:1px solid var(--border)}
.mk-pv-noimg{height:140px;display:grid;place-items:center;border:1px dashed var(--border);border-radius:12px;color:var(--muted);margin-top:10px}
.mk-pv-price{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}.mk-pv-price strong{font-size:1.4rem}.mk-pv-price s{color:var(--muted)}.mk-pv-off{background:#dc2626;color:#fff;border-radius:6px;padding:1px 8px;font-size:.8rem;font-weight:800}
.mk-pv-desc{width:100%;min-height:170px;border:1px solid var(--border);border-radius:10px;background:#fff}
.mk-pv-facts{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:4px}.mk-pv-facts li{display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid var(--border);padding:4px 0}
.mk-pv-card .is-new,.mk-pv-thumbs img.is-new{background:color-mix(in srgb,#16a34a 18%,transparent);outline:2px solid color-mix(in srgb,#16a34a 55%,transparent);border-radius:6px}
.mk-pv-banner{width:100%;max-height:160px;object-fit:cover;border-radius:12px;margin-top:10px}.mk-pv-storehead{display:flex;gap:10px;align-items:center;margin:10px 0}.mk-pv-logo{width:56px;height:56px;border-radius:50%;object-fit:cover;border:1px solid var(--border)}
.mk-pv-list{margin:10px 0 0;display:grid;gap:6px}.mk-pv-list div{display:grid;grid-template-columns:minmax(110px,35%) minmax(0,1fr);gap:8px}.mk-pv-list dt{color:var(--muted);font-weight:700}.mk-pv-list dd{margin:0;white-space:pre-line;min-width:0;overflow-wrap:break-word}
/* pre-launch sweep 2026-10-25: long values (picture addresses, colour codes) pushed the change preview 200px off a phone screen */
@media(max-width:560px){.mk-pv-list div{grid-template-columns:minmax(0,1fr);gap:2px}}
.mk-pv-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:16px}
@media(max-width:860px){.mk-pv-grid{grid-template-columns:1fr}}
.mk-together-note{flex-basis:100%;margin:8px 0 0;color:#b42318;font-size:.85rem}

/* V2.9.30 — print language picker next to print / PDF links */
.mk-print-lang{font:inherit;font-size:12px;padding:3px 6px;margin-inline-start:4px;border:1px solid var(--border,#d7dbe6);border-radius:8px;background:var(--surface,#fff);color:var(--text,#101828);max-width:120px;vertical-align:middle}
.mk-print-lang-row{margin:0 0 10px;font-size:13px;color:var(--muted,#667085)}.mk-print-lang-row label{display:inline-flex;gap:6px;align-items:center}

/* V2.9.30 — Page Management content (header / body / footer) sits directly on the page: no white rounded box, in every theme */
html body :is(.cms-page-header,.cms-page-footer,.cms-page-body){background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding-inline:0!important}
html body .cms-page-body-slot{margin-block:14px}

/* V2.9.32 — My Account tabs: on phones the tabs become a dropdown (Option B) */
.acct-tab-select-wrap{display:none}
@media(max-width:700px){html body .acct-tabs{display:none!important}html body .acct-tab-select-wrap{display:block;margin:0 0 14px}html body .acct-tab-select{width:100%;min-height:46px;font-weight:700}}

/* V2.9.30 — zoom-proof layouts: browser zoom shrinks the CSS viewport, so layouts must degrade gradually, never jump or overflow */
@media (max-width:1100px) and (min-width:821px){html body .editor-grid{grid-template-columns:minmax(0,1.3fr) minmax(260px,.7fr)!important}}
html body .preview-panel{top:84px}
html body .preview-panel iframe{height:min(620px,calc(100vh - 220px));min-height:320px}
@media (max-width:820px){html body .preview-panel{position:static}html body .preview-panel iframe{height:480px}}
html body .table-card{overflow-x:auto;max-width:100%}
html body .inline-edit-input{min-width:min(240px,100%);max-width:100%}
html body :is(.form-card,.table-card,.admin-panel,.page-shell) :is(img,video,iframe,canvas,svg){max-width:100%}
html body .row-actions{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
html body .form-grid>*{min-width:0}
html body :is(.page-head,.sectionhead,.admin-heading){flex-wrap:wrap}

/* V2_9_30 home sections admin */
.hb-head{display:flex;gap:12px;justify-content:space-between;align-items:flex-start;flex-wrap:wrap}.hb-head h2{margin:0 0 4px}
.hb-preview{display:flex;gap:10px;overflow-x:auto;padding:12px;margin:10px 0;border:1px dashed var(--border);border-radius:12px;background:var(--surface-2,transparent)}
.hb-pv-tile{flex:0 0 96px;display:grid;gap:4px;text-align:center;font-size:12px}.hb-pv-tile img,.hb-pv-ph{width:96px;height:72px;object-fit:cover;border-radius:10px;background:var(--border);display:block}
.hb-pv-ph{display:block}
.hb-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;margin:8px 0}
.hb-tile{border:1px solid var(--border);border-radius:12px;padding:10px;display:grid;gap:6px;align-content:start}.hb-tile img,.hb-tile .hb-pv-ph{width:100%;height:96px;object-fit:cover;border-radius:8px}.hb-tile small{overflow-wrap:break-word;color:var(--muted)}
.hb-edit{margin:10px 0}.hb-edit>summary{cursor:pointer;font-weight:600}.hb-edit[open]>summary{margin-bottom:10px}

/* V2_9_32 header spacing + clear, direction-independent menu arrows */
html body .topbar .hdr-user .auth-nav,html body .topbar .auth-nav{gap:20px!important}
html body .topbar .auth-nav a+a,html body .topbar .hdr-user a+a{margin-inline-start:10px}
html body .topbar .nav-group>summary,html body .topbar .nav-subgroup>summary,html body .topbar .account-trigger{list-style:none;display:inline-flex;align-items:center;gap:0}
html body .topbar summary::-webkit-details-marker{display:none}
html body .topbar summary::marker{content:''}
html body .topbar :is(.nav-group>summary,.nav-subgroup>summary)::after{content:''!important;display:inline-block;flex:0 0 auto;width:7px;height:7px;box-sizing:border-box;border:0 solid currentColor;border-right-width:2px;border-bottom-width:2px;transform:rotate(45deg)!important;margin:0 0 3px!important;margin-inline-start:10px!important;font-size:0!important;opacity:.95;transition:transform .15s}
html body .topbar :is(.nav-group,.nav-subgroup)[open]>summary::after{transform:rotate(225deg)!important;margin-bottom:-3px!important}
html body .topbar .nav-dropdown .nav-subgroup>summary{display:flex;justify-content:space-between;width:100%}
/* one-line notice when a page is opened from a red badge */
.mk-need-note{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin:0 0 10px;padding:8px 12px;border:1px solid #fecaca;background:#fef2f2;color:#7f1d1d;border-radius:10px;font-size:13.5px}
#themeSelect[hidden]{display:none!important}
.mk-chart-table{max-height:420px;overflow:auto;margin:6px 0}.mk-chart-table table{width:100%;border-collapse:collapse}.mk-chart-table th,.mk-chart-table td{padding:8px 10px;border-bottom:1px solid var(--border);text-align:start;vertical-align:top}
@media print{.mk-chart-switch{display:none}}
/* the SALE badge used the physical left edge, so in Arabic (heart on the left) it slid under the wishlist heart: both sit on the logical start edge now, the heart stays on the end edge */
.product-card .product-image .discount-badge{left:auto!important;right:auto!important;inset-inline-start:10px!important;inset-inline-end:auto!important;top:10px}
.product-card .product-image .mk-heart{z-index:4}
/* home sections admin (card per section, drag tiles) */
.hb-section.is-off{opacity:.8;border-style:dashed}
.hb-titleform{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap}.hb-title-fields{flex:1 1 360px;display:grid;gap:6px;min-width:0}.hb-title-cap{color:var(--muted);font-size:13px}
.hb-title-fields input{font-weight:700;font-size:17px;width:100%}.hb-order{display:flex;flex-direction:column;gap:4px}.hb-order form{margin:0}
.hb-actions-row{margin:10px 0;align-items:center}
.hb-tile{position:relative;cursor:grab}.hb-tile.is-drag{opacity:.4}.hb-tile.is-off{opacity:.65}
.hb-tile-bar{display:flex;align-items:center;justify-content:space-between;gap:8px}.hb-grip{cursor:grab;color:var(--muted);font-size:18px}
.hb-x{border:0;background:transparent;color:#b42318;font-size:16px;cursor:pointer;padding:2px 6px}
.hb-add{border:2px dashed var(--border);align-content:center;cursor:default;background:transparent}.hb-add>summary{cursor:pointer;display:grid;justify-items:center;gap:6px;font-weight:700;padding:26px 0;list-style:none}.hb-plus{font-size:28px;color:var(--primary,#4f46e5)}
.hb-add[open]{grid-column:1/-1}
.hb-pv-cap{align-self:center;font-size:12px;color:var(--muted);text-transform:uppercase;flex:0 0 auto}
.hb-titlerow{display:flex;gap:12px;align-items:flex-start}
/* chips: translate menu + preview */
.mk-tr{position:relative;display:inline-flex;gap:8px;align-items:center;margin-inline-start:10px}
.mk-tr-menu{position:absolute;top:calc(100% + 6px);inset-inline-start:0;z-index:30;min-width:280px;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:0 12px 30px rgba(16,24,40,.18);padding:6px}
.mk-tr-opt{display:grid;gap:2px;width:100%;text-align:start;border:0;background:transparent;padding:10px 12px;border-radius:9px;cursor:pointer;color:inherit}.mk-tr-opt:hover{background:var(--surface-2,#eef2ff)}.mk-tr-opt small{color:var(--muted)}
.mk-tr-prev{margin-top:10px;padding:12px;border:1px solid var(--border);border-radius:12px;background:var(--surface)}.mk-tr-head{font-weight:700;margin-bottom:8px}
.mk-tr-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:8px}@media(max-width:700px){.mk-tr-row{grid-template-columns:1fr}}
.mk-tr-cell{border:1px solid var(--border);border-radius:10px;padding:8px;min-width:0}.mk-tr-cell small{display:block;color:var(--muted);margin-bottom:4px}.mk-tr-cell textarea{width:100%}
.mk-tr-acts{display:flex;gap:8px;margin-top:6px}.mk-tr-note{color:var(--muted);font-size:12.5px;margin-top:8px}