/* ============================================================
   OnlineKurtis UI Kit - ok-kit.css
   Single global stylesheet. Rules:
   1. Har class "ok-" se shuru hoti ha (legacy/3rd-party se kabhi clash nahi)
   2. Color/size SIRF tokens (:root) se - components me hex/px hardcode nahi
   3. Naya MOBILE rule HAMESHA file ke aakhri block me jayega (order wins)
   4. Naya component pehle ui-kit.html me, phir kisi page per
   ============================================================ */

/* ---------- 1. FONTS (self-hosted: Jost = headings/brand, DM Sans = body/UI) ---------- */
@font-face{font-family:'Jost';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/jost-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Jost';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/jost-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Jost';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/jost-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/dm-sans-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/dm-sans-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/dm-sans-latin-600-normal.woff2') format('woff2')}

/* ---------- 2. TOKENS ---------- */
:root{
  /* brand (logo se extracted) */
  --ok-ink:#262626;          /* headings, body */
  --ok-green:#81B602;        /* accent ONLY - highlights, active, wordmark */
  --ok-green-dark:#4E7300;   /* CTA/buttons/links - white text passes contrast */
  --ok-green-deep:#3E5C00;   /* hover on CTA */
  --ok-green-tint:#F3F8E7;   /* pale green backgrounds */
  --ok-grey:#666666;         /* secondary text, labels */
  --ok-grey-light:#9CA3AF;   /* placeholders, disabled text */
  --ok-border:#E3E6E0;
  --ok-bg:#FFFFFF;
  --ok-bg-soft:#F7F8F5;      /* off-white sections */
  /* status */
  --ok-amber:#B45309; --ok-amber-bg:#FDF3E7;
  --ok-red:#B91C1C;   --ok-red-bg:#FBEAEA;
  --ok-blue:#1D4ED8;  --ok-blue-bg:#EAF0FD;
  --ok-ok-bg:#EAF3D8; /* success bg (green family) */
  /* type scale */
  --ok-fs-xs:12px; --ok-fs-sm:14px; --ok-fs-md:16px; --ok-fs-lg:18px;
  --ok-fs-xl:22px; --ok-fs-2xl:28px; --ok-fs-3xl:34px;
  /* spacing scale */
  --ok-s1:4px; --ok-s2:8px; --ok-s3:12px; --ok-s4:16px;
  --ok-s5:24px; --ok-s6:32px; --ok-s7:48px;
  /* shape */
  --ok-r-sm:6px; --ok-r-md:10px; --ok-r-lg:14px; --ok-r-pill:999px;
  --ok-shadow-1:0 1px 3px rgba(38,38,38,.08);
  --ok-shadow-2:0 6px 24px rgba(38,38,38,.14);
  --ok-font:'DM Sans',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --ok-font-head:'Jost',var(--ok-font);
  --ok-header-h:60px;
  --ok-tabbar-h:58px;
}

/* ---------- 3. BASE ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.ok-body{margin:0;background:var(--ok-bg);color:var(--ok-ink);
  font:400 var(--ok-fs-md)/1.55 var(--ok-font)}
.ok-body img{max-width:100%;display:block}
.ok-body a{color:var(--ok-green-dark);text-decoration:none}
.ok-body a:hover{text-decoration:underline}
.ok-body :focus-visible{outline:2px solid var(--ok-green-dark);outline-offset:2px;border-radius:2px}
.ok-h1,.ok-h2,.ok-h3,.ok-h4{margin:0 0 var(--ok-s3);font-family:var(--ok-font-head);font-weight:600;line-height:1.25;color:var(--ok-ink)}
.ok-h1{font-size:var(--ok-fs-3xl)}
.ok-h2{font-size:var(--ok-fs-2xl)}
.ok-h3{font-size:var(--ok-fs-xl)}
.ok-h4{font-size:var(--ok-fs-lg)}
.ok-sub{margin:0 0 var(--ok-s4);color:var(--ok-grey);font-size:var(--ok-fs-md)}
.ok-small{font-size:var(--ok-fs-sm);color:var(--ok-grey)}
.ok-eyebrow{display:block;font-size:var(--ok-fs-xs);font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ok-green-dark);margin-bottom:var(--ok-s1)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ---------- 4. LAYOUT ---------- */
.ok-container{max-width:1280px;margin:0 auto;padding:0 var(--ok-s4)}
.ok-section{padding:var(--ok-s6) 0}
.ok-section--soft{background:var(--ok-bg-soft)}
/* 12-col grid: .ok-cols + .ok-c-N (desktop) ; mobile me sab full-width, tablet pairing niche mobile block me */
.ok-cols{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--ok-s4)}
.ok-c-2{grid-column:span 2}.ok-c-3{grid-column:span 3}.ok-c-4{grid-column:span 4}
.ok-c-5{grid-column:span 5}.ok-c-6{grid-column:span 6}.ok-c-7{grid-column:span 7}
.ok-c-8{grid-column:span 8}.ok-c-9{grid-column:span 9}
.ok-c-12{grid-column:span 12}
/* product grid: auto-fill, card min 200px */
.ok-pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:var(--ok-s4)}
.ok-cols>*,.ok-pgrid>*,.ok-inrow>*,.ok-field>*{min-width:0}

/* ---------- 5. HEADER ---------- */
.ok-header{position:sticky;top:0;z-index:60;background:var(--ok-bg);
  border-bottom:1px solid var(--ok-border);height:var(--ok-header-h)}
.ok-header__in{display:flex;align-items:center;gap:var(--ok-s4);height:100%}
.ok-logo{display:flex;align-items:baseline;font-family:var(--ok-font-head);font-size:var(--ok-fs-xl);font-weight:600;
  white-space:nowrap;text-decoration:none!important}
.ok-logo b{color:var(--ok-ink);font-weight:600}
.ok-logo span{color:var(--ok-green);font-weight:600}
.ok-logo img{height:34px;width:auto;display:block}
.ok-header__search{flex:1 1 auto;max-width:520px}
.ok-header__acts{margin-left:auto;display:flex;align-items:center;gap:var(--ok-s2)}
.ok-iconbtn{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border:0;background:none;border-radius:var(--ok-r-md);
  color:var(--ok-ink);cursor:pointer}
.ok-iconbtn:hover{background:var(--ok-bg-soft)}
.ok-iconbtn svg{width:22px;height:22px}
.ok-iconbtn .ok-dot{position:absolute;top:4px;right:4px;min-width:16px;height:16px;padding:0 4px;
  border-radius:var(--ok-r-pill);background:var(--ok-green-dark);color:#fff;
  font-size:11px;font-weight:600;line-height:16px;text-align:center}
.ok-search{display:flex;align-items:center;gap:var(--ok-s2);background:var(--ok-bg-soft);
  border:1px solid var(--ok-border);border-radius:var(--ok-r-pill);padding:0 var(--ok-s4);height:40px}
.ok-search svg{width:18px;height:18px;color:var(--ok-grey);flex:0 0 auto}
.ok-search input{flex:1;border:0;background:none;font:inherit;font-size:var(--ok-fs-sm);
  color:var(--ok-ink);min-width:0}
.ok-search input:focus{outline:none}
/* category strip under header (desktop) */
.ok-catbar{background:var(--ok-bg);border-bottom:1px solid var(--ok-border)}
.ok-catbar__in{display:flex;gap:var(--ok-s5);overflow-x:auto;scrollbar-width:none}
.ok-catbar__in::-webkit-scrollbar{display:none}
.ok-catbar a{padding:var(--ok-s3) 0;font-size:var(--ok-fs-sm);font-weight:500;color:var(--ok-ink);
  white-space:nowrap;border-bottom:2px solid transparent;text-decoration:none!important}
.ok-catbar a:hover,.ok-catbar a.is-active{color:var(--ok-green-dark);border-bottom-color:var(--ok-green)}

/* ---------- 6. MOBILE BOTTOM TAB BAR ---------- */
.ok-tabbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:60;height:var(--ok-tabbar-h);
  background:var(--ok-bg);border-top:1px solid var(--ok-border);
  padding-bottom:env(safe-area-inset-bottom)}
.ok-tabbar__in{display:flex;height:100%}
.ok-tabbar__item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;font:500 11px/1 var(--ok-font);color:var(--ok-grey);text-decoration:none!important;
  background:none;border:0;cursor:pointer;-webkit-appearance:none;appearance:none}
.ok-tabbar__item svg{width:22px;height:22px}
.ok-tabbar__item.is-active{color:var(--ok-green-dark)}
/* body padding jab tabbar visible ho - mobile block me */

/* ---------- 7. FOOTER ---------- */
.ok-footer{background:var(--ok-ink);color:#D6D6D6;margin-top:var(--ok-s7)}
.ok-footer a{color:#D6D6D6;text-decoration:none}
.ok-footer a:hover{color:#fff;text-decoration:underline}
.ok-footer__grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--ok-s5);
  padding:var(--ok-s6) 0}
.ok-footer__h{font-size:var(--ok-fs-sm);font-weight:600;color:#fff;margin:0 0 var(--ok-s3);
  text-transform:uppercase;letter-spacing:.06em}
.ok-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--ok-s2);font-size:var(--ok-fs-sm)}
.ok-footer__bottom{border-top:1px solid rgba(255,255,255,.14);padding:var(--ok-s4) 0;
  display:flex;flex-wrap:wrap;gap:var(--ok-s3);align-items:center;justify-content:space-between;
  font-size:var(--ok-fs-xs);color:var(--ok-grey-light)}
.ok-footer .ok-logo b{color:#fff}

/* ---------- 8. BUTTONS ---------- */
.ok-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--ok-s2);
  border:1px solid transparent;border-radius:var(--ok-r-md);cursor:pointer;
  font:600 var(--ok-fs-sm)/1 var(--ok-font);padding:0 var(--ok-s4);height:42px;
  text-decoration:none!important;white-space:nowrap;transition:background .15s,color .15s,border-color .15s}
.ok-btn svg{width:18px;height:18px}
.ok-btn.ok-btn--primary{background:var(--ok-green-dark);color:#fff}
.ok-btn.ok-btn--primary:hover{background:var(--ok-green-deep)}
.ok-btn.ok-btn--secondary{background:var(--ok-bg);color:var(--ok-green-dark);border-color:var(--ok-green-dark)}
.ok-btn.ok-btn--secondary:hover{background:var(--ok-green-tint)}
.ok-btn.ok-btn--ghost{background:none;color:var(--ok-ink);border-color:var(--ok-border)}
.ok-btn.ok-btn--ghost:hover{background:var(--ok-bg-soft)}
.ok-btn.ok-btn--danger{background:var(--ok-red);color:#fff}
.ok-btn.ok-btn--danger:hover{background:#921818}
.ok-btn--sm{height:34px;padding:0 var(--ok-s3);font-size:var(--ok-fs-xs)}
.ok-btn--lg{height:50px;padding:0 var(--ok-s5);font-size:var(--ok-fs-md)}
.ok-btn--block{display:flex;width:100%}
.ok-btn:disabled,.ok-btn.is-disabled{opacity:.45;cursor:not-allowed;pointer-events:none}
.ok-btn.is-loading{position:relative;color:transparent!important;pointer-events:none}
.ok-btn.is-loading::after{content:'';position:absolute;left:50%;top:50%;margin:-9px 0 0 -9px;width:18px;height:18px;
  border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;
  animation:ok-spin .7s linear infinite}
.ok-btn--secondary.is-loading::after,.ok-btn--ghost.is-loading::after{
  border-color:rgba(78,115,0,.3);border-top-color:var(--ok-green-dark)}
@keyframes ok-spin{to{transform:rotate(360deg)}}

/* ---------- 9. FORMS ---------- */
.ok-field{display:grid;gap:var(--ok-s1);margin-bottom:var(--ok-s4)}
.ok-field>label{font-size:var(--ok-fs-sm);font-weight:500;color:var(--ok-ink)}
.ok-field>small{font-size:var(--ok-fs-xs);color:var(--ok-grey)}
.ok-input,.ok-select,.ok-textarea{width:100%;border:1px solid var(--ok-border);
  border-radius:var(--ok-r-md);background:var(--ok-bg);color:var(--ok-ink);
  font:400 var(--ok-fs-md)/1.4 var(--ok-font);padding:10px var(--ok-s3);min-height:44px}
.ok-textarea{min-height:96px;resize:vertical}
.ok-input::placeholder,.ok-textarea::placeholder{color:var(--ok-grey-light)}
.ok-input:focus,.ok-select:focus,.ok-textarea:focus{outline:none;border-color:var(--ok-green-dark);
  box-shadow:0 0 0 3px var(--ok-green-tint)}
.ok-select{appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:38px}
/* validation states */
.ok-field.is-error .ok-input,.ok-field.is-error .ok-select,.ok-field.is-error .ok-textarea{
  border-color:var(--ok-red);box-shadow:0 0 0 3px var(--ok-red-bg)}
.ok-field.is-error .ok-msg{color:var(--ok-red)}
.ok-field.is-ok .ok-input{border-color:var(--ok-green-dark);box-shadow:0 0 0 3px var(--ok-green-tint)}
.ok-field.is-ok .ok-msg{color:var(--ok-green-dark)}
.ok-msg{font-size:var(--ok-fs-xs);font-weight:500}
/* checkbox / radio */
.ok-check{display:flex;gap:var(--ok-s2);align-items:flex-start;font-size:var(--ok-fs-sm);
  color:var(--ok-ink);cursor:pointer}
.ok-check input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--ok-green-dark);flex:0 0 auto}
/* OTP boxes */
.ok-otp{display:flex;gap:var(--ok-s2)}
.ok-otp input{width:46px;height:52px;text-align:center;border:1px solid var(--ok-border);
  border-radius:var(--ok-r-md);font:600 var(--ok-fs-xl)/1 var(--ok-font);color:var(--ok-ink)}
.ok-otp input:focus{outline:none;border-color:var(--ok-green-dark);box-shadow:0 0 0 3px var(--ok-green-tint)}
/* file upload */
.ok-file{border:1.5px dashed var(--ok-border);border-radius:var(--ok-r-md);
  padding:var(--ok-s5);text-align:center;color:var(--ok-grey);font-size:var(--ok-fs-sm);
  cursor:pointer;transition:border-color .15s,background .15s}
.ok-file:hover,.ok-file.is-drag{border-color:var(--ok-green-dark);background:var(--ok-green-tint)}
.ok-file svg{width:26px;height:26px;margin:0 auto var(--ok-s2);color:var(--ok-green-dark)}
.ok-file input{display:none}
/* input group (pincode + auto city) */
.ok-inrow{display:grid;grid-template-columns:1fr 1fr;gap:var(--ok-s3)}

/* ---------- 10. CARDS ---------- */
.ok-card{background:var(--ok-bg);border:1px solid var(--ok-border);border-radius:var(--ok-r-lg);
  box-shadow:var(--ok-shadow-1)}
.ok-card__head{display:flex;align-items:center;gap:var(--ok-s3);
  padding:var(--ok-s4);border-bottom:1px solid var(--ok-border)}
.ok-card__title{margin:0;font-family:var(--ok-font-head);font-size:var(--ok-fs-lg);font-weight:600}
.ok-card__head .ok-btn,.ok-card__head .ok-chip{margin-left:auto}
.ok-card__body{padding:var(--ok-s4)}
.ok-card__foot{padding:var(--ok-s3) var(--ok-s4);border-top:1px solid var(--ok-border);
  display:flex;gap:var(--ok-s3);align-items:center;justify-content:flex-end}

/* ---------- 11. PRODUCT CARD (signature component) ---------- */
.ok-product{background:var(--ok-bg);border:1px solid var(--ok-border);border-radius:var(--ok-r-lg);
  overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .15s}
.ok-product:hover{box-shadow:var(--ok-shadow-2)}
.ok-product__img{position:relative;aspect-ratio:3/4;background:var(--ok-bg-soft)}
.ok-product__img img{width:100%;height:100%;object-fit:cover}
.ok-product__tag{position:absolute;top:var(--ok-s2);left:var(--ok-s2)}
.ok-product__body{padding:var(--ok-s3);display:grid;gap:var(--ok-s1)}
.ok-product__name{margin:0;font-size:var(--ok-fs-sm);font-weight:500;line-height:1.35;
  color:var(--ok-ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ok-product__sku{font-size:var(--ok-fs-xs);color:var(--ok-grey-light)}
.ok-product__mrp{font-size:var(--ok-fs-sm);color:var(--ok-grey)}
.ok-product__mrp s{color:var(--ok-grey-light)}
/* locked price row */
.ok-price--locked{display:flex;align-items:center;gap:var(--ok-s2);
  background:var(--ok-bg-soft);border:1px dashed var(--ok-border);border-radius:var(--ok-r-sm);
  padding:var(--ok-s2) var(--ok-s3);font-size:var(--ok-fs-xs);font-weight:500;color:var(--ok-grey)}
.ok-price--locked svg{width:14px;height:14px;color:var(--ok-grey);flex:0 0 auto}
/* unlocked price row */
.ok-price--open{display:flex;align-items:baseline;gap:var(--ok-s2)}
.ok-price--open .ok-price__val{font-family:var(--ok-font-head);font-size:var(--ok-fs-lg);font-weight:600;color:var(--ok-green-dark)}
.ok-price--open .ok-price__lbl{font-size:var(--ok-fs-xs);color:var(--ok-grey)}
.ok-product__body .ok-btn{margin-top:var(--ok-s2)}

/* ---------- 12. BADGES / STOCK TAGS / CHIPS ---------- */
.ok-tag{display:inline-flex;align-items:center;gap:5px;border-radius:var(--ok-r-pill);
  font:600 var(--ok-fs-xs)/1 var(--ok-font);padding:5px 10px}
.ok-tag::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.ok-tag--in{background:var(--ok-ok-bg);color:var(--ok-green-dark)}
.ok-tag--low{background:var(--ok-amber-bg);color:var(--ok-amber)}
.ok-tag--out{background:#EFEFEF;color:var(--ok-grey)}
.ok-tag--soon{background:var(--ok-blue-bg);color:var(--ok-blue)}
.ok-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--ok-border);
  border-radius:var(--ok-r-pill);background:var(--ok-bg);padding:6px 12px;
  font:500 var(--ok-fs-xs)/1 var(--ok-font);color:var(--ok-ink);cursor:pointer;text-decoration:none!important}
.ok-chip svg{width:14px;height:14px}
.ok-chip:hover{border-color:var(--ok-green-dark)}
.ok-chip.is-active{background:var(--ok-green-tint);border-color:var(--ok-green-dark);color:var(--ok-green-dark)}
.ok-chipbar{display:flex;flex-wrap:wrap;gap:var(--ok-s2)}

/* ---------- 13. TABLES (list -> mobile cards) ---------- */
.ok-tablewrap{border:1px solid var(--ok-border);border-radius:var(--ok-r-lg);overflow:auto;
  background:var(--ok-bg)}
.ok-table{width:100%;border-collapse:collapse;font-size:var(--ok-fs-sm)}
.ok-table th{background:var(--ok-bg-soft);color:var(--ok-grey);font-weight:600;
  font-size:var(--ok-fs-xs);text-transform:uppercase;letter-spacing:.05em;text-align:left;
  padding:var(--ok-s3) var(--ok-s4);position:sticky;top:0}
.ok-table td{padding:var(--ok-s3) var(--ok-s4);border-top:1px solid var(--ok-border);
  vertical-align:middle}
.ok-table tbody tr:hover td{background:var(--ok-bg-soft)}
.ok-table .ok-t-num{text-align:right;font-variant-numeric:tabular-nums}
.ok-table .ok-t-money{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}

/* ---------- 14. PAGINATION + BREADCRUMBS ---------- */
.ok-pagi{display:flex;flex-wrap:wrap;gap:var(--ok-s1);align-items:center;justify-content:center;
  padding:var(--ok-s4) 0}
.ok-pagi a,.ok-pagi span{min-width:38px;height:38px;display:inline-flex;align-items:center;
  justify-content:center;border-radius:var(--ok-r-md);font:500 var(--ok-fs-sm)/1 var(--ok-font);
  color:var(--ok-ink);text-decoration:none!important;padding:0 var(--ok-s2)}
.ok-pagi a:hover{background:var(--ok-bg-soft)}
.ok-pagi .is-active{background:var(--ok-green-dark);color:#fff}
.ok-pagi .ok-pagi__gap{color:var(--ok-grey-light)}
.ok-crumbs{display:flex;flex-wrap:wrap;gap:var(--ok-s1);align-items:center;
  font-size:var(--ok-fs-xs);color:var(--ok-grey);padding:var(--ok-s3) 0}
.ok-crumbs a{color:var(--ok-grey)}
.ok-crumbs svg{width:12px;height:12px;color:var(--ok-grey-light)}
.ok-crumbs b{color:var(--ok-ink);font-weight:500}

/* ---------- 15. NOTES / ALERTS ---------- */
.ok-note{display:flex;gap:var(--ok-s3);padding:var(--ok-s3) var(--ok-s4);
  border-radius:var(--ok-r-md);font-size:var(--ok-fs-sm);align-items:flex-start}
.ok-note svg{width:18px;height:18px;flex:0 0 auto;margin-top:2px}
.ok-note--info{background:var(--ok-blue-bg);color:var(--ok-blue)}
.ok-note--ok{background:var(--ok-ok-bg);color:var(--ok-green-dark)}
.ok-note--warn{background:var(--ok-amber-bg);color:var(--ok-amber)}
.ok-note--bad{background:var(--ok-red-bg);color:var(--ok-red)}

/* ---------- 16. TOASTS ---------- */
.ok-toasts{position:fixed;z-index:100;right:var(--ok-s4);bottom:calc(var(--ok-s4) + var(--ok-tabbar-h));
  display:grid;gap:var(--ok-s2);max-width:min(360px,calc(100vw - 32px))}
.ok-toast{display:flex;gap:var(--ok-s3);align-items:flex-start;background:var(--ok-ink);color:#fff;
  border-radius:var(--ok-r-md);box-shadow:var(--ok-shadow-2);padding:var(--ok-s3) var(--ok-s4);
  font-size:var(--ok-fs-sm);animation:ok-toast-in .25s ease}
.ok-toast--ok{background:var(--ok-green-dark)}
.ok-toast--bad{background:var(--ok-red)}
.ok-toast button{margin-left:auto;background:none;border:0;color:inherit;cursor:pointer;
  font-size:var(--ok-fs-md);line-height:1;padding:0}
@keyframes ok-toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- 17. MODAL + DRAWER ---------- */
.ok-overlay{position:fixed;inset:0;z-index:80;background:rgba(38,38,38,.5);
  display:none;align-items:center;justify-content:center;padding:var(--ok-s4)}
.ok-overlay.is-open{display:flex}
.ok-modal{background:var(--ok-bg);border-radius:var(--ok-r-lg);box-shadow:var(--ok-shadow-2);
  width:100%;max-width:460px;max-height:90vh;overflow:auto;animation:ok-toast-in .2s ease}
.ok-modal__head{display:flex;align-items:center;gap:var(--ok-s3);padding:var(--ok-s4);
  border-bottom:1px solid var(--ok-border)}
.ok-modal__head h3{margin:0;font-size:var(--ok-fs-lg)}
.ok-modal__x{margin-left:auto}
.ok-modal__body{padding:var(--ok-s4)}
.ok-modal__foot{padding:var(--ok-s3) var(--ok-s4);border-top:1px solid var(--ok-border);
  display:flex;gap:var(--ok-s3);justify-content:flex-end}
/* drawer (mobile filters) */
.ok-drawer{position:fixed;z-index:90;top:0;bottom:0;right:0;width:min(340px,88vw);
  background:var(--ok-bg);box-shadow:var(--ok-shadow-2);transform:translateX(105%);
  transition:transform .22s ease;display:flex;flex-direction:column}
.ok-drawer.is-open{transform:none}
.ok-drawer__head{display:flex;align-items:center;gap:var(--ok-s3);padding:var(--ok-s4);
  border-bottom:1px solid var(--ok-border)}
.ok-drawer__head h3{margin:0;font-size:var(--ok-fs-lg)}
.ok-drawer__body{padding:var(--ok-s4);overflow:auto;flex:1}
.ok-drawer__foot{padding:var(--ok-s3) var(--ok-s4);border-top:1px solid var(--ok-border);
  display:flex;gap:var(--ok-s3)}
.ok-drawer__foot .ok-btn{flex:1}
.ok-scrim{position:fixed;inset:0;z-index:85;background:rgba(38,38,38,.5);display:none}
.ok-scrim.is-open{display:block}

/* ---------- 18. EMPTY STATE + SKELETON ---------- */
.ok-empty{text-align:center;padding:var(--ok-s7) var(--ok-s4);color:var(--ok-grey)}
.ok-empty svg{width:44px;height:44px;color:var(--ok-grey-light);margin:0 auto var(--ok-s3)}
.ok-empty h3{margin:0 0 var(--ok-s1);font-size:var(--ok-fs-lg);color:var(--ok-ink)}
.ok-empty p{margin:0 0 var(--ok-s4);font-size:var(--ok-fs-sm)}
.ok-skel{background:linear-gradient(90deg,#EFEFEC 25%,#F7F8F5 45%,#EFEFEC 65%);
  background-size:200% 100%;animation:ok-skel 1.1s infinite;border-radius:var(--ok-r-sm)}
@keyframes ok-skel{to{background-position:-200% 0}}
.ok-skel--img{aspect-ratio:3/4;border-radius:var(--ok-r-lg) var(--ok-r-lg) 0 0}
.ok-skel--line{height:13px;margin:var(--ok-s2) 0}

/* ---------- 19. GALLERY (product page) ---------- */
.ok-gallery{display:grid;gap:var(--ok-s3)}
.ok-gallery__main{aspect-ratio:3/4;border:1px solid var(--ok-border);border-radius:var(--ok-r-lg);
  overflow:hidden;background:var(--ok-bg-soft)}
.ok-gallery__main img{width:100%;height:100%;object-fit:cover}
.ok-gallery__thumbs{display:flex;gap:var(--ok-s2);overflow-x:auto;scrollbar-width:none}
.ok-gallery__thumbs::-webkit-scrollbar{display:none}
.ok-gallery__thumbs button{flex:0 0 64px;aspect-ratio:3/4;border:2px solid var(--ok-border);
  border-radius:var(--ok-r-md);overflow:hidden;padding:0;background:var(--ok-bg-soft);cursor:pointer}
.ok-gallery__thumbs button.is-active{border-color:var(--ok-green-dark)}
.ok-gallery__thumbs img{width:100%;height:100%;object-fit:cover}

/* ---------- 20. WHATSAPP FLOAT ---------- */
.ok-wa{position:fixed;z-index:70;right:var(--ok-s4);bottom:var(--ok-s4);
  width:52px;height:52px;border-radius:50%;background:#25D366;color:#fff;
  display:flex;align-items:center;justify-content:center;box-shadow:var(--ok-shadow-2);
  text-decoration:none!important}
.ok-wa svg{width:26px;height:26px}
.ok-wa:hover{transform:scale(1.06)}

/* ---------- 21. UTILITIES ---------- */
.ok-mt0{margin-top:0}.ok-mb0{margin-bottom:0}
.ok-mt2{margin-top:var(--ok-s2)}.ok-mt4{margin-top:var(--ok-s4)}.ok-mt5{margin-top:var(--ok-s5)}
.ok-row{display:flex;gap:var(--ok-s3);align-items:center;flex-wrap:wrap}
.ok-row--end{justify-content:flex-end}
.ok-row--between{justify-content:space-between}
.ok-req{color:var(--ok-red);font-weight:700}
.ok-input--locked{background:var(--ok-bg-soft);color:var(--ok-grey);cursor:not-allowed}
.ok-card--err{border-color:var(--ok-red)!important;box-shadow:0 0 0 3px rgba(198,40,40,.10)}
small.ok-err{display:block;color:var(--ok-red);font-weight:600;margin-top:6px}
.ok-checkgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ok-check--box{border:1px solid var(--ok-border);border-radius:10px;padding:10px 12px;margin:0;align-items:flex-start;font-size:var(--ok-fs-sm)}
.ok-check--box:has(input:checked){border-color:var(--ok-green-dark);background:var(--ok-green-tint)}
.ok-check--box:has(input:disabled){opacity:.5}
.ok-file--has{border-style:solid;border-color:var(--ok-green-dark);background:var(--ok-green-tint)}
.ok-irow{display:grid;grid-template-columns:20px 1fr;gap:8px;align-items:start}
.ok-irow>span:first-child{text-align:center;line-height:1.5}
.ok-grow{flex:1 1 auto}
.ok-center{text-align:center}
.ok-muted{color:var(--ok-grey)}
.ok-good{color:var(--ok-green-dark)}
.ok-bad{color:var(--ok-red)}
.ok-hide-desktop{display:none}

/* ============================================================
   MOBILE RULES - YE BLOCK HAMESHA FILE KE AAKHIR ME RAHE.
   (Equal specificity par baad wala rule jeet-ta ha - fh- kit me
   ye trap 6 baar paisa le chuka ha. Naya mobile rule YAHI aayega.)
   ============================================================ */
@media (max-width:991px){
  .ok-cols{grid-template-columns:repeat(6,1fr)}
  .ok-c-3,.ok-c-4{grid-column:span 3}
  .ok-c-2{grid-column:span 3}
  .ok-c-5,.ok-c-6,.ok-c-7,.ok-c-8,.ok-c-9{grid-column:span 6}
  .ok-footer__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  :root{--ok-fs-3xl:26px;--ok-fs-2xl:22px;--ok-fs-xl:19px}
  .ok-body{padding-bottom:calc(var(--ok-tabbar-h) + env(safe-area-inset-bottom))}
  .ok-tabbar{display:block}
  .ok-hide-mobile{display:none!important}
  .ok-hide-desktop{display:initial}
  .ok-header__search{display:none} /* search tabbar me ha */
  .ok-section{padding:var(--ok-s5) 0}
  .ok-pgrid{grid-template-columns:repeat(2,1fr);gap:var(--ok-s3)}
  .ok-inrow{grid-template-columns:1fr}
  .ok-wa{bottom:calc(var(--ok-tabbar-h) + var(--ok-s4))}
  .ok-toasts{bottom:calc(var(--ok-tabbar-h) + var(--ok-s4))}
  .ok-modal{max-width:none;align-self:flex-end;border-radius:var(--ok-r-lg) var(--ok-r-lg) 0 0;
    max-height:82vh}
  .ok-overlay{padding:0;align-items:flex-end}
  /* LIST TABLE -> CARDS: har td per data-l attribute zaroori */
  .ok-table--cards thead{display:none}
  .ok-table--cards,
  .ok-table--cards tbody,.ok-table--cards tr,.ok-table--cards td{display:block;width:100%}
  .ok-table--cards tr{border-top:1px solid var(--ok-border);padding:var(--ok-s3) var(--ok-s4)}
  .ok-table--cards tr:first-child{border-top:0}
  .ok-table--cards td{border:0;padding:3px 0;display:flex;gap:var(--ok-s3);
    align-items:baseline;text-align:right;justify-content:space-between}
  .ok-table--cards td::before{content:attr(data-l);font-size:var(--ok-fs-xs);font-weight:600;
    color:var(--ok-grey);text-transform:uppercase;letter-spacing:.05em;text-align:left}
  .ok-table--cards td:empty{display:none}
  .ok-table--cards .ok-t-num,.ok-table--cards .ok-t-money{text-align:right}
  .ok-table--cards tbody tr:hover td{background:none}
}
@media (max-width:480px){
  .ok-cols{grid-template-columns:1fr}
  .ok-c-2,.ok-c-3,.ok-c-4,.ok-c-5,.ok-c-6,.ok-c-7,.ok-c-8,.ok-c-9{grid-column:span 1}
  .ok-footer__grid{grid-template-columns:1fr}
  .ok-otp{gap:6px}
  .ok-otp input{flex:1 1 0;width:auto;min-width:0;max-width:46px}
  .ok-card__foot,.ok-modal__foot{flex-direction:column-reverse}
  .ok-card__foot .ok-btn,.ok-modal__foot .ok-btn{width:100%}
}

/* header chhote screen par: compact buttons + chhota logo + label utilities */
@media (max-width:480px){
  .ok-header__in .ok-btn{padding:8px 12px;font-size:13px}
  .ok-header__in{gap:8px}
  .ok-logo img{height:26px}
}
/* .ok-hide-xs / .ok-only-xs: chhote screen par lambe label ki jagah chhota */
@media (max-width:419px){ .ok-hide-xs{display:none!important} }
@media (min-width:420px){ .ok-only-xs{display:none!important} }
@media (max-width:319px){ .ok-header .ok-btn--ghost{display:none} }
@media (max-width:360px){ .ok-checkgrid{grid-template-columns:1fr} }