/* JJY Orders v2.39.20 — Modern UI Refresh
   Presentation only. No order, login, registration, Firebase, Bridge, docket,
   history, queue, template, notification or sending behaviour is changed. */

:root{
  --green:#103d2a;
  --green2:#082f20;
  --green3:#1f6244;
  --cream:#f3f4ee;
  --gold:#d9ae3f;
  --gold2:#f0d886;
  --line:#dfe5df;
  --soft:#edf3ee;
  --warn:#fff5d6;
  --text:#172019;
  --dim:#6b756e;
  --card:#ffffff;
  --press:#082a1c;
  --radius-sm:12px;
  --radius:18px;
  --radius-lg:26px;
  --shadow-sm:0 2px 8px rgba(8,47,32,.06),0 1px 2px rgba(8,47,32,.05);
  --shadow:0 10px 30px rgba(8,47,32,.09),0 2px 8px rgba(8,47,32,.05);
  --shadow-strong:0 18px 48px rgba(8,47,32,.16),0 5px 14px rgba(8,47,32,.08);
}

html,body{
  background:#e9eeea;
  color:var(--text);
}
body{
  background:
    radial-gradient(circle at 12% 2%,rgba(217,174,63,.11),transparent 28rem),
    radial-gradient(circle at 90% 24%,rgba(31,98,68,.10),transparent 30rem),
    #e9eeea;
}
button,input,textarea,select{font:inherit}
button{touch-action:manipulation}
a{color:var(--green3);font-weight:700;text-underline-offset:2px}
input[type="checkbox"]{accent-color:var(--green);width:18px;height:18px;flex:0 0 auto}

.app{
  max-width:680px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.56),rgba(243,244,238,.92) 190px),
    var(--cream);
  box-shadow:0 0 0 1px rgba(8,47,32,.04);
}

/* Header */
.top{
  min-height:72px;
  padding:calc(10px + env(safe-area-inset-top)) 14px 10px;
  grid-template-columns:46px 1fr 46px;
  gap:10px;
  background:
    radial-gradient(circle at 72% -20%,rgba(240,216,134,.22),transparent 15rem),
    linear-gradient(135deg,#0a2e20 0%,#12462f 58%,#0d3726 100%);
  border:0;
  border-bottom:1px solid rgba(240,216,134,.38);
  box-shadow:0 8px 26px rgba(6,36,24,.18);
  position:relative;
  z-index:30;
}
.top:before{
  content:"";
  position:absolute;
  left:18%;right:18%;bottom:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(240,216,134,.65),transparent);
  pointer-events:none;
}
.hamb,.topHelp{
  width:44px!important;
  height:44px!important;
  border-radius:14px!important;
  border:1px solid rgba(255,255,255,.14)!important;
  background:rgba(255,255,255,.09)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  color:#fff!important;
  transition:transform .12s ease,background .15s ease,border-color .15s ease!important;
}
.hamb{font-size:22px!important;font-weight:600!important}
.topHelp{font-size:20px!important}
.hamb:active,.topHelp:active{
  transform:scale(.94)!important;
  background:rgba(255,255,255,.17)!important;
  border-color:rgba(255,255,255,.24)!important;
}
.topHelp.close{background:#9f2525!important;border-color:rgba(255,255,255,.2)!important}
.logo{
  height:46px;
  max-width:238px;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.18));
}

/* Main layout and type */
.page{
  padding:20px 16px 30px;
  scrollbar-width:thin;
  scrollbar-color:rgba(16,61,42,.25) transparent;
}
.title{
  margin:2px 2px 5px;
  font-size:clamp(25px,6vw,32px);
  line-height:1.08;
  font-weight:850;
  letter-spacing:-.035em;
  color:var(--green2);
}
.sub{
  margin:0 2px 16px;
  max-width:52ch;
  font-size:14px;
  line-height:1.5;
  color:var(--dim);
}
.stack{gap:13px}
.section{
  margin:19px 3px 7px;
  color:#536158;
  font-size:11px;
  line-height:1.2;
  font-weight:850;
  letter-spacing:.085em;
  text-transform:uppercase;
}
.small{font-size:12.5px;line-height:1.5;color:var(--dim)}
.historyText{font-size:14.5px;line-height:1.5;color:#2b342e}
.cardTitle{
  margin:0 0 6px;
  font-size:17px;
  line-height:1.25;
  font-weight:820;
  letter-spacing:-.012em;
  color:var(--green2);
}

/* Cards and fields */
.wrap,.card,.faqItem{
  border:1px solid rgba(8,47,32,.055)!important;
  background:rgba(255,255,255,.96)!important;
  border-radius:var(--radius)!important;
  box-shadow:var(--shadow-sm)!important;
}
.wrap{
  padding:0 15px;
  transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease;
}
.wrap:focus-within{
  border-color:rgba(31,98,68,.46)!important;
  box-shadow:0 0 0 4px rgba(31,98,68,.09),var(--shadow-sm)!important;
}
.card{
  padding:16px;
  transition:transform .14s ease,box-shadow .16s ease,border-color .16s ease;
}
.card[data-loadhist],.card[data-history-docket]{
  position:relative;
  overflow:hidden;
}
.card[data-loadhist]:before,.card[data-history-docket]:before{
  content:"";
  position:absolute;
  left:0;top:16px;bottom:16px;
  width:4px;
  border-radius:0 6px 6px 0;
  background:linear-gradient(180deg,var(--gold),#ba8b20);
}
.entry,.editor{
  min-height:52px;
  background:transparent!important;
  font-size:16px;
  line-height:1.35;
  color:#151b17;
}
.entry::placeholder,.editor::placeholder{color:#9aa39d;opacity:1}
.editor{min-height:176px;padding:15px 0;line-height:1.5}
.eyeBtn{
  width:42px!important;
  height:42px!important;
  border-radius:12px!important;
  background:var(--soft)!important;
  color:var(--green)!important;
}

/* Buttons */
.btn{
  min-height:50px;
  height:auto;
  padding:12px 16px;
  border-radius:15px!important;
  border:1px solid transparent;
  background:#fff;
  color:var(--green);
  font-size:15px;
  line-height:1.2;
  font-weight:780;
  letter-spacing:.005em;
  box-shadow:none;
  transition:transform .1s ease,box-shadow .16s ease,filter .16s ease,background .16s ease!important;
}
.btn:active{transform:scale(.975)!important}
.btn.soft{
  background:var(--soft)!important;
  border-color:rgba(8,47,32,.045)!important;
  color:var(--green2)!important;
}
.btn.outline{
  background:rgba(255,255,255,.82)!important;
  border-color:rgba(16,61,42,.42)!important;
  color:var(--green)!important;
}
.btn.green{
  min-height:54px;
  border:0!important;
  background:linear-gradient(135deg,#174f37,#0d3827)!important;
  color:#fff!important;
  box-shadow:0 9px 22px rgba(13,56,39,.22)!important;
}
.btn.gold{
  min-height:57px;
  border:0!important;
  background:linear-gradient(135deg,#efd06e 0%,#d9ae3f 52%,#c69425 100%)!important;
  color:#173323!important;
  font-size:17px;
  font-weight:900;
  letter-spacing:.02em;
  box-shadow:0 10px 24px rgba(185,137,29,.25)!important;
}
.btn.warn{
  background:#fff3ce!important;
  border-color:#e5bd4e!important;
  color:#765500!important;
}
.row,.tabs{gap:9px}
.tabs{
  padding:4px;
  border-radius:17px;
  background:#e6ede7;
  box-shadow:inset 0 0 0 1px rgba(8,47,32,.04);
}
.tab{
  min-height:46px;
  height:auto;
  padding:9px 10px;
  border-radius:13px;
  background:transparent;
  color:#526057;
  font-weight:760;
}
.tab.active{
  background:#fff;
  color:var(--green2);
  box-shadow:0 4px 13px rgba(8,47,32,.11);
}

/* Hero greeting */
.helloCard{
  position:relative;
  overflow:hidden;
  margin:0 0 16px;
  padding:21px 20px 19px;
  border:0!important;
  border-radius:var(--radius-lg)!important;
  background:
    radial-gradient(circle at 88% 15%,rgba(240,216,134,.28),transparent 9rem),
    linear-gradient(140deg,#0b3222 0%,#15553a 68%,#0d3b29 100%)!important;
  box-shadow:var(--shadow-strong)!important;
}
.helloCard:after{
  content:"";
  position:absolute;
  width:150px;height:150px;
  right:-74px;bottom:-93px;
  border:1px solid rgba(240,216,134,.22);
  border-radius:50%;
  box-shadow:0 0 0 22px rgba(240,216,134,.05),0 0 0 48px rgba(240,216,134,.035);
  pointer-events:none;
}
.helloTop{position:relative;z-index:1;color:#fff!important;font-size:15px;opacity:.92}
.helloCard>div[style*="font-size:28px"]{
  position:relative;
  z-index:1;
  margin:7px 0 11px!important;
  color:#fff!important;
  font-size:clamp(27px,7vw,36px)!important;
  line-height:1.03!important;
  letter-spacing:-.045em;
}
.helloCard .assistMsg{
  position:relative;
  z-index:1;
  margin-top:0;
  border-color:rgba(255,255,255,.14)!important;
  background:rgba(255,255,255,.11)!important;
  color:#fff!important;
  backdrop-filter:blur(8px);
}
.assistMsg{border-radius:14px;padding:11px 12px;line-height:1.45}

/* Menu becomes a clean app drawer */
.menuShade{
  position:fixed!important;
  inset:0!important;
  background:rgba(3,21,14,.58)!important;
  backdrop-filter:blur(5px)!important;
  z-index:90!important;
}
.menu{
  position:fixed!important;
  top:0!important;bottom:0!important;left:0!important;right:auto!important;
  width:min(88vw,360px)!important;
  padding:calc(30px + env(safe-area-inset-top)) 14px calc(24px + env(safe-area-inset-bottom))!important;
  overflow-y:auto;
  border:0!important;
  border-radius:0 28px 28px 0!important;
  background:linear-gradient(180deg,#fbfcf9,#f0f3ee)!important;
  box-shadow:24px 0 70px rgba(0,0,0,.28)!important;
  z-index:91!important;
}
.menu:before{
  content:"JJY Orders";
  display:block;
  margin:4px 7px 17px;
  color:var(--green2);
  font-size:22px;
  font-weight:900;
  letter-spacing:-.035em;
}
.menu .btn{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
  width:100%;
  min-height:50px;
  margin:0 0 5px!important;
  padding:10px 12px!important;
  border:0!important;
  border-radius:14px!important;
  background:transparent!important;
  color:#263229!important;
  text-align:left;
  box-shadow:none!important;
}
.menu .btn:active{background:#e4ece5!important}
.menu .btn.gold{background:#fff2c8!important;color:#5f4707!important}
.menu .btn.outline{margin-top:12px!important;border:1px solid #dfb7b7!important;background:#fff6f6!important;color:#8b2020!important}
.menu [data-page]:before,.menu #menuLogout:before{
  display:grid;
  place-items:center;
  width:34px;height:34px;
  flex:0 0 34px;
  border-radius:11px;
  background:#e5eee7;
  color:var(--green);
  font-size:17px;
}
.menu [data-page="login"]:before{content:"↪"}
.menu [data-page="registration"]:before{content:"＋"}
.menu [data-page="queue"]:before{content:"↻"}
.menu [data-page="order"]:before{content:"✎"}
.menu [data-page="advanced"]:before{content:"▦"}
.menu [data-page="advanced-specials"]:before{content:"★";background:#f7df91;color:#6f5100}
.menu [data-page="history"]:before{content:"◷"}
.menu [data-page="templates"]:before{content:"▤"}
.menu [data-page="settings"]:before{content:"⚙"}
.menu [data-page="help"]:before{content:"?"}
.menu [data-page="about"]:before{content:"i"}
.menu #menuLogout:before{content:"↩";background:#f4dddd;color:#8b2020}

/* Connection status */
.status{
  margin:0 14px calc(12px + env(safe-area-inset-bottom));
  padding:10px 13px;
  border:1px solid rgba(8,47,32,.07)!important;
  border-radius:16px!important;
  background:rgba(255,255,255,.88)!important;
  box-shadow:var(--shadow-sm)!important;
  backdrop-filter:blur(12px);
  color:#7a847d;
}
.status #conn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:#657168;
  font-size:10px;
  font-weight:850;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.status #conn:before{content:"";width:7px;height:7px;border-radius:50%;background:#92a098;box-shadow:0 0 0 4px rgba(146,160,152,.12)}
.status .main{margin:5px 0 2px;font-size:13px;font-weight:750;color:#334038}
.status #last{font-size:10.5px;line-height:1.35}

/* Date picker, toast and modals */
.datePicker{
  border:0!important;
  border-radius:20px!important;
  padding:14px!important;
  box-shadow:var(--shadow-strong)!important;
}
.datePickHead button{border-radius:11px!important}
.toast{
  bottom:calc(22px + env(safe-area-inset-bottom));
  border:0!important;
  border-radius:16px!important;
  padding:13px 17px!important;
  background:rgba(8,47,32,.96)!important;
  box-shadow:0 18px 44px rgba(0,0,0,.28)!important;
  backdrop-filter:blur(12px);
}
.appModalShade,.advOrderShade{
  background:rgba(2,18,11,.57)!important;
  backdrop-filter:blur(6px);
}
.appModal,.advOrderModal{
  border:0!important;
  border-radius:26px!important;
  padding:20px!important;
  background:#fbfcf9!important;
  box-shadow:0 28px 80px rgba(0,0,0,.32)!important;
}
.appModalTitle,.advOrderTitle{
  font-size:22px!important;
  line-height:1.12;
  letter-spacing:-.03em;
  color:var(--green2)!important;
}
.appModalText{line-height:1.5;color:#4d5851}
.appModal input{border:1px solid var(--line);border-radius:14px;padding:0 13px;background:#fff!important}

/* FAQ */
.faqItem summary{padding:15px 16px!important}
.faqQ{font-size:15px!important;margin:0!important}
.faqItem .faqA{padding:0 16px 16px!important;line-height:1.52;color:#4b554f}
.faqItem summary:after{right:16px!important;top:14px!important}
.pill{
  padding:5px 10px;
  border-radius:999px;
  background:#e6f0e8;
  color:#236143;
  font-size:11px;
  font-weight:850;
  letter-spacing:.025em;
}

/* Advanced Order: modern grocery-style cards */
.advTabs{
  gap:4px!important;
  margin:2px 0 8px!important;
  padding:4px;
  border-radius:17px;
  background:#e5ece6;
}
.advTab{
  min-height:44px;
  height:auto!important;
  padding:8px 9px;
  border-radius:13px!important;
  background:transparent!important;
  color:#657168!important;
  font-size:13px;
  font-weight:780;
}
.advTab.active{
  background:#fff!important;
  color:var(--green2)!important;
  box-shadow:0 5px 15px rgba(8,47,32,.11);
}
.advToolbar{
  gap:8px!important;
  padding:7px;
  border:1px solid rgba(8,47,32,.055);
  border-radius:18px;
  background:#fff;
  box-shadow:var(--shadow-sm);
}
.advSearch,.advSelect,.advNoteBox{
  min-height:50px;
  height:auto;
  border:1px solid transparent!important;
  border-radius:14px!important;
  background:#f0f4f0!important;
  padding:0 14px!important;
  color:#172019!important;
  outline:none;
  transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;
}
.advSearch:focus,.advSelect:focus,.advNoteBox:focus{
  border-color:rgba(31,98,68,.38)!important;
  background:#fff!important;
  box-shadow:0 0 0 4px rgba(31,98,68,.08);
}
.advSelect{margin-top:9px}
.advNoteBox{min-height:90px;padding:13px 14px!important;line-height:1.45}
.advProduct{
  position:relative;
  min-height:78px;
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:12px!important;
  padding:15px 14px 15px 17px!important;
  border:1px solid rgba(8,47,32,.055)!important;
  border-radius:19px!important;
  background:#fff!important;
  box-shadow:var(--shadow-sm)!important;
  cursor:pointer;
  transition:transform .12s ease,box-shadow .16s ease,border-color .16s ease!important;
}
.advProduct:before{
  content:"";
  position:absolute;
  left:0;top:17px;bottom:17px;
  width:4px;
  border-radius:0 5px 5px 0;
  background:#bad0c0;
}
.advProduct:hover{border-color:rgba(31,98,68,.18)!important;box-shadow:var(--shadow)!important}
.advProduct:active{transform:scale(.986);background:#fbfcf9!important}
.advProductName{
  font-size:16px!important;
  line-height:1.25;
  font-weight:800!important;
  color:var(--green2)!important;
}
.advProductMeta{margin-top:5px!important;font-size:12px!important;line-height:1.4!important;color:#758078!important}
.advPrice{
  align-self:center;
  padding:8px 10px;
  border-radius:999px;
  background:#e9f2eb;
  color:#1f6244!important;
  font-size:13px;
  font-weight:850!important;
  text-align:center!important;
  white-space:nowrap;
}
.advNotice,.advEmpty{
  border:1px solid rgba(8,47,32,.06)!important;
  border-radius:18px!important;
  padding:14px!important;
  background:rgba(255,255,255,.78)!important;
  color:#647068;
  line-height:1.45;
}
.advNotice.warn{background:#fff5d7!important;border-color:#edd488!important;color:#705400!important}
.advNotice.bad{background:#fff0f0!important;border-color:#e8b4b4!important;color:#8a2020!important}
.advEmpty{border-style:dashed!important}

/* Specials become a real feature shelf */
.advSpecialsShelf{
  position:relative;
  overflow:hidden;
  margin:0 0 16px!important;
  padding:15px!important;
  border:0!important;
  border-radius:24px!important;
  background:
    radial-gradient(circle at 100% 0,rgba(217,174,63,.24),transparent 11rem),
    linear-gradient(145deg,#fff7d8,#fffdf5 58%,#f7f4e8)!important;
  box-shadow:0 12px 34px rgba(115,83,10,.12),0 2px 7px rgba(8,47,32,.05)!important;
}
.advSpecialsHead{
  margin:0 2px 11px!important;
  color:#745300!important;
  font-size:12px!important;
  font-weight:900!important;
  letter-spacing:.11em!important;
}
.advSpecialCard{
  margin-bottom:9px!important;
  border-color:rgba(164,119,17,.16)!important;
  box-shadow:0 5px 15px rgba(115,83,10,.07)!important;
}
.advSpecialRow:before{background:linear-gradient(180deg,#e3bd4b,#ad7d13)!important}
.advSpecialTag{
  margin-left:5px!important;
  padding:3px 7px!important;
  border-radius:999px!important;
  background:linear-gradient(135deg,#d9ae3f,#b98617)!important;
  color:#fff!important;
  font-size:9px!important;
  letter-spacing:.055em;
}
.advSpecialPrice{background:#fff0b8!important;color:#755300!important}
.advSpecialUntil{display:inline-block;margin:4px 0 0!important;color:#7a5b08!important}

/* Basket */
.advBasketLine{
  padding:15px!important;
  border:1px solid rgba(8,47,32,.055)!important;
  border-radius:19px!important;
  background:#fff!important;
  box-shadow:var(--shadow-sm)!important;
}
.advBasketMain{padding-bottom:3px}
.advBasketQty{font-size:15px!important;font-weight:800!important;color:var(--green2)!important}
.advBasketBtns{
  width:100%;
  gap:7px!important;
  padding-top:10px;
  border-top:1px solid #edf0ed;
}
.advBasketCount{
  padding:3px;
  border-radius:12px;
  background:#edf3ee;
}
.advCountBtn,.advCountInput,.advMiniBtn,.advQuickBtn,.advUnitBtn,.advStepBtn,.advPackBtn{
  border-color:rgba(8,47,32,.09)!important;
  box-shadow:none!important;
}
.advCountBtn{
  width:38px!important;height:38px!important;
  border:0!important;
  border-radius:10px!important;
  background:#fff!important;
  color:var(--green)!important;
  font-size:21px!important;
}
.advCountInput{
  width:52px!important;height:38px!important;
  border:0!important;
  background:transparent!important;
  color:var(--green2)!important;
}
.advMiniBtn{
  min-height:40px!important;
  height:auto!important;
  padding:8px 12px!important;
  border-radius:11px!important;
  background:#edf3ee!important;
  color:var(--green)!important;
}
.advBasketFormula{
  border:0!important;
  border-radius:14px!important;
  background:#e9f3eb!important;
  color:#1b5a3d!important;
  padding:11px 12px!important;
}
.advBasketFormula.bad{background:#fff0f0!important;color:#8a2020!important}

/* Add-product sheet */
.advOrderLabel{margin:16px 0 7px!important;font-size:12px;color:#536158!important;letter-spacing:.045em;text-transform:uppercase}
.advPlainInput{
  min-height:52px;
  border:1px solid var(--line)!important;
  border-radius:14px!important;
  background:#fff!important;
  font-size:18px!important;
}
.advQuickQty{gap:8px!important}
.advQuickLabel{color:#707a73!important;font-weight:800!important}
.advQuickBtn{
  min-height:40px!important;
  height:auto!important;
  border-radius:12px!important;
  background:#edf3ee!important;
  color:var(--green)!important;
}
.advUnitGrid{gap:8px!important}
.advUnitBtn{
  min-height:48px!important;
  height:auto!important;
  border-radius:14px!important;
  background:#edf3ee!important;
  color:var(--green)!important;
}
.advUnitBtn.active,.advPackBtn.active{
  border-color:var(--green)!important;
  background:linear-gradient(135deg,#174f37,#0d3827)!important;
  color:#fff!important;
  box-shadow:0 7px 17px rgba(13,56,39,.17)!important;
}
.advModalBtns{gap:9px!important;margin-top:18px!important}
.advLinkBtn{text-underline-offset:3px}

/* Docket cards and action bars. Printed docket itself remains unchanged. */
.advDocket{
  border:1px solid rgba(8,47,32,.055)!important;
  border-radius:19px!important;
  background:#fff!important;
  box-shadow:var(--shadow-sm)!important;
  padding:15px!important;
}
.docketCardActions,.docketPreviewActions{gap:7px!important}
.docketPreviewActions{
  position:sticky;
  top:0;
  z-index:5;
  margin:-6px -3px 12px!important;
  padding:8px;
  border-radius:17px;
  background:rgba(243,244,238,.9);
  backdrop-filter:blur(12px);
}
.docketPreviewActions .btn{min-height:43px!important;border-radius:12px!important}

/* Keep the real invoice paper white and business-like. */
.jjyDocketPaper{border-radius:4px!important;box-shadow:0 12px 34px rgba(0,0,0,.12)!important}
.jjyDocketPaper,.jjyDocketPaper *{font-family:Arial,Helvetica,sans-serif!important}

@media(min-width:800px){
  .app{
    margin:24px auto;
    min-height:calc(100dvh - 48px);
    border-radius:30px;
    overflow:hidden;
    box-shadow:0 28px 80px rgba(8,47,32,.18),0 0 0 1px rgba(8,47,32,.05);
  }
  .page{padding:24px 24px 34px}
  .status{margin-left:22px;margin-right:22px}
  .card:hover{box-shadow:var(--shadow)}
}

@media(max-width:430px){
  .top{min-height:68px;padding-left:11px;padding-right:11px;grid-template-columns:44px 1fr 44px}
  .logo{height:42px;max-width:210px}
  .page{padding:17px 12px 26px}
  .title{font-size:25px}
  .helloCard{padding:19px 17px 17px;border-radius:23px!important}
  .helloCard>div[style*="font-size:28px"]{font-size:29px!important}
  .card{padding:15px}
  .advTabs{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .advTabsTwo{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .advTab{font-size:11.5px;padding:7px 4px}
  .advToolbar{grid-template-columns:minmax(0,1fr) auto!important}
  .advProduct{grid-template-columns:minmax(0,1fr) auto!important}
  .advPrice{text-align:center!important}
  .advOrderShade{align-items:flex-end!important;padding:10px!important}
  .advOrderModal{max-height:92dvh;overflow:auto;border-radius:26px 26px 18px 18px!important;padding:18px!important}
  .appModalShade{align-items:flex-end!important;padding:10px!important}
  .appModal{max-height:90dvh;overflow:auto;border-radius:26px 26px 18px 18px!important}
  .status{margin-left:11px;margin-right:11px}
}

@media(max-width:350px){
  .row{grid-template-columns:1fr}
  .logo{max-width:175px}
  .advProduct{grid-template-columns:1fr!important}
  .advPrice{justify-self:start}
}

@media print{
  .jjyDocketPaper{border-radius:0!important;box-shadow:none!important}
}

@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}


/* v2.39.21 force the JJY light appearance regardless of device dark mode */
:root{color-scheme:light only}
html,body,.app{color-scheme:light!important}
input,textarea,select,button{color-scheme:light!important}
.topSpacer{width:44px;height:44px;display:block}
@media (prefers-color-scheme:dark){
  html,body{background:#e9eeea!important;color:#172019!important}
  .app{background:linear-gradient(180deg,rgba(255,255,255,.56),rgba(243,244,238,.92) 190px),#f3f4ee!important}
  .card,.wrap,.faqItem,.appModal,.advOrderModal,input,textarea,select{background-color:#fff!important;color:#172019!important}
}
.top:after{display:none!important}
.topSpacer{grid-column:3;justify-self:end}

/* ============ v2.39.24 CALM ADD POPUP ============
   The add popup is anchored near the TOP of the screen on every device, so the
   keyboard sliding up from the bottom never moves it. Placed at the end of this
   file on purpose: it must win over the earlier bottom-sheet rules. */
.advOrderShade{align-items:flex-start!important;padding-top:max(52px,8dvh)!important}
.advOrderModal.simple{border-radius:22px!important}
/* Unit selector: a native <select> styled as the small pill beside the number.
   The phone opens its own picker over the popup - zero layout movement. */
.advUnitSelect{flex:0 0 auto;appearance:none;-webkit-appearance:none;border:1px solid #cfe0d4;border-radius:999px;background:#edf6ef url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2323543b' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 10px center;color:#23543b!important;font-size:13px;font-weight:750;padding:7px 26px 7px 12px;line-height:1;max-width:96px;height:auto;box-shadow:none}
.advUnitChip.static{flex:0 0 auto;border:1px solid #cfe0d4;border-radius:999px;background:#edf6ef;color:#23543b;font-size:13px;font-weight:750;padding:7px 12px;line-height:1}

/* ============ v2.39.25 IN-APP UNIT MENU ============
   The unit list is a small dropdown drawn by the app itself, attached under the
   pill - the phone's native "Done" picker is not used any more. */
.advOrderModal.simple{overflow:visible!important}
.advUnitAnchor{position:relative;flex:0 0 auto}
.advUnitAnchor .advUnitChip{border:1px solid #cfe0d4;border-radius:999px;background:#edf6ef;color:#23543b!important;font-size:13px;font-weight:750;padding:7px 12px;line-height:1;box-shadow:none}
.advUnitMenu{position:absolute;top:calc(100% + 7px);right:0;min-width:104px;background:#fff;border:1px solid #dbe4dd;border-radius:14px;box-shadow:0 14px 34px rgba(0,0,0,.2);padding:5px;z-index:40;display:flex;flex-direction:column;gap:2px}
.advUnitOption{border:0;background:transparent;color:#23543b;font-size:14.5px;font-weight:720;padding:11px 15px;border-radius:10px;text-align:left;box-shadow:none}
.advUnitOption.active{background:#e8f2eb}
.advUnitOption:active{background:#dfeae2}

/* ============ v4.00 LAUNCH POLISH ============ */
/* Quick Order hero: small, light, quiet - the ordering box is the star, not the header. */
.helloCard.mini{background:#FFFDF4!important;border:1px solid rgba(217,180,74,.5)!important;box-shadow:0 2px 8px rgba(14,51,34,.06)!important;padding:12px 14px 11px;margin:0 0 12px;border-radius:18px!important}
.helloCard.mini:after{content:none}
.helloCard.mini .helloTop{color:#0E3322!important;font-size:15.5px;font-weight:800;opacity:1;margin-bottom:7px}
.helloCard.mini .assistMsg{background:#F2F7F3!important;border:1px solid #DCE7DE!important;color:#2c4636!important;backdrop-filter:none;font-size:13px;padding:9px 11px}
.helloCard.mini .assistMsg.warn{background:#FFF7DB!important;border-color:#E9D9A2!important;color:#6b5716!important}
/* Basket note: looks like a real input people can type in, not a faint grey box. */
.advOrderLabel.noteLabel{font-size:14px;font-weight:800;color:#123F2A;text-transform:none;letter-spacing:.1px}
.advNoteBox.visible{background:#fff!important;border:1.5px solid #c5d6c9!important;border-radius:14px!important;box-shadow:0 1px 4px rgba(14,51,34,.05);min-height:74px}
.advNoteBox.visible:focus{border-color:#2f6b48!important;box-shadow:0 0 0 3px rgba(47,107,72,.12)!important}
.advNoteBox.visible::placeholder{color:#7f8f84;font-style:normal}

/* v4.00: in-app category dropdown (replaces the native select / system picker) */
.advCatAnchor{position:relative;margin:8px 0 10px}
.advCatBtn{width:100%;height:44px;border:1px solid #cfe0d4;border-radius:12px;background:#fff;color:#123F2A;font-size:14.5px;font-weight:700;text-align:left;padding:0 14px;box-shadow:0 1px 3px rgba(14,51,34,.05);display:flex;align-items:center;justify-content:space-between;gap:8px}
.advCatBtnText{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.advCatCaret{color:#5a6c5f;font-size:13px;flex:0 0 auto}
.advCatMenu{position:absolute;top:calc(100% + 6px);left:0;right:0;background:#fff;border:1px solid #dbe4dd;border-radius:14px;box-shadow:0 16px 38px rgba(0,0,0,.22);padding:6px;z-index:35;max-height:45vh;overflow:auto;display:flex;flex-direction:column;gap:2px}
.advCatOption{border:0;background:transparent;color:#2c4636;font-size:14.5px;font-weight:650;padding:11px 13px;border-radius:10px;text-align:left;box-shadow:none;flex:0 0 auto}
.advCatOption.active{background:#e8f2eb;color:#123F2A;font-weight:800}
.advCatOption:active{background:#dfeae2}


/* ===== v4.00.3 Text Order polish =====
   Text Order remains independent; this only tightens the form and improves typing. */
.textOrderForm{display:flex;flex-direction:column;gap:9px}
.textOrderForm .section{margin:12px 3px 5px}
.textOrderForm .section:first-child{margin-top:2px}
.textOrderForm .wrap{margin:0}
.textOrderEditor{min-height:210px;resize:none!important;transition:height .16s ease}
.textOrderTemplateRow{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:3px}
.textOrderTemplateRow .btn{min-width:0;padding-left:9px;padding-right:9px;font-size:14px}
.textOrderSend{margin-top:1px}
.textOrderQueue{margin-top:0}
@media(max-width:360px){
  .textOrderTemplateRow{gap:7px}
  .textOrderTemplateRow .btn{font-size:13px;padding-left:6px;padding-right:6px}
}