separator that immediately precedes the action bar (we use border-top now). */ #msg hr:has(+ .row:has(#popA)), #msg hr:has(+ .row:has(#fancyA)){display:none;} #fancyM,#popM,#fancyP,#popP{display:inline-flex;align-items:center;color:#000;user-select:none;cursor:pointer;padding:0;float:none;} #fancyM .material-icons,#popM .material-icons,#fancyP .material-icons,#popP .material-icons{font-size:24px;} #fancyq,#popq{display:inline-block;vertical-align:middle;margin:0 8px;font-size:1em;min-width:18px;text-align:center;cursor:default;float:none;} #fancyA,#popA{display:block;width:100%;padding:11px 18px;text-align:center;background:#c22c27;color:#fff;border-radius:999px;font-size:0.95em;font-weight:600;cursor:pointer;box-sizing:border-box;} #fancyA:hover,#popA:hover{background:#a82420;} .row .col.s6{padding:0 10px 10px 0;} .row .edit-quantity{justify-content:center;display:flex;margin-bottom:20px;} #pop{height:100%} #pop .indicator-item{background-color:rgba(10,10,10,0.5);} #pop .indicator-item.active{background-color:rgba(0,0,0,1);} #pop ul{bottom:100px;z-index:2;} #pop ul li{height:20px;width:20px;float:none;display:inline-block;} #pop ul.collapsible li{width:100%;height:100%;border-radius:10px} #pop ul.collapsible li .option{text-align:left !important;font-size:.9em !important;} #pop ul.collapsible li b{font-size: 14px;} #pop ul.collapsible .group{margin:0} @media (max-width: 768px) { #pop ul.collapsible li .option{font-size:.75em !important;} #pop ul.collapsible li b{font-size: 12px;} } #pop .popimg{margin:20px 0;/*width:calc(100% - 20px);*/height:350px;background-color:#f7f7f8;/*border:1px solid #000;*/border-radius:8px;background-size:contain;background-repeat:no-repeat;background-position:center center;} #pop img.popimg{display:block;width:100%;height:auto;background-color:#f7f7f8;object-fit:contain;background-size:contain;background-repeat:no-repeat;background-position:center center; } /* sticky item title bar: spans the modal-content padding, X rides inside it */ #pop h5{position:sticky;top:-1px;z-index:40;background:#fff;margin:-24px -24px 10px;padding:16px 60px 12px 24px;border-bottom:1px solid #eee;} #pop h5 .fancyclose{top:50%;transform:translateY(-50%);right:16px;} #pop .group p{padding:0;margin:0;margin-top:2px;} #pop .group{margin:10px 0;} #pop .group b{font-weight:bold;} #pop .group .row{margin:10px 0px;} #pop .group .option{margin:2px;width:100%;min-height:60px;float:left;line-height:1.25;position:relative;font-size:0.9em;padding:8px 8px 40px;border:1.5px solid #aaa;border-radius:10px;} #pop .group .option.moption:after{position:absolute;right:9px;top:3px;font-size:24px;color:red;text-shadow:1px 1px #fff;line-height:1;text-align:center;content:attr(v);} #pop .option u{position:absolute;right:20px;bottom:5px;background:#c62828;width:69px;height:30px;z-index:-1;color:#fff;display:none;text-decoration:none;line-height:30px;text-align:center;font-size:1.2em;border-radius:10px;} #pop .option a.del{position:absolute;right:70px;bottom:5px;color:#fff;background:#b71c1c;border-radius:99px;width:30px;height:30px;box-shadow:1px 1px solid #999;display:none;} #pop .option a.del:before{position:absolute;left:0px;bottom:0px;font-family:'Material Icons';content:'\e15b';color:#fff;text-align:center;width:100%;line-height:30px;} #pop .option.checked{ background:#eee; border: 2px solid #222; } #pop .option a.on{position:absolute;right:10px;bottom:5px;color:#fff;background:#222;border-radius:99px;width:30px;height:30px;box-shadow:1px 1px solid #999;} #pop .option a.on:before{position:absolute;left:0px;bottom:0px;font-family:'Material Icons';content:'\e876';text-align:center;width:100%;line-height:30px;} #pop .option a.off{position:absolute;right:10px;bottom:5px;color:#fff;background:#b71c1c;border-radius:99px;width:30px;height:30px;box-shadow:1px 1px solid #999;} #pop .option a.off:before{position:absolute;left:0px;bottom:0px;font-family:'Material Icons';content:'\e145';color:#fff;text-align:center;width:100%;line-height:30px;} #pop .option a.qty{position:absolute;right:10px;bottom:5px;color:#fff;background:#b71c1c;border-radius:99px;width:30px;height:30px;box-shadow:1px 1px solid #999;} #pop .option a.qty:before{position:absolute;left:0px;bottom:0px;font-family:'Material Icons';content:'\e145';color:#fff;text-align:center;width:100%;line-height:30px;} #pop .option a.off.disabled{background:#ffcdd2;pointer-events:none;} #pop .option a.qty.disabled{background:#ffcdd2;pointer-events:none;} #pop .option a.disabled{opacity:0.5;pointer-events:none;} #pop .option b{display:block;position:static;margin-top:6px;font-size:0.8em;line-height:1;font-weight:600;} /* Modifier grid: tighten the collapsible-body edges (Materialize default is 2rem) and flex the rows so tiles in the same row share a height */ #pop .collapsible-body,#nestedpop .collapsible-body{padding:10px 8px;} #pop .collapsible-body .row,#nestedpop .collapsible-body .row{display:flex;flex-wrap:wrap;margin-bottom:0;} #pop .collapsible-body .row .col,#nestedpop .collapsible-body .row .col{display:flex;padding:0 5px;} /* NOTE: the legacy desktop image-option CARD treatment was removed. classifyModGroups (menu.js) always classes modifier groups as gsingle/gmulti/gpills (never gimg), so image options render as ROWS (radio/checkbox + 48px thumb) on every width now — see the fhero modifier-mode rules further down. Those card rules used to force a 172px tile height + a "restaurant" placeholder onto imageless siblings of an image option, which broke radio/checkbox groups that happened to contain one image. */ #pop a b{position:absolute;bottom:5px;right:5px;font-size:0.8em;line-height:1;font-weight:normal;} #pop a img{max-height:100px;width:100%;} #sp{display:block;height:80px;margin-bottom:30px;margin-top:30px;border:1px solid black; border-radius:10px;padding:10px} #sp input{margin:0 10px;width:calc(100% - 20px);border:none;} .thumblogo{height:200px;background-size:contain;background-color:#666;background-repeat:no-repeat;background-position:center center;margin:10px 0px;box-sizing:border-box;border-radius:14px;box-shadow:0 2px 10px rgba(0,0,0,.12);transition:transform .25s,box-shadow .25s;cursor:zoom-in;} .thumbqr{height:200px;background-size:contain;background-color:#fefefe;background-repeat:no-repeat;background-position:center center;margin:10px 0px;box-sizing:border-box;border:1px solid #eee;border-radius:14px;box-shadow:0 2px 10px rgba(0,0,0,.08);transition:transform .25s,box-shadow .25s;cursor:zoom-in;} .thumb{height:200px;background-size:cover;background-position:center center;margin:10px 0px;box-sizing:border-box;border-radius:14px;box-shadow:0 2px 10px rgba(0,0,0,.12);transition:transform .25s,box-shadow .25s;cursor:zoom-in;} .thumb:hover:not(.active),.thumblogo:hover:not(.active),.thumbqr:hover:not(.active){transform:translateY(-4px) scale(1.02);box-shadow:0 10px 24px rgba(0,0,0,.18);} .thumb.active,.thumblogo.active,.thumbqr.active{border-radius:0;box-shadow:none;cursor:zoom-out;} #delivery.off{background:#f7f7f8;border:1px solid #e2e2e6;} #delivery.off b{color:#9a9aa2;} #delivery.off i{background:#fff;border-color:#d5d5da;color:#9a9aa2;} /* selected schedule renders as a small second line inside the pill (flex column child) */ #pickup:after{content:attr(v);position:static;font-size:.72em;font-weight:600;color:#c22c27;line-height:1.1;text-align:center;} #delivery:after{content:attr(v);position:static;font-size:.72em;font-weight:600;color:#c22c27;line-height:1.1;text-align:center;} #pickup.off:after,#delivery.off:after{color:#9a9aa2;} /* no schedule selected: drop the pseudo entirely so the flex gap doesn't nudge the label off-center */ #pickup:not([v]):after,#pickup[v='']:after,#delivery:not([v]):after,#delivery[v='']:after{display:none;} #pickup.off{background:#f7f7f8;border:1px solid #e2e2e6;} #pickup.off b{color:#9a9aa2;} #pickup.off i{background:#fff;border-color:#d5d5da;color:#9a9aa2;} /* delivery address chooser — mirrors the #time picker (overlay, card, header, close chip, scroll lock) */ #addr{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.55);display:none;z-index:1001;border-radius:0;} #addr h6{padding:18px 20px 6px;font-weight:bold;font-size:1rem;color:#222;margin:0;background:transparent;height:auto;line-height:normal;border-radius:0;} #alist{min-height:0;max-height:32vh;overflow-y:auto;padding:2px 20px 6px;} #addr .addr{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);margin:0;width:480px;max-width:calc(100% - 20px);max-height:85vh;background:#fff;border:none;border-radius:16px;box-shadow:0 12px 40px rgba(0,0,0,.25);overflow:hidden auto;display:flex;flex-direction:column;} #geo{display:flex;align-items:center;margin:6px 20px 20px;height:40px;padding-left:34px;border:1px solid #d5d9e0;position:relative;border-radius:10px;} #geo i{position:absolute;left:8px;top:50%;transform:translateY(-50%);color:#98a2b3;font-size:20px;} #geo input{border:none !important;box-shadow:none !important;height:38px;width:100%;flex:1;margin:0;font-size:.95rem;} #addr .addr .row{margin:0;text-align:left;} #addr h6{text-align:left;} /* google places autocomplete dropdown must float above the modal (z-index 1001) */ .pac-container{z-index:1003 !important;} #faraddr{margin:10px 20px;display:none;color:#b71c1c;background:#fdf1f1;border-radius:10px;padding:2px 14px;font-size:.92em;} #addaddr{margin:10px 20px 22px;display:none;} #addaddr:after{content:'';display:block;clear:both;} /* contain the floated Cancel/Save so the bottom margin applies */ #apt{margin:10px auto;height:46px;} #apt input{border:1px solid #d5d9e0;height:46px;padding:0 14px;box-sizing:border-box;border-radius:10px;margin:0;} #addr i.close{position:absolute;top:12px;right:12px;z-index:1;cursor:pointer;color:#333;background:#f2f2f4;border-radius:99px;padding:5px;font-size:24px;} #addr textarea{border:1px solid #d5d9e0;height:88px;padding:10px 14px;box-sizing:border-box;border-radius:10px;} #cnote{margin:10px auto;height:99px;} #addcancel{width:48%;text-align:center;background:#f2f2f4;font-weight:600;float:left;height:44px;line-height:44px;color:#333;border-radius:10px;cursor:pointer;} #addsave{width:48%;text-align:center;font-weight:600;background:#c22c27;color:#fff;float:right;height:44px;line-height:44px;border-radius:10px;cursor:pointer;} #alist li{min-height:44px;line-height:1.35;overflow:hidden;position:relative;padding:11px 12px 11px 44px;margin:6px 0;border:1px solid #e3e3e3;border-radius:10px;cursor:pointer;display:flex;align-items:center;transition:border-color .15s,background-color .15s;} #alist li:hover{border-color:#c22c27;} #alist li.on{border-color:#c22c27;background:#fdf3f2;} #alist li.on:before{content:'adjust';position:absolute;left:12px;top:50%;transform:translateY(-50%);font-family:material icons;font-size:1.5em;color:#c22c27;} #alist li.off:before{content:'radio_button_unchecked';position:absolute;left:12px;top:50%;transform:translateY(-50%);font-family:material icons;font-size:1.5em;color:#98a2b3;} #alist li i{margin:0 4px 0 auto;color:#98a2b3;} #time{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.55);display:none;z-index:1001;} body.time-lock,html:has(> body.time-lock){overflow:hidden;} /* no background scrolling while the date/time picker is open */ #time h6{padding:18px 20px 6px;font-weight:bold;font-size:1rem;color:#222;margin:0;} #dlist{padding:6px 20px 14px;overflow-x:auto;overflow-y:hidden;white-space:nowrap;-webkit-overflow-scrolling:touch;} #dlist li{display:inline-block;width:56px;height:64px;border:1px solid #ddd;position:relative;margin:0 6px 0 0;border-radius:12px;cursor:pointer;transition:border-color .15s,background-color .15s;} #dlist li:hover{border-color:#999;} #dlist li.disabled{opacity:.38;pointer-events:none;background:#f5f5f6;border-color:#ececed;} /* fhero: closed / no-slots day greyed out */ #dlist li.on{border-color:#c22c27;background:#c22c27;} #dlist li.on:before{color:rgba(255,255,255,.85);} #dlist li.on:after{color:#fff;} #dlist li:before{position:absolute;top:9px;left:0;width:100%;content:attr(t);text-align:center;font-size:11px;color:#888;} #dlist li:after{position:absolute;bottom:8px;left:0;width:100%;content:attr(n);text-align:center;font-size:1.25em;font-weight:bold;} #time .time { margin: 0 auto; width: 480px; /* fixed height: the modal must not resize as day/time selections change */ height: min(620px, 85vh); min-height: 0; max-height: 85vh; background: #fff; border: none; box-shadow: 0 12px 40px rgba(0,0,0,.25); position: relative; flex: 0 1 auto; border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; /* Hide scrollbar - Firefox */ scrollbar-width: none; /* Hide scrollbar - IE/Edge */ -ms-overflow-style: none; } /* Hide scrollbar - Chrome/Safari/Opera */ #time .time::-webkit-scrollbar { display: none; } #time i.close{position:absolute;top:12px;right:12px;z-index:1;cursor:pointer;color:#333;background:#f2f2f4;border-radius:99px;padding:5px;font-size:24px;} #timedate{flex-shrink:0;} #time .time > div:nth-of-type(2){flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden;} #timeh2,#timetoggle,#closeMsg{flex-shrink:0;} #timetoggle{display:flex;gap:8px;margin:10px 20px 0;} #laters{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;} #asap,#later{flex:1;margin:0;width:auto;height:40px;line-height:40px;float:none;text-align:center;border-radius:99px;cursor:pointer;font-size:.95em;transition:background-color .2s,color .2s;} #asap.disabled,#later.disabled{opacity:0.45;pointer-events:none;} #asap.on{background:#c22c27;color:#fff;} #later.on{background:#c22c27;color:#fff;} #asap.off{background:#f2f2f4;color:#333;border:none;} #later.off{background:#f2f2f4;color:#333;border:none;} #closeMsg{margin:12px 20px 0;display:none;background:#fdf1f1;color:#b71c1c;border-radius:10px;padding:2px 14px;font-size:.92em;} #closeMsg p{margin:8px 0;} #maxMsg{margin:10px 50px;display:none;font-weight:bold;} #laters{margin:8px 16px 0;display:none;padding-bottom:16px;} #laters li{border:1px solid #e3e3e3;text-align:center;cursor:pointer;height:40px;line-height:38px;float:left;width:calc(25% - 8px);margin:4px;border-radius:10px;font-size:.92em;transition:border-color .15s,color .15s,background-color .15s;} #laters li:hover{border-color:#c22c27;color:#c22c27;} #laters li.on{background:#c22c27;color:#fff;border-color:#c22c27;} #laters li.disabled{display:none} #pay{display:none;padding:0 18px;} #pay .pay{padding:18px;border-radius:10px;margin-bottom:32px;} #pay input{border:1px solid #999;background:#fff;border-radius:3px;padding:0 20px;box-sizing:border-box;border-radius:10px;} #pay input.disabled{border:1px solid #999;background:#eee;} /* --- modern subtle refresh for checkout input fields (future theme, all widths) --- */ #pay input[type=text], #pay input[type=tel], #pay input[type=email], #pay input[type=password]{ border:1px solid #d5d9e0; border-radius:10px; height:40px; padding:0 12px; font-size:16px; color:#1a1a1a; background:#fff; box-shadow:none; transition:border-color .15s ease, box-shadow .15s ease; } #pay input.disabled{ background:#f2f4f7; border-color:#e4e7ec; color:#98a2b3; } #pay input::placeholder{ color:#98a2b3; } #pay input:focus:not([readonly]){ border:1px solid #000 !important; box-shadow:0 0 0 3px rgba(0,0,0,.12) !important; } #pay .input-container input[type=text]{ padding-right:60px; } /* keep room for the Apply button */ #pay label{ font-size:.8rem; font-weight:500; } /* required-field asterisk + legend (future theme) */ #pay .req-star{ color:#c22c27; font-weight:700; } #pay .req-legend{ color:#98a2b3; font-size:.8rem; text-align:right; margin:8px 2px 0; } /* required-field errors show on the input border, not a red label (future theme) */ #pay .sc-contact label.error{ color:#475467 !important; font-weight:500 !important; } #pay .sc-contact label.error + input{ border-color:#c22c27 !important; box-shadow:0 0 0 3px rgba(194,44,39,.12) !important; } /* mobile: each contact field gets its own full-width row */ @media (max-width:600px){ #pay .sc-contact .col.s6{ width:100%; } } /* checkout screen title — mobile/tablet only (future theme); desktop layout already reads as checkout */ #pay .checkout-title{ font-size:1.35rem; font-weight:700; color:#1a1a1a; margin:2px 0 16px; text-align:center; } @media (min-width:993px){ #pay .checkout-title{ display:none; } } /* store name + address card at the top of the mobile checkout */ #pay .sc-store{ padding:14px 22px; } #pay .sc-store .store-name{ display:block; font-weight:700; font-size:1.3rem; color:#1a1a1a; } #pay .sc-store .store-addr{ color:#667085; font-size:.9rem; margin-top:2px; } @media (min-width:993px){ #pay .sc-store{ display:none; } } /* The checkout title renders in-content (above the store card); the #mobnav copy stays hidden. (The JS .checkout class toggle on #mobnav remains but has no visual effect.) */ #mobnav #mobcheckout{ display:none !important; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); color:#fff; font-size:1.15rem; font-weight:700; letter-spacing:.01em; white-space:nowrap; pointer-events:none; } #pay .row{padding:0 20px;min-height:60px;} #pay .error{color:#f00 !important;font-weight:bold;} [type="radio"]+span{font-weight:bold;color:#000} [type="radio"]:checked+span{font-weight:bold;color:#c22c27} [type="radio"].with-gap+span:after{ background-color: #c22c27 !important; } [type="radio"].with-gap:checked+span:after { background-color: #c22c27 !important; } [type="radio"].with-gap:checked+span:before, [type="radio"].with-gap:checked+span:after { border: 2px solid #c22c27 !important; } [type="checkbox"].filled-in:checked+span:not(.lever):after{border:2px solid #c22c27;background-color:#c22c27;} /* ===== modern tip selector (fhero): equal pills showing % + $ amount with a solid-red selected state; Tip Cash + custom amount share the second row ===== */ #pay .tip{position:relative;box-sizing:border-box;background:#fff;color:#17171a;cursor:pointer;} #pay #tiprow{display:flex;flex-wrap:wrap;gap:10px;padding:0;margin:0;} #pay #tiprow .tip{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;flex:1 1 0;float:none;width:auto;min-width:0;min-height:58px;margin:0;padding:9px 6px;border:1.5px solid #e6e5e8;border-radius:14px;line-height:1.15;text-align:center;font-weight:700;font-size:1rem;transition:border-color .15s,background-color .15s,color .15s,box-shadow .15s;} #pay #tiprow .tip:hover{border-color:#e3b6b3;background:#fdf6f5;} #pay #tiprow .tip .tipamt{font-weight:600;font-size:.8rem;color:#9a9aa0;line-height:1.2;} #pay #tiprow .tip.on{background:#c22c27;border-color:#c22c27;color:#fff;box-shadow:0 6px 16px -7px rgba(194,44,39,.55);} #pay #tiprow .tip.on .tipamt{color:rgba(255,255,255,.88);} #pay #tiprow .tip.on:after{content:none !important;} /* drop the old check_circle overlay */ /* row break so the % pills stay on their own row */ #pay #tiprow:has(#ctip)::after{content:'';order:1;flex-basis:100%;height:0;} /* Tip Cash is dropped in future theme (defensive hide if it ever renders) */ #pay #tiprow .tpcash{display:none;} /* "Custom tip" toggle: full-width pill with a chevron; expands to reveal #ctip */ #pay #tiprow .customtip-toggle{order:2;flex:1 1 100%;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:52px;margin:0;padding:0 18px;border:1.5px solid #e6e5e8;border-radius:14px;background:#fff;color:#17171a;font-weight:600;font-size:.95rem;cursor:pointer;transition:border-color .15s,background-color .15s,color .15s;} #pay #tiprow .customtip-toggle:hover{border-color:#e3b6b3;background:#fdf6f5;} #pay #tiprow .customtip-toggle .ct-chev{width:20px;height:20px;flex:0 0 auto;color:#9a9aa0;transition:transform .2s ease,color .15s;} /* the custom amount input is collapsed until the toggle opens it */ #pay #tiprow #ctip{order:3;flex:1 1 100%;display:none;width:auto;min-width:0;margin:8px 0 0;min-height:52px;height:auto;padding:0 16px;border:1.5px solid #e6e5e8;border-radius:14px;background:#f7f7f8;box-sizing:border-box;text-align:left;font-size:1rem;color:#17171a;} #pay #tiprow.customtip-open #ctip{display:block;} #pay #tiprow.customtip-open .customtip-toggle{border-color:#c22c27;color:#c22c27;} #pay #tiprow.customtip-open .customtip-toggle .ct-chev{transform:rotate(90deg);color:#c22c27;} #pay #tiprow #ctip:focus{border-color:#c22c27;background:#fff;box-shadow:0 0 0 3px rgba(194,44,39,.13);outline:none;} #pay #tiprow #ctip::placeholder{color:#9a9aa0;} /* the running "Total $X" inside the tip card is redundant with the cart/totals card (and already hidden <=992) — drop it for a cleaner tip section */ #pay #displaytotal{display:none !important;} label.on{color:#c22c27;} #pay a.p{margin:0 10px;font-weight:bold;border:1px solid #444;background:#fff;color:#000;border-radius:10px;line-height:33px;} #pay a.p.on:not(#pgoogle){background:#c22c27;color:#fff;border:1px solid #c22c27} .apple-pay-button { display: inline-block; -webkit-appearance: -apple-pay-button; -apple-pay-button-type: plain; -apple-pay-button-style: white-outline; height:36px; position:relative; top:14px; margin-right:10px } /* match Google Pay button corner radius to the other payment types */ #pay #gpay-button-online-api-id, #pay .gpay-button, #pay .gpay-card-info-container{ border-radius:10px !important; } /* center the injected GPay button (its ~40px height overflows the 36px materialize btn-flat) */ #pay #pgoogle{ display:flex; align-items:center; justify-content:center; float:none; height:auto; min-height:44px; line-height:normal; padding:0; } /* wallet buttons: uniform size, each on its own row (Apple Pay under Google Pay) */ #pay #paymenttypes .gpay-button{ width:240px !important; min-width:0 !important; } #pay #paymenttypes #papple.apple-pay-button{ display:block; float:none; clear:both; width:240px; max-width:90%; height:40px; margin:0 auto 15px; top:0; border-radius:10px; } /* breathing room under the Payment header (extra class beats the generic section-card h5 rule later in the file) */ #pay .section-card.sc-pay > h5:first-child{ margin-bottom:16px; } /* payment-type buttons: sentence case ("By card", "Gift card", "At store") instead of materialize ALL CAPS */ #pay .sc-pay a.p.btn-flat:not(#pgoogle){ text-transform:lowercase; } #pay .sc-pay a.p.btn-flat:not(#pgoogle)::first-letter{ text-transform:uppercase; } #ccer{display:none;background:#f5f5f5;padding:0 36px;} #done{display:none;position:relative;z-index:1;width:100%;max-height:none;overflow:visible;margin:12px 0 48px;background:#fff;border:1px solid #eceef2;border-radius:18px;padding:34px 28px;cursor:pointer;text-align:center;box-shadow:0 14px 38px rgba(17,24,39,.12);box-sizing:border-box;} #done .close{position:absolute;right:18px;top:18px;color:#9a9aa0;} #done .done-icon{width:62px;height:62px;margin:0 auto 16px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#eaf7ef;color:#0a8043;} #done .done-icon i{font-size:34px;line-height:1;} #done h5{margin:0 0 8px;font-size:1.45rem;font-weight:900;color:#17171a;letter-spacing:0;} #done .done-sub{margin:0 auto 20px;max-width:360px;color:#73737a;font-size:.95rem;line-height:1.45;} #done .done-confirm{margin:0 auto 18px;padding:16px;border-radius:14px;background:#f7f7f8;border:1px solid #eceef2;} #done .done-confirm span{display:block;margin-bottom:5px;color:#73737a;font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;} #confirm{position:relative;margin:0;padding:0;line-height:1;} #confirm:after{content:attr(v);font-weight:900;font-size:2.6rem;color:#c22c27;letter-spacing:0;} #done .done-meta{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:0 0 12px;} #done .done-meta span:empty{display:none;} #done .done-meta span{display:inline-flex;padding:7px 10px;border-radius:999px;background:#fdeceb;color:#c22c27;font-size:.82rem;font-weight:800;} #done .done-next b{display:block;color:#17171a;font-size:1rem;line-height:1.45;} #done .done-next b:empty{display:none;} #done .done-hint{margin:22px 0 0;color:#9a9aa0;font-size:.78rem;font-weight:700;} body.doneopen .page-footer,body.doneopen #foot,body.doneopen #botdock,body.doneopen #botnav{display:none !important;} body.doneopen #main{margin-top:12px !important;padding-top:0 !important;} @media only screen and (max-width:992px){#done{width:100%;margin:8px 0 36px;}} @media only screen and (max-width:600px){#done{width:calc(100% - 20px) !important;margin:8px 10px 28px !important;padding:28px 20px;}} #itemreceipt{display:none !important;} #cftotal{display:inline-flex;font-weight:800;} #result{display:none} #pickupaddress{text-align:center;font-weight:bold;color:#fff;background-color:#c22c27;} #maddress .maddress{list-style:none;width:90%;position:relative;cursor:pointer;margin:10px auto;padding:10px 50px 10px 10px;border:1px solid #999;border-radius:3px;} #maddress .maddress:after{position:absolute;right:20px;top:0;content:'check_box_outline_blank';font-family:material icons;font-size:30px;} #maddress .maddress.checked:after{content:'check_box';color:#c22c27;} @media only screen and ( max-width:992px ){ #topBG{height:320px;} #topbg{height:320px;} #main{margin-top:60px !important;padding-top:30px;align-content:start;} #profile{margin:30px !important;padding:0px;} #mobmenu{color:#fff;width:55px;height:100%;padding-right:10px;position:absolute;right:2px;top:0;display:flex;align-items:center;justify-content:flex-end;} } @media only screen and ( max-width:600px ){ #custom{margin-top:0;padding-left:12px;padding-right:12px;} /* checkout stays pinned above the viewport bottom while the cart scrolls (it's #custom's last child); the ::before is a full-bleed solid bar behind it so cart content doesn't show around the button */ #checkout{position:sticky;bottom:12px;z-index:8;} /* fixed strip layered between the cart content (z auto) and the pinned button (z 8); clicks on it hit body, so covered cart rows aren't tappable */ body.chkbar:after{content:'';position:fixed;left:0;bottom:0;width:100%;height:72px;background:#fff;z-index:7;box-shadow:0 -2px 10px rgba(0,0,0,.08);} #item .item{margin: 20px 10px;border-radius:20px 20px 0 0;} pre{font-family:monospace,monospace;text-align:end;margin:5px 70px 0 0;} .container{width:100%;padding-bottom:12px;} #storeinformation{padding-left:20px;padding-top:20px;} #storeinformation .material-icons{padding-left:20px;} #address{padding-left:26px;margin-bottom:16px;} #phone{padding-left:26px;margin-bottom:16px;} #hoursbar{padding-left:26px;margin-top:0;} #links{padding-left:6px;margin-top:4px;} #aboutus{min-height:200px;background:rgba(250,250,250,0.5);padding:20px;margin:20px 10px;width:calc(100% - 20px);font-size:1em;} #aboutus hr{width:calc(100% - 20px);margin:10px 10px;} #category ul>li.item:nth-child(odd){background-color:#fff;} #category ul>li.item:nth-child(even){background-color:#eee;} .modal{width:95%;margin-bottom:20px;} #topBG{height:356px;} #topbg{height:330px;} #mobnav{padding: 26px 10px;} #main{margin-top:0px !important;padding-top:0px;} #profile{margin:0px !important;padding:0 !important;} #alist{max-height:28vh;} #addaddr{margin:10px 20px} #time .time{margin:0 auto;width:calc(100% - 20px);height:calc(100% - 60px);max-height:calc(100% - 60px);min-height:0;overflow:hidden;border-radius:16px;} #dlist{padding:6px 12px 12px;overflow-x:auto;} #dlist li{width:52px;height:60px;} #pay input{padding:0 10px;border-radius:10px;} #pay{padding:0;margin-top:5px;} #pay .row{padding:0} #pay a.p{padding:0px 7px;border-radius:10px;} #pay br{margin-bottom:20px;}; #pay .tip{padding:0;margin:3px;border-radius:10px;} #pay .center{padding:0 0px;} #mobmenu {width:55px;height:100%;color:#fff;padding-right:10px;position:absolute;right:2px;top:0;display:flex;align-items:center;justify-content:flex-end;} #mobcart{position:absolute;right:55px;top:50%;transform:translateY(-50%);} #mobmenu i{font-size:28px;} #fname{font-size:1.6em;margin-top:30px;padding-left:3px;} #item{padding:0} #links img{width:22px;height:22px;margin-top:0;}#links .soc{font-size:22px;margin:0;} #category li.cat.on:before{position:absolute;right:10px;font-family:material icons;content:'';color:#fff;font-size:1.3em;} #addmore,#po2{font-size:13px;} #po2:after{content:attr(v);font-size:13px;} } .sects{margin-top:0px;margin-bottom:24px;} .sects h4{font-weight:bolder;} #about-sec h5{color:#c22c27;} #about-phone{padding:10px 0px 10px 35px;color:white;margin:20px 0 0 0;background:#c22c27;width:142px;border-radius:10px;cursor:pointer;} #about-phone i{left:19px;position:absolute;} #hours-sec h5{color:#c22c27;} #location-sec h5{color:#c22c27;} #gallery-sec h5{color:#c22c27;} #abouthour{line-height:1.3;text-align:start;} #abouthour pre{font-family:monospace,monospace;font-size:1em;float:left;}; .about-gmap{height:260px;background-size:cover;background-color:#fefefe;background-repeat:no-repeat;background-position:center center;margin:10px 0px;border:10px solid #fff;box-sizing:border-box;box-shadow:0px 0px 2px #000;} @media only screen and (max-width:600px){ #sects{margin-top:48px;} } #displaytotal:after{position: relative;content: attr(v);right: 0px;text-align: right;font-weight: bold;} /* bare icon chip, same family as the #time/#addr close chips */ #backtomenu{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;margin:12px 0;background:#f2f2f4;border-radius:99px;color:#333;cursor:pointer;transition:background-color .15s;} #backtomenu:hover{background:#e6e6e9;} #backtomenu svg{width:20px;height:20px;} #backtomenu span{display:none;} #pop .option a.nested{position: absolute;right: 10px;bottom: 5px;color: #fff;border-radius: 99px;width: 30px;height: 30px;} #pop .option a.nested.off{position: absolute; right: 10px; bottom: 5px; color: #fff; background: #b71c1c; border-radius: 99px; width: 30px; height: 30px;} #pop .option a.nested i{top: 6px;position: absolute;left: 6px;font-size: 17px;font-weight:bold;color: #b71c1c;} #pop .option a.nested.off:before{ position: absolute; left: 0px; bottom: 0px; font-family: 'Material Icons'; content: '\e5c8'; color: #fff; text-align: center; width: 100%; line-height: 30px; } #nestedmsg .modal-content{position:relative;height:100%;} #nestedpop{height:100%;padding-bottom:60px;} #nestedmsg{top:50% !important;transform:translateY(-50%) !important;border-radius:10px;} #nestedpop h5{padding-bottom: 16px;} #nestedpop .group p{padding:0;margin:0} #nestedpop .group{margin:10px 0;} #nestedpop .group b{font-weight:bold;} #nestedpop .group .row{margin:10px 0px;} #nestedpop .group .option{margin:2px;width:100%;min-height:60px;float:left;line-height:1.25;position:relative;font-size:0.9em;padding:8px 8px 40px;border:1.5px solid #aaa;border-radius:10px;} #nestedpop .group .option.moption:after{position:absolute;right:9px;top:3px;font-size:24px;color:red;text-shadow:1px 1px #fff;line-height:1;text-align:center;content:attr(v);} #nestedpop .option a.off{right: 10px;position: absolute;bottom: 5px;width:30px;height:30px;border-radius:99px;font-size: 17px;color: #fff;background:#b71c1c;} #nestedpop .option a.off:before {position: absolute;left: 0px;bottom: 0px;font-family: 'Material Icons';content: '\e145';color: #fff;text-align: center;width: 100%;line-height: 30px;} #nestedpop .option b {display: block;position: static;margin-top: 6px;font-size: 0.8em;line-height: 1;font-weight: 600;} #nestedpop .option u{position:absolute;right:20px;bottom:5px;background:#c62828;width:69px;height:30px;z-index:-1;color:#fff;display:none;text-decoration:none;line-height:30px;text-align:center;font-size:1.2em;border-radius:10px;} #nestedpop .option a.del{position:absolute;right:70px;bottom:5px;color:#fff;background:#b71c1c;border-radius:99px;width:30px;height:30px;box-shadow:1px 1px solid #999;display:none;} #nestedpop .option a.del:before{position:absolute;left:0px;bottom:0px;font-family:'Material Icons';content:'\e15b';color:#fff;text-align:center;width:100%;line-height:30px;} #nestedpop .option a.qty{position:absolute;right:10px;bottom:5px;color:#fff;background:#b71c1c;border-radius:99px;width:30px;height:30px;box-shadow:1px 1px solid #999;} #nestedpop .option a.qty:before{position:absolute;left:0px;bottom:0px;font-family:'Material Icons';content:'\e145';color:#fff;text-align:center;width:100%;line-height:30px;} #nestedpop .option a.on::before { position: absolute; left: 0px; bottom: 0px; font-family: 'Material Icons'; content: '\e876'; text-align: center; width: 100%; line-height: 30px; } #nestedpop .option a.disabled { opacity: 0.5; pointer-events: none; } #nestedpop .option a.on { position: absolute; right: 10px; bottom: 5px; color: #fff; background: #222; border-radius: 99px; width: 30px; height: 30px; box-shadow: 1px 1px solid #999; } #nestedpopA.disabled { opacity: 0.5; pointer-events: none; } #nestedpopA { color: #fff; padding: 10px 20px; text-align: center; background: #b71c1c; display: inline-block; border-radius: 10px; font-size: 1.2em; margin: 0 auto; cursor: pointer; } #nestedremove { color: #fff !important; padding: 10px 20px; text-align: center; background: #b71c1c; display: inline-block; border-radius: 99px; font-size: 1.2em; margin: 0 auto; cursor: pointer; margin-bottom:32px; width:100%; } #nestedpop .group{border-top:solid #eee 1px;padding-top:8px;} #nesteddesc{font-weight:lighter;font-size:0.75em;margin-top:2px;} .loadingOverlay {position: absolute;left: 0;width: 100%;height: 100%;z-index: 5;animation-duration: 3s;animation-fill-mode: forwards;animation-iteration-count: infinite;animation-name: placeHolderShimmer;animation-timing-function: linear;background-color: white;background: linear-gradient(to right, #eeeeee 8%,#d0cfcf 18% , #eeeeee 33%);} @keyframes placeHolderShimmer { 0% { background-position: -800px 0 } 100% { background-position: 800px 0 } } .spinner {border: 8px solid #f3f3f3;border-top: 8px solid grey;border-radius: 50%;width: 60px;height: 60px;animation: spin 2s linear infinite;} @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .loading-icon {width: 50px;height: 50px;} @media only screen and (max-width: 992px) { #loadingOverlay {top:319px;} } @media only screen and (max-width: 601px) { #loadingOverlay {top:351px;} } .input-container { position: relative; display: flex; } .input-container button:focus{ background-color:#c22c27; } input[type="text"] { flex: 1; padding-right: 60px; /* Space for the button */ } .apply-button { position: absolute; right: 10px; /* Position from the right */ top: 50%; transform: translateY(-63%); /* Center vertically */ padding: 5px 10px; background-color: #c22c27; /* Button color */ color: white; /* Text color */ border: none; border-radius: 5px; cursor: pointer; } .apply-button:hover { background-color: #a82023; /* Darker shade on hover */ } .loading-icon { width: 16px; height: 16px; border: 2px solid #f3f3f3; border-top: 2px solid #c22c27; border-radius: 50%; animation: spinicon 1s linear infinite; position: absolute; right: 82px; top: 29%; transform: translateY(-50%); } @keyframes spinicon { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } #authnetpay{ display:none; } span.minmax{ color:#e53e3e; } .flex-center { display: flex; align-items: center; justify-content: space-between; } .qty { margin: 0 5px; font-weight: bold; } .r, .a { cursor: pointer; } .r i, .a i { margin: 0; } #tecpay{ background:#b71c1c; color:white; border-radius:10px; } #searchbar { position: sticky; top: 51px; text-align: center; /* Above #category (z-index:5): at the bottom of the page the sticky category bar unpins and rides up out of #main — keep it tucking behind the searchbar's opaque background instead of overlapping on top of it. */ z-index: 6; padding-top: 14px; padding-bottom: 14px; background: white; } .search-wrapper { display: inline-block; width: calc(100% - 32px); /* Width of search field */ position: relative; } #searchfield { width: 100%; background-color: #f2f2f4; border-radius: 999px; padding: 8px 40px 8px 44px; /* Left padding for search icon, right padding for clear icon */ color: #000; border: 1px solid transparent !important; outline: none; box-sizing: border-box; box-shadow: none !important; font-size: 1rem; height: auto; margin: 0; transition: background-color .2s, border-color .2s, box-shadow .2s; } #searchfield::placeholder { color: #666; } #searchbar i.material-icons { position: absolute; top: 50%; left: 14px; /* Fixed distance from left of input */ transform: translateY(-50%); color: #333; pointer-events: none; font-size: 22px; } /* lucide-style search glyph (SVG) inside the field, left-aligned like the old icon */ #searchbar .searchicon{position:absolute;top:50%;left:16px;transform:translateY(-50%);width:18px;height:18px;color:#666;pointer-events:none;} #searchfield:focus { background-color: #fff; border: 1px solid #c22c27 !important; box-shadow: 0 0 0 3px rgba(194,44,39,.14) !important; } #searchbar #searchclear { position: absolute; top: 50%; right: 14px; left: auto; transform: translateY(-50%); color: #666; font-size: 20px; cursor: pointer; pointer-events: auto; user-select: none; opacity: 1; transition: opacity .15s; } #searchfield:placeholder-shown ~ #searchclear { opacity: 0; pointer-events: none; } /* remade to match the clear-cart dialog: bottom sheet on mobile, centered card on desktop, slide-up / pop animations */ #closedmsg.modal { display: none; position: fixed; inset: 0; margin: 0 !important; /* override materialize .modal margin (was insetting the sheet from the edges) */ width: auto !important; z-index: 1000; background-color: rgba(0, 0, 0, 0.5); align-items: flex-end; justify-content: center; max-height:100% !important; max-width:100%; } @media (min-width:601px){ #closedmsg.modal{ align-items:center; } } #closedmsg .modal-content { background-color: #ffffff; width: 100%; max-width: none; padding: 8px 24px calc(24px + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.2); text-align: center; font-family: 'Inter', 'Segoe UI', Roboto, -apple-system, BlinkMacSystemFont, sans-serif; animation: cmSheetUp .34s cubic-bezier(.16,1,.3,1); } #closedmsg .modal-content:before{ content:''; display:block; width:40px; height:4px; border-radius:99px; background:#e0e0e4; margin:8px auto 12px; } @media (min-width:601px){ #closedmsg .modal-content{ max-width:400px; width:90%; border-radius:20px; padding:24px; box-shadow:0 20px 50px rgba(0,0,0,.25); animation:cmPop .22s ease-out; } #closedmsg .modal-content:before{ display:none; } } @keyframes closedMsgSlideIn { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } #closedmsg .modal-header { display: flex; flex-direction: column; align-items: center; gap: 14px; margin: 6px 0 12px; } #closedmsg .modal-icon { background-color: #fdeceb; color: #c22c27; width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0; } #closedmsg .modal-icon svg{ width:28px; height:28px; } #closedmsg .modal-title { color: #17171a; font-size: 1.2rem; font-weight: 800; letter-spacing: -.02em; margin: 0; } #closedmsg .modal-message { color: #77777e; font-size: .9rem; line-height: 1.5; margin: 0 0 8px; } #closedmsg .modal-message p{ margin:0 0 6px; } /* order-ahead buttons (appended into .modal-message) → full-width primary, stacked */ #closedmsg .modal-message .reverseredkp { display: block; width: 100%; margin: 10px 0 0; padding: 14px; background: #c22c27; color: #fff; border: none; border-radius: 13px; font-weight: 700; font-size: .95rem; text-align: center; box-shadow: 0 8px 20px -8px rgba(194,44,39,.5); cursor: pointer; transition: background-color .15s; } #closedmsg .modal-message .reverseredkp:hover{ background:#a82420; } #closedmsg .modal-footer { display: block; background-color: transparent; margin-top: 8px; padding: 0; } #closedmsg .close-button-row{ margin:0 !important; } #closedmsg .close-button { display: block; width: 100%; background: transparent; color: #5f5f66; border: none; padding: 12px; font-size: .95rem; border-radius: 13px; cursor: pointer; font-weight: 600; transition: background-color 0.15s; } #closedmsg .close-button:hover { background-color: #f3f2f4; } /* closed-warning rendered inside #msg (item/pickup/delivery clicked while closed) — mirrors #closedmsg */ #msg.modal:has(.cmwrap){max-width:450px;width:90%;border-radius:12px;top:50% !important;transform:translateY(-50%) !important;} #msg .cmwrap{animation:closedMsgSlideIn .3s ease-out;} #msg .cmwrap .ahead{display:block;width:100%;box-sizing:border-box;text-align:center;line-height:1.75;cursor:pointer;} #msg .cmwrap .ahead:hover{font-weight:bold;} #msg:has(.cmwrap) .modal-content{padding:32px 40px;text-align:left;font-family:'Inter','Segoe UI',Roboto,-apple-system,BlinkMacSystemFont,sans-serif;} /* closed-warning inside #msg (.cmwrap with .modal-* content) — match the new #closedmsg sheet: centered icon/title, stacked full-width buttons */ #msg .cmwrap .modal-header{display:flex;flex-direction:column;align-items:center;gap:14px;margin:6px 0 12px;} #msg .cmwrap .modal-icon{background-color:#fdeceb;color:#c22c27;width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0;flex:0 0 auto;} #msg .cmwrap .modal-icon svg{width:28px;height:28px;} #msg .cmwrap .modal-title{color:#17171a;font-size:1.2rem;font-weight:800;letter-spacing:-.02em;margin:0;line-height:1.3;} #msg .cmwrap .modal-message{color:#77777e;font-size:.9rem;line-height:1.5;margin:0 0 8px;text-align:center;} #msg .cmwrap .modal-message p{margin:0 0 6px;} #msg .cmwrap .modal-message .reverseredkp,#msg .cmwrap .annok,#msg .cmwrap .ahead{display:block;width:100%;margin:10px 0 0;padding:14px;background:#c22c27;color:#fff;border:none;border-radius:13px;font-weight:700;font-size:.95rem;text-align:center;box-shadow:0 8px 20px -8px rgba(194,44,39,.5);cursor:pointer;transition:background-color .15s;} #msg .cmwrap .modal-message .reverseredkp:hover,#msg .cmwrap .annok:hover,#msg .cmwrap .ahead:hover{background:#a82420;font-weight:700;} #msg .cmwrap .modal-footer{display:block;background-color:transparent;justify-content:center;height:auto;margin-top:8px;padding:0;gap:0;} #msg .cmwrap .cancel-button,#msg .cmwrap .close-button{display:block;width:100%;background:transparent;color:#5f5f66;border:none;padding:12px;font-size:.95rem;border-radius:13px;cursor:pointer;font-weight:600;transition:background-color .15s;} #msg .cmwrap .cancel-button:hover,#msg .cmwrap .close-button:hover{background:#f3f2f4;} /* background scroll-lock while the closed modal is open (theme-2 CSS; the JS observer that toggles the class is isFuture-gated) */ body.cmsg-lock,html:has(> body.cmsg-lock){overflow:hidden;} .modal-buttons a { padding: 12px 24px; font-size: 1rem; border-radius: 6px; transition: background 0.3s ease; } .modal-buttons a:hover { filter: brightness(90%); } @media (max-width: 603px) { .modal-buttons { flex-direction: column; align-items: center; } .modal-buttons a { width: 100%; max-width: 220px; } } #invmsg{ border-radius:10px; } .orderahead-pickup, .orderahead-delivery{ margin-right:10px; line-height:1.75; width:100%; display:block; text-align:center; cursor:pointer; } .orderahead-pickup:hover, .orderahead-delivery:hover{ font-weight:bold; } .collapsible{ border-radius: 10px; } .collapsible-header { display: flex !important; justify-content: space-between !important; align-items: center !important; cursor: pointer; border-radius:10px } .collapsible-body { display: none; /* Start hidden */ overflow: hidden; border-bottom: none; } /* Optional: Add subtle easing for the arrow */ .collapsible-arrow { transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); } .collapsible li.active .collapsible-arrow { transform: rotate(180deg); } #addpass{ margin-top: 0; } #refundpolicy{ margin: 2rem 0rem; } /* Rewards Section Styles */ .reward-item { border: 2px solid #e0e0e0; border-radius: 8px; padding: 15px; margin-bottom: 12px; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; background: white; } .reward-item:hover:not(.disabled) { border-color: #c22c22 !important; box-shadow: 0 2px 8px rgba(194, 44, 34, 0.2); transform: translateY(-2px); } .reward-item.selected { border-color: #c22c22 !important; background: #fff5f5 !important; } .reward-item.disabled { opacity: 0.6; cursor: not-allowed; background: #f5f5f5; } #pay h5{ font-weight: 500; } /* Modern card-per-section checkout (mirrors profile.php section cards) */ #pay .section-card{ background:#fff; border:1px solid #edeff2; border-radius:14px; padding:20px 22px; margin-bottom:16px; box-shadow:0 1px 4px rgba(17,24,39,.05); } #pay .section-card:last-of-type{ margin-bottom:0; } #pay .section-card > h5:first-child{ margin:0 0 8px; padding-bottom:0; border-bottom:none; font-size:1.2rem; font-weight:600; color:#1a1a1a; } /* align card content (labels/inputs) with the h5 left edge */ #pay .section-card .row{ padding:0; margin-left:0; margin-right:0; } #pay .section-card .row .col{ padding-left:0; padding-right:12px; } #pay #paymenttypes{ margin-bottom:0; } @media (max-width:600px){ #pay #cardrow{ margin-top:14px; } } /* card form: left-aligned labels (paymenttypes centers text); fields share one height via the iframe css param */ #pay #cardrow{ text-align:left; } #pay #cardrow label{ display:block; text-align:left; text-transform:lowercase; } #pay #cardrow label::first-letter{ text-transform:uppercase; } #pay #cardrow #lcvv, #pay #cardrow label:has(+ #cvv){ text-transform:uppercase; } /* CVV is an acronym — keep all caps */ #pay #cardrow iframe#tokenframe{ display:block; } /* gift card row: match the card-form styling; extra space below the payment-type buttons */ #pay #gcardrow{ text-align:left; margin-top:18px; } #pay #gcardrow label{ display:block; text-align:left; text-transform:lowercase; } #pay #gcardrow label::first-letter{ text-transform:uppercase; } /* Authorize.net AcceptUI popup: its injected inline styles assume a desktop-width panel (left:50% + large negative margin), which pushes it off-center on phones. !important is required to beat the inline styles. */ @media (max-width:600px){ #AcceptUIContainer{ left:50% !important; right:auto !important; top:50% !important; bottom:auto !important; margin-left:0 !important; margin-top:0 !important; transform:translate(-50%,-50%) !important; width:calc(100vw - 24px) !important; max-width:400px !important; border-radius:10px; overflow:hidden; } #AcceptUIContainer iframe{ width:100% !important; border-radius:10px; } } /* order-summary card (mirrors #sum from the cart panel) */ #pay .sc-summary #sumInline{ margin:0; list-style:none; } #pay .sc-summary #sumInline li{ position:relative; min-height:38px; line-height:38px; border-top:1px solid #f0f0f0; white-space:nowrap; } #pay .sc-summary #sumInline li:first-child{ border-top:none; } #pay .sc-summary #sumInline li b{ position:absolute; left:0; right:100px; text-align:left; font-weight:normal; } #pay .sc-summary #sumInline li:after{ position:absolute; content:"$" attr(v); right:0; text-align:right; font-weight:normal; } #pay .sc-summary #sumInline li:last-child{ font-weight:700; } #pay .sc-summary #sumInline li:last-child:after{ font-weight:700; } /* only show the inline summary when the persistent YOUR ORDER panel is hidden (mobile/tablet) */ @media (min-width:993px){ #pay .sc-summary{ display:none; } } /* when the Order Summary card is showing (mobile/tablet), the Tip-card total is redundant — hide it (!important overrides the inline display jQuery .show() sets during total updates) */ @media (max-width:992px){ #displaytotal{ display:none !important; } } /* modern Promo Code / Redeem Rewards — flat sections inside the card (no boxed accordion) */ #pay .sc-promo .accordion-section{ border:none; background:transparent; border-radius:0; margin:0; } #pay .sc-promo #rewardsSection{ margin-top:4px !important; border-top:1px solid #f0f0f0; } #pay .sc-promo .accordion-header{ font-size:.95rem; font-weight:600; color:#1a1a1a; padding:12px 0; } #pay .sc-promo .accordion-header:hover{ background:transparent; color:#c22c27; } #pay .sc-promo .accordion-header i{ font-size:20px; color:#98a2b3; } #pay .sc-promo .accordion-content{ padding:0 0 14px; } #pay .sc-promo h5.dp{ font-size:.95rem; font-weight:600; margin:8px 0; } #pay .sc-promo #promorow .dp > label{ display:none; } /* placeholder carries the hint; label is redundant */ #pay .sc-promo #promorow .dp{ margin-top:2px; } #pay .sc-promo .apply-button{ border-radius:8px; padding:8px 16px; font-weight:600; font-size:.9rem; right:5px; top:20px; transform:translateY(-50%); } /* input is 40px; container is taller (input margin), so anchor to the input's half-height */ #pay .sc-promo #promorow [type=checkbox]+span{ font-size:.85rem; color:#98a2b3; line-height:1.4; } #pay .sc-promo #pro{ font-size:14px; } /* smaller coupon input text; placeholder inherits */ /* create-account card */ #pay .sc-account .acct-sub{ margin:0 0 18px; color:#777; font-size:0.9rem; line-height:1.45; } #pay .sc-account .acct-options{ display:flex; flex-direction:column; gap:12px; } #pay .sc-account .acct-opt{ display:block; margin:0; } #pay .sc-account .acct-pass{ width:100%; margin-top:16px; } /* utensils / refund cards are plain containers (no leading title) */ #pay .sc-utensils .utensils-row{ margin:0; } .reward-item input[type="radio"] { margin: 0; vertical-align: middle; position: relative; top: -2px; } /* Discount Accordion Styles */ .discount-accordion { margin: 0; } .accordion-section { border: 1px solid #e0e0e0; border-radius: 8px; margin-bottom: 10px; background: white; } .accordion-header { padding: 15px; margin: 0; font-weight: 600; transition: background 0.3s ease; } .accordion-header:hover { background: #f5f5f5; } .accordion-content { padding: 0 15px 15px 15px; overflow: hidden; transition: all 0.3s ease; } /* Override Materialize input focus color to brand red */ .input-field input[type=text]:focus:not([readonly]), .input-field input[type=password]:focus:not([readonly]), .input-field input[type=email]:focus:not([readonly]), .input-field input[type=url]:focus:not([readonly]), .input-field input[type=time]:focus:not([readonly]), .input-field input[type=date]:focus:not([readonly]), .input-field input[type=datetime]:focus:not([readonly]), .input-field input[type=datetime-local]:focus:not([readonly]), .input-field input[type=tel]:focus:not([readonly]), .input-field input[type=number]:focus:not([readonly]), .input-field input[type=search]:focus:not([readonly]), .input-field textarea.materialize-textarea:focus:not([readonly]), input[type=text]:not(.browser-default):focus:not([readonly]), input[type=password]:not(.browser-default):focus:not([readonly]), input[type=email]:not(.browser-default):focus:not([readonly]), input[type=url]:not(.browser-default):focus:not([readonly]), input[type=time]:not(.browser-default):focus:not([readonly]), input[type=date]:not(.browser-default):focus:not([readonly]), input[type=datetime]:not(.browser-default):focus:not([readonly]), input[type=datetime-local]:not(.browser-default):focus:not([readonly]), input[type=tel]:not(.browser-default):focus:not([readonly]), input[type=number]:not(.browser-default):focus:not([readonly]), input[type=search]:not(.browser-default):focus:not([readonly]), textarea.materialize-textarea:focus:not([readonly]) { border-bottom: 1px solid #b71c1c !important; box-shadow: 0 1px 0 0 #b71c1c !important; -webkit-box-shadow: 0 1px 0 0 #b71c1c !important; } /* Focus label color */ .input-field input[type=text]:focus:not([readonly]) + label, .input-field input[type=password]:focus:not([readonly]) + label, .input-field input[type=email]:focus:not([readonly]) + label, .input-field input[type=url]:focus:not([readonly]) + label, .input-field input[type=time]:focus:not([readonly]) + label, .input-field input[type=date]:focus:not([readonly]) + label, .input-field input[type=datetime]:focus:not([readonly]) + label, .input-field input[type=datetime-local]:focus:not([readonly]) + label, .input-field input[type=tel]:focus:not([readonly]) + label, .input-field input[type=number]:focus:not([readonly]) + label, .input-field input[type=search]:focus:not([readonly]) + label, .input-field textarea.materialize-textarea:focus:not([readonly]) + label { color: #b71c1c !important; } /* Icon prefix active color */ .input-field .prefix.active { color: #b71c1c !important; } /* Reward Warning Modal - Modern Minimal Style */ #rewardWarningModal.modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); align-items: center; justify-content: center; max-height: 100% !important; max-width: 100%; backdrop-filter: blur(4px); } #rewardWarningModal .modal-content { background-color: #ffffff; padding: 32px; border-radius: 16px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); max-width: 380px; width: 90%; text-align: center; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; animation: rwSlideIn 0.25s ease-out; } @keyframes rwSlideIn { from { opacity: 0; transform: scale(0.95) translateY(-10px); } to { opacity: 1; transform: scale(1) translateY(0); } } #rewardWarningModal .rw-icon { background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%); width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; } #rewardWarningModal .rw-title { color: #1a1a1a; font-size: 20px; font-weight: 600; margin: 0 0 12px; letter-spacing: -0.3px; } #rewardWarningModal .rw-message { color: #666; font-size: 15px; line-height: 1.5; margin: 0 0 24px; } #rewardWarningModal .rw-btn { background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%); color: white; border: none; padding: 14px 32px; font-size: 15px; font-weight: 600; border-radius: 8px; cursor: pointer; transition: all 0.2s ease; box-shadow: 0 4px 12px rgba(255, 152, 0, 0.3); } #rewardWarningModal .rw-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(255, 152, 0, 0.4); } #rewardWarningModal .rw-btn:active { transform: translateY(0); } /* Rewards Loading Overlay */ #rewardsLoadingOverlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255, 255, 255, 0.9); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 10; border-radius: 8px; } #rewardsLoadingOverlay .preloader-wrapper { margin-bottom: 15px; } #rewardsLoadingOverlay p { color: #333; font-weight: 600; margin: 0; } /* Rewards Container */ #rewardsContainer { position: relative; min-height: 100px; } /* Rewards Points Display */ #rewardsPointsDisplay { background: linear-gradient(135deg, #f9f9f9 0%, #fff 100%); border: 1px solid #e0e0e0; } #rewardsPointsDisplay b { color: #c22c22; font-size: 1.3em; } /* Confirm and Undo Reward Buttons */ #confirmRewardBtn, #undoRewardBtn { border: none; padding: 12px 28px; font-size: 15px; font-weight: 600; border-radius: 25px; cursor: pointer; transition: all 0.3s ease; margin: 10px 5px; display: inline-block; } #confirmRewardBtn { background: linear-gradient(135deg, #4CAF50 0%, #388E3C 100%); color: white; box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3); } #confirmRewardBtn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(76, 175, 80, 0.4); } #confirmRewardBtn:active { transform: translateY(0); } #confirmRewardBtn:disabled, #confirmRewardBtn.disabled { background: #ccc; cursor: not-allowed; box-shadow: none; transform: none; } #undoRewardBtn { background: linear-gradient(135deg, #f44336 0%, #d32f2f 100%); color: white; box-shadow: 0 4px 12px rgba(244, 67, 54, 0.3); } #undoRewardBtn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(244, 67, 54, 0.4); } #undoRewardBtn:active { transform: translateY(0); } /* Points Slider Input */ .points-input { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; background: #e0e0e0; border-radius: 4px; outline: none; transition: all 0.2s ease; } .points-input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; background: linear-gradient(135deg, #c22c22 0%, #a02222 100%); border-radius: 50%; cursor: pointer; box-shadow: 0 2px 6px rgba(194, 44, 34, 0.4); transition: all 0.2s ease; } .points-input::-webkit-slider-thumb:hover { transform: scale(1.1); box-shadow: 0 4px 10px rgba(194, 44, 34, 0.5); } .points-input::-moz-range-thumb { width: 22px; height: 22px; background: linear-gradient(135deg, #c22c22 0%, #a02222 100%); border-radius: 50%; cursor: pointer; border: none; box-shadow: 0 2px 6px rgba(194, 44, 34, 0.4); transition: all 0.2s ease; } .points-input::-moz-range-thumb:hover { transform: scale(1.1); box-shadow: 0 4px 10px rgba(194, 44, 34, 0.5); } .points-input:disabled { opacity: 0.5; cursor: not-allowed; } .points-input:disabled::-webkit-slider-thumb { background: #999; cursor: not-allowed; box-shadow: none; } .points-input:disabled::-moz-range-thumb { background: #999; cursor: not-allowed; box-shadow: none; } /* Points Input Row */ .points-input-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 10px; background: #f9f9f9; border-radius: 6px; } .points-input-row button { flex-shrink: 0; } /* Reward Item Enhancements */ .reward-item.selected .reward-radio { border-color: #c22c22; } .reward-item.confirmed { border-color: #4CAF50 !important; background: #f1f8e9 !important; } .reward-item.confirmed::after { content: '\e86c'; font-family: 'Material Icons'; position: absolute; top: 10px; right: 10px; color: #4CAF50; font-size: 24px; } /* Join Loyalty Button */ .join-loyalty-btn { background: linear-gradient(135deg, #c22c22 0%, #a02222 100%); color: white; border: none; padding: 12px 30px; border-radius: 25px; font-size: 15px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(194, 44, 34, 0.3); display: inline-flex; align-items: center; gap: 8px; } .join-loyalty-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(194, 44, 34, 0.4); } .join-loyalty-btn:active { transform: translateY(0); } .join-loyalty-btn i { font-size: 20px; } /* Accordion Section Improvements */ .accordion-section { overflow: hidden; } .accordion-header { display: flex; justify-content: space-between; align-items: center; cursor: pointer; user-select: none; } .accordion-header i { transition: transform 0.3s ease; } .accordion-header.open i { transform: rotate(90deg); } /* Rewards unavailable message */ .reward-unavailable-msg { color: #f44336; font-size: 0.85em; margin-top: 4px; font-style: italic; } /* Searchbar Banner Wrapper for mobile */ #searchbar-banner-wrapper { display: flex; flex-direction: column; } /* Redeem Rules Banner */ #redeemrules-banner { display: flex; align-items: center; background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%); border-radius: 16px; padding: 24px; margin-bottom: 20px; width: 100%; } .redeemrules-left { display: flex; gap: 12px; flex-wrap: wrap; flex: 1; justify-content: center; } .redeemrule-card { background: #fff; color: #b13930; width: 120px; height: 120px; border-radius: 8px; border: 2px dashed #b13930; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; overflow: hidden; transition: transform 0.2s, box-shadow 0.2s; position: relative; } .redeemrule-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(177, 57, 48, 0.25); } .redeemrule-name { background: #b13930; color: #fff; padding: 6px 4px; text-align: center; font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; line-height: 1.2; min-height: 28px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .redeemrule-dollar { flex: 1; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 800; color: #b13930; } .redeemrule-points { background: #f5f5f5; border-top: 1px dashed #ddd; padding: 5px 0; text-align: center; font-size: 10px; font-weight: 600; color: #666; } .redeemrule-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255, 255, 255, 0.3); display: flex; align-items: center; justify-content: center; border-radius: 6px; } .redeemrule-overlay i { font-size: 32px; color: #b13930; opacity: 0.6; } .redeemrules-right { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 16px; flex: 1; } .redeemrules-message { color: #333; font-size: 20px; font-weight: 600; } .redeemrules-btn { background: #b13930; border-radius: 25px; padding: 0 32px; font-weight: 500; text-transform: none; letter-spacing: 0.5px; } .redeemrules-btn:hover { background: #c94a41; } .redeemrules-btn:focus, .redeemrules-btn:active { background: #b13930; } @media only screen and (max-width: 992px) { .redeemrule-card { width: 100px; height: 100px; } .redeemrule-name { font-size: 8px; padding: 4px 3px; min-height: 24px; } .redeemrule-dollar { font-size: 18px; } .redeemrule-points { font-size: 10px; padding: 5px 0; } .redeemrule-overlay i { font-size: 28px; } } @media only screen and (max-width: 600px) { #redeemrules-banner { padding: 12px; gap: 12px; border-radius: 0; margin-bottom: 0; } .redeemrules-left { flex: 0 0 auto; gap: 8px; } .redeemrule-card { width: 70px; height: 70px; border-radius: 8px; } .redeemrule-name { font-size: 6px; padding: 3px 2px; min-height: 18px; } .redeemrule-dollar { font-size: 14px; } .redeemrule-points { font-size: 7px; padding: 3px 0; } .redeemrule-overlay i { font-size: 20px; } .redeemrule-card:nth-child(n+3) { display: none; } .redeemrules-right { gap: 8px; } .redeemrules-message { font-size: 12px; } .redeemrules-btn { padding: 0 12px; font-size: 10px; height: 28px; line-height: 28px; } } .hideonday{ display: none !important; } @keyframes fadeInDisc { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } /* compact "today's hours" status line — aligned with #address/#phone, monochrome white */ #hoursbar{position:relative;padding-left:26px;margin-top:16px;color:#fff;cursor:pointer;} #hoursbar #hoursStatus{color:#fff;vertical-align:middle;} #hoursbar .hoursbar-chev{font-size:18px;margin-left:4px;color:#fff;opacity:.85;vertical-align:middle;transition:transform .2s ease;} #hoursbar.show-week .hoursbar-chev{transform:rotate(180deg);} /* weekly-hours modal (mirrors #closedmsg pattern, reuses closedMsgSlideIn) */ #hoursmodal.hours-modal{display:none;position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.6);align-items:center;justify-content:center;} #hoursmodal .hm-card{background:#fff;border-radius:14px;width:90%;max-width:420px;overflow:hidden;box-shadow:0 10px 25px rgba(0,0,0,.15);animation:closedMsgSlideIn .3s ease-out;font-family:'Inter','Segoe UI',Roboto,-apple-system,BlinkMacSystemFont,sans-serif;} #hoursmodal .hm-header{display:flex;align-items:center;gap:12px;padding:22px 24px;background:linear-gradient(135deg,#b71c1c,#e53935);color:#fff;} #hoursmodal .hm-header h2{margin:0;font-size:20px;font-weight:600;} #hoursmodal .hm-list{list-style:none;margin:0;padding:8px 0;} #hoursmodal .hm-list li{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:12px 24px;font-size:15px;color:#555;} #hoursmodal .hm-list li .hm-day{font-weight:500;color:#333;} #hoursmodal .hm-list li .hm-time{text-align:right;line-height:1.5;} #hoursmodal .hm-list li.today{background:#fff3f3;} #hoursmodal .hm-list li.today .hm-day,#hoursmodal .hm-list li.today .hm-time{color:#b71c1c;font-weight:700;} #hoursmodal .hm-footer{display:flex;justify-content:flex-end;padding:16px 24px;} #hoursmodal .hm-close{background:#b71c1c;color:#fff;border:none;padding:10px 22px;border-radius:6px;font-size:15px;font-weight:500;cursor:pointer;transition:background .2s;} #hoursmodal .hm-close:hover{background:#e53935;} /* TEConnect card modal: rounded, vertically centered, phone-safe width (was inline 500px) */ #tecdivo.modal{ width:min(500px, calc(100vw - 24px)) !important; border-radius:14px; top:50% !important; transform:translateY(-50%) !important; } #tecdivo .modal-content{ border-radius:14px; } #tecdivo .tec-close{ position:absolute; top:14px; right:14px; color:#98a2b3; cursor:pointer; font-size:24px; z-index:1; } #tecdivo .tec-close:hover{ color:#1a1a1a; } /* center the Card Declined (cw-*) dialog; #msg hosts many contents, so scope via :has */ #msg.modal:has(.cw-title){ top:50% !important; transform:translateY(-50%) !important; max-width:420px; border-radius:16px; overflow:hidden; } #msg.modal:has(.cw-title) .modal-content{ padding:0; } /* ===== fhero: menu-page mobile hero redesign (future theme, <=600px) ===== White #mobnav, rounded hero image card (#mobhero: store name + address + open-status pills, tap pill -> hours modal) and a Pickup/Delivery segmented #orderbar overlapping the hero bottom. Markup in index.php (body.fhero is menu-page only, so the shared $header pages keep the dark look). The segments proxy the real #pickup/#delivery pills - state sync lives in menu.js. */ #mobhero,#orderbar,#botdock,#botnav,#bnmenu,#navacct,#cartbar{display:none;} @media only screen and (max-width:600px){ /* Firefox mobile: the rubber-band overscroll transform repaints fixed bars out of sync (bottom-nav contents visually slide out of the bar on pull-down at the top). Disable the bounce; also drops pull-to-refresh, which is fine here. */ html,body{overscroll-behavior-y:none;} body.fhero #mobnav{background:#fff;} body.fhero #mobmenu{color:#17171a;} /* fbot (non-QR menu page): bottom nav replaces the hamburger; cart slides to the freed right edge. Body bottom padding keeps page content scrollable above the fixed bar (safe-area for iPhone home indicator). */ body.fbot #mobmenu{display:none;} body.fqrbot #mobmenu{display:none;} body.fqrbot #mobcart{display:none !important;} body.fqrbot #qrtopinfo{display:flex;position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);max-width:calc(100% - 96px);height:34px;padding:0 12px;border-radius:99px;background:#f3f2f4;color:#17171a;align-items:center;justify-content:center;gap:7px;font-size:.78rem;font-weight:800;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} body.fqrbot #qrtopinfo .qtn{min-width:0;overflow:hidden;text-overflow:ellipsis;} body.fqrbot #qrtopinfo .qtc{font-size:.68rem;color:#73737a;font-weight:700;margin-left:2px;} body.fqrbot.cartopen #qrtopinfo,body.fqrbot.payopen #qrtopinfo{display:none;} body.fqrbot #botdock.ready{display:block;position:sticky;bottom:0;z-index:998;margin-top:auto;} body.fqrbot #cartbar{position:absolute;left:0;right:0;bottom:100%;margin:0 16px 10px;background:#c22c27;color:#fff;border-radius:14px;padding:12px 16px;align-items:center;gap:10px;font-weight:700;font-size:.9rem;box-shadow:0 10px 24px -8px rgba(194,44,39,.5);cursor:pointer;} body.fqrbot #cartbar svg{width:20px;height:20px;flex:0 0 auto;} body.fqrbot #cartbar .cbq{background:rgba(255,255,255,.22);border-radius:8px;padding:2px 8px;font-size:.78rem;} body.fqrbot #cartbar .cbgo{margin-left:auto;display:flex;align-items:center;gap:5px;} body.fqrbot #botnav{display:flex;height:auto;line-height:1;box-shadow:none;justify-content:space-around;align-items:center;background:#fff;border-top:1px solid #f0eff1;padding:8px 6px calc(9px + env(safe-area-inset-bottom));} body.fqrbot #botnav .bn{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:.62rem;font-weight:600;color:#a2a2a8;line-height:1;cursor:pointer;} body.fqrbot #botnav .bn svg{width:22px;height:22px;} body.fqrbot #botnav .bn.on{color:#c22c27;} body.fqrbot #bnqrnew,body.fqrbot #bnqrpaid{position:relative;} body.fqrbot #bnqrnew:after,body.fqrbot #bnqrpaid:after{content:attr(data-count);position:absolute;top:-2px;right:22%;min-width:18px;height:18px;border-radius:9px;background:#c22c27;color:#fff;font-size:10px;font-weight:800;line-height:18px;text-align:center;padding:0 5px;box-sizing:border-box;} body.fqrbot #bnqrpaid:after{background:#0a8043;} body.fqrbot #bnqrnew[data-count="0"]:after,body.fqrbot #bnqrnew:not([data-count]):after,body.fqrbot #bnqrpaid[data-count="0"]:after,body.fqrbot #bnqrpaid:not([data-count]):after{display:none;} body.fqrbot #bnmenu{display:none;position:absolute;right:10px;bottom:calc(100% + 8px);z-index:1001;background:#fff;border-radius:14px;box-shadow:0 8px 30px rgba(0,0,0,.22);padding:6px 0;min-width:210px;max-height:min(70vh,520px);overflow-y:auto;} body.fqrbot #bnmenu.open{display:block;} body.fqrbot #bnmenu a{display:flex;align-items:center;gap:12px;padding:11px 18px;color:#333;font-size:.9rem;font-weight:600;cursor:pointer;} body.fqrbot #bnmenu a svg{width:20px;height:20px;color:#666;flex:0 0 auto;} body.fqrbot #bnmenu a:hover,body.fqrbot #bnmenu a:focus{background:#fdf3f2;color:#c22c27;outline:none;} body.fqrbot #bnmenu a:hover svg,body.fqrbot #bnmenu a:focus svg{color:#c22c27;} /* cart moved to the floating #cartbar; top-right hosts the account chip instead. !important: menu.js refreshes the badge with hide().show(), and that .show() sets inline display:block on a stylesheet-hidden element */ body.fbot #mobcart{display:none !important;} body.fbot #navacct{display:flex;position:fixed;top:9px;right:12px;z-index:1000;width:34px;height:34px;border-radius:50%;background:#f3f2f4;align-items:center;justify-content:center;color:#39393e;} body.fbot #navacct svg{width:18px;height:18px;} /* no clearance padding needed anywhere: the sticky #botdock occupies flow space at the end of , so content can never sit behind it */ /* floating cart bar above the bottom nav — shown only with items in the cart (inline display:flex from JS; base rule keeps it none) */ /* sticky dock: in-flow at the end of (relocated + .ready'd by the header script), pinned to the scrollport bottom by position:sticky. No position:fixed here — Firefox Android's dynamic-toolbar re-anchoring hides/misplaces fixed bottom bars (and renders anything hanging below them). */ body.fbot #botdock.ready{display:block;position:sticky;bottom:0;z-index:998;margin-top:auto;} body.fbot #cartbar{position:absolute;left:0;right:0;bottom:100%;margin:0 16px 10px;background:#c22c27;color:#fff;border-radius:14px;padding:12px 16px;align-items:center;gap:10px;font-weight:700;font-size:.9rem;box-shadow:0 10px 24px -8px rgba(194,44,39,.5);cursor:pointer;} /* floats above the nav — its old flow slot showed as a white band under the footer */ body.fbot #cartbar svg{width:20px;height:20px;flex:0 0 auto;} body.fbot #cartbar .cbq{background:rgba(255,255,255,.22);border-radius:8px;padding:2px 8px;font-size:.78rem;} body.fbot #cartbar .cbgo{margin-left:auto;display:flex;align-items:center;gap:5px;} /* height:auto/line-height:1 undo materialize's nav{height:56px;line-height:56px} (content overflows the fixed 56px box in Firefox). NO transform here: FF Android's dynamic-toolbar offset for fixed-bottom elements breaks on transformed elements (bar ends up below the fold until the toolbar hides). */ body.fbot #botnav{display:flex;height:auto;line-height:1;box-shadow:none;justify-content:space-around;align-items:center;background:#fff;border-top:1px solid #f0eff1;padding:8px 6px calc(9px + env(safe-area-inset-bottom));} /* NOTE: no apron/bleed below the bar — Firefox Android pins bottom-fixed bars to the VISUAL viewport (above the retractable toolbar), so anything hanging below the bar renders as a permanent white block there. */ body.fbot #botnav .bn{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:.62rem;font-weight:600;color:#a2a2a8;line-height:1;cursor:pointer;} body.fbot #botnav .bn svg{width:22px;height:22px;} body.fbot #botnav .bn.on{color:#c22c27;} body.fbot #bnmenu{display:none;position:absolute;right:10px;bottom:calc(100% + 8px);z-index:1001;background:#fff;border-radius:14px;box-shadow:0 8px 30px rgba(0,0,0,.22);padding:6px 0;min-width:190px;} body.fbot #bnmenu.open{display:block;} body.fbot #bnmenu a{display:flex;align-items:center;gap:12px;padding:11px 18px;color:#333;font-size:.9rem;font-weight:600;} body.fbot #bnmenu a svg{width:20px;height:20px;color:#666;} /* current-page highlight: .cur marks the More tab (JS owns .on for its open state) */ body.fbot #botnav .bn.cur{color:#c22c27;} body.fbot #bnmenu a.on,body.fbot #bnmenu a.on svg{color:#c22c27;} /* Account tab: both icon/label pairs are server-rendered; .out (set by the header script from the kkm cookie) shows Login instead of Account */ body.fbot #bnacct .bni-out,body.fbot #bnacct .bnl-out{display:none;} body.fbot #bnacct.out .bni-in,body.fbot #bnacct.out .bnl-in{display:none;} body.fbot #bnacct.out .bni-out{display:block;} body.fbot #bnacct.out .bnl-out{display:inline;} /* store logo at the nav's top left; hamburger/cart stay pinned right */ body.fhero #navlogo{display:block;position:absolute;left:12px;top:50%;transform:translateY(-50%);width:38px;height:38px;} body.fhero #topbg,body.fhero #topBG,body.fhero #topbg2,body.fhero #sitelogo,body.fhero #siteinfo{display:none;} body.fhero .row.head{padding-top:0;margin-bottom:0;} /* 18px bottom margin gives non-menu pages breathing room below the hero; on the menu page the orderbar's -40px top margin nets the same 22px overlap as before */ body.fhero #mobhero{display:block;position:relative;height:186px;margin:42px 12px 18px;border-radius:20px;overflow:hidden;background-image:url(/img/online.jpg);background-size:cover;background-position:center;} body.fhero #mobhero .grad{position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,rgba(8,8,10,.05) 0%,rgba(8,8,10,.72) 62%,rgba(8,8,10,.9) 100%);} body.fhero #mobhero .hc{position:absolute;left:16px;right:16px;top:0;bottom:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-end;text-align:right;color:#fff;} body.fhero #mobhero .ht{font-size:1.5rem;font-weight:800;letter-spacing:-.03em;line-height:1.05;margin:0 0 8px;max-width:80%;} body.fhero #mobhero .meta{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;max-width:85%;} body.fhero .hpill{display:inline-flex;align-items:center;gap:4px;font-size:.66rem;font-weight:600;background:rgba(255,255,255,.18);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.28);color:#fff;padding:3px 9px;border-radius:100px;} body.fhero .hpill a{color:#fff;} body.fhero .hpill.open{background:rgba(47,160,110,.9);border-color:transparent;cursor:pointer;} body.fhero .hpill.closed{background:rgba(178,40,40,.85);border-color:transparent;cursor:pointer;} /* bottom gap to the next block reads as 26px either way: the loyalty banner (present only when redeem rules exist) brings +14px of its own, matching the 14px built-in top padding of #searchbar (whose 62px height is baked into #category{top:113px} — don't resize it) */ body.fhero #orderbar{display:block;position:relative;z-index:2;margin:-40px 20px 12px;background:#fff;border-radius:16px;border:1px solid #efeef0;box-shadow:0 12px 30px -12px rgba(20,14,6,.28);padding:11px 12px;} /* rounded card inset to match the hero's 12px side margins (base mobile rule at the #redeemrules-banner block above makes it full-bleed/square) */ body.fhero #searchbar-banner-wrapper #redeemrules-banner{margin:14px 12px 0;width:auto;border-radius:16px;} body.fhero #orderbar .seg{display:flex;background:#f2f1f3;border-radius:11px;padding:4px;gap:6px;} /* unselected segments still read as tappable buttons: white face + visible outline */ /* fixed height + centered column: with no schedule the label sits dead center; when a time appears (.segsub non-empty) both lines center in the same height */ body.fhero #orderbar .seg button{flex:1;border:1px solid #dcdce0;background:#fff;font-family:inherit;font-size:.82rem;font-weight:700;color:#5f5f66;height:42px;padding:0 4px;border-radius:9px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;cursor:pointer;line-height:1.2;transition:border-color .15s,box-shadow .15s;} body.fhero #orderbar .seg button .segsub{font-size:.62rem;font-weight:600;color:#8a8a90;} body.fhero #orderbar .seg button .segsub:empty{display:none;} body.fhero #orderbar .seg button.on{border-color:#c22c27;color:#17171a;box-shadow:0 1px 4px rgba(194,44,39,.18);} body.fhero #orderbar .seg button.on .segsub{color:#c22c27;} /* checkout-nudge pulse (body.otnudge, menu.js): include the visible segments - on mobile the real pills sit inside the hidden #custom, so pulsing them alone shows the user nothing */ body.otnudge #orderbar .seg button:not(.on){animation:otpulse .7s ease 2;} /* cart-bar gate nudge: brief red outline + pulse on the whole orderbar card */ body.fhero #orderbar.obnudge{border-color:#c22c27;animation:otpulse .7s ease 2;} /* floating warning pill above the View Cart button (inside the sticky dock): dark chip, amber alert icon, slides up + fades via .show */ body.fbot #cartwarn{position:absolute;bottom:calc(100% + 62px);left:50%;transform:translateX(-50%) translateY(6px);background:#17171a;color:#fff;padding:10px 16px;border-radius:99px;font-size:13px;font-weight:600;display:flex;align-items:center;gap:8px;white-space:nowrap;box-shadow:0 10px 30px rgba(0,0,0,.28);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:1002;} body.fbot #cartwarn svg{width:17px;height:17px;color:#ffb020;flex:0 0 auto;} body.fbot #cartwarn.show{opacity:1;transform:translateX(-50%) translateY(0);} } /* ===== fbot search: top-bar chip + floating overlay (menu page, non-QR) ===== The inline sticky #searchbar becomes a floating card under the top bar, toggled by #navsearch (menu.js adds/removes .open). QR pages (fhero without fbot) keep the original inline sticky searchbar, so everything here is fbot-scoped. #category moves up to sit right under the 51px top bar. */ #navsearch{display:none;} @media only screen and (max-width:600px){ body.fbot #navsearch{display:flex;position:fixed;top:9px;right:56px;z-index:1000;width:34px;height:34px;border-radius:50%;background:#f3f2f4;align-items:center;justify-content:center;color:#39393e;cursor:pointer;} body.fbot #navsearch svg{width:18px;height:18px;} /* !important beats both materialize's .show-on-small{display:block!important} and the legacy inline show/hide menu.js does around the cart view */ body.fbot #searchbar:not(.open){display:none !important;} body.fbot #searchbar{position:fixed;top:60px;left:12px;right:12px;z-index:1005;border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.18);padding:10px;} body.fbot #category{top:51px;} body.fbot,body.fqrbot{padding-bottom:0;} body.fbot #searchbar-banner-wrapper #redeemrules-banner{margin-bottom:14px;} } /* ===== fhero category pills + artifact font scale (mobile) ===== */ @media only screen and (max-width:600px){ /* category tabs -> pills: grey chip default, solid red active (artifact .cats); !important needed — the base li.cat rules force background-color:white */ body.fhero #category ul{align-items:center;} body.fhero #category li.cat{height:32px;align-self:center;padding:0 14px;margin-left:8px;border-radius:100px;background:#f3f2f4 !important;color:#5f5f66;font-size:13px;font-weight:600;} body.fhero #category li.cat.on{background:#c22c27 !important;color:#fff;} body.fhero #category li.cat.on::after{display:none;} body.fhero #category li.cat:last-of-type{margin-right:8px;} /* font scale from the artifact: compact section title, 15px item names, 13px muted descriptions, 14px dark prices */ body.fhero #itemlist h5{font-size:17px;font-weight:800;letter-spacing:-.02em;padding:14px 0 14px 20px;} body.fhero #itemlist li.item .n,body.fhero #itemlist li.item b.n,body.fhero #itemlist li.item b.n2{font-size:15px;font-weight:700;} body.fhero #itemlist li.item p{font-size:13px;color:#77777e;} body.fhero #itemlist li.item b.p{font-size:13px;font-weight:600;color:#17171a;} } /* ===== fhero item rows (artifact .item/.list): hairline-divided rows instead of shadow cards; text column left, 82px rounded thumb right with a floating "+"; section h5 gets a muted "· N items" count (span.cnt filled by menu.js) ===== */ @media only screen and (max-width:600px){ body.fhero #itemlist{padding-top:8px;} body.fhero #itemlist h5{font-size:17px;font-weight:800;letter-spacing:-.02em;padding:18px 0 16px 16px;display:flex;align-items:baseline;gap:8px;} body.fhero #itemlist h5 .cnt{font-size:11.5px;font-weight:600;color:#9a9aa0;letter-spacing:0;white-space:nowrap;} body.fhero #itemlist li.item{display:grid;grid-template-columns:1fr 82px;grid-template-rows:auto minmax(35px,auto) auto;column-gap:12px;row-gap:0;width:auto;height:auto;min-height:110px;margin:0 16px;padding:18px 0;border-radius:0;box-shadow:none;background:transparent;overflow:visible;} body.fhero #itemlist li.item:hover{box-shadow:none;transform:none;} body.fhero #itemlist ul{border-bottom:none;} body.fhero #itemlist li.item{border-bottom:1px solid #f0eff1;} body.fhero #itemlist li.item:last-child{border-bottom:none;} body.fhero #itemlist li.item .n,body.fhero #itemlist li.item b.n,body.fhero #itemlist li.item b.n2{position:static;grid-column:1;grid-row:1;left:auto;right:auto;top:auto;width:auto;max-height:none;font-size:15px;font-weight:600;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} body.fhero #itemlist li.item p{position:static;grid-column:1;grid-row:2;left:auto;top:auto;width:auto;height:auto;max-height:2.9em;margin:6px 0 11px;padding:0;font-family:inherit;font-size:13px;color:#77777e;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} body.fhero #itemlist li.item b.p{position:static;grid-column:1;grid-row:3;align-self:end;left:auto;bottom:auto;font-size:13px;font-weight:600;color:#17171a;font-variant-numeric:tabular-nums;} /* menu item image is a background-image on a placeholder
(menu.js:4144) — object-fit is inert; the background-* props below size it */
body.fhero #itemlist li.item.img img,body.fhero #itemlist li.item img{position:static;grid-column:2;grid-row:1/4;align-self:start;justify-self:end;width:82px;height:82px;border-radius:13px;background-color:#f2f1f3;background-size:cover;background-repeat:no-repeat;background-position:center center;}
/* imageless rows keep the exact geometry of image rows: the 82px thumb column
stays reserved (img just hidden) and the + chip sits in the same spot, so
every row is uniform */
body.fhero #itemlist li.item.noimg img{display:none;}
/* floating add chip (decorative — the whole row opens the item), pinned where
the thumb's bottom-right corner is (or would be, on imageless rows);
soldout rows keep their SOLD OUT ::after badge instead */
body.fhero #itemlist li.item:not(.soldout):after{content:'+';position:absolute;top:50%;transform:translateY(-50%);right:8px;width:30px;height:30px;line-height:28px;text-align:center;border-radius:50%;background:#fff;color:#c22c27;border:1px solid #ececee;box-shadow:0 3px 8px rgba(20,14,6,.16);font-size:20px;font-weight:700;box-sizing:border-box;}
}
/* ===== fhero item modal (artifact .mm): FIXED-height sheet — photo header with
floating close chip, title/desc/groups scroll in the middle, special-request
box + qty-pill/add-button footer pinned. Same ids/classes; :has(#pop) scoping
keeps every other #msg use (announcements, address, card-declined…) untouched.
menuf.css only loads for onlineTheme==2, so classic theme is unaffected. ===== */
@media only screen and (max-width:600px){
body.fhero #msg.modal:has(#pop){height:auto !important;max-height:86vh !important;top:50% !important;transform:translateY(-50%) !important;border-radius:24px;overflow:hidden;flex-direction:column;} /* hug content; cap at 86vh */
body.fhero #msg.modal.open:has(#pop){display:flex !important;} /* Materialize open() sets inline display:block which broke the shrink chain; scoped to .open so the closed inline display:none still applies */
body.fhero #msg.modal:has(#pop) .modal-content{height:auto;min-height:0;display:flex;flex-direction:column;padding:0;overflow:hidden;} /* flex child that can shrink within the 86vh cap so #pop's own scroll engages */
body.fhero #msg:has(#pop) #pop{flex:1 1 auto;min-height:0;height:auto;overflow-y:auto;position:relative;display:flex;flex-direction:column;padding:0 0 10px;}
/* photo first, full-bleed */
body.fhero #pop .center{order:-1;margin:0;flex:0 0 auto;}
body.fhero #pop .popimg,body.fhero #pop img.popimg{display:block;width:100%;height:auto;margin:0;border-radius:0;object-fit:contain;background-color:#f7f7f8;}
/* title block (was a sticky header) */
body.fhero #pop h5{position:static;margin:0;padding:15px 18px 0;border-bottom:none;background:none;font-size:1.2rem;line-height:1.25;letter-spacing:-.02em;}
body.fhero #pop h5 b{font-weight:800;}
body.fhero #pop h5 .fancyclose{position:absolute;top:12px;right:12px;transform:none;z-index:3;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.94);box-shadow:0 2px 7px rgba(0,0,0,.22);display:flex;align-items:center;justify-content:center;color:#333;}
body.fhero #pop h5 .fancyclose .material-icons{font-size:22px;}
body.fhero #pop .desc{padding:5px 18px 0;color:#77777e;font-size:.82rem;line-height:1.4;}
/* modifier groups: hairline-topped sections, REQUIRED-style chip for the min/max */
body.fhero #pop .group{margin:14px 0 0;padding:14px 18px 0;border-top:1px solid #f1f0f2;}
body.fhero #pop .group>b{font-size:.92rem;font-weight:700;}
body.fhero #pop .group>b .minmax{font-size:.6rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#c22c27;background:#fbe6e3;padding:2px 7px;border-radius:5px;margin-left:6px;white-space:nowrap;}
body.fhero #pop .group .option{border:1px solid #e6e5e8;border-radius:12px;min-height:56px;font-size:.9rem;}
body.fhero #pop .option.checked{background:#fdf3f2;border:2px solid #c22c27;}
/* special request styled like the artifact srbox, kept above the footer */
body.fhero #msg:has(#pop) #sp{display:flex;align-items:center;flex:0 0 auto;height:42px;min-height:42px;margin:10px 18px 12px;padding:0 12px;border:1px solid #e0e0e4;border-radius:11px;background:#f2f2f4;font-size:.82rem;color:#9a9aa0;}
body.fhero #msg:has(#pop) #sp input{border-bottom:none !important;box-shadow:none !important;margin:0;height:40px;font-size:.9rem;color:#17171a;background:transparent;}
body.fhero #msg.modal:has(#pop) .modal-content>hr{display:none;}
/* footer becomes a normal flex child (the sheet itself is fixed-height now) */
body.fhero #msg .row:has(#popA){position:static;flex:0 0 auto;margin:0 !important;padding:12px 18px calc(14px + env(safe-area-inset-bottom));}
body.fhero #msg .row:has(#popA) .edit-quantity{border:1px solid #e6e5e8;border-radius:100px;padding:5px 8px;gap:2px;align-items:center;}
body.fhero #popM,body.fhero #popP{justify-content:center;}
body.fhero #popM .material-icons,body.fhero #popP .material-icons{font-size:22px;}
body.fhero #popq{margin:0 7px;font-weight:700;line-height:1;}
body.fhero #popA{border-radius:13px;padding:13px 15px;font-weight:700;box-shadow:0 8px 20px -8px rgba(194,44,39,.5);display:flex;justify-content:space-between;align-items:center;text-align:left;text-transform:none;}
body.fhero #popA .abp,body.fhero #fancyA .abp,body.fhero #nestedpopA .abp{font-variant-numeric:tabular-nums;}
/* match #popA/#fancyA exactly (base #nestedpopA is a different size/weight/color) */
body.fhero #nestedpopA{width:100%;display:flex;justify-content:space-between;align-items:center;text-align:left;text-transform:none;border-radius:13px;padding:13px 15px;font-size:0.95em;font-weight:700;color:#fff;background:#c22c27;box-shadow:0 8px 20px -8px rgba(194,44,39,.5);box-sizing:border-box;}
body.fhero #msg:has(#pop) #sp input::placeholder{color:#9a9aa0;opacity:1;}
}
/* ===== same fixed-height sheet for the simple-item modal (no modifiers): that
flow builds straight into .modal-content with img.msgimg + #fancyA and no #pop
wrapper, so it needs its own :has(#fancyA) scoping ===== */
@media only screen and (max-width:600px){
body.fhero #msg.modal:has(#fancyA){height:auto !important;max-height:86vh !important;top:50% !important;transform:translateY(-50%) !important;border-radius:24px;overflow:hidden;} /* hug content; cap 86vh */
body.fhero #msg.modal:has(#fancyA) .modal-content{height:auto !important;max-height:86vh;display:flex;flex-direction:column;padding:0;overflow-y:auto;position:relative;}
body.fhero #msg.modal:has(#fancyA) .modal-content>.center{order:-1;margin:0;flex:0 0 auto;}
body.fhero #msg:has(#fancyA) img.msgimg{display:block;width:100%;height:auto;margin:0;border-radius:0;object-fit:contain;background-color:#f7f7f8;}
body.fhero #msg:has(#fancyA) .modal-content>h5{margin:0;padding:15px 18px 0;font-size:1.2rem;line-height:1.25;letter-spacing:-.02em;}
body.fhero #msg:has(#fancyA) .modal-content>h5 b{font-weight:800;}
body.fhero #msg:has(#fancyA) .modal-content>.fancyclose{position:absolute;top:12px;right:12px;z-index:3;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.94);box-shadow:0 2px 7px rgba(0,0,0,.22);display:flex;align-items:center;justify-content:center;color:#333;}
body.fhero #msg:has(#fancyA) .modal-content>.fancyclose .material-icons{font-size:22px;}
body.fhero #msg:has(#fancyA) .modal-content>.desc{padding:5px 18px 0;color:#77777e;font-size:.82rem;line-height:1.4;}
body.fhero #msg:has(#fancyA) #sp{display:flex;align-items:center;flex:0 0 auto;height:42px;min-height:42px;margin:12px 18px 14px;padding:0 12px;border:1px solid #e0e0e4;border-radius:11px;background:#f2f2f4;font-size:.82rem;color:#9a9aa0;}
body.fhero #msg:has(#fancyA) #sp input{border-bottom:none !important;box-shadow:none !important;margin:0;height:40px;font-size:.9rem;color:#17171a;background:transparent;}
body.fhero #msg.modal:has(#fancyA) .modal-content>hr{display:none;}
/* footer: pushed to the bottom when content is short, sticky while scrolling */
body.fhero #msg .row:has(#fancyA){margin:0 !important;flex:0 0 auto;padding:12px 18px calc(14px + env(safe-area-inset-bottom));}
body.fhero #msg .row:has(#fancyA) .edit-quantity{border:1px solid #e6e5e8;border-radius:100px;padding:5px 8px;gap:2px;align-items:center;}
body.fhero #fancyM,body.fhero #fancyP{justify-content:center;}
body.fhero #fancyM .material-icons,body.fhero #fancyP .material-icons{font-size:22px;}
body.fhero #fancyq{margin:0 7px;font-weight:700;line-height:1;}
body.fhero #fancyA{border-radius:13px;padding:13px 15px;font-weight:700;box-shadow:0 8px 20px -8px rgba(194,44,39,.5);display:flex;justify-content:space-between;align-items:center;text-align:left;text-transform:none;}
body.fhero #msg:has(#fancyA) #sp input::placeholder{color:#9a9aa0;opacity:1;}
}
/* imageless item modals: drop the sheet height by the 172px photo header
(the .center/img block is only emitted when the item has a picture) */
@media only screen and (max-width:600px){
/* image-less items: auto-height makes the old fixed 86vh-172px subtraction obsolete — keep only the reduced cap */
body.fhero #msg.modal:has(#pop):not(:has(.popimg)){height:auto !important;max-height:calc(86vh - 172px) !important;}
body.fhero #msg.modal:has(#fancyA):not(:has(img.msgimg)){height:auto !important;max-height:calc(86vh - 172px) !important;}
}
/* ===== fhero modifier display modes (artifact .r2/.radio/.chk/.seg2) =====
Group classes come from classifyModGroups() in menu.js (future theme only):
gsingle = radio rows, gmulti = checkbox rows, gpills = chip row, gimg = keep
photo-card grid. Same DOM — anchors are restyled or hidden (row taps still
drive them via the .option div handler's programmatic trigger).
Applied at ALL widths (was <=600): the modifier-option styling is identical on
desktop/tablet, so the fhero modal matches mobile there too. The frame/container
is set separately per breakpoint (mobile sheet <=600 / centered dialog >=601). */
@media only screen{
/* --- shared row layout (radio + checkbox groups) --- */
body.fhero :is(#pop,#nestedpop) :is(.group.gsingle,.group.gmulti) .row{margin:4px 0 0;}
body.fhero :is(#pop,#nestedpop) :is(.group.gsingle,.group.gmulti) .row .col{width:100%;max-width:100%;padding:0;margin:0;float:none;left:auto;right:auto;}
body.fhero :is(#pop,#nestedpop) :is(.group.gsingle,.group.gmulti) .option{display:flex;align-items:center;flex-wrap:wrap;gap:0 11px;width:100%;min-height:44px;margin:0;padding:8px 0 !important;border:none !important;border-radius:0;background:transparent !important;font-size:.9rem;position:relative;box-shadow:none;}
body.fhero :is(#pop,#nestedpop) :is(.group.gsingle,.group.gmulti) .option.checked{background:transparent !important;border:none !important;}
/* control glyph */
body.fhero :is(#pop,#nestedpop) :is(.group.gsingle,.group.gmulti) .option:before{content:'';flex:0 0 19px;width:19px;height:19px;box-sizing:border-box;border:2px solid #cfcfd4;background:transparent;transition:border-color .15s,background-color .15s;text-align:center;}
body.fhero :is(#pop,#nestedpop) .group.gsingle .option:before{border-radius:50%;}
/* radial-gradient dot (not padding+background-clip:content-box — Firefox renders
that clip on a bordered ::before as a full fill) so the inner dot is consistent */
body.fhero :is(#pop,#nestedpop) .group.gsingle .option.checked:before{border-color:#c22c27;background:radial-gradient(circle,#c22c27 0 4px,transparent 4.5px);}
body.fhero :is(#pop,#nestedpop) .group.gmulti .option:before{border-radius:6px;}
body.fhero :is(#pop,#nestedpop) .group.gmulti .option.checked:before{content:'\e5ca';font-family:'Material Icons';font-size:14px;line-height:15px;color:#fff;border-color:#c22c27;background:#c22c27;}
/* price tag rides right */
body.fhero :is(#pop,#nestedpop) :is(.group.gsingle,.group.gmulti) .option>b{position:static;order:5;margin:0 0 0 auto;font-size:.85rem;font-weight:600;color:#77777e;font-variant-numeric:tabular-nums;}
/* plain add/checkmark anchors hidden — the row itself is the tap target */
body.fhero :is(#pop,#nestedpop) :is(.group.gsingle,.group.gmulti) .option>a.add:not(.qty){display:none !important;}
/* group max reached: dim the untaken rows */
body.fhero :is(#pop,#nestedpop) :is(.group.gsingle,.group.gmulti) .option:has(a.disabled):not(.checked){opacity:.45;}
/* --- per-option qty: inline - n + stepper on the right --- */
body.fhero :is(#pop,#nestedpop) :is(.group.gsingle,.group.gmulti) .option>a.add.qty{display:inline-flex;position:static;order:8;width:26px;height:26px;flex:0 0 26px;border-radius:50%;background:#fff;border:1.5px solid #c22c27;box-shadow:none;margin-left:2px;}
body.fhero :is(#pop,#nestedpop) :is(.group.gsingle,.group.gmulti) .option>a.add.qty:before{position:static;content:'\e145';font-family:'Material Icons';color:#c22c27;font-size:16px;line-height:1;width:100%;height:100%;display:flex;align-items:center;justify-content:center;}
body.fhero :is(#pop,#nestedpop) :is(.group.gsingle,.group.gmulti) .option>a.del{position:static;order:6;width:26px;height:26px;flex:0 0 26px;border-radius:50%;background:#fff;border:1.5px solid #c22c27;box-shadow:none;margin-left:8px;}
body.fhero :is(#pop,#nestedpop) :is(.group.gsingle,.group.gmulti) .option>a.del:before{position:static;content:'\e15b';font-family:'Material Icons';color:#c22c27;font-size:16px;line-height:1;width:100%;height:100%;display:flex;align-items:center;justify-content:center;}
body.fhero :is(#pop,#nestedpop) :is(.group.gsingle,.group.gmulti) .option>u.num{position:static;order:7;width:auto;height:auto;min-width:18px;background:transparent;color:#17171a;z-index:auto;font-weight:700;font-size:.9rem;line-height:26px;text-align:center;margin:0 2px;}
body.fhero :is(#pop,#nestedpop) :is(.group.gsingle,.group.gmulti) .option>a.add.qty.disabled{border-color:#e6b6b4;opacity:.5;}
/* max-1 groups: a qty stepper is pointless (count can never exceed 1) — hide it
and let the radio control carry the state. !important beats jQuery .show()'s
inline style; the .option click handler deselects via a.del programmatically. */
body.fhero :is(#pop,#nestedpop) .group.gsingle .option>a.add.qty,
body.fhero :is(#pop,#nestedpop) .group.gsingle .option>a.del,
body.fhero :is(#pop,#nestedpop) .group.gsingle .option>u.num{display:none !important;}
/* --- nested options: chevron affordance + summary line --- */
body.fhero :is(#pop,#nestedpop) :is(.group.gsingle,.group.gmulti) .option>a.nested{position:static;order:9;width:26px;height:26px;flex:0 0 26px;border-radius:50%;background:#f3f2f4;box-shadow:none;}
body.fhero :is(#pop,#nestedpop) :is(.group.gsingle,.group.gmulti) .option>a.nested:before{position:static;content:'\e5cc';font-family:'Material Icons';color:#666;font-size:18px;line-height:26px;width:100%;text-align:center;display:block;}
body.fhero :is(#pop,#nestedpop) :is(.group.gsingle,.group.gmulti) .option>a.nested.on:before{content:'\e5ca';color:#c22c27;}
body.fhero :is(#pop,#nestedpop) :is(.group.gsingle,.group.gmulti) .option #nesteddesc{flex-basis:100%;order:10;margin:2px 0 0 30px;padding:0;font-size:.78rem;color:#77777e;line-height:1.35;}
/* --- pill groups (artifact .seg2) --- */
body.fhero :is(#pop,#nestedpop) .group.gpills .row{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0;}
body.fhero :is(#pop,#nestedpop) .group.gpills .row .col{width:auto;max-width:none;padding:0;margin:0;float:none;flex:0 0 auto;}
body.fhero :is(#pop,#nestedpop) .group.gpills .option{display:inline-flex;align-items:center;width:auto;min-height:0;margin:0;padding:8px 14px !important;border:1px solid #e0e0e4 !important;border-radius:100px;background:#f3f2f4 !important;font-size:.82rem;font-weight:600;color:#5f5f66;line-height:1;box-shadow:none;transition:background-color .15s,color .15s,border-color .15s;}
body.fhero :is(#pop,#nestedpop) .group.gpills .option.checked{background:#c22c27 !important;border-color:#c22c27 !important;color:#fff;}
body.fhero :is(#pop,#nestedpop) .group.gpills .option:before{display:none;}
body.fhero :is(#pop,#nestedpop) .group.gpills .option>a.add{display:none !important;}
body.fhero :is(#pop,#nestedpop) .group.gpills .option:has(a.disabled):not(.checked){opacity:.45;}
/* sold-out rows: quiet inline tag instead of the big overlay badge */
body.fhero :is(#pop,#nestedpop) :is(.group.gsingle,.group.gmulti,.group.gpills) .option.modsoldout{background:transparent !important;}
body.fhero :is(#pop,#nestedpop) :is(.group.gsingle,.group.gmulti) .option.modsoldout:after{position:static;order:11;transform:none;margin-left:auto;background:#f3f2f4;color:#9a9aa0;padding:3px 9px;border-radius:99px;font-size:.62rem;letter-spacing:.05em;box-shadow:none;}
}
/* ===== expandModifier (collapsible groups) under the fhero modal: flatten the
materialize chrome so collapsible sections match the plain .group sections;
the row/pill/qty mode styles above apply inside .collapsible-body as-is =====
(all widths — see note above) */
@media only screen{
body.fhero :is(#pop,#nestedpop) ul.collapsible{border:none;box-shadow:none;margin:0;border-radius:0;}
body.fhero :is(#pop,#nestedpop) ul.collapsible li.group{margin:14px 0 0;padding:14px 18px 0;border-top:1px solid #f1f0f2;border-radius:0;background:transparent;}
body.fhero :is(#pop,#nestedpop) li.group .collapsible-header{padding:0 !important;border:none;background:transparent;min-height:0;line-height:1.3;border-radius:0;}
body.fhero :is(#pop,#nestedpop) li.group .collapsible-header>b{font-size:.92rem !important;font-weight:700;}
body.fhero :is(#pop,#nestedpop) li.group .collapsible-header b .minmax{font-size:.6rem !important;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#c22c27;background:#fbe6e3;padding:2px 7px;border-radius:5px;margin-left:6px;white-space:nowrap;}
body.fhero :is(#pop,#nestedpop) li.group .collapsible-arrow{color:#9a9aa0;font-size:20px;}
body.fhero :is(#pop,#nestedpop) li.group .collapsible-body{padding:2px 0 0;border:none;}
/* legacy mobile clamps (ul.collapsible li .option .75em!important etc.) fight the mode styles */
body.fhero :is(#pop,#nestedpop) ul.collapsible li .option{font-size:.9rem !important;text-align:left !important;}
body.fhero :is(#pop,#nestedpop) ul.collapsible .group.gpills .option{font-size:.82rem !important;}
}
/* expandModifier: the "Selected Modifiers" summary card is redundant here (the
options themselves show their checked state) — hide it in fhero (all widths) */
@media only screen{
body.fhero #finalmodlist{display:none !important;}
/* Image modifier options as ROWS (not the old card grid, now desktop-only):
radio/checkbox control + name on the left, a 48px thumbnail FLOATING RIGHT,
and — when the option has a surcharge — the price as plain text (no pill) on
its own line UNDER the thumbnail, right-aligned. */
body.fhero :is(#pop,#nestedpop) :is(.group.gsingle,.group.gmulti) .option:has(img){position:relative;height:auto;min-height:64px;padding-right:60px !important;overflow:hidden;}
body.fhero :is(#pop,#nestedpop) :is(.group.gsingle,.group.gmulti) .option>img{position:absolute;right:0;top:50%;transform:translateY(-50%);width:48px;height:48px;margin:0;border-radius:10px;object-fit:cover;background:#f2f1f3;}
/* priced image option: raise the thumb, drop the price beneath it (plain text) */
body.fhero :is(#pop,#nestedpop) :is(.group.gsingle,.group.gmulti) .option:has(img):has(b){min-height:78px;}
body.fhero :is(#pop,#nestedpop) :is(.group.gsingle,.group.gmulti) .option:has(img):has(b)>img{top:10px;transform:none;}
body.fhero :is(#pop,#nestedpop) :is(.group.gsingle,.group.gmulti) .option:has(img)>b{position:absolute;right:0;top:62px;left:auto;bottom:auto;margin:0;padding:0;background:transparent;box-shadow:none;border-radius:0;text-align:right;white-space:nowrap;font-size:.85rem;font-weight:600;color:#77777e;}
/* no Materialize ripple on modifier options (not in the design; on the image
rows it was unclipped and spread across the screen) */
body.fhero :is(#pop,#nestedpop) .option .waves-ripple{display:none !important;}
}
/* ============================================================================
fhero MOBILE CART SCREEN (body.cartopen — set by menu.js segSync when the cart
view #custom is open on the menu page). CSS-first reskin; all JS hooks (b.r/
b.q/b.a steppers, #sum[v], #checkout[v], #pickup/#delivery state) preserved.
========================================================================== */
@media only screen and (max-width:600px){
/* no bottom nav / profile / search chrome on the cart screen (botnav already
hidden by segSync; these are the top-right fixed chips). The top #mobnav is
nearly empty on fbot and redundant with the cart header — hide it too so the
cart's own back+title header is the top of the screen. */
body.cartopen #navacct,body.cartopen #navsearch{display:none !important;}
body.cartopen #mobnav{display:none !important;}
/* #custom becomes a full-screen scroll PANEL: a fixed, self-scrolling flex column
so the header can stick to the top and the checkout to the bottom (window-scroll
sticky didn't hold the footer). height:100dvh tracks Firefox's dynamic toolbar. */
body.cartopen #custom{position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;height:100dvh;overflow-y:auto;-webkit-overflow-scrolling:touch;background:#fff;padding:0 12px;box-sizing:border-box;}
/* header: back arrow + "Your Order" + item count */
/* sticky header: pinned to the top of the scroll panel, full-bleed white so the
items scroll underneath it */
body.cartopen #carthead{position:sticky;top:0;z-index:3;display:flex;align-items:center;gap:10px;margin:0 -12px 12px;padding:calc(12px + env(safe-area-inset-top)) 12px 12px;background:#fff;}
body.cartopen #carthead #backtomenu{margin:0;flex:0 0 auto;}
body.cartopen #carthead .cart-h-title{font-size:1.2rem;font-weight:800;letter-spacing:-.02em;color:#17171a;}
body.cartopen #carthead #cartcount{margin-left:auto;font-size:.8rem;font-weight:600;color:#9a9aa0;}
/* order-type segmented control — matches the menu screen's #orderbar .seg.
The pills are the real state holders; three-state via :has (.off = the
non-selected type; neither .off on a fresh load = both neutral). */
body.cartopen .cartseg{display:flex;background:#f2f1f3;border-radius:11px;padding:4px;gap:6px;margin:0 0 16px;}
body.cartopen .cartseg #pickup,body.cartopen .cartseg #delivery{flex:1;width:auto;min-width:0;height:46px;margin:0;padding:0 4px;border:1px solid #dcdce0;background:#fff;border-radius:9px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;position:relative;transition:border-color .15s,box-shadow .15s;}
body.cartopen .cartseg #pickup b,body.cartopen .cartseg #delivery b{position:static;width:auto;height:auto;font-size:.82rem;font-weight:700;color:#5f5f66;letter-spacing:0;text-transform:capitalize;}
body.cartopen .cartseg #pickup:after,body.cartopen .cartseg #delivery:after{content:attr(data-lbl);position:static;font-size:.62rem;font-weight:600;color:#8a8a90;}
/* selected (its sibling carries .off) = red border + red label */
body.cartopen .cartseg:has(.off) #pickup:not(.off),body.cartopen .cartseg:has(.off) #delivery:not(.off){border-color:#c22c27;box-shadow:0 1px 4px rgba(194,44,39,.18);}
body.cartopen .cartseg:has(.off) #pickup:not(.off) b,body.cartopen .cartseg:has(.off) #delivery:not(.off) b{color:#17171a;}
body.cartopen .cartseg:has(.off) #pickup:not(.off):after,body.cartopen .cartseg:has(.off) #delivery:not(.off):after{color:#c22c27;}
/* single-type store (only one pill) always reads as active */
body.cartopen .cartseg:not(:has(#delivery)) #pickup,body.cartopen .cartseg:not(:has(#pickup)) #delivery{border-color:#c22c27;}
/* inactive (.off) */
body.cartopen .cartseg #pickup.off,body.cartopen .cartseg #delivery.off{background:#fff;border-color:#dcdce0;box-shadow:none;}
body.cartopen .cartseg #pickup.off b,body.cartopen .cartseg #delivery.off b{color:#9a9aa2;}
/* clock (access_time): hidden for UI — kept in the DOM so the orderbar proxy's
re-tap ($pill.find('i').trigger('click')) can still open the time picker.
display:none doesn't block jQuery .trigger('click'). */
body.cartopen .cartseg #pickup i,body.cartopen .cartseg #delivery i{display:none !important;}
/* delivery address / notice: full-width instead of the 224px centered box */
body.cartopen #caddress{width:auto;max-width:none;margin:0 0 12px;}
body.cartopen #notice{width:auto;max-width:none;margin:0 0 12px;border-radius:12px;}
/* item list card -> plain sections (dividers carry the structure) */
body.cartopen #cartcard{background:transparent;border:none;box-shadow:none;padding:0;margin:0 0 4px;}
body.cartopen #list{margin-bottom:4px;}
body.cartopen #list li.cust{border-top:1px solid #f0eff1;padding:14px 0;}
body.cartopen #list li.cust > .n > .mainname{font-size:15px;font-weight:600;color:#17171a;}
body.cartopen #list li.cust > .n > .modname,body.cartopen #list li.cust > .n > b.c,body.cartopen #list li.cust > .n > .c{font-size:13px;color:#77777e;}
body.cartopen #list li.cust > b.p{font-size:14px;font-weight:700;color:#17171a;}
body.cartopen #list li.cust > b.r,body.cartopen #list li.cust > b.a{color:#c22c27;font-size:18px;border-color:#e6e5e8;}
body.cartopen #list li.cust > b.q{border-color:#e6e5e8;color:#17171a;}
/* "+ Add more items" link (below the item list) */
body.cartopen #addmoreitems{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:13px 0;margin:0 0 6px;color:#c22c27;font-weight:600;font-size:.9rem;border-top:1px solid #f0eff1;border-bottom:1px solid #f0eff1;cursor:pointer;}
body.cartopen #addmoreitems i{font-size:18px;}
/* summary rows */
body.cartopen #sum{margin:0 0 16px;}
body.cartopen #sum li{height:40px;line-height:40px;border-top:1px solid #f0eff1;color:#5f5f66;font-size:.9rem;}
body.cartopen #sum li:after{color:#17171a;}
body.cartopen #sum li#total{border-top:1px solid #e0e0e4;font-size:1rem;color:#17171a;font-weight:700;}
body.cartopen #emptycart{color:#9a9aa0;}
/* floating checkout button: "Check Out" left, total right — hovers 12px off the
bottom edge (plus iPhone safe-area) instead of the old full-bleed bar.
4px side margin + the container's 12px padding = 16px screen-edge gap.
Radius + shadow match the menu page's View Cart button (#cartbar). */
body.cartopen #checkout{position:sticky;bottom:calc(12px + env(safe-area-inset-bottom));z-index:8;width:auto;margin:16px 4px calc(12px + env(safe-area-inset-bottom));padding:16px 24px;border-radius:14px;background:#c22c27;color:#fff;font-weight:700;font-size:1rem;display:flex;align-items:center;justify-content:space-between;text-align:left;box-shadow:0 10px 24px -8px rgba(194,44,39,.5);}
/* margin-top:auto (in the #custom flex column) pushes the bar to the bottom */
body.cartopen #cartcard{margin-bottom:0;}
body.cartopen #checkout{margin-top:auto;}
body.cartopen #checkout:after{content:attr(v);position:static;right:auto;}
body.cartopen #checkout.disabled{opacity:1;pointer-events:none;background:#d9d9de;color:#fff;box-shadow:0 6px 18px rgba(0,0,0,.10);}
/* the floating pill needs no backdrop — content scrolling under it is the look */
body.cartopen.chkbar:after{display:none !important;}
}
/* ===== Clear-cart button + confirmation (remade) ===== */
/* button: subtle centered "Clear cart" link on the cart screen (was a red pill) */
/* JS .show() forces inline display on #emptycart, so center via text-align
(flex would be overridden) — works whether it renders block or inline */
body.cartopen #emptycart{float:none;width:100%;margin:4px 0 0;padding:12px 0;border:none;border-radius:0;background:transparent;color:#9a9aa0;font-size:.85rem;font-weight:600;text-align:center;}
body.cartopen #emptycart:hover{background:transparent;color:#c22c27;}
body.cartopen #emptycart i{font-size:17px;margin:0 4px 0 0;vertical-align:middle;}
/* confirmation dialog (.cmwrap markup rebuilt in menu.js): mobile = bottom sheet
that slides up; desktop = centered card that pops in. */
@keyframes cmSheetUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes cmPop{from{opacity:0;transform:translateY(-50%) scale(.92)}to{opacity:1;transform:translateY(-50%) scale(1)}}
#msg:has(.cmwrap) .modal-content{padding:0 !important;}
/* #msg .cmwrap (line ~1700) applies closedMsgSlideIn (slide from TOP) to the inner
content — override with matching specificity + !important so only the container
animates (bottom sheet slides up / desktop card pops) */
#msg .cmwrap{animation:none !important;}
.cmwrap{display:flex;flex-direction:column;align-items:center;text-align:center;padding:8px 24px 24px;font-family:'Inter',system-ui,sans-serif;}
.cmwrap .cm-grip{display:none;width:40px;height:4px;border-radius:99px;background:#e0e0e4;margin:8px auto 12px;}
.cmwrap .cm-icon{width:56px;height:56px;border-radius:50%;background:#fdeceb;color:#c22c27;display:flex;align-items:center;justify-content:center;margin:10px 0 14px;}
.cmwrap .cm-icon svg{width:26px;height:26px;}
.cmwrap .cm-title{font-size:1.2rem;font-weight:800;color:#17171a;margin:0 0 6px;letter-spacing:-.02em;}
.cmwrap .cm-msg{font-size:.9rem;color:#77777e;line-height:1.45;margin:0 0 20px;max-width:300px;}
.cmwrap .cm-actions{display:flex;flex-direction:column;gap:8px;width:100%;}
.cmwrap .cm-clear{background:#c22c27;color:#fff;border-radius:13px;padding:14px;font-weight:700;font-size:.95rem;cursor:pointer;transition:background-color .15s;}
.cmwrap .cm-clear:hover{background:#a82420;}
.cmwrap .cm-cancel{background:transparent;color:#5f5f66;border-radius:13px;padding:12px;font-weight:600;font-size:.95rem;cursor:pointer;transition:background-color .15s;}
.cmwrap .cm-cancel:hover{background:#f3f2f4;}
@media only screen and (max-width:600px){
#msg.modal:has(.cmwrap){top:auto !important;bottom:0 !important;left:0;right:0;margin:0 !important;width:100% !important;max-width:none !important;border-radius:22px 22px 0 0;transform:none !important;animation:cmSheetUp .34s cubic-bezier(.16,1,.3,1);overflow:hidden;}
#msg.modal:has(.cmwrap) .cmwrap{padding-bottom:calc(22px + env(safe-area-inset-bottom));}
#msg.modal:has(.cmwrap) .cm-grip{display:block;}
}
@media only screen and (min-width:601px){
#msg.modal:has(.cmwrap){max-width:400px;width:90%;border-radius:20px;top:50% !important;transform:translateY(-50%) !important;animation:cmPop .22s ease-out;}
}
/* ============================================================================
fhero MOBILE CHECKOUT PANEL (body.payopen — set by segSync when #pay visible).
CSS-first reskin; preserves all pay hooks (contact/tip/promo/rewards/payment/
#po2/#addmore/wallet). Full-screen panel like the cart screen; also covers the
stray #custom bug.
========================================================================== */
#payhead{display:none;}
@media only screen and (max-width:600px){
/* full-screen scroll panel */
body.payopen #pay{position:fixed;inset:0;z-index:20;overflow-y:auto;-webkit-overflow-scrolling:touch;background:#f5f5f7;margin:0 !important;padding:0 !important;}
body.payopen #pay .pay{display:flex;flex-direction:column;min-height:100dvh;margin:0 !important;padding:0 12px calc(12px + env(safe-area-inset-bottom));box-sizing:border-box;}
/* hide the stray cart + all chrome on the checkout screen */
body.payopen #custom,body.payopen #mobnav,body.payopen #navacct,body.payopen #navsearch{display:none !important;}
body.doneopen #mobnav{display:block !important;}
body.fqrbot.doneopen #qrtopinfo{display:flex !important;}
body.fhero.doneopen #mobhero{display:block !important;}
body.fhero.doneopen #orderbar,body.fhero.doneopen #navacct,body.fhero.doneopen #navsearch{display:none !important;}
/* the header carries the title + store, so drop the in-card duplicates on mobile */
body.payopen #pay .checkout-title,body.payopen #pay .sc-store{display:none !important;}
/* sticky header: back arrow (→ cart) + Checkout + store name/order-type */
body.payopen #payhead{display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:3;margin:0 -12px 14px;padding:calc(12px + env(safe-area-inset-top)) 12px 12px;background:#fff;border-bottom:1px solid #f0eff1;}
body.payopen #payhead #paytocart{flex:0 0 auto;width:36px;height:36px;border-radius:50%;background:#f2f2f4;display:flex;align-items:center;justify-content:center;color:#333;cursor:pointer;}
body.payopen #payhead #paytocart svg{width:20px;height:20px;}
body.payopen #payhead .payhead-txt{display:flex;flex-direction:column;line-height:1.2;min-width:0;}
body.payopen #payhead .payhead-title{font-size:1.15rem;font-weight:800;letter-spacing:-.02em;color:#17171a;}
body.payopen #payhead .payhead-sub{font-size:.78rem;color:#9a9aa0;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* delivery drop-off address line (populated by segSync from #checkout[a]); hidden when empty */
body.payopen #payhead #payhead-addr{display:block;margin-top:1px;max-width:100%;font-size:.72rem;font-weight:600;color:#77777e;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
body.payopen #payhead #payhead-addr:empty{display:none;}
body.payopen #payhead #payhead-addr:before{content:'\e0c8';font-family:'Material Icons';font-size:13px;vertical-align:-2px;margin-right:3px;color:#c22c27;}
/* section cards on the grey panel */
body.payopen #pay .section-card{margin-bottom:12px;border-color:#f0eff1;}
body.payopen #pay .section-card > h5:first-child,body.payopen #pay h5.tp{font-size:1rem;font-weight:700;color:#17171a;}
body.payopen #pay #displaytotal{font-weight:800;color:#17171a;}
/* Order Summary total row bold */
body.payopen #pay #sumInline li:last-child{font-weight:700;color:#17171a;}
/* sticky action bar (override the old fixed-bottom rules under payopen) */
body.payopen #pay .payact-divider{display:none;}
body.payopen #pay .pay{padding-bottom:0 !important;}
body.payopen #pay .row.pay-actions{position:sticky;bottom:0;top:auto;transform:none;margin:auto -12px 0;padding:12px 12px calc(12px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid #f0eff1;box-shadow:0 -4px 16px rgba(0,0,0,.06);z-index:5;display:flex;gap:10px;}
body.payopen #pay .pay-actions .chko{border-radius:13px;padding:14px 12px;font-weight:700;}
body.payopen #pay .pay-actions #addmore.chko{background:#f2f2f4 !important;color:#5f5f66 !important;border:none;box-shadow:none;}
body.payopen #pay .pay-actions #po2.chko{background:#c22c27;color:#fff;box-shadow:0 8px 20px -8px rgba(194,44,39,.5);}
}
/* =========================================================================
fhero TABLET + DESKTOP (>=601px) — extend the mobile fhero UI to wide screens.
Layout: centered menu column (item card grid) + persistent right cart sidebar
(#custom). Reuses the #itemlist all-sections model: the sections are
pre-populated at load (menu.js) and only hidden by Materialize; we unhide them
here and hide the legacy one-category #item panel, which makes the category
pill click auto-route to the scroll-to-section branch. Desktop-only sizing
(2-col grid, larger hero/sidebar) lives in the >=993 sub-block near the end;
tablet-only tweaks in the 601-992 sub-block. All scoped body.fhero; menuf.css
only loads for onlineTheme==2, so classic theme is untouched.
========================================================================= */
@media only screen and (min-width:601px){
/* ---- two-column shell (#main is display:flex via checkScreenWidth's .flex) ---- */
body.fhero #main{align-items:flex-start;column-gap:28px;}
/* #category is col l12 (100%) -> its own row; menu column + sidebar share the next */
body.fhero #category{order:1;}
body.fhero #menucol{order:2;flex:1 1 0;min-width:0;}
/* cart sidebar shown on BOTH tablet (Materialize hides it hide-on-med-and-down)
and desktop; force it visible for theme 2 */
body.fhero #custom{display:block !important;order:3;flex:0 0 322px;box-sizing:border-box;position:sticky;top:120px;align-self:flex-start;padding:18px 16px;margin:8px 0 40px;border:1px solid #ececee;border-left:1px solid #ececee;border-radius:18px;background:#fff;box-shadow:0 4px 16px rgba(20,14,6,.06);}
/* checkout: cart/totals card is ~30% and NOT sticky on the pay page (user request);
margin-top:0 so its top aligns with the form's first card */
body.fhero.payopen #custom{position:static;top:auto;flex:0 0 340px;margin-top:0;}
/* fhero top nav (Materialize hides .nav-wrapper hide-on-med-and-down on tablet)
+ drop the black mobile top bar so tablet matches the desktop header */
body.fhero .nav-wrapper{display:block !important;}
body.fhero #mobnav{display:none !important;}
/* legacy one-category #item panel is unused in fhero -> hide so category clicks
route to the scroll-to-section branch (menu.js checks $('#item').is(':visible')).
NOTE: menu's #item has no .favor class; favorite.php's #item.favor is its CONTENT
column, so re-show it below (this rule would otherwise hide the favorites). */
body.fhero #item{display:none !important;}
body.fhero #item.favor{display:block !important;order:2;flex:1 1 0;min-width:0;padding:0;}
/* favorite/orders have no sticky #category, so the cart sidebar sticks just below the nav */
body.fhero #main:not(:has(#category)) #custom{top:78px;}
/* checkout: when #pay is shown segSync sets body.payopen. The #menucol wrapper
(new for fhero) isn't hidden by the legacy checkout handler, so drop the menu
columns here and let the pay form + cart-summary sidebar own the row. */
body.fhero.payopen #menucol,body.fhero.payopen #category,body.fhero.payopen #searchbar{display:none !important;}
/* 70/30 split filling the container (left: customer + payment cards; right: cart +
totals card). Soft grey page bg makes the white cards pop, like the reference. */
body.fhero.payopen{background:#f4f4f6;}
body.fhero.payopen #main{column-gap:12px;}
/* strip the column/inner padding so the form cards align to the container (banner)
left edge, and tighten the gap to the cart card */
body.fhero.payopen #pay{flex:1 1 0;max-width:none;min-width:0;padding:0;}
body.fhero.payopen #pay .pay{padding:0;margin-bottom:0;}
/* no bare "Checkout" heading — keep the left column card-based like the right */
body.fhero.payopen #pay .checkout-title{display:none !important;}
/* #checkout in the order-summary sidebar is the real submit. The form's #po2
proxies it via trigger('click'); desktop shows both bottom actions, while the
narrower layouts continue using the sidebar Place Order action. */
body.fhero.payopen #custom #checkout{display:block !important;}
/* relabel the sidebar button "Place Order" during checkout (its text node stays
"Check Out" — the JS swap only relabels #po2, and cart re-renders reset it — so
drive the label from CSS: hide the text node, render the label + total via
pseudo-elements). Only while body.payopen; on the menu it stays "Check Out". */
body.fhero.payopen #custom #checkout{font-size:0;}
body.fhero.payopen #custom #checkout::before{content:'Place Order';font-size:1rem;font-weight:bold;vertical-align:middle;}
body.fhero.payopen #custom #checkout::after{font-size:1rem;}
body.fhero.payopen #custom #notice{display:none !important;}
body.fhero.payopen #pay .pay-actions .col:has(#po2){display:none !important;}
body.fhero.payopen #pay .pay-actions .col:has(#addmore){flex:1 1 auto;}
body.fhero.payopen #pay #addmore.chko{background:#fff !important;color:#5f5f66 !important;border:1px solid #e0e0e4;box-shadow:none;}
/* Desktop checkout keeps both form actions at the bottom. #po2 reuses the
existing Place Order handler; the sidebar checkout button remains available. */
@media only screen and (min-width:993px){
body.fhero.payopen #pay .pay-actions .col:has(#po2){display:block !important;}
body.fhero.payopen #pay .pay-actions .col:has(#addmore){flex:1;}
}
/* ---- item card grid: unhide the pre-populated .itemlist sections, lay their
items out two-up as bordered cards ---- */
body.fhero .mobitem.itemlist{display:block !important;}
body.fhero #menucol{padding-top:4px;padding-bottom:48px;}
body.fhero #itemlist{padding-top:0;}
body.fhero #itemlist h5{font-size:1.35rem;font-weight:800;letter-spacing:-.02em;padding:26px 6px 14px;margin:0;width:auto;display:flex;align-items:baseline;gap:9px;}
body.fhero #itemlist h5 .cnt{font-size:12.5px;font-weight:600;color:#9a9aa0;letter-spacing:0;white-space:nowrap;}
body.fhero #itemlist ul{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:0;margin:0;}
body.fhero #itemlist li.item{position:relative;display:grid;grid-template-columns:1fr 84px;grid-template-rows:auto minmax(34px,auto) auto;column-gap:14px;row-gap:0;width:auto;height:auto;min-height:114px;margin:0;padding:16px;border:1px solid #ececee;border-radius:16px;background:#fff;box-shadow:none;overflow:visible;cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .15s;}
body.fhero #itemlist li.item:hover{background:#fff;border-color:#e0dfe2;box-shadow:0 6px 20px rgba(20,14,6,.10);transform:translateY(-1px);}
body.fhero #itemlist li.item .n,body.fhero #itemlist li.item b.n,body.fhero #itemlist li.item b.n2{position:static;grid-column:1;grid-row:1;left:auto;right:auto;top:auto;width:auto;max-height:none;font-size:15px;font-weight:600;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
body.fhero #itemlist li.item p{position:static;grid-column:1;grid-row:2;left:auto;top:auto;width:auto;height:auto;max-height:2.9em;margin:6px 0 11px;padding:0;font-family:inherit;font-size:13px;color:#77777e;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
body.fhero #itemlist li.item b.p{position:static;grid-column:1;grid-row:3;align-self:end;left:auto;bottom:auto;font-size:13px;font-weight:600;color:#17171a;font-variant-numeric:tabular-nums;}
body.fhero #itemlist li.item.img img,body.fhero #itemlist li.item img{position:static;grid-column:2;grid-row:1/4;align-self:start;justify-self:end;width:84px;height:84px;border-radius:13px;background-color:#f2f1f3;background-size:cover;background-repeat:no-repeat;background-position:center center;}
body.fhero #itemlist li.item.noimg img{display:none;}
body.fhero #itemlist li.item:not(.img) p{width:auto;}
body.fhero #itemlist li.item:not(.soldout):after{content:'+';position:absolute;bottom:14px;right:14px;width:30px;height:30px;line-height:28px;text-align:center;border-radius:50%;background:#fff;color:#c22c27;border:1px solid #ececee;box-shadow:0 3px 8px rgba(20,14,6,.16);font-size:20px;font-weight:700;box-sizing:border-box;}
/* ---- cart sidebar: header + segmented order-type control (mirrors mobile) ---- */
body.fhero #custom h5{text-align:left;}
body.fhero #carthead{display:flex;align-items:center;gap:10px;margin:0 0 14px;}
body.fhero #carthead .cart-h-title{font-size:1.15rem;font-weight:800;letter-spacing:-.02em;color:#17171a;}
body.fhero #carthead #cartcount{margin-left:auto;font-size:.78rem;font-weight:600;color:#9a9aa0;}
/* the persistent sidebar needs no "back to menu" arrow (it shows on tablet via
hide-on-large-only); hide it whenever the sidebar is inline */
body.fhero #carthead #backtomenu{display:none !important;}
body.fhero .cartseg{display:flex;background:#f2f1f3;border-radius:11px;padding:4px;gap:6px;margin:0 0 14px;}
body.fhero .cartseg #pickup,body.fhero .cartseg #delivery{flex:1;width:auto;min-width:0;height:46px;margin:0;padding:0 4px;border:1px solid #dcdce0;background:#fff;border-radius:9px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;position:relative;transition:border-color .15s,box-shadow .15s;}
body.fhero .cartseg #pickup b,body.fhero .cartseg #delivery b{position:static;width:auto;height:auto;font-size:.82rem;font-weight:700;color:#5f5f66;letter-spacing:0;text-transform:capitalize;}
body.fhero .cartseg #pickup:after,body.fhero .cartseg #delivery:after{content:attr(data-lbl);position:static;font-size:.62rem;font-weight:600;color:#8a8a90;}
body.fhero .cartseg:has(.off) #pickup:not(.off),body.fhero .cartseg:has(.off) #delivery:not(.off){border-color:#c22c27;box-shadow:0 1px 4px rgba(194,44,39,.18);}
body.fhero .cartseg:has(.off) #pickup:not(.off) b,body.fhero .cartseg:has(.off) #delivery:not(.off) b{color:#17171a;}
body.fhero .cartseg:has(.off) #pickup:not(.off):after,body.fhero .cartseg:has(.off) #delivery:not(.off):after{color:#c22c27;}
body.fhero .cartseg:not(:has(#delivery)) #pickup,body.fhero .cartseg:not(:has(#pickup)) #delivery{border-color:#c22c27;}
body.fhero .cartseg #pickup.off,body.fhero .cartseg #delivery.off{background:#fff;border-color:#dcdce0;box-shadow:none;}
body.fhero .cartseg #pickup.off b,body.fhero .cartseg #delivery.off b{color:#9a9aa2;}
body.fhero .cartseg #pickup i,body.fhero .cartseg #delivery i{display:none !important;}
/* sidebar cart controls span the full width (base rules fix them to 224px centered) */
body.fhero #custom #caddress,body.fhero #custom #checkout,body.fhero #custom #notice{width:100%;margin-left:0;margin-right:0;box-sizing:border-box;}
body.fhero #custom #checkout{margin:16px 0 4px;}
body.fhero #custom #caddress{width:auto;}
/* ---- header: replace the dark full-bleed image banner with a clean white top
nav bar + the fhero rounded hero card below it (same hero used on mobile) ---- */
body.fhero #topBG,body.fhero #topbg{display:none !important;}
/* sticky top nav bar (sits above the category bar when scrolling). Page bg is white
and all content is within the centered container, so a 1200-wide sticky bar reads
as full-width; the ::before extends a white backing + the ::after a full-bleed border. */
body.fhero .row.head{height:auto !important;min-height:0;background:#fff;margin:0 auto;padding:0;box-shadow:none;position:sticky;top:0;z-index:6;}
body.fhero .row.head::before{content:'';position:absolute;top:0;bottom:0;left:50%;margin-left:-50vw;width:100vw;background:#fff;z-index:-1;pointer-events:none;}
/* full-bleed bottom border (edge to edge) while nav items stay in the centered container */
body.fhero .row.head::after{content:'';position:absolute;bottom:0;left:50%;margin-left:-50vw;width:100vw;height:1px;background:#efeff1;pointer-events:none;}
body.fhero #siteinfo,body.fhero #hour{display:none !important;}
body.fhero #sitelogo{display:block !important;position:absolute;left:0;top:50%;transform:translateY(-50%);width:42px;height:42px;margin:0;padding:0;background-color:transparent;border:0;border-radius:10px;box-shadow:none;background-size:contain;z-index:1;}
/* comfortable nav bar with vertically-centered items (was cramped: float li + 2px
padding + inline anchors gave a ~22px bar with baseline-aligned text) */
body.fhero .nav-wrapper{background:transparent;padding:0 0 0 58px;box-sizing:border-box;display:flex;align-items:center;justify-content:flex-end;min-height:62px;}
body.fhero #nav{margin:0;display:flex;align-items:center;}
body.fhero #nav li{float:none;display:flex;align-items:center;padding:0;margin:0;font-size:1rem;}
body.fhero #nav li a:not(.btn){display:flex;align-items:center;height:62px;padding:0 13px;line-height:1;color:#2a2a2e;font-weight:500;}
body.fhero #nav li a:not(.btn):hover{color:#c22c27;}
body.fhero #nav li a.on{color:#c22c27;}
body.fhero #navline{background:#c22c27;}
body.fhero #cart.btn{background:#c22c27;color:#fff;border-radius:11px;align-self:center;margin-left:8px;height:38px;display:inline-flex;align-items:center;}
/* fhero hero card, widened + centered to the 1200 container. Self-contained:
the base hero styles (background image, gradient, .hc/.ht/.hpill) live in the
<=600 media block, so desktop must redeclare them here. */
body.fhero #mobhero{display:block !important;position:relative;overflow:hidden;background-image:url(/img/online.jpg);background-size:cover;background-position:center;max-width:1200px;width:95%;height:240px;margin:14px auto 6px;border-radius:24px;}
body.fhero #mobhero .grad{position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,8,10,.05) 0%,rgba(8,8,10,.55) 55%,rgba(8,8,10,.82) 100%);}
body.fhero #mobhero .hc{position:absolute;left:36px;right:44px;top:0;bottom:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-end;text-align:right;color:#fff;}
body.fhero #mobhero .ht{font-size:2.5rem;font-weight:800;letter-spacing:-.03em;line-height:1.05;margin:0 0 12px;max-width:75%;color:#fff;}
body.fhero #mobhero .meta{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;max-width:75%;}
body.fhero #mobhero .hpill{display:inline-flex;align-items:center;gap:4px;font-size:.8rem;font-weight:600;background:rgba(255,255,255,.18);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.28);color:#fff;padding:5px 13px;border-radius:100px;}
body.fhero #mobhero .hpill a{color:#fff;}
body.fhero #mobhero .hpill.open{background:rgba(47,160,110,.9);border-color:transparent;}
body.fhero #mobhero .hpill.closed{background:rgba(178,40,40,.85);border-color:transparent;}
/* the menu content starts right under the hero (no 486px banner offset anymore) */
body.fhero #main{margin-top:8px;}
/* ---- desktop search: inline search box below the hero (mobile shows it as a
sticky bar / floating overlay; here it's a static field). Handlers are
width-independent and filter the .itemlist sections shown above. ---- */
body.fhero #searchbar{display:block !important;position:static;top:auto;z-index:auto;max-width:1200px;width:95%;margin:6px auto 0;padding:2px 0 0;text-align:left;background:transparent;}
body.fhero #searchbar .search-wrapper{width:100%;max-width:560px;}
/* desktop/tablet loyalty banner, now emitted above #searchbar (centered to the container) */
body.fhero #redeemrules-desktop{max-width:1200px;width:95%;margin:16px auto 0;}
/* --- tidy reward strip: soft red-tint card, coupons left, headline + button in a
left-aligned space-between row (kills the old 50/50-centered dead space) --- */
body.fhero #redeemrules-desktop #redeemrules-banner{background:linear-gradient(135deg,#fdf3f2 0%,#fbe9e7 100%);border:1px solid #f4d6d3;border-radius:18px;padding:16px 22px;margin:0;gap:22px;box-shadow:0 2px 10px rgba(194,44,39,.05);align-items:center;}
/* coupons: a compact left-aligned row that horizontally scrolls when there are
several rewards (capped width so the headline + button always keep their space;
scrollbar hidden like the category bar) */
body.fhero #redeemrules-desktop .redeemrules-left{flex:0 1 auto;max-width:46%;justify-content:flex-start;flex-wrap:nowrap;gap:10px;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;}
body.fhero #redeemrules-desktop .redeemrules-left::-webkit-scrollbar{display:none;}
body.fhero #redeemrules-desktop .redeemrule-card{flex:0 0 auto;width:84px;height:84px;border:1.5px dashed #ecbcb8;box-shadow:none;}
body.fhero #redeemrules-desktop .redeemrule-card:hover{transform:none;box-shadow:none;}
body.fhero #redeemrules-desktop .redeemrule-name{font-size:8px;min-height:22px;padding:4px 3px;}
body.fhero #redeemrules-desktop .redeemrule-dollar{font-size:18px;color:#c22c27;}
body.fhero #redeemrules-desktop .redeemrule-points{font-size:9px;}
/* drop the "locked" overlay — it made the reward look disabled */
body.fhero #redeemrules-desktop .redeemrule-overlay{display:none;}
/* right side fills the row: headline left-aligned, button pinned right */
body.fhero #redeemrules-desktop .redeemrules-right{flex:1 1 auto;flex-direction:row;align-items:center;justify-content:space-between;text-align:left;gap:18px;min-width:0;}
body.fhero #redeemrules-desktop .redeemrules-message{text-align:left;font-size:1.24rem;font-weight:800;letter-spacing:-.01em;line-height:1.3;color:#17171a;}
body.fhero #redeemrules-desktop .redeemrules-btn{flex:0 0 auto;background:#c22c27;border-radius:12px;height:46px;line-height:46px;padding:0 26px;font-weight:700;white-space:nowrap;box-shadow:0 6px 16px -6px rgba(194,44,39,.5);}
body.fhero #redeemrules-desktop .redeemrules-btn:hover{background:#a82420;}
/* ---- category pills: rounded chips (same as mobile). Base desktop rules render
tabs with a red underline; override to the pill look for "same UI". ---- */
body.fhero #category{border-radius:0;height:auto;padding:6px 4px;border-top:1px solid #eee;top:62px;}
body.fhero #category ul{align-items:center;}
body.fhero #category li.cat{height:36px;align-self:center;padding:0 16px;margin-left:8px;border-radius:100px;background:#f3f2f4 !important;color:#5f5f66;font-size:14px;font-weight:600;}
body.fhero #category li.cat:hover{background:#e9e8eb !important;}
body.fhero #category li.cat.on{background:#c22c27 !important;color:#fff;}
body.fhero #category li.cat.on:hover{background:#c22c27 !important;}
body.fhero #category li.cat.on::after{display:none;}
body.fhero #category li.cat:last-of-type{margin-right:8px;}
body.fhero #catham,body.fhero #slideLeft,body.fhero #slideRight{align-self:center;}
}
/* =========================================================================
fhero TABLET only (601-992): the >=601 block above is authored at desktop
scale; here we override for the narrower tablet column — single-column item
cards, a slimmer sidebar, a shorter hero, and a nav that fits.
========================================================================= */
@media only screen and (min-width:601px) and (max-width:992px){
/* category sticks below the 58px tablet nav */
body.fhero #main{margin-top:8px !important;padding-top:0 !important;}
body.fhero #category{top:58px;}
/* checkout stacks on tablet (a 70/30 split is too tight here): form, then the
cart/totals card below it — both full width */
body.fhero.payopen #pay,body.fhero.payopen #custom{flex:0 0 100% !important;max-width:100% !important;}
/* the action row is a fixed bottom bar <=992; with #po2 hidden that leaves a lone
"Edit Order" bar. Return it to in-flow — Place Order lives in the cart card. */
body.fhero.payopen #pay .row.pay-actions{position:static !important;top:auto !important;bottom:auto !important;left:auto;right:auto;transform:none !important;margin:8px 0 0 !important;padding:0 !important;background:transparent !important;border-top:none !important;box-shadow:none !important;}
body.fhero.payopen #pay .pay{padding-bottom:18px !important;}
/* single column of cards (two would be too narrow beside the sidebar) */
body.fhero #itemlist ul{grid-template-columns:1fr;}
/* slimmer cart sidebar */
body.fhero #custom{flex-basis:288px;}
/* shorter hero + smaller type */
body.fhero #mobhero{height:184px;margin:12px auto 4px;border-radius:20px;}
body.fhero #mobhero .ht{font-size:1.95rem;margin:0 0 9px;}
body.fhero #mobhero .hpill{font-size:.72rem;padding:4px 10px;}
body.fhero #mobhero .hc{left:24px;right:28px;}
/* keep the top-nav links compact so all fit on the white bar */
body.fhero .nav-wrapper{min-height:58px;}
body.fhero #nav li{font-size:.9rem;}
body.fhero #nav li a:not(.btn){height:58px;padding:0 9px;}
body.fhero #searchbar .search-wrapper{max-width:100%;}
body.fhero .nav-wrapper{display:flex !important;justify-content:flex-end;width:100% !important;}
body.fhero #nav{margin-left:auto;justify-content:flex-end;}
}
/* =========================================================================
fhero item/modifier modal on TABLET + DESKTOP (>=601px): same look as the
mobile fhero modal (photo header, hairline groups, pill/row modifier options,
pinned footer) but as a CENTERED DIALOG instead of a bottom sheet. The
modifier-MODE option styling (gsingle/gmulti/gpills/collapsible/image-rows) is
shared with mobile (its @media was widened to all screens above); here we set
the frame + container at desktop scale and NEUTRALIZE the legacy desktop modal
chrome (sticky title bar ~993, sticky action bar ~955, image-option CARD tiles
~1021). Scoped body.fhero + :has(#pop|#fancyA); mobile (<=600) frame + classic
theme untouched.
========================================================================= */
@media only screen and (min-width:601px){
/* centered dialog container — overrides base .modal{max-width:750px} (@361) and
#msg{transform:translateY(-8%)} (@722) */
body.fhero #msg.modal:has(#pop),body.fhero #msg.modal:has(#fancyA){width:92%;max-width:462px;height:auto !important;max-height:88vh !important;top:50% !important;transform:translateY(-50%) !important;border-radius:24px;overflow:hidden;}
body.fhero #msg.modal:has(#pop) .modal-content,body.fhero #msg.modal:has(#fancyA) .modal-content{height:auto;max-height:88vh;display:flex;flex-direction:column;padding:0;overflow:hidden;}
body.fhero #msg:has(#pop) #pop{flex:1 1 auto;min-height:0;height:auto;overflow-y:auto;position:relative;display:flex;flex-direction:column;padding:0 0 10px;}
body.fhero #msg.modal:has(#fancyA) .modal-content{overflow-y:auto;}
/* photo header (full-bleed top) */
body.fhero #pop .center,body.fhero #msg.modal:has(#fancyA) .modal-content>.center{order:-1;margin:0;flex:0 0 auto;}
body.fhero #pop .popimg,body.fhero #pop img.popimg,body.fhero #msg:has(#fancyA) img.msgimg{display:block;width:100%;height:auto;margin:0;border-radius:0;object-fit:contain;background-color:#f7f7f8;}
/* title + floating round close (supersedes the legacy sticky title bar #pop h5) */
body.fhero #pop h5,body.fhero #msg:has(#fancyA) .modal-content>h5{position:static;margin:0;padding:16px 20px 0;border-bottom:none;background:none;font-size:1.28rem;line-height:1.25;letter-spacing:-.02em;}
body.fhero #pop h5 b,body.fhero #msg:has(#fancyA) .modal-content>h5 b{font-weight:800;}
body.fhero #pop h5 .fancyclose,body.fhero #msg:has(#fancyA) .modal-content>.fancyclose{position:absolute;top:12px;right:12px;transform:none;z-index:3;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.94);box-shadow:0 2px 7px rgba(0,0,0,.22);display:flex;align-items:center;justify-content:center;color:#333;}
body.fhero #pop h5 .fancyclose .material-icons,body.fhero #msg:has(#fancyA) .modal-content>.fancyclose .material-icons{font-size:22px;}
body.fhero #pop .desc,body.fhero #msg:has(#fancyA) .modal-content>.desc{padding:6px 20px 0;color:#77777e;font-size:.9rem;line-height:1.45;}
/* modifier group frame + REQUIRED chip (the option-mode styling is shared/all-width) */
body.fhero #pop .group{margin:16px 0 0;padding:16px 20px 0;border-top:1px solid #f1f0f2;}
body.fhero #pop .group>b{font-size:.98rem;font-weight:700;}
body.fhero #pop .group>b .minmax{font-size:.62rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#c22c27;background:#fbe6e3;padding:2px 7px;border-radius:5px;margin-left:6px;white-space:nowrap;}
/* default (unclassified / photo-card gimg) option frame */
body.fhero #pop .group .option{border:1px solid #e6e5e8;border-radius:12px;min-height:56px;font-size:.92rem;}
body.fhero #pop .option.checked{background:#fdf3f2;border:2px solid #c22c27;}
/* special-request box */
body.fhero #msg:has(#pop) #sp,body.fhero #msg:has(#fancyA) #sp{display:flex;align-items:center;flex:0 0 auto;height:44px;min-height:44px;margin:12px 20px 14px;padding:0 12px;border:1px solid #e0e0e4;border-radius:11px;background:#f2f2f4;font-size:.88rem;color:#9a9aa0;}
body.fhero #msg:has(#pop) #sp input,body.fhero #msg:has(#fancyA) #sp input{border-bottom:none !important;box-shadow:none !important;margin:0;height:42px;font-size:.92rem;color:#17171a;background:transparent;}
body.fhero #msg:has(#pop) #sp input::placeholder,body.fhero #msg:has(#fancyA) #sp input::placeholder{color:#9a9aa0;opacity:1;}
body.fhero #msg.modal:has(#pop) .modal-content>hr,body.fhero #msg.modal:has(#fancyA) .modal-content>hr{display:none;}
/* pinned footer (supersedes the legacy sticky action bar @955) */
body.fhero #msg .row:has(#popA),body.fhero #msg .row:has(#fancyA){position:static !important;flex:0 0 auto;display:flex !important;align-items:center;gap:12px;margin:0 !important;padding:14px 20px 18px;border-top:1px solid #f0eff1;background:#fff;}
body.fhero #msg .row:has(#popA) .edit-quantity,body.fhero #msg .row:has(#fancyA) .edit-quantity{border:1px solid #e6e5e8;border-radius:100px;padding:5px 8px;gap:2px;align-items:center;margin-bottom:0;flex:0 0 auto;}
body.fhero #popM,body.fhero #popP,body.fhero #fancyM,body.fhero #fancyP{justify-content:center;}
body.fhero #popM .material-icons,body.fhero #popP .material-icons,body.fhero #fancyM .material-icons,body.fhero #fancyP .material-icons{font-size:22px;}
body.fhero #popq,body.fhero #fancyq{margin:0 7px;font-weight:700;line-height:1;}
body.fhero #popA,body.fhero #fancyA{flex:1 1 auto;width:auto;border-radius:13px;padding:14px 16px;font-weight:700;box-shadow:0 8px 20px -8px rgba(194,44,39,.5);display:flex;justify-content:space-between;align-items:center;text-align:left;text-transform:none;}
body.fhero #popA .abp,body.fhero #fancyA .abp,body.fhero #nestedpopA .abp{font-variant-numeric:tabular-nums;}
/* nested-modifier modal button matches (base #nestedpopA differs) */
body.fhero #nestedpopA{width:100%;display:flex;justify-content:space-between;align-items:center;text-align:left;text-transform:none;border-radius:13px;padding:14px 16px;font-weight:700;color:#fff;background:#c22c27;box-shadow:0 8px 20px -8px rgba(194,44,39,.5);box-sizing:border-box;}
}
/* desktop-only: the search bar floats to the right, half the previous length */
@media only screen and (min-width:993px){
body.fhero #searchbar{text-align:right;}
body.fhero #searchbar .search-wrapper{max-width:280px;}
}
/* --- mobile loyalty banner (top-level, NOT nested in the >=601 block): same soft
red-tint reward-strip treatment (was a grey box with a locked coupon + centered
text). Coupon(s) scroll horizontally so any number displays; message + button
stacked left-aligned. #searchbar-banner-wrapper is only visible <=600. --- */
@media only screen and (max-width:600px){
body.fhero #searchbar-banner-wrapper #redeemrules-banner{background:linear-gradient(135deg,#fdf3f2 0%,#fbe9e7 100%);border:1px solid #f4d6d3;box-shadow:0 2px 10px rgba(194,44,39,.05);padding:12px 14px;gap:12px;align-items:center;}
body.fhero #searchbar-banner-wrapper .redeemrules-left{flex:0 1 auto;max-width:42%;justify-content:flex-start;flex-wrap:nowrap;gap:8px;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;}
body.fhero #searchbar-banner-wrapper .redeemrules-left::-webkit-scrollbar{display:none;}
body.fhero #searchbar-banner-wrapper .redeemrule-card{flex:0 0 auto;border:1.5px dashed #ecbcb8;box-shadow:none;}
/* show every reward (they scroll) instead of the old nth-child(n+3) hide */
body.fhero #searchbar-banner-wrapper .redeemrule-card:nth-child(n+3){display:flex;}
body.fhero #searchbar-banner-wrapper .redeemrule-dollar{color:#c22c27;}
body.fhero #searchbar-banner-wrapper .redeemrule-overlay{display:none;}
body.fhero #searchbar-banner-wrapper .redeemrules-right{flex:1 1 auto;flex-direction:column;align-items:flex-start;justify-content:center;text-align:left;gap:10px;min-width:0;}
body.fhero #searchbar-banner-wrapper .redeemrules-message{text-align:left;font-size:.95rem;font-weight:800;line-height:1.3;color:#17171a;}
body.fhero #searchbar-banner-wrapper .redeemrules-btn{background:#c22c27;border-radius:10px;height:36px;line-height:36px;padding:0 18px;font-size:.8rem;font-weight:700;box-shadow:0 6px 16px -6px rgba(194,44,39,.5);}
}
/* =========================================================================
favorite.php — render #item.favor favorites with the same fhero item-card look
as the menu (#itemlist). Same .item / b.n / b.p / p / img / "+" anatomy, so it
drops in: 2-col bordered card grid on desktop, 1-col on tablet, hairline rows on
mobile. Taps open the (already-fhero) item modal.
========================================================================= */
body.fhero #item.favor h5{font-size:1.35rem;font-weight:800;letter-spacing:-.02em;padding:8px 6px 14px;margin:0;text-align:left;}
body.fhero #item.favor #lihead{display:none;}
@media only screen and (min-width:601px){
body.fhero #item.favor .item{padding:0;}
body.fhero #item.favor #history{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:6px 3px;margin:0;overflow:visible;}
body.fhero #item.favor #history li.item{position:relative;display:grid;grid-template-columns:1fr 84px;grid-template-rows:auto minmax(34px,auto) auto;column-gap:14px;row-gap:0;width:auto;height:auto;min-height:114px;margin:0;padding:16px;border:1px solid #ececee;border-radius:16px;background:#fff;box-shadow:none;overflow:visible;cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .15s;}
body.fhero #item.favor #history li.item:hover{border-color:#e0dfe2;box-shadow:0 6px 20px rgba(20,14,6,.10);transform:translateY(-1px);}
body.fhero #item.favor #history li.item b.n{position:static;grid-column:1;grid-row:1;left:auto;right:auto;top:auto;width:auto;max-height:none;font-size:15px;font-weight:600;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
body.fhero #item.favor #history li.item p{position:static;grid-column:1;grid-row:2;left:auto;top:auto;width:auto;height:auto;max-height:2.9em;margin:6px 0 11px;padding:0;font-family:inherit;font-size:13px;color:#77777e;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
body.fhero #item.favor #history li.item b.p{position:static;grid-column:1;grid-row:3;align-self:end;left:auto;bottom:auto;font-size:13px;font-weight:600;color:#17171a;font-variant-numeric:tabular-nums;}
body.fhero #item.favor #history li.item img{position:static;grid-column:2;grid-row:1/4;align-self:start;justify-self:end;width:84px;height:84px;border-radius:13px;background-color:#f2f1f3;background-size:cover;background-repeat:no-repeat;background-position:center center;}
body.fhero #item.favor #history li.item.noimg img{display:none;}
body.fhero #item.favor #history li.item:not(.img) p{width:auto;}
body.fhero #item.favor #history li.item:after{content:'+';position:absolute;bottom:14px;right:14px;width:30px;height:30px;line-height:28px;text-align:center;border-radius:50%;background:#fff;color:#c22c27;border:1px solid #ececee;box-shadow:0 3px 8px rgba(20,14,6,.16);font-size:20px;font-weight:700;box-sizing:border-box;}
}
@media only screen and (min-width:601px) and (max-width:992px){
body.fhero #item.favor #history{grid-template-columns:1fr;}
}
@media only screen and (max-width:600px){
body.fhero #item.favor .item{padding:0 4px;}
body.fhero #item.favor #history{display:block;padding:0;margin:0;overflow:visible;}
body.fhero #item.favor #history li.item{position:relative;display:grid;grid-template-columns:1fr 82px;grid-template-rows:auto minmax(35px,auto) auto;column-gap:12px;width:auto;height:auto;min-height:110px;margin:0 12px;padding:14px 0;border:none;border-bottom:1px solid #f0eff1;border-radius:0;box-shadow:none;background:transparent;overflow:visible;}
body.fhero #item.favor #history li.item:last-child{border-bottom:none;}
body.fhero #item.favor #history li.item b.n{position:static;grid-column:1;grid-row:1;width:auto;left:auto;right:auto;top:auto;font-size:15px;font-weight:600;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
body.fhero #item.favor #history li.item p{position:static;grid-column:1;grid-row:2;width:auto;height:auto;left:auto;top:auto;max-height:2.9em;margin:6px 0 11px;padding:0;font-family:inherit;font-size:13px;color:#77777e;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
body.fhero #item.favor #history li.item b.p{position:static;grid-column:1;grid-row:3;align-self:end;left:auto;bottom:auto;font-size:13px;font-weight:600;color:#17171a;}
body.fhero #item.favor #history li.item img{position:static;grid-column:2;grid-row:1/4;align-self:start;justify-self:end;width:82px;height:82px;border-radius:13px;background-color:#f2f1f3;background-size:cover;background-repeat:no-repeat;background-position:center;}
body.fhero #item.favor #history li.item.noimg img{display:none;}
body.fhero #item.favor #history li.item:after{content:'+';position:absolute;top:50%;transform:translateY(-50%);right:8px;width:30px;height:30px;line-height:28px;text-align:center;border-radius:50%;background:#fff;color:#c22c27;border:1px solid #ececee;box-shadow:0 3px 8px rgba(20,14,6,.16);font-size:20px;font-weight:700;box-sizing:border-box;}
}
/* shared empty-state card for favorite.php / orders.php lists */
body.fhero .list-empty{display:flex;flex-direction:column;align-items:center;text-align:center;padding:56px 24px;color:#667085;}
body.fhero .list-empty-icon{display:flex;width:72px;height:72px;margin:0 auto 16px;background:#fdf3f2;border-radius:99px;align-items:center;justify-content:center;color:#c22c27;}
body.fhero .list-empty-icon svg{width:34px;height:34px;}
body.fhero .list-empty b{display:block;color:#17171a;font-size:1.15rem;font-weight:700;margin-bottom:4px;}
body.fhero .list-empty span{font-size:.92rem;line-height:1.5;max-width:320px;}
body.fhero .list-empty-btn{display:inline-block;margin-top:18px;background:#c22c27;color:#fff;border-radius:12px;height:44px;line-height:44px;padding:0 24px;font-weight:700;box-shadow:0 6px 16px -6px rgba(194,44,39,.5);}
body.fhero .list-empty-btn:hover{background:#a82420;color:#fff;}
/* favorite.php / orders.php reserve .row.head min-height:356px on mobile for the
classic #topBG hero — fhero hides #topBG, so drop the reserve (else a big empty
gap above the content). The menu page has no such reserve. */
@media only screen and (max-width:600px){
body.fhero .row.head{min-height:0 !important;height:auto !important;}
}
/* =========================================================================
orders.php — order-history cards + "Old Order Details" modal (fhero). Row
markup li[data-o][data-sr] (.date/.count/.detail + JS-added .ototal/.reorder-btn)
restyled into cards; the #msg:has(#olist) modal becomes a centered dialog.
Two-column with the cart sidebar (like the menu).
========================================================================= */
body.fhero #oos{order:2;}
@media only screen and (min-width:601px){ body.fhero #oos{flex:1 1 0;min-width:0;} }
body.fhero #oos .oos{background:transparent !important;padding:0 !important;margin:0 !important;height:auto !important;}
body.fhero #oos .oos>h5{font-size:1.35rem;font-weight:800;letter-spacing:-.02em;padding:8px 6px 14px;margin:0;text-align:left;}
body.fhero #oos #lihead{display:none !important;}
body.fhero #oos #history{display:flex;flex-direction:column;gap:12px;padding:6px 3px 48px;margin:0;overflow:visible;list-style:none;height:auto;}
body.fhero #oos #history li{position:relative;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto auto;column-gap:12px;row-gap:3px;height:auto;line-height:1.3;margin:0;padding:16px 18px;border:1px solid #ececee;border-radius:16px;background:#fff !important;cursor:pointer;list-style:none;box-shadow:none;transition:border-color .15s,box-shadow .15s,transform .15s;}
body.fhero #oos #history li:hover{background:#fff !important;border-color:#e0dfe2;box-shadow:0 6px 20px rgba(20,14,6,.10);transform:translateY(-1px);}
body.fhero #oos #history li.on{border-color:#c22c27;}
body.fhero #oos #history li>b,body.fhero #oos #history li>a{position:static;width:auto;height:auto;float:none;}
body.fhero #oos #history li .date{grid-column:1;grid-row:1;font-weight:700;font-size:.95rem;color:#17171a;white-space:nowrap;}
body.fhero #oos #history li .ototal{grid-column:2;grid-row:1;justify-self:end;font-weight:800;font-size:1rem;color:#17171a;font-variant-numeric:tabular-nums;}
body.fhero #oos #history li .count{grid-column:1;grid-row:2;font-size:.78rem;font-weight:700;color:#c22c27;}
body.fhero #oos #history li .count:after{content:' items';font-weight:600;color:#9a9aa0;}
body.fhero #oos #history li .detail{grid-column:1;grid-row:3;margin-top:3px;font-size:.85rem;font-weight:400;color:#77777e;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
body.fhero #oos #history li .reorder-btn{grid-column:2;grid-row:2/4;align-self:end;justify-self:end;display:inline-flex;align-items:center;gap:2px;background:#c22c27;color:#fff;border-radius:10px;height:38px;padding:0 15px;font-size:.84rem;font-weight:700;white-space:nowrap;box-shadow:0 5px 14px -6px rgba(194,44,39,.5);transition:background .15s;}
body.fhero #oos #history li .reorder-btn:hover{background:#a82420;}
/* order detail modal → centered fhero dialog */
body.fhero #msg.modal:has(#olist){width:92%;max-width:440px;height:auto !important;max-height:86vh !important;top:50% !important;transform:translateY(-50%) !important;border-radius:24px;overflow:hidden;}
body.fhero #msg.modal:has(#olist) .modal-content{display:flex;flex-direction:column;padding:0;max-height:86vh;}
body.fhero #msg:has(#olist) h5{position:static;flex:0 0 auto;margin:0;padding:18px 20px 14px;font-size:1.2rem;font-weight:800;letter-spacing:-.02em;color:#17171a;border-bottom:1px solid #f0eff1;background:none;}
body.fhero #msg:has(#olist) .fancyclose{position:absolute;top:12px;right:12px;transform:none;width:34px;height:34px;border-radius:50%;background:#f2f2f4;display:flex;align-items:center;justify-content:center;color:#333;z-index:3;}
body.fhero #msg:has(#olist) .fancyclose .material-icons{font-size:22px;}
body.fhero #msg #olist{flex:1 1 auto;min-height:0;overflow-y:auto;padding:6px 20px 4px;}
body.fhero #msg #olist .row{display:flex !important;align-items:flex-start;margin:0 !important;padding:11px 0;border-top:1px solid #f4f3f5;}
body.fhero #msg #olist .row:first-child{border-top:none;}
body.fhero #msg #olist .row>b,body.fhero #msg #olist .row>div{position:static;float:none;padding:0 !important;margin:0;}
body.fhero #msg #olist .row .q{flex:0 0 auto;width:auto !important;min-width:20px;font-weight:700;color:#17171a;text-align:left;}
body.fhero #msg #olist .row .q:after{content:'\00d7';color:#9a9aa0;margin:0 3px 0 1px;}
body.fhero #msg #olist .row .n{flex:1 1 auto;width:auto !important;padding:0 10px !important;font-size:.9rem;color:#17171a;line-height:1.35;text-align:left;}
body.fhero #msg #olist .row .n .c{display:block;font-size:.72rem;color:#9a9aa0;text-transform:uppercase;letter-spacing:.03em;}
body.fhero #msg #olist .row .n .cnote{display:block;font-size:.78rem;color:#77777e;font-style:italic;}
body.fhero #msg #olist .row .p{flex:0 0 auto;width:auto !important;font-weight:700;color:#17171a;font-variant-numeric:tabular-nums;text-align:right;}
body.fhero #msg #olist .row .p:before{content:'$';font-weight:700;}
body.fhero #msg #olist .row.na{opacity:.6;}
body.fhero #msg:has(#olist) .center-align{flex:0 0 auto;padding:12px 20px calc(16px + env(safe-area-inset-bottom));border-top:1px solid #f0eff1;margin:0;}
body.fhero #msg #oadd{display:flex;align-items:center;justify-content:center;width:100%;background:#c22c27;color:#fff;border-radius:13px;height:50px;font-weight:700;font-size:.98rem;box-shadow:0 8px 20px -8px rgba(194,44,39,.5);}
body.fhero #msg #oadd:hover{background:#a82420;}
/* =========================================================================
About page (gallery.php) — fhero redesign. Section IDs (#about-sec,
#hours-sec, #location-sec, #map-sec, #gallery-sec) + .sects/.thumb/
.about-gmap exist ONLY on this page → auto-scoped; #main changes gated
with :has(#about-sec). Same markup/JS. Cards on grey, Inter, #c22c27.
========================================================================= */
body.fhero:has(#about-sec){background:#f4f4f6;}
body.fhero #main:has(#about-sec){max-width:1120px;margin-left:auto;margin-right:auto;padding-bottom:56px;}
@media only screen and (min-width:601px){
body.fhero #main:has(#about-sec){display:flex;flex-wrap:wrap;gap:20px;align-items:stretch;}
body.fhero #main:has(#about-sec) > .sects{margin:0 !important;}
body.fhero #about-sec,body.fhero #gallery-sec{flex:1 1 100%;}
body.fhero #hours-sec,body.fhero #location-sec,body.fhero #map-sec{flex:1 1 calc(33.333% - 14px);min-width:0;}
}
/* card shell */
body.fhero .sects{background:#fff;border:1px solid #ececee;border-radius:20px;padding:26px 28px !important;margin:0 0 20px !important;box-shadow:0 6px 24px rgba(20,14,6,.05);box-sizing:border-box;}
/* overline + heading */
body.fhero .sects h5{color:#c22c27 !important;font-size:.72rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;margin:0 0 6px;}
body.fhero .sects h4{font-weight:800;letter-spacing:-.02em;color:#17171a;font-size:1.4rem;margin:0 0 16px;line-height:1.15;}
/* story text */
body.fhero #about-sec p{color:#4b5563;font-size:.98rem;line-height:1.75;margin:0;max-width:none;}
body.fhero #about-sec hr,body.fhero #gallery-sec hr{display:none !important;}
/* hours */
body.fhero #abouthour{text-align:start;}
body.fhero #abouthour pre{font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-size:.9rem;line-height:1.95;color:#3a3a40;float:none;margin:0;white-space:pre-wrap;}
/* location + phone button */
body.fhero #location-sec{color:#4b5563;font-size:.98rem;line-height:1.6;}
body.fhero #about-phone{display:flex;width:fit-content;align-items:center;gap:8px;padding:11px 20px !important;background:#c22c27;color:#fff !important;border-radius:12px;margin:18px 0 0 !important;font-weight:600;box-shadow:0 8px 20px -8px rgba(194,44,39,.5);transition:background .15s;}
body.fhero #about-phone:hover{background:#a82420;}
body.fhero #about-phone i{position:static !important;left:auto !important;}
body.fhero #about-phone a{color:#fff !important;display:inline-flex;align-items:center;gap:8px;}
/* map */
body.fhero #map-sec{height:auto !important;}
body.fhero #map-sec > .col{padding:0 !important;width:100% !important;height:100%;}
body.fhero .about-gmap{height:100% !important;min-height:220px;border:1px solid #ececee !important;border-radius:14px !important;box-shadow:none !important;margin:0 !important;}
/* gallery grid */
body.fhero #gallery-sec{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
body.fhero #gallery-sec h5,body.fhero #gallery-sec h4{grid-column:1 / -1;}
body.fhero #gallery-sec > .col{padding:0 !important;width:auto !important;margin:0 !important;float:none !important;}
body.fhero .thumb,body.fhero .thumblogo,body.fhero .thumbqr{border-radius:14px;box-shadow:0 2px 10px rgba(20,14,6,.08);margin:0 !important;height:170px;}
@media only screen and (min-width:601px) and (max-width:992px){
body.fhero #gallery-sec{grid-template-columns:repeat(3,1fr);}
}
@media only screen and (max-width:600px){
body.fhero .sects{padding:20px 18px !important;margin:0 0 16px !important;}
body.fhero .sects h4{font-size:1.25rem;}
body.fhero #gallery-sec{grid-template-columns:repeat(2,1fr);}
body.fhero .thumb,body.fhero .thumblogo,body.fhero .thumbqr{height:150px;}
}
/* About page — mobile edge inset for the cards (was flush to the viewport) */
@media only screen and (max-width:600px){
body.fhero #main:has(#about-sec){padding-left:16px !important;padding-right:16px !important;box-sizing:border-box;}
}
/* About page — store hours as clean day/time rows (JS replaces the ) */
body.fhero #abouthour{text-align:left !important;}
body.fhero .hours-list{display:flex;flex-direction:column;margin-top:2px;}
body.fhero .hrow{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:9px 2px;border-top:1px solid #f2f1f3;font-size:.93rem;line-height:1.2;}
body.fhero .hrow:first-child{border-top:none;}
body.fhero .hday{font-weight:700;color:#17171a;}
body.fhero .htime{color:#4b5563;font-variant-numeric:tabular-nums;white-space:nowrap;}
body.fhero .htime.hclosed{color:#9a9aa0;font-weight:600;}
body.fhero .hrow.htoday{background:#fdf3f2;border-radius:10px;border-top-color:transparent;margin:2px 0;padding:9px 12px;}
body.fhero .hrow.htoday + .hrow{border-top-color:transparent;}
body.fhero .hrow.htoday .hday{color:#c22c27;}
body.fhero .hrow.htoday .hday:after{content:' · Today';font-weight:600;font-size:.78rem;letter-spacing:.02em;}
body.fhero .hrow.htoday .htime{color:#c22c27;font-weight:700;}
/* fhero order-type pills: when the pill offers future scheduling it carries a
clock (absent for ASAP-only types). The segmented design hides that ,
so surface a small clock before the time sublabel as a "tap to schedule"
affordance — gated by :has(i) so it only appears when scheduling is offered. */
body.fhero .cartseg #pickup:has(i):after,
body.fhero .cartseg #delivery:has(i):after{
display:block !important; /* override #pickup[v='']:after{display:none} so the cue shows before a time is picked */
content:attr(data-lbl) !important;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23c22c27' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5V12l3 1.8'/%3E%3C/svg%3E") no-repeat left center;
background-size:11px 11px;
padding-left:15px;
}
/* off (unselected) pill: mute the clock to grey to match the greyed sublabel */
body.fhero .cartseg #pickup.off:has(i):after,
body.fhero .cartseg #delivery.off:has(i):after{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%239a9aa2' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5V12l3 1.8'/%3E%3C/svg%3E");
}
/* mobile #orderbar: mirror the clock cue on the active, schedulable segment
(segSync adds .sched when the matching pill carries the clock ). */
body.fhero #orderbar button.sched.on .segsub{
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23c22c27' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5V12l3 1.8'/%3E%3C/svg%3E") no-repeat left center;
background-size:11px 11px;
padding-left:15px;
}
/* =========================================================================
Payment method selector → full-width rows with icon + radio (fhero).
Restyles the .p toggle links (#pcard "By card", #pgift "Gift card",
#pcash "At store") — CSS only, no markup change, so it covers every
server-side payment variant. Excluded: wallet buttons (#pgoogle/#papple) and
the authnet AcceptUI proxy #authnetpay (kept display:none — its visible label
is #pcardauth, which DOES get the row + card icon). .hide buttons stay hidden.
Card icon covers #pcard (cardconnect/trx/teconnect) AND #pcardauth (authnet).
========================================================================= */
#pay a.p.btn-flat:not(#pgoogle):not(#papple):not(#authnetpay):not(.hide){
display:flex !important; align-items:center; gap:12px;
width:100%; box-sizing:border-box; float:none;
margin:0 0 10px !important; padding:14px 46px 14px 16px !important;
min-height:56px; height:auto; line-height:1.2;
border:1.5px solid #e6e5e8 !important; border-radius:14px !important;
background:#fff !important; color:#17171a !important;
font-weight:600; text-align:left !important; text-transform:capitalize !important;
position:relative; transition:border-color .15s,background .15s,color .15s;
}
#pay a.p.btn-flat:not(#pgoogle):not(#papple):not(#authnetpay):not(.hide):hover{
border-color:#d5d5da !important; background:#fcfcfd !important;
}
/* left icon (mask so it recolors with the row) */
#pay a.p#pcard::before,#pay a.p#pcardauth::before,#pay a.p#pgift::before,#pay a.p#pcash::before{
content:''; flex:0 0 22px; width:22px; height:22px; background-color:#77777e;
-webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
-webkit-mask-position:center; mask-position:center;
-webkit-mask-size:contain; mask-size:contain;
}
#pay a.p#pcard::before,#pay a.p#pcardauth::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M2 10h20'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M2 10h20'/%3E%3C/svg%3E");}
#pay a.p#pgift::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12v8a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-8'/%3E%3Crect x='2' y='7' width='20' height='5' rx='1'/%3E%3Cpath d='M12 7v14'/%3E%3Cpath d='M7.5 7a2.5 2.5 0 0 1 0-5C10 2 12 7 12 7s2-5 4.5-5a2.5 2.5 0 0 1 0 5'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12v8a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-8'/%3E%3Crect x='2' y='7' width='20' height='5' rx='1'/%3E%3Cpath d='M12 7v14'/%3E%3Cpath d='M7.5 7a2.5 2.5 0 0 1 0-5C10 2 12 7 12 7s2-5 4.5-5a2.5 2.5 0 0 1 0 5'/%3E%3C/svg%3E");}
#pay a.p#pcash::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l1.5-5h15L21 9'/%3E%3Cpath d='M4 9v10a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V9'/%3E%3Cpath d='M3 9h18'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l1.5-5h15L21 9'/%3E%3Cpath d='M4 9v10a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V9'/%3E%3Cpath d='M3 9h18'/%3E%3C/svg%3E");}
/* right radio */
#pay a.p.btn-flat:not(#pgoogle):not(#papple):not(#authnetpay):not(.hide)::after{
content:''; position:absolute; right:16px; top:50%; transform:translateY(-50%);
width:20px; height:20px; border-radius:50%; border:2px solid #cfcfd4; box-sizing:border-box; background:#fff;
}
/* selected row */
#pay a.p.on.btn-flat:not(#pgoogle):not(#papple):not(#authnetpay):not(.hide){
background:#fdf3f2 !important; border-color:#c22c27 !important; color:#c22c27 !important;
}
#pay a.p.on#pcard::before,#pay a.p.on#pcardauth::before,#pay a.p.on#pgift::before,#pay a.p.on#pcash::before{background-color:#c22c27;}
#pay a.p.on.btn-flat:not(#pgoogle):not(#papple):not(#authnetpay):not(.hide)::after{
border-color:#c22c27; background:#c22c27; box-shadow:inset 0 0 0 3px #fff;
}
/* fhero: card-number / gift-card inputs as an accordion panel that opens right
under their payment row (menu.js moves #cardrow after #pcard, #gcardrow after
#pgift). Snug under the button; the existing slideUp/slideDown still animates. */
body.fhero #pay #cardrow, body.fhero #pay #gcardrow{
margin:-4px 0 12px !important; padding:14px 16px !important;
background:#faf9fb; border:1px solid #ececee; border-radius:14px; text-align:left; box-sizing:border-box;
}
body.fhero #pay #cardrow label, body.fhero #pay #gcardrow label{ font-size:.78rem; font-weight:600; color:#4b5563; margin-bottom:5px; }
body.fhero #pay #cardrow input, body.fhero #pay #gcardrow input{
border:1px solid #e6e5e8 !important; border-radius:10px !important; height:44px !important;
padding:0 12px !important; box-sizing:border-box; background:#fff !important; margin:0 !important;
}
body.fhero #pay #cardrow input:focus, body.fhero #pay #gcardrow input:focus{ border-color:#c22c27 !important; box-shadow:0 0 0 3px rgba(194,44,39,.13) !important; }
/* the CardConnect tokenizer iframe already renders its own bordered input */
body.fhero #pay #cardrow iframe#tokenframe{ display:block; width:100%; }
/* #pcash icon: cash note when the label reads "By Cash" (delivery); storefront otherwise */
body.fhero #pay a.p#pcash.paycash::before{
-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='6' width='20' height='12' rx='2'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Cpath d='M6 12h.01M18 12h.01'/%3E%3C/svg%3E");
mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='6' width='20' height='12' rx='2'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Cpath d='M6 12h.01M18 12h.01'/%3E%3C/svg%3E");
}
/* fhero mobile: when the loyalty banner is absent (#redeemrules-banner not
rendered), the pickup/delivery picker's drop shadow sits right on the
category bar's top edge. Push the whole bar down (margin, not padding, so the
pills stay centred between the bar's top/bottom borders) to clear the shadow.
Only when the banner is missing (it provides the gap otherwise). */
@media only screen and (max-width:600px){
body.fhero:not(:has(#redeemrules-banner)) #category{ margin-top:14px !important; }
}
/* fhero: don't flip the card/gift accordion labels to aggressive red just because
the field is empty/incomplete (#pay .error{color:#f00}). Keep them neutral —
checkout stays disabled until valid, so the red text isn't needed as the cue. */
body.fhero #pay #gcardrow label.error, body.fhero #pay #cardrow label.error{ color:#4b5563 !important; font-weight:600 !important; }
/* fhero mobile: the category bar is display:block with a fixed height, so the
inline-block pills sit flush against the (new) top border. Auto-height + even
vertical padding centres them between the top/bottom borders (matches desktop). */
@media only screen and (max-width:600px){
body.fhero #category{ height:auto !important; padding-top:8px !important; padding-bottom:8px !important; }
}
/* hero social chips (map.inc emits .hsoc only when the store configured
fbLink/instLink/yelpLink): frosted circular buttons pinned to the hero's
bottom-right, matching the .hpill glass treatment. */
body.fhero #mobhero .hsoc{position:absolute;right:16px;bottom:12px;display:flex;gap:8px;z-index:3;line-height:0;} /* right edge matches .hc (store name + pills) */
body.fhero #mobhero .hsoc-a{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.38);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;color:#fff;transition:background .15s,transform .15s;}
body.fhero #mobhero .hsoc-a:hover{background:rgba(255,255,255,.32);transform:translateY(-1px);}
body.fhero #mobhero .hsoc-a svg{width:15px;height:15px;}
@media only screen and (max-width:600px){
body.fhero #mobhero{height:228px;}
body.fhero #mobhero .hsoc{top:auto;bottom:12px;}
body.fhero:has(#orderbar) #mobhero .hc{bottom:80px;}
body.fhero:has(#orderbar) #mobhero .hsoc{bottom:32px;}
}
@media only screen and (min-width:601px){
body.fhero #mobhero .hsoc{right:44px;bottom:14px;gap:10px;} /* matches desktop .hc right edge */
body.fhero #mobhero .hsoc-a{width:36px;height:36px;}
body.fhero #mobhero .hsoc-a svg{width:17px;height:17px;}
}
@media only screen and (min-width:601px) and (max-width:992px){
body.fhero #mobhero .hsoc{right:28px;} /* matches tablet .hc right edge */
}
/* Shared payment error dialogs returned from ajaxPo/ajaxVo. */
#msg.modal:has(.pmerr){top:50% !important;transform:translateY(-50%) !important;width:min(430px,calc(100vw - 24px)) !important;max-width:430px;border-radius:18px;overflow:hidden;box-shadow:0 18px 45px rgba(17,24,39,.22);}
#msg.modal:has(.pmerr) .modal-content{height:auto !important;padding:0 !important;overflow:visible;}
.pmerr{position:relative;padding:30px 24px 24px;text-align:center;background:var(--kp-surface,#fff);font-family:Inter,Segoe UI,Roboto,-apple-system,BlinkMacSystemFont,sans-serif;color:var(--kp-ink,#17171a);}
.pmerr-x{position:absolute;right:12px;top:12px;width:34px;height:34px;border:0;border-radius:50%;background:var(--kp-surface-2,#f2f2f4);color:var(--kp-ink-2,#5f5f66);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;}
.pmerr-x i{font-size:20px;line-height:1;}
.pmerr-icon{width:58px;height:58px;margin:0 auto 16px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--kp-red-soft,#fdeceb);color:var(--kp-red,#c22c27);}
.pmerr-icon i{font-size:30px;line-height:1;}
.pmerr-title{margin:0 0 8px;font-size:1.25rem;line-height:1.25;font-weight:850;letter-spacing:0;color:var(--kp-ink,#17171a);}
.pmerr-message{margin:0 auto 10px;max-width:340px;color:var(--kp-ink-2,#5f5f66);font-size:.95rem;line-height:1.45;}
.pmerr-sub{margin:0 auto 20px;max-width:340px;color:var(--kp-ink-3,#8a8a90);font-size:.85rem;line-height:1.45;}
.pmerr-detail{margin:12px auto 14px;padding:12px 14px;border-radius:12px;background:var(--kp-surface-2,#f7f7f8);border:1px solid var(--kp-line,#eceef2);color:var(--kp-ink,#17171a);font-weight:800;}
.pmerr-detail #qrTD{display:block;font-size:2rem;color:var(--kp-red,#c22c27);font-weight:900;letter-spacing:0;margin-top:4px;}
.pmerr-btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;border:0;border-radius:13px;background:var(--kp-red,#c22c27);color:#fff;font-family:inherit;font-size:.98rem;font-weight:800;cursor:pointer;box-shadow:0 8px 20px -8px rgba(194,44,39,.5);}
.pmerr-btn:hover{background:var(--kp-red-dark,#a82420);color:#fff;}
@media only screen and (max-width:600px){#msg.modal:has(.pmerr){width:calc(100vw - 24px) !important;border-radius:18px;}.pmerr{padding:28px 20px 22px;}}
/* Processing dialog (showProcessing): same shell as .pmerr, centered both axes */
#msg.modal:has(.pmproc){top:50% !important;transform:translateY(-50%) !important;width:min(340px,calc(100vw - 48px)) !important;max-width:340px;border-radius:18px;overflow:hidden;box-shadow:0 18px 45px rgba(17,24,39,.22);}
#msg.modal:has(.pmproc) .modal-content{height:auto !important;padding:0 !important;overflow:visible;}
.pmproc{display:flex;flex-direction:column;align-items:center;gap:14px;padding:34px 24px 30px;text-align:center;background:var(--kp-surface,#fff);font-family:Inter,Segoe UI,Roboto,-apple-system,BlinkMacSystemFont,sans-serif;color:var(--kp-ink,#17171a);}
.pmproc-spin{width:46px;height:46px;border-radius:50%;border:4px solid var(--kp-surface-2,#eceef2);border-top-color:var(--kp-red,#c22c27);animation:pmproc-spin .8s linear infinite;}
@keyframes pmproc-spin{to{transform:rotate(360deg);}}
.pmproc-title{font-size:1.1rem;font-weight:850;letter-spacing:.2px;color:var(--kp-ink,#17171a);}
.pmproc-sub{font-size:.85rem;color:var(--kp-ink-3,#8a8a90);}
@media (prefers-reduced-motion:reduce){.pmproc-spin{animation-duration:1.6s;}}
/* announcement dialog body (store-authored HTML): readable + scrollable */
#msg .cmwrap .annbody{width:100%;max-height:52vh;overflow-y:auto;text-align:center;font-size:.92rem;line-height:1.55;}
#msg .cmwrap .annbody h1,#msg .cmwrap .annbody h2,#msg .cmwrap .annbody h3,#msg .cmwrap .annbody h4,#msg .cmwrap .annbody h5{font-size:1.02rem;font-weight:700;color:#17171a;margin:0 0 8px;line-height:1.35;}
#msg .cmwrap .annok{width:100%;font-family:inherit;border:none;cursor:pointer;}
/* =========================================================================
No big blank blocks: items without a photo and/or description collapse
instead of reserving empty card space. .noimg comes from PHP; .nodesc is
tagged by menu.js at load (the always contains ).
========================================================================= */
/* photo-less: release the reserved 84px image column */
body.fhero #itemlist li.item.noimg,
body.fhero #item.favor #history li.item.noimg{grid-template-columns:1fr;}
/* description-less: drop the reserved description row + the card min-height */
body.fhero #itemlist li.item.nodesc,
body.fhero #item.favor #history li.item.nodesc{grid-template-rows:auto auto;min-height:0;}
body.fhero #itemlist li.item.nodesc p,
body.fhero #item.favor #history li.item.nodesc p{display:none;}
body.fhero #itemlist li.item.nodesc b.p,
body.fhero #item.favor #history li.item.nodesc b.p{grid-row:2;margin-top:6px;}
/* neither photo nor description: compact stacked row — name above, price
below (user preference), add-chip clears via right padding */
body.fhero #itemlist li.item.noimg.nodesc,
body.fhero #item.favor #history li.item.noimg.nodesc{padding-top:13px;padding-bottom:13px;padding-right:56px;}
@media only screen and (max-width:600px){
/* mobile rows have no side padding (edges come from margins) */
body.fhero #itemlist li.item.noimg.nodesc,
body.fhero #item.favor #history li.item.noimg.nodesc{padding-top:12px;padding-bottom:12px;padding-left:0;padding-right:48px;}
}
/* ---- fhero item pills: Popular / Spicy (tagged by menu.js) ---- */
body.fhero li.item .fpill{display:inline-block;vertical-align:1px;margin-left:6px;padding:2px 8px;border-radius:99px;font-size:10px;font-weight:700;letter-spacing:.02em;line-height:1.5;white-space:nowrap;}
body.fhero li.item .fpill-pop{background:#e8f7ee;color:#1d8a4a;border:1px solid #c3e8d1;}
body.fhero li.item .fpill-spicy{background:#fff3e8;color:#d9480f;border:1px solid #ffd9bd;}
/* the legacy pixel pepper gif is replaced by the pill inside fhero card names */
body.fhero #itemlist li.item .n .hotp,body.fhero #itemlist li.item b.n .hotp,body.fhero #itemlist li.item b.n2 .hotp{display:none;}
/* mobile: on rows WITH a photo, the add-chip sits on the photo's bottom-right
corner (photo is 82px, top-aligned at the row's 18px padding: bottom = 100;
30px chip inset 4px -> top 66 / right 4). Rows without a photo keep the
vertically-centered chip. */
@media only screen and (max-width:600px){
body.fhero #itemlist li.item.img:not(.soldout):after,
body.fhero #item.favor #history li.item.img:after{top:66px;transform:none;right:4px;}
}
/* sold-out as a name pill (matches Popular/Spicy) instead of the corner badge */
body.fhero li.item .fpill-sold{background:#fdf3f2;color:#c22c27;border:1px solid #f4d9d7;}
body.fhero #itemlist li.item.soldout:after,
body.fhero #item.favor #history li.item.soldout:after{display:none;} /* old SOLD OUT corner badge */
body.fhero #itemlist li.item.soldout:before{background:rgba(255,255,255,0.45);} /* keep a lighter disabled wash */
body.fhero #itemlist li.item.soldout .n,body.fhero #itemlist li.item.soldout b.n,body.fhero #itemlist li.item.soldout b.n2{color:#9a9aa0;}
/* gateway buttons are disabled until the contact form is valid (myPv) — make
that state visible instead of a full-styled row that silently ignores taps */
#pay a.p.btn-flat.disabled:not(#pgoogle):not(#papple):not(#authnetpay){opacity:.45;filter:grayscale(.4);}
/* ---- fcart: legacy renderer (menuold.js) on the future theme. The server
ships the future cart column (carthead / cartseg) to every theme-2 store,
but all of its styling scopes on body.fhero, which needs menu.js behaviors
the legacy renderer doesn't have — so the column rendered bare. body.fcart
(index.php, theme 2 + versionc below the modern cutoff) styles exactly that
combination: the fhero cart header + order-type pills, and the CLASSIC
nested row markup that menuold.js renders into #list. ---- */
body.fcart #carthead{display:flex;align-items:center;gap:10px;margin:0 0 14px;}
body.fcart #carthead .cart-h-title{font-size:1.15rem;font-weight:800;letter-spacing:-.02em;color:#17171a;}
body.fcart #carthead #cartcount{margin-left:auto;font-size:.78rem;font-weight:600;color:#9a9aa0;}
body.fcart .cartseg{display:flex;background:#f2f1f3;border-radius:11px;padding:4px;gap:6px;margin:0 0 14px;}
body.fcart .cartseg #pickup,body.fcart .cartseg #delivery{flex:1;width:auto;min-width:0;height:46px;margin:0;padding:0 4px;border:1px solid #dcdce0;background:#fff;border-radius:9px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;position:relative;transition:border-color .15s,box-shadow .15s;}
body.fcart .cartseg #pickup b,body.fcart .cartseg #delivery b{position:static;width:auto;height:auto;font-size:.82rem;font-weight:700;color:#5f5f66;letter-spacing:0;text-transform:capitalize;}
body.fcart .cartseg:has(.off) #pickup:not(.off),body.fcart .cartseg:has(.off) #delivery:not(.off){border-color:#c22c27;box-shadow:0 1px 4px rgba(194,44,39,.18);}
body.fcart .cartseg:has(.off) #pickup:not(.off) b,body.fcart .cartseg:has(.off) #delivery:not(.off) b{color:#17171a;}
body.fcart .cartseg:not(:has(#delivery)) #pickup,body.fcart .cartseg:not(:has(#pickup)) #delivery{border-color:#c22c27;}
body.fcart .cartseg #pickup.off,body.fcart .cartseg #delivery.off{background:#fff;border-color:#dcdce0;box-shadow:none;}
body.fcart .cartseg #pickup.off b,body.fcart .cartseg #delivery.off b{color:#9a9aa2;}
body.fcart .cartseg #pickup i,body.fcart .cartseg #delivery i{display:none !important;}
body.fcart #custom #caddress,body.fcart #custom #checkout,body.fcart #custom #notice{width:100%;margin-left:0;margin-right:0;box-sizing:border-box;}
body.fcart #custom #checkout{margin:16px 0 4px;}
body.fcart #custom #caddress{width:auto;}
/* menuold renders the CLASSIC nested rows — undo the fhero grid template
(which expects b.r/b.q/b.a as direct grid children) and use the modernized
classic treatment instead */
body.fcart #list li.cust{display:flex !important;flex-wrap:wrap;padding:10px 0;border-top:1px solid #f0eff1;}
body.fcart #list li.cust:first-child{border-top:none;}
/* the base fhero stepper-cluster rule (li.cust > b.q: 28px pill, white bg,
top+bottom borders) still matches here — in the classic row shape the
quantity is a plain badge, not part of a stepper strip */
body.fcart #list li.cust > b.q{display:inline-block !important;height:auto;background:transparent;border:none;padding:0;align-self:auto;font-weight:700;}
body.fcart #list li div.n{text-align:left;}
body.fcart #list li b.c{opacity:.7;display:block;width:100%;text-transform:uppercase;font-size:.85em;}
body.fcart #list b.r,body.fcart #list b.a,body.fcart #list b.e{color:#c22c27;margin:10px 10px 0 0;display:inline-block;font-size:.9em;font-weight:600;cursor:pointer;}
body.fcart #list b.r i,body.fcart #list b.a i,body.fcart #list b.e i{font-size:1.2em;margin:2px;vertical-align:-4px;}
body.fcart #list li b.p{text-align:right;font-variant-numeric:tabular-nums;font-weight:600;}