/* --- Shop kiosk POS (iPad-first; full-screen phases; no Croppit chrome) ---
 * N11 SHOP-UI1: design tokens map EXISTING colours only — no rebrand.
 * Do not change high-level palette or POS interactions without product ask.
 * See docs/STYLING.md §8 / ROADMAP N11.
 */
/* Tokens on :root so html + body can use them; values = as-built palette only */
:root {
  /* Dark phases (splash / offline / thank-you body) */
  --shop-bg-dark: #1a1f1a;
  --shop-bg-darker: #0d120d;
  --shop-bg-darkest: #121512;
  --shop-fg-on-dark: #f2f4f2;
  --shop-fg-muted-dark: #c5d0c5;
  --shop-fg-dim-dark: #8a9a8a;
  --shop-fg-dim-blue: #99aabb;
  --shop-accent-gold: #e0c56a;
  --shop-success-soft: #b8e0b8;
  --shop-error-soft: #f0a0a0;
  --shop-header-green: #2d3b2d;
  --shop-header-green-mid: #3d4a3d;
  --shop-splash-grad-start: #2d3b2d;
  --shop-splash-grad-mid: #1a1f1a;
  --shop-splash-grad-end: #121512;

  /* Light phases (shopping / modals / activate setup) */
  --shop-bg-setup: #f4f6f4;
  --shop-bg-shopping: #eef1ee;
  --shop-bg-soft: #eef5ee;
  --shop-bg-panel: #ffffff;
  --shop-fg: #1a1a1a;
  --shop-fg-muted: #1a2a1a;
  --shop-fg-header: #2d3b2d;
  --shop-fg-setup: #222222;
  --shop-border: #c5ccc5;
  --shop-border-focus: #6a9a6a;

  /* Primary actions (Start / Pay / modal OK) — keep var(--shop-primary) family */
  --shop-primary: #4a6a4a;
  --shop-primary-hover: #3d5a3d;
  --shop-primary-soft: #5a7a4a;
  --shop-on-primary: #ffffff;

  /* Danger (clear cart, remove line) */
  --shop-danger: #6b3a3a;
  --shop-danger-hover: #5a2f2f;

  /* Radii / shared */
  --shop-radius: 12px;
  --shop-radius-sm: 10px;
  --shop-idle-black: #000000;
  --shop-error-bg: #f8eaea;
  --shop-ok-green: #1b5e20;
  --shop-ok-green-soft: #c8e6c9;
  --shop-ok-green-mid: #2e7d32;

  /* Motion / touch / stack (same numbers as farm; isolated names) */
  --shop-motion-fast: 0.15s;
  --shop-motion-med: 0.2s;
  --shop-touch-min: 2.75rem;
  --shop-z-bar: 30;
  --shop-z-dropdown: 60;
  --shop-z-help: 200;
  --shop-z-modal: 2000;
  --shop-z-idle: 10000;
}

@media (prefers-reduced-motion: reduce) {
  body.shop-kiosk-body *,
  body.shop-kiosk-body *::before,
  body.shop-kiosk-body *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

html,
body.shop-kiosk-body {
  height: 100%;
  margin: 0;
  background: var(--shop-bg-dark);
  color: var(--shop-fg-on-dark);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

body.shop-kiosk-body .grid_outer {
  height: 100%;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  /* Kiosk owns full viewport — drop croppit CSS grid areas */
  grid-template-rows: none;
  grid-template-areas: none;
}

/* POS sell: hide empty Croppit title/footer chrome (brand lives in shop header strip) */
body.shop-kiosk-body:not(.shop-setup-body) .grid_header,
body.shop-kiosk-body:not(.shop-setup-body) .grid_footer {
  display: none !important;
}

/* Activate (guest tablet setup) still needs scrolling */
body.shop-kiosk-body.shop-setup-body {
  overflow: auto;
  background: var(--shop-bg-setup);
  color: var(--shop-fg-setup);
}

.shop-kiosk {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  max-width: 100%;
  margin: 0;
  padding: 0;
  font-size: 1.05rem;
  position: relative;
  overflow: hidden;
  /* Isolate from croppit global button/input greens (white-on-white tiles, etc.) */
  color: var(--shop-fg);
}

/*
 * croppit.css sets every `button` to white text + Material green (#4CAF50).
 * Product tiles, modal actions, and bar chips are buttons — override here with
 * higher specificity so idle state is readable (hover green was masking the bug).
 */
body.shop-kiosk-body .shop-kiosk button,
body.shop-kiosk-body .shop-kiosk .custom-button {
  background-color: transparent;
  background: transparent;
  color: inherit;
  border: none;
  border-radius: var(--shop-radius);
  padding: 0.5rem 0.85rem;
  font-size: inherit;
  font-family: inherit;
  transition:
    background-color var(--shop-motion-fast) ease,
    color var(--shop-motion-fast) ease,
    border-color var(--shop-motion-fast) ease;
}

body.shop-kiosk-body .shop-kiosk button:hover,
body.shop-kiosk-body .shop-kiosk .custom-button:hover {
  background-color: transparent;
  background: transparent;
  color: inherit;
}

/* Keyboard focus on POS controls (mouse can still be outline-free via :focus:not(:focus-visible)) */
body.shop-kiosk-body .shop-kiosk button:focus {
  outline: none;
}

body.shop-kiosk-body .shop-kiosk button:focus-visible,
body.shop-kiosk-body .shop-kiosk .custom-button:focus-visible,
body.shop-kiosk-body .shop-kiosk a.shop-bar-chip:focus-visible,
body.shop-kiosk-body .shop-kiosk .shop-lang-toggle:focus-visible {
  outline: 2px solid var(--shop-border-focus);
  outline-offset: 2px;
}

/* Primary filled actions (Start / Pay / checkout) */
body.shop-kiosk-body .shop-kiosk .shop-btn-lg.custom-button,
body.shop-kiosk-body .shop-kiosk button.shop-btn-lg {
  background: var(--shop-primary);
  color: var(--shop-bg-panel);
  border: none;
  border-radius: var(--shop-radius);
  padding: 0.9rem 1.5rem;
}

body.shop-kiosk-body .shop-kiosk .shop-btn-lg.custom-button:hover,
body.shop-kiosk-body .shop-kiosk button.shop-btn-lg:hover {
  background: var(--shop-primary-hover);
  color: var(--shop-bg-panel);
}

/* Inputs: croppit uses red #aa1100 borders + full width — reset in kiosk */
body.shop-kiosk-body .shop-kiosk input[type='number'],
body.shop-kiosk-body .shop-kiosk input[type='text'],
body.shop-kiosk-body .shop-kiosk input {
  width: auto;
  max-width: 100%;
  border: 2px solid var(--shop-border);
  border-radius: var(--shop-radius-sm);
  padding: 0.55rem 0.4rem;
  margin: 0;
  color: var(--shop-fg);
  background: var(--shop-bg-panel);
  font-size: inherit;
}

/* --- Full-screen phase panels --- */
.shop-phase {
  display: none !important;
  flex: 1;
  flex-direction: column;
  min-height: 100dvh;
  width: 100%;
  box-sizing: border-box;
  padding: 0.75rem;
}

.shop-phase.is-active {
  display: flex !important;
}

.shop-phase[hidden] {
  display: none !important;
}

/* --- Splash / thank-you / deactivated phases --- */
/* Welcome / thank-you splash: light brand header + dark content body */
.shop-phase-splash.is-active,
#shop_phase_splash.is-active,
#shop_phase_thank_you.is-active,
#shop_phase_deactivated.is-active,
#shop_phase_offline.is-active {
  align-items: stretch;
  justify-content: flex-start;
  text-align: center;
  background: var(--shop-bg-dark);
  padding: 0;
}

.shop-offline-inner .shop-offline-icon {
  font-size: 3rem;
  line-height: 1;
  margin-bottom: 1rem;
  color: var(--shop-accent-gold);
  animation: shop-offline-pulse 1.6s ease-in-out infinite;
}

@keyframes shop-offline-pulse {
  0%,
  100% {
    opacity: 0.55;
  }
  50% {
    opacity: 1;
  }
}

.shop-offline-hint {
  color: var(--shop-fg-dim-dark);
  font-size: 0.95rem;
  margin: 1.5rem 0 0;
}

/* Locked after deactivate: no accidental taps into other phases */
.shop-kiosk-locked .shop-phase:not(#shop_phase_deactivated) {
  pointer-events: none;
  visibility: hidden;
}

.shop-splash-inner {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 0;
  padding: 2rem 1.25rem;
  box-sizing: border-box;
  background: linear-gradient(160deg, var(--shop-splash-grad-start) 0%, var(--shop-splash-grad-mid) 55%, var(--shop-splash-grad-end) 100%);
}

.shop-splash-inner h1 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  margin: 0 0 0.75rem;
  color: var(--shop-bg-panel);
}

.shop-splash-sub {
  color: var(--shop-fg-muted-dark);
  margin: 0 0 2rem;
  font-size: 1.15rem;
}

/* Customer tutorial on splash — manual play only (no autoplay).
   Sized larger now that the splash hint line is gone (button-only CTA). */
.shop-splash-tutorial {
  width: min(48rem, 96%);
  margin: 1.5rem auto 0;
  padding: 0.85rem 0.85rem 0.75rem;
  border-radius: var(--shop-radius);
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(180, 200, 170, 0.22);
  box-sizing: border-box;
  flex: 0 1 auto;
  min-height: 0;
}

.shop-splash-tutorial-title {
  margin: 0 0 0.55rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--shop-bg-soft);
}

.shop-splash-tutorial-frame {
  position: relative;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  background: var(--shop-bg-darker);
  /* Cap height so Start CTA still fits above on tablets */
  max-height: min(48vh, 26rem);
}

.shop-splash-tutorial-video {
  display: block;
  width: 100%;
  max-height: min(48vh, 26rem);
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  border-radius: 8px;
  background: var(--shop-bg-darker);
  touch-action: manipulation;
}

/* Large kiosk-friendly play control — native video play is too small */
.shop-splash-tutorial-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-width: min(16rem, 78%);
  min-height: 5.5rem;
  padding: 1rem 1.5rem;
  border: 3px solid rgba(255, 255, 255, 0.85);
  border-radius: 16px;
  background: var(--shop-primary);
  color: var(--shop-bg-panel) !important;
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  line-height: 1.2;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.shop-splash-tutorial-play:hover,
.shop-splash-tutorial-play:focus {
  background: var(--shop-primary-hover);
  color: var(--shop-bg-panel) !important;
  outline: 3px solid var(--shop-success-soft);
  outline-offset: 3px;
}

.shop-splash-tutorial-play:active {
  transform: translate(-50%, -50%) scale(0.98);
}

.shop-splash-tutorial-play-icon {
  display: block;
  font-size: 2rem;
  line-height: 1;
  /* Optical center for ▶ */
  padding-left: 0.15em;
}

.shop-splash-tutorial-play-label {
  display: block;
  white-space: normal;
  text-align: center;
}

/* While playing: hide big start button; native controls appear via JS */
.shop-splash-tutorial-frame.is-playing .shop-splash-tutorial-play {
  display: none;
}

.shop-splash-tutorial-caption {
  margin: 0.5rem 0 0;
  font-size: 0.9rem;
  line-height: 1.35;
  color: var(--shop-fg-dim-dark);
}

/* Shorter viewports: still larger than before, but leave room for Start */
@media (max-height: 700px) {
  .shop-splash-tutorial {
    margin-top: 1rem;
  }
  .shop-splash-tutorial-frame,
  .shop-splash-tutorial-video {
    max-height: min(38vh, 18rem);
  }
  .shop-splash-tutorial-play {
    min-height: 4.5rem;
    font-size: 1.2rem !important;
    padding: 0.75rem 1.15rem;
  }
}

@media (max-height: 560px) {
  .shop-splash-tutorial-frame,
  .shop-splash-tutorial-video {
    max-height: min(30vh, 14rem);
  }
  .shop-splash-tutorial-play {
    min-height: 3.75rem;
    gap: 0.25rem;
    font-size: 1.1rem !important;
  }
  .shop-splash-tutorial-play-icon {
    font-size: 1.5rem;
  }
}

.shop-deactivated-meta {
  color: var(--shop-fg-dim-blue);
  margin: 0 0 1.25rem;
  font-size: 1rem;
}

.shop-reactivate-form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.65rem;
  width: min(22rem, 100%);
  margin: 0 auto;
  text-align: left;
}

.shop-reactivate-form label {
  color: var(--shop-fg-muted-dark);
  font-weight: 600;
  font-size: 1rem;
}

body.shop-kiosk-body .shop-kiosk .shop-reactivate-input,
.shop-reactivate-input {
  width: 100%;
  box-sizing: border-box;
  font-size: 1.35rem !important;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
  min-height: 3.25rem;
  padding: 0.65rem 0.75rem !important;
  border: 2px solid var(--shop-header-green-mid) !important;
  border-radius: var(--shop-radius) !important;
  background: var(--shop-bg-panel) !important;
  color: var(--shop-fg) !important;
}

.shop-reactivate-form .shop-btn-lg {
  width: 100%;
  margin: 0.35rem 0 0;
}

.shop-reactivate-msg {
  min-height: 1.4em;
  margin: 0.25rem 0 0;
  color: var(--shop-success-soft);
  text-align: center;
  font-size: 1rem;
}

.shop-reactivate-msg.is-error {
  color: var(--shop-error-soft);
}

/* Allow code field + confirm on locked splash */
.shop-kiosk-locked #shop_phase_deactivated,
.shop-kiosk-locked #shop_phase_deactivated * {
  pointer-events: auto;
  visibility: visible;
}

.shop-thank-total {
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  font-weight: 700;
  margin: 1rem 0 0.75rem;
  color: var(--shop-success-soft);
}

/* Receipt email on thank-you (never prefilled / never stored) */
.shop-receipt-block {
  width: min(26rem, 94vw);
  margin: 0 auto 1rem;
  text-align: center;
}

.shop-receipt-lead {
  color: var(--shop-fg-muted-dark);
  margin: 0 0 0.75rem;
  font-size: 1.05rem;
}

.shop-receipt-form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
}

.shop-receipt-label {
  color: var(--shop-fg-dim-blue);
  font-size: 0.9rem;
  text-align: left;
}

body.shop-kiosk-body .shop-kiosk .shop-receipt-input,
body.shop-kiosk-body .shop-kiosk input.shop-receipt-input {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  font-size: 1.15rem;
  padding: 0.75rem 0.85rem;
  border-radius: var(--shop-radius);
  border: 2px solid var(--shop-header-green-mid);
  background: var(--shop-bg-panel);
  color: var(--shop-fg);
  text-align: left;
}

body.shop-kiosk-body .shop-kiosk .shop-receipt-input:focus {
  outline: none;
  border-color: var(--shop-border-focus);
  box-shadow: 0 0 0 3px rgba(106, 154, 106, 0.35);
}

.shop-receipt-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.35rem;
}

body.shop-kiosk-body .shop-kiosk .shop-receipt-skip.custom-button,
body.shop-kiosk-body .shop-kiosk button.shop-receipt-skip {
  background: transparent;
  background-color: transparent;
  color: var(--shop-fg-muted-dark);
  border: 1px solid var(--shop-header-green-mid);
}

body.shop-kiosk-body .shop-kiosk .shop-receipt-skip.custom-button:hover,
body.shop-kiosk-body .shop-kiosk button.shop-receipt-skip:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--shop-bg-panel);
}

.shop-receipt-msg {
  min-height: 1.25rem;
  margin: 0.35rem 0 0;
  font-size: 0.95rem;
  color: var(--shop-fg-muted-dark);
}

.shop-receipt-msg.is-error {
  color: var(--shop-error-soft);
}

.shop-receipt-msg.is-ok {
  color: var(--shop-success-soft);
}

.shop-thank-auto {
  margin-top: 1rem !important;
  margin-bottom: 0 !important;
  font-size: 0.95rem !important;
  color: var(--shop-fg-dim-dark) !important;
}

.shop-btn-lg {
  min-height: 3.5rem;
  min-width: 12rem;
  font-size: 1.25rem !important;
  padding: 0.9rem 1.5rem !important;
  margin: 0.35rem;
  border-radius: var(--shop-radius) !important;
}

/* Splash primary CTA: longer “touch to start…” label */
#shop_start_btn {
  min-width: min(22rem, 92vw);
  max-width: 92vw;
  padding-left: 1.25rem !important;
  padding-right: 1.25rem !important;
  line-height: 1.25;
  white-space: normal;
}

/* --- Shopping phase: products + cart --- */
#shop_phase_shopping.is-active {
  padding: 0;
  background: var(--shop-bg-shopping);
  color: var(--shop-fg);
}

.shop-kiosk-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.65rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.45rem 0.65rem;
  background: var(--shop-header-green);
  color: var(--shop-bg-panel);
  flex-shrink: 0;
  min-height: 3.25rem;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  overflow: hidden; /* chips wrap inside bar; do not spill over content */
}

/* Bar chips: same look as language toggle (white pill on dark bar) */
.shop-kiosk-bar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  justify-content: flex-end;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
}

body.shop-kiosk-body .shop-kiosk .shop-kiosk-bar .shop-bar-chip,
body.shop-kiosk-body .shop-kiosk .shop-kiosk-bar a.shop-bar-chip,
body.shop-kiosk-body .shop-kiosk .shop-kiosk-bar .shop-lang-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  min-height: 2.35rem;
  padding: 0.35rem 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: var(--shop-radius-sm);
  background: var(--shop-bg-panel) !important;
  background-color: var(--shop-bg-panel) !important;
  color: var(--shop-header-green) !important;
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
  flex: 0 1 auto;
  max-width: 100%;
  white-space: nowrap;
}

body.shop-kiosk-body .shop-kiosk .shop-kiosk-bar .shop-bar-chip:hover,
body.shop-kiosk-body .shop-kiosk .shop-kiosk-bar .shop-bar-chip:focus,
body.shop-kiosk-body .shop-kiosk .shop-kiosk-bar a.shop-bar-chip:hover,
body.shop-kiosk-body .shop-kiosk .shop-kiosk-bar a.shop-bar-chip:focus,
body.shop-kiosk-body .shop-kiosk .shop-kiosk-bar .shop-lang-toggle:hover,
body.shop-kiosk-body .shop-kiosk .shop-kiosk-bar .shop-lang-toggle:focus {
  background: var(--shop-bg-soft) !important;
  background-color: var(--shop-bg-soft) !important;
  color: var(--shop-fg-muted) !important;
  outline: none;
}

/* --- Brand strip (logo + org + kiosk name) --- */
.shop-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  flex: 1 1 8rem;
  max-width: 100%;
}

.shop-brand-bar {
  flex: 1 1 7rem;
  min-width: 0;
}

.shop-brand-logo {
  width: 2.25rem;
  height: 2.25rem;
  object-fit: contain;
  border-radius: 6px;
  background: var(--shop-bg-panel);
  flex-shrink: 0;
}

.shop-brand-text {
  min-width: 0;
  line-height: 1.2;
  overflow: hidden;
}

.shop-brand-org {
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shop-brand-kiosk {
  font-size: 0.8rem;
  opacity: 0.85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Phone: brand on first row; action chips wrap fully on second row (no clip) */
@media (max-width: 560px) {
  .shop-kiosk-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 0.4rem;
    padding: 0.4rem 0.5rem;
  }

  .shop-brand-bar {
    flex: 0 0 auto;
    max-width: 100%;
  }

  .shop-kiosk-bar-actions,
  .shop-chrome-actions {
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
    justify-content: flex-start;
  }

  body.shop-kiosk-body .shop-kiosk .shop-kiosk-bar .shop-bar-chip,
  body.shop-kiosk-body .shop-kiosk .shop-kiosk-bar a.shop-bar-chip,
  body.shop-kiosk-body .shop-kiosk .shop-kiosk-bar .shop-lang-toggle {
    min-height: 2.2rem;
    padding: 0.3rem 0.55rem;
    font-size: 0.82rem;
  }

  /* Long FR “Retour admin boutique” — allow shrink/wrap text inside chip */
  body.shop-kiosk-body .shop-kiosk .shop-kiosk-bar a.shop-admin-return {
    white-space: normal;
    text-align: center;
    line-height: 1.15;
    max-width: 11rem;
  }
}

/* Splash brand on light header strip (readable dark text) */
.shop-brand-splash .shop-brand-logo {
  width: 2.5rem;
  height: 2.5rem;
}

.shop-brand-splash .shop-brand-org {
  font-size: 1.05rem;
  color: var(--shop-bg-dark);
}

.shop-brand-splash .shop-brand-kiosk {
  font-size: 0.88rem;
  color: var(--shop-primary-hover);
  opacity: 1;
}

/* --- Language dropdown (AJAX switch — does not reset sale) --- */
.shop-lang-menu {
  position: relative;
  flex-shrink: 0;
  z-index: 40;
}

.shop-lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.7rem;
  min-height: 2.4rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--shop-radius-sm);
  background: rgba(255, 255, 255, 0.12);
  color: var(--shop-bg-soft);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  box-sizing: border-box;
}

.shop-lang-toggle:hover,
.shop-lang-toggle:focus {
  background: rgba(255, 255, 255, 0.2);
  color: var(--shop-bg-panel);
  outline: none;
}

.shop-lang-caret {
  font-size: 0.75rem;
  opacity: 0.85;
}

.shop-lang-dropdown {
  position: absolute;
  top: calc(100% + 0.3rem);
  right: 0;
  min-width: 10rem;
  max-height: min(60vh, 20rem);
  overflow-y: auto;
  margin: 0;
  padding: 0.35rem 0;
  list-style: none;
  background: var(--shop-bg-panel);
  color: var(--shop-header-green);
  border-radius: var(--shop-radius-sm);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  z-index: 50;
}

.shop-lang-option {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 0.55rem 0.9rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: inherit;
  cursor: pointer;
}

.shop-lang-option:hover,
.shop-lang-option:focus {
  background: var(--shop-bg-soft);
  outline: none;
}

.shop-lang-dropdown li.is-active .shop-lang-option,
.shop-lang-option.is-active {
  font-weight: 700;
  background: var(--shop-bg-soft);
  color: var(--shop-primary);
}

/*
 * Splash top bar: light olive strip (same family as Croppit header).
 * Logo + title + language live here — not over the dark main gradient.
 */
.shop-splash-top {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.45rem 0.85rem;
  min-height: 3.25rem;
  z-index: var(--shop-z-bar);
  /* Same dark green as shopping bar — not farm sage (--primary-color) */
  background: var(--shop-header-green);
  color: var(--shop-bg-panel);
  box-sizing: border-box;
  width: 100%;
}

.shop-splash-top .shop-brand-splash {
  flex: 1;
  min-width: 0;
  justify-content: flex-start;
}

/* Brand text on olive header */
.shop-splash-top .shop-brand-org {
  color: var(--shop-bg-panel);
}
.shop-splash-top .shop-brand-kiosk {
  color: rgba(255, 255, 255, 0.88);
}

/* Splash chrome chips: same white pill as shopping bar (admin return, help, lang) */
body.shop-kiosk-body .shop-kiosk .shop-splash-top .shop-bar-chip,
body.shop-kiosk-body .shop-kiosk .shop-splash-top a.shop-bar-chip,
body.shop-kiosk-body .shop-kiosk .shop-splash-top .shop-lang-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 2.4rem;
  padding: 0.4rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: var(--shop-radius-sm);
  background: var(--shop-bg-panel) !important;
  background-color: var(--shop-bg-panel) !important;
  color: var(--shop-header-green) !important;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
}
body.shop-kiosk-body .shop-kiosk .shop-splash-top .shop-bar-chip:hover,
body.shop-kiosk-body .shop-kiosk .shop-splash-top .shop-bar-chip:focus,
body.shop-kiosk-body .shop-kiosk .shop-splash-top a.shop-bar-chip:hover,
body.shop-kiosk-body .shop-kiosk .shop-splash-top a.shop-bar-chip:focus,
body.shop-kiosk-body .shop-kiosk .shop-splash-top .shop-lang-toggle:hover,
body.shop-kiosk-body .shop-kiosk .shop-splash-top .shop-lang-toggle:focus {
  background: var(--shop-bg-soft) !important;
  background-color: var(--shop-bg-soft) !important;
  color: var(--shop-fg-muted) !important;
  outline: none;
}
.shop-splash-top .shop-lang-dropdown {
  z-index: var(--shop-z-dropdown);
}

.shop-checkout-body {
  flex: 1;
  overflow: auto;
  padding: 1rem 1.1rem 1.5rem;
  box-sizing: border-box;
  width: 100%;
  max-width: 36rem;
  margin: 0 auto;
  -webkit-overflow-scrolling: touch;
}

/* Narrow phones: pay methods full width, easier tap */
@media (max-width: 560px) {
  .shop-pay-methods {
    flex-direction: column;
    align-items: stretch;
  }
  .shop-pay-methods .shop-btn-lg {
    width: 100%;
    margin: 0.2rem 0;
    box-sizing: border-box;
  }
  body.shop-kiosk-body .shop-kiosk .shop-checkout-actions .shop-checkout-secondary,
  body.shop-kiosk-body .shop-kiosk .shop-checkout-actions .shop-checkout-danger {
    width: 100%;
    min-width: 0;
    margin: 0.25rem 0;
  }
  .shop-checkout-actions {
    flex-direction: column;
    align-items: stretch;
  }
}

.shop-checkout-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1.5rem;
  align-items: center;
}

/* Same footprint as .shop-btn-lg pay methods — do not stretch full row */
body.shop-kiosk-body .shop-kiosk .shop-checkout-actions .shop-checkout-secondary,
body.shop-kiosk-body .shop-kiosk .shop-checkout-actions .shop-checkout-danger {
  flex: 0 0 auto;
  min-height: 3.5rem;
  min-width: 12rem;
  margin: 0.35rem;
  padding: 0.9rem 1.5rem !important;
  border-radius: var(--shop-radius) !important;
  font-size: 1.25rem !important;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

body.shop-kiosk-body .shop-kiosk .shop-checkout-actions .shop-checkout-secondary {
  background: var(--shop-bg-panel) !important;
  background-color: var(--shop-bg-panel) !important;
  color: var(--shop-header-green) !important;
  border: 2px solid var(--shop-border) !important;
}

body.shop-kiosk-body .shop-kiosk .shop-checkout-actions .shop-checkout-secondary:hover,
body.shop-kiosk-body .shop-kiosk .shop-checkout-actions .shop-checkout-secondary:focus {
  background: var(--shop-bg-shopping) !important;
  background-color: var(--shop-bg-shopping) !important;
  color: var(--shop-header-green) !important;
  outline: none;
}

body.shop-kiosk-body .shop-kiosk .shop-checkout-actions .shop-checkout-danger {
  background: var(--shop-danger) !important;
  background-color: var(--shop-danger) !important;
  color: var(--shop-bg-panel) !important;
  border: none !important;
}

body.shop-kiosk-body .shop-kiosk .shop-checkout-actions .shop-checkout-danger:hover,
body.shop-kiosk-body .shop-kiosk .shop-checkout-actions .shop-checkout-danger:focus {
  background: var(--shop-danger-hover) !important;
  background-color: var(--shop-danger-hover) !important;
  color: var(--shop-bg-panel) !important;
  outline: none;
}

/* SumUp card payment status (single line) */
.shop-pay-panel {
  margin: 0.75rem 0 0.25rem;
}

.shop-sumup-status {
  margin: 0.5rem 0 1rem;
  padding: 0.85rem 1rem;
  border-radius: var(--shop-radius);
  background: var(--shop-bg-soft);
  border: 1px solid var(--shop-border);
  color: var(--shop-fg-muted);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
}

.shop-sumup-status.is-error {
  background: var(--shop-bg-soft);
  border-color: var(--shop-error-soft);
  color: var(--shop-danger-hover);
}

.shop-cart-hint {
  margin: 0 0 0.4rem;
  font-size: 0.8rem;
}

.shop-cart-line-tap {
  cursor: pointer;
}

.shop-cart-line-tap:active {
  background: var(--shop-bg-setup);
}

.shop-kiosk-main {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr minmax(16rem, 22rem);
  gap: 0;
  min-height: 0;
  overflow: hidden;
}

@media (max-width: 900px) {
  .shop-kiosk-main {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
  }
  .shop-cart-panel {
    max-height: 38dvh;
    border-top: 2px solid var(--shop-header-green);
  }
}

/* --- Product catalog (sections + tiles) --- */
.shop-sections {
  overflow: auto;
  padding: 0.75rem 1rem 1.5rem;
  -webkit-overflow-scrolling: touch;
}

.shop-section-title {
  margin: 0.85rem 0 0.5rem;
  font-size: 1.15rem;
  color: var(--shop-header-green);
}

.shop-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
  gap: 0.55rem;
}

/* Product tiles are <button>s — force dark text (global button is white) */
body.shop-kiosk-body .shop-kiosk button.shop-product-tile,
.shop-product-tile {
  min-height: 5.75rem;
  border: 1px solid var(--shop-border) !important;
  border-radius: var(--shop-radius);
  background: var(--shop-bg-panel) !important;
  background-color: var(--shop-bg-panel) !important;
  color: var(--shop-fg) !important;
  padding: 0.45rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font: inherit;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

body.shop-kiosk-body .shop-kiosk button.shop-product-tile:hover,
body.shop-kiosk-body .shop-kiosk button.shop-product-tile:focus,
.shop-product-tile:hover,
.shop-product-tile:focus {
  background: var(--shop-bg-soft) !important;
  background-color: var(--shop-bg-soft) !important;
  color: var(--shop-fg) !important;
  outline: none;
}

.shop-product-tile:active {
  transform: scale(0.97);
  background: var(--shop-bg-shopping) !important;
  background-color: var(--shop-bg-shopping) !important;
}

.shop-product-tile img {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 0.25rem;
}

.shop-product-name {
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.2;
  color: var(--shop-fg);
}

.shop-product-price {
  font-size: 0.8rem;
  color: var(--shop-fg);
  margin-top: 0.15rem;
}

/* Inactive products (staff admin catalog): gray text, muted tile */
body.shop-kiosk-body .shop-kiosk button.shop-product-tile.is-inactive,
.shop-product-tile.is-inactive {
  background: var(--shop-bg-shopping) !important;
  background-color: var(--shop-bg-shopping) !important;
  border-color: var(--shop-border) !important;
  color: var(--shop-border) !important;
  opacity: 1;
}
body.shop-kiosk-body .shop-kiosk button.shop-product-tile.is-inactive .shop-product-name,
.shop-product-tile.is-inactive .shop-product-name,
body.shop-kiosk-body .shop-kiosk button.shop-product-tile.is-inactive .shop-product-price,
.shop-product-tile.is-inactive .shop-product-price,
body.shop-kiosk-body .shop-kiosk button.shop-product-tile.is-inactive .shop-product-inactive-badge,
.shop-product-tile.is-inactive .shop-product-inactive-badge {
  color: var(--shop-border) !important;
}
.shop-product-inactive-badge {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  margin-top: 0.2rem;
  color: var(--shop-border);
  text-transform: lowercase;
}
body.shop-kiosk-body .shop-kiosk button.shop-product-tile.is-inactive:hover,
body.shop-kiosk-body .shop-kiosk button.shop-product-tile.is-inactive:focus,
.shop-product-tile.is-inactive:hover,
.shop-product-tile.is-inactive:focus {
  background: var(--shop-bg-shopping) !important;
  background-color: var(--shop-bg-shopping) !important;
  color: var(--shop-fg-dim-dark) !important;
}

/* --- Cart panel --- */
.shop-cart-panel {
  background: var(--shop-bg-panel);
  border-left: 1px solid var(--shop-border);
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.shop-cart-panel h2 {
  margin: 0 0 0.5rem;
  font-size: 1.15rem;
}

#shop_cart_lines {
  flex: 1;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
}

.shop-cart-line {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--shop-bg-shopping);
  font-size: 0.95rem;
}

.shop-cart-total {
  font-size: 1.35rem;
  margin: 0.65rem 0;
  flex-shrink: 0;
}

#shop_pay_btn {
  width: 100%;
  margin: 0;
  flex-shrink: 0;
}

/* --- Checkout phase --- */
#shop_phase_checkout.is-active {
  background: var(--shop-bg-shopping);
  color: var(--shop-fg);
  overflow: auto;
  padding: 0; /* header full-bleed; .shop-checkout-body pads content */
}

.shop-pay-methods {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin: 1rem 0;
  align-items: center;
}

.shop-pay-methods .shop-btn-lg {
  flex: 0 0 auto;
  margin: 0.35rem;
}

/* --- Qty / weight / confirm modals --- */
.shop-modal {
  position: fixed;
  inset: 0;
  background: rgba(26, 31, 26, 0.55);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  z-index: var(--shop-z-modal);
  padding: 1rem;
  box-sizing: border-box;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.shop-modal[hidden] {
  display: none !important;
}

.shop-modal-inner {
  background: var(--shop-bg-panel);
  color: var(--shop-fg);
  padding: 1.35rem 1.25rem 1.15rem;
  border-radius: 16px;
  border: 1px solid var(--shop-border);
  width: min(20rem, 100%);
  max-width: 100%;
  text-align: center;
  box-shadow: 0 12px 40px rgba(26, 31, 26, 0.35);
  box-sizing: border-box;
  margin: auto;
}

.shop-modal-title {
  margin: 0 0 0.35rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--shop-header-green);
}

.shop-weight-scale-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.4rem;
  margin: 0 0 0.65rem;
}

/* Author display:flex would otherwise override the HTML hidden attribute */
.shop-weight-scale-row[hidden] {
  display: none !important;
}

body.shop-kiosk-body .shop-kiosk button.shop-weight-scale-btn {
  min-height: 3rem;
  font-size: 1.05rem;
  font-weight: 600;
  border-radius: var(--shop-radius-sm);
  border: 2px solid var(--shop-ok-green-mid);
  color: var(--shop-ok-green);
  background: var(--shop-bg-soft);
}

body.shop-kiosk-body .shop-kiosk button.shop-weight-scale-btn:hover,
body.shop-kiosk-body .shop-kiosk button.shop-weight-scale-btn:focus {
  background: var(--shop-ok-green-soft);
  color: var(--shop-ok-green);
}

body.shop-kiosk-body .shop-kiosk button.shop-weight-scale-btn:disabled {
  opacity: 0.65;
}

.shop-weight-scale-status {
  min-height: 1.2em;
  font-size: 0.95rem;
  color: var(--shop-danger);
  text-align: center;
}

.shop-weight-manual-hint {
  margin: 0.35rem 0 0.5rem;
  font-size: 0.9rem;
  color: var(--shop-fg-dim-dark);
  text-align: center;
}

.shop-modal-product {
  margin: 0 0 1rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--shop-fg);
}

.shop-modal-msg {
  margin: 0.35rem 0 1.15rem;
  font-size: 1.05rem;
  line-height: 1.4;
  color: var(--shop-fg);
}

body.shop-kiosk-body .shop-kiosk .shop-modal-number,
body.shop-kiosk-body .shop-kiosk .shop-qty-input,
.shop-modal-number,
.shop-qty-input {
  box-sizing: border-box;
  width: auto;
  font-size: 1.75rem;
  font-weight: 600;
  text-align: center;
  padding: 0.55rem 0.4rem;
  margin: 0;
  border: 2px solid var(--shop-border) !important;
  border-radius: var(--shop-radius-sm);
  color: var(--shop-fg) !important;
  background: var(--shop-bg-panel) !important;
  -moz-appearance: textfield;
}

body.shop-kiosk-body .shop-kiosk .shop-modal-number:focus,
body.shop-kiosk-body .shop-kiosk .shop-qty-input:focus {
  outline: none;
  border-color: var(--shop-primary) !important;
  box-shadow: 0 0 0 3px rgba(74, 106, 74, 0.25);
}

.shop-modal-number,
.shop-num-display {
  width: 100% !important;
}

/*
 * Sell modals (customer / staff shop) — LEGACY:
 * LEFT  = title / qty / scale + action buttons under them
 * RIGHT = num keypad
 * Inventory modal uses .shop-modal-inventory (separate rules below).
 */
.shop-modal-with-keypad.shop-modal-sell {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 1rem 1.15rem;
  width: min(44rem, 96vw) !important;
  max-width: min(44rem, 96vw) !important;
  max-height: min(92dvh, 100%);
  overflow: auto;
  text-align: left;
}

.shop-modal-sell .shop-modal-main {
  flex: 1 1 14rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.shop-modal-sell .shop-modal-main .shop-modal-title,
.shop-modal-sell .shop-modal-main .shop-modal-product {
  text-align: center;
}

.shop-modal-sell .shop-modal-actions {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-top: 0.65rem;
  align-items: stretch;
}

.shop-modal-sell .shop-modal-actions .shop-modal-primary,
.shop-modal-sell .shop-modal-actions .shop-modal-secondary,
.shop-modal-sell .shop-modal-actions .shop-modal-danger {
  width: 100%;
  margin: 0;
  white-space: nowrap;
}

.shop-modal-sell .shop-num-keypad {
  flex: 0 0 13.5rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  align-content: start;
  width: 13.5rem;
  max-width: 100%;
}

/*
 * Inventory manage mode only — do not apply sell-modal rules here:
 * LEFT  = display → scale (if weight) → keypad
 * RIGHT = levels + action buttons (even split)
 */
.shop-modal-with-keypad.shop-modal-inventory {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 1rem 1.15rem;
  width: min(44rem, 96vw) !important;
  max-width: min(44rem, 96vw) !important;
  max-height: min(92dvh, 100%);
  overflow: auto;
  text-align: left;
}

.shop-modal-inventory .shop-modal-input-pane {
  flex: 1 1 0;
  min-width: 0;
  width: 50%;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.shop-modal-inventory .shop-modal-input-pane .shop-modal-title,
.shop-modal-inventory .shop-modal-input-pane .shop-modal-product {
  text-align: center;
}

.shop-modal-inventory .shop-modal-input-pane .shop-num-keypad {
  flex: 0 0 auto;
  width: 100%;
  max-width: 13.5rem;
  margin: 0.5rem auto 0;
  align-self: center;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  align-content: start;
}

.shop-modal-inventory .shop-modal-actions-pane {
  flex: 1 1 0;
  min-width: 0;
  width: 50%;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  align-items: stretch;
  min-height: 0;
  overflow-y: auto;
}

/* Same primary/secondary/danger tokens as sell modals (shared button classes) */
.shop-modal-inventory .shop-modal-actions-pane .shop-modal-primary,
.shop-modal-inventory .shop-modal-actions-pane .shop-modal-secondary,
.shop-modal-inventory .shop-modal-actions-pane .shop-modal-danger {
  width: 100%;
  margin: 0;
  text-align: center;
  white-space: nowrap;
  line-height: 1.2;
  min-height: 2.75rem;
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
  font-size: 0.95rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shop-modal-inventory .shop-modal-actions-pane .shop-modal-msg {
  margin: 0.35rem 0 0;
  flex: 0 0 auto;
}

/* clear-confirm single-column modal */
.shop-modal-main {
  flex: 1 1 14rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.shop-num-keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  align-content: start;
  width: 13.5rem;
  max-width: 100%;
}

body.shop-kiosk-body .shop-kiosk button.shop-num-key,
.shop-num-key {
  min-height: 3.55rem;
  margin: 0;
  padding: 0.4rem !important;
  border: none !important;
  border-radius: 14px;
  background: var(--shop-header-green-mid) !important;
  background-color: var(--shop-header-green-mid) !important;
  color: var(--shop-bg-panel) !important;
  font-size: 1.65rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

body.shop-kiosk-body .shop-kiosk button.shop-num-key:hover,
body.shop-kiosk-body .shop-kiosk button.shop-num-key:focus {
  background: var(--shop-primary) !important;
  background-color: var(--shop-primary) !important;
  color: var(--shop-bg-panel) !important;
  outline: none;
}

body.shop-kiosk-body .shop-kiosk button.shop-num-key:active {
  background: var(--shop-header-green) !important;
  background-color: var(--shop-header-green) !important;
}

body.shop-kiosk-body .shop-kiosk button.shop-num-key-action,
.shop-num-key-action {
  background: var(--shop-fg-dim-dark) !important;
  background-color: var(--shop-fg-dim-dark) !important;
  font-size: 1.25rem;
  font-weight: 600;
}

body.shop-kiosk-body .shop-kiosk button.shop-num-key-action:hover,
body.shop-kiosk-body .shop-kiosk button.shop-num-key-action:focus {
  background: var(--shop-fg-dim-dark) !important;
  background-color: var(--shop-fg-dim-dark) !important;
}

body.shop-kiosk-body .shop-kiosk button.shop-num-key-wide,
.shop-num-key-wide {
  grid-column: 1 / -1;
  min-height: 3rem;
  font-size: 1.15rem;
}

.shop-weight-display-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  margin: 0.15rem 0 0.35rem;
}

.shop-weight-display-row .shop-num-display {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 2rem !important;
}

.shop-weight-unit {
  flex: 0 0 auto;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--shop-header-green);
}

.shop-qty-input {
  width: 5.5rem !important;
  flex: 0 0 5.5rem;
  font-size: 2rem !important;
}

.shop-num-display {
  /* Prevent iOS focus ring / caret on readonly display */
  caret-color: transparent;
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
}

/* Portrait / narrow */
@media (max-width: 700px), (orientation: portrait) {
  .shop-modal-with-keypad.shop-modal-sell,
  .shop-modal-with-keypad.shop-modal-inventory {
    flex-direction: column;
    width: min(24rem, 96vw) !important;
    max-width: min(24rem, 96vw) !important;
    max-height: none;
  }
  /* Sell: form then keypad under it */
  .shop-modal-sell .shop-num-keypad {
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
  }
  /* Inventory: input pane then actions; keypad stays under display in input pane */
  .shop-modal-inventory .shop-modal-input-pane,
  .shop-modal-inventory .shop-modal-actions-pane {
    flex: 0 0 auto;
    width: 100%;
  }
  .shop-modal-inventory .shop-modal-input-pane .shop-num-keypad {
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
  }
  body.shop-kiosk-body .shop-kiosk button.shop-num-key,
  .shop-num-key {
    min-height: 3.75rem;
  }
}

.shop-modal-number::-webkit-outer-spin-button,
.shop-modal-number::-webkit-inner-spin-button,
.shop-qty-input::-webkit-outer-spin-button,
.shop-qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Qty stepper (+/−) and modal action buttons */
.shop-qty-stepper {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  margin: 0.25rem 0 1.15rem;
}

body.shop-kiosk-body .shop-kiosk button.shop-qty-btn,
.shop-qty-btn {
  flex: 0 0 3.25rem;
  width: 3.25rem;
  height: 3.25rem;
  padding: 0 !important;
  margin: 0;
  border: none !important;
  border-radius: var(--shop-radius);
  background: var(--shop-primary) !important;
  background-color: var(--shop-primary) !important;
  color: var(--shop-bg-panel) !important;
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body.shop-kiosk-body .shop-kiosk button.shop-qty-btn:hover,
body.shop-kiosk-body .shop-kiosk button.shop-qty-btn:focus {
  background: var(--shop-primary-hover) !important;
  background-color: var(--shop-primary-hover) !important;
  color: var(--shop-bg-panel) !important;
  outline: none;
}

body.shop-kiosk-body .shop-kiosk button.shop-qty-btn:active {
  background: var(--shop-header-green) !important;
  background-color: var(--shop-header-green) !important;
}

.shop-modal-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}

body.shop-kiosk-body .shop-kiosk button.shop-modal-primary,
body.shop-kiosk-body .shop-kiosk button.shop-modal-secondary,
body.shop-kiosk-body .shop-kiosk button.shop-modal-danger {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 3rem;
  margin: 0;
  padding: 0.7rem 1rem !important;
  border-radius: var(--shop-radius);
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

body.shop-kiosk-body .shop-kiosk button.shop-modal-primary {
  background: var(--shop-primary) !important;
  background-color: var(--shop-primary) !important;
  color: var(--shop-bg-panel) !important;
  border: none !important;
}

body.shop-kiosk-body .shop-kiosk button.shop-modal-primary:hover,
body.shop-kiosk-body .shop-kiosk button.shop-modal-primary:focus {
  background: var(--shop-primary-hover) !important;
  background-color: var(--shop-primary-hover) !important;
  color: var(--shop-bg-panel) !important;
  outline: none;
}

body.shop-kiosk-body .shop-kiosk button.shop-modal-secondary {
  background: var(--shop-bg-panel) !important;
  background-color: var(--shop-bg-panel) !important;
  color: var(--shop-header-green) !important;
  border: 1px solid var(--shop-border) !important;
}

body.shop-kiosk-body .shop-kiosk button.shop-modal-secondary:hover,
body.shop-kiosk-body .shop-kiosk button.shop-modal-secondary:focus {
  background: var(--shop-bg-shopping) !important;
  background-color: var(--shop-bg-shopping) !important;
  color: var(--shop-header-green) !important;
  outline: none;
}

body.shop-kiosk-body .shop-kiosk button.shop-modal-danger {
  background: var(--shop-danger) !important;
  background-color: var(--shop-danger) !important;
  color: var(--shop-bg-panel) !important;
  border: none !important;
}

body.shop-kiosk-body .shop-kiosk button.shop-modal-danger:hover,
body.shop-kiosk-body .shop-kiosk button.shop-modal-danger:focus {
  background: var(--shop-danger-hover) !important;
  background-color: var(--shop-danger-hover) !important;
  color: var(--shop-bg-panel) !important;
  outline: none;
}

/* --- Idle black screen (after inactivity; tap wakes to shopping) --- */
.shop-idle-black {
  position: fixed;
  inset: 0;
  z-index: var(--shop-z-idle);
  background: var(--shop-idle-black);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.shop-idle-black[hidden] {
  display: none !important;
}

/* Inventory mode: product grid only (no basket / pay) */
.shop-kiosk-inventory .shop-kiosk-main {
  grid-template-columns: 1fr;
}
.shop-kiosk-inventory .shop-cart-panel {
  display: none !important;
}
/* Inventory levels summary at top of right action column */
.shop-inv-levels {
  margin: 0 0 0.35rem;
  padding: 0.5rem 0.55rem;
  border-radius: var(--shop-radius-sm);
  background: var(--shop-bg-shopping);
  color: var(--shop-header-green);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.45;
  white-space: pre-line;
  text-align: left;
}

/* --- Device setup / activate (guest tablet; light, scrollable) --- */
.shop-activate {
  max-width: 32rem;
  margin: 1.5rem auto;
  padding: 1rem 1.25rem 3rem;
  font-size: 1.1rem;
  color: var(--shop-fg-setup);
}

.shop-activate select,
.shop-activate input[type='text'] {
  width: 100%;
  max-width: 100%;
  font-size: 1.1rem;
  padding: 0.55rem;
  margin: 0.35rem 0 0.85rem;
  box-sizing: border-box;
}

.shop-codeword-display {
  font-size: 2.75rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-align: center;
  padding: 1.25rem;
  margin: 1rem 0;
  background: var(--shop-bg-soft);
  border-radius: var(--shop-radius);
  font-family: ui-monospace, monospace;
  color: var(--shop-ok-green);
}

.shop-codeword-block {
  margin-top: 1.25rem;
  padding: 1rem;
  background: var(--shop-bg-panel);
  border-radius: var(--shop-radius);
  border: 1px solid var(--shop-border);
}

.shop-pending-status {
  font-size: 1rem;
  color: var(--shop-fg-dim-dark);
  margin: 0.75rem 0;
}

/* --- Customer shop help (seek-only overlay; not Croppit farm manual) --- */
.shop-chrome-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
}

/*
 * Farm .ref-msg (mint banner + olive left bar) must not leak into POS.
 * Empty messages must not reserve a mint strip (was the bottom “mystery bar”).
 */
body.shop-kiosk-body .shop-kiosk .ref-msg,
body.shop-kiosk-body .shop-kiosk .shop-phase-msg,
body.shop-kiosk-body .shop-kiosk .shop-modal-msg {
  box-shadow: none;
  border-left: none;
  background: transparent;
  border: none;
  padding: 0.35rem 0;
  margin: 0.35rem 0;
  color: var(--shop-fg);
  font-weight: 600;
}

body.shop-kiosk-body .shop-kiosk .ref-msg:empty,
body.shop-kiosk-body .shop-kiosk .shop-phase-msg:empty,
body.shop-kiosk-body .shop-kiosk .shop-modal-msg:empty,
body.shop-kiosk-body .shop-kiosk .ref-msg[hidden],
body.shop-kiosk-body .shop-kiosk .shop-phase-msg[hidden],
body.shop-kiosk-body .shop-kiosk .shop-modal-msg[hidden] {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  border: none !important;
}

body.shop-kiosk-body .shop-kiosk .shop-phase-msg:not(:empty):not([hidden]),
body.shop-kiosk-body .shop-kiosk #shop_checkout_msg:not(:empty):not([hidden]) {
  display: block;
  margin: 0.75rem 0 0;
  padding: 0.55rem 0.75rem;
  border-radius: var(--shop-radius-sm);
  background: var(--shop-bg-soft);
  border: 1px solid var(--shop-border);
  color: var(--shop-fg);
}

body.shop-kiosk-body .shop-kiosk .shop-splash-top .shop-help-btn,
body.shop-kiosk-body .shop-kiosk .shop-kiosk-bar .shop-help-btn {
  min-height: 2.6rem;
  min-width: 4.5rem;
  padding: 0.45rem 0.9rem;
  font-size: 1rem;
  font-weight: 700;
}

.shop-help-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--shop-z-help);
  display: flex;
  align-items: stretch;
  justify-content: center;
  background: rgba(20, 28, 20, 0.55);
  padding: 0.5rem;
  box-sizing: border-box;
}

.shop-help-overlay[hidden] {
  display: none !important;
}

.shop-help-dialog {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 40rem;
  max-height: 100%;
  margin: 0 auto;
  background: var(--shop-bg-setup);
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.28);
  overflow: hidden;
}

.shop-help-dialog-head,
.shop-help-dialog-foot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--shop-primary-soft);
  color: var(--shop-bg-panel);
}

.shop-help-dialog-foot {
  justify-content: center;
  background: var(--shop-bg-soft);
  border-top: 1px solid var(--shop-border);
}

.shop-help-dialog-title {
  flex: 1;
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--shop-bg-panel);
}

.shop-help-body {
  flex: 1 1 auto;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0.75rem 1.1rem 1.25rem;
  font-size: 1.12rem;
  line-height: 1.55;
  color: var(--shop-bg-dark);
}

.shop-help-body .help-doc-title {
  /* Title already in dialog head */
  display: none;
}

.shop-help-body .help-intro {
  font-size: 1.15rem;
  margin: 0 0 1rem;
}

.shop-help-body .help-section h3 {
  font-size: 1.2rem;
  margin: 1.1em 0 0.45em;
  color: var(--shop-fg-header);
}

.shop-help-body .help-subsection h4 {
  font-size: 1.08rem;
  margin: 0.85em 0 0.35em;
}

.shop-help-body .help-list {
  margin: 0 0 0.85em 1.35em;
  padding: 0;
}

.shop-help-body .help-list li {
  margin: 0 0 0.55em;
}

.shop-help-body .help-video {
  margin: 0.75em 0 1.1em;
  padding: 0.4em;
  border: 1px solid var(--shop-border);
  border-radius: 8px;
  background: var(--shop-bg-setup);
}

.shop-help-body .help-video-el {
  display: block;
  width: 100%;
  max-height: min(50vh, 22rem);
  border-radius: 6px;
  background: var(--shop-bg-dark);
}

.shop-help-body .help-video figcaption {
  margin-top: 0.45em;
  font-size: 0.95rem;
  color: var(--shop-header-green-mid);
  text-align: center;
}

.shop-help-body .help-note {
  font-size: 1.05rem;
  padding: 0.7em 0.9em;
  margin: 0.5em 0 1em;
  border-left: 4px solid var(--shop-primary-soft);
  background: var(--shop-bg-soft);
}

.shop-help-body .help-toc {
  font-size: 1rem;
  gap: 0.65em 1em;
  position: static;
  background: transparent;
  border-bottom: 1px solid var(--shop-border);
  margin-bottom: 0.85em;
  padding-bottom: 0.65em;
}

body.shop-kiosk-body .shop-kiosk .shop-help-close-btn {
  min-height: 3rem !important;
  min-width: 8rem;
  padding: 0.65rem 1.25rem !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  border-radius: var(--shop-radius) !important;
  cursor: pointer;
  border: none !important;
  background: var(--shop-bg-panel) !important;
  color: var(--shop-fg-muted) !important;
}

.shop-help-dialog-foot .shop-help-close-btn {
  background: var(--shop-primary-soft) !important;
  color: var(--shop-bg-panel) !important;
  width: 100%;
  max-width: 22rem;
}