/* Mesin Kasir: penyelesaian tata letak katalog, keranjang, dan pembayaran. */
.main.pos-main {
  padding-right: 14px;
  padding-bottom: 14px;
}

.pos-layout {
  grid-template-columns: minmax(0, 1fr) clamp(370px, 24vw, 410px);
  gap: 18px;
}

.pos-catalog {
  padding: 11px;
  border-radius: 22px;
  border-color: rgba(112, 103, 151, .12);
  background: rgba(255, 254, 250, .58);
  box-shadow: 0 12px 34px rgba(48, 44, 72, .055), inset 0 1px 0 rgba(255, 255, 255, .95);
}

.pos-tools {
  min-height: 58px;
  margin-bottom: 10px;
  padding: 8px;
  gap: 8px;
  border-radius: 17px;
}

.pos-tools select,
.pos-tools .search input,
.pos-search input {
  min-height: 42px;
  border-radius: 11px;
}

.pos-tools .btn,
.pos-tools .view-toggle {
  min-height: 42px;
}

.pos-tools .view-toggle button {
  width: 36px;
  min-height: 36px;
  padding: 8px;
  border-radius: 9px;
}

.pos-search {
  margin-bottom: 14px;
  padding: 4px;
  border-radius: 16px;
}

.pos-search .search .icon {
  top: 13px;
  left: 14px;
}

.pos-products {
  margin-top: 0;
  padding: 3px 5px 7px 2px;
  scrollbar-color: rgba(111, 95, 199, .30) transparent;
}

.pos-products .product-grid:not(.list-view) {
  grid-template-columns: repeat(auto-fill, minmax(215px, 238px));
  grid-auto-rows: max-content;
  justify-content: start;
  align-items: start;
  gap: 15px;
}

.pos-products .product-grid:not(.list-view) .marketplace-card {
  align-self: start;
  min-height: 428px;
  border-radius: 18px;
  border-color: rgba(94, 84, 143, .14);
  box-shadow: 0 8px 24px rgba(45, 41, 70, .07), inset 0 1px 0 #fff;
  transition: transform .22s cubic-bezier(.2, .72, .2, 1), border-color .22s ease, box-shadow .22s ease;
}

.pos-products .product-grid:not(.list-view) .marketplace-media {
  aspect-ratio: 1.18 / 1;
}

.pos-products .product-grid:not(.list-view) .marketplace-content {
  min-height: 226px;
  padding: 12px;
}

.pos-products .marketplace-card .product-brand-row {
  margin-bottom: 8px;
}

.pos-products .marketplace-card .product-brand {
  border-radius: 7px;
}

.pos-products .marketplace-card .spec-btn {
  padding-inline: 6px;
  border-radius: 7px;
}

.pos-products .product-grid:not(.list-view) .marketplace-card h4 {
  height: 42px;
  min-height: 42px;
  max-height: 42px;
  color: #292d3c;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 21px;
}

.pos-products .marketplace-price-panel {
  padding: 10px 10px 8px;
  border-color: rgba(100, 87, 188, .12);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(249, 247, 255, .96), rgba(255, 254, 250, .98));
}

.pos-products .marketplace-card .product-price {
  font-size: 17px;
}

.pos-products .marketplace-card .marketplace-add {
  width: 36px;
  height: 36px;
  min-height: 36px;
  flex-basis: 36px;
  border-radius: 12px;
}

.pos-products .marketplace-card .product-meta {
  grid-template-columns: minmax(0, 1.12fr) minmax(83px, .88fr);
  gap: 8px;
}

.pos-products .marketplace-card .wholesale,
.pos-products .marketplace-card .stock-unit {
  min-height: 62px;
  padding: 8px;
  border-radius: 10px;
}

.pos-products .marketplace-card .product-meta strong {
  font-size: 10.5px;
}

@media (hover: hover) and (pointer: fine) {
  .pos-products .product-grid:not(.list-view) .marketplace-card:not(.out-of-stock):hover {
    transform: translateY(-3px);
    border-color: rgba(96, 80, 215, .30);
    box-shadow: 0 16px 34px rgba(68, 57, 145, .13), inset 0 1px 0 #fff;
  }
}

.pos-catalog .pagination {
  min-height: 48px;
  margin: 7px -1px -1px;
  padding: 9px 5px 1px;
  border-radius: 0 0 15px 15px;
}

.pos-catalog .pagination .actions {
  gap: 8px;
}

.pos-catalog .pagination .btn,
.pos-catalog .pagination select {
  min-height: 34px;
  border-radius: 10px;
}

.cart {
  border-radius: 22px;
  border-color: rgba(98, 85, 173, .16);
  box-shadow: 0 18px 44px rgba(50, 43, 91, .12), inset 0 1px 0 #fff;
}

.cart-header {
  min-height: 59px;
  padding: 11px 14px;
  gap: 10px;
  background: linear-gradient(115deg, #5368ed 0%, #6658e4 56%, #7354df 100%);
  font-size: 13px;
  font-weight: 750;
}

.cart-header > .icon {
  box-sizing: content-box;
  width: 18px;
  height: 18px;
  padding: 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .13);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
}

.cart-header .badge {
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 750;
}

.cart-items {
  padding: 12px;
  background:
    radial-gradient(circle at 50% 40%, rgba(235, 231, 255, .34), transparent 34%),
    linear-gradient(180deg, #fffefa, #fbfaf7);
}

.cart-empty {
  min-height: 260px;
  padding: 34px 24px;
  text-align: center;
}

.cart-empty .icon {
  box-sizing: content-box;
  width: 28px;
  height: 28px;
  margin-bottom: 16px;
  padding: 17px;
  border: 1px solid rgba(107, 91, 206, .10);
  border-radius: 19px;
  color: #7468d7;
  background: linear-gradient(145deg, #f8f5ff, #efedfb);
  box-shadow: 0 10px 24px rgba(80, 67, 154, .09), inset 0 1px 0 #fff;
}

.cart-empty h4 {
  margin-bottom: 7px;
  color: #4e5368;
  font-size: 14px;
  font-weight: 750;
}

.cart-empty p {
  max-width: 230px;
  color: #a09dac;
  font-size: 10.5px;
  line-height: 1.55;
}

.cart-row {
  padding: 12px;
  border-radius: 14px;
  box-shadow: 0 7px 20px rgba(46, 41, 73, .055), inset 0 1px 0 #fff;
}

.cart-bottom {
  padding: 12px;
  border-top-color: rgba(111, 101, 151, .11);
  background: linear-gradient(180deg, #fffefa, #faf8f4);
}

.customer-box {
  margin-bottom: 9px;
  padding: 10px;
  border-radius: 13px;
}

.customer-box label {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #827e99;
  font-size: 9px;
  font-weight: 750;
}

.customer-box label .icon {
  width: 15px;
  height: 15px;
}

.customer-box select {
  min-height: 38px;
  border-radius: 9px;
}

.cart-details {
  margin: 7px 1px 10px;
  color: #77788a;
  font-size: 10px;
}

.cart-details summary {
  padding: 3px 0;
}

.bill {
  min-height: 70px;
  margin-bottom: 9px;
  padding: 12px;
  border-radius: 13px;
  background: linear-gradient(125deg, #f6f3ff 0%, #fffdfa 100%);
}

.bill label {
  color: #817b9e;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .025em;
}

.bill small {
  color: #a09cab;
  font-size: 9px;
}

.bill strong {
  color: #5d61e3;
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
}

.payment-row {
  gap: 8px;
}

.payment-row input,
.payment-row select {
  min-height: 38px;
  border-radius: 9px;
}

.change-row {
  min-height: 37px;
  margin: 6px 0;
}

.change-row button {
  min-height: 31px;
  border-radius: 8px;
}

.pay-btn {
  height: 46px;
  border-radius: 12px;
  box-shadow: 0 10px 22px rgba(81, 87, 220, .20);
}

.pay-btn:disabled {
  box-shadow: none;
  opacity: .52;
}

@media (min-width: 761px) and (max-width: 1190px) {
  .pos-layout {
    grid-template-columns: minmax(0, 1fr) 350px;
    gap: 12px;
  }

  .pos-products .product-grid:not(.list-view) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
  }
}

@media (min-width: 761px) and (max-width: 1450px) {
  .pos-tools {
    display: grid;
    grid-template-columns: 170px minmax(190px, 1fr) auto auto;
    align-items: center;
  }

  .pos-tools > select,
  .pos-tools > .search {
    width: 100%;
  }

  .pos-tools > .btn.green {
    grid-column: 3;
  }

  .pos-tools > .view-toggle {
    grid-column: 4;
    width: max-content;
    justify-self: end;
  }
}

@media (max-width: 760px) {
  .main.pos-main {
    padding-inline: 9px;
    padding-bottom: 12px;
  }

  .pos-layout {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .pos-catalog {
    padding: 7px;
    border-radius: 17px;
  }

  .pos-products .product-grid:not(.list-view) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .pos-products .product-grid:not(.list-view) .marketplace-card {
    min-height: 0;
  }

  .pos-products .product-grid:not(.list-view) .marketplace-content {
    min-height: 210px;
    padding: 9px;
  }

  .pos-products .marketplace-card .product-meta {
    grid-template-columns: 1fr;
  }

  .cart {
    min-height: 520px;
    border-radius: 18px;
  }
}

@media (max-width: 420px) {
  .pos-products .product-grid:not(.list-view) {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pos-products .marketplace-card,
  .pos-products .marketplace-media .product-image,
  .pay-btn {
    transition: none !important;
  }
}