/* ===== Ozone SmartPOS Menu UI (Cards) ===== */
.sp-wrap{
  max-width:1100px;
  margin:0 auto;
  padding:14px;
  direction:ltr;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:#111;
}
.sp-top{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  margin-bottom:12px;
}
.sp-title{
  font-size:18px;
  font-weight:800;
  letter-spacing:.2px;
}
.sp-cart{
  display:flex;
  gap:10px;
  align-items:center;
}
.sp-cart a{
  text-decoration:none;
  color:inherit;
}
.sp-cart-ico{
  width:40px;height:40px;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(0,0,0,.08);
  background:#fff;
  position:relative;
}
.sp-cart-count{
  position:absolute;
  top:-6px;right:-6px;
  background:#111;
  color:#fff;
  min-width:18px;height:18px;
  padding:0 5px;
  border-radius:999px;
  font-size:11px;
  line-height:18px;
  text-align:center;
}

/* Breadcrumb */
.sp-breadcrumb{
  display:flex;
  gap:6px;
  align-items:center;
  flex-wrap:wrap;
  margin:6px 0 14px;
  font-size:13px;
  opacity:.85;
}
.sp-breadcrumb a{
  color:#111;
  text-decoration:none;
}
.sp-breadcrumb a:hover{ text-decoration:underline; }

/* Grids */
.sp-catgrid, .sp-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:12px;
}
@media (max-width: 880px){
  .sp-catgrid, .sp-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px){
  .sp-catgrid, .sp-grid{ grid-template-columns: 1fr; }
}

/* Cards */
.sp-catcard, .sp-product{
  border:1px solid rgba(0,0,0,.08);
  background:#fff;
  border-radius:16px;
  overflow:hidden;
  box-shadow: 0 10px 25px rgba(0,0,0,.04);
}
.sp-catcard{ cursor:pointer; }
.sp-catcard:hover, .sp-product:hover{
  box-shadow: 0 12px 28px rgba(0,0,0,.06);
  transform: translateY(-1px);
}
.sp-catimg, .sp-img{
  width:100%;
  aspect-ratio: 4 / 3;
  object-fit:cover;
  display:block;
  background:#f3f3f3;
}
.sp-catmeta{
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.sp-cattitle{
  font-weight:800;
  font-size:15px;
  line-height:1.2;
}
.sp-sub{
  font-size:12px;
  opacity:.75;
}

/* Product card */
.sp-body{ padding:12px; display:flex; flex-direction:column; gap:8px; }
.sp-name{
  font-weight:800;
  font-size:15px;
  line-height:1.2;
  cursor:pointer;
}
.sp-name:hover{ text-decoration:underline; }
.sp-desc{
  font-size:12px;
  opacity:.78;
  line-height:1.35;
}
.sp-price{
  font-size:14px;
  font-weight:900;
}
.sp-add{
  margin-top:auto;
  display:flex;
  gap:8px;
  align-items:center;
}
.sp-add button, .sp-modal-add{
  appearance:none;
  border:0;
  border-radius:12px;
  padding:10px 12px;
  cursor:pointer;
  font-weight:800;
  background:#111;
  color:#fff;
}
.sp-add button:disabled, .sp-modal-add:disabled{ opacity:.6; cursor:not-allowed; }
.sp-add a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
  color:#111;
  text-decoration:none;
}

/* Modal */
.sp-modal{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.55);
  display:none;
  align-items:center;
  justify-content:center;
  padding:16px;
  z-index:99999;
}
.sp-modal.open{ display:flex; }
.sp-modal-card{
  width:min(560px, 100%);
  background:#fff;
  border-radius:18px;
  overflow:hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,.25);
}
.sp-modal-head{
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid rgba(0,0,0,.08);
}
.sp-modal-title{ font-weight:900; font-size:16px; }
.sp-modal-close{
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
  width:36px;height:36px;
  border-radius:12px;
  cursor:pointer;
}
.sp-modal-body{ padding:14px 16px; }
.sp-modal-foot{
  padding:14px 16px;
  display:flex;
  justify-content:flex-end;
  gap:10px;
  border-top:1px solid rgba(0,0,0,.08);
}

/* Toast */
.sp-toast{
  position:fixed;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  background:#111;
  color:#fff;
  padding:10px 14px;
  border-radius:999px;
  font-size:13px;
  opacity:0;
  pointer-events:none;
  transition: opacity .2s ease;
  z-index:999999;
}
.sp-toast.show{ opacity:1; }


/* SmartPOS info icon */
.sp-info-btn{border:0;background:#f2f2f2;cursor:pointer;font-size:12px;line-height:1;width:18px;height:18px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;margin-left:6px;}
.sp-info-btn:focus{outline:2px solid rgba(0,0,0,.25);outline-offset:2px;border-radius:6px;}

/* Info modal */
.sp-info-modal{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;z-index:99999;padding:18px;}
.sp-info-modal.open{display:flex;align-items:center;justify-content:center;}
.sp-info-modal__box{background:#fff;border-radius:14px;max-width:520px;width:100%;padding:16px;box-shadow:0 10px 30px rgba(0,0,0,.25);}
.sp-info-modal__close{border:0;background:transparent;cursor:pointer;font-size:20px;float:right;line-height:1;}
.sp-info-modal__content{margin-top:8px;font-size:14px;line-height:1.45;}


/* Product info icon */
.sp-info-btn{border:0;background:transparent;cursor:pointer;padding:0;margin-left:6px;}
.sp-info-ico{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:#111;color:#fff;font-size:12px;font-weight:700;line-height:1;}