.gp-app a.gp-key-nav.active,
.gp-app a.gp-key-nav.active:hover {
	color: var(--gp-solid-ink);
}

.gp-app a.gp-card,
.gp-app a.gp-card:hover {
	color: var(--gp-ink);
}

.gp-app a.gp-chip.active,
.gp-app a.gp-chip.active:hover {
	color: var(--gp-solid-ink);
}

.gp-btn-lg {
	height: auto;
	min-height: 58px;
	padding: 15px 28px;
	font-size: 16px;
}

/* Emitted by the seeded dual.list.js library (card titles) — keep even though no template uses it directly */
.gap-1-5 {
	gap: 0.5625rem !important;
}

.gp-app .invalid-feedback {
	display: none;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 13px;
	font-weight: 600;
	text-align: center;
}

.gp-app .invalid-feedback li {
	list-style: none;
}

.pos-shell {
	height: 100vh;
	min-height: 780px;
	display: flex;
}

.pos-shell-app {
	gap: 14px;
	padding: 14px;
}

.pos-disabled {
	opacity: .45;
	pointer-events: none;
}

/* Round keys are circles by contract: as flex items they must never be squeezed into ovals
   by long text beside them — the text column shrinks and wraps instead. */
.gp-app .gp-key {
	flex-shrink: 0;
}

.pos-auth {
	position: relative;
	flex: 1;
	min-width: 0;
	min-height: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.pos-auth-background {
	position: absolute;
	inset: 0;
	background-color: var(--gp-bg);
	background-image: linear-gradient(145deg, color-mix(in oklab, var(--gp-bg), white 12%), var(--gp-bg));
	background-size: cover;
	background-position: center;
}

.pos-auth-card {
	position: relative;
	width: 344px;
	max-width: 100%;
	max-height: 94vh;
	overflow-y: auto;
	border-radius: 32px;
	padding: 36px 30px 30px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 26px;
}

.pos-auth-brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

.pos-auth-logo {
	height: 48px;
	max-width: 220px;
	object-fit: contain;
	animation: gp-fsbar .45s ease .1s both;
}

.pos-auth-title {
	font-size: 19px;
	font-weight: 600;
	letter-spacing: -0.035em;
	animation: gp-fsbar .5s ease .3s both;
}

.pos-auth-footer {
	font-size: 12px;
	color: var(--gp-ink-55);
}

.pos-auth-card-wide {
	width: 420px;
}

.pos-auth-text {
	max-width: 320px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--gp-ink-55);
	text-align: center;
}

.pos-lock-employee {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 7px 14px;
	border-radius: 999px;
	background: var(--gp-f07);
	border: 1px solid var(--gp-ln2);
	font-size: 13px;
	font-weight: 600;
}

.pos-location-options {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.pos-location-option {
	width: 100%;
	flex-direction: column;
	gap: 2px;
}

.pos-location-option-code {
	color: var(--gp-ink-55);
	font-weight: 400;
}

.pos-location-option-city {
	font-size: 12px;
	font-weight: 400;
	color: var(--gp-ink-55);
}

/* Kit plan §8 amber — warning surfaces (impersonation state) */
.gp-app button.pos-nav-impersonation,
.gp-app button.pos-nav-impersonation:hover {
	color: #D9A05B;
	border-color: color-mix(in srgb, #D9A05B 45%, transparent);
	background: color-mix(in srgb, #D9A05B 14%, transparent);
}

.pos-pin {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 26px;
}

.pos-pin-display {
	display: flex;
}

.pos-pin-dots {
	gap: 13px;
}

.pos-pin-dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--gp-ink-40);
	transition: background .15s ease;
}

.pos-pin-dot.filled {
	background: var(--gp-ink);
}

.pos-pin-boxes {
	gap: 10px;
}

.pos-pin-box {
	width: 44px;
	height: 54px;
	border-radius: 14px;
	background: var(--gp-f07);
	border: 1px solid var(--gp-ln2);
	display: flex;
	align-items: center;
	justify-content: center;
	font: 600 22px 'Sora', sans-serif;
	color: var(--gp-ink);
	transition: border-color .15s ease;
}

.pos-pin-box.filled {
	border-color: var(--gp-ln3);
}

.pos-pin-pad {
	display: grid;
	grid-template-columns: repeat(3, 74px);
	gap: 15px;
	justify-items: center;
}

.pos-nav {
	width: 78px;
	flex-shrink: 0;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 20px 0 16px;
}

.pos-nav .gp-logo {
	gap: 3px;
	margin-bottom: 14px;
}

.pos-nav-disabled {
	opacity: .35;
	pointer-events: none;
	cursor: default;
}

.pos-nav-employee {
	width: 44px;
	height: 44px;
	background: var(--gp-f14);
	border-color: var(--gp-ln2);
	font-size: 12px;
	font-weight: 600;
	cursor: default;
}

/* Notification bell in the nav rail: badge shows the number of unread notifications (polling) */
.gp-app .pos-nav-bell {
	position: relative;
}

.pos-nav-badge {
	position: absolute;
	top: -4px;
	right: -4px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 9px;
	background: #E05B5B;
	color: #ffffff;
	font-size: 10px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
}

/* Look & feel panel (nav rail): the kit's exact spacing rhythm (buildSettings in pos-nav.js) —
   24px card padding, title block 18px, label 8px above its content, 16px between sections
   (18px after the background swatches), slider head 6px, footer 4px extra. */
/* Doubled class selector: .pos-dialog-card is defined later in this file and would otherwise
   win the padding/gap tie on specificity order. */
.pos-dialog-card.pos-layout-card {
	padding: 24px;
	gap: 0;
}

/* Kit: a single-line modal title is vertically centered against the 44px close key */
.pos-layout-card .pos-dialog-header {
	align-items: center;
	margin-bottom: 18px;
}

.pos-layout-card .pos-dialog-body {
	gap: 0;
}

.pos-layout-card .pos-dialog-label {
	margin: 0 0 8px;
}

.pos-layout-card .pos-dialog-segment {
	margin-bottom: 16px;
}

.pos-layout-card .pos-layout-swatches {
	margin-bottom: 16px;
}

.pos-layout-card [data-meriad-custom-part="layout-background-section"] .pos-layout-swatches {
	margin-bottom: 18px;
}

.pos-layout-card .pos-layout-slider-head {
	margin-bottom: 6px;
}

.pos-layout-card .pos-layout-slider {
	margin-bottom: 16px;
}

.pos-layout-card .pos-dialog-footer {
	margin-top: 4px;
}

.pos-layout-swatches {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.pos-layout-swatch {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1px solid var(--gp-ln2);
	padding: 0;
	cursor: pointer;
	outline-offset: 2px;
}

.pos-layout-swatch.active {
	outline: 2px solid var(--gp-ink);
}

.pos-layout-swatch-custom {
	position: relative;
	display: inline-flex;
	background: conic-gradient(#E5484D, #F5C242, #5BB98C, #3FD9C2, #3E82AC, #7A6FF0, #B0509F, #E5484D);
}

.pos-layout-swatch-custom input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}

.pos-layout-section-disabled {
	opacity: .35;
	pointer-events: none;
}

.pos-layout-slider-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
}

.pos-layout-slider-value {
	font-size: 12px;
	font-weight: 600;
	color: var(--gp-ink-65);
}

.pos-layout-slider {
	width: 100%;
	accent-color: var(--gp-accent);
	cursor: pointer;
}

.pos-products {
	flex: 1;
	min-width: 0;
	min-height: 0;
	gap: 14px;
	padding: 20px;
}

.pos-products-header {
	gap: 14px;
	row-gap: 10px;
	flex-shrink: 0;
}

.pos-panel-title {
	font-size: 21px;
	font-weight: 600;
	letter-spacing: -0.02em;
}

.pos-panel-subtitle {
	font-size: 12px;
	margin-top: 2px;
}

.pos-search {
	flex: 1;
	min-width: 200px;
	max-width: 360px;
}

/* Camera-scan trigger inside the search pill: sits flush against the right edge without changing
   the pill's height, and grows its tap target with negative margins instead of extra padding. */
.pos-scan-button {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 34px;
	height: 34px;
	margin: 0 -8px 0 0;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: transparent;
	color: var(--gp-ink-60);
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}

.pos-scan-button:hover,
.pos-scan-button:focus-visible {
	background: var(--gp-f07);
	color: var(--gp-ink);
}

/* Holds the results next to the rail category column; in grid and list view the column is
   hidden and the results take the full width. */
.pos-products-area {
	display: flex;
	gap: 14px;
	flex: 1;
	min-height: 0;
}

.pos-products-body {
	overflow-y: auto;
	flex: 1;
	min-width: 0;
	padding-bottom: 6px;
}

/* Category tiles — main categories, with the chosen tile's subcategories below */
.pos-categories {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	max-height: 104px;
	overflow-y: auto;
	flex-shrink: 0;
}

.pos-subcategories {
	align-items: center;
	gap: 6px;
}

.pos-subcategories-label {
	margin-right: 4px;
}

/* Quick keys — per-location shortcut buttons above the product grid (order = management order) */
.pos-quick-keys {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	max-height: 136px;
	overflow-y: auto;
	flex-shrink: 0;
}

.gp-app .pos-quick-key {
	min-height: 56px;
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 1px;
	padding: 8px 16px;
	text-align: left;
}

.pos-quick-key-name {
	font-size: 13px;
	font-weight: 600;
	max-width: 200px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pos-quick-key-price {
	font-size: 11.5px;
	font-weight: 400;
}

.pos-empty-state {
	height: 100%;
	min-height: 220px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 8px;
	padding: 40px 20px;
}

.pos-empty-state-title {
	font-size: 15px;
	font-weight: 600;
	color: var(--gp-ink-65);
}

.pos-empty-state-text {
	font-size: 12px;
	color: var(--gp-ink-50);
}

/* Product results — grid of kit tiles or compact list rows, rendered by custom.js */
.pos-products-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 12px;
	align-content: start;
}

.pos-products-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Rail — main categories in a column beside a photoless tile grid, so far more articles fit */
.pos-rail-categories {
	width: 152px;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	overflow-y: auto;
}

.gp-app .pos-rail-category {
	padding: 13px 16px;
	border-radius: 16px;
	justify-content: flex-start;
	text-align: left;
}

.pos-products-rail {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(152px, 1fr));
	grid-auto-rows: max-content;
	gap: 10px;
	align-content: start;
}

.pos-rail-tile {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 14px;
	min-height: 98px;
	cursor: pointer;
}

/* Pushes price and stock to the bottom edge, so they line up across tiles of unequal name length */
.pos-rail-name {
	font-size: 13px;
	line-height: 1.3;
	flex: 1;
}

.pos-rail-prices {
	flex-direction: row;
	align-items: baseline;
	gap: 6px;
}

.pos-rail-tile .pos-product-price {
	font-size: 14px;
}

.pos-rail-tile .pos-stock {
	font-size: 10px;
}

.pos-product-tile {
	cursor: pointer;
	display: flex;
	flex-direction: column;
}

/* Product photos always sit in a square frame — whatever the file's aspect ratio */
.pos-tile-photo {
	aspect-ratio: 1 / 1;
	background-color: var(--gp-f06);
	background-size: cover;
	background-position: center;
	flex-shrink: 0;
}

.pos-tile-photo-empty {
	display: flex;
	align-items: center;
	justify-content: center;
}

.pos-tile-placeholder {
	width: 38%;
	min-width: 54px;
	max-width: 96px;
	color: var(--gp-ink-40);
}

/* Stroke width decoupled from tile size: the placeholder keeps 4px strokes everywhere */
.pos-tile-placeholder path {
	vector-effect: non-scaling-stroke;
}

/* The kit leaves the + to the browser's default button centering; with the kassa font
   stack the glyph can drift inside the circle. Flex-center it so the rondje stays clean. */
.gp-app .gp-tile-add {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.pos-tile-info {
	padding: 12px 14px 14px;
	display: flex;
	flex-direction: column;
	gap: 3px;
	flex: 1;
}

.pos-product-name {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.25;
}

.pos-product-number {
	font-family: monospace;
	font-size: 11px;
}

.pos-tile-bottom {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 6px;
	margin-top: auto;
	padding-top: 5px;
}

.pos-product-prices {
	display: flex;
	flex-direction: column;
	line-height: 1.25;
}

.pos-product-price {
	font-size: 15px;
	font-weight: 700;
}

.pos-product-gross-price {
	font-size: 11px;
	color: var(--gp-ink-50);
	text-decoration: line-through;
}

.pos-stock {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	font-weight: 500;
	color: var(--gp-ink-60);
	white-space: nowrap;
}

.pos-stock .gp-dot {
	flex-shrink: 0;
}

.pos-stock-ok .gp-dot {
	background: #6FBF8A;
	box-shadow: 0 0 8px #6FBF8A;
}

.pos-stock-none .gp-dot {
	background: #D9A05B;
	box-shadow: 0 0 8px #D9A05B;
}

.pos-product-row {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 12px 18px;
	cursor: pointer;
}

.pos-row-info {
	flex: 1;
	min-width: 0;
}

.pos-row-prices {
	align-items: flex-end;
	text-align: right;
}

/* Kit list row: the + key is 40px */
.gp-app .pos-row-add {
	width: 40px;
	height: 40px;
	font-size: 19px;
	flex-shrink: 0;
}

/* Bon lines */
.pos-line {
	padding: 13px 15px;
	margin-bottom: 8px;
}

.pos-line-top {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

.pos-line-info {
	flex: 1;
	min-width: 0;
}

/* Remove × on order-payment and payment rows: a small inline icon inside the card (kit payment
   row ×) — in-card controls may sit below the 44px hit-target rule (kit §3). */
.gp-app .pos-line-remove {
	background: none;
	border: none;
	color: var(--gp-ink-40);
	font-size: 16px;
	padding: 8px;
	line-height: 1;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.gp-app .pos-line-remove:hover {
	color: var(--gp-ink);
}

.pos-line-bottom {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 11px;
}

/* Kit size system (§3, binding): qty keys on a bon line are the 34px regelknopjes from
   glass-pos.css — no upsizing here, the delivered design is the spec. */
.gp-app .pos-line .gp-key-qty:disabled {
	opacity: .35;
	pointer-events: none;
}

.pos-line-quantity {
	min-width: 30px;
	flex-shrink: 0;
	text-align: center;
	font-size: 14px;
	font-weight: 600;
}

/* The price block absorbs the squeeze in the row: it may shrink and wrap its discount info,
   the round keys beside it never deform (see the .gp-key guard) */
.pos-line-price {
	min-width: 0;
	text-align: right;
}

.pos-line-discount {
	font-size: 11px;
	color: var(--gp-ink-50);
}

.pos-line-gross {
	text-decoration: line-through;
}

.pos-line-total {
	font-size: 15px;
	font-weight: 700;
}

.pos-order {
	/* Positioned here instead of via the position-relative utility: Bootstrap's !important
	   would override the mobile media query that fixes this panel as the bon sheet. */
	position: relative;
	width: 380px;
	flex-shrink: 0;
	min-height: 0;
}

.pos-order-header {
	padding: 20px 20px 12px;
	gap: 10px;
	flex-shrink: 0;
}

.pos-order-eyebrow {
	font-size: 11px;
	font-weight: 500;
	color: var(--gp-ink-50);
	letter-spacing: .5px;
}

.pos-order-title {
	font-size: 18px;
	font-weight: 600;
	letter-spacing: -0.02em;
}

.pos-order-lines {
	flex: 1;
	overflow-y: auto;
	padding: 0 14px;
	min-height: 0;
}

.pos-order-footer {
	padding: 14px 20px 20px;
	border-top: 1px solid var(--gp-ln1);
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.pos-total-row {
	display: flex;
	justify-content: space-between;
	font-size: 13px;
	color: var(--gp-ink-55);
}

/* Bonkorting in the totals block carries the accent (kit: discount labels are accent carriers) */
.pos-total-accent,
.pos-total-accent .pos-inline-remove {
	color: var(--gp-accent-strong);
}

/* "Bonkorting (5%) ×" as one flex group: gap instead of whitespace, which flex would swallow */
.pos-order-discount-caption {
	display: flex;
	align-items: center;
	gap: 4px;
}

.pos-total-main {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-top: 4px;
}

.pos-total-main-label {
	font-size: 15px;
	font-weight: 600;
}

.pos-total-main-note {
	font-size: 11px;
	font-weight: 400;
	color: var(--gp-ink-50);
}

.pos-total-main-amount {
	font-size: 22px;
	font-weight: 700;
}

.pos-checkout-button {
	margin-top: 10px;
}

.pos-error {
	position: relative;
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
	padding: 24px;
	overflow-y: auto;
}

.pos-error-card {
	position: relative;
	width: 100%;
	max-width: 420px;
	padding: 36px 32px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	text-align: center;
}

.pos-error-code {
	font-size: 44px;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.pos-error-title {
	font-size: 18px;
	font-weight: 600;
}

.pos-error-text {
	font-size: 13px;
	color: var(--gp-ink-55);
}

.pos-error-button {
	margin-top: 10px;
}

.pos-error-debug {
	position: relative;
	width: 100%;
	max-width: 720px;
	max-height: 260px;
	overflow: auto;
	font-size: 11px;
	color: var(--gp-ink-55);
	text-align: left;
}

/* Bon toolbar: free line / discount / order recall / cancel */
/* Kit toolbar row: never wraps — the segment shrinks (internal scroll) so the trash key
   always stays beside it on the same row */
.pos-order-toolbar {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 6px;
	padding: 0 16px 12px;
	flex-shrink: 0;
}

.pos-order-heading {
	flex: 1;
	min-width: 0;
}

/* Bon tools as one segment (kit pattern): icon + label per tool, trash key on the right.
   When space runs out a label wraps inside its button (kit: "Vrij artikel" over two lines) —
   never a scrollbar, and the trash key stays on the row. */
.pos-order-tools {
	min-width: 0;
}

.pos-order-tool {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 36px;
	padding: 0 12px;
	color: var(--gp-ink-85);
	text-align: center;
	line-height: 1.1;
}

.pos-order-tool svg {
	flex-shrink: 0;
}

.gp-segment .pos-order-tool.pos-order-tool-active {
	color: var(--gp-accent-strong);
}

.gp-app .pos-void-cart {
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	background: var(--gp-f055);
	border-color: var(--gp-ln1);
	color: var(--gp-ink-50);
	box-shadow: none;
}

.gp-app .pos-void-cart.pos-disabled {
	opacity: .35;
}

/* Dashed "vrij artikel" shortcut under the last bon line (kit pattern) */
.pos-line-add-free {
	width: 100%;
	border-radius: 18px;
	border: 1px dashed var(--gp-ln2);
	background: transparent;
	color: var(--gp-ink-45);
	font: 400 12px/1 'Sora', sans-serif;
	padding: 14px 15px;
	text-align: left;
	cursor: pointer;
	margin-bottom: 8px;
}

.pos-line-add-free span {
	font-size: 15px;
}

.pos-customer-button {
	gap: 7px;
}

.gp-app .pos-btn-danger {
	border-color: color-mix(in srgb, #E05B5B 45%, transparent);
	background: color-mix(in srgb, #E05B5B 14%, transparent);
}

.gp-app .pos-btn-danger:hover {
	background: color-mix(in srgb, #E05B5B 24%, transparent);
}

/* Customer slot: "+ Klant" button, or the accent chip of the linked customer with its ×.
   Both states share one height, so swapping between them never makes the header jump — the
   button therefore drops below the 56px tap-target rule the other kit buttons follow. */
.pos-customer-slot {
	display: flex;
	align-items: center;
}

.gp-app .pos-customer-slot .gp-btn-sm,
.pos-customer-tag {
	min-height: 34px;
}

.pos-customer-tag {
	max-width: 220px;
	cursor: pointer;
}

.pos-customer-tag-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pos-customer-clear {
	background: none;
	border: none;
	color: inherit;
	opacity: .7;
	font-size: 16px;
	line-height: 1;
	padding: 0 2px;
	cursor: pointer;
}

.pos-customer-clear:hover {
	opacity: 1;
}

.pos-inline-remove {
	background: none;
	border: none;
	color: var(--gp-ink-40);
	font-size: 16px;
	line-height: 1;
	padding: 0 6px;
	cursor: pointer;
}

.pos-inline-remove:hover {
	color: var(--gp-ink);
}

.pos-order-payment-card .pos-line-bottom {
	margin-top: 4px;
}

.pos-line-free-badge {
	font-size: 10px;
	font-weight: 500;
	color: var(--gp-ink-50);
	border: 1px solid var(--gp-ln2);
	border-radius: 999px;
	padding: 1px 7px;
	margin-inline-start: 4px;
	vertical-align: 2px;
}

/* Dialogs (gp-modal-backdrop/gp-modal from the kit; only the inside here) */
.pos-dialog-card {
	width: 400px;
	max-width: calc(100vw - 40px);
	max-height: 94vh;
	overflow-y: auto;
	padding: 22px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.pos-dialog-wide {
	width: 460px;
}

.pos-dialog-header {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.pos-dialog-heading {
	flex: 1;
	min-width: 0;
}

.pos-dialog-title {
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -0.02em;
}

.pos-dialog-subtitle {
	font-size: 12px;
	margin-top: 2px;
}

.pos-dialog-body {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.pos-dialog-actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.pos-dialog-footer {
	display: flex;
	gap: 10px;
}

/* Kit size system: a solid button that shares its row with another button drops to the compact
   48px CTA (kit modals: Klaar / Akkoord / Afmelden next to a secondary button). Applied as an
   explicit class on the button; a solid button alone on its row keeps the full 58px CTA. */
.gp-app .gp-btn-solid.pos-btn-compact {
	height: 48px;
	padding: 0 20px;
	font-size: 14px;
}

.pos-dialog-segment {
	align-self: flex-start;
}

/* Full-width mode switch on top of a dialog (bonkorting %/€): the body below it only
   shows the controls that belong to the chosen mode. */
.pos-dialog-switch {
	width: 100%;
}

.pos-dialog-switch .gp-seg {
	flex: 1;
	padding: 12px 15px;
}

/* Field labels in dialogs follow the kit's gp-label (caps, 11px, wide tracking) — the kit uses
   gp-label for every modal field label */
.pos-dialog-label {
	font: 600 11px/1 'Sora', sans-serif;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--gp-ink-45);
	margin-top: 2px;
}

.pos-dialog-hint {
	font-size: 12px;
}

.pos-dialog-label-note {
	text-transform: none;
	letter-spacing: 0;
	font-weight: 400;
	color: var(--gp-ink-40);
}

/* Trash icon in a dialog header (kit: destructive = icon without color accent + confirmation) */
.gp-app .pos-dialog-delete {
	color: var(--gp-ink-55);
}

/* Line dialog (kit regel-modal) */
.pos-line-quantity-row {
	display: flex;
	align-items: center;
	gap: 14px;
}

.pos-line-quantity-row .pos-dialog-label {
	width: 110px;
	margin-top: 0;
}

.pos-line-quantity-count {
	width: 30px;
	text-align: center;
	font-size: 16px;
	font-weight: 600;
}

.pos-chip-row {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.pos-price-row {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* "Pas aan"/"Pas toe" aligns with the 46px input beside it (kit lm-price-apply) */
.pos-price-row .gp-btn {
	height: 46px;
}

.pos-price-symbol {
	color: var(--gp-ink-50);
	font-size: 14px;
}

/* The % key on a bon line tints solid while a discount or price adjustment is active (kit) */
.gp-app .pos-line-menu {
	font-size: 13px;
	font-weight: 600;
}

.gp-app .pos-line-menu.pos-line-menu-active {
	background: var(--gp-solid);
	color: var(--gp-solid-ink);
	border-color: transparent;
}

.pos-dialog-error {
	font-size: 12px;
	color: #E05B5B;
	min-height: 16px;
	text-align: center;
}

.pos-dialog-results {
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-height: 300px;
	overflow-y: auto;
}

.pos-result-row {
	padding: 12px 14px;
	cursor: pointer;
}

.pos-result-row:hover {
	background: var(--gp-f10);
}

.pos-result-history {
	font-size: 11px;
	color: var(--gp-ink-40);
	margin-top: 6px;
}

/* Fully paid: the method segment dims but keeps its place (kit) */
.pos-checkout-methods-done {
	opacity: .4;
	pointer-events: none;
}

/* 5-cent rounding note in the cash card, only rendered when it deviates (kit) */
.pos-checkout-round-note {
	font-size: 11px;
	color: var(--gp-ink-40);
}

/* Bills row (kit): Gepast · €10 · €20 · €50 · €100 at exactly 44px, adding up to the received
   amount (min-height 0 beats the 48px baseline of .pos-checkout-quick .gp-btn) */
.pos-checkout-bills {
	grid-template-columns: repeat(5, 1fr);
}

.pos-checkout-bills .gp-btn {
	min-height: 0;
	height: 44px;
	padding: 0 8px;
	font-size: 13px;
}

/* Day close (kit afsluiten): drawer count per denomination + kasopmaak + Z-rapport modal */
.pos-count-label {
	flex-shrink: 0;
	margin-top: 4px;
}

.pos-count-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	flex-shrink: 0;
}

.pos-count-grid-coins {
	overflow-y: auto;
}

.pos-count-row {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 12px;
}

.pos-count-denomination {
	width: 52px;
	font-size: 13px;
	font-weight: 600;
}

.pos-count-value {
	width: 28px;
	text-align: center;
	font-size: 14px;
	font-weight: 600;
}

.pos-count-sum {
	font-size: 12px;
	font-weight: 700;
	color: var(--gp-ink-65);
	white-space: nowrap;
}

.pos-close-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 15px 20px;
	margin-bottom: 8px;
}

.pos-close-expected {
	font-size: 14px;
	font-weight: 600;
	color: var(--gp-ink);
}

.pos-close-counted {
	font-size: 22px;
	font-weight: 700;
}

.pos-close-difference {
	font-size: 16px;
	font-weight: 700;
}

.pos-close-methods {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 8px;
}

.pos-close-method-row {
	display: flex;
	justify-content: space-between;
	padding: 11px 16px;
	font-size: 13px;
}

.pos-close-method-row span:last-child {
	font-weight: 700;
}

.pos-z-rows {
	display: flex;
	flex-direction: column;
	gap: 7px;
	font-size: 13px;
}

.pos-z-rows .pos-total-row {
	color: inherit;
}

.pos-z-bold span {
	font-weight: 700;
}

.pos-z-divider {
	border-top: 1px solid var(--gp-ln1);
	margin: 4px 0;
}

.pos-z-print-header {
	display: none;
	margin-bottom: 10px;
}

.pos-z-print-title {
	font-size: 15px;
	font-weight: 700;
}

.pos-z-print-stamp {
	font-size: 11px;
}

/* Customer display (kit klantdisplay): brand side + live meekijkbon on the second screen.
   Rendered on a full-layout page (no shell padding), so it carries its own. */
.pos-display {
	position: relative;
	flex: 1;
	min-width: 0;
	min-height: 0;
	display: flex;
	gap: 14px;
	padding: 24px;
}

.pos-display-brand {
	flex: 1;
	min-width: 0;
	padding: 40px;
	gap: 22px;
}

.pos-display-logo {
	animation: gp-fsbar .6s ease both;
}

.pos-display-title {
	font-size: 40px;
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.15;
	max-width: 480px;
}

.pos-display-subtitle {
	font-size: 16px;
	color: var(--gp-ink-65);
	max-width: 400px;
	line-height: 1.6;
}

.pos-display-status {
	align-self: flex-start;
}

.pos-display-bon {
	width: 420px;
	flex-shrink: 0;
	min-height: 0;
}

.pos-display-bon-header {
	padding: 24px 24px 12px;
	flex-shrink: 0;
}

.pos-display-bon-title {
	font-size: 20px;
	font-weight: 600;
	letter-spacing: -0.02em;
}

.pos-display-lines {
	flex: 1;
	overflow-y: auto;
	padding: 0 16px;
	min-height: 0;
}

.pos-display-line {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 13px 16px;
	margin-bottom: 8px;
}

.pos-display-line-qty {
	color: var(--gp-ink-50);
	font-size: 13px;
	width: 30px;
	flex-shrink: 0;
}

.pos-display-line-info {
	flex: 1;
	min-width: 0;
}

.pos-display-line-name {
	display: block;
	font-size: 14px;
	font-weight: 600;
}

.pos-display-line-discount {
	display: block;
	font-size: 11px;
}

.pos-display-line-total {
	font-size: 14px;
	font-weight: 700;
}

.pos-display-total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-top: 4px;
	font-size: 16px;
	font-weight: 600;
}

.pos-display-total-amount {
	font-size: 30px;
	font-weight: 700;
	letter-spacing: -0.02em;
}

/* Customer-display opener on the kassa header: the kit pins the icon to the muted ink
   (inline color: var(--gp-ink-55)), also on hover */
.gp-app a.pos-display-open,
.gp-app a.pos-display-open:hover {
	color: var(--gp-ink-55);
}

/* Section labels inside the product grid ("Meest verkocht" / "Alle producten", kit) */
.pos-products-grid .pos-grid-section {
	grid-column: 1 / -1;
	margin-top: 2px;
}

.pos-products-grid .pos-grid-section-follow {
	margin-top: 8px;
}

.pos-dialog-create {
	display: flex;
	flex-direction: column;
	gap: 8px;
	border-top: 1px solid var(--gp-ln1);
	padding-top: 12px;
}

.pos-select {
	width: 100%;
	min-height: 48px;
	padding: 0 16px;
	border-radius: 14px;
	background: var(--gp-f07);
	border: 1px solid var(--gp-ln1);
	color: var(--gp-ink);
	font: 500 14px 'Sora', sans-serif;
}

.pos-select option {
	color: #1a1a1e;
}

.pos-order-summary {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.pos-order-summary-rows {
	margin-top: 8px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

/* The approval dialog reuses the pin styling; the pad is more compact here than the login screen. */
.pos-dialog-approval .pos-pin {
	gap: 18px;
	padding-bottom: 6px;
}

.pos-dialog-approval .pos-pin-pad {
	grid-template-columns: repeat(3, 62px);
	gap: 12px;
}

.pos-dialog-approval .pos-pin-pad .gp-key-lg {
	width: 62px;
	height: 62px;
	font-size: 19px;
}

/* Notifications dialog: rows from the widget template (ajax/widget/notifications.tpl) */
.pos-notifications-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-height: 55vh;
	overflow-y: auto;
	margin-bottom: 10px;
}

.gp-app a.pos-notification-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	text-decoration: none;
}

.gp-app a.pos-notification-row,
.gp-app a.pos-notification-row:hover {
	color: var(--gp-ink);
}

.pos-notification-icon {
	flex-shrink: 0;
	width: 38px;
	height: 38px;
	border-radius: 12px;
	background: var(--gp-f10);
	border: 1px solid var(--gp-ln1);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--gp-ink-60);
}

.pos-notification-body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.pos-notification-message {
	font-size: 13px;
	font-weight: 500;
}

.pos-notification-date {
	font-size: 11.5px;
}

.gp-app .pos-notification-read {
	flex-shrink: 0;
}

.pos-notifications-empty {
	height: auto;
	min-height: 140px;
	padding: 24px 16px;
}

/* SweetAlert2 (meriad popup.js) restyled to the glass kit: gp-modal surface + backdrop,
   Sora, gp-btn pill buttons. popup.js ships Bootstrap button classes (buttonsStyling
   false), so those are re-skinned inside .swal2-actions. Vars live on :root, so they
   reach the swal container even though it is appended outside .gp-app. */
.swal2-container.swal2-backdrop-show {
	background: var(--gp-backdrop);
	backdrop-filter: var(--gp-ov-blur);
	-webkit-backdrop-filter: var(--gp-ov-blur);
}

.swal2-popup {
	border-radius: 28px;
	border: 1px solid var(--gp-ln2);
	background: radial-gradient(140% 60% at 30% 0%, var(--gp-spec2), transparent 55%), linear-gradient(165deg, var(--gp-mod-a), var(--gp-mod-b));
	backdrop-filter: var(--gp-blur);
	-webkit-backdrop-filter: var(--gp-blur);
	box-shadow: var(--gp-card-shadow-big);
	color: var(--gp-ink);
	font-family: 'Sora', sans-serif;
}

.swal2-title {
	color: var(--gp-ink);
	font-size: 20px;
	font-weight: 600;
	letter-spacing: -0.02em;
}

.swal2-html-container {
	color: var(--gp-ink-65);
	font-size: 14px;
	line-height: 1.5;
}

.swal2-timer-progress-bar {
	background: var(--gp-ink-40);
}

.swal2-actions .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 24px;
	border-radius: 999px;
	background: var(--gp-f07);
	border: 1px solid var(--gp-ln1);
	color: var(--gp-ink);
	font: 600 14px/1 'Sora', sans-serif;
	box-shadow: var(--gp-btn-shadow);
	transition: transform .12s ease, background .12s ease;
}

.swal2-actions .btn:hover {
	background: var(--gp-f16);
	color: var(--gp-ink);
	transform: translateY(-1px);
}

/* Confirm/OK buttons (btn-primary / btn-success) become the solid CTA */
.swal2-actions .btn-primary,
.swal2-actions .btn-success {
	background: var(--gp-solid);
	border-color: transparent;
	color: var(--gp-solid-ink);
	box-shadow: 0 6px 24px var(--gp-accent-glow), inset 0 1px 0 rgba(255,255,255,.8);
}

.swal2-actions .btn-primary:hover,
.swal2-actions .btn-success:hover {
	background: var(--gp-solid-hover);
	color: var(--gp-solid-ink);
	transform: none;
}

/* Cancel button (btn-danger) stays a ghost pill with a red tint */
.swal2-actions .btn-danger {
	border-color: color-mix(in srgb, #E05B5B 45%, transparent);
	background: color-mix(in srgb, #E05B5B 14%, transparent);
	color: var(--gp-ink);
}

.swal2-actions .btn-danger:hover {
	background: color-mix(in srgb, #E05B5B 24%, transparent);
	color: var(--gp-ink);
}

/* Icon colors tuned to the kit (amber warning per kit plan §8, red errors) */
.swal2-icon.swal2-warning {
	border-color: color-mix(in srgb, #D9A05B 55%, transparent);
	color: #D9A05B;
}

.swal2-icon.swal2-info,
.swal2-icon.swal2-question {
	border-color: var(--gp-ln3);
	color: var(--gp-ink-60);
}

.swal2-icon.swal2-error {
	border-color: color-mix(in srgb, #E05B5B 55%, transparent);
}

.swal2-icon.swal2-error [class^='swal2-x-mark-line'] {
	background-color: #E05B5B;
}

.swal2-icon.swal2-success {
	border-color: color-mix(in srgb, #6FBF8A 55%, transparent);
	color: #6FBF8A;
}

.swal2-icon.swal2-success [class^='swal2-success-line'] {
	background-color: #6FBF8A;
}

.swal2-icon.swal2-success .swal2-success-ring {
	border-color: color-mix(in srgb, #6FBF8A 40%, transparent);
}

/* The success icon's masking shapes default to white — invisible mask on glass */
.swal2-icon.swal2-success .swal2-success-fix,
.swal2-icon.swal2-success [class^='swal2-success-circular-line'] {
	background: transparent;
}

/* Toasts (meriad toast.js — swal2 toast mode): toast.css resolves --theme-* tokens with
   swal fallbacks by design, so feed it the glass values, scoped to the toast so nothing
   else picks up the UBold token namespace. The background shorthand also overrides
   toast.css's white background-color (custom.css loads after the prepend-injected
   library CSS). Shadow stays toast.css's own grounded one. */
.swal2-container .swal2-popup.swal2-toast {
	--theme-border-color: var(--gp-ln2);
	--theme-border-radius: 18px;
	--theme-secondary-color: var(--gp-ink-60);
	--theme-font-weight-medium: 600;
	--theme-success: #6FBF8A;
	--theme-danger: #E05B5B;
	--theme-warning: #D9A05B;
	--theme-info: var(--gp-ink-60);
	background: linear-gradient(180deg, var(--gp-spec), transparent 45%), linear-gradient(165deg, var(--gp-mod-a), var(--gp-mod-b));
	backdrop-filter: var(--gp-blur);
	-webkit-backdrop-filter: var(--gp-blur);
	color: var(--gp-ink);
}

/* Toast action buttons (btn-sm classes from toast.js) stay compact pills */
.swal2-container .swal2-popup.swal2-toast .swal2-actions .btn {
	min-height: 34px;
	padding: 9px 16px;
	font-size: 12px;
}

/* Icon source (owner decision): the POS ships no icon font — the kit draws everything as
   inline SVG. toast.js however renders its glyphs as Tabler icon-font classes
   (<i class="ti ti-check">), so the four glyphs it uses are drawn here as SVG masks in
   currentColor. The shared toast.js copy stays untouched. */
.swal2-icon .ti {
	display: inline-block;
	width: 1em;
	height: 1em;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.swal2-icon .ti.ti-check {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5l10 -10'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5l10 -10'/%3E%3C/svg%3E");
}

.swal2-icon .ti.ti-x {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6l-12 12'/%3E%3Cpath d='M6 6l12 12'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6l-12 12'/%3E%3Cpath d='M6 6l12 12'/%3E%3C/svg%3E");
}

.swal2-icon .ti.ti-exclamation-mark {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19v.01'/%3E%3Cpath d='M12 15v-10'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19v.01'/%3E%3Cpath d='M12 15v-10'/%3E%3C/svg%3E");
}

.swal2-icon .ti.ti-info-circle {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0'/%3E%3Cpath d='M12 9h.01'/%3E%3Cpath d='M11 12h1v4h1'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0'/%3E%3Cpath d='M12 9h.01'/%3E%3Cpath d='M11 12h1v4h1'/%3E%3C/svg%3E");
}

/* Checkout screen: full-screen overlay above the main screen (z-index below the dialogs at 50,
   so the confirm popups and the swal layer stay on top) */
.pos-checkout-overlay {
	position: fixed;
	inset: 0;
	z-index: 40;
	background: var(--gp-backdrop);
	backdrop-filter: var(--gp-ov-blur);
	-webkit-backdrop-filter: var(--gp-ov-blur);
	flex-direction: column;
	gap: 14px;
	padding: 14px;
}

.pos-checkout-topbar {
	display: flex;
	align-items: center;
	gap: 14px;
	border-radius: 999px;
	padding: 10px 16px;
	flex-shrink: 0;
}

.pos-checkout-title {
	font-size: 16px;
	font-weight: 600;
}

.pos-checkout-count {
	font-size: 13px;
	padding-inline-end: 8px;
}

.pos-checkout-main {
	display: flex;
	flex: 1;
	gap: 14px;
	min-height: 0;
}

.pos-checkout-summary {
	flex: 1;
	min-width: 0;
	padding: 22px 26px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.pos-checkout-summary-lines {
	flex: 1;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.pos-checkout-summary-line {
	display: flex;
	align-items: baseline;
	gap: 10px;
	font-size: 14px;
}

.pos-checkout-summary-qty {
	color: var(--gp-ink-50);
	width: 34px;
	flex-shrink: 0;
}

.pos-checkout-summary-name {
	flex: 1;
	min-width: 0;
}

.pos-checkout-summary-total {
	font-weight: 600;
}

.pos-checkout-summary-totals {
	border-top: 1px solid var(--gp-ln1);
	padding-top: 12px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex-shrink: 0;
}

.pos-checkout-pay {
	width: 440px;
	flex-shrink: 0;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	overflow-y: auto;
}

.pos-checkout-methods {
	justify-content: stretch;
}

.pos-checkout-methods .gp-seg {
	flex: 1;
}

.pos-checkout-due {
	border-radius: 20px;
	padding: 16px 22px;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	flex-shrink: 0;
}

.pos-checkout-due span:first-child {
	font-size: 13px;
	color: var(--gp-ink-55);
}

.pos-checkout-due-amount {
	font-size: 32px;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.pos-checkout-payments {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.pos-checkout-payment {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
}

.pos-checkout-payment-info {
	flex: 1;
	min-width: 0;
}

.pos-checkout-panel {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.pos-checkout-cash-card {
	border-radius: 16px;
	padding: 12px 16px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.pos-checkout-change-row span:last-child {
	font-weight: 700;
}

/* Insufficient tendered: kit plan §8 amber, via a class — never a lingering inline colour */
.pos-insufficient {
	color: #D9A05B;
}

.pos-checkout-quick {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 8px;
}

.pos-checkout-quick .gp-btn {
	min-height: 48px;
	padding: 0 8px;
}

/* Kit size system: the betaal-keypad is exactly 62px */
.pos-checkout-pad {
	display: grid;
	grid-template-columns: repeat(3, 62px);
	gap: 10px;
	justify-content: center;
	padding: 4px 0;
}

.pos-checkout-pad .gp-key-lg {
	width: 62px;
	height: 62px;
	font-size: 19px;
}

.pos-checkout-instruction {
	border-radius: 16px;
	padding: 20px 18px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 8px;
	margin-bottom: 10px;
}

.pos-checkout-instruction-title {
	font-size: 15px;
	font-weight: 600;
}

.pos-checkout-spinner {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: 3px solid var(--gp-ln2);
	border-top-color: var(--gp-accent);
	animation: pos-spin .9s linear infinite;
}

@keyframes pos-spin {
	to {
		transform: rotate(360deg);
	}
}

.pos-checkout-complete {
	margin-top: 4px;
	flex-shrink: 0;
}

/* Success screen: centred card on top of the (by now empty) main screen */
.pos-success-overlay {
	z-index: 45;
	align-items: center;
	justify-content: center;
}

.pos-success-card {
	width: 460px;
	max-width: calc(100vw - 40px);
	max-height: 94vh;
	overflow-y: auto;
	border-radius: 28px;
	padding: 30px 26px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 12px;
}

.pos-success-icon {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #6FBF8A;
	border: 1px solid color-mix(in srgb, #6FBF8A 45%, transparent);
	background: color-mix(in srgb, #6FBF8A 14%, transparent);
}

.pos-success-title {
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.pos-success-subtitle {
	font-size: 13px;
}

.pos-success-change {
	width: 100%;
	border-radius: 16px;
	border: 1px solid var(--gp-ln2);
	background: var(--gp-f07);
	padding: 14px 18px;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
}

.pos-success-change span:first-child {
	font-size: 13px;
	color: var(--gp-ink-55);
}

.pos-success-change-amount {
	font-size: 30px;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.pos-success-rows {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 4px;
	border-top: 1px solid var(--gp-ln1);
	padding-top: 12px;
	margin-bottom: 4px;
}

@media (max-width: 1100px) {
	.pos-order {
		width: 320px;
	}

	.pos-checkout-pay {
		width: 360px;
	}
}

/* Payment link/QR: white backing plate so the QR stays scannable on the dark theme */
.pos-checkout-qr {
	background: #ffffff;
	border-radius: 12px;
	padding: 10px;
	line-height: 0;
}

.pos-checkout-qr img {
	width: 168px;
	height: 168px;
	display: block;
}

.pos-checkout-link-url {
	font-size: 11px;
	word-break: break-all;
	max-width: 100%;
}

/* Receipt output on the success screen: print / mail / named invoice */
.pos-success-output {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 10px;
	border-top: 1px solid var(--gp-ln1);
	padding-top: 12px;
}

.pos-success-output-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
}

.pos-success-output-buttons .gp-btn {
	min-height: 48px;
}

/* Kit bon page: the solid buttons on the success card are the compact 48px CTA
   ("Nieuwe verkoop" next to "Print bon"), never the full-height main-screen CTA */
.pos-success-card .gp-btn-solid {
	height: 48px;
	font-size: 14px;
}

.pos-success-mail {
	display: flex;
	gap: 8px;
	align-items: stretch;
}

.pos-success-mail .gp-btn {
	flex-shrink: 0;
}

/* The mail send button aligns with the 46px input beside it */
.pos-success-mail .gp-btn-solid {
	height: 46px;
}

/* Receipt page: white receipt card (kit receipt idiom) on the glass canvas */
.pos-receipt-page {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	padding: 32px 20px;
	overflow-y: auto;
}

.pos-receipt {
	width: 320px;
	flex-shrink: 0;
	background: #FDFDFC;
	color: #1B2733;
	border-radius: 10px;
	padding: 24px 22px;
	font-size: 12px;
	line-height: 1.5;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .55);
}

.pos-receipt-center {
	text-align: center;
}

.pos-receipt-company {
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: #111417;
}

.pos-receipt-rule {
	border-top: 1px dashed #B9C4CC;
	margin: 12px 0;
}

.pos-receipt-row {
	display: flex;
	justify-content: space-between;
	gap: 8px;
}

.pos-receipt-row.pos-receipt-strong {
	font-weight: 700;
}

.pos-receipt-row.pos-receipt-sub-row,
.pos-receipt-sub {
	color: #5B6B77;
}

.pos-receipt-line {
	display: flex;
	gap: 8px;
	margin-bottom: 2px;
}

.pos-receipt-qty {
	width: 26px;
	flex-shrink: 0;
}

.pos-receipt-name {
	flex-grow: 1;
}

.pos-receipt-amount {
	flex-shrink: 0;
}

.pos-receipt-sub {
	margin: -2px 0 4px 34px;
	font-size: 11px;
}

.pos-receipt-total {
	font-weight: 700;
	font-size: 13px;
	margin-bottom: 4px;
}

/* Gift-card code as Code128: the SVG stretches with the receipt width (crisp via the module viewBox) */
.pos-receipt-barcode {
	margin: 6px 0 2px;
}

.pos-receipt-barcode svg {
	display: block;
	width: 100%;
	height: 48px;
}

.pos-receipt-barcode-code {
	text-align: center;
	font-size: 11px;
	letter-spacing: 2px;
	margin-bottom: 4px;
}

.pos-receipt-thanks {
	text-align: center;
	margin-top: 16px;
	font-weight: 600;
}

.pos-receipt-footer {
	text-align: center;
	margin-top: 8px;
	font-size: 11px;
	color: #5B6B77;
}

.pos-receipt-actions {
	display: flex;
	gap: 12px;
	padding-bottom: 16px;
	flex-shrink: 0;
}

/* Kit bon page: the print-page buttons are the compact 48px CTA, side by side */
.pos-receipt-actions .gp-btn-solid {
	height: 48px;
	padding: 0 28px;
	font-size: 14px;
}

/* Thermal print: only the receipt itself, at 80mm width */
@media print {
	body * {
		visibility: hidden;
	}

	.pos-receipt,
	.pos-receipt * {
		visibility: visible;
	}

	.pos-receipt {
		position: absolute;
		left: 0;
		top: 0;
		width: 80mm;
		box-shadow: none;
		border-radius: 0;
	}

	.pos-z-report,
	.pos-z-report * {
		visibility: visible;
	}

	.pos-z-report {
		position: absolute;
		left: 0;
		top: 0;
		width: 320px;
		background: #ffffff;
		color: #1B2733;
		padding: 20px;
	}

	.pos-z-report .pos-z-print-header {
		display: block;
	}

	.no-print {
		display: none;
	}
}

/* Return screen: search results, receipt details and the manual lines (no receipt) */
.pos-returns-hit {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 13px 15px;
	margin-bottom: 8px;
	cursor: pointer;
}

.pos-returns-hit-info {
	flex: 1;
	min-width: 0;
}

.pos-returns-receipt-head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 13px 15px;
	margin-bottom: 12px;
}

.pos-returns-line-max {
	font-size: 12px;
	margin-left: 8px;
	align-self: center;
}

.pos-returns-fullcredit-note {
	font-size: 12px;
	color: var(--gp-ink-55);
	margin: 4px 2px 10px;
}

.pos-returns-fullcredit-button {
	min-height: 48px;
	margin-top: 4px;
}

.pos-returns-manual-head {
	margin-bottom: 12px;
}

.pos-returns-manual-line {
	padding: 13px 15px;
	margin-bottom: 8px;
}

.pos-returns-manual-grid {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(80px, 1fr) minmax(110px, 1fr) minmax(90px, 1fr) auto;
	gap: 10px;
	align-items: end;
}

.pos-returns-manual-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

/* The manual return line keeps the 56px shop-floor touch target: the compact in-card ×
   (.pos-line-remove, kit payment-row size) is meant for the payment/order-payment rows only. */
.gp-app .pos-returns-manual-remove {
	align-self: center;
	min-width: 56px;
	min-height: 56px;
	font-size: 20px;
	padding: 0 4px;
}

@media (max-width: 1100px) {
	.pos-returns-manual-grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.pos-returns-manual-description {
		grid-column: 1 / -1;
	}
}

/* Return summary: refund portions + the manual pin confirmation */
.pos-returns-preview {
	display: flex;
	flex-direction: column;
	gap: 4px;
	border-top: 1px solid var(--gp-ln1);
	padding-top: 8px;
}

.pos-returns-subrow {
	font-size: 12px;
	color: var(--gp-ink-40);
}

.pos-returns-pin-confirm {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	color: var(--gp-ink-70);
	padding: 4px 2px;
	cursor: pointer;
}

.pos-returns-pin-confirm input {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

.pos-returns-summary-line {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* Credit voucher on the success screen: full code for verification (the return receipt prints the Code128) */
.pos-returns-voucher {
	border-top: 1px solid var(--gp-ln1);
	padding-top: 8px;
	margin-top: 4px;
	text-align: center;
}

.pos-returns-voucher-label {
	font-size: 12px;
	color: var(--gp-ink-55);
}

.pos-returns-voucher-code {
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 2px;
	word-break: break-all;
}

/* Bonnen screen: archived receipts (list rows + day overview) and the herprint marker */
.pos-receipts-daynav {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.pos-receipts-row {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 13px 16px;
	margin-bottom: 8px;
	cursor: pointer;
}

.pos-receipts-row-number {
	width: 118px;
	flex-shrink: 0;
	font-size: 14px;
	font-weight: 700;
	word-break: break-all;
}

.pos-receipts-row-info {
	flex: 1;
	min-width: 0;
}

.pos-receipts-row-method {
	width: 118px;
	flex-shrink: 0;
	font-size: 12px;
	text-align: right;
}

.pos-receipts-row-return {
	color: #E05B5B;
}

.pos-receipts-badge {
	display: inline-block;
	margin-left: 6px;
	padding: 2px 8px;
	border-radius: 999px;
	background: color-mix(in srgb, #E05B5B 16%, transparent);
	color: #E05B5B;
	font-size: 11px;
	font-weight: 600;
	vertical-align: middle;
}

.pos-receipts-revenue {
	padding: 18px 22px;
	margin-bottom: 10px;
}

.pos-receipts-revenue-label {
	font-size: 13px;
}

.pos-receipts-revenue-amount {
	font-size: 30px;
	font-weight: 700;
	letter-spacing: -0.02em;
	margin-top: 4px;
}

.pos-receipts-tiles {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.pos-receipts-tile {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 13px 18px;
	font-size: 13px;
}

.pos-receipts-tile span + span {
	font-weight: 700;
}

/* Herprint: a copy is marked as one, on screen and on the print-out */
.pos-receipt-copy {
	margin-top: 8px;
	text-align: center;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 3px;
}

/* Mobile tabbar (kit m-nav): fixed glass bar at the bottom, only rendered below the breakpoint */
/* Kit m-nav optie 2c: the bonregel is its own row on top; the tab row below divides the
   width evenly over the tabs. */
.pos-tabbar {
	display: none;
	position: fixed;
	left: 10px;
	right: 10px;
	bottom: 10px;
	z-index: 30; /* below the checkout overlay (40) and the dialogs (50) */
	flex-direction: column;
	align-items: stretch;
	padding: 0;
	border-radius: 24px;
	overflow: hidden;
}

.pos-tabbar-tabs {
	display: flex;
	gap: 4px;
	padding: 6px 8px;
	padding-bottom: calc(6px + env(safe-area-inset-bottom));
}

.pos-tab {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	padding: 8px 2px 7px;
	border: none;
	background: none;
	border-radius: 14px;
	font: 500 10px/1 'Sora', sans-serif;
	cursor: pointer;
	text-decoration: none;
}

.pos-tab-label {
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Icon wrapper so the notification badge anchors to the bell, not the whole tab */
.pos-tab-icon {
	position: relative;
	display: inline-flex;
}

.gp-app .pos-tab,
.gp-app a.pos-tab,
.gp-app a.pos-tab:hover {
	color: var(--gp-ink-55);
}

.gp-app .pos-tab.active,
.gp-app a.pos-tab.active {
	color: var(--gp-ink);
	background: var(--gp-f08);
}

/* Bonregel on top of the tabbar (kit 2c): dot · count · total · chevron, full width */
.pos-tabbar-cart {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 13px 16px;
	background: none;
	border: none;
	border-bottom: 1px solid var(--gp-ln1);
	color: var(--gp-ink);
	font: 600 13px/1 'Sora', sans-serif;
	cursor: pointer;
}

.pos-tabbar-count {
	color: var(--gp-ink-55);
	font-weight: 500;
	white-space: nowrap;
}

.pos-tabbar-total {
	margin-left: auto;
	font-weight: 700;
	white-space: nowrap;
}

/* The chevron that collapses the bon sheet only exists on mobile */
.gp-app .pos-sheet-close {
	display: none;
}

/* 'Meer' sheet (tabbar): the rail-only controls as full-width tappable rows */
.pos-more-items {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.gp-app .pos-more-item {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 12px;
	width: 100%;
	text-decoration: none;
}

@media (max-width: 768px) {
	.pos-shell {
		min-height: 100vh;
		height: auto;
	}

	.pos-shell-app {
		flex-direction: column;
		height: 100vh;
		padding: 10px;
		/* Clears the tabbar incl. its bonregel row (kit 2c: bon row + tab row) */
		padding-bottom: calc(114px + env(safe-area-inset-bottom));
	}

	.pos-nav {
		display: none;
	}

	.pos-tabbar {
		display: flex;
	}

	.pos-products {
		padding: 14px;
	}

	/* Kit: mobile is grid-only, search on its own row */
	.pos-products-header .gp-segment {
		display: none;
	}

	.pos-products-header .pos-search {
		order: 5;
		width: 100%;
	}

	.pos-products-grid {
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	}

	/* The bon becomes a slide-up sheet behind the tabbar chip (kit); the summary panels of the
	   other screens simply stack below their list */
	.pos-order {
		width: auto;
	}

	.pos-order[data-meriad-custom-name="pos-cart"] {
		position: fixed;
		left: 10px;
		right: 10px;
		bottom: calc(110px + env(safe-area-inset-bottom));
		max-height: 70vh;
		z-index: 35; /* above the tabbar (30), below the checkout overlay (40) */
		transform: translateY(calc(100% + 160px));
		transition: transform .25s ease;
	}

	.pos-order[data-meriad-custom-name="pos-cart"].pos-sheet-open {
		transform: translateY(0);
	}

	.pos-order[data-meriad-custom-name="pos-cart"] .pos-sheet-close {
		display: inline-flex;
	}

	.pos-checkout-overlay {
		padding: 10px;
		padding-bottom: calc(10px + env(safe-area-inset-bottom));
	}

	.pos-checkout-main {
		flex-direction: column;
		overflow-y: auto;
	}

	.pos-checkout-summary {
		flex: none;
	}

	.pos-checkout-summary-lines {
		max-height: 180px;
	}

	.pos-checkout-pay {
		width: auto;
		flex-shrink: 0;
	}

	.pos-display {
		flex-direction: column;
	}

	.pos-display-brand {
		padding: 24px;
		gap: 14px;
		flex: none;
	}

	.pos-display-title {
		font-size: 28px;
	}

	.pos-display-bon {
		width: auto;
		flex: 1;
	}

	.pos-count-grid {
		grid-template-columns: 1fr;
	}
}