/* Refined POS UI: tokens, typography, spacing, polish */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
.sirapix-pos-wrapper { font-family: 'Inter', -apple-system, Segoe UI, Roboto, Arial, sans-serif; padding: var(--spx-space,16px) calc(var(--spx-space,16px) + 4px); width:100%; max-width:none; box-sizing:border-box; color:var(--spx-text,#111827); }

.sirapix-pos-shell {
  display:flex;
  gap:16px;
  margin-top:16px;
  align-items:flex-start;
}

.sirapix-pos-sidebar {
  width: 56px;
  flex: 0 0 56px;
  background: var(--spx-card, #ffffff);
  border-radius: var(--spx-radius-lg, 16px);
  border: 1px solid var(--spx-border, #E5E7EB);
  box-shadow: var(--spx-shadow-sm, 0 2px 8px rgba(17, 24, 39, .06));
  padding: 16px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  position: sticky;
  top: 16px;
  height: calc(100vh - 300px);
  z-index: 50;
}

.sirapix-pos-main {
  flex:1 1 auto;
}

.spx-side-icon {
  width:36px;
  height:36px;
  border-radius:999px;
  border:1px solid var(--spx-border,#E5E7EB);
  background:#fff;
  box-shadow: var(--spx-shadow-sm,0 2px 8px rgba(17,24,39,.06));
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  position:relative;
}

.spx-side-icon:hover {
  border-color: color-mix(in srgb, var(--spx-primary,#0ea5e9) 40%, var(--spx-border,#E5E7EB));
}

.spx-side-icon::after {
  content: attr(title);
  position:absolute;
  left:115%;
  top:50%;
  transform:translateY(-50%);
  white-space:nowrap;
  background:rgba(17,24,39,.96);
  color:#f9fafb;
  font-size:11px;
  padding:4px 8px;
  border-radius:999px;
  box-shadow:0 4px 10px rgba(15,23,42,.3);
  opacity:0;
  pointer-events:none;
  transition:opacity .12s ease-out, transform .12s ease-out;
  z-index:60;
}

.spx-side-icon:hover::after,
.spx-side-icon:focus-visible::after {
  opacity:1;
  transform:translateY(-50%) translateX(2px);
}

.spx-side-icon::before {
  content:"";
  display:block;
  width:18px;
  height:18px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:18px 18px;
}

.spx-side-home::before {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M1 6V15H6V11C6 9.89543 6.89543 9 8 9C9.10457 9 10 9.89543 10 11V15H15V6L8 0L1 6Z' fill='%23000000'/%3E%3C/svg%3E");
}

.spx-side-dashboard::before {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000000'%3E%3Cpath d='M2 3v18c0 .6.4 1 1 1h5V2H3c-.6 0-1 .4-1 1zm19-1H10v9h12V3c0-.6-.4-1-1-1zM10 22h11c.6 0 1-.4 1-1v-8H10v9z'/%3E%3C/svg%3E");
}

.spx-side-settings::before {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000000'%3E%3Cpath d='M20.89,9.78h-.65a1.16,1.16,0,0,1-1-.74V9a1.13,1.13,0,0,1,.22-1.26l.46-.46a1.13,1.13,0,0,0,0-1.58L18.29,4.14a1.13,1.13,0,0,0-1.58,0l-.46.46A1.13,1.13,0,0,1,15,4.82h0a1.16,1.16,0,0,1-.74-1V3.11A1.11,1.11,0,0,0,13.11,2H10.89A1.11,1.11,0,0,0,9.78,3.11v.65a1.16,1.16,0,0,1-.74,1H9A1.13,1.13,0,0,1,7.75,4.6l-.46-.46a1.13,1.13,0,0,0-1.58,0L4.14,5.71a1.13,1.13,0,0,0,0,1.58l.46.46A1.13,1.13,0,0,1,4.82,9V9a1.16,1.16,0,0,1-1,.74H3.11A1.11,1.11,0,0,0,2,10.89v2.22a1.11,1.11,0,0,0,1.11,1.11h.65a1.16,1.16,0,0,1,1,.74v0a1.13,1.13,0,0,1-.22,1.26l-.46.46a1.13,1.13,0,0,0,0,1.58l1.57,1.57a1.13,1.13,0,0,0,1.58,0l.46-.46A1.13,1.13,0,0,1,9,19.18H9a1.16,1.16,0,0,1,.74,1v.65A1.11,1.11,0,0,0,10.89,22h2.22a1.11,1.11,0,0,0,1.11-1.11v-.65a1.16,1.16,0,0,1,.74-1h0a1.13,1.13,0,0,1,1.26.22l.46.46a1.13,1.13,0,0,0,1.58,0l1.57-1.57a1.13,1.13,0,0,0,0-1.58l-.46-.46A1.13,1.13,0,0,1,19.18,15v0a1.16,1.16,0,0,1,1-.74h.65A1.11,1.11,0,0,0,22,13.11V10.89A1.11,1.11,0,0,0,20.89,9.78ZM12,16a4,4,0,1,1,4-4A4,4,0,0,1,12,16Z'/%3E%3C/svg%3E");
}

.spx-side-logout::before {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 6.5C2 4.01472 4.01472 2 6.5 2H12C14.2091 2 16 3.79086 16 6V7C16 7.55228 15.5523 8 15 8C14.4477 8 14 7.55228 14 7V6C14 4.89543 13.1046 4 12 4H6.5C5.11929 4 4 5.11929 4 6.5V17.5C4 18.8807 5.11929 20 6.5 20H12C13.1046 20 14 19.1046 14 18V17C14 16.4477 14.4477 16 15 16C15.5523 16 16 16.4477 16 17V18C16 20.2091 14.2091 22 12 22H6.5C4.01472 22 2 19.9853 2 17.5V6.5ZM18.2929 8.29289C18.6834 7.90237 19.3166 7.90237 19.7071 8.29289L22.7071 11.2929C23.0976 11.6834 23.0976 12.3166 22.7071 12.7071L19.7071 15.7071C19.3166 16.0976 18.6834 16.0976 18.2929 15.7071C17.9024 15.3166 17.9024 14.6834 18.2929 14.2929L19.5858 13L11 13C10.4477 13 10 12.5523 10 12C10 11.4477 10.4477 11 11 11L19.5858 11L18.2929 9.70711C17.9024 9.31658 17.9024 8.68342 18.2929 8.29289Z' fill='%230F1729'/%3E%3C/svg%3E");
}

/* POS header with title and net-status dot */
.sirapix-pos-header{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin: 8px 0 12px;
}
.sirapix-pos-inline-title{
  margin:0; padding:0; font-size:20px; font-weight:800; letter-spacing:.2px;
}
.spx-net-dot{
  width:10px; height:10px; border-radius:50%; display:inline-block; flex:0 0 auto;
  box-shadow: 0 0 0 2px #fff inset, 0 0 0 1px rgba(0,0,0,.06);
  background:#22c55e; /* online default */
}
.spx-net-offline{ background:#ef4444 !important; }
.sirapix-pos-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; padding:0; background:transparent; color:inherit; }
.spx-header-right{ display:flex; align-items:center; gap:12px; }
.spx-net-status{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--spx-muted,#6B7280); }
.spx-queue-status{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--spx-muted,#6B7280); }
.spx-queue-label strong{ font-weight:700; }
.spx-sync-btn{ padding:6px 10px; font-size:12px; display:inline-flex; align-items:center; gap:6px; }
.spx-sync-icon{ display:inline-flex; align-items:center; justify-content:center; }
@keyframes spxSpin { from{ transform:rotate(0deg);} to{ transform:rotate(360deg);} }
.spx-sync-btn.is-syncing .spx-sync-icon{ animation: spxSpin .8s linear infinite; }
.sirapix-credit { font-size:12px; opacity:0.8; color:#111827; }
.sirapix-credit.small { font-size:11px; }
.sirapix-credit .sirapix-brand { display:inline-flex; align-items:center; gap:6px; color:inherit; text-decoration:none; }
.sirapix-credit .sirapix-brand img { height:12px; width:auto; display:inline-block; }
.sirapix-credit .sirapix-brand span { font-weight:700; letter-spacing: .2px; }
.sirapix-pos-inline-title { font-weight:600; font-size:20px; line-height:1.2; margin: 0 0 var(--spx-space-lg,24px); text-align:center; color:var(--spx-text,#111827); }
.sirapix-pos-layout { display:grid; grid-template-columns: clamp(0px, 20%, 280px) 55% 23.2%; gap:12px; width:100%; }
.sirapix-panel { position:relative; background:var(--spx-card,#fff); border:1px solid var(--spx-border,#E5E7EB); border-radius: var(--spx-radius,12px); padding: var(--spx-space,16px); box-shadow: var(--spx-shadow-sm,0 2px 8px rgba(17,24,39,.06)); }
.sirapix-panel-title { font-weight:600; margin-bottom:8px; display:flex; align-items:center; justify-content:space-between; gap:8px; color:var(--spx-text,#111827); }
.sirapix-panel-title.with-search input { width: 60%; padding:10px 38px 10px 38px; font-size:14px; border:1px solid var(--spx-border,#d1d5db); border-radius: var(--spx-radius,12px); font-family: 'Inter', -apple-system, Segoe UI, Roboto, Arial, sans-serif; background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E") no-repeat 12px center; background-size:18px; box-shadow: var(--spx-shadow-sm,0 2px 8px rgba(17,24,39,.06)); }
.sirapix-panel-title.with-search input:focus { outline: none; border-color: var(--spx-primary,#0ea5e9); box-shadow: 0 0 0 3px color-mix(in srgb, var(--spx-primary,#0ea5e9) 18%, transparent); }
.sirapix-count-badge { display:inline-flex; align-items:center; justify-content:center; height:22px; min-width:22px; padding:0 6px; border-radius:999px; background:#16a34a; color:#fff; font-size:12px; font-weight:700; vertical-align:middle; }
.sirapix-field { display:flex; flex-direction:column; gap:6px; margin-bottom:10px; }
.sirapix-field label { font-weight:500; font-size:13px; color:var(--spx-muted,#6B7280); }
.sirapix-field input { height:42px; padding:0 12px 0 44px; font-size:14px; border:1px solid var(--spx-border,#d1d5db); border-radius: var(--spx-radius,12px); font-family: 'Inter', -apple-system, Segoe UI, Roboto, Arial, sans-serif; background:#fff; box-shadow: var(--spx-shadow-sm,0 2px 8px rgba(17,24,39,.06)); }
.sirapix-field input:focus { outline:none; border-color: var(--spx-primary,#0ea5e9); box-shadow: 0 0 0 3px color-mix(in srgb, var(--spx-primary,#0ea5e9) 18%, transparent); }
.sirapix-field:nth-child(1) input { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H6.2C5.0799 21 4.51984 21 4.09202 20.782C3.71569 20.5903 3.40973 20.2843 3.21799 19.908C3 19.4802 3 18.9201 3 17.8V6.2C3 5.0799 3 4.51984 3.21799 4.09202C3.40973 3.71569 3.71569 3.40973 4.09202 3.21799C4.51984 3 5.0799 3 6.2 3H11.8C12.9201 3 13.4802 3 13.908 3.21799C14.2843 3.40973 14.5903 3.71569 14.782 4.09202C15 4.51984 15 5.0799 15 6.2V10M21 21H21.01M8 6H10M17 21C17 18.7909 18.7909 17 21 17M13 21C13 16.5817 16.5817 13 21 13' stroke='%239CA3AF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-size:18px 18px; background-position:14px 50%; }
.sirapix-field:nth-child(2) input { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21a8 8 0 1 0-16 0'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-size:18px 18px; background-position:14px 50%; }
.sirapix-field:nth-child(3) input { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%239CA3AF' d='M29 4H3a3 3 0 0 0-3 3v18a3 3 0 0 0 3 3h26a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3zm-.72 2L16 14.77 3.72 6zM30 25a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V7.23l13.42 9.58a1 1 0 0 0 1.16 0L30 7.23z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-size:18px 18px; background-position:14px 50%; }

/* Placeholders in POS wrapper use Work Sans */
.sirapix-pos-wrapper input::placeholder { font-family: 'Work Sans', -apple-system, Segoe UI, Roboto, Arial, sans-serif; }

/* Validation error highlight */
.spx-field-error { border-color:#ef4444 !important; box-shadow: 0 0 0 3px rgba(239,68,68,.15) !important; }

/* Customer row under top bar */
.sirapix-pos-customer { margin: 10px 0 12px; }
.sirapix-customer-row { display:grid; grid-template-columns: repeat(3, 1fr); gap:12px; }

.sirapix-categories { display:grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap:10px; }
.sirapix-categories .cat { padding:10px 12px; border:1px solid var(--spx-border,#e5e7eb); border-radius: var(--spx-radius,12px); text-align:center; cursor:pointer; user-select:none; background:#fff; color:var(--spx-text,#111827); transition: all .18s ease; box-shadow: var(--spx-shadow-sm,0 2px 8px rgba(17,24,39,.06)); min-height:42px; display:flex; align-items:center; justify-content:center; box-sizing:border-box; }
.sirapix-categories .cat:hover { border-color: color-mix(in srgb, var(--spx-primary,#0ea5e9) 40%, var(--spx-border,#e5e7eb)); }
.sirapix-categories .cat.active { background: var(--spx-primary,#0ea5e9); color:#fff; border-color: var(--spx-primary,#0ea5e9); box-shadow: 0 6px 18px color-mix(in srgb, var(--spx-primary,#0ea5e9) 20%, transparent); }

/* Mobile categories dropdown mirror */
.sirapix-categories-select-wrap { display:none; margin-bottom: 10px; }
.sirapix-categories-select-wrap select { width:100%; height:42px; padding:0 12px; border:1px solid var(--spx-border,#E5E7EB); border-radius: var(--spx-radius,12px); background:#fff; box-shadow: var(--spx-shadow-sm,0 2px 8px rgba(17,24,39,.06)); font-size:14px; }
.sirapix-categories-select-wrap select:focus { outline:none; border-color: var(--spx-primary,#0ea5e9); box-shadow: 0 0 0 3px color-mix(in srgb, var(--spx-primary,#0ea5e9) 18%, transparent); }

.sirapix-products { display:grid; grid-template-columns: repeat(var(--spx-items-per-row, 4), 1fr); gap:12px 1%; min-height:200px; justify-content:start; }
.sirapix-products .prod { box-sizing:border-box; border:1px solid var(--spx-border,#e5e7eb); border-radius: var(--spx-radius,12px); overflow:hidden; background:#fff; cursor:pointer; display:flex; flex-direction:column; box-shadow: var(--spx-shadow-sm,0 2px 8px rgba(17,24,39,.06)); transition: transform .12s ease, box-shadow .18s ease; }
.sirapix-products .prod:hover { transform:none; box-shadow: var(--spx-shadow,0 8px 24px rgba(17,24,39,.06)); }
.sirapix-products .prod img { width:100%; aspect-ratio: 1 / 1; object-fit:cover; background:#f3f4f6; }
.sirapix-products .prod .meta { padding:8px 10px; display:block; font-size:12px; line-height:1.3; }
.sirapix-products .prod .meta span { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-weight:600; color:var(--spx-text,#111827); }
.sirapix-products .prod .meta strong { display:none; }

/* Press animation for product click */
@keyframes spxPress {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}
.sirapix-products .prod.press-anim { animation: spxPress 200ms cubic-bezier(0.2, 0.6, 0.2, 1); }

/* Autocomplete dropdown */
.sirapix-search-suggest { position:absolute; z-index:50; background:#fff; border:1px solid var(--spx-border,#e5e7eb); border-radius: var(--spx-radius,12px); box-shadow: var(--spx-shadow,0 8px 24px rgba(17,24,39,.06)); margin-top:0; width:auto; display:none; }
.sirapix-search-suggest .sug { display:flex; align-items:center; gap:8px; padding:8px 10px; cursor:pointer; }
.sirapix-search-suggest .sug:hover { background:#f9fafb; }
.sirapix-search-suggest .sug img { width:30px; height:30px; object-fit:cover; border-radius:4px; flex:0 0 30px; background:#f3f4f6; }
.sirapix-search-suggest .sug span { display:block; max-width: 300px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.sirapix-cart { position:relative; width:auto; background:#fff; border:1px solid var(--spx-border,#e5e7eb); border-radius: var(--spx-radius,12px); padding: var(--spx-space,16px); box-shadow: var(--spx-shadow,0 8px 24px rgba(17,24,39,.06)); }
.sirapix-cart-badge { position:absolute; top:-8px; right:-8px; min-width:22px; height:22px; padding:0 6px; border-radius:999px; background:#ef4444; color:#fff; font-weight:700; font-size:12px; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 6px rgba(0,0,0,.2); }
.sirapix-cart.pulse { animation: none; }
@keyframes spxPulse { 0%{ transform:scale(1);} 100%{ transform:scale(1);} }
.sirapix-cart-items { display:flex; flex-direction:column; gap:8px; }
.sirapix-cart-item { display:flex; justify-content:space-between; align-items:center; gap:10px; border:1px solid var(--spx-border,#e5e7eb); border-radius:10px; padding:8px 10px; background:#fff; }
.sirapix-cart-item .left { display:flex; align-items:center; gap:8px; min-width:0; }
.sirapix-cart-item .left .thumb { width:28px; height:28px; object-fit:cover; border-radius:4px; background:#f3f4f6; flex:0 0 28px; }
.sirapix-cart-item .left .name { max-width: 160px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:13px; }
.sirapix-qty { display:inline-flex; align-items:center; gap:6px; }
.sirapix-qty button { width:32px; height:32px; border:1px solid var(--spx-border,#d1d5db); background:#fff; border-radius:999px; cursor:pointer; color:#111827; display:flex; align-items:center; justify-content:center; font-size:0; font-weight:700; line-height:1; -webkit-appearance:none; appearance:none; transition: background .12s ease, border-color .12s ease, transform .06s ease; position:relative; }
.sirapix-qty button:hover { background:#f9fafb; border-color: color-mix(in srgb, var(--spx-primary,#0ea5e9) 30%, var(--spx-border,#e5e7eb)); }
.sirapix-qty button:active { transform: translateY(1px); }
.sirapix-qty .qty-inc::before, .sirapix-qty .qty-dec::before { content:""; display:block; width:16px; height:16px; background-size:16px 16px; background-repeat:no-repeat; }
.sirapix-qty .qty-inc::before { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23111827' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E"); }
.sirapix-qty .qty-dec::before { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23111827' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E"); }

.sirapix-cart-summary { display:grid; grid-template-columns: 1fr; row-gap:6px; margin-top:8px; border-top:1px dashed var(--spx-border,#E5E7EB); padding-top:8px; }
.sirapix-cart-summary > div { display:flex; align-items:center; justify-content:space-between; }
.sirapix-cart-summary strong { margin-left: 6px; text-align:right; }
.sirapix-cart-actions { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:10px; flex-wrap: wrap; }
.sirapix-cart-actions > * { flex: 1 1 100%; }
.sirapix-override input, .sirapix-note input { width:100%; box-sizing:border-box; }
.sirapix-override input,
.sirapix-note input { height:42px; padding:0 12px; font-size:14px; border:1px solid var(--spx-border,#d1d5db); border-radius: var(--spx-radius,12px); background:#fff; box-shadow: var(--spx-shadow-sm,0 2px 8px rgba(17,24,39,.06)); }
.sirapix-override input:focus,
.sirapix-note input:focus { outline:none; border-color: var(--spx-primary,#0ea5e9); box-shadow: 0 0 0 3px color-mix(in srgb, var(--spx-primary,#0ea5e9) 18%, transparent); }
.sirapix-ref-input { height:42px; padding:0 12px; font-size:14px; border:1px solid var(--spx-border,#d1d5db); border-radius: var(--spx-radius,12px); background:#fff; box-shadow: var(--spx-shadow-sm,0 2px 8px rgba(17,24,39,.06)); font-family:'Inter',-apple-system,Segoe UI,Roboto,Arial,sans-serif; box-sizing:border-box; }
.sirapix-ref-input:focus { outline:none; border-color: var(--spx-primary,#0ea5e9); box-shadow: 0 0 0 3px color-mix(in srgb, var(--spx-primary,#0ea5e9) 18%, transparent); }
.sirapix-payment-select { width:100%; }
.sirapix-cart-actions .sirapix-btn { width:100%; }

/* Add spacing under the top Complete Order button row (above the cart box) */
.sirapix-pos-col-cart > .sirapix-panel > .sirapix-cart-actions { margin-bottom: 10px; }
.sirapix-panel-title { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:6px 10px; }
.sirapix-panel-title.with-search { position: relative; }
.sirapix-panel-title.with-search input { padding-right: 36px; }
.sirapix-search-clear { position:absolute; right:12px; top:50%; transform:translateY(-50%); width:24px; height:24px; display:none; align-items:center; justify-content:center; border:1px solid #e5e7eb; border-radius:999px; background:#f3f4f6; color:#111827; cursor:pointer; line-height:1; font-weight:700; }
.sirapix-title-left { display:flex; align-items:center; gap:10px; }
.sirapix-title-left .sep { margin: 0 6px; opacity:.6; }
.sirapix-title-left strong { margin-left: 2px; }
.sirapix-count-badge { margin-left: 16px; }
.sirapix-btn { padding: 12px 14px; border-radius: var(--spx-radius,12px); border:1px solid transparent; cursor:pointer; font-weight:600; box-shadow: var(--spx-shadow-sm,0 2px 8px rgba(17,24,39,.06)); transition: transform .04s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease; }
.sirapix-btn:active { transform: translateY(1px); box-shadow: 0 1px 4px rgba(17,24,39,.06); }
.sirapix-btn.primary { background: var(--spx-primary,#0ea5e9); color:#fff; }
.sirapix-btn.primary:hover { filter: brightness(0.95); }
.sirapix-btn.secondary { background:#fff; color:var(--spx-text,#111827); border-color: var(--spx-border,#e5e7eb); }
.sirapix-btn.secondary:hover { background:#f9fafb; }
.sirapix-payment-select { display:flex; gap:12px; align-items:center; }

.sirapix-pos-login { max-width:440px; margin:80px auto; padding:32px 32px 28px; background:#fff; border:1px solid var(--spx-border,#e5e7eb); border-radius: var(--spx-radius-lg,16px); box-shadow: var(--spx-shadow,0 8px 24px rgba(17,24,39,.06)); text-align:center; font-family: 'Inter', -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
.sirapix-pos-login h2 { font-size:22px; margin:10px 0 18px; color:#111827; font-weight:700; }
.sirapix-login-logo { width:64px; height:64px; object-fit:contain; display:block; margin:0 auto 12px; }
.sirapix-pos-login .login-username,
.sirapix-pos-login .login-password,
.sirapix-pos-login .login-remember { text-align:left; }
.sirapix-pos-login label { display:block; margin:8px 0 6px; color:#374151; font-weight:600; font-family: inherit; }
.sirapix-pos-login input[type="text"],
.sirapix-pos-login input[type="password"],
.sirapix-pos-login input[type="email"],
.sirapix-pos-login .input,
.sirapix-pos-customer .sirapix-field input,
.sirapix-note input,
.sirapix-override input,
.sirapix-panel-title.with-search input { width:100%; height:44px; padding:0 14px; border:1px solid var(--spx-border,#e5e7eb); border-radius: var(--spx-radius,12px); font-size:14px; box-sizing:border-box; background:#fff; box-shadow: var(--spx-shadow-sm,0 2px 8px rgba(17,24,39,.06)); font-family: 'Inter', -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
.sirapix-pos-login input::placeholder { font-family: 'Work Sans', -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
.sirapix-pos-login .login-remember { display:flex; align-items:center; gap:8px; margin:10px 0 6px; font-size:13px; }
.sirapix-pos-login .login-remember label { margin:0; font-weight:500; color:#374151; }
.sirapix-pos-login .login-remember input { width:auto; margin:0; }
.sirapix-pos-login .login-submit .button,
.sirapix-pos-login .login-submit .button-primary { width:100%; padding:12px 14px; border-radius: var(--spx-radius,12px); font-weight:700; background: var(--spx-primary,#0ea5e9); border-color: var(--spx-primary,#0ea5e9); font-family: 'Inter', -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
.sirapix-pos-login .login-submit .button:hover,
.sirapix-pos-login .login-submit .button-primary:hover { filter: brightness(0.95); }
.sirapix-pos-login .sirapix-credit.small { margin-top:16px; }

@media (max-width: 980px) {
  .sirapix-pos-shell { flex-direction:column; }
  .sirapix-pos-sidebar {
    width:100%;
    flex:0 0 auto;
    flex-direction:row;
    justify-content:flex-start;
    padding:8px 10px;
    border-radius: var(--spx-radius,12px);
    position:static;
    height:auto;
  }
  .sirapix-pos-layout { grid-template-columns: 1fr; }
  .sirapix-customer-row { grid-template-columns: 1fr; }
  .sirapix-cart { max-height: 50vh; }
  .sirapix-products { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .sirapix-categories { grid-template-columns: repeat(3, 1fr); }
  .sirapix-panel { padding: 14px; }
  .sirapix-categories { display:none; }
  .sirapix-categories-select-wrap { display:block; }
}

@media (min-width: 981px) {
  .sirapix-pos-layout { align-items:flex-start; }
  .sirapix-pos-col-cart > .sirapix-panel {
    position:sticky;
    top:16px;
    z-index:20;
  }
  /* On desktop, keep the cart panel fixed and scroll its content instead */
  .sirapix-pos-col-cart .sirapix-cart {
    max-height: calc(100vh - 160px);
    overflow-y: auto;
  }
}

@media (min-width: 1200px) {
  .sirapix-products { grid-template-columns: repeat(var(--spx-items-per-row, 4), 1fr); }
}



.sirapix-pos-page header,
.sirapix-pos-page footer,
.sirapix-pos-page .site-header,
.sirapix-pos-page .site-footer,
.sirapix-pos-page .entry-header,
.sirapix-pos-page .entry-footer,
.sirapix-pos-page .page-header,
.sirapix-pos-page .page-footer,
/* Common theme header wrappers */
.sirapix-pos-page #masthead,
.sirapix-pos-page .masthead,
.sirapix-pos-page .header,
.sirapix-pos-page .site-branding,
/* Elementor header / footer locations */
.sirapix-pos-page .elementor-location-header,
.sirapix-pos-page .elementor-location-footer { display:none !important; }

.sirapix-pos-page .wrap,
.sirapix-pos-page .container,
.sirapix-pos-page .site-content,
.sirapix-pos-page .content-area,
.sirapix-pos-page .entry-content,
/* More content wrappers across themes */
.sirapix-pos-page .content,
.sirapix-pos-page .site-main,
.sirapix-pos-page main { max-width:none !important; width:100% !important; padding-left:0 !important; padding-right:0 !important; margin-top:0 !important; overflow:visible !important; }

/* Autocomplete suggestions */
.sirapix-search-suggest { display:none; background:#fff; border:1px solid var(--spx-border,#e5e7eb); border-radius: var(--spx-radius,12px); margin-top:6px; box-shadow: var(--spx-shadow,0 8px 24px rgba(17,24,39,.06)); overflow:hidden; max-height:260px; overflow:auto; }
.sirapix-search-suggest .sug { padding:10px 12px; cursor:pointer; font-size:13px; }
.sirapix-search-suggest .sug + .sug { border-top:1px solid #f1f5f9; }
.sirapix-search-suggest .sug:hover { background:#f8fafc; }

.sirapix-fly-badge { position:fixed; z-index:1000; width:22px; height:22px; border-radius:999px; background:#ef4444; color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; pointer-events:none; box-shadow:0 2px 6px rgba(0,0,0,.2); transition: transform 500ms ease-in, opacity 500ms ease-in; opacity:1; }

/* POS page: hide theme UI before/after our POS content, keep only admin bar + POS wrapper */
.sirapix-pos-page nav[aria-label="Skip to content navigation"],
.sirapix-pos-page .ea11y-skip-to-content-backdrop,
.sirapix-pos-page .preloader,
.sirapix-pos-page #site-header,
.sirapix-pos-page .site-header,
.sirapix-pos-page #page-header,
.sirapix-pos-page .page-header,
.sirapix-pos-page #site-footer,
.sirapix-pos-page .site-footer,
.sirapix-pos-page .footer-newsletter,
.sirapix-pos-page .footer-widgets,
.sirapix-pos-page .footer-main,
.sirapix-pos-page #search-modal,
.sirapix-pos-page #quick-view-modal,
.sirapix-pos-page #rz-popup-add-to-cart,
.sirapix-pos-page #cart-modal,
.sirapix-pos-page #mobile-menu-modal,
.sirapix-pos-page #gotop,
/* Common promo bars and compare popups on some themes */
.sirapix-pos-page #campaign-bar,
.sirapix-pos-page .campaign-bar,
.sirapix-pos-page .wcboost-products-compare-popup { display:none !important; }

.sirapix-pos-page .site-content,
.sirapix-pos-page #content,
.sirapix-pos-page article.page,
.sirapix-pos-page .entry-content { padding:0 !important; margin:0 !important; background:transparent !important; }

/* Remove any horizontal scrolling on POS page */
body.sirapix-pos-page { overflow-x:hidden; }

/* Ensure our POS wrapper is visible */
.sirapix-pos-page .sirapix-pos-wrapper { display:block; }

/* Bottom-left credit */
.sirapix-pos-powered { position:fixed; left:12px; bottom:10px; font-size:11px; color:#111827; text-decoration:none; opacity:.8; font-family: 'Inter', -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
.sirapix-pos-powered:hover { text-decoration:underline; opacity:1; }

/* Payment selector as pill toggles */
.sirapix-payment-select label { display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border:1px solid var(--spx-border,#E5E7EB); border-radius:999px; cursor:pointer; background:#fff; box-shadow: var(--spx-shadow-sm,0 2px 8px rgba(17,24,39,.06)); }
.sirapix-payment-select input[type="radio"] { appearance:none; -webkit-appearance:none; width:14px; height:14px; border:2px solid var(--spx-border,#E5E7EB); border-radius:999px; display:inline-block; position:relative; }
.sirapix-payment-select input[type="radio"]:checked { border-color: var(--spx-primary,#0ea5e9); box-shadow: 0 0 0 3px color-mix(in srgb, var(--spx-primary,#0ea5e9) 18%, transparent); }

/* Hide payment selector visually but keep it in DOM */
.sirapix-payment-select { display: none !important; }

/* Show origin selector explicitly */
.sirapix-origin .sirapix-payment-select { display:flex !important; gap:12px; }

/* Toast */
.spx-toast-container { position:fixed; right:16px; top:16px; z-index:2147483647; display:flex; flex-direction:column; gap:10px; font-family: 'Inter', -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
.spx-toast { display:flex; align-items:center; gap:10px; padding:10px 14px; background:#fff; color:var(--spx-text,#111827); border:1px solid var(--spx-border,#E5E7EB); border-radius:12px; box-shadow: var(--spx-shadow,0 8px 24px rgba(17,24,39,.06)); animation: spxToastIn .2s ease; font-family: inherit; }
.spx-toast.success { border-color: color-mix(in srgb, var(--spx-primary,#0ea5e9) 40%, var(--spx-border,#E5E7EB)); }
.spx-toast .icon { width:18px; height:18px; display:inline-block; }
@keyframes spxToastIn { from{ opacity:0; transform: translateY(6px);} to{ opacity:1; transform: translateY(0);} }

/* Overlay modal (order completion) */
body.spx-modal-open { overflow:hidden; }
.spx-modal-root { position:fixed; inset:0; display:none; z-index:2147483647; font-family: 'Inter', -apple-system, Segoe UI, Roboto, Arial, sans-serif; }

/* Variation drawer styles */
.spx-attr { margin:10px 0 8px; }
.spx-attr .lbl { font-size:13px; font-weight:600; color:#111827; margin-bottom:6px; }
.spx-attr .opts { display:flex; flex-wrap:wrap; gap:8px; }
.spx-pill { 
  display:inline-flex; align-items:center; justify-content:center; gap:6px; 
  padding:8px 12px; border:1px solid var(--spx-border,#E5E7EB); border-radius:999px; 
  background:#fff; color:#111827; cursor:pointer; user-select:none; 
  box-shadow: var(--spx-shadow-sm,0 2px 8px rgba(17,24,39,.06));
  transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.spx-pill:hover { border-color: color-mix(in srgb, var(--spx-primary,#0ea5e9) 40%, var(--spx-border,#E5E7EB)); box-shadow: var(--spx-shadow,0 8px 24px rgba(17,24,39,.08)); }
.spx-pill.active { background: color-mix(in srgb, var(--spx-primary,#0ea5e9) 14%, #fff 86%); border-color: var(--spx-primary,#0ea5e9); color:#0b3954; }
.spx-pill[data-disabled="1"] { opacity:.5; cursor:not-allowed; pointer-events:none; }
.spx-modal-overlay { position:absolute; inset:0; background: rgba(17,24,39,.45); backdrop-filter: blur(2px); }
.spx-modal { position:absolute; left:50%; top:50%; transform: translate(-50%, -50%); width:min(520px, 92vw); background:#fff; color:var(--spx-text,#111827); border:1px solid var(--spx-border,#E5E7EB); border-radius:12px; box-shadow: 0 20px 48px rgba(17,24,39,.18); overflow:hidden; font-family: inherit; }
.spx-modal-hd { display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid #eef2f7; font-weight:700; }
.spx-modal-hd .spx-modal-close { appearance:none; -webkit-appearance:none; border:1px solid var(--spx-border,#E5E7EB); background:#fff; width:28px; height:28px; border-radius:8px; cursor:pointer; }
.spx-modal-bd { padding:12px 14px; }
.spx-modal-bd .muted { color:#6B7280; font-size:13px; margin-bottom:6px; }
.spx-modal-bd .spx-list { list-style:none; padding:0; margin:6px 0; max-height:40vh; overflow:auto; }
.spx-modal-bd .spx-list .row { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 0; border-bottom:1px dashed #eef2f7; font-size:13px; }
.spx-modal-bd .spx-total { margin-top:8px; font-weight:800; text-align:right; }
.spx-modal-ft { display:flex; align-items:center; justify-content:flex-end; gap:8px; padding:12px 14px; border-top:1px solid #eef2f7; }