.vtph-image-cell {
	vertical-align: middle;
	text-align: center;
	width: 90px;
	min-width: 90px;
}

.vtph-product-thumb {
	width: 80px;
	height: 80px;
	object-fit: cover;
	border-radius: 4px;
	display: inline-block;
	background: #f3f4f6;
}

.vtph-no-image {
	color: #9ca3af;
	font-size: 0.875rem;
}

/* POS product grid — hide cart icon on product cards (all breakpoints) */
.ps.item-container .card .add-to-cart.v-popper--has-tooltip:not( .stock-counter ),
.item-container .card .add-to-cart.v-popper--has-tooltip:not( .stock-counter ),
.ps.item-container .card .add-to-cart:not( .stock-counter ):has( .vps-shopping-cart ),
.item-container .card .add-to-cart:not( .stock-counter ):has( .vps-shopping-cart ) {
	display: none !important;
}

/* POS product grid — price left, stock counter right */
.ps.item-container .card .vtph-price-stock-row,
.item-container .card .vtph-price-stock-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
}

.ps.item-container .card .vtph-price-stock-row .ad-price,
.item-container .card .vtph-price-stock-row .ad-price {
	flex: 1;
	min-width: 0;
}

.ps.item-container .card .vtph-stock-meta-row,
.item-container .card .vtph-stock-meta-row {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

.ps.item-container .card .vtph-stock-meta-row .item-badge,
.item-container .card .vtph-stock-meta-row .item-badge {
	position: static !important;
	top: auto !important;
	right: auto !important;
	bottom: auto !important;
	left: auto !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	flex-shrink: 0;
	background: #164378;
	color: #fff;
}

/* ≤1024px — “new” badge over product image (top left) */
@media ( max-width: 1024px ) {
	.ps.item-container .card .vtph-stock-meta-row .item-badge,
	.item-container .card .vtph-stock-meta-row .item-badge,
	.ps.item-container .card .item-badge,
	.item-container .card .item-badge {
		position: absolute !important;
		top: 8px !important;
		left: 8px !important;
		right: auto !important;
		bottom: auto !important;
		z-index: 2;
		margin: 0;
	}

	.card-body {
		padding: 5px;
	}
}

.ps.item-container .card .vtph-price-stock-row .add-to-cart.stock-counter,
.item-container .card .vtph-price-stock-row .add-to-cart.stock-counter,
.ps.item-container .card .vtph-stock-meta-row .add-to-cart.stock-counter,
.item-container .card .vtph-stock-meta-row .add-to-cart.stock-counter {
	position: static !important;
	top: auto !important;
	right: auto !important;
	bottom: auto !important;
	left: auto !important;
	flex-shrink: 0;
	margin: 0;
}

.ps.item-container .card span.add-to-cart.stock-counter.v-popper--has-tooltip,
.item-container .card span.add-to-cart.stock-counter.v-popper--has-tooltip {
	border-radius: 15px;
	padding: 0 10px;
	background: #f8f6ec;
	width: auto;
	min-height: 30px;
	height: auto;
	font-size: 14px;
}

.ps.item-container .card span.add-to-cart.stock-counter.instock.v-popper--has-tooltip:hover,
.item-container .card span.add-to-cart.stock-counter.instock.v-popper--has-tooltip:hover {
	color: #000 !important;
}

.invoice-POS h1 {
	font-size: 18px !important;
}

.invoice-POS #table thead tr.tabletitle th {
	text-align: center !important;
}

.invoice-POS .item-head-image,
.invoice-POS td.item-image {
	width: 60px;
	min-width: 60px;
	padding: 4px;
	vertical-align: middle;
	text-align: center;
}

.invoice-POS .vtph-order-item-thumb {
	width: 60px;
	height: 60px;
	object-fit: cover;
	border-radius: 4px;
	display: inline-block;
	background: #f3f4f6;
}

.invoice-POS .vtph-order-item-thumb-sm {
	width: 40px;
	height: 40px;
}

.alert-panel .invoice-POS .item-head-image,
.alert-panel .invoice-POS td.item-image,
.alert-panel .invoice-POS .vtph-order-item-image-head,
.alert-panel .invoice-POS .vtph-order-item-image {
	width: 52px;
	min-width: 52px;
	max-width: 52px;
	padding: 4px !important;
	overflow: hidden;
	box-sizing: border-box;
}

.alert-panel .invoice-POS .vtph-order-item-thumb-sm {
	width: 36px;
	height: 36px;
	max-width: 100%;
}

.alert-panel .printingPreview .invoice-POS #table thead th.item-head-sl,
.alert-panel .printingPreview .invoice-POS #table tbody tr.service td.item-sl {
	width: 28px;
	min-width: 28px;
	max-width: 28px;
	padding: 4px 2px !important;
	overflow: hidden;
	box-sizing: border-box;
	position: static;
}

.alert-panel .printingPreview .invoice-POS .service .item-sl p,
.alert-panel .printingPreview .invoice-POS .service .item-sl .itemtext {
	position: static !important;
	top: auto !important;
	margin: 0;
}

.invoice-POS .item-head-sku,
.invoice-POS td.item-sku {
	min-width: 90px;
	padding: 4px 6px;
	vertical-align: middle;
	text-align: center;
	word-break: break-word;
}

.invoice-POS .item-head-barcode,
.invoice-POS td.item-barcode,
.invoice-POS #table thead th.vtph-order-item-barcode-head,
.invoice-POS #table tbody tr.service td.vtph-order-item-barcode {
	width: 105px;
	max-width: 105px;
	min-width: 105px;
	padding: 4px 6px;
	vertical-align: middle;
	text-align: center;
	white-space: nowrap;
	word-break: normal;
	overflow: hidden;
}

.invoice-POS #table thead th.vtph-order-item-discount-price-head {
	width: 70px;
	max-width: 70px;
	min-width: 0;
	padding: 4px 6px;
	vertical-align: middle;
	text-align: center;
	white-space: normal;
	line-height: 1.2;
	overflow-wrap: break-word;
	word-break: normal;
}

.invoice-POS #table tbody tr.service td.vtph-order-item-discount-price {
	width: 70px;
	max-width: 70px;
	min-width: 0;
	padding: 4px 6px;
	vertical-align: middle;
	text-align: center;
	white-space: nowrap;
}

.invoice-POS #table tbody tr.service td {
	text-align: center !important;
}

.vtph-refund-item-image-head,
.vtph-refund-item-image {
	width: 90px;
	min-width: 90px;
	padding: 4px;
	vertical-align: middle;
	text-align: center;
}

.vtph-refund-item-sku-head,
.vtph-refund-item-sku {
	min-width: 120px;
	padding: 4px 6px;
	vertical-align: middle;
	text-align: left;
	word-break: break-word;
}

/* Checkout success receipt — fit wide invoice table without horizontal scroll */
.vt-pos-alert-box .alert-panel {
	width: calc( 170mm + 170px );
	max-width: calc( 100vw - 48px );
	box-sizing: border-box;
}

.vt-pos-alert-box .alert-panel .printingPreview {
	width: 100% !important;
	max-width: 100%;
	overflow: visible;
}

.vt-pos-alert-box .alert-panel .printingPreview .preview-pnl-invoice,
.vt-pos-alert-box .alert-panel .printingPreview .invoice-POS,
.vt-pos-alert-box .alert-panel .printingPreview .invoice-POS #table,
.vt-pos-alert-box .alert-panel .printingPreview .invoice-POS #table table {
	width: 100%;
	max-width: 100%;
}

/* Order Details popup — wider modal for Image / SKU / Barcode columns */
.modal-dialog.modal-md:has( .printingPreview ),
.modal-dialog.modal-md:has( .invoice-POS ) {
	--bs-modal-width: 700px;
	max-width: 700px;
}

/* Invoice line-item table — bordered grid (Order Details modal + checkout receipt) */
.modal-dialog.modal-md:has( .invoice-POS ) .invoice-POS #table table,
.alert-panel .printingPreview .invoice-POS #table table {
	border-collapse: collapse;
}

.modal-dialog.modal-md:has( .invoice-POS ) .invoice-POS #table thead tr.tabletitle th,
.modal-dialog.modal-md:has( .invoice-POS ) .invoice-POS #table tbody tr.service td,
.alert-panel .printingPreview .invoice-POS #table tbody tr.service td {
	border: 1px solid #000;
	padding: 8px 10px;
	vertical-align: middle;
}

.alert-panel .printingPreview .invoice-POS #table thead tr.tabletitle th {
	border: 1px solid #000;
	padding: 8px 5px;
	vertical-align: middle;
}

.modal-dialog.modal-md:has( .invoice-POS ) .invoice-POS #table tbody tr.service,
.modal-dialog.modal-md:has( .invoice-POS ) .invoice-POS #table tbody tr.service.item-name,
.alert-panel .printingPreview .invoice-POS #table tbody tr.service,
.alert-panel .printingPreview .invoice-POS #table tbody tr.service.item-name {
	border-bottom: 0;
}

.modal-dialog.modal-md:has( .invoice-POS ) .invoice-POS #table tbody tr.service td .itemtext,
.alert-panel .printingPreview .invoice-POS #table tbody tr.service td .itemtext {
	margin: 0;
	line-height: 1.35;
}

.modal-dialog.modal-md:has( .invoice-POS ) .invoice-POS #table tbody tr.service td.item-image,
.alert-panel .printingPreview .invoice-POS #table tbody tr.service td.item-image {
	padding: 4px !important;
	overflow: hidden;
	box-sizing: border-box;
}

/* Order Details popup — column width balance */
.modal-dialog.modal-md:has( .invoice-POS ) .invoice-POS #table thead th.subtotal-head,
.modal-dialog.modal-md:has( .invoice-POS ) .invoice-POS #table tbody tr.service td:last-child {
	width: calc( 20mm - 10px ) !important;
	min-width: calc( 20mm - 10px );
	max-width: calc( 20mm - 10px );
}

.modal-dialog.modal-md:has( .invoice-POS ) .invoice-POS #table thead th.item-head.text-start:not( .item-head-image ):not( .item-head-sku ):not( .item-head-barcode ),
.modal-dialog.modal-md:has( .invoice-POS ) .invoice-POS #table tbody tr.service td.item-name {
	min-width: 180px;
	width: 30%;
}

.modal-dialog.modal-md:has( .invoice-POS ) .invoice-POS #table thead th.item-head-barcode,
.modal-dialog.modal-md:has( .invoice-POS ) .invoice-POS #table tbody tr.service td.item-barcode,
.modal-dialog.modal-md:has( .invoice-POS ) .invoice-POS #table tbody tr.service td.vtph-order-item-barcode {
	min-width: 105px;
	width: 105px;
	max-width: 105px;
	white-space: nowrap;
	word-break: normal;
}

/* Checkout receipt — column width balance */
.alert-panel .printingPreview .invoice-POS #table thead th.subtotal-head,
.alert-panel .printingPreview .invoice-POS #table tbody tr.service td:last-child {
	width: calc( 27mm - 20px ) !important;
	min-width: calc( 27mm - 20px );
	max-width: calc( 27mm - 20px );
}

.alert-panel .printingPreview .invoice-POS #table thead th.item-head.text-start:not( .item-head-image ):not( .item-head-sku ):not( .item-head-barcode ),
.alert-panel .printingPreview .invoice-POS #table tbody tr.service td.item-name {
	min-width: 180px;
}

.alert-panel .printingPreview .invoice-POS #table thead th.item-head-barcode,
.alert-panel .printingPreview .invoice-POS #table tbody tr.service td.item-barcode,
.alert-panel .printingPreview .invoice-POS #table tbody tr.service td.vtph-order-item-barcode {
	min-width: 105px;
	width: 105px;
	max-width: 105px;
	white-space: nowrap;
	word-break: normal;
}

/* Checkout — Price column width */
.alert-panel .printingPreview .invoice-POS #table thead th.item-head.text-center:not( .item-head-image ):not( .item-head-sku ):not( .item-head-barcode ):not( .vtph-order-item-discount-price-head ),
.alert-panel .printingPreview .invoice-POS #table tbody tr.service td.unit-price,
.alert-panel .printingPreview .invoice-POS #table tbody tr.service td.tableitem.unit-price {
	width: 10%;
	min-width: 0;
	max-width: 10%;
	white-space: nowrap;
	box-sizing: border-box;
}

/* Checkout — Quantity matches Price only when Disc. column is absent */
.alert-panel .printingPreview .invoice-POS #table.vtph-no-disc-col thead th.qty-head,
.alert-panel .printingPreview .invoice-POS #table.vtph-no-disc-col tbody tr.service td.item-qty,
.alert-panel .printingPreview .invoice-POS #table:not( :has( .vtph-order-item-discount-price-head ) ) thead th.qty-head,
.alert-panel .printingPreview .invoice-POS #table:not( :has( .vtph-order-item-discount-price-head ) ) tbody tr.service td.item-qty {
	width: 10%;
	min-width: 0;
	max-width: 10%;
	white-space: nowrap;
	box-sizing: border-box;
}

.invoice-POS .subtotal-value {
	width: 22mm !important;
}

.vtph-customer-priority-field .form-control {
	width: 100%;
}

/* Refund Orders and other large modals — room for Image / SKU columns */
@media ( min-width: 992px ) {
	.modal-lg,
	.modal-xl {
		--bs-modal-width: 900px;
		max-width: 900px;
	}
}

/* Mobile — tighter product card body padding */
@media ( max-width: 767.98px ) {
	.main-container .main-body.small-devices .col .card-body {
		padding: 0.5rem 5px 0 5px;
	}
}

/* Tablet / small — 3 product columns */
@media ( min-width: 480px ) and ( max-width: 767.98px ) {
	.row-cols-md-5 > * {
		width: 33%;
	}
}

@media ( min-width: 768px ) {
	.row-cols-md-5 > * {
		width: 25%;
	}
}

@media ( max-width: 768px ) {
	.ps.item-container .card .vtph-price-stock-row,
	.item-container .card .vtph-price-stock-row {
		margin-bottom: 8px;
	}

	.ps.item-container .card span.add-to-cart.stock-counter.v-popper--has-tooltip,
	.item-container .card span.add-to-cart.stock-counter.v-popper--has-tooltip {
		font-size: 14px;
		line-height: 1.5;
		min-height: 20px;
	}

	.ps.item-container .card .vtph-stock-meta-row .item-badge,
	.item-container .card .vtph-stock-meta-row .item-badge {
		line-height: 2;
		padding: 0;
	}
}