/* RiCO! menu: the few additions the ordering application needs. Loaded only when it serves
   the page, after the inlined menu.css, which is unchanged. Every rule uses the original
   tokens and font roles. */

/* Menu button in the header, beside the order bag */
.hdr__menu{flex:none}
.sitemenu{max-width:400px}
.sitemenu__list{display:grid;gap:8px}
.sitemenu__ic{display:inline-grid;place-items:center;flex:none;width:34px;height:34px;margin-right:12px;border-radius:50%;background:var(--green-50);border:2px solid var(--green-800);box-shadow:var(--shadow-pop-sm);color:var(--green-800)}
.sitemenu__ic>svg{width:18px;height:18px;stroke-width:2.5}
.sitemenu__t{flex:1;min-width:0}
.sitemenu__a{display:flex;justify-content:space-between;align-items:center;min-height:54px;padding:0 14px 0 10px;border:2px solid var(--green-800);border-radius:var(--radius-lg);background:var(--white);box-shadow:var(--shadow-pop-sm);color:var(--green-800);font-family:var(--font-poster);font-size:19px;letter-spacing:var(--tracking-poster);text-transform:uppercase;text-decoration:none;line-height:1.1}
.sitemenu__a::after{content:"\203A";font-family:var(--font-display);font-size:24px;color:var(--green-500)}
@media (hover:hover){.sitemenu__a:hover{background:var(--green-50)}}

/* Box picker: the picks so far, each removable; a roll can be picked more than once */
.picked{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:12px;min-height:28px}
.picked__label{width:100%;font-family:var(--font-hand);font-size:17px;color:var(--green-700);line-height:1.2}
.picked__chip{cursor:pointer;background:var(--green-50)}
.picked__x{font-size:15px;line-height:1;margin-left:2px}
button.tag:disabled{opacity:.45;cursor:not-allowed;text-decoration:line-through}

/* Phone number: country code button with flag, and the searchable country list */
.cc{display:inline-flex;align-items:center;gap:6px;flex:none;height:100%;margin:0 4px 0 -6px;padding:0 10px 0 6px;border:0;border-right:2px solid var(--green-200);background:transparent;color:var(--text-muted);font:400 18px/1 var(--font-hand);cursor:pointer;border-radius:var(--radius-sm) 0 0 var(--radius-sm);-webkit-tap-highlight-color:transparent}
.cc>svg{width:14px;height:14px;stroke-width:3;color:var(--green-800)}
.cc:focus-visible{outline:3px solid var(--green-500);outline-offset:-3px}
@media (hover:hover){.cc:hover{background:var(--green-50);color:var(--green-800)}}
.cc+.field__input{width:0;min-width:0}
.cc__flag{display:block;width:22px;height:16px;flex:none;border-radius:3px;object-fit:cover;box-shadow:0 0 0 1px rgba(27,70,52,.18)}
.ccdlg{max-width:440px;display:grid;gap:12px;max-height:calc(100dvh - 48px);grid-template-rows:auto auto minmax(0,1fr)}
.ccsearch .field__box>svg{width:18px;height:18px;flex:none;color:var(--text-muted)}
.cclist{max-height:min(58dvh,520px);overflow:auto;overscroll-behavior:contain}
.ccrow{display:flex;align-items:center;gap:12px;width:100%;min-height:46px;padding:8px 14px;border:0;border-bottom:2px dashed var(--green-100);background:var(--white);color:var(--text-body);font:700 15px/1.25 var(--font-body);text-align:left;cursor:pointer}
.ccrow:last-child{border-bottom:0}
.ccrow__n{flex:1;min-width:0}
.ccrow__d{flex:none;font:400 17px/1 var(--font-hand);color:var(--green-700)}
.ccrow[aria-selected="true"]{background:var(--green-50);box-shadow:inset 4px 0 0 var(--green-500)}
.ccrow:focus-visible{outline:3px solid var(--green-500);outline-offset:-3px}
@media (hover:hover){.ccrow:hover{background:var(--green-50)}}

/* Delivery or pickup, and an order for someone else */
.fulfil{display:grid;gap:0}
.form>.choice{margin-top:2px}

/* Order form: the person receiving, a code */
.linkbtn{justify-self:start;text-align:left;border:0;background:none;padding:2px 0;color:var(--link);font:inherit;font-size:14px;font-weight:800;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;cursor:pointer}
.recip{display:grid;gap:14px;padding:12px;border:2px dashed var(--green-200);border-radius:var(--radius-md)}
.code{margin-top:12px;border-top:2px dashed var(--cocoa);padding-top:10px}
.code__sum{cursor:pointer;font-size:14px;font-weight:800;color:var(--cocoa);list-style:none}
.code__sum::-webkit-details-marker{display:none}
.code__sum::after{content:" +";font-family:var(--font-display)}
.code[open] .code__sum::after{content:" \2013"}
.code__row{display:flex;gap:8px;align-items:flex-end;margin-top:10px}
.code__row .field{flex:1;min-width:0}
.code__row .btn{flex:none;height:48px}
.code .choice{margin-top:10px;font-size:15px}
.code .zone__err{margin-top:8px}
.totals__adj{color:var(--green-700);font-weight:700}
.pay__gap{margin-top:16px}
.dialog__msg{margin:0}
.dialog .btn--secondary{text-decoration:none}

/* A field may be narrower than its input's natural width (the code box in the tablet order panel). */
.field__box{min-width:0}

/* Narrow phones (320px class): the original When switch and the +592 number field were about 19px too wide; let them fit */
@media (max-width:349px){.seg__b{white-space:normal;height:auto;min-height:38px;padding:4px 8px;line-height:1.05}.field__input{width:0}}

/* Item photos: a swipeable gallery when an item has several photos */
.photo.gal{position:relative;display:block;padding:0}
.gal__track{display:flex;width:100%;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.gal__track::-webkit-scrollbar{display:none}
.gal__track:focus-visible{outline:3px solid var(--green-500);outline-offset:-3px}
.photo .gal__img{flex:0 0 100%;width:100%;height:100%;max-width:none;object-fit:cover;scroll-snap-align:center}
.gal__nav{position:absolute;top:50%;display:grid;place-items:center;width:38px;height:38px;margin-top:-19px;padding:0;border:2px solid var(--green-800);border-radius:50%;background:rgba(255,255,255,.94);color:var(--green-800);box-shadow:var(--shadow-pop-sm);cursor:pointer}
.gal__nav svg{width:18px;height:18px}
.gal__nav--prev{left:8px}
.gal__nav--next{right:8px}
.gal__nav:focus-visible,.gal__dot:focus-visible{outline:3px solid var(--green-500);outline-offset:2px}
.gal__dots{position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:center;gap:6px}
.gal__dot{width:10px;height:10px;padding:0;border:2px solid var(--green-800);border-radius:999px;background:#fff;cursor:pointer;transition:width var(--dur-base) var(--ease-out),background var(--dur-fast)}
.gal__dot[aria-current="true"]{width:24px;background:var(--green-800)}
@media (hover:none){.gal__nav{display:none}}