/* The entry pages (login, register, link): the ordering page's tokens (a test keeps the :root
   blocks equal), the .panel, the .send button, the notes and the brand band from 700 px. */
:root{
  color-scheme:only light;
  --ink:#20241F; --ink-soft:#4B5148; --muted:#5E6359;
  --paper:#FBF8F2; --paper-2:#FCFAF6; --card:#F3EFE6; --white:#FFFFFF;
  --gt:#3E6E34; --gt-d:#2B4F24; --terra:#9A5433;
  --line:#E7E1D3; --line-soft:#EFEADF; --line-strong:#948B78;
  --track:#D3CAB6; --disabled:#D8D1C1; --ink-hover:#343A32; --handle:#DCD5C6;
  --on-ink-muted:#C9CCC3; --on-ink-accent:#9CC58B; --placeholder:#6B7065;
  --ok-bg:#E7EFE2; --alert-bg:#F8ECE4; --alert-ink:#8A2E16;
  --scrim:rgba(32,36,31,.42); --select:rgba(62,110,52,.22);
  --f:'Heebo','Arial Hebrew',sans-serif;
  --f-display:'GT Latin','Heebo','Arial Hebrew',sans-serif;
  --t-xs:12px; --t-s:13px; --t-m:14px; --t-body:16px; --t-l:20px; --t-xl:26px; --t-2xl:32px; --t-name:30px; --t-word:44px;
  --r-s:12px; --r-m:16px; --r-l:24px; --r-pill:999px;
  --h-control:44px;
  --sh-1:0 6px 24px rgba(32,36,31,.07); --sh-2:0 24px 48px -24px rgba(32,36,31,.28); --sh-3:0 18px 40px -16px rgba(32,36,31,.55);
  --sh-cutout:drop-shadow(0 14px 16px rgba(32,36,31,.3));
  --ease:cubic-bezier(.22,.61,.36,1); --out:cubic-bezier(.22,1,.36,1); --spring:cubic-bezier(.34,1.4,.5,1);
  --d-press:.15s; --d-ui:.25s; --d-move:.45s;
  --top:env(safe-area-inset-top,0px); --bot:env(safe-area-inset-bottom,0px);
  --brand:60px; --pin:68px; --max:1320px; --cartw:340px;
}
body{margin:0;background:var(--paper);color:var(--ink);font:var(--t-body)/1.5 var(--f);-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
button,input{font:inherit;color:inherit}
a,button,input{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
input{caret-color:var(--gt)}
::selection{background:var(--select);color:var(--ink)}
:focus-visible{outline:3px solid var(--gt);outline-offset:3px}
h1{text-wrap:balance}
p,li{text-wrap:pretty}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.page{min-height:100vh;min-height:100dvh;display:grid;place-items:start center;padding:max(24px,10vh) 16px 24px;box-sizing:border-box;gap:28px}
.panel{width:100%;max-width:420px;display:flex;flex-direction:column;gap:14px;padding:26px 22px;box-sizing:border-box;background:var(--white);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:0 18px 50px -30px rgba(32,36,31,.35);animation:lin .5s var(--out)}
.panel > img{height:38px;width:auto;align-self:flex-start}
h1{margin:4px 0 0;font:800 28px/1.1 var(--f);letter-spacing:-.01em}
.lead{margin:0;color:var(--ink-soft)}
.send{min-height:54px;border:0;border-radius:var(--r-pill);background:var(--ink);color:var(--paper);font-weight:800;font-size:17px;display:flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;cursor:pointer;transition:background var(--d-ui),transform var(--d-press)}
.send:active{transform:scale(.98)}
.send:disabled{background:var(--disabled);color:var(--ink-soft);cursor:not-allowed}
.ghost{min-height:46px;border-radius:var(--r-pill);border:1.5px solid var(--ink);background:var(--white);color:var(--ink);font-weight:800;display:flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;cursor:pointer}
.fine{margin:0;font-size:var(--t-s);color:var(--muted);text-align:center}
.note{margin:0;padding:12px 14px;border-radius:var(--r-m);background:var(--card);font-size:15px;font-weight:700;display:flex;gap:10px;align-items:flex-start;line-height:1.4}
.note::before{content:"";flex:0 0 16px;width:16px;height:16px;margin-top:3px;border-radius:50%;background:currentColor;-webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.4" stroke-linecap="round"><circle cx="12" cy="12" r="9"/><path d="M12 8v5M12 16v.5"/></svg>') center/contain no-repeat;mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.4" stroke-linecap="round"><circle cx="12" cy="12" r="9"/><path d="M12 8v5M12 16v.5"/></svg>') center/contain no-repeat}
.note.ok{background:var(--ok-bg);color:var(--gt-d)}
.note.ok::before{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>')}
.note.err{background:var(--alert-bg);color:var(--alert-ink)}
.note.plain::before{display:none}
.note > span{flex:1;min-width:0}
.note a{color:inherit;font-weight:800;text-underline-offset:3px}
.spin{width:22px;height:22px;border-radius:50%;border:2.5px solid var(--line);border-top-color:var(--ink);animation:spin .8s linear infinite;flex:0 0 auto}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes lin{from{opacity:.4;transform:translateY(6px)}to{opacity:1;transform:none}}
/* brand band: bottles on their flavour discs beside the panel, from 700 px */
.band{display:none}
@media (min-width:700px){
  .page{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;max-width:1000px;margin:0 auto;padding-block:max(24px,12vh)}
  .panel{max-width:480px;padding:36px 34px;gap:16px;justify-self:end}
  h1{font-size:34px}
  .band{display:flex;align-items:flex-end;justify-content:center;gap:0;height:min(420px,50vh);justify-self:start;padding-inline-start:24px}
  .band span{position:relative;display:flex;align-items:flex-end;justify-content:center;width:31%;height:100%}
  .band span::before{content:"";position:absolute;bottom:18%;left:50%;width:100%;aspect-ratio:1;translate:-50% 0;border-radius:50%;background:var(--c)}
  .band img{position:relative;height:88%;width:auto;filter:var(--sh-cutout)}
  .band span:nth-child(2){translate:0 -6%;z-index:2}
  .band span:nth-child(2) img{height:100%}
}
@media (hover:hover) and (pointer:fine){.send:hover{background:var(--ink-hover)}.ghost:hover{background:var(--card)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}.spin{animation-duration:1.4s!important;animation-iteration-count:infinite!important}}