/* A little store assembles inside the existing setup selector. */
.delight-shop {
  grid-column:1 / -1;
  position:relative;
  min-width:0;
  height:234px;
  margin:8px 0 0;
  padding:12px 9px 10px;
  overflow:hidden;
  isolation:isolate;
  border:1px solid var(--decision-line, #c1d0e5);
  border-radius:14px;
  background:var(--decision-wash, #eff4fc);
  color:var(--decision-ink, #173c76);
}
.delight-shop-heading {
  font:800 11px/1.7 var(--sans, sans-serif);
  letter-spacing:.025em;
  text-align:left;
}
.delight-shop-heading::before {
  content:"";
  display:inline-block;
  width:5px;
  height:5px;
  margin:0 7px 1px 1px;
  border-radius:50%;
  background:var(--decision-mark, #b18d3d);
}
.delight-shop-stage { position:relative; height:170px; min-width:0; }
.delight-shop-floor {
  position:absolute;
  inset:69px 4% 2px;
  border:1px solid var(--decision-line, #c1d0e5);
  border-radius:50% 50% 15px 15px;
  background:linear-gradient(transparent 48%,var(--decision-surface, #fff) 49%);
  box-shadow:0 5px 0 var(--decision-surface, #fff);
  opacity:.55;
}
.delight-shop-glow {
  position:absolute;
  left:9%;
  right:9%;
  top:58px;
  bottom:8px;
  border-radius:50%;
  background:radial-gradient(ellipse,var(--gold-pale, #f6e7bc),transparent 68%);
  opacity:0;
  pointer-events:none;
}
.delight-shop-connections { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.delight-shop-wire,.delight-shop-light { fill:none; stroke-linecap:round; stroke-linejoin:round; }
.delight-shop-wire { stroke:var(--decision-accent, #2458a6); stroke-width:1.6; stroke-dasharray:1; stroke-dashoffset:0; opacity:0; }
.delight-shop-wire[data-delight-active=true] { opacity:.38; }
.delight-shop-light { stroke:var(--decision-mark, #b18d3d); stroke-width:3.5; stroke-dasharray:.1 1; stroke-dashoffset:1; opacity:0; }
.delight-shop-node { position:absolute; z-index:1; transform:translateX(-50%); }
.delight-shop-node--pos { left:50%; top:4px; width:82px; }
.delight-shop-node--printer { left:83.333%; top:18px; width:62px; }
.delight-shop-node--handy { left:16.667%; top:102px; width:72px; }
.delight-shop-node--manager { left:83.333%; top:102px; width:72px; }
.delight-shop-node--order { left:50%; top:105px; width:78px; }
.delight-shop-prop { display:flex; flex-direction:column; align-items:center; opacity:0; transform:translateY(10px) scale(.92); transform-origin:50% 90%; }
.delight-shop-node[data-delight-active=true]>.delight-shop-prop { opacity:1; transform:none; }
.delight-shop[data-delight-setup=none] .delight-shop-prop { opacity:.22; transform:none; }
.delight-shop-device {
  position:relative;
  display:flex;
  flex:none;
  align-items:center;
  justify-content:center;
  border:2px solid var(--decision-ink, #173c76);
  background:var(--decision-surface, #fff);
  box-shadow:2px 3px 0 var(--decision-line, #c1d0e5);
}
.delight-shop-device--tablet { width:68px; height:46px; padding:5px 7px; border-radius:7px; }
.delight-shop-node--order .delight-shop-device--tablet { width:61px; height:39px; border-radius:6px; }
.delight-shop-device--phone { width:25px; height:42px; border-radius:6px; padding:6px 3px 4px; }
.delight-shop-device--phone::before {
  content:"";
  position:absolute;
  top:2px;
  left:calc(50% - 4px);
  width:8px;
  height:2px;
  border-radius:2px;
  background:var(--decision-ink, #173c76);
}
.delight-shop-display { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:3px; width:100%; height:100%; }
.delight-shop-display i { display:block; min-width:0; border-radius:2px; background:var(--decision-accent, #2458a6); opacity:.68; }
.delight-shop-display i:nth-child(2) { background:var(--decision-mark, #b18d3d); opacity:.8; }
.delight-shop-display i:nth-child(3) { opacity:.28; }
.delight-shop-display i:nth-child(4) { opacity:.42; }
.delight-shop-device--phone .delight-shop-display { grid-template-columns:1fr; gap:2px; }
.delight-shop-device--printer { width:35px; height:25px; border-radius:5px 5px 7px 7px; padding:6px; }
.delight-shop-device--printer::before {
  content:"";
  position:absolute;
  width:21px;
  height:18px;
  left:5px;
  top:-12px;
  border:1px solid var(--decision-line, #c1d0e5);
  border-bottom:0;
  border-radius:2px 2px 0 0;
  background:repeating-linear-gradient(transparent 0 4px,var(--decision-line, #c1d0e5) 4px 5px),var(--decision-surface, #fff);
}
.delight-shop-device--printer .delight-shop-display { display:block; height:3px; border-radius:3px; background:var(--decision-ink, #173c76); }
.delight-shop-device--printer .delight-shop-display i { display:none; }
.delight-shop-device-label { display:block; margin-top:5px; font:800 10px/1.2 var(--sans, sans-serif); white-space:nowrap; color:var(--decision-ink, #173c76); }
.delight-shop-caption { margin:4px 0 0; font:700 11px/1.5 var(--sans, sans-serif); color:var(--decision-muted, #536b8a); text-align:center; }
body[data-vertical=cabaret] .delight-shop-floor { border-radius:50% 50% 23px 23px; }
body[data-vertical=concafe] .delight-shop { border-radius:20px; border-style:dashed; }
body[data-vertical=concafe] .delight-shop-floor { border-radius:45% 45% 22px 22px; }
body[data-vertical=host] .delight-shop,body[data-vertical=host] .delight-shop-floor { border-radius:4px; }
body[data-vertical=girlsbar] .delight-shop-floor { border-radius:36px 36px 10px 10px; }

/* Real thumbnails make the existing screen tabs a horizontally browsable strip. */
#screen .screen-tabs.delight-gallery-tabs {
  display:flex;
  position:relative;
  gap:8px;
  width:100%;
  min-width:0;
  margin:20px 0 24px;
  padding:8px 3px 13px;
  overflow-x:auto;
  overflow-y:hidden;
  overscroll-behavior-x:contain;
  scroll-behavior:auto;
  scroll-padding-inline:5px;
  scroll-snap-type:x proximity;
  scrollbar-width:thin;
  scrollbar-color:var(--decision-line, #c1d0e5) transparent;
  -webkit-overflow-scrolling:touch;
}
#screen .delight-gallery-tabs>.screen-tab {
  display:flex;
  flex:0 0 calc((100% - 16px)/3.15);
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  min-width:88px;
  max-width:128px;
  min-height:105px;
  padding:9px 6px 10px;
  border:1px solid var(--decision-line, #c1d0e5);
  border-radius:11px;
  background:var(--decision-surface, #fff);
  color:var(--decision-muted, #536b8a);
  font:800 10px/1.5 var(--sans, sans-serif);
  white-space:nowrap;
  scroll-snap-align:center;
  box-shadow:none;
}
#screen .delight-gallery-tabs>.screen-tab[aria-selected=true] {
  border-color:var(--decision-accent, #2458a6);
  background:var(--decision-wash, #eff4fc);
  color:var(--decision-ink, #173c76);
  box-shadow:inset 0 -3px var(--decision-accent, #2458a6);
}
#screen .delight-gallery-tabs>.screen-tab:hover { border-color:var(--decision-accent, #2458a6); }
#screen .delight-gallery-tabs>.screen-tab:focus-visible { outline:2px solid var(--decision-mark, #b18d3d); outline-offset:1px; }
.delight-gallery-preview {
  display:flex;
  position:relative;
  flex:none;
  align-items:center;
  justify-content:center;
  width:100%;
  height:58px;
  overflow:hidden;
  border:1px solid var(--decision-line, #c1d0e5);
  border-radius:5px;
  background:var(--decision-wash, #eff4fc);
  transform-origin:50% 100%;
  pointer-events:none;
}
.delight-gallery-preview img { display:block; width:100%; height:100%; padding:3px; object-fit:contain; border-radius:4px; }
.delight-gallery-preview[data-delight-device=phone] img { width:52%; padding:3px 0; }
.delight-gallery-preview[data-delight-preview=unavailable]::before {
  content:"";
  width:68%;
  height:64%;
  border:2px solid var(--decision-line, #c1d0e5);
  border-radius:4px;
  background:linear-gradient(135deg,transparent 48%,var(--decision-line, #c1d0e5) 49% 51%,transparent 52%);
}
.delight-gallery-preview[data-delight-preview=unavailable][data-delight-device=phone]::before { width:24%; height:74%; }
body[data-vertical=host] #screen .delight-gallery-tabs>.screen-tab { border-radius:4px; }
body[data-vertical=concafe] #screen .delight-gallery-tabs>.screen-tab { border-radius:14px; }
@media (max-width:380px) {
  .delight-shop { padding-inline:4px; }
  .delight-shop-device-label { font-size:9px; }
  #screen .delight-gallery-tabs>.screen-tab { min-width:86px; }
}
@media (prefers-reduced-motion:reduce) {
  .delight-shop-glow,.delight-shop-light { display:none; }
  #screen .screen-tabs.delight-gallery-tabs { scroll-behavior:auto!important; }
}
body.motion-off .delight-shop-glow,body.motion-off .delight-shop-light,
html[data-motion=off] .delight-shop-glow,html[data-motion=off] .delight-shop-light { display:none; }
body.motion-off #screen .screen-tabs.delight-gallery-tabs,
html[data-motion=off] #screen .screen-tabs.delight-gallery-tabs { scroll-behavior:auto!important; }