/* V2.9.46 - Portal-wide foundations (stage 1). Shared building blocks only; no page layout changes.
   1 tokens (spacing scale, status colours)  2 page header  3 buttons (4 kinds)  4 status chips  5 focus ring  6 forms/tables rhythm
   Everything uses the theme variables (--primary, --text, --border, --surface), logical properties (RTL/LTR) and has compact + mobile rules. */
:root{--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;
  --st-ok:#067647;--st-warn:#b54708;--st-err:#b42318;--st-info:#175cd3;--focus-ring:3px}
html[data-theme="midnight"]{--on-primary:#0b1220;--st-ok:#6ee7b7;--st-warn:#fcd34d;--st-err:#fca5a5;--st-info:#93c5fd}

/* 2 - page header: breadcrumb above, title + short text, actions at the end, one thin rule below */
html[data-admin="1"] main .page-head,html[data-admin="1"] .mk-page-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:var(--sp-3) var(--sp-5);padding-bottom:var(--sp-3);margin-bottom:var(--sp-4);border-bottom:1px solid var(--border)}
html[data-admin="1"] main .page-head h1,html[data-admin="1"] .mk-page-head h1{margin:0 0 var(--sp-1);line-height:1.2}
html[data-admin="1"] main .page-head p,html[data-admin="1"] .mk-page-head p{margin:0;color:var(--muted)}
html[data-admin="1"] main .page-head .head-actions,html[data-admin="1"] main .page-head>div:last-child:not(:first-child){display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center}
html[data-admin="1"] main .breadcrumbs{display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-2);align-items:center;font-size:12.5px;color:var(--muted);margin-bottom:var(--sp-2)}
html[data-admin="1"] main .breadcrumbs a{color:var(--muted);text-decoration:none}html[data-admin="1"] main .breadcrumbs a:hover{color:var(--primary);text-decoration:underline}
[dir=rtl] html[data-admin="1"] main .breadcrumbs span{display:inline-block}
@media(max-width:640px){html[data-admin="1"] main .page-head,html[data-admin="1"] .mk-page-head{flex-direction:column;align-items:stretch}html[data-admin="1"] main .page-head .head-actions,html[data-admin="1"] main .page-head>div:last-child:not(:first-child){justify-content:flex-start}}

/* 3 - buttons: primary (solid), secondary (outline), tertiary (text: .ghost / .link), danger (outline red). Same height and radius everywhere. */
html[data-admin="1"] main :is(.btn,button.btn,a.btn):not(.hd-btn):not(.small):not(.hero .btn):not(.product-actions .btn):not(.home-product-actions .btn):not(.mk-ptbl .btn){min-height:40px;border-radius:10px;padding:8px 16px;font-weight:700;font-size:14px;line-height:1.2;display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);border-width:1px;border-style:solid}
html[data-admin="1"] main :is(.btn.small,button.btn.small,a.btn.small):not(.hd-btn):not(.mk-ptbl .btn){min-height:30px;border-radius:8px;padding:4px 10px;font-size:12.5px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:6px;border-width:1px;border-style:solid}
html[data-theme][data-theme][data-theme][data-admin="1"] main :is(.btn.secondary,.btn.small.secondary):not(.hd-btn):not(.hero .btn){background:transparent!important;color:var(--primary)!important;border-color:var(--primary)!important}
html[data-theme][data-theme][data-theme][data-admin="1"] main :is(.btn.secondary,.btn.small.secondary):not(.hd-btn):not(.hero .btn):hover{background:color-mix(in srgb,var(--primary) 10%,transparent)!important}
html[data-theme][data-theme][data-theme][data-admin="1"] main :is(.btn.ghost,.btn.link,.btn.tertiary):not(.hd-btn):not(.hero .btn){background:transparent!important;color:var(--primary)!important;border-color:transparent!important}
html[data-theme][data-theme][data-theme][data-admin="1"] main :is(.btn.ghost,.btn.link,.btn.tertiary):not(.hd-btn):not(.hero .btn):hover{background:color-mix(in srgb,var(--primary) 10%,transparent)!important}
html[data-theme][data-theme][data-theme][data-admin="1"] main :is(.btn.danger,.btn.small.danger,button.danger):not(.hd-btn){background:transparent!important;color:var(--st-err)!important;border-color:color-mix(in srgb,var(--st-err) 55%,transparent)!important}
html[data-theme][data-theme][data-theme][data-admin="1"] main :is(.btn.danger,.btn.small.danger,button.danger):not(.hd-btn):hover{background:color-mix(in srgb,var(--st-err) 12%,transparent)!important;border-color:var(--st-err)!important}
html[data-theme][data-theme][data-theme][data-admin="1"] main :is(.btn:disabled,.btn.disabled,.btn[aria-disabled=true]){opacity:.55;cursor:not-allowed}
html[data-admin="1"] main :is(.btn-row,.form-actions){gap:var(--sp-2)}
html[data-density=compact][data-admin="1"] main :is(.btn,button.btn,a.btn):not(.small):not(.hd-btn):not(.hero .btn):not(.product-actions .btn){min-height:32px;padding:5px 12px;font-size:13px}
html[data-density=compact][data-admin="1"] main :is(.btn.small):not(.hd-btn){min-height:26px;padding:2px 8px;font-size:12px}

html[data-theme][data-theme][data-theme][data-admin="1"] main :is(.btn,button.btn,a.btn):not(.secondary):not(.ghost):not(.ghost-dark):not(.danger):not(.link):not(.tertiary):not(.hd-btn):not(.hero .btn){color:var(--on-primary,#fff)!important}

/* 4 - status chips: three colours (ok / warn / error) + neutral. Tinted from the colour itself so they work on every theme, light or dark. */
.status,.status-pill,.kyc-pill,.mk-chip,.badge{display:inline-flex;align-items:center;gap:var(--sp-1);padding:2px 10px;border-radius:999px;font-size:12px;font-weight:700;line-height:1.5;border:1px solid transparent;white-space:nowrap}
html[data-theme][data-theme][data-theme][data-admin="1"] :is(.status,.status-pill,.kyc-pill,.mk-chip,.badge):is(.active,.approved,.paid,.delivered,.completed,.ok,.success,.accepted,.refunded,.live,.mk-chip-ok){background:color-mix(in srgb,var(--st-ok) 14%,var(--surface))!important;color:var(--st-ok)!important;border-color:color-mix(in srgb,var(--st-ok) 30%,transparent)!important}
html[data-theme][data-theme][data-theme][data-admin="1"] :is(.status,.status-pill,.kyc-pill,.mk-chip,.badge):is(.pending,.warn,.warning,.processing,.review,.draft,.partial,.shipped,.mk-chip-warn){background:color-mix(in srgb,var(--st-warn) 14%,var(--surface))!important;color:var(--st-warn)!important;border-color:color-mix(in srgb,var(--st-warn) 30%,transparent)!important}
html[data-theme][data-theme][data-theme][data-admin="1"] :is(.status,.status-pill,.kyc-pill,.mk-chip,.badge):is(.rejected,.cancelled,.canceled,.failed,.error,.danger,.expired,.blocked,.suspended,.mk-chip-err){background:color-mix(in srgb,var(--st-err) 14%,var(--surface))!important;color:var(--st-err)!important;border-color:color-mix(in srgb,var(--st-err) 30%,transparent)!important}
html[data-theme][data-theme][data-theme][data-admin="1"] :is(.status,.status-pill,.kyc-pill,.mk-chip):is(.disabled,.inactive,.neutral,.hidden){background:var(--surface-2,rgba(127,127,127,.12))!important;color:var(--muted)!important;border-color:var(--border)!important}

/* 5 - focus: one visible ring everywhere (keyboard); inputs get a border + soft ring on focus */
:where(a,button,[role=button],summary,input,select,textarea,[tabindex]):focus-visible{outline:var(--focus-ring) solid color-mix(in srgb,var(--primary) 45%,transparent);outline-offset:2px;border-radius:inherit}
main :is(input:not([type=checkbox]):not([type=radio]),select,textarea):focus{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 25%,transparent);outline:0}
@media(forced-colors:active){:where(a,button,input,select,textarea):focus-visible{outline:3px solid Highlight}}

/* 6 - rhythm: one spacing scale for cards, grids, tables */
html[data-admin="1"] main .form-card,html[data-admin="1"] main .table-card,main .admin-panel{border-radius:14px}
html[data-admin="1"] main .form-grid{gap:var(--sp-3)}
html[data-admin="1"] main .table-card th{font-size:12.5px;font-weight:700;color:var(--muted);text-align:start}
html[data-admin="1"] main .table-card td{text-align:start}
html[data-admin="1"] main .notice{border-radius:10px;padding:var(--sp-3) var(--sp-4)}

/* 7 - no hover movement or animation on buttons / actions / cards (it made action buttons flicker: the control moves from under the pointer, loses hover, drops back, repeat) */
html[data-theme][data-theme][data-theme] :is(.btn,button,a.btn,input[type=submit],summary,.admin-card,.kpi-link,a.dash-kpi,.mk-acts>*,td>a,td>button,td form,.vendor-card,.product-card,.mk-addr-card,.mk-heart,.mk-xbtn):is(:hover,:active,:focus,:focus-visible){transform:none!important}
html[data-theme][data-theme][data-theme] :is(.btn,button,a.btn,input[type=submit],summary,.mk-acts>*,td>a,td>button){transition:none!important;animation:none!important}
html[data-theme][data-theme][data-theme] :is(.btn,a.btn,button.btn):is(:hover,:active){box-shadow:none}

/* 8 - the header logo keeps a real size in every view (expand view used width:auto, which collapsed to nothing for logos without an intrinsic width) */
html body .topbar .brand{flex:0 0 auto;min-width:0}
html body .topbar .brand-logo{flex:0 0 auto;width:auto!important;min-width:110px;height:38px!important;max-width:160px;object-fit:contain}
html[data-density=compact] body .topbar .brand-logo{min-width:0;width:124px!important;height:32px!important}
@media(max-width:640px){html body .topbar .brand-logo{min-width:90px;height:32px!important;max-width:120px}}

/* 9 - hub icons for the categories that had none (07-10) and a fallback for any new one: no more plain coloured squares */
.admin-center{--cmd-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v4M12 16h.01'/%3E%3C/svg%3E")}
.admin-section[data-admin-category="07"]{--cmd-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v18h18M7 15l4-4 3 3 5-6'/%3E%3C/svg%3E")}
.admin-section[data-admin-category="08"]{--cmd-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11v2a1 1 0 001 1h2l5 4V6L6 10H4a1 1 0 00-1 1zM15 9a4 4 0 010 6M18 6a8 8 0 010 12'/%3E%3C/svg%3E")}
.admin-section[data-admin-category="09"]{--cmd-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a14 14 0 010 18M12 3a14 14 0 000 18'/%3E%3C/svg%3E")}
.admin-section[data-admin-category="10"]{--cmd-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h10M18 6h2M4 12h4M12 12h8M4 18h12M20 18h0M14 4v4M8 10v4M16 16v4'/%3E%3C/svg%3E")}

/* 10 - cart: Terms / Return Policy in the order summary: checkbox column + text column, the error under the text */
.mk-sum-legal{margin:12px 0 10px;padding:8px 12px}
.mk-sum-legal .checkout-legal-line{display:grid!important;grid-template-columns:22px minmax(0,1fr);column-gap:10px;row-gap:3px;align-items:start;margin:6px 0;font-size:13px;line-height:1.45}
.mk-sum-legal .checkout-legal-line>input{grid-column:1;grid-row:1;width:18px;height:18px;margin:1px 0 0;justify-self:center}
.mk-sum-legal .checkout-legal-line>*:not(input):not(.mk-field-error){grid-column:2;grid-row:1;min-width:0}
.mk-sum-legal .checkout-legal-line>.mk-field-error{grid-column:2;grid-row:2;font-size:12px;margin:0}
.mk-sum-legal>.mk-field-error{margin:0 0 6px;margin-inline-start:32px;font-size:12px}
.mk-sum-legal .mk-req{margin-inline:0 2px}

/* 11 - admin hub: count circles exactly centred (digits in any script), badge pinned to the card's end, tidy sub-headings */
html[data-theme] .need-badge,html[data-theme] .admin-count{display:inline-flex!important;align-items:center;justify-content:center;box-sizing:border-box;min-width:22px;height:22px;padding:0 7px!important;line-height:1!important;text-align:center;font-variant-numeric:tabular-nums;border-radius:999px;vertical-align:middle}
html[data-theme] .admin-count{font-size:.75rem;font-weight:700}
html[data-theme] .admin-center .admin-grid>a.admin-card{position:relative}
html[data-theme] .admin-center .admin-grid>a.admin-card b .need-badge{position:absolute;inset-inline-end:10px;top:50%;margin:0!important;transform:translateY(-50%)}
html[data-theme] .admin-center .admin-grid>a.admin-card.has-need{padding-inline-end:44px!important}
html[data-theme] .admin-center .admin-grid>.mk-subgroup{display:block;grid-column:1/-1;margin:18px 0 4px;padding:0 8px 6px;border-bottom:1px solid var(--border);font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
html[data-theme] .admin-center .admin-grid>.mk-subgroup:first-child{margin-top:0}
html[data-theme] .admin-center .admin-grid>.mk-subgroup[hidden],html[data-theme] .admin-center.mk-sorted .admin-grid>.mk-subgroup{display:none}
html[data-theme][data-theme][data-theme] .need-badge,html[data-theme][data-theme][data-theme] .admin-center a.admin-card .need-badge,html[data-theme][data-theme][data-theme] .admin-center .admin-grid>a.admin-card b .need-badge{color:#fff!important;background:#d92d20!important;font-weight:700}
html[data-theme][data-theme][data-theme] .admin-center .admin-section-head h2 .admin-count{color:var(--primary)!important}

/* V2.9.61 accessibility: one global reduced-motion rule, a 24px minimum target for small controls (WCAG 2.2 AA 2.5.8), and visible keyboard focus inside tables and dialogs. */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
:where(button,.btn,a.btn,input[type=checkbox],input[type=radio],select,summary){min-block-size:24px}
:where(input[type=checkbox],input[type=radio]){min-inline-size:16px}
:where(dialog,table) :where(a,button,input,select,textarea):focus-visible{outline-offset:2px}

/* V2.9.62: help text and the "0 / 240" character counter can never overlap, on any page. Labels that hold help text or a counter stack in plain block flow
   (the storefront editor had this rule only in its own stylesheet, so other admin pages with .sd-form still let the help text collapse behind the counter). */
html[data-theme] main :is(.sd-form,.form-grid)>label:has(>.mk-count),html[data-theme] main :is(.sd-form,.form-grid)>label:has(>small){display:block!important;min-width:0}
html[data-theme] main :is(.sd-form,.form-grid)>label>:is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]),textarea,select){display:block;width:100%;box-sizing:border-box;margin-top:6px;max-width:100%}
html[data-theme] main label>small,html[data-theme] main label>.muted{display:block!important;position:static!important;height:auto!important;margin:4px 0 0!important;line-height:1.4!important;overflow:visible!important}
html[data-theme] main label>.mk-count{display:block!important;position:static!important;height:auto!important;width:auto!important;float:none!important;clear:both;margin:3px 0 0!important;text-align:end;line-height:1.3}
html[data-theme] main .sd-check{display:flex!important;align-items:center;gap:8px}
html[data-theme] main .sd-check>input{width:auto!important;margin:0!important}