.signup-link {margin:-4px 0 0;text-align:start;font-size:12px;overflow-wrap:anywhere;color:var(--muted,#74555a)}
.google-signin {display:flex;align-items:center;justify-content:center;gap:12px;min-height:44px;padding:9px 12px;border:1px solid #747775;border-radius:4px;background:#fff;color:#1f1f1f;font-size:14px;font-weight:500;text-align:center}
.google-signin:hover {background:#f2f4f8;box-shadow:0 1px 2px #0002}
.google-signin:focus-visible {outline:3px solid #a8c7fa;outline-offset:2px}
.google-signin img {flex:none}
.auth-divider {display:flex;align-items:center;gap:12px;color:var(--muted);font-size:12px;margin:17px 0}
.auth-divider::before,.auth-divider::after {content:"";height:1px;background:var(--line);flex:1}
.google-identity {background:#f1f7f0;color:#28492c;border:1px solid #c4dcc3;border-radius:9px;padding:10px 12px;font-size:13px;overflow-wrap:anywhere}
#signup-password-hint {display:block;font-size:12px;color:var(--muted,#74555a)}

.customer:not(.dark) {
  --canvas:var(--menu-canvas);
  --card:color-mix(in srgb,var(--canvas),white 84%);
  --copy:#20291e;
  --sub:#52604f;
  --stroke:color-mix(in srgb,var(--canvas),#20291e 14%);
  background-color:var(--canvas);
  color:var(--menu-ink);
}
.customer:not(.dark) :is(.customer-menu,.customer-offers,.public-footer) {
  background:color-mix(in srgb,var(--canvas) 14%,var(--card));
  color:var(--copy);
  padding:clamp(10px,2vw,22px);
  border-radius:16px;
}
.customer:not(.dark) .public-footer {border-radius:0}
.customer:not(.dark) .customer-bar {color:var(--copy)}
.customer-hero {background-color:var(--hero-color);overflow-wrap:anywhere}
.customer :is(.customer-brand,.public-item,.public-offer) {overflow-wrap:anywhere}
.customer-hero::before {
  background:linear-gradient(270deg,color-mix(in srgb,var(--hero-color),black 68%) 4%,color-mix(in srgb,var(--hero-color) 70%,#0005) 57%,transparent);
}
.customer .customer-categories button.active,.customer :is(.public-offer,.public-item)>i,.customer .cart-float,.public-dialog .public-primary,.public-dialog .order-success>span {color:var(--on-accent)}
.customer .cart-float i {background:var(--on-accent);color:var(--accent)}
.menu-preview-banner {background:#212c23;color:#fff;text-align:center;padding:6px 12px;font-size:13px}

/* Bistro uses the rhythm of a printed menu. */
.menu-template-bistro .customer-wrap {max-width:900px}
.menu-template-bistro .customer-hero {border-radius:2px;justify-content:center;text-align:center;border-block:5px double #ffffff80}
.menu-template-bistro .customer-hero::before {background:#140a087d}
.menu-template-bistro .contact-row {justify-content:center}
.menu-template-bistro .customer-categories {border-block:1px solid var(--stroke);margin-block:6px 16px;padding:7px 0}
.menu-template-bistro .customer-categories button {border-radius:2px}
.menu-template-bistro .public-category h3 {border-bottom:3px double var(--stroke);padding-bottom:8px}
.menu-template-bistro .layout-wide {grid-template-columns:1fr;gap:0}
.menu-template-bistro .layout-wide .public-item {border:0;border-bottom:1px dashed var(--stroke);border-radius:0;background:transparent;padding:10px 4px}
.menu-template-bistro .layout-wide .public-item>img,.menu-template-bistro .layout-wide .public-placeholder {width:65px;height:53px;border-radius:2px}
.menu-template-bistro .layout-wide .item-copy {display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:8px;align-items:center}
.menu-template-bistro .layout-wide .item-copy em {grid-row:2;grid-column:1/-1}
.menu-template-bistro .layout-wide .item-copy strong {grid-area:1/2;text-align:end}

/* Gallery gives the cover and item photos more room. */
.menu-template-gallery .customer-hero {align-items:flex-end;min-height:clamp(320px,47vw,490px);border-radius:26px}
.menu-template-gallery .customer-hero.compact {min-height:235px}
.menu-template-gallery .customer-hero::before {background:linear-gradient(0deg,#080611f5,#08061190 55%,#08061114)}
.menu-template-gallery .public-hero-copy {max-width:100%}
.menu-template-gallery .layout-square {grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.menu-template-gallery .layout-square .public-item {padding:0 0 14px;gap:9px;border-radius:20px}
.menu-template-gallery .layout-square .public-item>img,.menu-template-gallery .layout-square .public-placeholder {border-radius:0;aspect-ratio:1.55}
.menu-template-gallery .layout-square .item-copy {padding-inline-start:12px}
.menu-template-gallery .layout-square .public-item>i {margin-inline-end:10px;border-radius:50%}

/* The café layout keeps the cover beside the introduction. */
.menu-template-cafe .customer-wrap {max-width:990px}
.menu-template-cafe .customer-hero {border-radius:14px 14px 64px 14px;background-image:none;border:4px double #ffffff80}
.menu-template-cafe .customer-hero.has-cover::after {content:"";position:absolute;z-index:-1;inset:9px;inset-inline-start:62%;border-radius:9px 9px 51px 9px;background:var(--cover) center/cover}
.menu-template-cafe .customer-hero.has-cover .public-hero-copy {width:62%}
.menu-template-cafe .public-hero-copy h1 {font-size:clamp(33px,6vw,71px)}
.menu-template-cafe .customer-categories {padding-block:8px 12px}
.menu-template-cafe .layout-wide .public-item {border-radius:100px 24px 24px 100px;padding:9px}
.menu-template-cafe .layout-wide .public-item>img,.menu-template-cafe .layout-wide .public-placeholder {border-radius:50%;width:76px;height:76px}
.menu-template-cafe .public-item>i {border-radius:50%}

/* Street uses square corners, offset borders and large headings. */
.menu-template-street .customer-hero {border-radius:0;border:3px solid var(--hero-color);box-shadow:5px 5px 0 var(--accent)}
.menu-template-street .customer-hero::before {background:linear-gradient(270deg,#110c1bf2,#110c1bb3 70%,#110c1b5c)}
.menu-template-street .public-hero-copy h1 {font-weight:900;letter-spacing:-.055em}
.menu-template-street .customer-categories button,.menu-template-street .public-item,.menu-template-street .public-offer {border:2px solid var(--copy);border-radius:1px}
.menu-template-street .public-category h3 {background:var(--accent);color:var(--on-accent);padding:5px 9px;border:2px solid var(--copy)}
.menu-template-street .public-item>img,.menu-template-street .public-placeholder,.menu-template-street .public-item>i {border-radius:0}
.menu-template-street .layout-square .public-item>img,.menu-template-street .layout-square .public-placeholder {aspect-ratio:1.28}

.template-picker {display:grid;grid-template-columns:repeat(auto-fit,minmax(min(132px,100%),1fr));gap:9px;border:0;padding:0;margin:0 0 16px;min-width:0}
.template-option {position:relative;display:block;cursor:pointer;min-width:0}
.template-option input {position:absolute;inset-block-start:8px;inset-inline-start:8px;z-index:1;margin:0;accent-color:#a62b2b}
.template-tile {display:grid;align-content:start;gap:4px;height:100%;padding:7px;border:1px solid #e7d6d1;border-radius:11px;background:#fffdf8}
.template-tile strong,.template-tile small {padding-inline:3px;line-height:1.4}
.template-tile small {font-size:11px;color:#695459}
.template-option input:checked+.template-tile {border-color:#a62b2b;box-shadow:0 0 0 1px #a62b2b;background:#fff2e8}
.template-option input:focus-visible+.template-tile {outline:2px solid #a62b2b;outline-offset:3px}
.template-picker legend.visually-hidden {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.template-sketch {display:grid;grid-template-columns:1fr 1fr;grid-template-rows:34px 1fr;gap:4px;padding:8px 9px;height:70px;background:var(--menu-canvas);border-radius:6px}
.template-sketch i {grid-column:span 2;background:var(--hero-color);border-radius:5px;display:grid;align-items:center;padding:7px}
.template-sketch i::after {content:"";width:30%;height:4px;background:var(--accent);border-radius:2px}
.template-sketch b {background:color-mix(in srgb,var(--accent),white 55%);border-radius:3px}
.sketch-bistro {grid-template-rows:25px 1fr 1fr}
.sketch-bistro b {grid-column:span 2;height:4px}
.sketch-bistro i {border-radius:0;justify-items:center}
.sketch-gallery {grid-template-rows:39px 1fr}
.sketch-gallery i {align-items:end;border-radius:8px}
.sketch-cafe i {border-radius:4px 4px 20px 4px}
.sketch-cafe b {border-radius:100px}
.sketch-street :is(i,b) {border-radius:0;border:1px solid var(--hero-color)}
.sketch-street i {box-shadow:3px 3px 0 var(--accent)}
.theme-workbench {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,270px);gap:14px;align-items:start}
.theme-colors {display:grid;grid-template-columns:repeat(auto-fit,minmax(95px,1fr));gap:8px;margin-bottom:10px}
.theme-colors input[type=color] {width:100%;height:44px;padding:4px;cursor:pointer}
.theme-example>p {font-size:12px;margin:0 0 5px;color:#695459}
.theme-demo.customer {min-height:0;border:1px solid var(--stroke);border-radius:12px;padding:8px;overflow:hidden}
.theme-demo .customer-hero {min-height:66px;margin:0;border-radius:8px}
.theme-demo.menu-template-bistro .customer-hero,.theme-demo.menu-template-street .customer-hero {border-radius:0}
.theme-demo .public-hero-copy {padding:8px 12px}
.theme-demo .public-hero-copy h2 {font-size:17px;margin:0}
.theme-demo .customer-categories {margin:6px 0;padding:0;border:0}
.theme-demo .customer-categories span {background:var(--accent);color:var(--on-accent);border-radius:4px;padding:2px 8px;font-size:11px}
.theme-demo .public-grid {grid-template-columns:1fr}
.theme-demo .public-item {padding:5px;gap:6px}
.theme-demo .layout-wide .public-item .public-placeholder {width:34px;height:29px}
.theme-demo .layout-square .public-item .public-placeholder {height:23px}
.theme-demo .public-item b,.theme-demo .public-item strong {font-size:11px}
@media(max-width:650px) {
  .theme-workbench {grid-template-columns:1fr}
  .menu-template-gallery .layout-square {gap:8px}
  .menu-template-gallery .layout-square .public-item {border-radius:12px;gap:5px}
  .menu-template-gallery .layout-square .item-copy {padding-inline-start:6px}
  .menu-template-gallery .layout-square .public-item>i {margin-inline-end:4px}
  .menu-template-cafe .customer-hero.has-cover .public-hero-copy {width:67%}
  .menu-template-cafe .customer-hero.has-cover::after {inset-inline-start:67%}
  .menu-template-cafe .layout-wide .public-item>img,.menu-template-cafe .layout-wide .public-placeholder {width:61px;height:61px}
}