/* Atomic POS - scoped reset to avoid Flatsome/theme collisions */
.atomic-pos, .atomic-pos * { box-sizing: border-box; }
.atomic-pos img { max-width: 100%; height: auto; display: block; }
.atomic-pos button, .atomic-pos input, .atomic-pos textarea { font: inherit; }
.atomic-pos a { color: inherit; text-decoration: none; }

.atomic-pos{
  max-width: 1280px;
  margin: 0 auto;
  padding: 12px;
  font-family: inherit;
}

.atomic-pos__top{
  display: grid;
  gap: 12px;
  margin-bottom: 12px;
}

/* Search */
.atomic-pos__search{
  display: grid;
  grid-template-columns: 1fr 96px;
  gap: 10px;
}
.atomic-pos__search input{
  height: 52px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.12);
  padding: 0 14px;
  outline: none;
  background: #fff;
}
.atomic-pos__search button{
  height: 52px;
  border-radius: 14px;
  border: none;
  background: #111827;
  color: #fff;
  font-weight: 900;
  cursor: pointer;
}

/* Chips */
.atomic-pos__chips{ display:flex; gap:8px; flex-wrap:wrap; }
.atomic-pos__chip{
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  border-radius: 999px;
  padding: 10px 14px;
  cursor: pointer;
  font-weight: 900;
  line-height: 1;
}
.atomic-pos__chip.is-active{
  background:#111827;
  color:#fff;
  border-color:#111827;
}

/* Categories */
.atomic-pos__catsWrap{ display:grid; gap:10px; }
.atomic-pos__catsTitle{ font-weight: 900; }
.atomic-pos__cats{
  display:flex;
  gap:10px;
  overflow-x:auto;
  padding-bottom: 6px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.atomic-pos__cat{
  flex: 0 0 auto;
  min-width: 160px;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 16px;
  background: #fff;
  padding: 12px;
  cursor: pointer;
  scroll-snap-align: start;
  display:grid;
  gap:6px;
  text-align:right;
}
.atomic-pos__cat.is-active{ outline: 2px solid #111827; }
.atomic-pos__catName{ font-weight: 900; }
.atomic-pos__catCount{ font-size: 12px; opacity: .72; }
.atomic-pos__subcats{ opacity:.98; }

/* Layout: keep 2 columns on tablet (like your reference) */
.atomic-pos__layout{
  display:grid;
  grid-template-columns: 1.35fr .85fr;
  gap: 12px;
  align-items: start;
}

.atomic-pos__sectionTitle{
  font-weight: 900;
  margin: 4px 0 10px;
}

/* Products grid:
   - default (tablet): 2 columns (like screenshot/reference)
   - large screens: 3 columns
*/
.atomic-pos__grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

/* Product card: image on the LEFT visually (works fine in RTL) */
.atomic-pos__card{
  border: 1px solid rgba(0,0,0,.10);
  background:#fff;
  border-radius: 16px;
  overflow:hidden;
  display: flex;
    flex-direction: column;
  min-height: 108px;
}
.atomic-pos__thumb{
  background: rgba(0,0,0,.03);
}
.atomic-pos__thumb img{
  width:100%;
  height:100%;
  object-fit: cover;
}
.atomic-pos__cardBody{
  padding: 10px 12px;
  display:grid;
  gap: 6px;
  min-width: 0;
}
.atomic-pos__name{
  font-weight: 900;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.atomic-pos__meta{
  font-size: 12px;
  opacity: .8;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}
.atomic-pos__bottom{
  display:flex;
  align-items:stretch;
  flex-direction:column;
  gap: 10px;
}
.atomic-pos__price{
  font-weight: 900;
  font-size: 13px;
  white-space: nowrap;
}
.atomic-pos__btn{
	width:100%;
  border:none;
  border-radius: 12px;
  height: 40px;
  padding: 0 14px;
  background: #16a34a;
  color:#fff;
  font-weight: 900;
  cursor:pointer;
}
.atomic-pos__btn:disabled{
  background:#9ca3af;
  cursor:not-allowed;
}

.atomic-pos__empty{
  display:none;
  padding: 18px;
  text-align:center;
  border:1px dashed rgba(0,0,0,.18);
  border-radius: 16px;
  opacity:.8;
}

/* Cart */
.atomic-pos__cartBox{
  border:1px solid rgba(0,0,0,.10);
  border-radius: 16px;
  background:#fff;
  overflow:hidden;
  position: sticky;
  top: 12px;
}
.atomic-pos__cartItems{
  padding: 10px;
  display:grid;
  gap: 10px;
  max-height: calc(100vh - 280px);
  overflow:auto;
}
.atomic-pos__emptySmall{ text-align:center; padding: 14px; opacity:.75; }
.atomic-pos__cartRow{
  border:1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  padding: 10px;
  display:grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items:center;
}
.atomic-pos__cartName{ font-weight: 900; line-height: 1.2; }
.atomic-pos__cartMeta{
  font-size: 12px;
  opacity: .75;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.atomic-pos__qty{
  display:grid;
  grid-template-columns: 40px 36px 40px;
  gap: 6px;
  align-items:center;
}
.atomic-pos__qtyBtn{
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.12);
  background:#fff;
  font-size: 18px;
  font-weight: 900;
  cursor:pointer;
}
.atomic-pos__qtyVal{ text-align:center; font-weight: 900; }

.atomic-pos__cartFooter{
  border-top: 1px solid rgba(0,0,0,.10);
  padding: 10px;
  display:grid;
  gap: 10px;
}
.atomic-pos__row{
  display:flex;
  align-items:center;
  justify-content: space-between;
}
.atomic-pos textarea{
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.12);
  padding: 10px;
  outline: none;
  resize: none;
}
.atomic-pos__actions{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.atomic-pos__actions button{
  height: 48px;
  border-radius: 14px;
  border: none;
  font-weight: 900;
  cursor:pointer;
}
.atomic-pos__actions .is-muted{ background:#e5e7eb; color:#111827; }
.atomic-pos__actions .is-primary{ background:#111827; color:#fff; }

.atomic-pos__msg{
  min-height: 20px;
  font-weight: 900;
}
.atomic-pos__msg[data-type="error"]{ color:#b91c1c; }
.atomic-pos__msg[data-type="success"]{ color:#166534; }

/* Large screens: 3 columns products */
@media (min-width: 1180px){
  .atomic-pos__grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Small tablets / phones: stack */
@media (max-width: 820px){
  .atomic-pos__layout{ grid-template-columns: 1fr; }
  .atomic-pos__cartBox{ position: relative; top: 0; }
  .atomic-pos__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Phones */
@media (max-width: 540px){
  .atomic-pos__grid{ grid-template-columns: 1fr; }
  .atomic-pos__search{ grid-template-columns: 1fr 84px; }
  .atomic-pos__cat{ min-width: 140px; }
}