/* Ordering page preview. Default values follow the live Toast ordering page. */
#site { background: var(--bg); color: var(--text); font-family: var(--bf); font-size: 14px; }
#site h1, #site h2, #site h3 { font-family: var(--hf); color: var(--hc); text-transform: var(--case); letter-spacing: var(--ls); margin: 0; }
#site button { font-family: var(--bf); }
.o-wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--hpad); }

.o-announce { background: var(--brand); color: var(--btext); text-align: center; font-size: 13px; padding: 9px 16px; }
.o-nav { height: 74px; display: flex; align-items: center; padding: 0 40px; background: var(--navbg); box-shadow: 0 2px 6px rgba(0,0,0,.08); position: relative; z-index: 3; gap: 14px; }
.o-nav.sticky { position: sticky; top: 0; }
.o-nav.center .o-logo { position: absolute; left: 50%; transform: translateX(-50%); }
.o-logo { display: flex; align-items: center; height: var(--logoh); font-family: var(--hf); font-size: 22px; font-weight: 700; color: var(--brand); text-transform: var(--case); }
.o-logo img { height: var(--logoh); display: block; }
.o-nav .right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.o-cart { width: 70px; height: 46px; border-radius: var(--br); background: var(--brand); color: var(--btext); border: 0; display: flex; align-items: center; justify-content: center; }
.o-cart svg, .o-acct svg, .o-burger svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.o-acct { width: 34px; height: 34px; border: 0; background: none; color: var(--text); display: flex; align-items: center; justify-content: center; padding: 0; }
.o-acct svg { width: 32px; height: 32px; stroke-width: 1.5; }
.o-burger { display: none; border: 0; background: none; color: var(--text); padding: 0; }
.o-status { background: #fde8e8; color: #c8102e; font-size: 13px; text-align: center; padding: 6px; display: none; }

.o-hero { position: relative; height: var(--heroh); overflow: hidden; background: var(--brand); display: flex; align-items: flex-end; justify-content: var(--ha); }
.o-hero.contained { max-width: var(--maxw); margin: 0 auto; }
.o-hero > img, .o-hero > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center var(--heropos); }
.o-hero.grad { background: linear-gradient(120deg, var(--brand), var(--accent)); }
.o-hero.color { background: var(--brand); }
.o-hero.none { height: 0; }
.o-hero .shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,0) 70%); }
.o-hero .ht { position: relative; padding: 28px 40px; text-align: var(--hta); color: #fff; max-width: 720px; }
#site .o-hero h1 { color: #fff; font-size: 44px; line-height: 1.05; }
.o-hero p { margin: 6px 0 0; font-size: 16px; }

.o-head { padding-top: 26px; padding-bottom: 18px; }
#site .o-head h1 { font-size: 32px; font-weight: 700; line-height: 40px; }
.o-head .addr { margin-top: 4px; font-size: 14px; display: flex; gap: 32px; flex-wrap: wrap; }
.o-head .addr a { color: var(--brand); text-decoration: underline; }

.o-tabs { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg); z-index: 2; }
.o-tabs.sticky { position: sticky; top: 74px; }
.o-tabs .o-wrap { display: flex; gap: 6px; overflow-x: auto; padding-top: 16px; padding-bottom: 16px; align-items: center; scrollbar-width: none; }
.o-tabs .list-ic { display: none; width: 22px; height: 22px; fill: none; stroke: var(--text); stroke-width: 1.6; flex-shrink: 0; margin-right: 4px; }
.tab { white-space: nowrap; border: 0; background: none; color: var(--text); font-size: 14px; padding: 6px 7px; cursor: pointer; }
.tabs-text .tab.on { color: var(--hc); font-weight: 600; }
.tabs-pills .tab { border-radius: 99px; background: var(--card); padding: 8px 16px; font-weight: 600; }
.tabs-pills .tab.on { background: var(--brand); color: var(--btext); }
.tabs-underline .tab { border-bottom: 3px solid transparent; border-radius: 0; padding: 8px 12px; }
.tabs-underline .tab.on { border-color: var(--brand); color: var(--brand); font-weight: 600; }
.tabs-boxed .tab { border: 1px solid var(--line); border-radius: 4px; padding: 8px 14px; }
.tabs-boxed .tab.on { background: var(--text); color: var(--bg); }

.o-menu { padding-top: var(--vpad); padding-bottom: 60px; }
.o-cat { padding-top: 28px; }
#site .o-cat h2 { font-size: 19px; font-weight: 700; margin-bottom: 18px; }
.o-grid { display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: 20px; }

.o-card { background: var(--card); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; position: relative; }
.cards-shadow .o-card { box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.cards-border .o-card { border: 1px solid var(--line); }
.o-card .pic { position: relative; aspect-ratio: 1 / 1; background: var(--imgbg); overflow: hidden; }
.o-card .pic img { width: 100%; height: 100%; object-fit: contain; display: block; }
.imgshape-bleed .o-card .pic img { object-fit: cover; object-position: center var(--imgpos); }
.imgshape-circle .o-card .pic { width: 72%; margin: 14px auto 0; border-radius: 50%; }
.imgshape-circle .o-card .pic img { object-fit: cover; }
.o-card .pic.blank { background: var(--card); }
.o-card .bd { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; background: var(--bg); }
.cards-tinted .o-card .bd { background: var(--card); }
#site .o-card h3 { font-size: 16px; font-weight: 600; }
.o-card p { margin: 0; font-size: 13px; line-height: 18px; opacity: .8; }
.nodesc .o-card p { display: none; }
.o-card .pr { display: flex; align-items: center; gap: 10px; margin-top: auto; font-size: 14px; }
.badge { position: absolute; top: 10px; left: 10px; z-index: 2; background: var(--accent); color: #111; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 99px; display: var(--badges); }

/* Add button */
.add { background: var(--brand); color: var(--btext); border: 2px solid var(--brand); font-weight: 600; font-size: var(--bs); padding: .45em 1.1em; border-radius: var(--br); cursor: pointer; line-height: 1.2; }
.add-secondary .o-card .add { background: transparent; color: var(--brand); }
.add-secondary.sec-tint .o-card .add { background: color-mix(in srgb, var(--brand) 12%, transparent); border-color: transparent; }
.elev-raised .add { box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.elev-shadow .add { box-shadow: 3px 3px 0 var(--text); border-color: var(--text); }
.elev-glow .add { box-shadow: 0 0 12px var(--brand), 0 0 26px var(--brand); }
.add.bar, .add.ov { display: none; }
.place-corner .pr .add { margin-left: auto; }
.place-bar .pr .add { display: none; }
.place-bar .add.bar { display: block; width: 100%; border-radius: 0; }
.place-photo .pr .add { display: none; }
.place-photo .add.ov { display: block; position: absolute; right: 10px; bottom: 10px; z-index: 2; }
.place-none .add { display: none !important; }

/* card layouts */
.lay-left .o-card { flex-direction: row; }
.lay-left .o-card .picwrap { width: 38%; flex-shrink: 0; }
.lay-classic .o-card { flex-direction: row-reverse; }
.lay-classic .o-card .picwrap { width: 30%; flex-shrink: 0; padding: 10px; background: var(--bg); }
.lay-classic .o-card .pic { border-radius: calc(var(--r) / 2); }
.lay-condensed .picwrap, .lay-xcondensed .picwrap, .lay-stacked .picwrap { display: none; }
.lay-condensed .o-grid, .lay-stacked .o-grid { grid-template-columns: 1fr; gap: 10px; }
.lay-xcondensed .o-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
.lay-stacked .o-card .bd { align-items: center; text-align: center; }
.lay-stacked .o-card .pr { justify-content: center; }
.lay-condensed .place-photo .pr .add, .lay-xcondensed .pr .add, .lay-stacked .pr .add, .lay-condensed .pr .add { display: inline-block; }
.picwrap { position: relative; }

/* dropdown categories */
.fold { border: 1.5px solid var(--brand); border-radius: var(--r); margin: 0 0 14px; overflow: hidden; background: var(--bg); }
.fold summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 16px 18px; user-select: none; }
.fold summary::-webkit-details-marker { display: none; }
#site .fold h2 { margin: 0; font-size: 19px; }
.fold .count { font-size: 12px; opacity: .6; margin-left: auto; }
.fold .chev { width: 9px; height: 9px; border-right: 2px solid var(--text); border-bottom: 2px solid var(--text); transform: rotate(45deg); transition: transform .2s; margin: 0 4px 4px; }
.fold[open] .chev { transform: rotate(-135deg); margin-top: 6px; }
.fold .o-grid { padding: 0 16px 18px; }
.o-menu.folds { padding-top: 24px; }

.anim .o-card { animation: rise .5s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.o-foot { border-top: 1px solid var(--line); padding: 26px 40px; font-size: 12px; opacity: .7; text-align: center; }

/* phone preview */
.mobile #site .o-nav { height: 60px; padding: 0 14px; gap: 10px; }
.mobile #site .o-burger { display: flex; }
.mobile #site .o-cart { width: 54px; height: 36px; }
.mobile #site .o-acct svg { width: 28px; height: 28px; }
.mobile #site .o-nav.center .o-logo { position: static; transform: none; }
.mobile #site.logomob-fit .o-logo { max-width: 46%; }
.mobile #site.logomob-fit .o-logo img { max-width: 100%; height: auto; max-height: calc(var(--logoh) * .7); object-fit: contain; }
.mobile #site.logomob-stack .o-nav { flex-wrap: wrap; height: auto; padding: 10px 14px; }
.mobile #site.logomob-stack .o-logo { order: 3; width: 100%; justify-content: center; padding-top: 8px; }
.mobile #site .o-hero { height: calc(var(--heroh) * .55); }
.mobile #site .o-hero .ht { padding: 16px; }
.mobile #site .o-hero h1 { font-size: 26px; }
.mobile #site .o-wrap { padding: 0 16px; }
.mobile #site .o-head { padding-top: 16px; padding-bottom: 10px; }
.mobile #site .o-head h1 { font-size: 24px; line-height: 30px; }
.mobile #site .o-head .addr { flex-direction: column; gap: 10px; font-size: 13px; }
.mobile #site .o-tabs .list-ic { display: block; }
.mobile #site .o-tabs.sticky { top: 60px; }
.mobile #site .o-tabs .o-wrap { padding-top: 8px; padding-bottom: 8px; }
.mobile #site .o-grid { grid-template-columns: 1fr; gap: 0; }
.mobile #site.lay-top .o-card, .mobile #site.lay-left .o-card, .mobile #site.lay-classic .o-card { flex-direction: row; border-radius: 0; box-shadow: none; border: 0; border-bottom: 1px solid var(--line); background: var(--bg); padding: 12px 0; }
.mobile #site.lay-top .o-card .picwrap, .mobile #site.lay-left .o-card .picwrap, .mobile #site.lay-classic .o-card .picwrap { width: 52px; padding: 0; background: none; }
.mobile #site .o-card .pic { border-radius: 6px; border: 1px solid var(--line); }
.mobile #site.imgshape-circle .o-card .pic { width: 52px; margin: 0; }
.mobile #site .o-card .bd { padding: 0 0 0 12px; background: var(--bg); gap: 3px; }
.mobile #site .o-card h3 { font-size: 14px; }
.mobile #site .o-card p { font-size: 12px; line-height: 15px; }
.mobile #site .badge, .mobile #site .add.ov, .mobile #site .add.bar { display: none !important; }
.mobile #site .o-card .pr .add { display: none; }
.mobile #site .o-cat h2 { margin-bottom: 4px; font-size: 16px; }
.mobile #site .o-cat { padding-top: 18px; }