/*
 * QR Pantry Scan Page CSS v1.2.1
 * v1.2.1 (11 Sep 2026): the thinking orbit and dots keep moving under
 *   prefers-reduced-motion (2.4 s and 2 s) instead of freezing; a frozen
 *   indicator reads as broken. Slow it, never still it.
 * Consolidation of the three inline <style> blocks previously embedded in the
 * /barcode-scanner/ page content, in original cascade order (later sections
 * intentionally override earlier ones). Exact-duplicate rules removed.
 * Served cached by browser + Cloudflare via qrp-scanner.php (filemtime ver).
 */

/* ===== QRP SCAN PAGE - FULLSCREEN CAMERA APP ===== */

html,
body{
  overscroll-behavior:none;
}

.qrp-scan-page{
  --qrp-text:#111827;
  --qrp-sub:rgba(17,24,39,.64);
  --qrp-border:rgba(255,255,255,.16);
  --qrp-fresh:#2f9e68;
  --qrp-fresh-dark:#1f7a52;
  --qrp-error:#8b0000;

  position:relative;
  min-height:100dvh;
  height:100dvh;
  width:100vw;
  overflow:hidden;
  background:#030712;
  color:#fff;
  font-family:inherit;
}

.qrp-scan-page *{
  box-sizing:border-box;
}

/* Keep theme/page wrappers from adding visible layout around the camera */
.qrp-scan-page .qrp-shell,
.qrp-scan-page .qrp-content{
  position:static;
  width:100%;
  height:100%;
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
}

/* ===== Camera viewport ===== */
.qrp-scan-page #scanner-wrapper.qrp-scanner-frame,
.qrp-scan-page .qrp-scanner-frame{
  position:fixed !important;
  inset:0 !important;
  z-index:1 !important;

  width:100vw !important;
  height:100dvh !important;
  min-width:100vw !important;
  min-height:100dvh !important;
  max-width:none !important;
  max-height:none !important;

  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  overflow:hidden !important;

  background:#030712 !important;
  line-height:0 !important;
  text-align:center;
}

/* Force the scanner viewport to occupy the full camera layer */
.qrp-scan-page #datasymbol-barcode-viewport,
#datasymbol-barcode-viewport{
  position:absolute !important;
  inset:0 !important;
  width:100vw !important;
  height:100dvh !important;
  min-width:100vw !important;
  min-height:100dvh !important;
  max-width:none !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  background:#030712 !important;
}

.qrp-scan-page #datasymbol-barcode-viewport > *,
.qrp-scan-page .qrp-scanner-frame > *,
.qrp-scan-page .qrp-scanner-frame video,
.qrp-scan-page .qrp-scanner-frame canvas,
.qrp-scan-page .qrp-scanner-frame img,
#datasymbol-barcode-viewport video,
#datasymbol-barcode-viewport canvas,
#datasymbol-barcode-viewport img{
  width:100% !important;
  height:100% !important;
  min-width:100% !important;
  min-height:100% !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:cover !important;
  display:block !important;
}

.qrp-scan-page .qrp-scanner-frame video,
#datasymbol-barcode-viewport video{
  position:absolute !important;
  inset:0 !important;
}

#status{
  display:none !important;
}

/* Dark camera gradients */
.qrp-scan-page::before,
.qrp-scan-page::after{
  content:"";
  position:fixed;
  left:0;
  right:0;
  z-index:5;
  pointer-events:none;
}

.qrp-scan-page::before{
  top:0;
  height:34vh;
  background:linear-gradient(180deg, rgba(0,0,0,.72), rgba(0,0,0,.38), rgba(0,0,0,0));
}

.qrp-scan-page::after{
  bottom:0;
  height:38vh;
  background:linear-gradient(0deg, rgba(0,0,0,.82), rgba(0,0,0,.42), rgba(0,0,0,0));
}

/* ===== Top camera bar ===== */
.qrp-scan-page .qrp-camera-top{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:20;
  padding:calc(12px + env(safe-area-inset-top)) 14px 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  pointer-events:none;
}

.qrp-scan-page .qrp-camera-title{
  min-width:0;
  flex:1;
  text-align:center;
  pointer-events:none;
}

.qrp-scan-page .qrp-camera-title h3{
  margin:0 !important;
  color:#fff !important;
  font-size:16px;
  line-height:1.1;
  font-weight:900;
  letter-spacing:-.02em;
  text-shadow:0 2px 12px rgba(0,0,0,.42);
}

.qrp-scan-page .qrp-camera-title small{
  display:block;
  margin-top:3px;
  color:rgba(255,255,255,.72);
  font-size:11px;
  line-height:1.15;
  font-weight:700;
  text-shadow:0 2px 12px rgba(0,0,0,.42);
}

.qrp-scan-page .qrp-navbtn{
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16) !important;
  background:rgba(0,0,0,.38) !important;
  color:#fff !important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none !important;
  font-size:23px;
  font-weight:900;
  line-height:1;
  box-shadow:0 8px 24px rgba(0,0,0,.22);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  pointer-events:auto;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  transition:transform .12s ease, background .12s ease, filter .12s ease;
}

.qrp-scan-page .qrp-navbtn:hover{
  background:rgba(0,0,0,.48) !important;
  color:#fff !important;
}

.qrp-scan-page .qrp-navbtn:active,
.qrp-scan-page .qrp-navbtn.is-pressed{
  transform:translateY(2px) scale(.94);
  filter:brightness(.95);
}

/* ===== Status / result overlays ===== */
.qrp-scan-page .qrp-scan-status{
  position:fixed;
  left:50%;
  top:calc(88px + env(safe-area-inset-top));
  transform:translateX(-50%);
  z-index:22;
  display:none;
  width:min(calc(100vw - 32px), 420px);
  padding:10px 14px;
  border-radius:999px;
  background:rgba(0,0,0,.48);
  border:1px solid rgba(255,255,255,.14);
  color:#fff;
  font-size:13px;
  line-height:1.2;
  font-weight:900;
  text-align:center;
  box-shadow:0 10px 28px rgba(0,0,0,.24);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

.qrp-scan-page .qrp-scan-status.is-success{
  background:rgba(47,158,104,.88) !important;
  border-color:rgba(255,255,255,.16);
}

.qrp-scan-page .qrp-scan-status.is-error{
  background:rgba(139,0,0,.88) !important;
  border-color:rgba(255,255,255,.16);
}

.qrp-scan-page .qrp-scan-status.is-processing{
  background:rgba(0,0,0,.48) !important;
}

.qrp-scan-page .qrp-last-scan{
  position:fixed;
  left:50%;
  top:calc(132px + env(safe-area-inset-top));
  transform:translateX(-50%);
  z-index:22;
  display:none;
  width:min(calc(100vw - 40px), 420px);
  color:rgba(255,255,255,.72);
  font-size:11px;
  line-height:1.25;
  font-weight:700;
  text-align:center;
  text-shadow:0 2px 12px rgba(0,0,0,.5);
  word-break:break-word;
}

/* ===== Scan guide ===== */
.qrp-scan-page .qrp-scan-guide{
  position:fixed;
  left:50%;
  top:50%;
  z-index:12;
  width:min(72vw, 330px);
  aspect-ratio:1.18 / 1;
  transform:translate(-50%, -50%);
  border-radius:28px;
  pointer-events:none;
}

.qrp-scan-page .qrp-scan-guide::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:28px;
  border:1px solid rgba(255,255,255,.22);
  box-shadow:
    0 0 0 999px rgba(0,0,0,.08),
    inset 0 0 34px rgba(255,255,255,.05);
}

.qrp-scan-page .qrp-corner{
  position:absolute;
  width:38px;
  height:38px;
  border-color:rgba(255,255,255,.86);
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.35));
}

.qrp-scan-page .qrp-corner.tl{
  top:0;
  left:0;
  border-top:4px solid;
  border-left:4px solid;
  border-radius:22px 0 0 0;
}

.qrp-scan-page .qrp-corner.tr{
  top:0;
  right:0;
  border-top:4px solid;
  border-right:4px solid;
  border-radius:0 22px 0 0;
}

.qrp-scan-page .qrp-corner.bl{
  bottom:0;
  left:0;
  border-bottom:4px solid;
  border-left:4px solid;
  border-radius:0 0 0 22px;
}

.qrp-scan-page .qrp-corner.br{
  bottom:0;
  right:0;
  border-bottom:4px solid;
  border-right:4px solid;
  border-radius:0 0 22px 0;
}

/* ===== Bottom controls ===== */
.qrp-scan-page .qrp-bottom-zone{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:24;
  padding:0 14px calc(14px + env(safe-area-inset-bottom));
  display:flex;
  justify-content:center;
  pointer-events:none;
}

.qrp-scan-page .qrp-control-tray{
  width:min(calc(100vw - 28px), 460px);
  border-radius:999px;
  padding:10px;
  background:rgba(0,0,0,.48);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 18px 50px rgba(0,0,0,.34);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  color:#fff;
  pointer-events:auto;
}

.qrp-scan-page .qrp-control-row{
  display:block;
}

.qrp-scan-page .qrp-control-copy{
  display:none !important;
}

.qrp-scan-page .qrp-inline-pro-link{
  color:#fff !important;
  font-weight:950;
  text-decoration:none !important;
  border-bottom:1px solid rgba(255,255,255,.45);
}

.qrp-scan-page .qrp-inline-pro-link:hover{
  border-bottom-color:rgba(255,255,255,.78);
}

.qrp-scan-page .qrp-control-btn,
.qrp-scan-page .qrp-control-tray button{
  flex:0 0 auto;
  min-height:44px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.92);
  color:#111827 !important;
  padding:10px 14px;
  font-size:12px;
  line-height:1;
  font-weight:900;
  text-decoration:none !important;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  transition:transform .12s ease, filter .12s ease, background .12s ease, box-shadow .12s ease, color .12s ease;
}

.qrp-scan-page .qrp-control-btn:hover,
.qrp-scan-page .qrp-control-tray button:hover{
  background:#fff;
  color:#111827 !important;
}

.qrp-scan-page .qrp-control-btn:active,
.qrp-scan-page .qrp-control-tray button:active{
  transform:translateY(2px) scale(.97);
  filter:brightness(.96);
}

.qrp-scan-page .qrp-manual-actions{
  width:100%;
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  align-items:center;
  gap:8px;
}

.qrp-scan-page .qrp-manual-actions .qrp-control-btn{
  min-width:0;
  width:100%;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:10px 12px;
  font-size:12px;
  line-height:1;
  font-weight:900;
  letter-spacing:.005em;
  text-align:center;
  white-space:nowrap;
  font-family:inherit;
}

.qrp-scan-page .qrp-manual-actions .qrp-control-btn i{
  font-size:12px;
  line-height:1;
  transform:translateY(0);
}

.qrp-scan-page .qrp-control-btn-secondary{
  background:rgba(255,255,255,.12);
  color:#fff !important;
}

.qrp-scan-page .qrp-control-btn-secondary:hover{
  background:rgba(255,255,255,.18);
  color:#fff !important;
}

/* Peek mode button */
.qrp-scan-page .qrp-control-btn-peek{
  position:relative;
  background:rgba(255,255,255,.92);
  color:#111827 !important;
  overflow:hidden;
}

.qrp-scan-page .qrp-control-btn-peek::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:999px;
  background:rgba(17,24,39,.35);
  box-shadow:0 0 0 3px rgba(17,24,39,.08);
}

.qrp-scan-page .qrp-control-btn-peek:hover{
  background:#fff;
  color:#111827 !important;
}

.qrp-scan-page.is-peek-mode .qrp-control-btn-peek{
  background:rgba(47,158,104,.96) !important;
  color:#fff !important;
  border-color:rgba(255,255,255,.30) !important;
  box-shadow:
    0 0 0 2px rgba(99,230,190,.24),
    0 12px 28px rgba(47,158,104,.30);
}

.qrp-scan-page.is-peek-mode .qrp-control-btn-peek::before{
  background:#63e6be;
  box-shadow:
    0 0 0 3px rgba(99,230,190,.20),
    0 0 16px rgba(99,230,190,.72);
}

.qrp-scan-page.is-peek-mode .qrp-camera-title h3::after{
  content:" \00B7 Peek";
  color:rgba(99,230,190,.95);
  font-weight:850;
}

.qrp-scan-page.is-peek-mode .qrp-scan-guide::before{
  border-color:rgba(47,158,104,.72);
  box-shadow:
    0 0 0 999px rgba(0,0,0,.08),
    inset 0 0 34px rgba(47,158,104,.12),
    0 0 34px rgba(47,158,104,.18);
}

.qrp-scan-page.is-peek-mode .qrp-corner{
  border-color:rgba(99,230,190,.96);
}

/* Normal manual add tray */
.qrp-scan-page #add-without-barcode-wrap{
  display:none;
}

.qrp-scan-page .qrp-manual-add{
  display:flex;
}

/* Bulk session tray */
.qrp-scan-page #qrp-bulk-panel{
  display:none;
}

.qrp-scan-page .qrp-bulk-panel{
  width:min(calc(100vw - 28px), 460px);
  margin:0;
  padding:12px;
  border-radius:28px;
  background:rgba(0,0,0,.50);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 18px 50px rgba(0,0,0,.34);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  color:#fff;
  pointer-events:auto;
}

.qrp-scan-page .qrp-bulk-row{
  display:grid;
  grid-template-columns:1fr auto auto;
  gap:10px;
  align-items:center;
}

.qrp-scan-page .qrp-bulk-count{
  font-size:28px;
  font-weight:950;
  line-height:.95;
  color:#fff;
}

.qrp-scan-page .qrp-bulk-label{
  margin-top:3px;
  font-size:11px;
  line-height:1.2;
  font-weight:750;
  color:rgba(255,255,255,.68);
}

.qrp-scan-page .qrp-clear-btn,
.qrp-scan-page .qrp-finish-btn{
  min-height:42px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  padding:10px 13px;
  font-size:12px;
  line-height:1;
  font-weight:900;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  transition:transform .12s ease, filter .12s ease, background .12s ease;
}

.qrp-scan-page .qrp-clear-btn{
  background:rgba(255,255,255,.12);
  color:#fff;
}

.qrp-scan-page .qrp-finish-btn{
  background:rgba(255,255,255,.92);
  color:#111827;
}

.qrp-scan-page .qrp-clear-btn:active,
.qrp-scan-page .qrp-finish-btn:active{
  transform:translateY(2px) scale(.97);
  filter:brightness(.96);
}

/*
  Hidden bridge button:
  This exists only so existing external/bulk scanner code can still find #finish-scan-btn.
  Hard-hidden to stop "Finish Scan" text flashing before the styled tray loads.
*/
.qrp-scan-page #finish-scan-wrap{
  display:block !important;
  visibility:hidden !important;
  opacity:0 !important;
  position:fixed !important;
  left:-99999px !important;
  top:auto !important;
  bottom:auto !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
  pointer-events:none !important;
  z-index:-1 !important;
}

.qrp-scan-page #finish-scan-wrap *,
.qrp-scan-page #finish-scan-btn{
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}

/* Quiet Pro hint */
.qrp-scan-page .qrp-pro-hint{
  width:min(calc(100vw - 28px), 420px);
  margin:0 auto;
  padding:10px 12px;
  border-radius:999px;
  background:rgba(0,0,0,.42);
  border:1px solid rgba(255,255,255,.13);
  color:rgba(255,255,255,.72);
  font-size:12px;
  line-height:1.25;
  font-weight:700;
  text-align:center;
  box-shadow:0 12px 30px rgba(0,0,0,.22);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  pointer-events:auto;
}

.qrp-scan-page .qrp-pro-hint a{
  color:#fff !important;
  font-weight:950;
  text-decoration:none !important;
  border-bottom:1px solid rgba(255,255,255,.45);
}

/* Hide WordPress login block visually on camera unless it is needed by auth plugins */
.qrp-scan-page .qrp-login-wrap{
  position:fixed;
  left:-9999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}

/* Camera recovery overlay */
.qrp-scan-page .qrp-camera-recover{
  position:fixed;
  inset:0;
  z-index:100004;
  display:none;
  align-items:center;
  justify-content:center;
  padding:22px;
  pointer-events:none;
  background:rgba(0,0,0,.34);
}

.qrp-scan-page .qrp-camera-recover.is-visible{
  display:flex;
}

.qrp-scan-page .qrp-camera-recover-card{
  width:min(92vw, 360px);
  border-radius:24px;
  padding:18px 16px 16px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(17,24,39,.10);
  box-shadow:0 18px 50px rgba(0,0,0,.26);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  text-align:center;
  pointer-events:auto;
}

.qrp-scan-page .qrp-camera-recover-icon{
  width:48px;
  height:48px;
  margin:0 auto 10px;
  border-radius:17px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(17,24,39,.06);
  color:#111827;
}

.qrp-scan-page .qrp-camera-recover-icon i{
  font-size:20px;
}

.qrp-scan-page .qrp-camera-recover-title{
  margin:0;
  font-size:17px;
  line-height:1.15;
  font-weight:900;
  letter-spacing:-.025em;
  color:#111827;
}

.qrp-scan-page .qrp-camera-recover-copy{
  margin:7px 0 14px;
  font-size:13px;
  line-height:1.35;
  font-weight:650;
  color:rgba(17,24,39,.64);
}

.qrp-scan-page .qrp-camera-recover-btn{
  width:100%;
  min-height:48px;
  border:0;
  border-radius:16px;
  background:#111827;
  color:#fff;
  font-size:14px;
  font-weight:900;
  cursor:pointer;
  box-shadow:
    0 12px 24px rgba(17,24,39,.18),
    inset 0 1px 0 rgba(255,255,255,.10);
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}

.qrp-scan-page .qrp-camera-recover-btn:active{
  transform:translateY(2px) scale(.98);
  filter:brightness(.96);
}

.qrp-scan-page .qrp-camera-recover-small{
  margin-top:9px;
  font-size:11px;
  line-height:1.3;
  color:rgba(17,24,39,.52);
}

/* ===== Peek result card created by scanner result script ===== */
#qrp-peek-card{
  position:fixed;
  left:14px;
  right:14px;
  bottom:calc(18px + env(safe-area-inset-bottom));
  z-index:100003;
  display:none;
  font-family:inherit;
  pointer-events:auto;
}

#qrp-peek-card .qrp-peek-inner{
  width:min(calc(100vw - 28px), 460px);
  margin:0 auto;
  border-radius:28px;
  padding:16px;
  background:rgba(255,255,255,.94);
  color:#111827;
  border:1px solid rgba(17,24,39,.10);
  box-shadow:0 22px 60px rgba(0,0,0,.34);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

#qrp-peek-card .qrp-peek-eyebrow{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  margin:0 0 8px;
  padding:5px 9px;
  border-radius:999px;
  background:rgba(47,158,104,.12);
  color:#1f7a52;
  font-size:11px;
  line-height:1;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.03em;
}

#qrp-peek-card h2{
  margin:0 0 6px !important;
  color:#111827 !important;
  font-size:24px;
  line-height:1.08;
  font-weight:950;
  letter-spacing:-.035em;
}

#qrp-peek-card .qrp-peek-subtitle{
  margin:0 0 10px;
  color:rgba(17,24,39,.66);
  font-size:14px;
  line-height:1.35;
  font-weight:750;
}

#qrp-peek-card .qrp-peek-line{
  margin:6px 0;
  color:rgba(17,24,39,.82);
  font-size:14px;
  line-height:1.32;
  font-weight:650;
}

#qrp-peek-card .qrp-peek-muted{
  margin:9px 0 0;
  color:rgba(17,24,39,.52);
  font-size:12px;
  line-height:1.3;
  font-weight:700;
}

#qrp-peek-card .qrp-peek-actions{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:8px;
  margin-top:14px;
}

#qrp-peek-card .qrp-peek-actions button{
  min-height:44px;
  border:0;
  border-radius:999px;
  padding:10px 12px;
  font-family:inherit;
  font-size:12px;
  line-height:1;
  font-weight:950;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  transition:transform .12s ease, filter .12s ease, background .12s ease;
}

#qrp-peek-card #qrp-peek-open{
  background:#111827;
  color:#fff;
}

#qrp-peek-card #qrp-peek-edit{
  background:rgba(47,158,104,.94);
  color:#fff;
}

/* "Add another" on found items: same add-green as the edit/add accent. */
#qrp-peek-card #qrp-peek-add{
  background:rgba(47,158,104,.94);
  color:#fff;
}

#qrp-peek-card #qrp-peek-next{
  background:rgba(17,24,39,.08);
  color:#111827;
}

#qrp-peek-card .qrp-peek-actions button:active{
  transform:translateY(2px) scale(.97);
  filter:brightness(.96);
}

/* Responsive refinements */
@media (max-width:380px){
  .qrp-scan-page .qrp-camera-title h3{
    font-size:15px;
  }

  .qrp-scan-page .qrp-camera-title small{
    display:none;
  }

  .qrp-scan-page .qrp-manual-actions{
    grid-template-columns:1fr 1fr;
  }

  .qrp-scan-page .qrp-manual-actions .qrp-control-btn{
    min-height:44px;
  }

  .qrp-scan-page .qrp-bulk-row{
    grid-template-columns:1fr 1fr;
  }

  .qrp-scan-page .qrp-bulk-row > div:first-child{
    grid-column:1 / -1;
    text-align:center;
  }

  #qrp-peek-card .qrp-peek-actions{
    grid-template-columns:1fr;
  }

  #qrp-peek-card .qrp-peek-actions button{
    width:100%;
  }
}

.qrp-scan-page .qrp-peek-off-link{
  display:none !important;
}

.qrp-scan-page.is-peek-mode .qrp-peek-on-link{
  display:none !important;
}

.qrp-scan-page.is-peek-mode .qrp-peek-off-link{
  display:inline-flex !important;
}

@media (max-height:640px){
  .qrp-scan-page .qrp-scan-guide{
    width:min(58vw, 280px);
  }

  .qrp-scan-page .qrp-scan-status{
    top:calc(74px + env(safe-area-inset-top));
  }

  .qrp-scan-page .qrp-last-scan{
    top:calc(115px + env(safe-area-inset-top));
  }

  .qrp-scan-page .qrp-control-tray,
  .qrp-scan-page .qrp-bulk-panel{
    padding:10px;
    border-radius:24px;
  }
}

/* ===== QRP manual control tray alignment fix ===== */
.qrp-scan-page #add-without-barcode-wrap.qrp-control-tray,
.qrp-scan-page .qrp-control-tray.qrp-manual-add{
  width:min(calc(100vw - 28px), 460px) !important;
}

.qrp-scan-page .qrp-control-tray .qrp-control-row{
  width:100% !important;
}

.qrp-scan-page .qrp-control-tray .qrp-manual-actions{
  width:100% !important;
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  gap:8px !important;
}

.qrp-scan-page .qrp-control-tray .qrp-manual-actions .qrp-control-btn{
  width:100% !important;
  min-width:0 !important;
  justify-content:center !important;
}

/* Customer role only has Peek + Bulk, so center them as two equal buttons */
.qrp-scan-page .qrp-manual-actions:has(.qrp-peek-mode-btn:first-child){
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
}

/* Customer tray has only the Peek toggle - centre it as one pill */
.qrp-scan-page .qrp-manual-actions:not(:has(#qrp-scan-bulk-btn)){
  display:flex !important;
  justify-content:center !important;
}

.qrp-scan-page .qrp-manual-actions:not(:has(#qrp-scan-bulk-btn)) .qrp-control-btn{
  width:auto !important;
  min-width:180px !important;
  flex:0 0 auto !important;
}

/* =========================================================
   QRP Peek - continuous-scan additions (v2)
   ========================================================= */

/* The inner card is the positioning context for the dismiss control. */
#qrp-peek-card .qrp-peek-inner{
  position:relative !important;
  padding-right:40px;            /* leave room for the dismiss glyph */
}

/* Minimal dismiss - no box, just a soft glyph top-right.
   Hides the card without reloading; the camera keeps scanning.
   Defensive resets so theme button styles can't turn it into a black box. */
#qrp-peek-card .qrp-peek-dismiss{
  position:absolute !important;
  top:10px;
  right:12px;
  width:30px;
  height:30px;
  margin:0;
  padding:0;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  color:rgba(17,24,39,.34) !important;
  font-size:22px;
  font-weight:400;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  transition:color .12s ease, background .12s ease, transform .12s ease;
}

#qrp-peek-card .qrp-peek-dismiss:hover{
  color:rgba(17,24,39,.7) !important;
  background:rgba(17,24,39,.05) !important;
}

#qrp-peek-card .qrp-peek-dismiss:active{
  transform:scale(.9);
}

/* When a photo is shown, the dismiss sits over the image - readable chip. */
#qrp-peek-card.has-media .qrp-peek-dismiss{
  top:12px;
  right:12px;
  color:rgba(17,24,39,.62) !important;
  background:rgba(255,255,255,.78) !important;
  box-shadow:0 2px 10px rgba(0,0,0,.18) !important;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}

#qrp-peek-card.has-media .qrp-peek-dismiss:hover{
  background:#fff !important;
}

/* Primary image banner at the top of the card. */
#qrp-peek-card .qrp-peek-media{
  margin:0 0 12px;
  border-radius:18px;
  overflow:hidden;
  background:rgba(17,24,39,.04);
  border:1px solid rgba(17,24,39,.06);
}

/* Show the WHOLE image (no crop) and give vertical photos more room. */
#qrp-peek-card .qrp-peek-media img{
  display:block;
  width:100%;
  height:auto;
  max-height:min(46vh, 360px);
  object-fit:contain;
  margin:0 auto;
}

/* Two-button action row (Open + Edit/Add) now that Close is gone. */
#qrp-peek-card .qrp-peek-actions.qrp-peek-actions-2{
  grid-template-columns:1fr 1fr;
}

/* Single full-width button (Open only) - already-saved items with no
   deletable entry id fall back to this rather than an empty grid column. */
#qrp-peek-card .qrp-peek-actions.qrp-peek-actions-1{
  grid-template-columns:1fr;
}

/* Storage boxes get a distinct accent so they read differently from pantry. */
#qrp-peek-card.is-storage .qrp-peek-eyebrow{
  background:rgba(37,99,235,.12);
  color:#1d4ed8;
}

#qrp-peek-card.is-storage #qrp-peek-edit{
  background:rgba(37,99,235,.94);
  color:#fff;
}

/* Single-column fallback on very small phones. */
@media (max-width:380px){
  #qrp-peek-card .qrp-peek-actions.qrp-peek-actions-2{
    grid-template-columns:1fr;
  }

  #qrp-peek-card .qrp-peek-media img{
    max-height:40vh;
  }
}

/* =========================================================
   QRP Peek - delete button + 3-button layout (v3)
   ========================================================= */

#qrp-peek-card .qrp-peek-actions.qrp-peek-actions-3{
  grid-template-columns:1fr 1fr 1fr;
}

/* Delete button: quiet red by default, solid red when armed for confirm. */
#qrp-peek-card #qrp-peek-delete{
  background:rgba(220,38,38,.10) !important;
  color:#b91c1c !important;
}

#qrp-peek-card #qrp-peek-delete:hover{
  background:rgba(220,38,38,.16) !important;
}

#qrp-peek-card #qrp-peek-delete.is-confirm{
  background:#dc2626 !important;
  color:#fff !important;
  box-shadow:0 0 0 2px rgba(220,38,38,.28);
}

#qrp-peek-card #qrp-peek-delete:disabled{
  opacity:.6;
  cursor:default;
}

@media (max-width:380px){
  #qrp-peek-card .qrp-peek-actions.qrp-peek-actions-3{
    grid-template-columns:1fr 1fr 1fr;
    gap:6px;
  }

  #qrp-peek-card .qrp-peek-actions.qrp-peek-actions-3 button{
    padding:10px 6px;
    font-size:11px;
  }
}

/* =========================================================
   QRP Scanner - scan help / glare tip
   ========================================================= */

.qrp-scan-page .qrp-scan-help-tip{
  position:fixed;
  left:50%;
  top:calc(170px + env(safe-area-inset-top));
  transform:translateX(-50%) translateY(-6px);
  z-index:23;
  display:none;
  width:min(calc(100vw - 40px), 420px);
  padding:10px 13px;
  border-radius:18px;
  background:rgba(0,0,0,.58);
  border:1px solid rgba(255,255,255,.16);
  color:rgba(255,255,255,.90);
  font-size:12px;
  line-height:1.32;
  font-weight:750;
  text-align:center;
  box-shadow:0 12px 32px rgba(0,0,0,.28);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  pointer-events:none;
  opacity:0;
  transition:opacity .18s ease, transform .18s ease;
}

.qrp-scan-page .qrp-scan-help-tip.is-visible{
  display:block;
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

.qrp-scan-page .qrp-scan-help-tip strong{
  color:#fff;
  font-weight:950;
}

@media (max-height:700px){
  .qrp-scan-page .qrp-scan-help-tip{
    top:calc(145px + env(safe-area-inset-top));
  }
}

/* ===== Expiry pills in peek card ===== */
#qrp-peek-card .qrp-expiry-line{
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
}

#qrp-peek-card .qrp-expiry-pill{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:5px 9px;
  border-radius:999px;
  font-size:12px;
  line-height:1;
  font-weight:950;
}

#qrp-peek-card .qrp-expiry-red .qrp-expiry-pill{
  background:rgba(220,38,38,.12);
  color:#b91c1c;
}

#qrp-peek-card .qrp-expiry-amber .qrp-expiry-pill{
  background:rgba(245,158,11,.16);
  color:#92400e;
}

#qrp-peek-card .qrp-expiry-green .qrp-expiry-pill{
  background:rgba(47,158,104,.13);
  color:#1f7a52;
}

#qrp-peek-card .qrp-expiry-neutral .qrp-expiry-pill{
  background:rgba(17,24,39,.08);
  color:rgba(17,24,39,.70);
}

/* =========================================================
   QRP Scanner - transparent navigation/loading overlay
   ========================================================= */

.qrp-scan-page .qrp-scan-thinking-overlay{
  position:fixed;
  inset:0;
  z-index:1000005;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  pointer-events:auto;

  /* Scanner-specific: keep camera/page context faintly visible. */
  background:
    radial-gradient(circle at 50% 36%, rgba(47,158,104,.22), transparent 36%),
    rgba(3,7,18,.48);

  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.qrp-scan-page .qrp-scan-thinking-overlay.is-open{
  display:flex;
}

.qrp-scan-page .qrp-scan-thinking-card{
  width:min(84vw, 310px);
  border-radius:26px;
  padding:24px 20px 22px;
  text-align:center;
  color:#fff;

  background:rgba(17,24,39,.64);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 24px 70px rgba(0,0,0,.36);

  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

.qrp-scan-page .qrp-scan-thinking-orbit{
  width:86px;
  height:86px;
  margin:0 auto 15px;
  border-radius:999px;
  position:relative;
  display:grid;
  place-items:center;
  background:radial-gradient(circle, rgba(99,230,190,.18), rgba(99,230,190,.05) 58%, transparent 62%);
}

.qrp-scan-page .qrp-scan-thinking-orbit::before{
  content:"";
  position:absolute;
  inset:8px;
  border-radius:999px;
  border:3px solid rgba(255,255,255,.14);
  border-top-color:#63e6be;
  border-right-color:rgba(255,255,255,.82);
  animation:qrpScanThinkingSpin .82s linear infinite;
}

.qrp-scan-page .qrp-scan-thinking-icon{
  width:46px;
  height:46px;
  border-radius:16px;
  display:grid;
  place-items:center;
  position:relative;
  z-index:1;

  background:rgba(255,255,255,.92);
  color:#111827;
  box-shadow:0 10px 24px rgba(0,0,0,.22);
}

.qrp-scan-page .qrp-scan-thinking-icon i{
  font-size:19px;
  line-height:1;
}

.qrp-scan-page .qrp-scan-thinking-title{
  display:block;
  font-size:18px;
  line-height:1.1;
  font-weight:950;
  letter-spacing:-.025em;
}

.qrp-scan-page .qrp-scan-thinking-sub{
  display:block;
  margin-top:7px;
  font-size:13px;
  line-height:1.35;
  font-weight:700;
  color:rgba(255,255,255,.72);
}

.qrp-scan-page .qrp-scan-thinking-dots{
  display:inline-flex;
  gap:4px;
  margin-top:15px;
}

.qrp-scan-page .qrp-scan-thinking-dots span{
  width:7px;
  height:7px;
  border-radius:999px;
  background:#63e6be;
  opacity:.35;
  animation:qrpScanThinkingPulse 1s ease-in-out infinite;
}

.qrp-scan-page .qrp-scan-thinking-dots span:nth-child(2){
  animation-delay:.14s;
}

.qrp-scan-page .qrp-scan-thinking-dots span:nth-child(3){
  animation-delay:.28s;
}

@keyframes qrpScanThinkingSpin{
  to{ transform:rotate(360deg); }
}

@keyframes qrpScanThinkingPulse{
  0%,100%{ opacity:.3; transform:translateY(0); }
  50%{ opacity:1; transform:translateY(-3px); }
}

@media (prefers-reduced-motion: reduce){
  .qrp-scan-page .qrp-scan-thinking-orbit::before{
    animation-duration:2.4s;
  }
  .qrp-scan-page .qrp-scan-thinking-dots span{
    animation-duration:2s;
  }
}

/* =========================================================
   QRP Peek image constraint
   Keeps item photos useful without swallowing scanner UI.
   ========================================================= */

#qrp-peek-card.has-media{
  bottom:calc(12px + env(safe-area-inset-bottom));
}

#qrp-peek-card .qrp-peek-inner{
  display:flex;
  flex-direction:column;
  max-height:min(78vh, 620px);
  overflow:hidden;
}

/* Everything between the pinned dismiss (top) and the pinned action
   buttons (bottom) lives in here and scrolls on its own if it runs
   taller than the available space - the dismiss and the Open/Edit/
   Delete row never move. */
#qrp-peek-card .qrp-peek-scroll{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}

#qrp-peek-card .qrp-peek-actions{
  flex:0 0 auto;
}

#qrp-peek-card .qrp-peek-media{
  max-height:min(26vh, 210px);
}

#qrp-peek-card .qrp-peek-media img{
  width:100% !important;
  height:auto !important;
  max-height:min(26vh, 210px) !important;
  object-fit:contain !important;
  object-position:center center !important;
  margin:0 auto !important;
  background:rgba(17,24,39,.035);
}

@media (max-height:700px){
  #qrp-peek-card .qrp-peek-media,
  #qrp-peek-card .qrp-peek-media img{
    max-height:170px !important;
  }

  #qrp-peek-card .qrp-peek-inner{
    max-height:76vh;
  }
}

@media (max-width:380px){
  #qrp-peek-card .qrp-peek-media,
  #qrp-peek-card .qrp-peek-media img{
    max-height:155px !important;
  }
}

/* =========================================================
   Demo mode (/try-it/) - scoped to .qrp-demo-mode only
   ========================================================= */

/* "Live demo" reassurance chip under the title. */
.qrp-demo-mode .qrp-demo-chip{
  position:fixed;
  left:50%;
  top:calc(58px + env(safe-area-inset-top));
  transform:translateX(-50%);
  z-index:21;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 11px;
  border-radius:999px;
  background:rgba(99,230,190,.14);
  border:1px solid rgba(99,230,190,.30);
  color:rgba(99,230,190,.95);
  font-size:10px;
  line-height:1;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.05em;
  pointer-events:none;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

/* Tray CTA button (primary conversion action, replaces app controls). */
.qrp-demo-mode .qrp-demo-shop-btn{
  background:rgba(47,158,104,.96) !important;
  color:#fff !important;
  border-color:rgba(255,255,255,.24) !important;
}

.qrp-demo-mode .qrp-demo-shop-btn:hover{
  background:rgba(47,158,104,1) !important;
  color:#fff !important;
}

/* Emphasis state after the visitor has scanned a couple of items. */
.qrp-demo-mode .qrp-demo-shop-btn.is-emphasised{
  box-shadow:
    0 0 0 2px rgba(99,230,190,.28),
    0 12px 28px rgba(47,158,104,.34);
  animation:qrpDemoCtaPulse 1.4s ease-in-out 1;
}

@keyframes qrpDemoCtaPulse{
  0%,100%{ transform:scale(1); }
  40%{ transform:scale(1.04); }
}

@media (prefers-reduced-motion: reduce){
  .qrp-demo-mode .qrp-demo-shop-btn.is-emphasised{
    animation:none;
  }
}

/* =========================================================
   QRP Peek — sheet presentation (v1.2.0)
   Spring slide-up, grabber, drag-to-dismiss. The drag/open
   logic lives in qrp-onbarcode.js (qrpOpenPeekSheet /
   qrpClosePeekSheet); these rules only define the motion.
   All motion is gated on .qrp-sheet-live, which ONLY the
   matching JS adds - so a stale cached qrp-onbarcode.js can
   never leave cards translated off-screen (they just show
   without animation until caches align).
   display:block/none stays inline-managed by the JS so the
   existing open-state checks keep working.
   ========================================================= */

#qrp-peek-card.qrp-sheet-live{
  transform:translateY(calc(100% + 90px));
  transition:transform .38s cubic-bezier(.32,1.18,.42,1);
  will-change:transform;
}

#qrp-peek-card.qrp-sheet-live.is-open{
  transform:translateY(0);
}

/* JS drives transform directly while the finger is down. */
#qrp-peek-card.is-dragging{
  transition:none;
}

/* iOS-style grabber, prepended into .qrp-peek-inner by the JS. */
#qrp-peek-card .qrp-peek-grabber{
  width:42px;
  height:5px;
  margin:-4px auto 10px;
  border-radius:999px;
  background:rgba(17,24,39,.18);
}

/* The whole card is the drag surface (the peek content block does not
   scroll), so stop the browser claiming vertical pans as page scroll.
   Taps on buttons/links inside are unaffected. */
#qrp-peek-card .qrp-peek-inner{
  touch-action:none;
}

@media (prefers-reduced-motion: reduce){
  #qrp-peek-card.qrp-sheet-live{
    transition:none;
  }
}

/* =========================================================
   Pull-to-refresh kill (v1.2.1)
   A downward drag on this always-at-scroll-top fixed page is
   the browser's native reload gesture - seen as a sub-second
   black flash while the scanner page rebuilds. This stylesheet
   is path-scoped to scanner pages, so html/body rules here
   cannot leak into the rest of the site. Older iOS Safari
   (pre-16) ignores overscroll-behavior; qrp-scan-page.js
   carries the touchmove fallback.
   ========================================================= */

html, body{
  overscroll-behavior-y:none;
  overscroll-behavior-x:none;
}
/* =====================================================================
   v18: Nutri-Score badge on the peek card.
   Official palette; the product's letter enlarges out of the strip so the
   green->red position reads at a glance without any explainer text.
   ===================================================================== */
#qrp-peek-card .qrp-nutri{
  display:flex;
  align-items:center;
  gap:10px;
  margin:10px 0 4px;
}
#qrp-peek-card .qrp-nutri-label{
  font-size:11px;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:rgba(17,24,39,.55);
}
#qrp-peek-card .qrp-nutri-strip{
  display:inline-flex;
  align-items:center;
  border-radius:9px;
  padding:3px;
  background:#fff;
  box-shadow:0 1px 4px rgba(17,24,39,.18);
}
#qrp-peek-card .qrp-nutri-seg{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  font-size:13px;
  font-weight:800;
  color:rgba(255,255,255,.92);
  opacity:.4;
}
#qrp-peek-card .qrp-nutri-seg:first-child{ border-radius:6px 0 0 6px; }
#qrp-peek-card .qrp-nutri-seg:last-child{  border-radius:0 6px 6px 0; }
#qrp-peek-card .qrp-nutri-a{ background:#038141; }
#qrp-peek-card .qrp-nutri-b{ background:#85BB2F; }
#qrp-peek-card .qrp-nutri-c{ background:#FECB02; color:rgba(60,46,0,.85); }
#qrp-peek-card .qrp-nutri-d{ background:#EE8100; }
#qrp-peek-card .qrp-nutri-e{ background:#E63E11; }
#qrp-peek-card .qrp-nutri-seg.is-on{
  opacity:1;
  transform:scale(1.28);
  border-radius:7px;
  box-shadow:0 0 0 2px #fff, 0 2px 6px rgba(17,24,39,.35);
  z-index:1;
}

/* =====================================================================
   Peek loading state: shown the instant a lookup starts, replaced by the
   real card (or the failure card) when the response lands.
   ===================================================================== */
#qrp-peek-card .qrp-peek-loading{
  display:flex;
  align-items:center;
  gap:14px;
  padding:6px 0 10px;
}
#qrp-peek-card .qrp-peek-spinner{
  width:28px;
  height:28px;
  flex:0 0 auto;
  border-radius:50%;
  border:3px solid rgba(17,24,39,.12);
  border-top-color:#111827;
  animation:qrp-peek-spin .8s linear infinite;
}
@keyframes qrp-peek-spin{
  to{ transform:rotate(360deg); }
}
#qrp-peek-card .qrp-peek-loading h2{
  margin:0 0 2px;
}
@media (prefers-reduced-motion: reduce){
  #qrp-peek-card .qrp-peek-spinner{ animation-duration:1.8s; }
}
/* ===== Wayfinder mode rail + bulk chip tray (Phase 3) ===== */
#qrp-scanrail-wrap{position:fixed;left:0;right:0;bottom:0;z-index:26;padding:8px 10px calc(10px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:8px;pointer-events:none}
#qrp-mode-rail{pointer-events:auto;display:flex;gap:4px;background:rgba(15,19,16,.92);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:4px;max-width:420px;margin:0 auto;width:100%;box-sizing:border-box;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
#qrp-mode-rail button{flex:1;background:transparent;border:0;border-radius:10px;color:#aab4ac;font-weight:700;font-size:13px;padding:11px 4px;cursor:pointer;line-height:1;font-family:inherit}
#qrp-mode-rail button.is-on{background:#12a06a;color:#fff}
#qrp-bulk-tray{pointer-events:auto;display:flex;align-items:center;gap:8px;background:rgba(15,19,16,.92);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:8px;max-width:420px;margin:0 auto;width:100%;box-sizing:border-box;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
#qrp-bulk-tray[hidden]{display:none}
#qrp-bulk-tally{flex:1;min-width:0;color:#e7ece8;font-size:13px;font-weight:600;padding:0 4px;display:flex;align-items:baseline;gap:6px;white-space:nowrap}
#qrp-bulk-tally strong{font-size:18px;font-weight:800;line-height:1}
#qrp-bulk-tally.is-empty{color:#aab4ac;font-size:12.5px}
#qrp-bulk-tray-clear{flex:0 0 auto;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);border-radius:10px;color:#e7ece8;font-weight:700;font-size:13px;padding:11px 12px;cursor:pointer;line-height:1;font-family:inherit}
#qrp-bulk-tray-clear[hidden]{display:none}
#qrp-bulk-tray-finish{flex:0 0 auto;background:#12a06a;border:0;border-radius:10px;color:#fff;font-weight:800;font-size:13px;padding:11px 14px;cursor:pointer;line-height:1;white-space:nowrap;font-family:inherit}
.qrp-scan-page.qrp-has-rail .qrp-bottom-zone{bottom:64px}
#add-without-barcode-wrap[data-qrp-empty="1"]{display:none !important}
/* Rail supersedes the whole control tray (ADD + peek links): the
   !important beats syncPeekLinks' periodic inline display writes.
   Demo mode has no .qrp-has-rail, so its tray is untouched. */
.qrp-scan-page.qrp-has-rail #add-without-barcode-wrap{display:none !important}
#qrp-bulk-tray-finish[hidden]{display:none}
#qrp-bulk-tally strong{display:inline-block}
#qrp-bulk-tally strong.is-pop{animation:qrpTallyPop .32s ease}
@keyframes qrpTallyPop{0%{transform:scale(.55);opacity:.4}60%{transform:scale(1.18)}100%{transform:scale(1)}}
@media (prefers-reduced-motion: reduce){#qrp-bulk-tally strong.is-pop{animation:none}}