/* HERO POS: the shop-look studio (#/shop/<id>/look, owner's pick C "Live studio", 12 Oct) and the
   "Shop look" card on the shop page. The studio is drawn in the console's tokens (app.css), so it
   follows Day, Dusk and Night; the previews (.slp) are the shop's own screens in the shop's own
   tokens, ported from app/mockups/hero-shop-look-upload-options.html (whose screens come from the
   approved app/mockups/fuheng-shop-theme.html). Every preview rule sits under .slp, so nothing of
   the shop's look leaks into the console and the console's .btn/.dot never reach the previews. */

/* ---------------------------------------------------------------- the studio */
.sls { display: grid; gap: 16px; min-width: 0 }
.sl-top { display: grid; gap: 4px }
.sl-crumb { font-size: 13px; color: var(--muted) }
.sl-crumb a { color: var(--brand); font-weight: 600; text-underline-offset: 2px }
.sl-crumb a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px }
.sl-crumb b { color: var(--ink) }
.sl-top h2 { font-size: 24px }
.sl-wrap { display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 18px; align-items: start; min-width: 0 }
.sl-side { display: flex; flex-direction: column; gap: 10px; min-width: 0 }
.sl-sec { background: var(--card); color: var(--ink); border: 1px solid var(--edge); border-radius: 16px; box-shadow: var(--shadow); padding: 14px; display: flex; flex-direction: column; gap: 10px; min-width: 0 }
.sl-sec h3 { font-size: 14px; font-weight: 700; display: flex; gap: 8px; align-items: center; min-width: 0 }
.sl-sec h3 .n { width: 22px; height: 22px; border-radius: 50%; background: var(--brand); color: var(--on-brand); display: grid; place-items: center; font: 700 12px var(--f-body); flex: none }
.sl-sec h3 .r { margin-left: auto; font: 500 12px var(--f-body); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0 }

.sl-lgrow { display: flex; gap: 12px; align-items: center }
.sl-lgbox { width: 120px; height: 80px; background: #fff center / contain no-repeat; border-radius: 10px; border: 1px solid var(--line); flex: none }
.sl-lgbox.empty { display: grid; place-items: center; font-size: 12px; color: var(--muted); background: var(--bg); border-style: dashed }
.sl-lgtext { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; min-width: 0 }
.sl-file { position: relative; overflow: hidden }
.sl-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; padding: 0 }
.sl-file:focus-within { outline: 2px solid var(--brand); outline-offset: 2px }

.sl-cols { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; align-items: center }
.sl-col { position: relative; display: flex; gap: 10px; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; font-size: 12px; color: var(--muted); line-height: 1.3; cursor: pointer; min-width: 0 }
.sl-col:hover { border-color: var(--muted) }
.sl-col:focus-within { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft) }
.sl-col > i { width: 32px; height: 32px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12) }
.sl-col b { display: block; color: var(--ink); font-size: 13px }
.sl-col .mono { display: block; font-size: 11px }
.sl-col input[type="color"] { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; padding: 0; border: 0; cursor: pointer }
.sl-swap { all: unset; box-sizing: border-box; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel); cursor: pointer; font-size: 16px; color: var(--brand); display: grid; place-items: center }
.sl-swap:hover { border-color: var(--brand) }
.sl-swap:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px }
.sl-found { display: inline-flex; gap: 5px; align-items: center }
.sl-found i { width: 14px; height: 14px; border-radius: 50%; display: inline-block; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12) }

.sl-fonts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px }
.sl-font { all: unset; box-sizing: border-box; border: 1.5px solid var(--line); border-radius: 12px; padding: 8px; background: var(--panel); cursor: pointer; font: 500 11px var(--f-body); color: var(--muted); min-width: 0 }
.sl-font span { display: block; font-size: 19px; color: var(--ink); line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.sl-font:hover { border-color: var(--muted) }
.sl-font[aria-pressed="true"] { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft) }
.sl-font:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px }
.sl-more { display: flex; gap: 10px; align-items: center }
.sl-more select { flex: 1; font-size: 13px; padding: 6px 8px }

.sl-sealrow { display: flex; gap: 12px; align-items: flex-start }
.sl-sealpick { position: relative; flex: none; background: #fff center / 100% 100% no-repeat; border-radius: 6px; outline: 1px solid var(--line); overflow: hidden; touch-action: none }
.sl-sealbox { position: absolute; border: 2px solid var(--brand); border-radius: 6px; box-shadow: 0 0 0 999px rgba(23, 36, 63, .32); cursor: move; touch-action: none }
.sl-sealbox:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }
.sl-corner { position: absolute; right: -7px; bottom: -7px; width: 16px; height: 16px; border-radius: 50%; background: var(--brand); border: 2px solid #fff; cursor: nwse-resize }
.sl-sealtext { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; min-width: 0 }

.sl-apply { display: flex; flex-direction: column; gap: 6px; padding-top: 4px }
.sl-btns { display: flex; gap: 8px; flex-wrap: wrap }
.sl-btns .sl-big { flex: 1; padding: 11px 14px; font-size: 14px; border-radius: 10px; white-space: normal }
.sl-btns .btn:not(.sl-big) { padding: 11px 14px; border-radius: 10px }
.sl-status { font-size: 13px; font-weight: 600; color: var(--ink) }
.sl-apply .small { font-size: 12px }

.sl-prev { background: var(--card); border: 1px solid var(--edge); border-radius: 18px; box-shadow: var(--shadow); display: flex; flex-direction: column; overflow: hidden; min-width: 0; position: sticky; top: 12px }
.sl-ptabs { display: flex; gap: 4px; padding: 10px 12px; border-bottom: 1px solid var(--line); align-items: center; flex-wrap: wrap }
.sl-ptabs button { all: unset; box-sizing: border-box; font: 600 13px var(--f-body); color: var(--muted); padding: 7px 12px; border-radius: 8px; cursor: pointer }
.sl-ptabs button:hover { color: var(--ink) }
.sl-ptabs button[aria-pressed="true"] { background: var(--brand-soft); color: var(--brand) }
.sl-ptabs button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px }
.sl-live { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--good); font-weight: 600 }
.sl-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--good); animation: sl-pulse 1.6s infinite }
@keyframes sl-pulse { 50% { opacity: .3 } }
.sl-stage { padding: 18px 12px; min-height: 420px; overflow: hidden;
  background: repeating-linear-gradient(45deg, var(--bg) 0 12px, color-mix(in srgb, var(--bg) 94%, var(--ink)) 12px 24px) }
.sl-stage.flash { animation: sl-flash .5s ease }
@keyframes sl-flash { from { filter: brightness(1.12) } to { filter: none } }
@media (prefers-reduced-motion: reduce) { .sl-live i, .sl-stage.flash { animation: none } }

/* An iPad held upright, a phone: the controls above, the previews under them. */
@media (max-width: 1000px) {
  .sl-wrap { grid-template-columns: minmax(0, 1fr) }
  .sl-prev { position: static }
}
@media (max-width: 520px) {
  .sl-fonts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) }
  .sl-font span { font-size: 16px }
  .sl-cols { grid-template-columns: minmax(0, 1fr); justify-items: stretch }
  .sl-swap { justify-self: center }
  .sl-sealrow { flex-direction: column }
  .sl-btns .btn { flex: 1 1 100% }
  .sl-stage { min-height: 0 }
}

/* ---------------------------------------------------------------- the card on the shop page */
:root { --c-look: #c2551f }
:root[data-hq-theme="night"] { --c-look: #ff9f6e }
@media (prefers-color-scheme: dark) { :root:not([data-hq-theme]) { --c-look: #ff9f6e } }
.spg .a-look { grid-column: span 4; order: 6; --cat: var(--c-look);
  --cat-icon: 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%3Ccircle cx='13.5' cy='6.5' r='1.5'/%3E%3Ccircle cx='17.5' cy='10.5' r='1.5'/%3E%3Ccircle cx='8.5' cy='7.5' r='1.5'/%3E%3Ccircle cx='6.5' cy='12.5' r='1.5'/%3E%3Cpath d='M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.9 0 1.6-.7 1.6-1.7 0-.4-.2-.8-.4-1.1-.3-.3-.4-.7-.4-1.1 0-.9.7-1.7 1.7-1.7H16c3.1 0 5.6-2.5 5.6-5.6C21.9 6 17.5 2 12 2z'/%3E%3C/svg%3E") }
@media (max-width: 1180px) { .spg .a-look { grid-column: span 6 } }
.a-look { display: flex; flex-direction: column; gap: 12px }
.a-look .lk-row { display: flex; gap: 14px; align-items: center; min-width: 0 }
.a-look .lk-seal { flex: none; display: block; padding: 4px; border-radius: 50%; background: transparent }
.a-look .lk-cols { display: grid; gap: 8px; min-width: 0 }
.a-look .lk-sw { display: flex; gap: 10px; align-items: center; font-size: 13px }
.a-look .lk-sw i { width: 26px; height: 26px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12) }
.a-look .lk-sw .mono { color: var(--muted) }
.a-look .lk-acts { margin-top: auto; display: flex }
.ov-card.a-look a.btn { color: var(--ink) }
.ov-card.a-look a.btn.pri { color: var(--on-brand) }

/* ---------------------------------------------------------------- the shop's screens (.slp) */
.slp { display: flex; justify-content: center; color: var(--ink); font-family: var(--fb) }
.slp-row { display: flex; gap: 28px; align-items: flex-start; justify-content: center; transform-origin: top center; width: max-content }
.slp .dev { position: relative; overflow: hidden; flex: none }
.slp .dev.ph { border-radius: 30px; box-shadow: 0 0 0 7px #171010, 0 14px 30px rgba(20, 20, 40, .25) }
.slp .dev.tl { border-radius: 10px; box-shadow: 0 0 0 8px #1d1d1f, 0 14px 30px rgba(20, 20, 40, .25) }
.slp .dev.rc { box-shadow: 0 8px 20px rgba(0, 0, 0, .18) }
.slp .screen { position: absolute; top: 0; left: 0; transform-origin: 0 0; background: var(--paper); color: var(--ink); font-family: var(--fb); overflow: hidden; display: flex; flex-direction: column; line-height: 1.4 }
.slp h3 { font-family: var(--fd); font-weight: 400; margin: 0 }
.slp .sb { height: 44px; display: flex; justify-content: space-between; align-items: center; padding: 0 28px; font: 600 15px var(--fb); flex: none }
.slp .num { font-variant-numeric: tabular-nums }
.slp .sbtn { display: grid; place-items: center; font: 700 16px var(--fb); border-radius: 14px; padding: 14px 18px; background: var(--red); color: var(--on-red) }
.slp .sbtn.gold { background: var(--gold); color: var(--on-gold) }
.slp .sbtn.ghost { background: transparent; color: var(--red); box-shadow: inset 0 0 0 1.5px var(--red) }
.slp .capsrule { font: 600 11px var(--fb); letter-spacing: .24em; text-transform: uppercase; color: var(--mute); display: flex; align-items: center; gap: 10px }
.slp .capsrule::after { content: ""; flex: 1; height: 1px; background: var(--line) }
.slp .two { margin: auto 20px 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px }

/* the seal and the logo: drawn on white, so multiply lets the plate show through the white */
.slp .seal { background: var(--plate); border-radius: 50%; display: grid; place-items: center; flex: none; isolation: isolate; box-shadow: 0 0 0 2px var(--gold); overflow: hidden }
.slp .seal.soft { background: var(--gold-soft); box-shadow: none }
.slp .crop { background-repeat: no-repeat; mix-blend-mode: multiply; flex: none }
.slp .letter { font-family: var(--fd); color: var(--red); line-height: 1 }
.slp .nologo { font: 400 22px/1.25 var(--fd); color: var(--red); text-align: center; display: grid; place-items: center; overflow-wrap: anywhere }

/* guest phone: member card */
.slp .mcard { margin: 6px 20px 0; border-radius: 24px; background: var(--red); color: var(--on-red); padding: 20px; position: relative; overflow: hidden; box-shadow: inset 0 0 0 2px var(--gold), inset 0 0 0 6px var(--red), inset 0 0 0 7px color-mix(in srgb, var(--gold) 60%, transparent) }
.slp .mcard .row1 { display: flex; align-items: center; gap: 12px }
.slp .mcard h3 { font-size: 20px; line-height: 1.2 }
.slp .mcard .lvl { font: 600 11px var(--fb); letter-spacing: .2em; text-transform: uppercase; color: var(--gold) }
.slp .mcard .pts { margin-top: 18px; display: flex; align-items: baseline; gap: 8px }
.slp .mcard .pts b { font: 400 48px var(--fd); line-height: 1 }
.slp .mcard .bar { height: 8px; border-radius: 9px; background: color-mix(in srgb, var(--on-red) 20%, transparent); margin-top: 12px; overflow: hidden }
.slp .mcard .bar i { display: block; height: 100%; width: 68%; background: var(--gold); border-radius: 9px }
.slp .mcard .next { font-size: 12px; margin-top: 8px; opacity: .85 }
.slp .stamps { margin: 16px 20px 0; background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 16px }
.slp .stamps .grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 12px }
.slp .stamp { aspect-ratio: 1; border-radius: 50%; border: 2px dashed var(--line); display: grid; place-items: center; font: 400 13px var(--fd); color: var(--mute); overflow: hidden; isolation: isolate }
.slp .stamp.on { border: 0; background: var(--plate); box-shadow: 0 0 0 2px var(--red) }
.slp .stamp.free { border: 2px solid var(--gold); color: var(--gold); font-size: 11px; font-family: var(--fb); font-weight: 700 }
.slp .rw { margin: 12px 20px 0; display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 12px }
.slp .rw .cost { margin-left: auto; font: 400 15px var(--fd); color: var(--red); white-space: nowrap }
.slp .rw b { font-size: 15px; display: block } .slp .rw span { font-size: 12px; color: var(--mute) }

/* guest phone: QR order */
.slp .qr-head { display: flex; align-items: center; gap: 12px; padding: 6px 20px 12px }
.slp .qr-head .t { flex: 1; min-width: 0 }
.slp .qr-head .t b { font: 400 19px var(--fd); display: block; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.slp .qr-head .t span { font-size: 12px; color: var(--mute) }
.slp .table-no { background: var(--red); color: var(--on-red); border-radius: 14px; padding: 6px 12px; text-align: center; font: 600 11px var(--fb) }
.slp .table-no b { display: block; font: 400 22px var(--fd); line-height: 1.1 }
.slp .soup { margin: 0 20px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 12px 14px }
.slp .soup .opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px }
.slp .soup .opts div { border: 1.5px solid var(--line); border-radius: 12px; padding: 8px; text-align: center; font-size: 13px; font-weight: 600 }
.slp .soup .opts div small { display: block; font-weight: 500; color: var(--mute); font-size: 11px }
.slp .soup .opts div.on { border-color: var(--red); background: color-mix(in srgb, var(--red) 10%, var(--card)); color: var(--red) }
.slp .cats { display: flex; gap: 18px; padding: 16px 20px 0; border-bottom: 1px solid var(--line); font-weight: 600; font-size: 14px; color: var(--mute); white-space: nowrap }
.slp .cats div { padding-bottom: 10px }
.slp .cats div.on { color: var(--red); box-shadow: inset 0 -3px 0 var(--red) }
.slp .items { padding: 6px 20px; display: flex; flex-direction: column }
.slp .it { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line) }
.slp .it .idot { width: 44px; height: 44px; border-radius: 50%; background: var(--gold-soft); display: grid; place-items: center; flex: none; font: 400 15px var(--fd); color: var(--red) }
.slp .it .t { flex: 1; min-width: 0 }
.slp .it .t b { display: block; font-size: 15px }
.slp .it .t span { font-size: 12px; color: var(--mute) }
.slp .it .pr { font: 400 15px var(--fd); margin-right: 6px }
.slp .add { width: 34px; height: 34px; border-radius: 50%; background: var(--red); color: var(--on-red); display: grid; place-items: center; font: 700 20px var(--fb); flex: none }
.slp .qty { display: flex; align-items: center; gap: 8px; font-weight: 700 }
.slp .qty .add.m { background: transparent; color: var(--red); box-shadow: inset 0 0 0 1.5px var(--red) }
.slp .cart { margin: auto 16px 26px; background: var(--ink); color: var(--paper); border-radius: 20px; padding: 14px 16px; display: flex; align-items: center; gap: 12px }
.slp .cart .n { width: 32px; height: 32px; border-radius: 50%; background: var(--gold); color: var(--on-gold); display: grid; place-items: center; font-weight: 700 }
.slp .cart b { font: 400 20px var(--fd); margin-left: auto }
.slp .cart .go { background: var(--red); color: var(--on-red); border-radius: 12px; padding: 10px 14px; font-weight: 700 }

/* staff phone: PIN (the shop's look; the Powered line is HERO's, always) */
.slp .pin-top { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 24px 0 }
.slp .pin-logo { background: var(--plate); border-radius: 24px; padding: 10px 14px; isolation: isolate; box-shadow: 0 0 0 1.5px var(--gold) }
.slp .pin-top h3 { font: 600 16px var(--fb); color: var(--mute); margin-top: 6px }
.slp .dots { display: flex; gap: 16px; margin-top: 6px }
.slp .dots i { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--red) }
.slp .dots i.on { background: var(--red) }
.slp .keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 26px 40px 0 }
.slp .keys div { height: 66px; border-radius: 50%; display: grid; place-items: center; font: 400 28px var(--fd); background: var(--card); border: 1px solid var(--line); aspect-ratio: 1; margin: 0 auto }
.slp .keys div.k-txt { font: 600 15px var(--fb); color: var(--mute); background: transparent; border: 0 }
.slp .powered { margin: auto 0 30px; display: flex; align-items: center; justify-content: center; gap: 8px; font: 600 12px "IBM Plex Sans Thai", system-ui, sans-serif; color: #5b6785; letter-spacing: .02em }
.slp .powered svg { flex: none }

/* staff phone: tables */
.slp .st-head { display: flex; align-items: center; gap: 12px; padding: 6px 20px 14px }
.slp .st-head .t { flex: 1; min-width: 0 } .slp .st-head .t b { font: 400 20px var(--fd); display: block; line-height: 1.25 }
.slp .st-head .t span { font-size: 12px; color: var(--mute) }
.slp .st-head .who { font: 600 12px var(--fb); color: var(--red); border: 1.5px solid var(--red); border-radius: 999px; padding: 6px 10px; white-space: nowrap }
.slp .zone { padding: 0 20px }
.slp .tgrid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px }
.slp .tb2 { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 12px 14px; min-height: 96px; display: flex; flex-direction: column; gap: 2px; position: relative }
.slp .tb2 .n { font: 400 30px/1.1 var(--fd) }
.slp .tb2 small { font-size: 12px; color: var(--mute); margin-top: auto }
.slp .tb2.busy { background: var(--red); color: var(--on-red); border-color: var(--red) }
.slp .tb2.busy small { color: var(--on-red); opacity: .85 }
.slp .tb2 .tag { position: absolute; top: 10px; right: 10px; font: 700 10px var(--fb); letter-spacing: .06em; padding: 4px 8px; border-radius: 999px; background: var(--gold); color: var(--on-gold) }
.slp .tb2 .tag.qr { background: var(--on-red); color: var(--red) }
.slp .tb2 .src { font-size: 11px; font-weight: 600; color: var(--gold-soft) }
.slp .tb2:not(.busy) .src { color: var(--mute) }

/* till 1280 x 720 */
.slp .rail { width: 150px; background: var(--red); color: var(--on-red); display: flex; flex-direction: column; padding: 16px 12px; gap: 6px }
.slp .rail div.c { padding: 12px 14px; border-radius: 12px; font-weight: 600; font-size: 16px; opacity: .85 }
.slp .rail div.c.on { background: var(--on-red); color: var(--red); opacity: 1 }
.slp .rail .staff { margin-top: auto; font-size: 13px; opacity: .85; padding: 0 6px }
.slp .tmain { flex: 1; display: flex; flex-direction: column; min-width: 0 }
.slp .tbar { display: flex; align-items: center; gap: 14px; padding: 16px 22px; border-bottom: 1px solid var(--line) }
.slp .tbar h3 { font-size: 24px }
.slp .tbar .capsrule { flex: 1 }
.slp .tbar .tb { font: 600 14px var(--fb); padding: 9px 14px; border-radius: 999px; background: var(--card); border: 1px solid var(--line) }
.slp .tbar .tb.on { background: var(--ink); color: var(--paper); border-color: var(--ink) }
.slp .tgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 18px 22px }
.slp .tile { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 14px; height: 110px; display: flex; flex-direction: column; position: relative; overflow: hidden }
.slp .tile b { font-size: 17px; line-height: 1.3 }
.slp .tile .pr { margin-top: auto; font: 400 20px var(--fd); color: var(--red) }
.slp .tile .q { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; border-radius: 50%; background: var(--red); color: var(--on-red); display: grid; place-items: center; font-weight: 700; font-size: 14px }
.slp .tile.set { background: var(--gold-soft); border-color: var(--gold) }
.slp .ticket { width: 370px; background: var(--card); border-left: 1px solid var(--line); display: flex; flex-direction: column }
.slp .ticket .th { padding: 18px 20px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--line) }
.slp .ticket .th .tn { background: var(--red); color: var(--on-red); border-radius: 14px; padding: 6px 12px; text-align: center; font: 600 11px var(--fb) }
.slp .ticket .th .tn b { display: block; font: 400 26px var(--fd); line-height: 1.1 }
.slp .ticket .th small { display: block; color: var(--mute); font-size: 13px }
.slp .ticket .th strong { font-size: 17px }
.slp .ticket .tl { padding: 8px 20px; flex: 1; display: flex; flex-direction: column }
.slp .ticket .tl .ln { display: grid; grid-template-columns: 32px 1fr auto; gap: 8px; padding: 10px 0; border-bottom: 1px dashed var(--line); font-size: 15px }
.slp .ticket .tl .ln .q { font-weight: 700; color: var(--red) }
.slp .ticket .tl .ln small { display: block; color: var(--mute); font-size: 12px }
.slp .ticket .tl .ln.sent { opacity: .55 }
.slp .ticket .tot { padding: 14px 20px; border-top: 1px solid var(--line) }
.slp .ticket .tot .r { display: flex; justify-content: space-between; font-size: 14px; color: var(--mute); margin-bottom: 4px }
.slp .ticket .tot .big { display: flex; justify-content: space-between; align-items: baseline; margin-top: 6px }
.slp .ticket .tot .big b { font: 400 32px var(--fd) }
.slp .tbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 20px 20px }
.slp .tbtns .sbtn { padding: 18px; font-size: 17px }

/* receipt and kitchen ticket: thermal paper, black only */
.slp .receipt { width: 288px; background: #fff; color: #111; font-family: var(--fb); font-size: 12.5px; padding: 18px 16px 26px }
.slp .receipt .crop.mono { filter: grayscale(1) contrast(1.8) brightness(1.05); margin: 0 auto }
.slp .receipt .nologo { color: #111; margin: 0 auto }
.slp .receipt .c { text-align: center }
.slp .receipt .rule { border-top: 1px dashed #111; margin: 10px 0 }
.slp .receipt .rule2 { height: 5px; border-top: 1px solid #111; border-bottom: 1px solid #111; margin: 10px 0 }
.slp .receipt .l { display: grid; grid-template-columns: 22px 1fr auto; gap: 4px; line-height: 1.55 }
.slp .receipt .tot { display: flex; justify-content: space-between; font: 400 20px var(--fd); margin-top: 4px }
.slp .receipt .kv { display: flex; justify-content: space-between; line-height: 1.6 }
.slp .receipt .pts { border: 1.5px solid #111; border-radius: 999px; padding: 6px 10px; display: flex; justify-content: space-between; align-items: center; margin-top: 10px }
.slp .kt { width: 288px; background: #fff; color: #111; font-family: var(--fb); padding: 16px 16px 22px; font-size: 14px }
.slp .kt .st { display: flex; justify-content: space-between; font: 700 12px var(--fb); letter-spacing: .14em }
.slp .kt .big { display: flex; justify-content: space-between; align-items: center; border: 3px solid #111; border-radius: 8px; padding: 6px 12px; margin: 10px 0 }
.slp .kt .big b { font: 400 40px/1 var(--fd) }
.slp .kt .meta { font-size: 12px; line-height: 1.6 }
.slp .kt .rule { border-top: 1px dashed #111; margin: 10px 0 }
.slp .kt .ln { display: grid; grid-template-columns: 34px 1fr; gap: 4px; padding: 6px 0; font: 700 18px var(--fb) }
.slp .kt .ln small { display: block; font: 600 14px var(--fb) }
.slp .kt .ln small.hl { background: #111; color: #fff; display: inline-block; padding: 0 6px; border-radius: 3px }
.slp .kt .shopname { text-align: center; font-size: 11px; letter-spacing: .2em }

/* the seal on the shop page's card: the same seal, in the shop's colours */
.slp.lk-seal { display: block; color: inherit }