﻿/* Megakhan UX layer 2 (V2.9.33). Theme-safe: only the shared tokens (--surface --text --muted --border --primary) are used,
   status colours are mixed into the surface so they stay readable in light and dark themes. Logical properties keep RTL correct. */
:root{--mk-ok:#12b76a;--mk-bad:#f04438;--mk-warn:#f59e0b}
.mk-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mk-grow{flex:1}
.mk-hidden-form{display:none!important}

/* ---- density + expand ---- */
.mk-densbar2{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.mk-xbtn{display:none;border:0;background:transparent;color:var(--primary);font-size:14px;line-height:1;padding:2px 6px;margin-inline-end:4px;cursor:pointer;border-radius:6px}
.mk-xbtn span{display:inline-block;transition:transform .15s}
.mk-xbtn[aria-expanded=true] span{transform:rotate(90deg)}
[dir=rtl] .mk-xbtn span{transform:scaleX(-1)}
[dir=rtl] .mk-xbtn[aria-expanded=true] span{transform:scaleX(-1) rotate(90deg)}
html[data-density=compact] .mk-xbtn{display:inline-block}
html[data-density=compact] table[data-mk-x] tbody tr:not(.is-open)>.mk-xhide{display:none}
html[data-density=compact] table[data-mk-x] tbody tr.is-open{background:color-mix(in srgb,var(--primary) 5%,var(--surface))}
html[data-density=compact] .data-table th,html[data-density=compact] .data-table td,html[data-density=compact] .table-card td,html[data-density=compact] .table-card th{padding:7px 10px}
html[data-density=compact] .cart-item{padding:8px 0;gap:10px}
html[data-density=compact] .cart-item img{width:44px;height:44px}
html[data-density=compact] .product-grid{gap:10px}
html[data-density=compact] .product-card .product-body{padding:10px}
html[data-density=compact] .product-card .product-actions{margin-top:8px}
html[data-density=compact] .mk-wl-bar{padding:6px 10px}

/* ---- tabs and work tiles ---- */
.mk-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px;padding:2px 0}
.mk-tab{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--text);font-weight:750;font-size:13px;cursor:pointer}
.mk-tab:hover{border-color:var(--primary)}
.mk-tab.on{background:var(--primary);border-color:var(--primary);color:#fff}
.mk-tab-n{min-width:22px;text-align:center;padding:1px 7px;border-radius:999px;background:color-mix(in srgb,var(--text) 10%,var(--surface));font-size:12px;font-variant-numeric:tabular-nums}
.mk-tab.on .mk-tab-n{background:rgba(255,255,255,.25)}
.mk-tab-red .mk-tab-n{background:var(--mk-bad);color:#fff}
.mk-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.mk-tiles .mk-tab{border-radius:16px;flex-direction:column;align-items:flex-start;gap:2px;padding:14px 16px;font-size:14px;position:relative}
.mk-tiles .mk-tab small{font-size:20px;line-height:1}
.mk-tiles .mk-tab .mk-tab-n{position:absolute;inset-block-start:12px;inset-inline-end:12px;font-size:18px;padding:2px 10px}
.mk-tiles .mk-tab-l{margin-top:6px}
.table-tools.mk-tabbed select{display:none}

/* ---- side drawer ---- */
.mk-drawer-back{position:fixed;inset:0;background:rgba(15,23,42,.45);opacity:0;transition:opacity .2s;z-index:1900}
.mk-drawer-back.on{opacity:1}
.mk-drawer{position:fixed;inset-block:0;inset-inline-end:0;width:min(440px,100%);background:var(--surface);color:var(--text);border-inline-start:1px solid var(--border);box-shadow:-18px 0 50px rgba(0,0,0,.25);z-index:1901;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .22s}
[dir=rtl] .mk-drawer{transform:translateX(-100%);box-shadow:18px 0 50px rgba(0,0,0,.25)}
.mk-drawer.on{transform:none}
.mk-drawer-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 18px;border-bottom:1px solid var(--border)}
.mk-drawer-x{border:0;background:transparent;color:var(--muted);font-size:26px;line-height:1;cursor:pointer;padding:0 6px}
.mk-drawer-body{padding:18px;overflow:auto;flex:1}
.mk-kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0 0 16px}
.mk-kv dt{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.5px}
.mk-kv dd{margin:0;font-weight:600;overflow-wrap:anywhere}
.mk-timeline{list-style:none;margin:0 0 18px;padding:0;position:relative}
.mk-timeline li{display:grid;grid-template-columns:28px 1fr;grid-template-rows:auto auto;column-gap:10px;padding-bottom:16px;position:relative;color:var(--muted)}
.mk-timeline li:not(:last-child)::before{content:"";position:absolute;inset-inline-start:13px;top:26px;bottom:0;width:2px;background:var(--border)}
.mk-timeline li i{grid-row:1/3;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--border);font-style:normal;font-size:13px;background:var(--surface)}
.mk-timeline li.done{color:var(--text)}
.mk-timeline li.done i{background:var(--mk-ok);border-color:var(--mk-ok);color:#fff}
.mk-timeline li.bad i{background:var(--mk-bad);border-color:var(--mk-bad);color:#fff}
.mk-timeline li small{color:var(--muted)}
.mk-ret-form{border-top:1px solid var(--border);padding-top:14px}
.mk-ret-form h3{margin:0 0 10px;font-size:15px}
.mk-fstack{display:grid!important;gap:10px}
.mk-fstack select,.mk-fstack input{width:100%}

/* ---- payment proofs ---- */
.mk-review-go{margin:0 0 14px}
.mk-proof{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:16px;margin-bottom:16px}
.mk-proof-head{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.mk-proof-head .mk-drawer-x{margin-inline-start:auto}
.mk-proof-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:18px}
.mk-proof-shot{display:grid;gap:10px;justify-items:start;background:color-mix(in srgb,var(--text) 5%,var(--surface));border-radius:14px;padding:10px}
.mk-proof-shot img{width:100%;max-height:70vh;object-fit:contain;border-radius:10px;background:#fff}
.mk-match{padding:10px 12px;border-radius:12px;margin-bottom:12px;background:color-mix(in srgb,var(--muted) 12%,var(--surface));font-weight:700}
.mk-match.ok{background:color-mix(in srgb,var(--mk-ok) 16%,var(--surface));color:var(--text)}
.mk-match.bad{background:color-mix(in srgb,var(--mk-bad) 16%,var(--surface))}
.mk-reason{display:grid;gap:4px;margin:8px 0}
.mk-reason input{padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text)}
.mk-proof-act{display:flex;gap:8px;flex-wrap:wrap}
kbd{font:inherit;font-size:11px;padding:1px 6px;border-radius:6px;border:1px solid currentColor;opacity:.8;margin-inline-start:6px}

/* ---- admin hub ---- */
.mk-needs,.mk-recentused{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:16px 18px;margin:0 0 18px}
.mk-needs{border-color:color-mix(in srgb,var(--mk-bad) 35%,var(--border))}
.mk-needs h2,.mk-recentused h2{margin:0 0 10px;font-size:15px}
.mk-needs-row{display:flex;gap:10px;flex-wrap:wrap}
.mk-todo{display:inline-flex;align-items:center;gap:10px;padding:8px 14px 8px 8px;border:1px solid var(--border);border-radius:999px;background:var(--surface);font-weight:700;font-size:13px}
[dir=rtl] .mk-todo{padding:8px 8px 8px 14px}
.mk-todo:hover{border-color:var(--primary)}
.mk-todo-n{min-width:26px;height:26px;border-radius:999px;display:grid;place-items:center;background:var(--mk-bad);color:#fff;font-size:13px;padding:0 7px}
.mk-todo-n .need-badge{display:none}
.mk-todo-n{line-height:1;text-align:center}
.mk-todo-soft{padding:8px 14px}
.mk-allclear{color:var(--mk-ok);font-weight:800}
.mk-hubsearch{flex:1;min-width:180px;padding:10px 14px;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--text)}
.admin-card[hidden],.admin-section[hidden]{display:none!important}

/* ---- products list: sticky filters + quick pills ---- */
.mk-quick,.mk-quick-replies{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px}
.mk-pill{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--text);font-size:13px;font-weight:700;cursor:pointer}
.mk-pill:hover{border-color:var(--primary)}
.mk-pill.on{background:var(--primary);border-color:var(--primary);color:#fff}
@media(min-width:901px){
 .cat-layout .cat-side{position:sticky;top:92px;align-self:start;max-height:calc(100vh - 110px);overflow:auto;overscroll-behavior:contain}
}
.cat-chips{position:sticky;top:76px;z-index:3;background:var(--bg);padding:6px 0}

/* ---- product details: sticky buy box + swatches ---- */
@media(min-width:901px){
 .product-detail-v2 .detail-copy .detail-actions{position:sticky;bottom:12px;z-index:5;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:12px 14px;box-shadow:0 12px 34px rgba(0,0,0,.12);margin-top:14px}
}
.mk-swatches{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 12px}
.mk-sw{display:grid;gap:2px;text-align:start;min-width:84px;padding:8px 12px;border:2px solid var(--border);border-radius:12px;background:var(--surface);color:var(--text);cursor:pointer;font-weight:700}
.mk-sw:hover{border-color:color-mix(in srgb,var(--primary) 50%,var(--border))}
.mk-sw.on{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 20%,transparent)}
.mk-sw-p{color:var(--muted);font-weight:600}
.mk-sw.oos{opacity:.6;border-style:dashed}
.mk-sw-x{color:var(--mk-bad);font-weight:700}

/* ---- cart ---- */
@media(min-width:901px){.cart-layout .summary{position:sticky;top:92px;align-self:start}}
.mk-grp-sum{margin-inline-start:auto;font-size:13px;color:var(--muted)}
.mk-grp-sum b{color:var(--text)}
.cart-vendor-head{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.mk-later{margin-top:6px}

/* ---- wishlist ---- */
.mk-wl-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:10px 14px;margin-bottom:14px}
.mk-selall,.mk-sortwl{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700}
.mk-sortwl select{padding:6px 10px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text)}
.mk-wl-tags{position:absolute;inset-inline-start:8px;bottom:8px;display:flex;gap:6px;flex-wrap:wrap;z-index:3}
.mk-tag{padding:4px 9px;border-radius:999px;font-size:11px;font-weight:800;color:#fff}
.mk-tag.drop{background:var(--mk-ok)}
.mk-tag.low{background:var(--mk-warn);color:#1f1300}
.mk-sel{position:absolute;inset-inline-end:8px;top:8px;z-index:4;background:var(--surface);border-radius:8px;padding:4px 6px;box-shadow:0 2px 8px rgba(0,0,0,.2)}
.mk-sel input{width:18px;height:18px;margin:0}

/* ---- KYC chips ---- */
.mk-chiprow{display:flex;gap:4px;flex-wrap:wrap}

/* ---- messages two-pane ---- */
@media(min-width:901px){.mk-inbox-fallback{display:none}}
.mk-inbox{display:grid;grid-template-columns:minmax(260px,340px) minmax(0,1fr);gap:14px;min-height:60vh}
.mk-inbox-list{display:flex;flex-direction:column;gap:6px;max-height:75vh;overflow:auto}
.mk-conv{position:relative;display:grid;gap:2px;text-align:start;padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--text);cursor:pointer}
.mk-conv .who,.mk-conv small{color:var(--muted);font-size:12px}
.mk-conv.unread b{font-weight:900}
.mk-conv.on{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 8%,var(--surface))}
.mk-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--mk-bad);position:absolute;inset-inline-end:12px;top:14px}
.mk-inbox-pane{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:10px;min-width:0}
.mk-inbox-empty{margin:auto}
.mk-pane-head b{display:block;font-size:16px}
.mk-ctx{color:var(--muted);font-size:13px}
.mk-inbox-pane .mk-chat{max-height:46vh;overflow:auto}
.mk-chat{overflow:auto}

/* ---- analytics ---- */
.an-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:14px 0}
.an-kpis[hidden]{display:none}
.mk-kpi{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:14px 16px;display:grid;gap:4px}
.mk-kpi span{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.6px}
.mk-kpi b{font-size:24px;font-variant-numeric:tabular-nums}
.mk-d{font-weight:700}
.mk-d.up{color:var(--mk-ok)}.mk-d.down{color:var(--mk-bad)}.mk-d.flat{color:var(--muted);font-weight:600}
.an-period .btn.on,.an-period .mk-custom.on{background:var(--primary);border-color:var(--primary);color:#fff}

/* ---- sign in / create account ---- */
.mk-hint{display:block;font-size:12px;color:var(--muted);min-height:16px}
.mk-hint.ok{color:var(--mk-ok);font-weight:700}.mk-hint.bad{color:var(--mk-bad);font-weight:700}
.auth-form input[aria-invalid=true]:not(:placeholder-shown){border-color:var(--mk-bad)}
.mk-rules{list-style:none;margin:2px 0 6px;padding:0;display:grid;gap:3px;font-size:12px;color:var(--muted)}
.mk-rules li.ok{color:var(--mk-ok);font-weight:700}
.mk-rules i{font-style:normal;display:inline-block;width:16px}

/* ---- support board ---- */
.mk-viewsw{display:flex;gap:8px;margin:0 0 12px}
.mk-viewsw .on{background:var(--primary);border-color:var(--primary);color:#fff}
body[data-mk-board="1"] .table-tools,body[data-mk-board="1"] .table-pagination{display:none}
.mk-board{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(250px,1fr);gap:12px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x proximity}
.mk-board[hidden],.table-card[hidden],.data-table[hidden]{display:none!important}
.mk-col{background:color-mix(in srgb,var(--text) 4%,var(--surface));border:1px solid var(--border);border-radius:16px;padding:10px;scroll-snap-align:start;min-width:0}
.mk-col h3{margin:2px 4px 10px;font-size:13px;display:flex;justify-content:space-between;align-items:center}
.mk-col h3 b{background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:0 9px}
.mk-col-body{display:grid;gap:8px;align-content:start}
.mk-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:10px 12px;display:grid;gap:6px;cursor:pointer}
.mk-card-h,.mk-card-f{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12px}
.mk-card p{margin:0;font-weight:600;font-size:13px;overflow-wrap:anywhere}
.mk-card-no{font-weight:900;color:var(--primary)}
.mk-sla{padding:2px 8px;border-radius:999px;font-weight:800;background:color-mix(in srgb,var(--mk-ok) 18%,var(--surface))}
.mk-sla.soon{background:color-mix(in srgb,var(--mk-warn) 28%,var(--surface))}
.mk-sla.late{background:var(--mk-bad);color:#fff}
.mk-sla.done{background:color-mix(in srgb,var(--muted) 16%,var(--surface));color:var(--muted)}
.mk-prio{padding:2px 8px;border-radius:6px;background:color-mix(in srgb,var(--muted) 14%,var(--surface));font-weight:700}
.mk-prio.p-critical,.mk-prio.p-urgent{background:color-mix(in srgb,var(--mk-bad) 25%,var(--surface))}
.mk-prio.p-high{background:color-mix(in srgb,var(--mk-warn) 28%,var(--surface))}
.mk-owner{color:var(--muted)}
.mk-card-more{display:none;gap:8px;align-items:center;justify-content:space-between}
.mk-card.open .mk-card-more{display:flex;flex-wrap:wrap}
.mk-col-empty{text-align:center;padding:10px}

/* ---- product edit: section index (a strip in the page flow, never a floating window) + save bar ---- */
.mk-sections{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:8px 12px;margin:0 0 14px}
.mk-sections>b{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px}
.mk-sections ul{list-style:none;margin:0;padding:0;display:flex;gap:6px;flex-wrap:wrap}
.product-tabs .tab-btn[data-ok="1"]::before{content:"✓ ";color:var(--mk-ok)}
.mk-sections .mk-prog{flex:1 1 120px}
.mk-sections button{border:1px solid var(--border);background:var(--surface);color:var(--text);padding:6px 12px;border-radius:999px;cursor:pointer;font-weight:700;font-size:13px}
.mk-sections li.on button{background:color-mix(in srgb,var(--primary) 12%,var(--surface));border-color:var(--primary);color:var(--primary)}
.mk-sections li.ok i{color:var(--mk-ok)}
.mk-sections i{font-style:normal;display:inline-block;width:16px;color:var(--muted)}
.mk-prog{flex:1;min-width:90px;height:6px;background:var(--border);border-radius:99px;overflow:hidden}
.mk-prog i{display:block;height:100%;background:var(--mk-ok);width:0;transition:width .2s}
.mk-prog-t{color:var(--muted);font-size:12px}
body.mk-has-savebar .mk-sticky-actions{position:static!important}
.mk-savebar{position:fixed;inset-inline:0;bottom:0;z-index:60;display:flex;align-items:center;gap:10px;padding:10px max(16px,calc((100% - 1180px)/2));background:var(--surface);border-top:1px solid var(--border);box-shadow:0 -8px 24px rgba(0,0,0,.1)}
.mk-savebar .mk-dot{position:static;background:var(--mk-ok)}
.mk-savebar.dirty .mk-dot{background:var(--mk-warn)}
.mk-savebar.dirty .mk-state{font-weight:800}
.mk-has-savebar .site-main{padding-bottom:70px}

/* ---- phones ---- */
@media(max-width:900px){
 .mk-inbox{display:block}
 .mk-proof-grid{grid-template-columns:1fr}
 .an-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
 .mk-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-4px;padding-inline:4px}
 .mk-tabs::-webkit-scrollbar{display:none}
 .mk-tab{flex:0 0 auto}
 .mk-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible}
 .mk-tiles .mk-tab{flex:initial}
 .mk-drawer{inset-block:auto 0;inset-inline:0;width:100%;max-height:88vh;border-radius:18px 18px 0 0;border-inline-start:0;transform:translateY(100%)}
 [dir=rtl] .mk-drawer{transform:translateY(100%)}
 .mk-drawer.on{transform:none}
 .mk-savebar{bottom:calc(58px + env(safe-area-inset-bottom));padding:8px 12px}
 .mk-board{grid-auto-columns:82%}
 .mk-wl-bar .mk-grow{display:none}
 .mk-grp-sum{margin-inline-start:0;flex-basis:100%}
 .mk-densbar2 .btn{flex:1}
 .mk-todo{flex:1 1 100%}
}
html[data-admin="1"] .mk-savebar{bottom:0}
@media print{.mk-savebar,.mk-sections,.mk-densbar2,.mk-drawer,.mk-drawer-back{display:none!important}}

/* ---- dialogs (replace the browser alert / confirm / prompt) ---- */
.mk-dlg-back{position:fixed;inset:0;background:rgba(15,23,42,.5);display:grid;place-items:center;padding:16px;z-index:2100}
.mk-dlg{width:min(440px,100%);background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:18px;padding:20px;box-shadow:0 24px 70px rgba(0,0,0,.35);display:grid;gap:10px}
.mk-dlg-t{font-size:17px}
.mk-dlg-m{margin:0;color:var(--muted);white-space:pre-wrap;overflow-wrap:anywhere}
.mk-dlg-i{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text);font:inherit}
textarea.mk-dlg-i{min-height:90px}
.mk-dlg-a{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;margin-top:6px}
@media(max-width:560px){.mk-dlg-back{place-items:end center}.mk-dlg{border-radius:18px 18px 0 0}.mk-dlg-a .btn{flex:1}}

/* V2_9_34 header: one clear down chevron in every theme and both directions; aligned auth links; Sign out uses the portal font */
html:not(#mkx) body .topbar :is(.nav-group,.nav-subgroup)>summary::after{content:''!important;display:inline-block!important;flex:0 0 auto;width:12px!important;height:12px!important;border:0!important;margin:0!important;margin-inline-start:6px!important;padding:0;font-size:0!important;opacity:1!important;background-color:currentColor!important;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;transform:none!important;transition:transform .15s}
html:not(#mkx) body .topbar :is(.nav-group,.nav-subgroup)[open]>summary::after{transform:rotate(180deg)!important;margin:0!important;margin-inline-start:6px!important}
html:not(#mkx)[dir=rtl] body .topbar .nav-subgroup>summary::after{content:''!important;margin-inline-start:auto!important}
html:not(#mkx) body .topbar .nav-subgroup>summary::after{margin-inline-start:auto!important}
html:not(#mkx) body .topbar :is(.nav-group,.nav-subgroup)>summary{color:inherit}
html:not(#mkx) body .topbar .nav-group>summary:hover::after,html:not(#mkx) body .topbar .nav-group[open]>summary::after{color:var(--primary)}
@media(min-width:901px){
html:not(#mkx) body .topbar .actions,html:not(#mkx) body .topbar #primaryNav{align-items:center}
html:not(#mkx) body .topbar .auth-nav{display:flex;align-items:center}
html:not(#mkx) body .topbar .auth-nav :is(.nav-link,.nav-register,.nav-account){display:inline-flex;align-items:center;min-height:40px;padding-block:0;line-height:1;text-transform:uppercase;font-size:var(--mk-nav-fs,14px);font-family:var(--mk-font,inherit);box-sizing:border-box;margin-block:0}
}
html:not(#mkx) body .topbar .account-dropdown :is(button,.nav-signout,.nav-signout-link){font-family:inherit!important;font-size:14px!important;font-weight:600;text-transform:none;letter-spacing:normal;line-height:1.4}
html:not(#mkx) body .topbar :is(.nav-group,.nav-subgroup)>summary::after{color:inherit!important;filter:none!important}
html:not(#mkx) body .topbar .actions>.nav-group>summary{padding-inline-end:6px!important;gap:0!important}
html:not(#mkx) body .topbar .account-dropdown :is(button,.nav-signout,.nav-signout-link),html:not(#mkx) body .topbar .account-dropdown a{padding:10px 14px!important;width:100%;display:flex;text-align:start;justify-content:flex-start;border:0;background:transparent;color:var(--text)}

/* V2_9_34 product gallery arrows: glyph drawn with CSS so it sits exactly in the middle of the circle (text arrows sit off-centre because of font metrics) */
html:not(#mkx) .gallery-nav{display:grid!important;place-items:center;padding:0!important;line-height:0!important;font-size:0!important;color:var(--text)}
html:not(#mkx) .gallery-nav::before{content:'';width:10px;height:10px;border:0 solid currentColor;border-left-width:2.5px;border-bottom-width:2.5px;box-sizing:border-box}
html:not(#mkx) .gallery-prev::before{transform:translateX(2px) rotate(45deg)}
html:not(#mkx) .gallery-next::before{transform:translateX(-2px) rotate(-135deg)}
html:not(#mkx)[dir=rtl] .gallery-prev{left:12px;right:auto}
html:not(#mkx)[dir=rtl] .gallery-next{right:12px;left:auto}

/* V2_9_34 wishlist: bundles are cards in the same grid as products */
.mk-bundle-card[hidden],[data-wl-item][hidden]{display:none!important}
.mk-tag.bundle{position:absolute;inset-block-start:10px;inset-inline-start:10px;background:var(--primary);z-index:2}
.mk-bundle-card .mk-bundle-items{list-style:none;margin:6px 0;padding:0;display:grid;gap:2px;font-size:13px;color:var(--muted)}
.mk-bundle-card .mk-bundle-items a{color:inherit}
.mk-bundle-card .price-row{flex-wrap:wrap;gap:6px;align-items:center}
/* V2_9_35: the select checkbox sits on the opposite corner so it never covers the badges (Bundle, Best seller, Unavailable) */
[data-wl-item] .product-image .mk-sel{inset-inline-start:auto!important;inset-inline-end:8px!important}
[data-wl-item] .product-image .oos-chip,[data-wl-item] .product-image .mk-tag.bundle{inset-inline-end:auto}

/* V2_9_35 search highlight */
mark.mk-hit{background:#ffe066;color:#111;border-radius:3px;padding:0 2px;box-shadow:0 0 0 1px rgba(0,0,0,.12);font-weight:inherit}
html[data-theme="midnight"] mark.mk-hit,html[data-theme="dark"] mark.mk-hit{background:#f5c518;color:#111}

/* V2_9_35 change preview: description is real storefront HTML (sanitised), not an iframe */
.mk-pv-card .mk-pv-desc{min-height:0;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--text);padding:12px 14px;overflow-wrap:anywhere}
.mk-pv-card .mk-pv-desc img{max-width:100%;height:auto}
.mk-pv-card .mk-pv-desc.is-new{outline:2px solid var(--mk-ok,#16a34a);outline-offset:2px}
.mk-pv-fields{margin-top:16px}
.mk-pv-diff td{vertical-align:top}
.mk-preview-banner{position:sticky;top:0;z-index:50;background:#fff7d6;color:#4a3b00;border-bottom:2px solid #f5c518;padding:10px 16px;text-align:center;font-size:14px}
.mk-preview-banner a{margin-inline-start:10px;font-weight:700}
/* V2_9_36 wishlist: the heart sits top-end, so the select checkbox moves to the bottom-end corner of the image */
html:not(#mkx) [data-wl-item] .product-image .mk-sel{inset-block-start:auto!important;inset-block-end:8px!important;inset-inline-start:auto!important;inset-inline-end:8px!important}

/* V2.9.39 */
html:not(#mkx) .mk-vat-note{display:block;font-size:.72rem;line-height:1.2;margin-top:2px;white-space:nowrap}
html:not(#mkx) button.added,html:not(#mkx) .btn.added{background:#1b7f3b;border-color:#1b7f3b;color:#fff}

.admin-center .admin-grid .mk-subgroup{grid-column:1/-1;flex:0 0 100%;margin:14px 0 2px;padding-bottom:6px;border-bottom:1px solid var(--border);font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}.admin-center .admin-grid .mk-subgroup:first-child{margin-top:0}.admin-center .admin-grid .mk-subgroup[hidden]{display:none}

.admin-card-multi{display:flex;flex-direction:column;gap:6px}.admin-card-multi .admin-card-links{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:8px}.admin-card-multi .admin-card-link{display:inline-block;padding:4px 11px;border:1px solid var(--border);border-radius:999px;font-size:12.5px;font-weight:700;background:color-mix(in srgb,var(--primary) 7%,var(--surface));color:var(--primary)!important;text-decoration:none}.admin-card-multi .admin-card-link:hover{border-color:var(--primary)}.admin-card-multi[hidden]{display:none!important}

/* V2.9.45: grid action buttons centred (admin + seller products) */
.mk-acth,.mk-actc{text-align:center!important}
.mk-acts{display:flex;justify-content:center;align-items:center;gap:6px;flex-wrap:wrap}
.mk-acts>*,.mk-acts form{margin:0!important;display:inline-flex;align-items:center}
.mk-pact.mk-actc>.mk-acts>*{margin-inline-end:0}

/* V2.9.45: interactive images in the change-approval preview */
.mk-pv-stage{position:relative;overflow:hidden;border-radius:12px;margin-top:10px;background:var(--surface-2,#f3f4f8)}.mk-pv-stage .mk-pv-main{margin-top:0;max-height:340px;transition:transform .12s;touch-action:none;user-select:none}
.mk-pv-nav{position:absolute;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:50%;border:1px solid var(--border);background:color-mix(in srgb,var(--surface) 88%,transparent);cursor:pointer;font-size:20px;line-height:1;z-index:2}.mk-pv-prev{inset-inline-start:8px}.mk-pv-next{inset-inline-end:8px}
.mk-pv-tools2{position:absolute;inset-block-end:8px;inset-inline-end:8px;display:flex;gap:4px;z-index:2}
.mk-pv-thumbs .mk-pv-th{padding:0;border:2px solid transparent;border-radius:8px;background:none;cursor:pointer;overflow:hidden}.mk-pv-thumbs .mk-pv-th.on{border-color:var(--primary)}.mk-pv-thumbs .mk-pv-th img{display:block;width:56px;height:56px;object-fit:cover}

html body .mk-ptbl td,html body .mk-ptbl th{vertical-align:middle!important}
html body .mk-ptbl .mk-acts{display:flex!important;justify-content:center!important;align-items:center!important;gap:6px;flex-wrap:wrap;width:100%;margin:0 auto}
html body .mk-ptbl .mk-acts>*,html body .mk-ptbl .mk-acts>form,html body .mk-ptbl .mk-acts .mk-more{margin:0!important;float:none!important;display:inline-flex!important;align-items:center;justify-content:center}
html body .mk-ptbl .mk-acts :is(.btn,summary){min-height:34px;padding-block:0;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box}
html body .mk-ptbl .mk-acts form .btn{margin:0}

/* V2.9.45: plan renewal card */
.mk-renew{margin:0 0 20px;border-inline-start:4px solid var(--primary)}.mk-renew.is-soon{border-inline-start-color:#f79009}.mk-renew.is-lapsed{border-inline-start-color:#d92d20}
.mk-renew-opts{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0 14px}.mk-renew-opt{display:grid;gap:2px;min-width:150px;padding:10px 14px;border:1px solid var(--border);border-radius:12px;cursor:pointer;background:var(--surface)}
.mk-renew-opt:has(input:checked){border-color:var(--primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 25%,transparent)}.mk-renew-opt input{position:absolute;opacity:0;pointer-events:none}.mk-renew-p{font-weight:800}
/* V2.9.45: the new pieces follow compact / expand view */
html[data-density=compact] body .mk-ptbl .mk-acts :is(.btn,summary){min-height:26px}
html[data-density=compact] body .mk-ptbl .mk-acts{gap:4px}
html[data-density=compact] .mk-steps{gap:8px}html[data-density=compact] .mk-steps .summary-section{padding:9px 12px}
html[data-density=compact] .mk-stepnav a{padding:4px 6px;font-size:12px}html[data-density=compact] .mk-stepnav{margin-bottom:8px}
html[data-density=compact] .mk-renew{margin-bottom:12px}html[data-density=compact] .mk-renew-opt{padding:6px 10px;min-width:120px}
html[data-density=compact] .mk-pv-thumbs .mk-pv-th img{width:44px;height:44px}html[data-density=compact] .mk-pv-stage .mk-pv-main{max-height:240px}
html[data-density=compact] .mkfee summary{padding:6px 10px}html[data-density=compact] .mkfee-b{padding:4px 10px 6px}

/* V2.9.46 - Compact view on the storefront (home and listing pages): the button now really switches, so these pieces follow it */
html[data-density=compact][data-admin="0"] .hero h1{font-size:clamp(24px,3.2vw,36px)!important;margin:4px 0 8px!important}
html[data-density=compact][data-admin="0"] .hero :is(p,.hero-copy){font-size:14px!important}
html[data-density=compact][data-admin="0"] .hero .hero-buttons{margin-top:8px}
html[data-density=compact][data-admin="0"] .hero .hero-buttons .btn{min-width:0}
html[data-density=compact][data-admin="0"] .hero :is(.orb,.floating-card){transform:scale(.6)}
html[data-density=compact][data-admin="0"] .sectionhead{margin-bottom:8px}
html[data-density=compact][data-admin="0"] .product-card .product-image{aspect-ratio:4/3}
html[data-density=compact][data-admin="0"] .product-card .product-actions{padding:4px 10px 10px!important}
html[data-density=compact][data-admin="0"] #products .product-card .product-actions{padding:4px 10px 12px!important}

/* V2.9.46 - designed home hero (Views/Shared/_HeroDesign.cshtml). Logical properties: RTL/LTR follow the page. Colours come from the design; text colour is fixed white on the overlay. */
.hd{position:relative;overflow:hidden;color:#fff;isolation:isolate}
.hd-designer{display:flex;align-items:center;padding-block:34px}
.hd-bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:-2;width:100%;height:100%;object-fit:cover}
.hd-ov{position:absolute;inset:0;z-index:-1}
.hd-in{width:100%;display:flex}
.hd-col{display:flex;flex-direction:column;gap:12px;max-width:640px;width:100%}
.hd-l-left .hd-in{justify-content:flex-start}.hd-l-left .hd-col{text-align:start;align-items:flex-start}
.hd-l-right .hd-in{justify-content:flex-end}.hd-l-right .hd-col{text-align:end;align-items:flex-end}
.hd-l-center .hd-in{justify-content:center}.hd-l-center .hd-col{text-align:center;align-items:center}
.hd-l-full .hd-col{max-width:none;text-align:center;align-items:center}
.hd-h{margin:0;font-weight:800;letter-spacing:-.02em;line-height:1.1;font-size:clamp(28px,4.4vw,52px)}
.hd-h.hd-s-s{font-size:clamp(22px,3vw,34px)}.hd-h.hd-s-l{font-size:clamp(34px,6vw,68px)}
.hd-t{margin:0;opacity:.94;font-size:clamp(15px,1.6vw,19px);line-height:1.55}
.hd-t.hd-s-s{font-size:14px}.hd-t.hd-s-l{font-size:clamp(17px,2vw,22px)}
.hd-btns{display:flex;flex-wrap:wrap;gap:10px}.hd-l-center .hd-btns,.hd-l-full .hd-btns{justify-content:center}.hd-l-right .hd-btns{justify-content:flex-end}
.hd-btn{min-width:130px;text-align:center}
.hd-btn-primary{background:#fff!important;color:#0f172a!important;border:1px solid #fff!important}
.hd-btn-secondary{background:transparent!important;color:#fff!important;border:1px solid #fff!important}
.hd-btn-ghost{background:rgba(255,255,255,.16)!important;color:#fff!important;border:1px solid transparent!important;backdrop-filter:blur(4px)}
.hd-img img{max-width:100%;height:auto;border-radius:14px;display:block}.hd-img.hd-s-s{max-width:160px}.hd-img.hd-s-m{max-width:320px}.hd-img.hd-s-l{max-width:520px}
.hd-count{display:flex;flex-wrap:wrap;gap:18px}.hd-count b{font-size:22px;display:block}.hd-count small{opacity:.8}
.hd-banner{padding:0}.hd-banner-link{display:block}.hd-media{display:block;width:100%;height:auto;max-height:560px;object-fit:cover}
.hd-html{padding:0;background:transparent}.hd-frame{display:block;width:100%;border:0}
.hd-anim-fade .hd-it,.hd-anim-fade.hd-banner .hd-media{animation:hdFade .7s both;animation-delay:calc(var(--hd-i,0)*.12s)}
.hd-anim-zoom .hd-it{animation:hdZoom .7s both;animation-delay:calc(var(--hd-i,0)*.12s)}
.hd-anim-slide .hd-it{animation:hdSlide .7s both;animation-delay:calc(var(--hd-i,0)*.12s)}
.hd-anim-zoom.hd-banner .hd-media{animation:hdZoom .8s both}.hd-anim-slide.hd-banner .hd-media{animation:hdSlide .8s both}
@keyframes hdFade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes hdZoom{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
@keyframes hdSlide{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}
[dir=rtl] .hd-anim-slide .hd-it,[dir=rtl] .hd-anim-slide.hd-banner .hd-media{--rt:1}
@media(prefers-reduced-motion:reduce){.hd *{animation:none!important}}
@media(max-width:760px){.hd-no-m{display:none!important}.hd-designer{padding-block:22px}.hd-col{max-width:none}.hd-btn{min-width:0;flex:1 1 140px}}
@media(min-width:761px){.hd-no-d{display:none!important}}
html[data-density=compact] .hd-designer{padding-block:16px}

/* V2.9.46 - designed hero: colours must win over the theme's global h1/p/.btn colours */
html[data-theme] .hd :is(.hd-h,.hd-t,.hd-count,.hd-count b,.hd-count small){color:#fff}
html[data-theme][data-theme] .hd a.btn.hd-btn.hd-btn-primary{background:#fff!important;color:#0f172a!important;border-color:#fff!important}
html[data-theme][data-theme] .hd a.btn.hd-btn.hd-btn-secondary{background:transparent!important;color:#fff!important;border-color:#fff!important}
html[data-theme][data-theme] .hd a.btn.hd-btn.hd-btn-ghost{background:rgba(255,255,255,.16)!important;color:#fff!important;border-color:transparent!important}
