/* ShopKichele — components.css (extracted from index.html) */
/* ============ COMPONENTS ============ */ 
.sk-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px;box-shadow:var(--shadow)} 
.grid2{display:grid;grid-template-columns:1fr;gap:0 12px}
@media(min-width:576px){.grid2{grid-template-columns:1fr 1fr}} 
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px} 
.kpi .label{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em} 
.kpi .value{font-size:22px;font-weight:700;margin-top:2px} 
.kpi.big .value{font-size:30px;color:var(--brand)} 
.stack{display:flex;flex-direction:column;gap:12px} 
.sk-row{display:flex;align-items:center;gap:10px} 
.spread{display:flex;align-items:center;justify-content:space-between;gap:10px} 
.muted{color:var(--muted)} 
.small{font-size:13px} 
.tiny{font-size:12px} 
.sk-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 16px; 
  border-radius:14px;background:var(--accent);color:#fff;font-weight:600;width:100%} 
.sk-btn:active{transform:scale(.99);background:var(--accent-d)} 
.sk-btn[disabled]{opacity:.55;pointer-events:none} 
.sk-btn.secondary{background:var(--brand-l);color:var(--brand)} 
.sk-btn.ghost{background:transparent;border:1px solid var(--line);color:var(--text)} 
.sk-btn.danger{background:var(--bad)} 
.sk-btn.sm{min-height:38px;font-size:13px;padding:0 12px;width:auto;border-radius:11px} 
label{display:block;font-size:13px;color:var(--muted);margin:0 0 5px} 
.field{margin-bottom:12px} 
input,select,textarea{width:100%;min-height:40px;padding:8px 11px;border:1px solid var(--line);border-radius:10px;
  font-size:14px;background:var(--surface)}
select{min-height:38px;padding:6px 10px}
textarea{min-height:70px}
.chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none} 
.chips::-webkit-scrollbar{display:none} 
.chip{white-space:nowrap;padding:9px 14px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-size:13px} 
.chip[aria-pressed="true"]{background:var(--brand);color:#fff;border-color:var(--brand)} 
.pill{display:inline-block;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:600} 
.pill.good{background:rgba(0,178,97,.14);color:var(--good)} 
.pill.warn{background:rgba(254,169,0,.16);color:var(--warn)} 
.pill.bad{background:rgba(214,69,69,.14);color:var(--bad)} 
.sheet-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:60;display:none} 
.sheet-backdrop.open{display:block} 
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:61;background:var(--surface);border-radius:22px 22px 0 0; 
  max-height:88dvh;overflow-y:auto;transform:translateY(100%);transition:transform .22s ease; 
  padding:8px 14px calc(20px + var(--safe-b));pointer-events:none;visibility:hidden} 
.sheet.open{transform:translateY(0);pointer-events:auto;visibility:visible} 
.sheet .handle{width:42px;height:4px;border-radius:2px;background:var(--line);margin:6px auto 12px} 
@media(min-width:900px){.sheet{left:50%;right:auto;bottom:auto;top:50%;transform:translate(-50%,-45%) scale(.98); 
  width:560px;border-radius:20px;opacity:0;transition:opacity .18s ease,visibility .18s ease} 
  .sheet.open{transform:translate(-50%,-50%);opacity:1}} 
.sk-toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--nav-h) + 20px + var(--safe-b)); 
  background:#10221C;color:#fff;padding:12px 16px;border-radius:12px;z-index:90;max-width:92vw;font-size:14px;box-shadow:var(--shadow)} 
.sk-toast.bad{background:var(--bad)} 
.empty{text-align:center;color:var(--muted);padding:34px 12px} 
.empty .ico{font-size:34px;display:block;margin-bottom:8px} 
.spinner{width:18px;height:18px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%; 
  animation:spin .7s linear infinite;display:inline-block} 
@keyframes spin{to{transform:rotate(360deg)}} 
.skeleton{background:linear-gradient(90deg,var(--line),var(--surface),var(--line));background-size:200% 100%; 
  animation:sk 1.2s infinite;border-radius:12px;height:76px} 
@keyframes sk{to{background-position:-200% 0}} 
.status-dot{font-size:11px;padding:3px 8px;border-radius:999px;background:rgba(255,255,255,.18)} 

/* POS */ 
.pos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:10px} 
.pcard{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:11px;text-align:left;min-height:96px; 
  display:flex;flex-direction:column;justify-content:space-between} 
.pcard .nm{font-size:13px;font-weight:600;line-height:1.25} 
.pcard .pr{font-size:15px;font-weight:700;color:var(--accent)} 
.cartbar{position:fixed;left:0;right:0;bottom:calc(var(--nav-h) + var(--safe-b));z-index:35;padding:10px 14px; 
  background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:12px} 
@media(min-width:900px){.cartbar{left:230px;bottom:0}} 
.cartbar .go{background:var(--accent);color:#fff;padding:10px 18px;border-radius:12px;font-weight:700;min-height:44px} 
.qtybtn{width:38px;height:38px;border-radius:10px;background:var(--brand-l);color:var(--brand);font-size:19px;font-weight:700}