/* ===================================== */
/* CPLUS POS GOODS (ISOLATED)            */
/* ROOT: Pos-goods-html                  */
/* ===================================== */

.Pos-goods-html .cpos-products {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
  gap: 10px !important;
}

/* CARD */
.Pos-goods-html .cpos-card {
  border-radius: 12px !important;
  padding: 10px !important;
  min-height: 90px !important;
  color: #fff !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 3px 8px rgba(0,0,0,0.12) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

/* HOVER */
.Pos-goods-html .cpos-card:hover {
  transform: scale(1.04) !important;
}

/* CLICK */
.Pos-goods-html .cpos-card:active {
  transform: scale(0.96) !important;
}

/* ICON */
.Pos-goods-html .cpos-img {
  font-size: 26px !important;
  line-height: 1 !important;
}

/* TITLE */
.Pos-goods-html .cpos-title {
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
}

/* PRICE */
.Pos-goods-html .cpos-price {
  font-size: 14px !important;
  font-weight: bold !important;
}

/* COLORS */
.Pos-goods-html .cpos-purple { background: linear-gradient(135deg, #a18cd1, #6a4bc3) !important; }
.Pos-goods-html .cpos-blue   { background: linear-gradient(135deg, #4facfe, #00c6ff) !important; }
.Pos-goods-html .cpos-orange { background: linear-gradient(135deg, #f7971e, #ff6a00) !important; }
.Pos-goods-html .cpos-green  { background: linear-gradient(135deg, #43e97b, #38f9d7) !important; }
.Pos-goods-html .cpos-red    { background: linear-gradient(135deg, #f85032, #e73827) !important; }

/* ===================================== */
/* RESPONSIVE                            */
/* ===================================== */

@media (max-width: 1200px) {
  .Pos-goods-html .cpos-products {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

@media (max-width: 1024px) {
  .Pos-goods-html .cpos-products {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 768px) {
  .Pos-goods-html .cpos-products {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 480px) {
  .Pos-goods-html .cpos-products {
    grid-template-columns: repeat(1, 1fr) !important;
  }
}