:root{ --pine:#103A33; --pine-2:#1B5248; --chalk:#F5F6F2; --paper:#fff; --marigold:#F4B63C; --tomato:#D9432B; --ink:#17211E; --muted:#5E6B66; --line:#DDE3DD; --ok:#1F7A4D; --r-lg:20px; --r-md:12px; --r-pill:999px; --display:"Bricolage Grotesque",system-ui,sans-serif; --body:"DM Sans",system-ui,sans-serif; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;font:400 1rem/1.6 var(--body);color:var(--ink);background:var(--chalk)} h1,h2,h3{font-family:var(--display);line-height:1.1;margin:0 0 .6rem;letter-spacing:-.02em} h1{font-size:clamp(2rem,6vw,3.6rem);font-weight:800} h2{font-size:clamp(1.35rem,3vw,1.9rem);font-weight:700;margin-top:2rem} h3{font-size:1.15rem;font-weight:700} a{color:var(--pine-2)} img{max-width:100%;display:block} .wrap{max-width:1100px;margin:0 auto;padding:0 1.1rem} .narrow{max-width:680px} .muted{color:var(--muted)} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} :focus-visible{outline:3px solid var(--marigold);outline-offset:2px} /* header */ .top{background:var(--pine);position:sticky;top:0;z-index:10} .top-in{display:flex;align-items:center;justify-content:space-between;min-height:62px;gap:1rem} .brand{font:800 1.25rem var(--display);color:#fff;text-decoration:none;display:flex;align-items:center;gap:.5rem} .brand .dot{width:12px;height:12px;border-radius:50%;background:var(--marigold)} .nav{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap;justify-content:flex-end} .nav a,.linkbtn{color:#E4EEE9;text-decoration:none;font-weight:500;font-size:.95rem} .nav a:hover,.linkbtn:hover{color:#fff;text-decoration:underline} .linkbtn{background:none;border:0;cursor:pointer;font-family:inherit;padding:0} form.inline{display:inline;margin:0} /* buttons */ .btn{display:inline-block;background:var(--marigold);color:#2A1E00;font:700 1rem var(--body);border:0;border-radius:var(--r-pill);padding:.7rem 1.4rem;cursor:pointer;text-decoration:none;transition:transform .12s,background .12s} .btn:hover{background:#FFC750;transform:translateY(-1px)} .btn:disabled{opacity:.45;cursor:not-allowed;transform:none} .btn-sm{padding:.4rem 1rem;font-size:.9rem} .btn-big{padding:.95rem 2rem;font-size:1.1rem} .btn-ghost{background:transparent;color:inherit;box-shadow:inset 0 0 0 2px currentColor} .btn-ghost:hover{background:rgba(127,127,127,.12)} .btn-danger{background:transparent;color:var(--tomato);box-shadow:inset 0 0 0 2px var(--tomato)} .nav .btn-sm{color:#2A1E00} /* progress */ .steps{display:flex;gap:.4rem;list-style:none;margin:1rem auto 0;padding:0 1.1rem;font-size:.85rem;overflow-x:auto} .steps li{flex:1;min-width:64px;text-align:center;padding:.45rem .3rem;border-bottom:3px solid var(--line);color:var(--muted)} .steps li.done{border-color:var(--pine-2);color:var(--pine-2)} .steps li.now{border-color:var(--marigold);color:var(--ink);font-weight:700} /* hero */ .hero{background:var(--pine);color:#fff;padding:3rem 0 3.5rem} .hero-in{display:grid;grid-template-columns:1.1fr .9fr;gap:2.5rem;align-items:center} .lead{font-size:1.15rem;color:#CFE0D9;max-width:34rem} .finder{display:flex;gap:.5rem;background:#fff;border-radius:var(--r-pill);padding:.4rem;margin:1.4rem 0 1rem;max-width:34rem} .finder input{flex:1;border:0;background:none;padding:.6rem 1rem;font:inherit;color:var(--ink);min-width:0} .finder input:focus{outline:none} .hero .btn-ghost{color:#fff} .geo-note{font-size:.88rem;color:var(--muted);margin:.6rem 0} .hero .geo-note{color:#A9C4BB} /* chalkboard */ .board{background:#0C2C27;border:10px solid #7A5A36;border-radius:10px;padding:1.4rem 1.4rem 1rem;box-shadow:inset 0 0 40px rgba(0,0,0,.4)} .board h2{margin:0 0 .8rem;color:var(--marigold);font-size:1.5rem} .board-row{display:flex;align-items:baseline;gap:.5rem;padding:.55rem 0;color:#F1F6F3;text-decoration:none} .board-row:hover .board-name{color:var(--marigold)} .board-name{font-weight:700} .board-name small{display:block;font-weight:400;color:#A9C4BB;font-size:.82rem} .board-dots{flex:1;border-bottom:2px dotted #4B6B63;transform:translateY(-.3rem)} .board-price{font:700 1.1rem var(--display);color:var(--marigold)} .board-empty{color:#A9C4BB} .veg{display:inline-block;width:12px;height:12px;border:2px solid var(--ok);border-radius:3px;position:relative;vertical-align:middle} .veg::after{content:"";position:absolute;inset:2px;background:var(--ok);border-radius:50%} .how{padding:3rem 1.1rem} .how-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem} .how-grid div{border-top:3px solid var(--marigold);padding-top:.8rem} .cta-band{margin-top:3rem;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.6rem;display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap} .cta-band h2{margin-top:0} /* search */ .filters{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin:1.5rem 0 .4rem} .filters input[name=q]{flex:1;min-width:200px} input,select,textarea{font:inherit;padding:.65rem .8rem;border:1.5px solid var(--line);border-radius:var(--r-md);background:#fff;color:var(--ink);width:100%} .filters input,.filters select{width:auto} .chk{display:flex;gap:.4rem;align-items:center}.chk input{width:auto} .venue{display:grid;grid-template-columns:200px 1fr;gap:1.2rem;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;margin:1rem 0} .venue-img{background:var(--pine-2);min-height:160px;display:block} .venue-img img{width:100%;height:100%;object-fit:cover} .ph{display:grid;place-items:center;height:100%;min-height:120px;font:800 3rem var(--display);color:var(--marigold);background:var(--pine-2)} .ph.big{min-height:260px;font-size:6rem} .venue-body{padding:1.1rem 1.1rem 1.1rem 0} .venue-head{display:flex;justify-content:space-between;gap:.8rem;align-items:flex-start} .venue-head h2{margin:0}.venue-head a{text-decoration:none;color:var(--ink)} .pill{display:inline-block;background:#E5EFEA;color:var(--pine);border-radius:var(--r-pill);padding:.2rem .8rem;font-size:.85rem;font-weight:500;text-decoration:none;white-space:nowrap;margin:.1rem .2rem .1rem 0} .pill.paid{background:#DDF3E6;color:var(--ok)}.pill.pending{background:#FFF1D1;color:#8A5B00}.pill.cancelled{background:#FBE3DE;color:var(--tomato)} .chips{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;padding:0;margin:.6rem 0 .9rem} .chips li{border:1.5px dashed var(--line);border-radius:var(--r-pill);padding:.2rem .8rem;font-size:.9rem} .empty{text-align:center;padding:3rem 1rem;color:var(--muted)} /* detail */ .detail-hero{border-radius:var(--r-lg);overflow:hidden;margin-top:1.2rem;background:var(--pine-2);max-height:360px} .detail-hero img{width:100%;height:360px;object-fit:cover} .detail-head{display:flex;justify-content:space-between;gap:1.5rem;align-items:flex-end;flex-wrap:wrap;margin-top:1.4rem} .specials{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem} .special{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden} .special-img{height:150px;background:var(--pine-2)}.special-img img{width:100%;height:100%;object-fit:cover} .special-body{padding:1rem} .price{font:800 1.3rem var(--display);color:var(--pine);margin:.2rem 0 0} .slots{display:flex;flex-wrap:wrap;gap:.5rem} .slot{border:1.5px solid var(--pine-2);color:var(--pine);border-radius:var(--r-pill);padding:.35rem 1rem;text-decoration:none;font-weight:500} .slot:hover{background:var(--pine);color:#fff} /* booking */ .days{display:flex;gap:.5rem;overflow-x:auto;padding:.3rem 0 .8rem} .day{display:flex;flex-direction:column;align-items:center;min-width:68px;padding:.5rem .7rem;border:1.5px solid var(--line);border-radius:var(--r-md);text-decoration:none;color:var(--ink);background:#fff;font-size:.82rem} .day b{font-size:1rem}.day.on{background:var(--pine);color:#fff;border-color:var(--pine)} .card-form{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.3rem;display:grid;gap:1.1rem} .card-form p{margin:0 0 .8rem}.card-form label{display:block;font-weight:500;font-size:.92rem} .card-form input,.card-form select,.card-form textarea{margin-top:.3rem} fieldset{border:0;padding:0;margin:0}legend{font:700 1.05rem var(--display);margin-bottom:.6rem} .grid2{display:grid;grid-template-columns:1fr 1fr;gap:.9rem} .slot-opt input{position:absolute;opacity:0;width:0} .slot-opt span{display:inline-flex;flex-direction:column;align-items:center;border:1.5px solid var(--line);border-radius:var(--r-md);padding:.5rem 1rem;cursor:pointer;font-weight:500;background:#fff} .slot-opt small{font-size:.72rem;color:var(--tomato)} .slot-opt input:checked+span{background:var(--pine);color:#fff;border-color:var(--pine)} .slot-opt input:focus-visible+span{outline:3px solid var(--marigold)} .preorder{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.5rem 0;border-bottom:1px dashed var(--line)} .preorder small{display:block}.preorder input{width:84px} .summary{background:#FFF7E3;border-radius:var(--r-md);padding:.8rem 1rem} .receipt{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.3rem;margin-bottom:1.2rem} .receipt table{width:100%;border-collapse:collapse}.receipt td{padding:.45rem 0;border-bottom:1px dashed var(--line)} .receipt td:last-child{text-align:right}.receipt .total td{font-weight:800;border:0;font-size:1.15rem} .ticket{background:var(--paper);border:2px dashed var(--pine-2);border-radius:var(--r-lg);padding:2rem;text-align:center;margin:2rem 0} .code{font:800 2.6rem var(--display);letter-spacing:.18em;color:var(--pine);margin:.2rem 0}.code.sm{font-size:1.1rem;letter-spacing:.1em;margin:0} .row-card{display:flex;justify-content:space-between;gap:1rem;align-items:center;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);padding:1rem 1.1rem;margin:.7rem 0;flex-wrap:wrap} .row-card p{margin:0}.right{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap} .dash-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin:1.5rem 0 .5rem;flex-wrap:wrap} .flash{margin:1rem 0 0;padding:.7rem 1rem;border-radius:var(--r-md);background:#E5EFEA}.flash.error{background:#FBE3DE;color:#8C2412} .errorlist{color:var(--tomato);list-style:none;padding:0;margin:0 0 .3rem}.helptext{display:block;font-size:.8rem;color:var(--muted)} .foot{margin-top:4rem;padding:2rem 0;background:var(--pine);color:#CFE0D9}.foot a{color:var(--marigold)}.foot .muted{color:#A9C4BB} @media (max-width:820px){ .hero-in{grid-template-columns:1fr}.how-grid{grid-template-columns:1fr 1fr} .venue{grid-template-columns:1fr}.venue-img{height:170px}.venue-body{padding:0 1rem 1rem} .grid2{grid-template-columns:1fr}.nav{gap:.7rem} } @media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}} /* ---------- auto-scrolling gallery ---------- */ .gallery{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--pine-2);margin-top:1.2rem} .gallery-track{display:flex;gap:0;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none} .gallery-track::-webkit-scrollbar{display:none} .gallery-slide{flex:0 0 100%;scroll-snap-align:center;margin:0;position:relative} .gallery-slide img{width:100%;height:420px;object-fit:cover;display:block} .gallery-slide figcaption{position:absolute;left:0;right:0;bottom:0;padding:.7rem 1rem; background:linear-gradient(to top,rgba(0,0,0,.6),transparent);color:#fff;font-size:.9rem} .gallery-nav{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px; border-radius:50%;border:0;background:rgba(0,0,0,.45);color:#fff;font-size:1.6rem;line-height:1; cursor:pointer;display:grid;place-items:center;backdrop-filter:blur(4px)} .gallery-nav:hover{background:rgba(0,0,0,.7)} .gallery-nav.prev{left:.7rem}.gallery-nav.next{right:.7rem} .gallery-dots{position:absolute;bottom:.7rem;left:0;right:0;display:flex;gap:.35rem;justify-content:center} .gallery-dots button{width:8px;height:8px;border-radius:50%;border:0;padding:0; background:rgba(255,255,255,.5);cursor:pointer} .gallery-dots button.on{background:#fff;width:22px;border-radius:999px} /* home-page strip: smaller, sharper */ .gallery-strip .gallery-slide img{height:260px} .gallery-strip{margin-top:2.5rem} @media (max-width:820px){ .gallery-slide img{height:280px} .gallery-strip .gallery-slide img{height:200px} } @media (prefers-reduced-motion:reduce){ .gallery-track{scroll-behavior:auto} } /* ---------- category dropdown ---------- */ .dropdown{position:relative;display:inline-block} .dropbtn{background:none;border:0;color:#E4EEE9;font:500 .95rem var(--body);cursor:pointer;padding:0;font-family:inherit} .dropbtn:hover{color:#fff;text-decoration:underline} .dropdown-content{display:none;position:absolute;top:calc(100% + .5rem);left:0;min-width:230px; background:#fff;color:var(--ink);border-radius:var(--r-md);box-shadow:0 12px 34px rgba(0,0,0,.25); padding:.4rem;z-index:50} .dropdown-content a{display:block;padding:.55rem .9rem;color:var(--ink);border-radius:var(--r-md);font-weight:500} .dropdown-content a:hover{background:#F0F5F2;text-decoration:none} .dropdown-content hr{border:0;border-top:1px solid var(--line);margin:.35rem .5rem} .dropdown:hover .dropdown-content, .dropdown:focus-within .dropdown-content{display:block} .cat-head{display:flex;gap:1rem;align-items:center;margin:1.5rem 0} .cat-icon{font-size:2.6rem;line-height:1} .stock-low,.stock-out,.stock-new{display:inline-block;font-size:.7rem;font-weight:700;padding:0 .4rem;border-radius:6px;margin-left:.3rem;text-transform:uppercase} .stock-low{background:#FFF1D1;color:#8A5B00} .stock-out{background:#FBE3DE;color:var(--tomato)} .stock-new{background:#DDF3E6;color:var(--ok)} .lt-head{margin:1.6rem 0 .5rem;color:var(--pine-2);font-size:1rem;text-transform:uppercase;letter-spacing:.06em} .pill.stock-in_stock{background:#DDF3E6;color:var(--ok)} .pill.stock-low_stock{background:#FFF1D1;color:#8A5B00} .pill.stock-out_of_stock{background:#FBE3DE;color:var(--tomato)} .pill.stock-preorder{background:#E5EFEA;color:var(--pine)} .stock-sale{display:inline-block;font-size:.7rem;font-weight:700;padding:0 .4rem;border-radius:6px;margin-left:.3rem;text-transform:uppercase;background:#FFF1D1;color:#8A5B00} .notify-form{display:flex;gap:.4rem;margin-top:.6rem;flex-wrap:wrap} .notify-form input{flex:1;min-width:160px;font-size:.9rem;padding:.45rem .7rem} .cat-tiles{margin-top:2rem} .cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1rem} .cat-tile{display:flex;flex-direction:column;gap:.3rem;background:var(--paper);border:1px solid var(--line); border-radius:var(--r-lg);padding:1.1rem;text-decoration:none;color:var(--ink);transition:transform .12s,border-color .12s} .cat-tile:hover{transform:translateY(-2px);border-color:var(--pine-2)} .cat-tile .cat-icon{font-size:2rem} .cat-tile .cat-label{font-weight:700;font-size:1.05rem} .cat-tile .cat-count{color:var(--muted);font-size:.85rem} /* ---------- terms box ---------- */ .terms-box{border:1.5px solid var(--line);border-radius:var(--r-md);padding:1rem;background:#FAFBF8} .terms-box legend{font:700 1rem var(--display);padding:0 .4rem} .terms-body{max-height:240px;overflow-y:auto;background:#fff;border:1px solid var(--line); border-radius:var(--r-md);padding:.9rem;font-size:.92rem;line-height:1.55;margin-bottom:.8rem} .terms-body p{margin:0 0 .6rem} .chk-line{display:flex;gap:.6rem;align-items:flex-start;font-weight:500} .chk-line input{width:auto;margin-top:.2rem} /* ---------- plans ---------- */ .plan-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:1rem;margin:1.2rem 0} .plan-card{background:var(--paper);border:1.5px solid var(--line);border-radius:var(--r-lg); padding:1.2rem;text-align:center;display:flex;flex-direction:column;gap:.4rem} .plan-card h3{margin:0} .plan-card .price{font:800 1.6rem var(--display);color:var(--pine);margin:0} .plan-card .btn{margin-top:auto} .plan-summary{background:#F2F7F4;border-radius:var(--r-md);padding:1rem 1.2rem;margin:1rem 0} .pay-actions{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1rem} /* ---------- QR payment card ---------- */ .qr-card{display:grid;grid-template-columns:1fr auto;gap:1.5rem;align-items:center; background:var(--paper);border:1.5px solid var(--line);border-radius:var(--r-lg); padding:1.2rem;margin:1rem 0} .qr-img img{border-radius:var(--r-md);border:1px solid var(--line);background:#fff} .qr-meta{display:grid;grid-template-columns:auto 1fr;gap:.2rem .8rem;margin:.6rem 0;font-size:.9rem} .qr-meta dt{color:var(--muted)} .qr-meta dd{margin:0;font-family:ui-monospace,monospace} .small{font-size:.82rem} @media (max-width:640px){.qr-card{grid-template-columns:1fr}.qr-img{text-align:center}} /* ---------- inventory tables ---------- */ .inv-table{width:100%;border-collapse:collapse;background:var(--paper); border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;margin:1rem 0} .inv-table th,.inv-table td{padding:.65rem .9rem;text-align:left;border-bottom:1px solid var(--line);font-size:.95rem} .inv-table thead th{background:#F5F6F2;font-weight:700;font-size:.85rem;text-transform:uppercase;letter-spacing:.04em} .inv-table tbody tr:last-child td{border-bottom:0} .inv-table .num{text-align:right} .inv-table tr.low{background:#FFF7E3} .inv-table .right{text-align:right;white-space:nowrap} .inv-table .right .btn{margin-left:.3rem} .small{font-size:.82rem} .row-card .right form{display:inline} /* ---------- catalog autocomplete hints ---------- */ .catalog-input{font-weight:500} .add-offer summary{cursor:pointer;margin:.5rem 0} .add-offer form{margin-top:.8rem;background:#FAFBF8} /* ---------- KPI row ---------- */ .kpi-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:1.2rem 0} .kpi{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg); padding:1.1rem 1.2rem;display:flex;flex-direction:column;gap:.2rem} .kpi strong{font:800 1.6rem var(--display);color:var(--pine)} @media (max-width:640px){.kpi-row{grid-template-columns:1fr}} /* ---------- PWA install banner ---------- */ .pwa-banner{position:sticky;top:62px;z-index:9;background:#0C2C27;color:#F1F6F3;border-bottom:1px solid #08211C} .pwa-banner[hidden]{display:none} .pwa-banner-in{display:flex;align-items:center;gap:.8rem;padding:.6rem 1.1rem;flex-wrap:wrap} .pwa-banner-in p{margin:0;flex:1;min-width:180px;font-size:.9rem} .pwa-banner-in small{color:#A9C4BB} .pwa-banner-icon{width:36px;height:36px;border-radius:10px;background:#F4B63C;color:#103A33; display:grid;place-items:center;font-size:1.2rem;font-weight:800;flex-shrink:0} .pwa-dismiss{color:#A9C4BB;font-size:1.1rem;padding:.2rem .4rem} .pwa-dismiss:hover{color:#fff} .pwa-ios .pwa-banner-icon{background:#F5F6F2;color:#103A33} /* ---------- standalone tweaks ---------- */ .pwa-standalone .top{position:sticky;top:0} /* keep header pinned in app mode */ .pwa-standalone .pwa-banner{display:none !important} /* already installed */ /* ---------- notch / home-indicator safe areas (iPhone, Android cutouts) ---------- */ .top{padding-top:env(safe-area-inset-top,0px)} .top-in,.wrap{padding-left:max(1.1rem,env(safe-area-inset-left,0px));padding-right:max(1.1rem,env(safe-area-inset-right,0px))} .foot{padding-bottom:calc(1rem + env(safe-area-inset-bottom,0px))} .pwa-banner{top:calc(62px + env(safe-area-inset-top,0px))} html{-webkit-text-size-adjust:100%;text-size-adjust:100%} .pwa-standalone body{overscroll-behavior-y:none;-webkit-tap-highlight-color:transparent} input,select,textarea{font-size:max(16px,1rem)} /* stops iOS zooming into fields */ /* ---------- split-price picker ---------- */ .split-buy{margin-top:.6rem;width:100%;flex:1 1 100%} .split-head{margin:0 0 .45rem;font-size:.9rem} .split-grid{display:grid;gap:.55rem;grid-template-columns:repeat(2,minmax(0,1fr))} .split-n3{grid-template-columns:repeat(3,minmax(0,1fr))} .split-pane{position:relative;display:flex;flex-direction:column;align-items:center;gap:.2rem; padding:.7rem .5rem .6rem;background:#fff;border:1.5px solid var(--line,#dfe6e2);border-radius:14px;text-align:center; transition:border-color .15s,box-shadow .15s} .split-pane.is-picked{border-color:var(--pine,#103A33);box-shadow:0 0 0 3px rgba(16,58,51,.14)} .split-tag{font-size:.7rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#6b7f78} .split-price{font-size:1.45rem;font-weight:800;line-height:1.1;color:var(--pine,#103A33)} .split-was{font-size:.8rem;color:#8a9a94} .split-left{font-size:.78rem;color:#6b7f78} .split-pane.is-cheapest::before{content:"Lowest";position:absolute;top:-.55rem;right:.6rem;background:#F4B63C;color:#103A33; font-size:.65rem;font-weight:800;padding:.1rem .45rem;border-radius:999px} .split-step{display:flex;align-items:center;gap:.3rem;margin-top:.3rem} .split-step button{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--pine,#103A33);background:#fff; color:var(--pine,#103A33);font-size:1.15rem;line-height:1;cursor:pointer;touch-action:manipulation} .split-step button:active{background:var(--pine,#103A33);color:#fff} .split-step input{width:46px;height:34px;text-align:center;border:1.5px solid var(--line,#dfe6e2);border-radius:8px;font-size:1rem; -moz-appearance:textfield} .split-step input::-webkit-outer-spin-button,.split-step input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} .split-foot{display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap;margin-top:.6rem} .split-summary{font-size:.9rem;font-weight:600} @media (min-width:900px){.split-n4{grid-template-columns:repeat(4,minmax(0,1fr))}} @media (max-width:480px){.split-n3 .split-pane:last-child{grid-column:1/-1}.split-n3{grid-template-columns:repeat(2,minmax(0,1fr))}} .cart-badge{ position:relative;display:inline-grid;place-items:center; color:#E4EEE9;text-decoration:none;padding:.3rem .6rem; font-size:1.1rem;border-radius:999px; } .cart-badge:hover{color:#fff;background:rgba(255,255,255,.08)} .cart-count{ position:absolute;top:-4px;right:-2px;min-width:18px;height:18px; background:var(--marigold);color:#2A1E00;border-radius:999px; font:700 .7rem/18px var(--body);text-align:center;padding:0 .3rem; } /* ---------- Hero Logo ---------- */ .hero-brand { margin-bottom: 1.5rem; } .hero-logo { /* Scales with the screen, roughly 25% of the viewport width */ width: 25vw; /* But we don't want it gigantic on ultra-wide screens */ max-width: 280px; /* And keep it from shrinking too small on mobile */ min-width: 140px; height: auto; display: block; /* The logo has a built-in border/background, no need for extra styles */ border-radius: 50%; filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.3)); } /* Adjust layout if the hero text needs more room */ @media (max-width: 820px) { .hero-logo { /* Slightly larger relative to screen on mobile */ width: 35vw; } } /* Item-focused search card */ .venue .venue-img { border-radius: var(--r-lg) 0 0 var(--r-lg); } .venue .venue-head h2 { font-size: 1.15rem; } .venue .price { font: 800 1.3rem var(--display); color: var(--pine); } @media (max-width: 820px) { .venue .venue-img { border-radius: var(--r-lg) var(--r-lg) 0 0; } } /* ---------- "On my way" pickup card ---------- */ .on-my-way{ margin-top:1.4rem;padding:1.2rem 1.3rem;border-radius:16px; background:#E8F7FF;border:2px solid #2EA8D8; box-shadow:0 6px 24px rgba(46,168,216,.18); } .on-my-way[hidden]{display:none} .on-my-way h3{margin:0 0 .4rem;color:#0E4A6B;font-size:1.2rem} .on-my-way p{margin:.4rem 0;color:#103A33} .on-my-way-actions{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.6rem} .on-my-way-status{ margin-top:.6rem;padding:.5rem .8rem;border-radius:10px; background:#fff;border:1px dashed #2EA8D8;font-size:.9rem; } .on-my-way-status.err{background:#FBE3DE;border-color:var(--tomato);color:#8C2412} /* ---------- star ratings ---------- */ .stars{ display:inline-block;letter-spacing:.05em; font-size:1rem;line-height:1; color:var(--marigold); font-variant-emoji:text; /* keep ★ as text, not emoji on some systems */ } .stars.big{font-size:1.2rem;letter-spacing:.08em} .stars-input{display:inline-flex;gap:.15rem;align-items:center;font-size:1.3rem} .stars-input input{position:absolute;opacity:0;width:0;height:0} .stars-input label{cursor:pointer;color:#ccc;transition:color .12s;padding:0 .05rem} .stars-input label.on{color:var(--marigold)} .stars-input:hover label{color:var(--marigold)} .stars-input label:hover ~ label{color:#ccc} /* ============================================================ Sale badge — Modern red/yellow winner sticker ============================================================ */ .sale-badge { --size: 68px; position: absolute; /* anchor inside the image, not half-off the corner — the old -4px offset pushed the badge past the card edge and onto the title on narrow screens. */ top: 6px; right: 6px; width: var(--size); height: var(--size); display: grid; place-items: center; pointer-events: none; z-index: 2; filter: drop-shadow(0 4px 6px rgba(0,0,0,.25)); transform: rotate(8deg); /* tilt the whole badge */ transition: transform 0.2s ease; } /* The badge gets slightly bigger on hover of the card */ .special:hover .sale-badge { transform: rotate(12deg) scale(1.05); } .sale-badge::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 30% 30%, #FFF0A8 0%, #F4B63C 45%, #E58A1B 100%); clip-path: polygon( 50% 0%, 61% 10%, 75% 4%, 79% 18%, 94% 23%, 86% 36%, 98% 50%, 86% 64%, 94% 77%, 79% 82%, 75% 96%, 61% 90%, 50% 100%, 39% 90%, 25% 96%, 21% 82%, 6% 77%, 14% 64%, 2% 50%, 14% 36%, 6% 23%, 21% 18%, 25% 4%, 39% 10% ); } .sale-badge::after { content: ""; position: absolute; inset: 3px; background: transparent; clip-path: polygon( 50% 0%, 61% 10%, 75% 4%, 79% 18%, 94% 23%, 86% 36%, 98% 50%, 86% 64%, 94% 77%, 79% 82%, 75% 96%, 61% 90%, 50% 100%, 39% 90%, 25% 96%, 21% 82%, 6% 77%, 14% 64%, 2% 50%, 14% 36%, 6% 23%, 21% 18%, 25% 4%, 39% 10% ); box-shadow: inset 0 0 0 2px #D9432B; /* Red outline */ border-radius: 2px; } .sale-badge-text { position: relative; z-index: 2; text-align: center; font-family: var(--display); font-weight: 800; line-height: 1; color: #7A1B0D; /* Deep red text */ text-shadow: 0 1px 0 rgba(255,255,255,0.7); display: flex; flex-direction: column; align-items: center; } .sale-badge-text .pct { font-size: 1.05rem; letter-spacing: -0.02em; } .sale-badge-text .off { font-size: 0.55rem; text-transform: uppercase; letter-spacing: 0.05em; margin-top: 2px; } /* ============================================================ Price presentation ============================================================ */ .price-block { display: flex; align-items: baseline; flex-wrap: wrap; /* column-gap: space BETWEEN now / was / off on the same line. row-gap: space if the off-chip wraps onto a second line. */ column-gap: 0.7rem; row-gap: 0.35rem; /* margin: breathing room above and below the block. The bottom margin is what separates the price line from the item name. */ margin: 0.95rem 0 0.95rem; line-height: 1.2; } .price-block .now { font: 800 1.5rem/1.15 var(--display); color: var(--tomato); letter-spacing: -0.03em; white-space: nowrap; } .price-block .was { font-size: 1rem; color: var(--muted); text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: var(--muted); opacity: 0.8; white-space: nowrap; } .price-block .off { font: 700 0.75rem var(--body); background: #FFE58A; /* Soft yellow */ color: #7A1B0D; border-radius: 999px; padding: 0.18rem 0.6rem; letter-spacing: 0.03em; text-transform: uppercase; border: 1px solid rgba(122,27,13,0.1); white-space: nowrap; align-self: center; } .price-block .ends { font-size: 0.75rem; color: var(--tomato); font-weight: 700; white-space: nowrap; } /* Any wrapper that hosts a .sale-badge must be a containing block. .product-page-img and .product-img were missing from this list — that's why the badge escaped the image and overlapped the title. */ .special-img, .venue-img, .product-page-img, .product-img, .gallery-slide, .board-price { position: relative; } /* Fix the 'New' tag overlapping the title, and stop the title crashing into the price-block underneath it. */ .special-body { display: flex; flex-direction: column; gap: 0.35rem; } .special-body h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; /* top margin is the belt-and-braces gap between the price-block (or image above it) and the item name. */ margin: 0.75rem 0 0.15rem; line-height: 1.3; } .special .sale-badge { --size: 66px; top: 5px; right: 5px; } .special .sale-badge-text .pct { font-size: .95rem; } .gallery-slide figcaption .price-block .was { color: #E5E5E5; text-decoration-color: #E5E5E5; } /* ============================================================ Call-to-confirm block Rendered after a customer has paid. Shows the merchant's name and phone with a working dial / WhatsApp handoff, plus a manual fallback for devices that cannot make calls. ============================================================ */ .call-to-confirm{ background:#FFF7E3; border-left:4px solid var(--marigold); border-radius:12px; padding:1rem 1.2rem; margin:1.2rem 0; } .ctc-header{ display:flex; gap:.7rem; align-items:flex-start; margin-bottom:.8rem; } .ctc-icon{font-size:1.6rem;line-height:1} .ctc-header h3{ margin:0 0 .2rem; font-size:1.15rem; color:var(--pine); } .ctc-header p{margin:0;font-size:.9rem} .ctc-meta{ display:grid; grid-template-columns:auto 1fr; gap:.15rem .9rem; margin:.4rem 0 .8rem; font-size:.9rem; } .ctc-meta dt{color:var(--muted)} .ctc-meta dd{margin:0;font-weight:500} .ctc-actions{ display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom:.6rem; } /* The visible phone number is a copy-to-clipboard button on devices that cannot dial directly. Style it as a link so it reads as interactive. */ .ctc-phone-link{ background:none; border:0; padding:0; font:inherit; color:var(--pine-2); font-weight:600; cursor:pointer; text-decoration:underline; text-underline-offset:2px; } .ctc-phone-link:hover{color:var(--pine)} .ctc-phone-link:focus-visible{ outline:3px solid var(--marigold); outline-offset:2px; border-radius:4px; } .ctc-note{margin:0;font-size:.82rem} /* Manual fallback shown on devices that cannot dial. The dashed border marks this as a secondary path, so it isn't mistaken for a third equal-weight action button. */ .ctc-manual{ margin-top:.9rem; padding:.8rem 1rem; background:#fff; border:1.5px dashed var(--marigold); border-radius:10px; } .ctc-manual-head{ margin:0; font-size:.95rem; color:var(--pine); } .ctc-manual-row{ display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; margin:.2rem 0; } .ctc-manual-number{ font:700 1.1rem ui-monospace,monospace; background:#FFF7E3; padding:.35rem .7rem; border-radius:8px; letter-spacing:.02em; /* One click on the number selects the whole thing, which is the fastest way for a desktop user to copy it by hand. */ user-select:all; } /* Printed receipt: the manual panel is the part that survives on paper. Hide the buttons and force the panel visible. */ @media print{ .call-to-confirm{display:block !important} .ctc-actions{display:none !important} .ctc-manual{display:block !important;border-style:solid} .ctc-manual-row .btn{display:none} } .product-page-info h1 { margin: 0 0 0.4rem; line-height: 1.2; } .product-page-info .price-block { margin: 0.95rem 0; } /* ============================================================ Home-screen camera QR button on the search finder ============================================================ */ .finder .finder-cam { flex: 0 0 auto; align-self: stretch; display: inline-flex; align-items: center; justify-content: center; width: 44px; border: 0; background: none; color: var(--pine); cursor: pointer; border-radius: var(--r-pill); transition: background .12s; } .finder .finder-cam[hidden] { display: none; } .finder .finder-cam:hover { background: rgba(16,58,51,.08); } .finder .finder-cam:focus-visible { outline: 3px solid var(--marigold); outline-offset: 2px; } /* ---------- scanner dialog ---------- */ .home-scan-panel[hidden] { display: none !important; } .home-scan-panel { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,.88); display: flex; align-items: center; justify-content: center; padding: 1rem; } .home-scan-box { width: min(560px, 100%); background: #000; border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; } .home-scan-title { padding: .7rem 1rem; background: var(--pine); color: #fff; font: 700 1rem var(--display); } /* Chrome / Safari mobile collapse a