/* ========================================================================== 
   SRK Express BD — Premium Friendly UI Layer
   Purpose: visual/UX enhancement only. No business/payment/order logic here.
   Loaded after assets/style.css so existing page-specific features are preserved.
   ========================================================================== */

:root{
  --srk-p-bg:#070b14;
  --srk-p-bg-2:#0a1120;
  --srk-p-surface:rgba(14,22,38,.88);
  --srk-p-surface-solid:#0f192a;
  --srk-p-surface-2:#142239;
  --srk-p-surface-3:#1a2b46;
  --srk-p-border:rgba(148,163,184,.16);
  --srk-p-border-strong:rgba(148,163,184,.26);
  --srk-p-text:#f7f9fd;
  --srk-p-muted:#9ba8bb;
  --srk-p-dim:#6f7d91;
  --srk-p-brand:#22d3ee;
  --srk-p-brand-2:#f59e0b;
  --srk-p-brand-soft:rgba(34,211,238,.12);
  --srk-p-gold:#f6c761;
  --srk-p-good:#34d399;
  --srk-p-warn:#fbbf24;
  --srk-p-bad:#fb7185;
  --srk-p-info:#60a5fa;
  --srk-p-radius-xs:10px;
  --srk-p-radius-sm:13px;
  --srk-p-radius:17px;
  --srk-p-radius-lg:24px;
  --srk-p-shadow-sm:0 8px 24px rgba(0,0,0,.18);
  --srk-p-shadow:0 18px 55px rgba(0,0,0,.28);
  --srk-p-shadow-focus:0 0 0 4px rgba(34,211,238,.12);
  --srk-p-control-h:46px;
  --srk-p-content:1680px;
  color-scheme:dark;
}

body.light-theme{
  --srk-p-bg:#f4f7fb;
  --srk-p-bg-2:#eef3f8;
  --srk-p-surface:rgba(255,255,255,.91);
  --srk-p-surface-solid:#ffffff;
  --srk-p-surface-2:#f8fafc;
  --srk-p-surface-3:#edf3f8;
  --srk-p-border:rgba(15,23,42,.10);
  --srk-p-border-strong:rgba(15,23,42,.18);
  --srk-p-text:#132033;
  --srk-p-muted:#5f6f84;
  --srk-p-dim:#8794a5;
  --srk-p-brand:#0891b2;
  --srk-p-brand-2:#d97706;
  --srk-p-brand-soft:rgba(8,145,178,.09);
  --srk-p-gold:#b7791f;
  --srk-p-good:#059669;
  --srk-p-warn:#b45309;
  --srk-p-bad:#e11d48;
  --srk-p-info:#2563eb;
  --srk-p-shadow-sm:0 8px 24px rgba(15,23,42,.07);
  --srk-p-shadow:0 20px 50px rgba(15,23,42,.09);
  --srk-p-shadow-focus:0 0 0 4px rgba(8,145,178,.10);
  color-scheme:light;
}

html{scroll-behavior:smooth;background:var(--srk-p-bg)}
body{
  min-width:0!important;
  background:
    radial-gradient(900px 520px at 6% -10%,rgba(34,211,238,.10),transparent 62%),
    radial-gradient(900px 520px at 94% 0%,rgba(245,158,11,.08),transparent 60%),
    linear-gradient(180deg,var(--srk-p-bg),var(--srk-p-bg-2) 60%,var(--srk-p-bg))!important;
  color:var(--srk-p-text);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.light-theme{
  background:
    radial-gradient(900px 520px at 6% -10%,rgba(8,145,178,.08),transparent 62%),
    radial-gradient(900px 520px at 94% 0%,rgba(217,119,6,.06),transparent 60%),
    linear-gradient(180deg,var(--srk-p-bg),var(--srk-p-bg-2) 60%,var(--srk-p-bg))!important;
}

::selection{background:rgba(34,211,238,.28);color:var(--srk-p-text)}
:focus-visible{outline:2px solid var(--srk-p-brand)!important;outline-offset:3px!important}

/* Better global rhythm */
main{padding-top:clamp(18px,2vw,30px)!important;padding-bottom:110px!important}
.wrap{max-width:var(--srk-p-content)}
h1,h2,h3,h4{color:var(--srk-p-text);text-wrap:balance}
h1{line-height:1.15!important}
h2,h3{line-height:1.25!important}
p,.sub,.hint,.muted{line-height:1.65}
hr,.hr{border:0!important;height:1px;background:linear-gradient(90deg,transparent,var(--srk-p-border-strong),transparent)!important}

/* ========================================================================== 
   Header / navigation
   ========================================================================== */
.topbar{
  background:color-mix(in srgb,var(--srk-p-bg) 82%,transparent)!important;
  border-bottom:1px solid var(--srk-p-border)!important;
  box-shadow:0 8px 30px rgba(0,0,0,.12)!important;
  backdrop-filter:blur(20px) saturate(150%)!important;
  -webkit-backdrop-filter:blur(20px) saturate(150%)!important;
}
body.light-theme .topbar{box-shadow:0 8px 28px rgba(15,23,42,.06)!important}
.topbar-main,.topbar-in{min-height:68px!important}
.navrail{
  background:color-mix(in srgb,var(--srk-p-surface-solid) 80%,transparent)!important;
  border-bottom:1px solid var(--srk-p-border)!important;
  backdrop-filter:blur(16px)!important;
}
.navrail-in{gap:7px!important;padding-block:9px!important}
.navlink{
  min-height:38px;display:inline-flex!important;align-items:center!important;
  color:var(--srk-p-muted)!important;border-radius:12px!important;
  transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease!important;
}
.navlink:hover{color:var(--srk-p-text)!important;background:var(--srk-p-surface-2)!important;border-color:var(--srk-p-border)!important;transform:translateY(-1px)}
.navlink.on{color:var(--srk-p-brand)!important;background:var(--srk-p-brand-soft)!important;border-color:color-mix(in srgb,var(--srk-p-brand) 32%,transparent)!important;box-shadow:none!important}
.top-search{background:var(--srk-p-surface)!important;border-color:var(--srk-p-border)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.035)}
.top-search:focus-within{border-color:var(--srk-p-brand)!important;box-shadow:var(--srk-p-shadow-focus)!important}

/* ========================================================================== 
   Universal surfaces / cards / panels
   ========================================================================== */
.card,.panel,.stat,.status-card,.sc-card,.sccard,.mk-card,.cpn-card,.co-card,
.reg-card,.srk-login-card,.srk-buy-card,.srk-product-options-panel,.srk-product-tabs,
.srk-product-hero,.srk-tab-panel,.srk-policy-page,.api-sec,.phys-box,.srk-fm,
[class*="-card"]:not(.srk-home-image-card):not(.pcard):not(.ctile):not(.shop-fan-item){
  border-color:var(--srk-p-border)!important;
}
.card,.panel,.stat,.status-card,.sc-card,.sccard,.mk-card,.cpn-card,.co-card,
.reg-card,.srk-login-card,.api-sec,.phys-box{
  background:linear-gradient(180deg,var(--srk-p-surface),color-mix(in srgb,var(--srk-p-surface-solid) 88%,transparent))!important;
  border:1px solid var(--srk-p-border)!important;
  border-radius:var(--srk-p-radius)!important;
  box-shadow:var(--srk-p-shadow-sm)!important;
}
.card,.panel,.sc-card,.sccard,.mk-card,.cpn-card,.co-card{padding:clamp(15px,1.6vw,22px)!important}
.stat{
  min-height:112px;padding:18px!important;display:flex;flex-direction:column;justify-content:center;
  position:relative;overflow:hidden;
}
.stat::after{content:"";position:absolute;inset:auto -22px -34px auto;width:90px;height:90px;border-radius:50%;background:var(--srk-p-brand-soft);filter:blur(1px);pointer-events:none}
.stat .l,.sc-kpi small{color:var(--srk-p-muted)!important;font-weight:700!important;font-size:.76rem!important;letter-spacing:.02em}
.stat-v,.sc-kpi b{font-weight:900!important;letter-spacing:-.025em;color:var(--srk-p-text)!important}

/* Premium hover only for clickable/content tiles, not form containers */
.pcard,.ctile,.srk-pack,.srk-product-hero,.srk-buy-card{
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease!important;
}
@media (hover:hover){
  .pcard:hover,.ctile:hover,.srk-pack:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--srk-p-brand) 35%,var(--srk-p-border))!important;box-shadow:var(--srk-p-shadow)!important}
}

/* ========================================================================== 
   Buttons — consistent, touch friendly
   ========================================================================== */
.btn,.pbtn,.sc-btn,.mk-btn,.cpn-btn,.srk-signin-btn,.srk-add-btn,.srk-buy-btn,.co-place,
button:not(.hamburger-btn):not(.theme-switch-btn):not(.bnav-orb):not(.drawer-close):not(.pkg-remove):not(.co-modal-close){
  min-height:42px;
  border-radius:12px;
  font-weight:800;
  letter-spacing:-.005em;
  transition:transform .15s ease,box-shadow .18s ease,filter .18s ease,border-color .18s ease,background .18s ease;
}
.btn,.pbtn,.sc-btn,.mk-btn,.cpn-btn{box-shadow:0 6px 16px rgba(0,0,0,.10)}
.btn-gold,.pbtn-gold,.srk-signin-btn,.srk-buy-btn,.co-place,.sc-btn:not(.alt),.mk-btn:not(.alt){
  background:linear-gradient(135deg,#fde68a,#f59e0b 54%,#ea580c)!important;
  color:#10131a!important;border-color:rgba(255,213,103,.55)!important;
  box-shadow:0 9px 24px rgba(245,158,11,.18)!important;
}
.btn-line,.pbtn-line,.btn-quiet,.sc-btn.alt,.mk-btn.alt{
  background:var(--srk-p-surface-2)!important;color:var(--srk-p-text)!important;border:1px solid var(--srk-p-border)!important;
}
@media (hover:hover){
  .btn:hover,.pbtn:hover,.sc-btn:hover,.mk-btn:hover,.cpn-btn:hover,.srk-signin-btn:hover,.srk-add-btn:hover,.srk-buy-btn:hover,.co-place:hover,
  button:not(.hamburger-btn):not(.theme-switch-btn):not(.bnav-orb):not(.drawer-close):not(.pkg-remove):not(.co-modal-close):hover{
    transform:translateY(-1px);filter:brightness(1.035)
  }
}
button:active,.btn:active,.pbtn:active,.sc-btn:active,.mk-btn:active{transform:translateY(0) scale(.99)!important}
button:disabled,.btn.disabled,[aria-disabled="true"]{opacity:.54!important;cursor:not-allowed!important;transform:none!important;filter:none!important}

/* ========================================================================== 
   Forms — friendly, readable, consistent
   ========================================================================== */
main label,.lab,.srk-lab,.field label,.fld label,.sc-grid label,.formgrid label{
  color:var(--srk-p-muted)!important;font-weight:750!important;font-size:.78rem;letter-spacing:.01em;
}
main input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
main select,main textarea,
.drawer input:not([type="checkbox"]):not([type="radio"]),.drawer select,.drawer textarea{
  width:100%;min-height:var(--srk-p-control-h);
  color:var(--srk-p-text)!important;
  background:color-mix(in srgb,var(--srk-p-surface-solid) 92%,transparent)!important;
  border:1px solid var(--srk-p-border)!important;
  border-radius:12px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important;
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease!important;
}
main textarea{min-height:112px;resize:vertical}
main input::placeholder,main textarea::placeholder{color:var(--srk-p-dim)!important;opacity:1}
main input:focus,main select:focus,main textarea:focus{
  outline:none!important;border-color:var(--srk-p-brand)!important;box-shadow:var(--srk-p-shadow-focus)!important;
  background:var(--srk-p-surface-solid)!important;
}
main input[type="file"]{padding:7px!important}
main input[type="file"]::file-selector-button{
  min-height:32px;border:0;border-radius:9px;margin-right:10px;padding:0 12px;font-weight:800;cursor:pointer;
  background:var(--srk-p-surface-3);color:var(--srk-p-text)
}
main input[type="checkbox"],main input[type="radio"]{accent-color:var(--srk-p-brand);width:18px;height:18px}
main select{cursor:pointer}
fieldset{border:1px solid var(--srk-p-border)!important;border-radius:var(--srk-p-radius)!important;padding:16px!important}
legend{color:var(--srk-p-text);font-weight:850;padding-inline:8px}

/* ========================================================================== 
   Alerts / badges / messages
   ========================================================================== */
.alert,.msg,.note,.sc-note,.co-msg,.hint,.tl-msg{
  border-radius:13px!important;
}
.alert,.msg,.sc-note,.co-msg,.note{
  border:1px solid var(--srk-p-border)!important;
  background:var(--srk-p-surface-2)!important;color:var(--srk-p-text)!important;
}
.alert-ok,.ok,.good,.srk-success{border-color:rgba(52,211,153,.30)!important;background:rgba(52,211,153,.08)!important;color:color-mix(in srgb,var(--srk-p-good) 82%,var(--srk-p-text))!important}
.alert-bad,.bad,.red,.danger{border-color:rgba(251,113,133,.30)!important;background:rgba(251,113,133,.08)!important;color:color-mix(in srgb,var(--srk-p-bad) 82%,var(--srk-p-text))!important}
.pill,.chip,.tag,.cpn-chip,.srk-delivery-chip,.order-meta-pill,.sc-badge,.state-badge{
  border-radius:999px!important;font-weight:800!important;letter-spacing:.005em
}

/* ========================================================================== 
   Tables — readable + mobile safe
   ========================================================================== */
.tbl-wrap,.srk-table-scroll{width:100%;overflow:auto;border:1px solid var(--srk-p-border);border-radius:14px;background:var(--srk-p-surface);-webkit-overflow-scrolling:touch}
main table{width:100%;border-collapse:separate!important;border-spacing:0!important;color:var(--srk-p-text)}
main table th{
  position:relative;background:var(--srk-p-surface-2)!important;color:var(--srk-p-muted)!important;
  font-size:.72rem!important;text-transform:uppercase;letter-spacing:.055em;font-weight:850!important;
  padding:12px 13px!important;border-bottom:1px solid var(--srk-p-border)!important;white-space:nowrap
}
main table td{padding:12px 13px!important;border-bottom:1px solid var(--srk-p-border)!important;vertical-align:middle}
main table tr:last-child td{border-bottom:0!important}
@media (hover:hover){main table tbody tr:hover td{background:var(--srk-p-brand-soft)!important}}

/* ========================================================================== 
   Empty states / pagination
   ========================================================================== */
.empty,.emptyb,.noresult,.srk-tab-details-empty{
  border:1px dashed var(--srk-p-border-strong)!important;border-radius:var(--srk-p-radius)!important;
  background:color-mix(in srgb,var(--srk-p-surface) 72%,transparent)!important;padding:28px!important;text-align:center
}
.pagination,.pgbtn,.page-meta{border-color:var(--srk-p-border)!important}
.pgbtn,.pagination a,.pagination span{border-radius:10px!important}

/* ========================================================================== 
   Public storefront
   ========================================================================== */
.pcard,.ctile{
  background:linear-gradient(180deg,var(--srk-p-surface),var(--srk-p-surface-solid))!important;
  border:1px solid var(--srk-p-border)!important;border-radius:18px!important;box-shadow:var(--srk-p-shadow-sm)!important;overflow:hidden
}
.pthumb{background:var(--srk-p-surface-2)!important}
.pname,.cnm{color:var(--srk-p-text)!important;font-weight:850!important}
.pprice,.price{color:var(--srk-p-gold)!important;font-weight:900!important}
.cat-head,.co-head,.orders-head{margin-bottom:18px!important}
.cat-search{background:var(--srk-p-surface)!important;border-color:var(--srk-p-border)!important;box-shadow:var(--srk-p-shadow-sm)!important}
.sortsel,.chips{gap:8px!important}

/* Product page */
.srk-product-global-shell{gap:18px!important}
.srk-product-hero{
  background:linear-gradient(135deg,var(--srk-p-surface),var(--srk-p-surface-solid))!important;
  border:1px solid var(--srk-p-border)!important;border-radius:var(--srk-p-radius-lg)!important;box-shadow:var(--srk-p-shadow)!important
}
.srk-product-hero-media{background:var(--srk-p-surface-2)!important;border-radius:18px!important;overflow:hidden}
.srk-product-options-panel,.srk-buy-card,.srk-product-tabs,.srk-tab-panel{
  background:var(--srk-p-surface)!important;border:1px solid var(--srk-p-border)!important;border-radius:var(--srk-p-radius)!important;box-shadow:var(--srk-p-shadow-sm)!important
}
.srk-pack{background:var(--srk-p-surface-2)!important;border-color:var(--srk-p-border)!important;border-radius:13px!important}
.srk-pack.active,.srk-pack.on,.srk-radio-option:has(input:checked){border-color:var(--srk-p-brand)!important;background:var(--srk-p-brand-soft)!important;box-shadow:var(--srk-p-shadow-focus)!important}
.srk-tab-btn{border-radius:10px!important}
.srk-tab-btn.active{background:var(--srk-p-brand-soft)!important;color:var(--srk-p-brand)!important}

/* Checkout */
.co-grid{gap:18px!important}
.co-card,.co-side,.co-pay,.co-ship-card,.co-terms-panel{
  border-color:var(--srk-p-border)!important;background:var(--srk-p-surface)!important;border-radius:var(--srk-p-radius)!important
}
.co-pay{transition:border-color .16s ease,background .16s ease,transform .16s ease}
.co-pay:has(input:checked){border-color:var(--srk-p-brand)!important;background:var(--srk-p-brand-soft)!important}
.co-place{min-height:50px!important;font-size:.96rem!important}
.co-safe{color:var(--srk-p-good)!important}

/* Auth */
.srk-login-wrap,.reg-wrap,.fp-wrap,.srk-rp-wrap,.srk-adm-wrap{
  margin-top:clamp(8px,3vw,34px)!important
}
.srk-login-card,.reg-card{
  border-radius:24px!important;box-shadow:var(--srk-p-shadow)!important;padding:clamp(20px,3vw,34px)!important
}
.srk-social-btn,.srk-auth-btn{border-color:var(--srk-p-border)!important;background:var(--srk-p-surface-2)!important;border-radius:12px!important}

/* Profile / wallet / orders */
.srk-phero,.srk-pidentity,.status-card,.wh-order,.keybox,.secret-keybox{
  border-color:var(--srk-p-border)!important;background:var(--srk-p-surface)!important;border-radius:var(--srk-p-radius)!important;box-shadow:var(--srk-p-shadow-sm)!important
}
.srk-ptool,.order-tab{border-radius:11px!important}
.srk-ptool:hover,.order-tab:hover{background:var(--srk-p-brand-soft)!important}

/* ========================================================================== 
   Admin UX — dense information, still comfortable
   ========================================================================== */
body[class*="srk-admin-"]{
  --srk-p-content:1760px;
  background:
    radial-gradient(1000px 620px at 0% -12%,rgba(34,211,238,.08),transparent 64%),
    radial-gradient(950px 620px at 100% -8%,rgba(245,158,11,.07),transparent 64%),
    linear-gradient(180deg,var(--srk-p-bg),var(--srk-p-bg-2))!important;
}
body[class*="srk-admin-"] main{padding-top:22px!important}
body[class*="srk-admin-"] main>.wrap,
body[class*="srk-admin-"] main>div.wrap{
  width:calc(100vw - 34px)!important;max-width:1760px!important;padding-left:0!important;padding-right:0!important
}
body[class*="srk-admin-"] .eyebrow{
  color:var(--srk-p-brand)!important;letter-spacing:.13em!important;font-size:.67rem!important;text-shadow:none!important
}
body[class*="srk-admin-"] h1{font-size:clamp(1.45rem,2vw,2rem)!important;margin-bottom:.35rem!important}
body[class*="srk-admin-"] h2{font-size:1.08rem!important}
body[class*="srk-admin-"] .grid{gap:14px!important}
body[class*="srk-admin-"] .panel,
body[class*="srk-admin-"] .card,
body[class*="srk-admin-"] .pcard,
body[class*="srk-admin-"] .mk-card,
body[class*="srk-admin-"] .sccard{
  border-color:var(--srk-p-border)!important;box-shadow:var(--srk-p-shadow-sm)!important
}
body[class*="srk-admin-"] details{
  border-radius:14px
}
body[class*="srk-admin-"] details>summary{
  cursor:pointer;min-height:44px;display:flex;align-items:center
}
body[class*="srk-admin-"] .savebar{
  position:sticky!important;bottom:88px!important;z-index:25;background:color-mix(in srgb,var(--srk-p-surface-solid) 90%,transparent)!important;
  border:1px solid var(--srk-p-border)!important;box-shadow:0 12px 35px rgba(0,0,0,.25)!important;backdrop-filter:blur(16px)!important;border-radius:14px!important
}
body[class*="srk-admin-"] .control-row,
body[class*="srk-admin-"] .order-search-row,
body[class*="srk-admin-"] .order-filter-row{gap:10px!important}
body[class*="srk-admin-"] .order-tabs,
body[class*="srk-admin-"] .mk-tabs,
body[class*="srk-admin-"] .tabs{
  gap:7px!important;overflow-x:auto!important;scrollbar-width:none
}
body[class*="srk-admin-"] .order-tabs::-webkit-scrollbar,
body[class*="srk-admin-"] .mk-tabs::-webkit-scrollbar,
body[class*="srk-admin-"] .tabs::-webkit-scrollbar{display:none}

/* Admin dashboard summary */
body.srk-admin-index .stat{min-height:122px}
body.srk-admin-index .panel{height:100%}

/* Marketing/Growth admin */
.mk,.gw,.growth-command-center,.sc,.pc,.ss,.srk-tools-wrap{
  max-width:var(--srk-p-content)!important
}
.mk-head,.gh,.sc-hero,.pc-hero{
  background:linear-gradient(135deg,var(--srk-p-surface),color-mix(in srgb,var(--srk-p-brand-soft) 60%,var(--srk-p-surface)))!important;
  border:1px solid var(--srk-p-border)!important;border-radius:var(--srk-p-radius-lg)!important;box-shadow:var(--srk-p-shadow)!important;padding:clamp(18px,2.2vw,28px)!important
}

/* Seller center */
.sc-hero{margin-bottom:16px!important}
.sc-nav{display:flex!important;gap:7px!important;overflow-x:auto!important;scrollbar-width:none;padding-bottom:4px}
.sc-nav::-webkit-scrollbar{display:none}
.sc-nav a{white-space:nowrap!important;border-radius:11px!important}
.sc-kpi{background:var(--srk-p-surface)!important;border:1px solid var(--srk-p-border)!important;border-radius:15px!important;box-shadow:var(--srk-p-shadow-sm)!important}
.sc-row{border-color:var(--srk-p-border)!important}

/* ========================================================================== 
   Bottom dock / drawer
   ========================================================================== */
.bnav{
  background:color-mix(in srgb,var(--srk-p-surface-solid) 94%,transparent)!important;
  border-color:var(--srk-p-border)!important;box-shadow:0 -14px 40px rgba(0,0,0,.22)!important;
  backdrop-filter:blur(18px)!important;-webkit-backdrop-filter:blur(18px)!important
}
.bnav-i{color:var(--srk-p-muted)!important}
.bnav-i.on{color:var(--srk-p-brand)!important}
.bnav-orb{border-color:var(--srk-p-surface-solid)!important;background:linear-gradient(145deg,#67e8f9,#22d3ee 48%,#f59e0b)!important;box-shadow:0 9px 26px rgba(34,211,238,.24)!important}
.drawer{background:var(--srk-p-surface-solid)!important;border-color:var(--srk-p-border)!important}
.drawer-menu li a{border-radius:11px!important}

/* ========================================================================== 
   Support chat visual alignment
   ========================================================================== */
.srk-chat-window,.srk-chat-panel,[class*="support-chat"] .card{
  border-color:var(--srk-p-border)!important;box-shadow:var(--srk-p-shadow)!important
}

/* ========================================================================== 
   Progressive UX helpers injected by premium-ui.js
   ========================================================================== */
.srk-smart-form{scroll-margin-top:100px}
.srk-table-scroll>table{margin:0!important}
.srk-section-spacer{height:4px}
.srk-busy{position:relative;pointer-events:none;opacity:.78}
.srk-busy::after{
  content:"";width:14px;height:14px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;
  margin-left:8px;display:inline-block;vertical-align:-2px;animation:srkPremiumSpin .65s linear infinite
}
@keyframes srkPremiumSpin{to{transform:rotate(360deg)}}
.srk-scroll-shadow{box-shadow:0 10px 30px rgba(0,0,0,.18)!important}

/* ========================================================================== 
   Responsive: phone / tablet / desktop A-Z
   ========================================================================== */
@media (max-width:1023px){
  body{min-width:0!important}
  main{padding-top:14px!important;padding-bottom:104px!important}
  .wrap,main>.wrap,main>div.wrap{
    width:100%!important;max-width:100%!important;padding-left:12px!important;padding-right:12px!important
  }
  body[class*="srk-admin-"] main>.wrap,
  body[class*="srk-admin-"] main>div.wrap{width:100%!important;padding-left:11px!important;padding-right:11px!important}
  .grid.g4,.grid.g3,.grid2,.grid3,.g3,.g4,.sc-kpis,.kpis,.mk-grid,.preview-grid{gap:11px!important}
  main table th,main table td{padding:10px 11px!important}
}

@media (max-width:760px){
  :root{--srk-p-control-h:46px;--srk-p-radius:15px}
  html{font-size:16px!important}
  main input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),main select,main textarea{font-size:16px!important}
  .grid.g4,.grid.g3,.grid2,.grid3,.g3,.g4,.sc-kpis,.kpis,.mk-grid,.preview-grid,.sc-grid,.formgrid{grid-template-columns:1fr!important}
  .between{align-items:flex-start!important}
  .between>.row,.orders-head-actions{width:100%;flex-wrap:wrap}
  .between>.row .btn,.orders-head-actions .btn{flex:1 1 140px}
  .card,.panel,.sc-card,.sccard,.mk-card,.cpn-card,.co-card{padding:14px!important}
  .stat{min-height:96px!important;padding:14px!important}
  .srk-product-hero,.mk-head,.gh,.sc-hero,.pc-hero{border-radius:18px!important}
  .srk-product-hero-media{border-radius:14px!important}
  .srk-pack-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .co-grid{grid-template-columns:1fr!important}
  body[class*="srk-admin-"] .savebar{bottom:82px!important;margin-inline:0!important}
  body[class*="srk-admin-"] h1{font-size:1.42rem!important}
  .srk-table-scroll,.tbl-wrap{border-radius:12px}
}

@media (max-width:430px){
  main{padding-bottom:98px!important}
  .wrap,main>.wrap,main>div.wrap{padding-left:10px!important;padding-right:10px!important}
  .srk-pack-grid{grid-template-columns:1fr!important}
  .btn,.pbtn,.sc-btn,.mk-btn,.cpn-btn{min-height:44px}
  .stat{min-height:90px!important}
}

@media (min-width:1024px){
  body{min-width:0!important}
  .wrap,.topbar>.wrap,.navrail>.wrap{width:calc(100vw - 48px)!important;max-width:var(--srk-p-content)!important}
  body[class*="srk-admin-"] .wrap,
  body[class*="srk-admin-"] .topbar>.wrap,
  body[class*="srk-admin-"] .navrail>.wrap{max-width:1760px!important}
  .grid.g4{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  .grid.g3{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}

@media (min-width:1500px){
  .wrap,.topbar>.wrap,.navrail>.wrap{width:calc(100vw - 72px)!important}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

@media print{
  .topbar,.navrail,.orb-dock,.drawer,.srk-site-footer,.no-print{display:none!important}
  body,main,.card,.panel{background:#fff!important;color:#111!important;box-shadow:none!important}
  main{padding:0!important}
}