/* Style selector stays outside the client screen so it is also available in the embed. */
.intro .demo-appearance{display:flex;align-items:center;gap:10px;margin-right:auto;min-width:0}.demo-appearance label{font-size:12px;font-weight:650;color:#2c4a41;white-space:nowrap}.demo-appearance select{width:150px;min-height:38px;border:1px solid #91a68e;border-radius:6px;padding:7px 10px;background:#fff;color:#203334;font-size:13px}.demo-appearance select:focus-visible{outline:3px solid #67a493;outline-offset:2px}
#phone[data-menu-theme]{--bg:#fff;--surface:#fff;--ink:#203334;--muted:#5e6b67;--line:#c4d0bf;--accent:#233a38;--accent-ink:#fff;--accent-soft:#edf1e7;--sunk:#f2f2e9;background:var(--bg);color:var(--ink)}
#phone[data-menu-theme] .screen,#phone[data-menu-theme] .cover,#phone[data-menu-theme] .searchbar,#phone[data-menu-theme] .tabs,#phone[data-menu-theme] .dock,#phone[data-menu-theme] .card,#phone[data-menu-theme] .drink,#phone[data-menu-theme] .sheet{background:var(--bg);color:var(--ink);border-color:var(--line)}
#phone[data-menu-theme] .cover h2,#phone[data-menu-theme] .name{color:var(--ink)}
#phone[data-menu-theme] .cover p,#phone[data-menu-theme] .desc,#phone[data-menu-theme] .hint{color:var(--muted)}
#phone[data-menu-theme] .price,#phone[data-menu-theme] .cat h3{color:var(--accent)}
#phone[data-menu-theme] .langsel,#phone[data-menu-theme] .search,#phone[data-menu-theme] .chip,#phone[data-menu-theme] .promo,#phone[data-menu-theme] .sheet textarea{background:var(--surface);color:var(--ink);border-color:var(--line)}
#phone[data-menu-theme] .langsel option{background:var(--surface);color:var(--ink)}
#phone[data-menu-theme] .tablechip,#phone[data-menu-theme] .chip[aria-pressed=true],#phone[data-menu-theme] .tab[aria-current=true]{background:var(--accent-soft);color:var(--accent)}
#phone[data-menu-theme] .dock .selbtn,#phone[data-menu-theme] .plus,#phone[data-menu-theme] .sheet .big{background:var(--accent);color:var(--accent-ink)}
#phone[data-menu-theme] .dock .callbtn{background:var(--accent-soft);color:var(--accent);border-color:var(--line)}
#phone[data-menu-theme] .cat h3{border-color:var(--line)}
#phone[data-menu-theme] .cover{border-bottom:1px solid var(--line);padding:20px 16px 24px}
#phone[data-menu-theme] .cover h2{margin:17px 0 10px;line-height:1.15}
#phone[data-menu-theme] .cover:after{content:"";display:block;height:3px;width:42px;background:var(--accent);margin-top:20px}
#phone[data-menu-theme=atelier]{--bg:#f8f4ea;--surface:#fffcf4;--ink:#2c3027;--muted:#59604e;--line:#d3d7c4;--accent:#53623d;--accent-ink:#fff;--accent-soft:#e8ecdd;--sunk:#e8ecdd}
#phone[data-menu-theme=atelier] .cover{text-align:center;margin:10px;border:1px solid var(--line)}
#phone[data-menu-theme=atelier] .cover .logo,#phone[data-menu-theme=atelier] .cover:after{margin-inline:auto}
#phone[data-menu-theme=atelier] .cover h2{font:italic 29px/1.15 Georgia,serif;letter-spacing:-.03em}
#phone[data-menu-theme=atelier] .cat h3{font:22px/1.2 Georgia,serif!important;text-align:center;text-transform:none;letter-spacing:0;border-bottom:3px double var(--line)}
#phone[data-menu-theme=atelier] .card .photo{border-radius:50%}#phone[data-menu-theme=atelier] .name{font-family:Georgia,serif;font-size:15px}
#phone[data-menu-theme=nocturne]{--bg:#172622;--surface:#263934;--ink:#f9f5e9;--muted:#c1c9c7;--line:#445550;--accent:#edce95;--accent-ink:#172622;--accent-soft:#2d3d3e;--sunk:#223530;--ok:#9cd2ac;--ok-soft:#274333;--warn:#f3cd91;--warn-soft:#4a3821;--crit:#ffc0b6;--crit-soft:#51342e}
#phone[data-menu-theme=nocturne] .cover{margin:10px;border:1px solid var(--line);background:linear-gradient(135deg,#233a33,#172622)}
#phone[data-menu-theme=nocturne] .cover h2{font:29px/1.15 Georgia,serif;letter-spacing:-.02em}
#phone[data-menu-theme=nocturne] .cat h3{letter-spacing:.17em}
#phone[data-menu-theme=nocturne] .sheet .opt,#phone[data-menu-theme=nocturne] .sheet .variant,#phone[data-menu-theme=nocturne] .stepper button{background:var(--surface);color:var(--ink);border-color:var(--line)}
#phone[data-menu-theme=nocturne] .sheet .x{background:var(--surface);color:var(--ink);border-color:var(--line)}
#phone[data-menu-theme=trattoria]{--bg:#fff9ef;--surface:#fffdf7;--ink:#3d2a24;--muted:#73594e;--line:#dfc9b8;--accent:#9d3827;--accent-ink:#fff;--accent-soft:#f5e2d7;--sunk:#f6ebdf}
#phone[data-menu-theme=trattoria] .cover{border-top:5px solid var(--accent)}
#phone[data-menu-theme=trattoria] .cover h2{font:700 29px/1.1 Georgia,serif;letter-spacing:-.04em}
#phone[data-menu-theme=trattoria] .cover:after{background:#596b3f}
#phone[data-menu-theme=trattoria] .cat h3{font:700 22px/1.2 Georgia,serif!important;text-transform:none;letter-spacing:-.02em}
#phone[data-menu-theme=trattoria] .card{margin-bottom:8px;padding:12px;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
#phone[data-menu-theme=trattoria] .card .photo{border-radius:13px 3px 13px 3px}
#phone[data-menu-theme=trattoria] .cardwrap .plus{left:auto;right:12px;top:auto;bottom:12px}
#phone[data-menu-theme=trattoria] .card-body{padding-bottom:27px}
#phone[data-menu-theme=comptoir]{--bg:#f2f8f4;--surface:#fff;--ink:#10362c;--muted:#3d6155;--line:#bad9c9;--accent:#116448;--accent-ink:#fff;--accent-soft:#ddefe3;--sunk:#e4f1e9}
#phone[data-menu-theme=comptoir] .cover{background:#103e31;margin:10px;border-radius:12px;color:#fff}
#phone[data-menu-theme=comptoir] .cover h2{color:#fff;font-size:28px;font-weight:800}
#phone[data-menu-theme=comptoir] .cover p{color:#e0f3e6}#phone[data-menu-theme=comptoir] .cover:after{background:#bce3a2}
#phone[data-menu-theme=comptoir] .card{background:#fff;padding:12px;border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:8px;margin-bottom:9px}
#phone[data-menu-theme=comptoir] .card-body{padding-bottom:27px}
#phone[data-menu-theme=comptoir] .cardwrap .plus{left:auto;right:12px;top:auto;bottom:12px}
@media(min-width:1000px){.embedded .intro .demo-appearance{display:flex;flex:1}.embedded .demo-appearance label{color:#f2f2e9}.embedded .demo-appearance select{min-height:36px}.intro .demo-appearance{margin-left:auto;flex:0 0 auto}.embedded .intro{justify-content:space-between}}
@media(max-width:999px){.intro .demo-appearance,.embedded .intro .demo-appearance{display:flex;grid-column:1/-1;width:100%;margin:0;justify-content:space-between;gap:8px}.demo-appearance label{font-size:11px}.demo-appearance select{width:160px;min-height:36px;padding:6px 9px;font-size:12px}.embedded .intro .demo-appearance{grid-row:1}.embedded .intro .switch{grid-row:2}.intro .switch{margin-top:0}#phone[data-menu-theme] .cover{padding:14px 13px 18px}#phone[data-menu-theme] .cover h2{font-size:25px}#phone[data-menu-theme] .cover:after{margin-top:15px}}
#phone[data-menu-theme] .tab{color:var(--muted)}#phone[data-menu-theme] .tab[aria-current=true]{color:var(--accent)}#phone[data-menu-theme] input::placeholder{color:var(--muted);opacity:1}#phone[data-menu-theme] .menu-promotions>summary{background:var(--surface);color:var(--ink);border-color:var(--line)}

/* Visual choices replace the dropdown on every screen. */
.intro .demo-appearance,.embedded .intro .demo-appearance{display:flex;align-items:center;gap:20px;margin:0 auto 0 0;flex:1;min-width:0}.demo-style-heading>span{display:block;font-size:12px;color:#233a38;font-weight:650}.demo-style-heading>small{display:block;font-size:10px;color:#6b7d66;margin-top:3px}.demo-style-options{display:flex;gap:7px;padding:5px;background:#ffffffb3;border:1px solid #cbd6c3;border-radius:12px}.demo-style-options button{display:flex;align-items:center;gap:7px;border:1px solid transparent;border-radius:8px;background:transparent;color:#51644a;min-height:36px;padding:7px 10px;font-size:10px;font-weight:600}.demo-style-options button[aria-pressed=true]{background:#233a38;color:#fff;border-color:#233a38;box-shadow:0 2px 5px #1d332518}.style-swatch{width:12px;height:16px;border-radius:3px;border:1px solid #ffffff70;box-shadow:0 0 0 1px #263b2920;display:block;flex-shrink:0}.swatch-classique{background:linear-gradient(90deg,#233a38 45%,#f2f2e9 45%)}.swatch-atelier{background:linear-gradient(90deg,#758554 45%,#f8f4ea 45%)}.swatch-nocturne{background:linear-gradient(90deg,#172622 55%,#edce95 55%)}.swatch-trattoria{background:linear-gradient(90deg,#9d3827 45%,#fff9ef 45%)}.swatch-comptoir{background:linear-gradient(90deg,#116448 45%,#c4e4cb 45%)}
@media(min-width:1000px){.embedded .intro .demo-appearance{flex:1}.embedded .demo-style-heading>span{color:#233a38}.embedded .demo-style-heading>small{color:#6b7d66}.embedded body{background:transparent}.embedded .label,.embedded .staff-device-label{color:#61765a}.embedded .phone,.embedded .staff{border-color:#58745b;box-shadow:0 10px 24px #263d2914}.embedded .devtabs button[aria-current=true]{background:#233a38;color:#fff;border-color:#233a38}}
@media(max-width:999px){.intro .demo-appearance,.embedded .intro .demo-appearance{display:block;width:100%;grid-column:1/-1}.demo-style-heading{display:flex;justify-content:space-between;gap:10px;margin-bottom:7px}.demo-style-heading>span{font-size:11px}.demo-style-heading>small{font-size:9px;margin:0}.demo-style-options{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:3px;padding:4px;width:100%}.demo-style-options button{flex-direction:column;gap:5px;min-width:0;font-size:10px;min-height:49px;padding:6px 2px}.style-swatch{width:20px;height:9px;border-radius:2px}.embedded .intro .demo-appearance{grid-row:1}.embedded .intro .switch{grid-row:2}.embedded .intro{gap:8px}.embedded body{background:#edf1e9}.switch a[aria-current=true]{background:#233a38}}
@media(max-width:359px){.demo-style-options button{font-size:9px;padding-inline:1px}.demo-style-heading>span{font-size:10px}}

/* Shared brand treatments, including native controls and keyboard focus. */
:root{accent-color:#233a38}::selection{background:#c4d8c8;color:#192c2b}:where(a,button,input,select,textarea,summary):focus-visible{outline:2px solid #52745c;outline-offset:3px}