.dlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.dcard .bd { display: flex; flex-direction: column; gap: 6px; }
.dtop { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.dcash { text-align: right; background: var(--warn-bg); color: var(--warn); border-radius: 8px; padding: 4px 10px; line-height: 1.2; }
.dcash span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.dcash b { font-family: var(--f-num); font-size: 16px; }
.dcash.paid { background: var(--good-bg); color: var(--good); }
.dwho { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.dits { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.dacts { display: flex; gap: 6px; flex-wrap: wrap; border-top: 1px solid var(--line-2); padding-top: 8px; margin-top: 2px; }
.pos { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 14px; align-items: start; }
.pos-left { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pos-cart { position: sticky; top: 12px; }
.pos-cart .bd { display: flex; flex-direction: column; gap: 12px; }
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.ptile { font: inherit; color: var(--ink); text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 11px; cursor: pointer; display: flex; flex-direction: column; gap: 3px; min-height: 86px; }
.ptile:hover { border-color: var(--accent); background: var(--accent-soft); }
.ptile:active { transform: scale(.98); }
.ptile b { font-size: 13.5px; font-weight: 600; line-height: 1.25; }
.ptile .pp { font-family: var(--f-num); font-size: 15px; color: var(--accent); margin-top: auto; }
.ptile.out { opacity: .55; }
.plines { display: flex; flex-direction: column; max-height: 38vh; overflow-y: auto; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.pline { display: grid; grid-template-columns: minmax(0, 1fr) auto 76px 22px; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line-2); }
.pline:last-child { border-bottom: 0; }
.pline .pn { display: flex; flex-direction: column; min-width: 0; }
.pline .pn b { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pline .pq { display: flex; align-items: center; gap: 3px; }
.pline .pq input { width: 52px; text-align: center; padding: 5px 4px; }
.pline .pq .btn { padding: 4px 9px; }
.pline .pt { text-align: right; font-family: var(--f-num); }
.pline .x { background: none; border: 0; color: var(--faint); font-size: 18px; cursor: pointer; }
.pchange { font-family: var(--f-num); font-size: 18px; padding-top: 6px; }
.pbig { padding: 13px; font-size: 15px; }
.pdone { display: flex; flex-direction: column; gap: 8px; align-items: center; text-align: center; }
.pbigv { font-family: var(--f-num); font-size: 30px; }
@media (max-width: 980px) { .pos { grid-template-columns: 1fr; } .pos-cart { position: static; } }
.loyrow { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.loyv { font-family: var(--f-num); font-size: 26px; line-height: 1.1; }
.blist { display: flex; flex-direction: column; }
.brow { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line-2); }
.brow:last-child { border-bottom: 0; }
.pd-80 { width: 72mm; margin: 0 auto; font-size: 9pt; line-height: 1.35; color: #000; }
.pd-80 .ar { display: block; font-size: 8pt; color: #333; font-family: "IBM Plex Sans Arabic", Tahoma, Arial, sans-serif; }
.pd-80 .en { display: block; }
.r80-head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1px; padding-bottom: 6px; border-bottom: 1px dashed #000; }
.r80-logo { width: 34mm; height: auto; margin-bottom: 3px; }
.r80-head b { font-size: 11pt; }
.r80-title { text-align: center; font-weight: 700; font-size: 11pt; margin: 6px 0; text-transform: uppercase; letter-spacing: .06em; }
.r80-title .ar { font-size: 10pt; text-transform: none; letter-spacing: 0; color: #000; }
.r80-meta, .r80-items, .r80-tot { width: 100%; border-collapse: collapse; }
.r80-meta th, .r80-meta td { text-align: left; vertical-align: top; padding: 1px 0; font-weight: 400; }
.r80-meta td { text-align: right; font-weight: 600; }
.r80-items { margin-top: 6px; border-top: 1px dashed #000; border-bottom: 1px dashed #000; }
.r80-items th { text-align: left; font-weight: 700; padding: 3px 0; border-bottom: 1px solid #000; }
.r80-items td { padding: 3px 0; vertical-align: top; border-bottom: 1px dotted #999; }
.r80-items .r, .r80-items th.r { text-align: right; white-space: nowrap; }
.r80-q { font-size: 8pt; color: #333; }
.r80-tot { margin-top: 4px; }
.r80-tot th { text-align: left; font-weight: 400; padding: 2px 0; }
.r80-tot td { text-align: right; white-space: nowrap; padding: 2px 0; font-variant-numeric: tabular-nums; }
.r80-tot .big th, .r80-tot .big td { font-weight: 700; font-size: 11pt; border-top: 1px solid #000; }
.r80-note { font-size: 8pt; text-align: center; margin-top: 4px; }
.r80-foot { text-align: center; margin-top: 8px; padding-top: 6px; border-top: 1px dashed #000; font-size: 8.5pt; }
.r80-no { font-family: "IBM Plex Mono", monospace; margin-top: 3px; font-size: 8pt; }
@media print { @page receipt80 { margin: 0; } .pd-80 { page: receipt80; padding: 2mm 0; } }
/* product form: online shop photo */
.shopph { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.shopph-img { width: 72px; height: 72px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); display: grid; place-items: center; overflow: hidden; flex: none; }
.shopph-img img { width: 100%; height: 100%; object-fit: cover; display: block; }