/* Generated by scripts/sync-product-menu.mjs. Scoped app CSS; do not hand-edit. */
*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}/*
! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
*//*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 221.2 83.2% 53.3%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 221.2 83.2% 53.3%;
    --radius: 0.5rem;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 217.2 91.2% 59.8%;
    --primary-foreground: 222.2 47.4% 11.2%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 224.3 76.3% 48%;
  }
  * {
  --tw-border-opacity: 1;
  border-color: hsl(var(--border) / var(--tw-border-opacity, 1));
}
  body {
  --tw-bg-opacity: 1;
  background-color: hsl(var(--background) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: hsl(var(--foreground) / var(--tw-text-opacity, 1));
}
.container {
  width: 100%;
}
@media (min-width: 640px) {

  .container {
    max-width: 640px;
  }
}
@media (min-width: 768px) {

  .container {
    max-width: 768px;
  }
}
@media (min-width: 1024px) {

  .container {
    max-width: 1024px;
  }
}
@media (min-width: 1280px) {

  .container {
    max-width: 1280px;
  }
}
@media (min-width: 1536px) {

  .container {
    max-width: 1536px;
  }
}
  .public-chrome-frame {
    color: hsl(var(--foreground));
    background: hsl(var(--background));
    font-family: var(--public-font-body), ui-sans-serif, system-ui, sans-serif;
    letter-spacing: 0.002em;
  }

  .public-chrome-frame .public-section-heading,
  .public-chrome-frame .public-site-brand-name,
  .public-mobile-nav [data-radix-dialog-title] {
    font-family: var(--public-font-display), ui-serif, Georgia, serif;
  }

  .public-main {
    overflow-x: clip;
  }

  /* The menu keeps one accessible structure; these hooks let each preset own
     its hierarchy without branching the menu data or interaction model. */

  .public-menu-categories,
  .public-menu-accordion-item,
  .public-menu-list,
  .public-item-detail-heading,
  .public-item-detail-section,
  .public-related-products,
  .public-suggested-drinks,
  .public-order-list-header {
    border-color: hsl(var(--public-rule));
  }

  .public-menu-category-heading,
  .public-menu-item-name,
  .public-item-detail-label,
  .public-themed-portal .public-section-heading {
    font-family: var(--public-font-display), ui-serif, Georgia, serif;
  }

  .public-chrome-frame .public-menu-price,
  .public-themed-portal .public-menu-price {
    font-weight: 750;
    color: hsl(var(--foreground));
  }

  .public-allergen-list {
    row-gap: 0.4rem;
  }

  .public-allergen-badge {
    color: hsl(var(--foreground));
    border-width: 1px;
    box-shadow: none;
  }

  .public-allergen-inline,
  .public-allergen-count {
    color: hsl(var(--muted-foreground));
  }

  .public-item-detail-body {
    background: hsl(var(--background));
  }

  .public-item-detail-category {
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .public-item-variant {
    min-height: 2.75rem;
    gap: 0.75rem;
    border-top: 1px solid hsl(var(--public-rule));
    padding-block: 0.65rem;
  }

  .public-themed-portal {
    color: hsl(var(--foreground));
    border-color: hsl(var(--public-rule));
    background: hsl(var(--background));
    font-family: var(--public-font-body), ui-sans-serif, system-ui, sans-serif;
  }

  .public-product-dialog,
  .public-product-sheet,
  .public-order-list-sheet {
    border-color: hsl(var(--public-rule));
  }

  .public-chrome-frame .public-order-action,
  .public-themed-portal .public-order-action {
    color: hsl(var(--foreground));
  }

  .public-chrome-frame .public-order-action:hover,
  .public-themed-portal .public-order-action:hover {
    color: hsl(var(--primary-foreground));
  }

  .public-chrome-frame .public-order-action:focus-visible,
  .public-themed-portal .public-order-action:focus-visible {
    outline: 2px solid hsl(var(--foreground));
    outline-offset: 3px;
  }

  /* Modern: the public rendering from before the preset system landed.
     These resets deliberately retain the semantic hooks and later interaction
     fixes while removing the shared editorial treatment applied above. */
  .public-chrome-frame[data-public-style="modern"],
  .public-mobile-nav[data-public-style="modern"],
  .public-themed-portal[data-public-style="modern"] {
    font-family: inherit;
    letter-spacing: normal;
  }

  .public-chrome-frame[data-public-style="modern"] .public-section-heading,
  .public-chrome-frame[data-public-style="modern"] .public-site-brand-name,
  .public-chrome-frame[data-public-style="modern"]
    .public-menu-category-heading,
  .public-chrome-frame[data-public-style="modern"] .public-menu-item-name,
  .public-mobile-nav[data-public-style="modern"] [data-radix-dialog-title],
  .public-themed-portal[data-public-style="modern"] .public-section-heading,
  .public-themed-portal[data-public-style="modern"] .public-menu-item-name,
  .public-themed-portal[data-public-style="modern"] .public-item-detail-label {
    font-family: inherit;
    letter-spacing: normal;
    text-transform: none;
  }

  .public-chrome-frame[data-public-style="modern"] .public-site-header {
    border-color: hsl(var(--border));
    background: hsl(var(--background) / 0.95);
    box-shadow: none;
  }

  .public-chrome-frame[data-public-style="modern"] .public-site-header-inner {
    gap: 0;
  }

  .public-chrome-frame[data-public-style="modern"] .public-site-brand-name {
    letter-spacing: normal;
  }

  .public-chrome-frame[data-public-style="modern"] .public-site-nav {
    column-gap: 1rem;
  }

  .public-chrome-frame[data-public-style="modern"] .public-site-nav button {
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
  }

  .public-chrome-frame[data-public-style="modern"] .public-menu-card,
  .public-themed-portal[data-public-style="modern"] .public-order-list-item {
    border-color: hsl(var(--border));
    border-radius: 0.5rem;
    background: hsl(var(--card));
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  }

  .public-chrome-frame[data-public-style="modern"] .public-open-status {
    border: 0;
    border-radius: 9999px;
  }

  .public-chrome-frame[data-public-style="modern"] .public-menu-page,
  .public-chrome-frame[data-public-style="modern"] .public-ordering-page {
    padding-bottom: 0;
  }

  .public-chrome-frame[data-public-style="modern"] .public-menu-category-list {
    border-radius: 0.375rem;
    background: hsl(var(--muted));
  }

  .public-chrome-frame[data-public-style="modern"] .public-menu-card,
  .public-themed-portal[data-public-style="modern"] .public-order-list-item {
    overflow: hidden;
  }

  .public-chrome-frame[data-public-style="modern"]
    .public-menu-card:focus-within,
  .public-themed-portal[data-public-style="modern"]
    .public-order-list-item:focus-within {
    outline: none;
  }

  .public-chrome-frame[data-public-style="modern"] .public-menu-item-image,
  .public-themed-portal[data-public-style="modern"] .public-menu-item-image {
    border-radius: 0.375rem;
    background: hsl(var(--muted));
  }

  .public-chrome-frame[data-public-style="modern"] .public-menu-price,
  .public-themed-portal[data-public-style="modern"] .public-menu-price {
    color: hsl(var(--primary));
    font-weight: 600;
  }

  .public-chrome-frame[data-public-style="modern"]
    .public-menu-row
    .public-menu-price {
    color: hsl(var(--foreground) / 0.7);
    font-weight: 400;
  }

  .public-chrome-frame[data-public-style="modern"] .public-allergen-list {
    row-gap: 0.5rem;
  }

  .public-chrome-frame[data-public-style="modern"] .public-allergen-badge,
  .public-themed-portal[data-public-style="modern"] .public-allergen-badge {
    color: hsl(var(--secondary-foreground));
    box-shadow: none;
  }

  .public-themed-portal[data-public-style="modern"]
    .public-item-detail-category {
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
  }

  .public-themed-portal[data-public-style="modern"] .public-item-detail-label {
    letter-spacing: normal;
  }

  .public-themed-portal[data-public-style="modern"] .public-item-variant {
    min-height: 0;
    gap: 0;
    border-top: 0;
    padding-block: 0;
  }

  .public-themed-portal[data-public-style="modern"] .public-product-dialog,
  .public-themed-portal[data-public-style="modern"] .public-product-sheet,
  .public-themed-portal[data-public-style="modern"] .public-order-list-sheet {
    border-color: hsl(var(--border));
  }

  .public-chrome-frame[data-public-style="modern"] .public-order-action,
  .public-themed-portal[data-public-style="modern"] .public-order-action {
    color: hsl(var(--primary));
  }

  .public-chrome-frame[data-public-style="modern"]
    .public-order-action:focus-visible,
  .public-themed-portal[data-public-style="modern"]
    .public-order-action:focus-visible {
    outline: none;
  }

  @media (max-width: 639px) {

    .public-menu-page,
    .public-ordering-page {
      padding-inline: 1rem;
    }

    .public-menu-row {
      padding-block: 0.9rem;
    }

    .public-item-detail-body,
    .public-order-list-sheet [class*="px-6"] {
      padding-left: 1.25rem;
      padding-right: 1.25rem;
    }
  }

  /* The dish sheet (docs/plans/dish-sheet.md). Two looks on one structure:
     `photo` (delivery-app: image, bold section titles, thumbnails) and
     `editorial` (typographic, no images, small-caps section labels). */
  .public-dish {
    position: relative;
    display: flex;
    min-height: 0;
    flex: 1;
    flex-direction: column;
  }

  .public-dish-scroll {
    min-height: 0;
    flex: 1;
    overflow-y: auto;
  }

  .public-dish-back {
    position: absolute;
    top: 0.5rem;
    left: 0.75rem;
    z-index: 30;
    display: grid;
    width: 2.25rem;
    height: 2.25rem;
    place-items: center;
    border: 1px solid hsl(var(--public-rule));
    border-radius: 999px;
    background: hsl(var(--background) / 0.92);
    color: hsl(var(--foreground));
    backdrop-filter: blur(6px);
  }

  .public-dish-hero {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    max-height: 42dvh;
    background: hsl(var(--muted));
  }

  .public-dish-hero-band {
    height: 4.5rem;
    background: linear-gradient(
      135deg,
      hsl(var(--primary) / 0.2),
      hsl(var(--primary) / 0.05)
    );
  }

  .public-dish-body {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.25rem 1.25rem 1.75rem;
  }

  .public-dish-photo .public-dish-body {
    position: relative;
    margin-top: -1.25rem;
    border-radius: 1.25rem 1.25rem 0 0;
  }

  .public-dish-editorial .public-dish-body {
    gap: 2rem;
    padding: 0.5rem 1.5rem 2rem;
  }

  .public-dish-heading {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .public-dish-editorial .public-dish-heading {
    border-bottom: 1px solid hsl(var(--public-rule));
    padding-bottom: 1.5rem;
  }

  .public-dish-overline {
    color: hsl(var(--muted-foreground));
    font-size: 0.72rem;
  }

  .public-dish-title-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
  }

  .public-dish-name {
    font-size: 1.6rem;
    font-weight: 650;
    line-height: 1.15;
    text-wrap: balance;
  }

  .public-dish-editorial .public-dish-name {
    font-size: 2rem;
    font-weight: 500;
    line-height: 1.1;
  }

  .public-dish-price {
    flex: none;
    font-size: 1.15rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .public-dish-text {
    color: hsl(var(--muted-foreground));
    font-size: 0.975rem;
    line-height: 1.6;
  }

  .public-dish-editorial .public-dish-ingredients {
    font-size: 1.05rem;
    font-style: italic;
  }

  .public-dish-section-title {
    margin-bottom: 0.5rem;
    color: hsl(var(--muted-foreground));
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .public-dish-photo .public-dish-suggestions .public-dish-section-title {
    color: hsl(var(--foreground));
    font-size: 1.1rem;
    letter-spacing: 0;
    text-transform: none;
  }

  .public-dish-facts > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    border-top: 1px solid hsl(var(--public-rule));
    padding-block: 0.4rem;
    font-size: 0.9rem;
  }

  .public-dish-facts dt {
    font-weight: 500;
  }

  .public-dish-facts dd {
    color: hsl(var(--muted-foreground));
    text-align: right;
  }

  .public-dish-sections {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
  }

  .public-dish-suggestion {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-top: 1px solid hsl(var(--public-rule));
    padding-block: 0.7rem;
  }

  .public-dish-suggestion:first-child {
    border-top: 0;
  }

  .public-dish-suggestion-open {
    display: flex;
    min-width: 0;
    min-height: 3rem;
    flex: 1;
    align-items: center;
    gap: 0.75rem;
    text-align: left;
  }

  .public-dish-suggestion-open:focus-visible {
    outline: 2px solid hsl(var(--ring));
    outline-offset: 2px;
    border-radius: calc(var(--radius) * 0.5);
  }

  .public-dish-suggestion-thumb {
    position: relative;
    width: 3.5rem;
    height: 3.5rem;
    flex: none;
    overflow: hidden;
    border-radius: calc(var(--radius) * 0.75);
    background: hsl(var(--muted));
  }

  .public-dish-pinned {
    display: block;
    color: hsl(var(--primary));
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .public-dish-suggestion-name {
    display: block;
    font-weight: 600;
    line-height: 1.3;
  }

  .public-dish-editorial .public-dish-suggestion-name {
    font-family: var(--public-font-display), ui-serif, Georgia, serif;
    font-size: 1.05rem;
    font-weight: 500;
  }

  .public-dish-suggestion-detail {
    display: block;
    overflow: hidden;
    color: hsl(var(--muted-foreground));
    font-size: 0.85rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .public-dish-suggestion-allergens {
    display: block;
    margin-top: 0.25rem;
  }

  .public-dish-suggestion-price {
    flex: none;
    font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
  }

  .public-themed-portal .public-order-action.public-dish-suggestion-add {
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    flex: none;
    place-items: center;
    border: 1.5px solid hsl(var(--primary) / 0.45);
    border-radius: 999px;
    background: hsl(var(--background));
    color: hsl(var(--primary));
  }

  .public-themed-portal .public-order-action.public-dish-suggestion-add:hover,
  .public-themed-portal .public-order-action.public-dish-suggestion-add.is-in-list {
    border-color: hsl(var(--primary));
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
  }

  .public-dish-add-bar {
    flex: none;
    border-top: 1px solid hsl(var(--public-rule));
    background: hsl(var(--background));
    padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
  }

  /* Three classes: the presets colour `.public-order-action` at two, plus an
     attribute (`[data-public-style="modern"] .public-order-action`). */
  .public-themed-portal .public-order-action.public-dish-add-button {
    display: flex;
    width: 100%;
    min-height: 3.25rem;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: var(--radius);
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    font-weight: 650;
    transition: transform 120ms ease;
  }

  .public-themed-portal .public-order-action.public-dish-add-button:hover {
    color: hsl(var(--primary-foreground));
    filter: brightness(1.05);
  }

  .public-themed-portal .public-order-action.public-dish-add-button:active {
    transform: scale(0.98);
  }

  .public-dish-add-count {
    margin-left: 0.25rem;
    border-radius: 999px;
    background: hsl(var(--primary-foreground) / 0.2);
    padding: 0.1rem 0.55rem;
    font-size: 0.75rem;
  }

  /* Desktop dialog: the dish on the left, what goes with it on the right. */
  .public-dish-layout-dialog .public-dish-columns:has(> .public-dish-aside) {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  }

  .public-dish-layout-dialog .public-dish-hero {
    aspect-ratio: 16 / 10;
    max-height: 50vh;
  }

  .public-dish-layout-dialog .public-dish-body {
    padding-inline: 1.75rem;
  }

  .public-dish-aside {
    border-left: 1px solid hsl(var(--public-rule));
    background: hsl(var(--public-surface-raised));
    padding: 1.75rem 1.5rem;
  }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.pointer-events-none {
  pointer-events: none;
}
.visible {
  visibility: visible;
}
.static {
  position: static;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.inset-0 {
  inset: 0px;
}
.inset-x-0 {
  left: 0px;
  right: 0px;
}
.inset-y-0 {
  top: 0px;
  bottom: 0px;
}
.bottom-0 {
  bottom: 0px;
}
.left-0 {
  left: 0px;
}
.left-\[50\%\] {
  left: 50%;
}
.right-0 {
  right: 0px;
}
.right-2 {
  right: 0.5rem;
}
.right-4 {
  right: 1rem;
}
.top-0 {
  top: 0px;
}
.top-2 {
  top: 0.5rem;
}
.top-4 {
  top: 1rem;
}
.top-\[50\%\] {
  top: 50%;
}
.top-\[var\(--preview-banner-height\)\] {
  top: var(--preview-banner-height);
}
.z-10 {
  z-index: 10;
}
.z-50 {
  z-index: 50;
}
.mb-4 {
  margin-bottom: 1rem;
}
.ml-auto {
  margin-left: auto;
}
.mt-0\.5 {
  margin-top: 0.125rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-3 {
  margin-top: 0.75rem;
}
.mt-4 {
  margin-top: 1rem;
}
.block {
  display: block;
}
.inline {
  display: inline;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.table {
  display: table;
}
.grid {
  display: grid;
}
.hidden {
  display: none;
}
.h-1\.5 {
  height: 0.375rem;
}
.h-11 {
  height: 2.75rem;
}
.h-12 {
  height: 3rem;
}
.h-16 {
  height: 4rem;
}
.h-20 {
  height: 5rem;
}
.h-24 {
  height: 6rem;
}
.h-3\.5 {
  height: 0.875rem;
}
.h-32 {
  height: 8rem;
}
.h-4 {
  height: 1rem;
}
.h-40 {
  height: 10rem;
}
.h-48 {
  height: 12rem;
}
.h-5 {
  height: 1.25rem;
}
.h-64 {
  height: 16rem;
}
.h-8 {
  height: 2rem;
}
.h-9 {
  height: 2.25rem;
}
.h-\[var\(--control-height\2c 2\.5rem\)\] {
  height: var(--control-height,2.5rem);
}
.h-full {
  height: 100%;
}
.max-h-\[88vh\] {
  max-height: 88vh;
}
.max-h-\[calc\(100vh-3rem\)\] {
  max-height: calc(100vh - 3rem);
}
.min-h-0 {
  min-height: 0px;
}
.min-h-\[40px\] {
  min-height: 40px;
}
.min-h-screen {
  min-height: 100vh;
}
.w-12 {
  width: 3rem;
}
.w-16 {
  width: 4rem;
}
.w-20 {
  width: 5rem;
}
.w-24 {
  width: 6rem;
}
.w-3\.5 {
  width: 0.875rem;
}
.w-3\/4 {
  width: 75%;
}
.w-4 {
  width: 1rem;
}
.w-5 {
  width: 1.25rem;
}
.w-8 {
  width: 2rem;
}
.w-\[var\(--control-height\2c 2\.5rem\)\] {
  width: var(--control-height,2.5rem);
}
.w-full {
  width: 100%;
}
.min-w-0 {
  min-width: 0px;
}
.max-w-4xl {
  max-width: 56rem;
}
.max-w-lg {
  max-width: 32rem;
}
.flex-1 {
  flex: 1 1 0%;
}
.flex-shrink-0 {
  flex-shrink: 0;
}
.translate-x-\[-50\%\] {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-\[-50\%\] {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.cursor-default {
  cursor: default;
}
.cursor-grab {
  cursor: grab;
}
.cursor-pointer {
  cursor: pointer;
}
.touch-none {
  touch-action: none;
}
.touch-manipulation {
  touch-action: manipulation;
}
.resize {
  resize: both;
}
.flex-col {
  flex-direction: column;
}
.flex-col-reverse {
  flex-direction: column-reverse;
}
.flex-wrap {
  flex-wrap: wrap;
}
.items-start {
  align-items: flex-start;
}
.items-center {
  align-items: center;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.gap-0 {
  gap: 0px;
}
.gap-1\.5 {
  gap: 0.375rem;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-3 {
  gap: 0.75rem;
}
.gap-4 {
  gap: 1rem;
}
.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
}
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.overflow-hidden {
  overflow: hidden;
}
.overscroll-contain {
  overscroll-behavior: contain;
}
.whitespace-nowrap {
  white-space: nowrap;
}
.break-all {
  word-break: break-all;
}
.rounded {
  border-radius: 0.25rem;
}
.rounded-full {
  border-radius: 9999px;
}
.rounded-md {
  border-radius: calc(var(--radius) - 2px);
}
.rounded-sm {
  border-radius: calc(var(--radius) - 4px);
}
.rounded-t-2xl {
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}
.border {
  border-width: 1px;
}
.border-b {
  border-bottom-width: 1px;
}
.border-l {
  border-left-width: 1px;
}
.border-r {
  border-right-width: 1px;
}
.border-t {
  border-top-width: 1px;
}
.border-input {
  --tw-border-opacity: 1;
  border-color: hsl(var(--input) / var(--tw-border-opacity, 1));
}
.border-transparent {
  border-color: transparent;
}
.bg-background {
  --tw-bg-opacity: 1;
  background-color: hsl(var(--background) / var(--tw-bg-opacity, 1));
}
.bg-black\/80 {
  background-color: rgb(0 0 0 / 0.8);
}
.bg-destructive {
  --tw-bg-opacity: 1;
  background-color: hsl(var(--destructive) / var(--tw-bg-opacity, 1));
}
.bg-muted-foreground\/40 {
  background-color: hsl(var(--muted-foreground) / 0.4);
}
.bg-primary {
  --tw-bg-opacity: 1;
  background-color: hsl(var(--primary) / var(--tw-bg-opacity, 1));
}
.bg-secondary {
  --tw-bg-opacity: 1;
  background-color: hsl(var(--secondary) / var(--tw-bg-opacity, 1));
}
.object-cover {
  object-fit: cover;
}
.p-0 {
  padding: 0px;
}
.p-3 {
  padding: 0.75rem;
}
.p-6 {
  padding: 1.5rem;
}
.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.px-2\.5 {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}
.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}
.py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}
.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-20 {
  padding-top: 5rem;
  padding-bottom: 5rem;
}
.pb-3 {
  padding-bottom: 0.75rem;
}
.pt-3 {
  padding-top: 0.75rem;
}
.pt-\[var\(--public-chrome-height\)\] {
  padding-top: var(--public-chrome-height);
}
.text-center {
  text-align: center;
}
.text-\[10px\] {
  font-size: 10px;
}
.text-\[11px\] {
  font-size: 11px;
}
.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}
.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
.font-medium {
  font-weight: 500;
}
.font-semibold {
  font-weight: 600;
}
.italic {
  font-style: italic;
}
.tabular-nums {
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.leading-none {
  line-height: 1;
}
.tracking-tight {
  letter-spacing: -0.025em;
}
.text-destructive-foreground {
  --tw-text-opacity: 1;
  color: hsl(var(--destructive-foreground) / var(--tw-text-opacity, 1));
}
.text-foreground {
  --tw-text-opacity: 1;
  color: hsl(var(--foreground) / var(--tw-text-opacity, 1));
}
.text-muted-foreground {
  --tw-text-opacity: 1;
  color: hsl(var(--muted-foreground) / var(--tw-text-opacity, 1));
}
.text-primary {
  --tw-text-opacity: 1;
  color: hsl(var(--primary) / var(--tw-text-opacity, 1));
}
.text-primary-foreground {
  --tw-text-opacity: 1;
  color: hsl(var(--primary-foreground) / var(--tw-text-opacity, 1));
}
.text-secondary-foreground {
  --tw-text-opacity: 1;
  color: hsl(var(--secondary-foreground) / var(--tw-text-opacity, 1));
}
.underline {
  text-decoration-line: underline;
}
.underline-offset-4 {
  text-underline-offset: 4px;
}
.opacity-70 {
  opacity: 0.7;
}
.shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.outline {
  outline-style: solid;
}
.ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-offset-background {
  --tw-ring-offset-color: hsl(var(--background) / 1);
}
.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.\!filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important;
}
.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.duration-200 {
  transition-duration: 200ms;
}
.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes enter {

  from {
    opacity: var(--tw-enter-opacity, 1);
    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));
  }
}
@keyframes exit {

  to {
    opacity: var(--tw-exit-opacity, 1);
    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
  }
}
.duration-200 {
  animation-duration: 200ms;
}
.ease-in-out {
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.running {
  animation-play-state: running;
}
.paused {
  animation-play-state: paused;
}

  /* A pending plain link fades. Correct where the link *is* the text. */
  [data-navigation-pending="true"] {
    opacity: 0.6;
  }

  /* A pending navigation *row* fills instead of fading. Removing 40% of a
     row's contrast is a change you have to be looking at the row to notice;
     adding colour and a leading edge marker is one you catch from anywhere on
     the screen, which is the whole difference the owner reported. */
  [data-navigation-pending="row"] > button {
    background-color: hsl(var(--primary) / 0.15);
    box-shadow: inset 3px 0 0 0 hsl(var(--primary));
  }

  /* Horizontal scroll padding utility so first/last items are fully reachable */

  /* Lightweight CSS animation to replace Framer Motion */
  @keyframes fade-in-up {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
/* Fixed public preview/header chrome must not cover anchor and category targets. */
.public-chrome-frame [id] {
  scroll-margin-top: calc(var(--public-chrome-height) + 1rem);
}

/*
 * On a phone the admin's surfaces run edge to edge, like the *Altro* sheet's
 * rows, instead of floating inside the page's 16 px gutter
 * (docs/plans/admin-phone-polish.md). Two ways in:
 *
 * - every `Card` (it carries `data-card`) that is not inside another card, so
 *   a choice box drawn as a card inside a card keeps its frame;
 * - `.admin-bleed`, for a surface drawn without `Card` (a link list, a table).
 *
 * `data-inset` opts a card out, for one that does not sit on the 16 px gutter;
 * on a container it opts out every card inside (a row of side-by-side tiles).
 * Scoped to the admin's `<main>`: dialogs and sheets are portalled outside it,
 * and the public site's cards never match. From `md` up nothing changes.
 */
@media (max-width: 767.98px) {
  #admin-main-content [data-card]:not([data-card] [data-card]):not([data-inset]):not([data-inset] [data-card]),
  #admin-main-content .admin-bleed {
    margin-inline: -1rem;
    border-radius: 0;
    border-left-width: 0;
    border-right-width: 0;
    box-shadow: none;
  }
}

/*
 * The personalities' tokens, in one place for everything that draws in them:
 * the sectioned pages (`.pp`) and every venue's public chrome (`.pc` — the
 * chrome frame: header, navigation panel, plus the menu when it follows the
 * personality). Colours come from the venue's template tokens
 * (HSL triplets on the chrome frame); `--accent2` is set beside the
 * attribute. `.pc` names its colours `--p-*` and its corner `--p-radius`:
 * the frame already carries shadcn's `--accent` and `--radius`, which every
 * shadcn component on the public site reads.
 */

.pp {
  --bg: hsl(var(--background));
  --fg: hsl(var(--foreground));
  --accent: hsl(var(--primary));
  --ink: var(--fg);
}
/* The same colours under other names: the chrome frame itself carries the
   shadcn triplets (`--accent`, `--background`…) its components read. */
.pc {
  --p-bg: hsl(var(--background));
  --p-fg: hsl(var(--foreground));
  --p-accent: hsl(var(--primary));
  --p-ink: var(--p-fg);
}

:is(.pp, .pc)[data-personality="quieto"] { --f-display: var(--pp-font-fraunces), Georgia, serif; --f-body: var(--pp-font-inter), system-ui, sans-serif; --w-display: 350; --track-display: -0.02em; --case-display: none; --p-radius: 2px; }
:is(.pp, .pc)[data-personality="piazza"] { --f-display: var(--pp-font-bricolage), system-ui, sans-serif; --f-body: var(--pp-font-inter), system-ui, sans-serif; --w-display: 800; --track-display: -0.04em; --case-display: none; --p-radius: 22px; }
:is(.pp, .pc)[data-personality="festa"] { --f-display: var(--pp-font-anton), Impact, sans-serif; --f-body: var(--pp-font-archivo), system-ui, sans-serif; --w-display: 400; --track-display: 0; --case-display: uppercase; --p-radius: 14px; }

/*
 * Every venue's header and navigation panel in its personality
 * (`docs/plans/menu-redesign.md`), as the reviewed
 * prototype (`proto/menu`, `public/proto-menu/menu.css`). Scoped under `.pc`,
 * the chrome frame, including venues whose menu stays Moderno. Tokens:
 * `components/pages/personality.css`.
 */

.pc { --pad: 22px; --navbg: var(--p-bg); --navfg: var(--p-fg); }
.pc[data-personality="piazza"] { --navbg: var(--p-accent); --navfg: var(--p-bg); }
.pc[data-personality="festa"] { --navbg: var(--accent2); --navfg: var(--p-ink); }
.pc[data-personality="festa"][data-dark] { --navfg: var(--p-bg); }

/* ================= header ================= */
.pc .pc-hdr { height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 calc(var(--pad) - 8px) 0 var(--pad); color: var(--p-fg); font-family: var(--f-body); background: color-mix(in srgb, var(--p-bg) 86%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); transition: background-color .35s, color .35s, transform .35s cubic-bezier(.2,.8,.2,1); pointer-events: auto; }
.pc .pc-hdr a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
/* While the panel is open the bar takes the panel's colours. */
.pc:has(> .pc-nav[data-state="open"]) .pc-hdr { background: var(--navbg); color: var(--navfg); -webkit-backdrop-filter: none; backdrop-filter: none; }
.pc .pc-brand { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 44px; }
.pc .pc-logo { height: 40px; width: auto; max-width: 46vw; object-fit: contain; }
.pc[data-dark] .pc-logo { filter: invert(1) brightness(1.4); }
/*
 * A logo drawn for a dark background (`personality-logo.tsx` reads it): on a
 * light header it becomes its own shape in the ink colour; on a dark one it
 * is already right, so it is not inverted. Festa silhouettes every logo anyway.
 */
.pc .pc-logo-box { display: inline-flex; flex: none; max-width: 46vw; }
.pc:not([data-dark]):not([data-personality="festa"]) .pc-logo-box[data-tone="light"] { background: var(--p-fg); -webkit-mask: var(--pc-logo) center / contain no-repeat; mask: var(--pc-logo) center / contain no-repeat; }
.pc:not([data-dark]):not([data-personality="festa"]) .pc-logo-box[data-tone="light"] .pc-logo { opacity: 0; }
.pc:not([data-dark]):not([data-personality="festa"]):has(> .pc-nav[data-state="open"]) .pc-logo-box[data-tone="light"] { background: var(--navfg); }
.pc[data-dark]:not([data-personality="festa"]) .pc-logo-box[data-tone="light"] .pc-logo { filter: none; }
.pc .pc-brand-name { display: block; max-width: 64vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--f-display); font-weight: var(--w-display); font-size: 24px; line-height: 1.1; letter-spacing: var(--track-display); text-transform: var(--case-display); }
.pc .pc-burger { position: relative; flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; color: inherit; display: grid; place-content: center; gap: 7px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pc .pc-burger span { display: block; width: 24px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .4s cubic-bezier(.7,0,.2,1); }
.pc .pc-burger[data-state="open"] span:first-child { transform: translateY(4.5px) rotate(45deg); }
.pc .pc-burger[data-state="open"] span:last-child { transform: translateY(-4.5px) rotate(-45deg); }
.pc .pc-burger:focus-visible, .pc .pc-links a:focus-visible, .pc .pc-inline a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.pc .pc-inline { display: inline-flex; align-items: center; gap: 14px; min-height: 44px; padding: 0 8px; font-weight: 700; font-size: 15px; }
.pc .pc-inline-lang a { opacity: .6; } .pc .pc-inline-lang a[aria-current] { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.pc .pc-links { display: none; }
@media (min-width: 768px) {
  .pc .pc-hdr { padding: 0 40px; }
  .pc .pc-burger, .pc .pc-inline { display: none; }
  .pc .pc-links { display: flex; align-items: center; gap: 26px; }
  .pc .pc-links a { position: relative; font-weight: 600; font-size: 15px; padding: 8px 0; }
  .pc .pc-links > a:not(.pc-book)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; background: var(--p-accent); transform: scaleX(0); transform-origin: right; transition: transform .35s cubic-bezier(.7,0,.2,1); }
  .pc .pc-links > a:hover::after, .pc .pc-links > a[aria-current]::after { transform: scaleX(1); transform-origin: left; }
  .pc .pc-book { padding: 9px 18px !important; border-radius: 99px; background: var(--p-accent); color: var(--p-bg) !important; }
  .pc .pc-links-lang { display: inline-flex; gap: 10px; font-size: 13px; }
  .pc .pc-links-lang a { opacity: .6; } .pc .pc-links-lang a[aria-current] { opacity: 1; }
}
/* Quieto: a hairline under, the name in italic serif, links in small capitals. */
.pc[data-personality="quieto"] .pc-hdr { box-shadow: 0 1px 0 color-mix(in srgb, var(--p-fg) 14%, transparent); }
.pc[data-personality="quieto"] .pc-brand-name { font-style: italic; font-size: 25px; }
.pc[data-personality="quieto"] .pc-links a { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; }
/* Piazza: the name in the accent; the button is a round coloured coin. */
.pc[data-personality="piazza"] .pc-brand-name { font-size: 25px; color: var(--p-accent); }
.pc[data-personality="piazza"] .pc-burger { background: var(--p-accent); color: var(--p-bg); width: 46px; height: 46px; gap: 6px; }
.pc[data-personality="piazza"] .pc-burger span { width: 20px; }
.pc[data-personality="piazza"]:has(> .pc-nav[data-state="open"]) .pc-brand-name { color: var(--navfg); }
.pc[data-personality="piazza"]:has(> .pc-nav[data-state="open"]) .pc-logo { filter: brightness(0) invert(1); }
.pc[data-personality="piazza"] .pc-burger[data-state="open"] { background: var(--p-bg); color: var(--p-accent); }
/* Festa: the whole bar is the accent, the name in Anton. */
.pc[data-personality="festa"] .pc-hdr { background: var(--p-accent); color: var(--p-bg); box-shadow: 0 3px 0 var(--p-ink); }
.pc[data-personality="festa"]:has(> .pc-nav[data-state="open"]) .pc-hdr { background: var(--navbg); color: var(--navfg); box-shadow: 0 3px 0 var(--navfg); }
.pc[data-personality="festa"] .pc-brand-name { font-size: 30px; letter-spacing: .01em; }
.pc[data-personality="festa"] .pc-burger span { height: 3px; width: 26px; }
.pc[data-personality="festa"] .pc-logo { filter: brightness(0) invert(1); }
.pc[data-personality="festa"]:has(> .pc-nav[data-state="open"]) .pc-logo { filter: none; }
.pc[data-personality="festa"][data-dark]:has(> .pc-nav[data-state="open"]) .pc-logo { filter: brightness(0) invert(1); }
.pc[data-personality="festa"] .pc-links a { font-family: var(--f-display); text-transform: uppercase; font-weight: 400; font-size: 19px; letter-spacing: .02em; }
.pc[data-personality="festa"] .pc-links > a:not(.pc-book)::after { background: var(--accent2); height: 3px; }
.pc[data-personality="festa"] .pc-book { background: var(--accent2); color: var(--p-ink) !important; box-shadow: 0 3px 0 var(--p-ink); border-radius: 10px; }

/* ================= navigation panel ================= */
.pc .pc-nav { position: fixed; top: var(--public-chrome-height, 64px); left: 0; right: 0; bottom: 0; z-index: 49; display: flex; flex-direction: column; padding: 14px var(--pad) max(18px, env(safe-area-inset-bottom)); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; background: var(--navbg); color: var(--navfg); font-family: var(--f-body); outline: none; }
.pc .pc-nav-veil { position: fixed; inset: 0; z-index: 48; }
.pc .pc-nav a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.pc .pc-nav[data-state="open"] { animation: pc-wipe-in .6s cubic-bezier(.7,0,.2,1) both; }
.pc .pc-nav[data-state="closed"] { animation: pc-wipe-out .45s cubic-bezier(.7,0,.2,1) both; }
@keyframes pc-wipe-in { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes pc-wipe-out { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 100% 0); } }
.pc .pc-nav-links { list-style: none; margin: 0; padding: 0; position: relative; z-index: 2; }
.pc .pc-nav-links a { display: flex; align-items: flex-start; gap: 12px; padding: 5px 0; font-family: var(--f-display); font-weight: var(--w-display); font-size: clamp(46px, 14.5vw, 72px); line-height: 1.02; letter-spacing: var(--track-display); text-transform: var(--case-display); }
.pc .pc-nav-links small { flex: none; min-width: 28px; margin-top: .55em; font: 600 12px/1 var(--f-body); letter-spacing: .12em; opacity: .55; text-transform: none; }
.pc .pc-nav-links a[aria-current] span { text-decoration: underline; text-decoration-thickness: .07em; text-underline-offset: .12em; }
.pc .pc-nav[data-state="open"] .pc-nav-links li { animation: pc-rise .55s cubic-bezier(.2,.8,.2,1) calc(.12s + var(--i) * .055s) both; }
@keyframes pc-rise { from { transform: translateY(36px); opacity: 0; } }
.pc .pc-nav-foot { position: relative; z-index: 2; margin-top: auto; padding-top: 30px; display: grid; gap: 12px; }
.pc .pc-nav-book { display: flex; align-items: center; justify-content: center; min-height: 54px; width: 100%; border-radius: 999px; background: var(--navfg); color: var(--navbg) !important; font-weight: 700; font-size: 16px; }
.pc .pc-nav-lang { display: flex; gap: 18px; margin: 0; font-size: 14px; font-weight: 600; padding: 4px 2px 0; }
.pc .pc-nav-lang a { opacity: .6; min-height: 32px; display: inline-flex; align-items: center; }
.pc .pc-nav-lang a[aria-current] { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.pc .pc-nav-deco, .pc .pc-nav-burst, .pc .pc-nav-art, .pc .pc-nav-strip { display: none; }
@media (min-width: 768px) { .pc .pc-nav { display: none; } }

/* Quieto: the page itself, slow; hairlines between links; round button. */
.pc[data-personality="quieto"] .pc-nav[data-state="open"] { animation-duration: .9s; }
.pc[data-personality="quieto"] .pc-nav-links li { border-top: 1px solid color-mix(in srgb, var(--p-fg) 14%, transparent); }
.pc[data-personality="quieto"] .pc-nav-links li:last-child { border-bottom: 1px solid color-mix(in srgb, var(--p-fg) 14%, transparent); }
.pc[data-personality="quieto"] .pc-nav-links a { font-style: italic; font-size: clamp(40px, 12vw, 60px); padding: 10px 0; }
.pc[data-personality="quieto"] .pc-nav-links small { color: var(--p-accent); opacity: 1; font-style: normal; }
.pc[data-personality="quieto"] .pc-nav[data-state="open"] .pc-nav-links li { animation-name: pc-fade; animation-duration: .9s; }
@keyframes pc-fade { from { opacity: 0; } }
/* Piazza: a coloured disc that grows out of the button; a drawing bobs. */
.pc[data-personality="piazza"] .pc-nav[data-state="open"] { animation: pc-disc-in .7s cubic-bezier(.7,0,.2,1) both; }
.pc[data-personality="piazza"] .pc-nav[data-state="closed"] { animation: pc-disc-out .5s cubic-bezier(.7,0,.2,1) both; }
@keyframes pc-disc-in { from { clip-path: circle(0 at calc(100% - 37px) -30px); } to { clip-path: circle(160% at calc(100% - 37px) -30px); } }
@keyframes pc-disc-out { from { clip-path: circle(160% at calc(100% - 37px) -30px); } to { clip-path: circle(0 at calc(100% - 37px) -30px); } }
.pc[data-personality="piazza"] .pc-nav[data-state="open"] .pc-nav-links li { animation-timing-function: cubic-bezier(.3,1.5,.5,1); }
.pc[data-personality="piazza"] .pc-nav-deco, .pc[data-personality="piazza"] .pc-nav-art { display: block; }
.pc[data-personality="piazza"] .pc-nav-art { position: absolute; right: -30px; top: 40%; width: 190px; height: 190px; background: currentColor; opacity: .9; pointer-events: none; -webkit-mask: var(--art) center / contain no-repeat; mask: var(--art) center / contain no-repeat; animation: pc-bob 6s ease-in-out infinite; }
@keyframes pc-bob { 50% { transform: translateY(-10px) rotate(-4deg); } }
/* Festa: a shutter in the second colour, tilted words, a sticker, a strip at the foot. */
.pc[data-personality="festa"] .pc-nav[data-state="open"] { animation-timing-function: cubic-bezier(.6,1.35,.4,1); }
.pc[data-personality="festa"] .pc-nav-links li:nth-child(odd) a { rotate: -2deg; }
.pc[data-personality="festa"] .pc-nav-links li:nth-child(even) a { rotate: 1.5deg; padding-left: 18px; }
.pc[data-personality="festa"] .pc-nav-links a { font-size: clamp(54px, 18vw, 86px); line-height: .96; }
.pc[data-personality="festa"] .pc-nav-links a[aria-current] span { text-decoration: none; background: var(--navfg); color: var(--navbg); padding: 0 .12em; }
.pc[data-personality="festa"] .pc-nav-deco, .pc[data-personality="festa"] .pc-nav-burst { display: block; }
.pc[data-personality="festa"] .pc-nav-burst { position: absolute; right: -24px; top: 6px; width: 150px; color: var(--navfg); z-index: 1; animation: pc-spin 18s linear infinite; }
.pc[data-personality="festa"] .pc-nav-burst .pp-stk { width: 100%; height: auto; display: block; overflow: visible; color: inherit; }
.pc[data-personality="festa"] .pc-nav-burst .pp-stk-word { font-family: var(--f-display); font-weight: var(--w-display); fill: currentColor; }
@keyframes pc-spin { to { transform: rotate(360deg); } }
.pc[data-personality="festa"] .pc-nav-book { font-family: var(--f-display); text-transform: uppercase; font-size: 22px; font-weight: 400; border-radius: 12px; box-shadow: 0 4px 0 color-mix(in srgb, var(--navfg) 50%, transparent); }
.pc[data-personality="festa"] .pc-nav-strip { display: block; margin: 18px calc(var(--pad) * -1) calc(max(18px, env(safe-area-inset-bottom)) * -1); background: var(--navfg); color: var(--navbg); overflow: hidden; }
.pc[data-personality="festa"] .pc-nav-run { display: flex; width: max-content; white-space: nowrap; font-family: var(--f-display); text-transform: uppercase; font-size: 28px; line-height: 1; padding: 12px 0; animation: pc-run 14s linear infinite; }
.pc[data-personality="festa"] .pc-nav-run > span { padding-right: 22px; }
.pc[data-personality="festa"] .pc-nav-run b { font-weight: 400; }
@keyframes pc-run { to { transform: translateX(-50%); } }

/* The venue's motion level, and the guest's reduced motion, stop all of it. */
/* `soft` is entrances only, as on the pages: the panel's loops stand still. */
.pc[data-motion-level="soft"] :is(.pc-nav-art, .pc-nav-burst, .pc-nav-run) { animation: none !important; }
.pc[data-motion-level="off"] :is(.pc-nav, .pc-nav-links li, .pc-nav-art, .pc-nav-burst, .pc-nav-run, .pc-burger span, .pc-hdr) { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .pc :is(.pc-nav, .pc-nav-links li, .pc-nav-art, .pc-nav-burst, .pc-nav-run, .pc-burger span, .pc-hdr) { animation: none !important; transition: none !important; }
}

/*
 * The menu in the venue's personality (`docs/plans/menu-redesign.md`,
 * step 4), as the reviewed prototype (`proto/menu`,
 * `public/proto-menu/menu.css`, with the owner's four reviews folded in).
 * Everything is under `.pc` — the chrome frame of a venue whose menu follows
 * the personality — so Moderno never matches. Colours: `--p-*`
 * (`components/pages/personality.css`).
 *
 * Nothing here hides content until a script runs: every dish, price and
 * allergen is visible in the static HTML; motion only moves what is there.
 * Allergens are never hidden, cut, shrunk or transformed.
 */

.pc .mn { --pm-top: var(--public-chrome-height, 64px); --pm-bar: 54px; padding-bottom: 50px; color: var(--p-fg); font-family: var(--f-body); font-size: 17px; line-height: 1.5; -webkit-text-size-adjust: 100%; }
.pc .mn *, .pc .mn *::before, .pc .mn *::after { box-sizing: border-box; }
.pc .mn a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.pc .mn button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pc .mn :is(h1, h2, h3) { margin: 0; }
.pc .mn p { margin: 0; }
.pc .mn :is(.mn-title, .mn-cat-name) { font-family: var(--f-display); font-weight: var(--w-display); line-height: .95; letter-spacing: var(--track-display); text-transform: var(--case-display); }
.pc .mn-ic { width: 1em; height: 1em; flex: none; display: block; }
/* `.public-main` clips sideways for the old menu; the bar must stick. */
.public-main:has(> .mn) { overflow-x: visible; }

/* ================= top ================= */
.pc .mn-top { position: relative; padding: 22px var(--pad) 22px; display: grid; gap: 9px; overflow: hidden; }
.pc .mn-kicker { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--p-accent); font-weight: 600; }
.pc .mn-title { font-size: clamp(50px, 16vw, 88px); line-height: .9; }
.pc[data-personality="quieto"] .mn-top { padding-top: 30px; }
.pc[data-personality="quieto"] .mn-title { font-style: italic; font-size: clamp(48px, 14vw, 72px); }
.pc[data-personality="piazza"] .mn-title { color: var(--p-accent); font-size: clamp(58px, 19vw, 100px); letter-spacing: -.05em; }
.pc[data-personality="festa"] .mn-top { padding-top: 34px; }
.pc[data-personality="festa"] .mn-title { color: var(--p-accent); font-size: clamp(76px, 27vw, 150px); line-height: .8; }
.pc .mn-top-burst { display: none; }
.pc[data-personality="festa"] .mn-top-burst { display: block; position: absolute; right: -6px; top: 8px; width: 128px; color: var(--accent2); animation: pc-spin 18s linear infinite; }
.pc[data-personality="festa"] .mn-top-burst .pp-stk { width: 100%; height: auto; display: block; overflow: visible; color: inherit; }
.pc[data-personality="festa"] .mn-top-burst .pp-stk-word { font-family: var(--f-display); fill: var(--p-ink); font-size: 26px; }
.pc[data-personality="festa"][data-dark] .mn-top-burst .pp-stk-word { fill: var(--accent2); }

/* ================= category bar ================= */
.pc .mn-bar { position: sticky; top: var(--pm-top); z-index: 30; display: flex; align-items: center; gap: 6px; height: var(--pm-bar); padding: 0 0 0 calc(var(--pad) - 6px); background: color-mix(in srgb, var(--p-bg) 92%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: box-shadow .3s, top .35s cubic-bezier(.2,.8,.2,1); }
.pc .mn-bar[data-stuck] { box-shadow: 0 1px 0 color-mix(in srgb, var(--p-fg) 12%, transparent); }
.pc .mn-bar-all { flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; display: grid; place-items: center; font-size: 19px; background: color-mix(in srgb, var(--p-fg) 8%, transparent); }
.pc .mn-bar-track { position: relative; flex: 1; min-width: 0; height: 100%; display: flex; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 0 var(--pad) 0 4px; -webkit-mask: linear-gradient(90deg, transparent, #000 10px, #000 calc(100% - 22px), transparent); mask: linear-gradient(90deg, transparent, #000 10px, #000 calc(100% - 22px), transparent); }
.pc .mn-bar-track::-webkit-scrollbar { display: none; }
.pc .mn-chip { position: relative; z-index: 1; flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; height: 44px; padding: 0 14px; white-space: nowrap; font-weight: 600; font-size: 14px; transition: color .3s; }
/* A pill drawn smaller than a finger still takes a 44 px press. */
.pc .mn-chip::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; margin-top: -22px; }
.pc .mn-chip:focus-visible, .pc .mn-bar-all:focus-visible { outline: 2px solid var(--p-accent); outline-offset: -2px; }
.pc .mn-bar-ind { position: absolute; left: 0; top: 0; height: 38px; width: 0; z-index: 0; pointer-events: none; transition: transform .5s cubic-bezier(.2,.8,.2,1), width .5s cubic-bezier(.2,.8,.2,1); }
.pc[data-personality="quieto"] .mn-bar { box-shadow: 0 1px 0 color-mix(in srgb, var(--p-fg) 14%, transparent); background: var(--p-bg); }
.pc[data-personality="quieto"] .mn-bar-all { background: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--p-fg) 25%, transparent); }
.pc[data-personality="quieto"] .mn-chip { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; padding: 0 11px; opacity: .6; }
.pc[data-personality="quieto"] .mn-chip[aria-current] { opacity: 1; }
.pc[data-personality="quieto"] .mn-bar-ind { border-bottom: 1.5px solid var(--p-accent); }
.pc[data-personality="piazza"] .mn-chip { height: 38px; min-height: 38px; border-radius: 99px; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--p-fg) 14%, transparent); }
.pc[data-personality="piazza"] .mn-chip[aria-current] { color: var(--p-bg); box-shadow: none; }
.pc[data-personality="piazza"] .mn-bar-ind { border-radius: 99px; background: var(--p-accent); }
.pc[data-personality="festa"] .mn-bar { background: var(--p-bg); }
.pc[data-personality="festa"] .mn-bar-all { border-radius: 10px; background: var(--p-bg); box-shadow: inset 0 0 0 2px var(--p-ink), 0 3px 0 var(--p-ink); }
.pc[data-personality="festa"] .mn-bar-track { gap: 8px; }
.pc[data-personality="festa"] .mn-chip { height: 36px; min-height: 36px; margin-bottom: 3px; padding: 0 12px; border-radius: 10px; font-family: var(--f-display); font-weight: 400; font-size: 17px; text-transform: uppercase; letter-spacing: .02em; background: var(--p-bg); box-shadow: inset 0 0 0 2px var(--p-ink), 0 3px 0 var(--p-ink); transition: transform .3s cubic-bezier(.3,1.6,.5,1), background-color .2s; }
.pc[data-personality="festa"] .mn-chip[aria-current] { background: var(--accent2); color: var(--p-ink); transform: rotate(-3deg) translateY(-1px); }
.pc[data-personality="festa"][data-dark] .mn-chip[aria-current] { color: var(--p-bg); }
.pc[data-personality="festa"] .mn-bar-ind { display: none; }
/* On the phone menu the header tucks away scrolling down; the bar takes the
   top (his second look). `data-header-away` is set by the bar's script. */
@media (max-width: 767px) {
  .pc[data-header-away] .pc-hdr { transform: translateY(calc(-100% - var(--preview-banner-height, 0px))); box-shadow: none !important; }
  .pc[data-header-away] .mn-bar { top: var(--preview-banner-height, 0px); }
}

/* ================= categories ================= */
.pc .mn-cat { padding: 0 var(--pad); margin-top: 34px; scroll-margin-top: calc(var(--pm-top) + var(--pm-bar)); }
.pc .mn-cat-name { font-size: clamp(32px, 9.5vw, 46px); line-height: .98; text-wrap: balance; overflow-wrap: anywhere; }
.pc .mn-cat-count { display: inline-block; margin-top: 6px; font: 600 12px/1 var(--f-body); letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.pc .mn-cat-art { flex: none; overflow: hidden; }
.pc .mn-cat-art img { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
/* A line drawing on a dark page: inverted, as the pages do. */
.pc[data-dark] .mn-cat-art img { mix-blend-mode: normal; filter: invert(1) hue-rotate(180deg); opacity: .92; }
/* Quieto: a chapter of a printed carta, the dish count over it. */
.pc[data-personality="quieto"] .mn-cat-head { display: grid; grid-template-columns: 1fr auto; align-items: end; column-gap: 16px; padding-bottom: 12px; position: relative; }
.pc[data-personality="quieto"] .mn-cat-n { grid-column: 1; margin-bottom: 6px; color: var(--p-accent); font: 600 11px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; }
.pc[data-personality="quieto"] .mn-cat-name { grid-column: 1; font-style: italic; }
.pc[data-personality="quieto"] .mn-cat-art { grid-column: 2; grid-row: 1 / span 2; width: 70px; height: 70px; }
.pc[data-personality="quieto"] .mn-rule { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; opacity: .55; transform-origin: left; transition: transform 1.3s cubic-bezier(.7,0,.2,1); }
.pc .mn-cat-n, .pc .mn-rule { display: none; }
.pc[data-personality="quieto"] .mn-cat-n, .pc[data-personality="quieto"] .mn-rule { display: block; }
.pc[data-personality="quieto"] .mn-cat-head .mn-cat-count { display: none; }
/* Piazza: the drawing alone beside the heading, alternating sides; a
   coloured band between categories (his third look: no coin, no scallops). */
.pc[data-personality="piazza"] .mn-cat-head { display: flex; align-items: center; gap: 16px; }
.pc[data-personality="piazza"] .mn-cat-art { width: 96px; height: 96px; border-radius: 50%; transition: transform .8s cubic-bezier(.3,1.5,.5,1); }
.pc[data-personality="piazza"] .mn-cat-art img { animation: pc-bob 6s ease-in-out infinite; animation-delay: calc(var(--ci) * -1.7s); }
.pc[data-personality="piazza"] .mn-cat-count { padding: 5px 9px; border-radius: 99px; background: color-mix(in srgb, var(--p-fg) 8%, transparent); opacity: .85; }
.pc[data-personality="piazza"] .mn-cat + .mn-cat::before { content: ""; display: block; height: 6px; margin: 0 calc(var(--pad) * -1) 34px; background: color-mix(in srgb, var(--p-accent) 30%, transparent); }
/* Festa: a full-width band per category, under a checker strip. */
.pc[data-personality="festa"] .mn-cat { margin-top: 0; padding-bottom: 26px; }
.pc[data-personality="festa"] .mn-cat-head { margin: 0 calc(var(--pad) * -1); }
.pc .mn-checker { display: none; }
.pc[data-personality="festa"] .mn-checker { display: block; height: 14px; background: conic-gradient(var(--p-ink) 25%, var(--p-bg) 0 50%, var(--p-ink) 0 75%, var(--p-bg) 0) 0 0 / 14px 14px; }
.pc[data-personality="festa"] .mn-cat-band { position: relative; padding: 22px var(--pad) 20px; background: var(--p-accent); color: var(--p-bg); overflow: hidden; }
.pc[data-personality="festa"] .mn-cat:nth-of-type(even) .mn-cat-band { background: var(--p-ink); color: var(--accent2); }
.pc[data-personality="festa"][data-dark] .mn-cat:nth-of-type(even) .mn-cat-band { color: var(--p-bg); }
.pc[data-personality="festa"] .mn-cat-name { font-size: clamp(46px, 15vw, 84px); line-height: .86; position: relative; z-index: 1; }
.pc[data-personality="festa"] .mn-cat-band:has(.mn-cat-art) .mn-cat-name { max-width: calc(100% - 92px); }
.pc[data-personality="festa"] .mn-cat-count { opacity: .85; position: relative; z-index: 1; }
.pc[data-personality="festa"] .mn-cat-art { position: absolute; right: 14px; top: 50%; width: 92px; height: 92px; margin-top: -46px; border-radius: 50%; padding: 12px; background: var(--p-bg); box-shadow: 0 0 0 3px var(--p-ink); }
@keyframes pc-stamp { 0% { transform: scale(1.25) rotate(-4deg); } 60% { transform: scale(.97) rotate(1deg); } 100% { transform: none; } }

/* ================= dishes ================= */
.pc .mn-dishes { list-style: none; margin: 10px 0 0; padding: 0; }
.pc .mn-dishes > li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; padding: 16px 0; }
.pc .mn-dish-hit { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.pc .mn-dish-hit:focus-visible { outline: 2px solid var(--p-accent); outline-offset: 2px; }
.pc .mn-dish-main { grid-column: 1; grid-row: 1 / span 2; min-width: 0; }
.pc .mn-dish-foot { grid-column: 1 / -1; grid-row: 3; min-width: 0; }
/* Whole words move to the next line before they can be hyphenated. Only a
   word wider than the name's full line shrinks and breaks inside its span.
   Only Quieto draws a leader; elsewhere it leaves no extra gap. */
.pc .mn-dish-head { display: flex; align-items: baseline; gap: 6px; }
.pc .mn-name { margin: 0; flex: 0 1 auto; min-width: 0; font: 700 17px/1.25 var(--f-body); letter-spacing: 0; text-transform: none; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 6 3 3; text-wrap: pretty; }
.pc .mn-name-word { display: inline-block; width: max-content; max-width: 100%; vertical-align: top; }
.pc .mn-lead { display: none; flex: 1 1 0; min-width: 0; }
.pc .mn-price { flex: none; margin-left: auto; font-weight: 700; font-size: 16px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pc .mn-price small { font-weight: 500; font-size: .78em; opacity: .75; }
.pc .mn-desc { margin-top: 4px; font-size: 14.5px; line-height: 1.4; opacity: .88; }
.pc .mn-ing { margin-top: 3px; font-size: 13.5px; line-height: 1.4; opacity: .75; }
.pc .mn-vars { list-style: none; margin: 9px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pc .mn-vars > li { display: inline-flex; gap: 6px; padding: 5px 10px; border-radius: 99px; font-size: 13px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--p-fg) 22%, transparent); }
.pc .mn-vars b { font-variant-numeric: tabular-nums; }
.pc .mn-thumb { grid-column: 2; grid-row: 1; width: 92px; height: 92px; border-radius: calc(var(--p-radius) * .7); overflow: hidden; background: color-mix(in srgb, var(--p-fg) 6%, var(--p-bg)); }
.pc .mn-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Quieto: a printed carta — serif names, prices on dotted leaders. */
.pc[data-personality="quieto"] .mn-dishes > li + li { border-top: 1px solid color-mix(in srgb, var(--p-fg) 11%, transparent); }
.pc[data-personality="quieto"] .mn-name { font: 400 20px/1.2 var(--f-display); letter-spacing: -.01em; }
.pc[data-personality="quieto"] .mn-dish-head { gap: 10px; }
.pc[data-personality="quieto"] .mn-lead { display: block; min-width: 10px; border-bottom: 1.5px dotted color-mix(in srgb, var(--p-fg) 45%, transparent); transform: translateY(-5px); }
.pc[data-personality="quieto"] .mn-price { font: 400 19px/1 var(--f-display); }
.pc[data-personality="quieto"] .mn-desc { font-style: italic; }
.pc[data-personality="quieto"] .mn-thumb { border-radius: 10px; width: 80px; height: 80px; }
/* Piazza: soft cards on the paper, the price in a little pill. Testers found
   the pill drew the eye (2026-10-19); without it Piazza lost its character,
   so it is back (owner, 2026-10-20), a little nearer the card's edge. */
.pc[data-personality="piazza"] .mn-dishes { display: grid; gap: 10px; margin-top: 18px; }
.pc[data-personality="piazza"] .mn-dishes > li { padding: 16px; border-radius: 22px; background: color-mix(in srgb, var(--p-fg) 5%, var(--p-bg)); }
.pc[data-personality="piazza"] .mn-name { font: 700 19px/1.15 var(--f-display); letter-spacing: -.02em; }
.pc[data-personality="piazza"] .mn-price { padding: 5px 10px; border-radius: 99px; background: color-mix(in srgb, var(--p-accent) 18%, transparent); font-size: 15px; }
/* The empty photo column still leaves its gap: without a photo, the pill takes
   some of it. */
.pc[data-personality="piazza"] .mn-dishes > li:not(:has(.mn-thumb)) .mn-price { margin-right: -6px; }
.pc[data-personality="piazza"] .mn-thumb { border-radius: 16px; rotate: 2deg; }
.pc[data-personality="piazza"] .mn-dishes > li:nth-child(even) .mn-thumb { rotate: -2deg; }
/* Festa: ink rules, prices on tilted stickers, offset shadows; what you read
   is in ink, only names and headings in colour (his second look). */
.pc[data-personality="festa"] .mn-dishes { margin-top: 4px; }
.pc[data-personality="festa"] .mn-dishes > li { padding: 18px 0; border-bottom: 2px solid var(--p-ink); }
.pc[data-personality="festa"][data-dark] .mn-dishes > li { border-bottom-color: color-mix(in srgb, var(--p-fg) 30%, transparent); }
.pc[data-personality="festa"] .mn-name { font: 800 18px/1.2 var(--f-body); }
/* The tilted price sticker reaches below its line; keep the text off it. */
.pc[data-personality="festa"] .mn-dish-head { margin-bottom: 8px; }
.pc[data-personality="festa"] .mn-price { padding: 5px 9px 4px; border-radius: 6px; background: var(--accent2); color: var(--p-ink); font: 400 19px/1 var(--f-display); letter-spacing: .02em; rotate: -3deg; box-shadow: 0 0 0 2px var(--p-ink); }
.pc[data-personality="festa"][data-dark] .mn-price { color: var(--p-bg); box-shadow: none; }
.pc[data-personality="festa"] .mn-dishes > li:nth-child(even) .mn-price { rotate: 2.5deg; }
.pc[data-personality="festa"] .mn-thumb { border-radius: 12px; box-shadow: 0 0 0 2px var(--p-ink), 4px 4px 0 2px var(--p-ink); }
.pc[data-personality="festa"] :is(.mn-desc, .mn-ing, .mn-vars, .mn-unv) { color: var(--p-ink); }

/* ================= allergens (the shared AllergensBadge, tone="personality") ================= */
.pc .mn-algs { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.pc .mn-algs > li { display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 26px; min-width: 26px; padding: 0 5px; border-radius: 99px; background: color-mix(in srgb, var(--p-fg) 7%, transparent); color: var(--alg, currentColor); font: 600 12px/1 var(--f-body); text-transform: none; }
.pc .mn-algs > li > span { color: var(--p-fg); }
.pc .mn-algs > li > svg { width: 15px; height: 15px; flex: none; }
.pc .mn-algs > li.named { padding: 0 10px 0 7px; }
.pc .mn-algs > li.code { color: var(--p-fg); padding: 0 8px; }
.pc .mn .public-allergen-count { margin-top: 9px; font-size: 13px; color: var(--p-fg); }
.pc[data-personality="festa"] .mn-algs > li { background: none; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--p-ink) 25%, transparent); }
.pc[data-personality="festa"] .mn-algs > li > span { color: var(--p-ink); }
/* The unverified-allergens note: never hidden, never faint. */
.pc .mn-unv { position: relative; z-index: 2; display: flex; align-items: flex-start; gap: 6px; margin-top: 8px; font-size: 12.5px; font-weight: 600; line-height: 1.35; color: var(--p-fg); }
.pc .mn-unv svg { width: 14px; height: 14px; flex: none; margin-top: 1px; }

/* ================= accordion ================= */
.pc .mn-acc { padding-top: 10px; }
.pc .mn-acc > .mn-cat { margin-top: 0; }
.pc .mn-acc .mn-cat > summary { list-style: none; position: relative; display: flex; align-items: center; gap: 12px; padding: 16px 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pc .mn-acc .mn-cat > summary::-webkit-details-marker { display: none; }
.pc .mn-acc .mn-cat > summary:focus-visible { outline: 2px solid var(--p-accent); outline-offset: 2px; }
.pc .mn-acc .mn-cat > summary .mn-cat-head { flex: 1; min-width: 0; }
.pc .mn-acc-ic { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--p-fg) 25%, transparent); transition: transform .4s cubic-bezier(.3,1.4,.5,1); }
.pc .mn-acc .mn-cat[open] .mn-acc-ic { transform: rotate(135deg); }
/* An open category's last dish keeps its distance from the next divider. */
.pc .mn-acc .mn-cat[open] { padding-bottom: 28px; }
.pc .mn-acc .mn-cat-name { font-size: clamp(26px, 7.5vw, 36px); }
.pc[data-personality="quieto"] .mn-acc .mn-cat { border-bottom: 1px solid color-mix(in srgb, var(--p-fg) 14%, transparent); }
.pc[data-personality="quieto"] .mn-acc .mn-cat-head { padding-bottom: 0; }
.pc[data-personality="quieto"] .mn-acc .mn-rule { display: none; }
.pc[data-personality="quieto"] .mn-acc .mn-cat-art { width: 54px; height: 54px; }
.pc[data-personality="piazza"] .mn-acc .mn-cat + .mn-cat::before { margin-bottom: 0; }
.pc[data-personality="piazza"] .mn-acc .mn-cat-art { width: 70px; height: 70px; }
.pc[data-personality="festa"] .mn-acc .mn-cat > summary { padding: 0; }
.pc[data-personality="festa"] .mn-acc .mn-cat-head { margin: 0 calc(var(--pad) * -1); }
.pc[data-personality="festa"] .mn-acc .mn-cat-name { font-size: clamp(36px, 11vw, 56px); max-width: none !important; }
.pc[data-personality="festa"] .mn-acc-ic { position: absolute; right: 0; top: 50%; margin-top: -20px; z-index: 2; box-shadow: inset 0 0 0 2px currentColor; }
.pc[data-personality="festa"] .mn-acc .mn-cat-art, .pc[data-personality="festa"] .mn-acc .mn-checker { display: none; }
.pc[data-personality="festa"] .mn-acc .mn-cat-band { padding-right: 76px; }
.pc[data-personality="festa"] .mn-acc .mn-cat:nth-of-type(odd) .mn-acc-ic { color: var(--p-bg); }
.pc[data-personality="festa"] .mn-acc .mn-cat:nth-of-type(even) .mn-acc-ic { color: var(--accent2); }
.pc[data-personality="festa"] .mn-acc .mn-cat + .mn-cat .mn-cat-band { border-top: 3px solid var(--p-bg); }

/* ================= category index ================= */
.pc .mn-index { position: fixed; inset: 0; z-index: 62; overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--pad) max(30px, env(safe-area-inset-bottom)); background: var(--navbg); color: var(--navfg); font-family: var(--f-body); outline: none; }
.pc .mn-index[data-state="open"] { animation: pc-wipe-in .5s cubic-bezier(.7,0,.2,1) both; }
.pc .mn-index[data-state="closed"] { animation: pc-wipe-out .4s cubic-bezier(.7,0,.2,1) both; }
.pc .mn-index a { color: inherit; text-decoration: none; }
.pc .mn-index-top { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; height: 64px; background: var(--navbg); }
.pc .mn-index-top h2 { margin: 0; font: 700 12px/1 var(--f-body); letter-spacing: .16em; text-transform: uppercase; }
.pc .mn-index-top button { width: 44px; height: 44px; border: 0; border-radius: 50%; display: grid; place-items: center; font-size: 22px; color: inherit; background: color-mix(in srgb, var(--navfg) 12%, transparent); cursor: pointer; }
.pc .mn-index ol { list-style: none; margin: 0; padding: 0; }
.pc .mn-index li a { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: baseline; gap: 8px; padding: 11px 0; border-bottom: 1px solid color-mix(in srgb, var(--navfg) 16%, transparent); font-family: var(--f-display); font-weight: var(--w-display); font-size: clamp(26px, 8vw, 38px); line-height: 1.05; letter-spacing: var(--track-display); text-transform: var(--case-display); }
.pc .mn-index small { font: 600 12px/1 var(--f-body); opacity: .7; letter-spacing: .08em; }
.pc .mn-index em { font: 600 13px/1 var(--f-body); font-style: normal; opacity: .7; }
.pc[data-personality="quieto"] .mn-index li a { font-style: italic; }
.pc[data-personality="quieto"] .mn-index small { color: var(--p-accent); opacity: 1; font-style: normal; }

/* ================= skeleton ================= */
.pc .mn-sk-wrap .mn-dishes > li { display: block; }
.pc .mn-sk-wrap i { display: block; height: 12px; margin: 9px 0; border-radius: 6px; background: linear-gradient(90deg, color-mix(in srgb, var(--p-fg) 7%, transparent) 30%, color-mix(in srgb, var(--p-fg) 14%, transparent) 50%, color-mix(in srgb, var(--p-fg) 7%, transparent) 70%) 0 0 / 300% 100%; animation: pc-shimmer 1.6s linear infinite; }
.pc .mn-sk-wrap .mn-sk-title { height: 34px; width: 55%; }
.pc .mn-sk-wrap .w60 { width: 60%; } .pc .mn-sk-wrap .w90 { width: 90%; } .pc .mn-sk-wrap .w40 { width: 40%; }
.pc[data-personality="piazza"] .mn-sk-wrap .mn-dishes > li { padding: 16px; border-radius: 22px; background: color-mix(in srgb, var(--p-fg) 4%, var(--p-bg)); margin-bottom: 10px; }
.pc[data-personality="festa"] .mn-sk-wrap .mn-cat-head { margin: 0 calc(var(--pad) * -1); padding: 22px var(--pad); background: color-mix(in srgb, var(--p-accent) 25%, var(--p-bg)); }
@keyframes pc-shimmer { to { background-position: -100% 0; } }
/* The loading file cannot know the venue's design: it draws both, CSS picks. */
.public-chrome-frame:not([data-menu-design="personality"]) .mn-sk-wrap { display: none; }
[data-menu-design="personality"] .mn-sk-moderno { display: none; }

/* ================= desktop ================= */
@media (min-width: 1024px) {
  .pc .mn { --pad: 40px; display: grid; grid-template-columns: 250px minmax(0, 1fr); column-gap: 64px; max-width: 1240px; margin: 0 auto; padding: 0 40px 90px; }
  .pc .mn-top { grid-column: 1 / -1; padding: 60px 0 40px; }
  .pc .mn-bar { grid-column: 1; grid-row: 2 / span 200; align-self: start; position: sticky; top: calc(var(--pm-top) + 30px); height: auto; max-height: calc(100vh - var(--pm-top) - 60px); overflow-y: auto; scrollbar-width: thin; padding: 4px 6px 8px 0; display: block; background: none; box-shadow: none !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .pc .mn-bar-all { display: none; }
  .pc .mn-bar-track { flex-direction: column; align-items: stretch; height: auto; overflow: visible; padding: 0; gap: 4px; -webkit-mask: none; mask: none; }
  .pc .mn-chip { justify-content: flex-start; height: auto; min-height: 40px; white-space: normal; }
  .pc[data-personality="quieto"] .mn-bar-ind { border-bottom: 0; border-left: 2px solid var(--p-accent); }
  .pc[data-personality="festa"] .mn-chip { align-self: flex-start; height: auto; min-height: 36px; padding: 7px 12px 6px; line-height: 1.05; }
  .pc :is(.mn-cat, .mn-acc, .mn-sk) { grid-column: 2; padding: 0; }
  .pc .mn-cat { margin-top: 64px; }
  .pc .mn-bar + .mn-cat { margin-top: 0; }
  .pc[data-personality="festa"] .mn-cat { margin-top: 0; }
  .pc[data-personality="festa"] .mn-cat-head { margin: 0; }
  .pc[data-personality="festa"] .mn-cat-band { border-radius: 14px; padding: 30px 36px; }
  .pc[data-personality="festa"] .mn-checker { margin-top: 30px; border-radius: 4px; }
  .pc .mn-dishes { display: grid; grid-template-columns: 1fr 1fr; column-gap: 44px; }
  .pc[data-personality="quieto"] .mn-dishes > li + li { border-top: 0; }
  .pc[data-personality="quieto"] .mn-dishes > li { border-top: 1px solid color-mix(in srgb, var(--p-fg) 11%, transparent); }
  .pc[data-personality="quieto"] .mn-dishes > li:nth-child(-n+2) { border-top: 0; }
  .pc[data-personality="piazza"] .mn-dishes { column-gap: 14px; gap: 14px; }
  /* The accordion has no rail: one centred column. */
  .pc .mn[data-mm="accordion"] { grid-template-columns: minmax(0, 1fr); max-width: 980px; }
  .pc .mn[data-mm="accordion"] :is(.mn-top, .mn-acc) { grid-column: 1; }
}

/* ================= motion: the personality in miniature ================= */
/* The rules draw, the drawings settle, the names stamp in — only on things
   already visible, only once a script has marked the category as seen. */
.pc[data-personality="quieto"] .mn[data-motion-ready] .mn-cat:not([data-seen]) .mn-rule { transform: scaleX(0); }
.pc[data-personality="piazza"] .mn[data-motion-ready] .mn-cat:not([data-seen]) .mn-cat-art { transform: scale(.55) rotate(-16deg); }
.pc[data-personality="festa"] .mn[data-motion-ready] .mn-cat[data-seen] .mn-cat-name { animation: pc-stamp .6s cubic-bezier(.3,1.4,.5,1); }
/* `soft` is entrances only, as on the pages: nothing keeps moving. */
.pc[data-motion-level="soft"] :is(.mn-top-burst, .mn-cat-art img) { animation: none !important; }
.pc[data-motion-level="off"] :is(.mn-bar, .mn-bar-ind, .mn-chip, .mn-acc-ic, .mn-index, .mn-cat-art, .mn-cat-art img, .mn-rule, .mn-cat-name, .mn-top-burst, .mn-sk-wrap i, .pc-hdr) { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .pc :is(.mn-bar, .mn-bar-ind, .mn-chip, .mn-acc-ic, .mn-index, .mn-cat-art, .mn-cat-art img, .mn-rule, .mn-cat-name, .mn-top-burst, .mn-sk-wrap i) { animation: none !important; transition: none !important; }
}

/* ================= menu dinamico ================= */
/* `docs/plans/dynamic-menu.md`. A table-QR guest, while the venue is open,
   gets the moment's categories first; the before-paint script marks the root
   and each category (`moments-apply.ts`) and these rules move them with
   `order`, so nothing re-renders and nothing jumps. Without the marks
   nothing here applies: the menu is the menu. */
.pc .mn-now, .pc .mn-div, .pc .mn-kl, .pc .mn-bar-sep { display: none; }

/* The order: the moment's categories in the owner's order for it (`--o-<moment>`,
   its place, from 0), the divider, the rest. The top and the bar stay at 0, and
   come first in the markup. */
@media (max-width: 1023px) { .pc .mn[data-moment][data-mm="scroll"] { display: flex; flex-direction: column; } }
.pc .mn[data-moment] .mn-acc { display: flex; flex-direction: column; }
.pc .mn[data-moment] :is(.mn-cat, .mn-chip) { order: 999; }
.pc .mn[data-moment] :is(.mn-div, .mn-bar-sep) { order: 998; }
.pc .mn[data-moment="colazione"] [data-m~="colazione"] { order: var(--o-colazione, 0); }
.pc .mn[data-moment="pranzo"] [data-m~="pranzo"] { order: var(--o-pranzo, 0); }
.pc .mn[data-moment="pomeriggio"] [data-m~="pomeriggio"] { order: var(--o-pomeriggio, 0); }
.pc .mn[data-moment="aperitivo"] [data-m~="aperitivo"] { order: var(--o-aperitivo, 0); }
.pc .mn[data-moment="cena"] [data-m~="cena"] { order: var(--o-cena, 0); }
.pc .mn[data-moment="dopocena"] [data-m~="dopocena"] { order: var(--o-dopocena, 0); }

/* «Adesso: Colazione · cucina dalle 12:00» */
.pc .mn[data-moment="colazione"] .mn-now[data-for="colazione"],
.pc .mn[data-moment="pranzo"] .mn-now[data-for="pranzo"],
.pc .mn[data-moment="pomeriggio"] .mn-now[data-for="pomeriggio"],
.pc .mn[data-moment="aperitivo"] .mn-now[data-for="aperitivo"],
.pc .mn[data-moment="cena"] .mn-now[data-for="cena"],
.pc .mn[data-moment="dopocena"] .mn-now[data-for="dopocena"] { display: flex; }
.pc .mn-now { align-items: baseline; gap: 9px; margin-top: 4px; font: 600 15px/1.35 var(--f-body); letter-spacing: 0; text-transform: none; }
.pc .mn-now-dot { flex: none; margin-left: 4px; width: 9px; height: 9px; border-radius: 50%; background: var(--p-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--p-accent) 22%, transparent); transform: translateY(-1px); }
.pc .mn-now-k { display: none; font-weight: 500; opacity: .8; }
.pc .mn[data-kn] .mn-now-k { display: inline; }
.pc .mn-now-k b { font-weight: inherit; font-variant-numeric: tabular-nums; }
.pc .mn-now-k b::after { content: var(--mo-kn, ""); }
.pc[data-personality="festa"] .mn-now-dot { background: var(--accent2); box-shadow: 0 0 0 2px var(--p-ink); }
.pc[data-personality="quieto"] .mn-now { font-weight: 500; }

/* The divider: the rest of the menu is all there, under it. */
.pc .mn[data-moment]:not([data-mo-full]) .mn-div { display: flex; }
.pc .mn-div { align-items: center; gap: 14px; margin: 46px var(--pad) 22px; font: 700 12px/1 var(--f-body); letter-spacing: .16em; text-transform: uppercase; }
.pc .mn-div::before, .pc .mn-div::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: .28; }
.pc .mn-acc .mn-div { margin: 30px var(--pad) 10px; }
.pc[data-personality="quieto"] .mn-div { font: italic 400 20px/1 var(--f-display); letter-spacing: 0; text-transform: none; color: var(--p-accent); }
.pc[data-personality="piazza"] .mn-div { color: var(--p-accent); }
.pc[data-personality="piazza"] .mn-div::before, .pc[data-personality="piazza"] .mn-div::after { height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--p-accent) 30%, transparent); opacity: 1; }
.pc[data-personality="festa"] .mn-div { font: 400 24px/1 var(--f-display); letter-spacing: .02em; }
.pc[data-personality="festa"] .mn-div::before, .pc[data-personality="festa"] .mn-div::after { height: 3px; opacity: 1; }
.pc .mn[data-moment] .mn-cat[data-lead="rest"] { margin-top: 0; }
.pc .mn-bar-sep { flex: none; width: 2px; height: 22px; margin: 0 4px; border-radius: 1px; background: color-mix(in srgb, var(--p-fg) 25%, transparent); }
.pc .mn[data-moment]:not([data-mo-full]) .mn-bar-sep { display: block; }
.pc .mn-index-div { padding: 22px 0 8px; font: 700 12px/1 var(--f-body); letter-spacing: .16em; text-transform: uppercase; opacity: .7; }

/* Moved, a category's look follows where it is drawn, not where it sits in
   the page: Piazza's band goes between categories, Festa alternates. */
.pc[data-personality="piazza"] .mn[data-moment] .mn-cat::before { content: ""; display: block; height: 6px; margin: 0 calc(var(--pad) * -1) 34px; background: color-mix(in srgb, var(--p-accent) 30%, transparent); }
.pc[data-personality="piazza"] .mn[data-moment] .mn-acc .mn-cat::before { margin-bottom: 0; }
.pc[data-personality="piazza"] .mn[data-moment] .mn-cat[data-lead]::before { content: none; }
.pc[data-personality="festa"] .mn[data-moment] .mn-cat .mn-cat-band { background: var(--p-accent); color: var(--p-bg); }
.pc[data-personality="festa"] .mn[data-moment] .mn-cat[data-alt] .mn-cat-band { background: var(--p-ink); color: var(--accent2); }
.pc[data-personality="festa"][data-dark] .mn[data-moment] .mn-cat[data-alt] .mn-cat-band { color: var(--p-bg); }
.pc[data-personality="festa"] .mn[data-moment] .mn-acc .mn-cat .mn-acc-ic { color: var(--p-bg); }
.pc[data-personality="festa"] .mn[data-moment] .mn-acc .mn-cat[data-alt] .mn-acc-ic { color: var(--accent2); }
.pc[data-personality="festa"] .mn[data-moment] .mn-acc .mn-cat .mn-cat-band { border-top: 3px solid var(--p-bg); }
.pc[data-personality="festa"] .mn[data-moment] .mn-acc .mn-cat[data-lead] .mn-cat-band { border-top: 0; }

/* The kitchen's hours on a category it isn't serving now. The slot shows
   from the first paint, so its words, written a moment later, push nothing
   down; then `MomentsBehaviour` decides, each minute. */
.pc .mn[data-mo] .mn-kl { display: flex; }
.pc .mn[data-moment="colazione"] .mn-kl[data-kl~="colazione"],
.pc .mn[data-moment="pranzo"] .mn-kl[data-kl~="pranzo"],
.pc .mn[data-moment="pomeriggio"] .mn-kl[data-kl~="pomeriggio"],
.pc .mn[data-moment="aperitivo"] .mn-kl[data-kl~="aperitivo"],
.pc .mn[data-moment="cena"] .mn-kl[data-kl~="cena"],
.pc .mn[data-moment="dopocena"] .mn-kl[data-kl~="dopocena"] { display: none; }
.pc .mn[data-mo-live] .mn-kl { display: none; }
.pc .mn[data-mo-live] .mn-kl[data-on] { display: flex; }
.pc .mn-kl { width: fit-content; align-items: center; gap: 6px; min-height: 28px; margin-top: 10px; padding: 0 11px 0 9px; border-radius: 99px; font: 600 13px/1.2 var(--f-body); letter-spacing: 0; text-transform: none; font-style: normal; background: color-mix(in srgb, currentColor 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 22%, transparent); }
.pc .mn-kl .mn-ic { width: 15px; height: 15px; }
.pc[data-personality="quieto"] .mn-kl { grid-column: 1; margin: 2px 0 6px; }
.pc[data-personality="festa"] .mn-kl { position: relative; z-index: 1; }
.pc .mn-acc .mn-kl { margin-top: 8px; }

@media (min-width: 1024px) {
  .pc .mn > .mn-div { grid-column: 2; }
  .pc .mn-div, .pc .mn-acc .mn-div { margin-left: 0; margin-right: 0; }
  .pc .mn-div { margin-top: 72px; margin-bottom: 30px; }
  .pc .mn[data-moment] .mn-cat[data-lead="focus"] { margin-top: 0; }
  .pc:not([data-personality="festa"]) .mn[data-moment] .mn-bar + .mn-cat:not([data-lead]) { margin-top: 64px; }
  .pc .mn-bar-sep { width: auto; height: 2px; margin: 10px 14px; }
}

/* ================= the guest's allergen filter ================= */
/* docs/plans/allergen-filter.md. With no filter none of this matches: the
   islands add `data-af` to a category's list and `data-fv` to its rows only
   once a guest has chosen. Order: safe, *ask the staff*, the «Altri 3» line,
   then — unfolded only — what contains a selected allergen. */
.pc .mn-algs > li { position: relative; }
.pc .mn-alg-tap { position: absolute; inset: -6px -2px; z-index: 2; padding: 0; border: 0; border-radius: 99px; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pc .mn-alg-tap:focus-visible { outline: 2px solid var(--p-accent); outline-offset: -4px; }
.pc .mn-dishes[data-af] { display: flex; flex-direction: column; }
.pc[data-personality="piazza"] .mn-dishes[data-af] { display: grid; }
.pc .mn-dishes[data-af] > li { order: 0; }
.pc .mn-dishes[data-af] > .mn-af-unk { order: 1; }
.pc .mn-dishes[data-af] > li[data-fv="unknown"] { order: 2; }
.pc .mn-dishes[data-af] > .mn-af-more { order: 3; }
.pc .mn-dishes[data-af] > li[data-fv="contains"] { order: 4; }
.pc .mn-dishes[data-af=""] > li[data-fv="contains"] { display: none; }
.pc .mn-dishes[data-af] > li:is(.mn-af-unk, .mn-af-more) { display: block; padding: 18px 0 6px; border: 0; border-radius: 0; background: none; rotate: none; }
.pc[data-personality="quieto"] .mn-dishes[data-af] > li[data-fv] { border-top: 1px solid color-mix(in srgb, var(--p-fg) 11%, transparent); }
.pc[data-personality="quieto"] .mn-dishes[data-af] > li[data-af-first],
.pc[data-personality="quieto"] .mn-dishes[data-af] > :is(.mn-af-unk, .mn-af-more) + li[data-fv] { border-top: 0; }
.pc .mn-af-unk-title { font-weight: 700; font-size: 17px; }
.pc .mn-af-unk-note { margin-top: 2px; font-size: 14px; opacity: .8; }
.pc .mn-dishes[data-af] > li:is(.mn-af-more) { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 0; font-size: 15px; }
.pc .mn-af-more button { flex: none; min-height: 40px; padding: 6px 16px; border: 0; border-radius: 99px; background: color-mix(in srgb, var(--p-fg) 8%, transparent); font-weight: 600; font-size: 14px; }
.pc .mn-af-more button:focus-visible { outline: 2px solid var(--p-accent); outline-offset: 2px; }
.pc .mn-af-bar { position: sticky; top: calc(var(--pm-top) + var(--pm-bar) + 8px); z-index: 29; margin-top: 8px; transition: top .35s cubic-bezier(.2,.8,.2,1); }
.pc .mn[data-mm="accordion"] .mn-af-bar { top: calc(var(--pm-top) + 8px); }
@media (max-width: 1023px) {
  .pc[data-header-away] .mn-af-bar { top: calc(var(--preview-banner-height, 0px) + var(--pm-bar) + 8px); }
  .pc[data-header-away] .mn[data-mm="accordion"] .mn-af-bar { top: calc(var(--preview-banner-height, 0px) + 8px); }
}
@media (min-width: 1024px) {
  .pc .mn-af-bar { grid-column: 2; margin: 0 0 24px; top: var(--pm-top); }
  .pc .mn[data-mm="accordion"] .mn-af-bar { grid-column: 1; }
  .pc .mn-af-bar + .mn-cat { margin-top: 0; }
  .pc .mn-dishes[data-af] { display: grid; }
  .pc .mn-dishes[data-af] > li:is(.mn-af-unk, .mn-af-more) { grid-column: 1 / -1; }
}

/*
 * The guest's allergen filter (docs/plans/allergen-filter.md): the modal, the
 * selection page and the bar. One sheet for both menu designs: the colours are
 * the public theme's tokens, which the portals carry with them
 * (`public-portal-theme.ts`), and a personality venue's portals also carry
 * `.pc` and its attributes, which bring its faces and corners (`--f-body`,
 * `--f-display`, `--p-radius`). Nothing here exists in the static HTML: the
 * filter starts with a tap.
 */

.af-scrim, .af-ask, .af-page, .af-bar {
  --af-bg: hsl(var(--background));
  --af-fg: hsl(var(--foreground));
  --af-accent: hsl(var(--primary));
  --af-on-accent: hsl(var(--primary-foreground));
  --af-r: var(--p-radius, var(--radius, 14px));
  --af-body: var(--f-body, var(--font-public-body, inherit));
  --af-display: var(--f-display, var(--public-font-display, var(--af-body)));
}
.af-ask, .af-page, .af-bar { color: var(--af-fg); font-family: var(--af-body); -webkit-text-size-adjust: 100%; }
.af-ask *, .af-page *, .af-bar * { box-sizing: border-box; }
:is(.af-ask, .af-page, .af-bar) button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
:is(.af-ask, .af-page, .af-bar) :focus-visible { outline: 2px solid var(--af-accent); outline-offset: 2px; }

/* ================= buttons ================= */
.af-primary { display: block; width: 100%; min-height: 52px; padding: 12px 18px; border: 0; border-radius: calc(var(--af-r) * .8 + 6px); background: var(--af-accent); color: var(--af-on-accent) !important; font-weight: 700 !important; font-size: 17px !important; }
.af-secondary { display: block; width: 100%; min-height: 48px; padding: 10px 18px; border: 0; border-radius: calc(var(--af-r) * .8 + 6px); background: color-mix(in srgb, var(--af-fg) 7%, transparent); font-weight: 600 !important; }
.af-link { margin: 14px auto 0; display: block; border: 0; background: none; padding: 10px; text-decoration: underline; text-underline-offset: 3px; font-size: 15px !important; }

/* ================= the modal ================= */
.af-scrim { position: fixed; inset: 0; z-index: 70; background: rgba(10, 10, 10, .5); }
.af-ask { position: fixed; z-index: 71; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); width: min(calc(100% - 24px), 420px); transform: translateX(-50%); padding: 24px 20px 18px; border-radius: calc(var(--af-r) + 10px); background: var(--af-bg); box-shadow: 0 20px 60px rgba(0, 0, 0, .3); outline: none; }
@media (min-width: 640px) { .af-ask { top: 50%; bottom: auto; transform: translate(-50%, -50%); } }
.af-ask-title { margin: 0 0 8px; font-family: var(--af-display); font-size: 25px; line-height: 1.1; font-weight: var(--w-display, 700); letter-spacing: var(--track-display, -.01em); text-transform: var(--case-display, none); }
.af-ask-body { margin: 0 0 20px; font-size: 16px; line-height: 1.45; opacity: .85; }
.af-ask-actions { display: grid; gap: 8px; }
.af-scrim[data-state="open"], .af-ask[data-state="open"], .af-page[data-state="open"] { animation: af-fade .2s ease-out both; }
@media (prefers-reduced-motion: reduce) { .af-scrim, .af-ask, .af-page { animation: none !important; } }
@keyframes af-fade { from { opacity: 0; } to { opacity: 1; } }

/* ================= the selection page ================= */
.af-page { position: fixed; inset: 0; z-index: 72; display: flex; flex-direction: column; background: var(--af-bg); outline: none; }
.af-page-head { flex: none; display: flex; justify-content: flex-end; padding: max(10px, env(safe-area-inset-top)) 10px 0; }
.af-x { width: 44px; height: 44px; border: 0; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--af-fg) 8%, transparent); }
.af-x svg { width: 20px; height: 20px; }
.af-page-body { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 16px 24px; width: 100%; max-width: 560px; margin: 0 auto; }
.af-page-title { margin: 0; font-family: var(--af-display); font-size: clamp(32px, 9vw, 44px); line-height: 1; font-weight: var(--w-display, 700); letter-spacing: var(--track-display, -.02em); text-transform: var(--case-display, none); }
.af-page-hint { margin: 10px 0 20px; font-size: 16px; opacity: .8; }
.af-chips { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
/* The longest Italian name, «Frutta a guscio», on one line from a 360 px
   phone up (owner, 2026-10-23): a little less padding, and the type eases
   down only below 390 px. A word that still does not fit breaks at a
   syllable, with a hyphen, never mid-letter. */
.af-chip { width: 100%; min-height: 52px; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1.5px solid color-mix(in srgb, var(--af-fg) 18%, transparent); border-radius: 99px; background: none; text-align: left; font-size: clamp(13px, 6.7vw - 9.6px, 16px) !important; font-weight: 600 !important; line-height: 1.15; transition: background .15s, border-color .15s; }
.af-chip-ic { width: 20px; height: 20px; flex: none; }
.af-chip-ic svg { width: 100%; height: 100%; }
.af-chip-name { min-width: 0; overflow-wrap: break-word; hyphens: auto; }
/* Excluded: filled, struck through, a ban icon — not colour alone. */
.af-chip[aria-pressed="true"] { border-color: var(--af-fg); background: var(--af-fg); color: var(--af-bg); }
.af-chip[aria-pressed="true"] .af-chip-name { text-decoration: line-through; text-decoration-thickness: 2px; }
.af-page-foot { flex: none; display: grid; gap: 10px; padding: 14px 20px max(14px, env(safe-area-inset-bottom)); width: 100%; max-width: 560px; margin: 0 auto; border-top: 1px solid color-mix(in srgb, var(--af-fg) 10%, transparent); }
.af-none { margin: 0; font-weight: 600; font-size: 15px; }
.af-staff { margin: 0; font-size: 14px; opacity: .8; }

/* ================= the bar ================= */
.af-bar { margin: 0 var(--pad, 16px) 12px; padding: 8px 8px 9px 16px; border-radius: calc(var(--af-r) + 4px); background: color-mix(in srgb, var(--af-fg) 7%, var(--af-bg)); box-shadow: 0 6px 18px -10px rgba(0, 0, 0, .35); }
.af-bar-row { display: flex; align-items: center; gap: 6px; }
.af-bar-what { flex: 1; min-width: 0; margin: 0; font-weight: 700; font-size: 15px; line-height: 1.2; }
.af-bar-btn { flex: none; min-height: 40px; padding: 6px 14px; border: 0; border-radius: 99px; background: var(--af-bg); font-size: 14px !important; font-weight: 600 !important; }
.af-bar-x { flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; display: grid; place-items: center; background: var(--af-bg); }
.af-bar-x svg { width: 18px; height: 18px; }
.af-bar-staff { margin: 0; font-size: 12.5px; line-height: 1.3; opacity: .8; }
/* Moderno: inside the page's container, so no side margin of its own; on a
   phone's accordion it sticks under the header (the long page's sticky slot
   belongs to the category tabs). */
.af-bar-moderno { margin: 0 0 16px; }
@media (max-width: 767px) {
  .af-bar-stick { position: sticky; top: calc(var(--public-chrome-height, 64px) + 8px); z-index: 39; }
}

/* ================= on a dish ================= */
.sh-af { margin: 14px 0 0; display: grid; gap: 8px; justify-items: start; }
.af-dish-line { margin: 0; display: flex; align-items: flex-start; gap: 8px; font-weight: 700; font-size: 15px; line-height: 1.35; }
.af-dish-line svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.af-dish-filter { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; border: 1.5px solid color-mix(in srgb, currentColor 22%, transparent); border-radius: 50%; background: none; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.af-dish-filter svg { width: 20px; height: 20px; }
.af-dish-filter:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.pc .mn-algs:has(> .mn-alg-filter) { align-items: center; }
.pc .sh .mn-algs > li.mn-alg-filter { height: auto; padding: 0; border: 0; background: none; box-shadow: none; }

/*
 * The dish in the venue's personality (`docs/plans/menu-redesign.md`,
 * step 5), as the reviewed prototype (`proto/menu`,
 * `public/proto-menu/menu.css`, «sheet», with the owner's four reviews
 * folded in). Three containers draw `PersonalityDish`: the phone sheet
 * (`.mn-sheet`, Radix's sheet: its sizing, lock and drag stay the live
 * ones), the desktop dialog (`.mn-sheet.mn-dialog`) and the dish's own page
 * (`.sh-page`). The portals carry `.pc` and the personality's attributes
 * themselves (`public-portal-theme.ts`). Allergen chips are `menu.css`'s.
 */

/* ================= containers ================= */
.pc.mn-sheet { --sheet-r: 26px; border: 0; background: var(--p-bg); color: var(--p-fg); font-family: var(--f-body); border-radius: var(--sheet-r) var(--sheet-r) 0 0; box-shadow: 0 -20px 60px rgba(0, 0, 0, .25); outline: none; }
.pc.mn-sheet[data-personality="quieto"] { --sheet-r: 18px; }
.pc.mn-sheet[data-personality="piazza"] { --sheet-r: 32px; }
.pc.mn-sheet[data-personality="festa"] { --sheet-r: 20px; box-shadow: 0 -3px 0 var(--p-ink), 0 -20px 60px rgba(0, 0, 0, .25); }
.pc.mn-sheet .public-dish-handle > div { background: color-mix(in srgb, var(--p-fg) 25%, transparent); }
.pc .mn-sheet-x { position: absolute; top: 12px; right: 12px; z-index: 31; width: 44px; height: 44px; border: 0; border-radius: 50%; display: grid; place-items: center; font-size: 20px; color: var(--p-fg); background: color-mix(in srgb, var(--p-bg) 82%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 1px 4px rgba(0, 0, 0, .12); cursor: pointer; }
.pc .mn-sheet-x:focus-visible { outline: 2px solid var(--p-accent); outline-offset: 2px; }
.pc.mn-sheet .public-dish-back { top: 12px; width: 44px; height: 44px; border: 0; color: var(--p-fg); background: color-mix(in srgb, var(--p-bg) 82%, transparent); box-shadow: 0 1px 4px rgba(0, 0, 0, .12); }
.pc .sh-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }

/* The desktop dialog: centred over the page, the photo beside the dish. */
.pc.mn-scrim { position: fixed; inset: 0; z-index: 60; background: rgba(10, 10, 10, .45); }
.pc.mn-scrim[data-state="open"] { animation: pc-sh-fade .3s ease-out both; }
.pc.mn-scrim[data-state="closed"] { animation: pc-sh-fade .2s ease-in reverse both; }
.pc.mn-dialog { position: fixed; left: 50%; top: 50%; z-index: 61; width: min(900px, 92vw); max-height: 86vh; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--sheet-r); transform: translate(-50%, -50%); }
.pc.mn-dialog[data-state="open"] { animation: pc-sh-pop .45s cubic-bezier(.2, .9, .25, 1) both; }
.pc.mn-dialog[data-state="closed"] { animation: pc-sh-fade .2s ease-in reverse both; }
.pc.mn-dialog[data-personality="festa"] { box-shadow: 0 0 0 3px var(--p-ink), 8px 8px 0 3px var(--p-ink); }
@keyframes pc-sh-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pc-sh-pop { from { opacity: 0; transform: translate(-50%, -46%) scale(.97); } to { opacity: 1; transform: translate(-50%, -50%); } }

/* ================= the dish ================= */
.pc .sh { position: relative; overflow-x: clip; min-height: 100%; display: flex; flex-direction: column; color: var(--p-fg); font-family: var(--f-body); font-size: 17px; line-height: 1.5; }
.pc .sh *, .pc .sh *::before, .pc .sh *::after { box-sizing: border-box; }
.pc .sh :where(h2, h3, p, dl, dd) { margin: 0; }
.pc .sh button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pc .sh a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.pc .sh-photo { position: relative; flex: none; margin: 0 12px; height: min(34svh, 62vw); border-radius: calc(var(--sheet-r, var(--p-radius)) - 8px); overflow: hidden; background: color-mix(in srgb, var(--p-fg) 6%, var(--p-bg)); }
.pc .sh-photo img { object-fit: cover; }
.pc .sh-photo-empty { height: auto; aspect-ratio: 16 / 6; display: grid; place-items: center; }
.pc .sh-photo-empty img { width: auto; height: 80%; max-width: 40%; object-fit: contain; mix-blend-mode: multiply; }
.pc .sh-ed-art { position: absolute; right: -26px; top: 6px; width: 180px; height: 180px; opacity: .2; pointer-events: none; }
.pc .sh-ed-art img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.pc[data-dark] :is(.sh-photo-empty, .sh-ed-art) img { mix-blend-mode: normal; filter: invert(1) hue-rotate(180deg); }
.pc .sh-body { position: relative; flex: 1; padding: 16px var(--pad) 28px; display: grid; align-content: start; gap: 6px; }
.pc .sh-ed-look .sh-body { padding-top: 22px; }
.pc .sh-kicker { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--p-accent); font-weight: 700; padding-right: 48px; }
.pc .sh-title { margin: 2px 0 6px; padding-right: 40px; font-family: var(--f-display); font-weight: var(--w-display); font-size: clamp(32px, 9vw, 46px); line-height: 1; letter-spacing: var(--track-display); text-transform: var(--case-display); text-wrap: balance; overflow-wrap: anywhere; }
.pc .sh-ed-look .sh-title { font-size: clamp(40px, 11vw, 60px); }
.pc .sh-price { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pc .sh-desc { font-size: 16px; line-height: 1.45; white-space: pre-line; }
.pc .sh-h { margin: 20px 0 4px; font: 700 12px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.pc .sh-ing { font-size: 15.5px; line-height: 1.45; }
.pc .sh .mn-algs { margin-top: 4px; gap: 6px; }
.pc .sh .mn-algs > li { height: 34px; min-width: 34px; font-size: 14px; }
.pc .sh .mn-algs > li.named { padding: 0 12px 0 9px; }
.pc .sh .mn-algs > li > svg { width: 18px; height: 18px; }
.pc .sh .mn-unv { font-size: 13.5px; }

/* Variant prices, each with its own +. */
.pc .sh-vars { margin-top: 4px; }
.pc .sh-vars > li { align-items: center; }
.pc .sh-vars > li:has(.sh-var-add) { padding-right: 4px; }

/* The dish's own facts as a card (his second look). */
.pc .sh-info { margin-top: 14px; padding: 4px 16px 16px; border-radius: 18px; background: color-mix(in srgb, var(--p-fg) 5%, var(--p-bg)); }
.pc .sh-info .sh-h:first-child { margin-top: 14px; }
.pc .sh-facts { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin-top: 16px; font-size: 15px; }
.pc .sh-facts > div { display: contents; }
.pc .sh-facts dt { opacity: .7; }

/* «Va bene con», stepped down to plain rows. */
.pc .sh-sug { list-style: none; margin: 0; padding: 0; display: grid; }
.pc .sh-sug > li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; padding: 12px 0; border-top: 1px solid color-mix(in srgb, var(--p-fg) 12%, transparent); }
.pc .sh-sug-open { all: unset; cursor: pointer; display: grid; gap: 2px; grid-column: 1; min-height: 44px; align-content: center; }
.pc .sh-sug-open:focus-visible { outline: 2px solid var(--p-accent); outline-offset: 2px; }
.pc .sh-sug-open small { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; opacity: .7; font-weight: 700; }
.pc .sh-sug-open b { font-size: 16px; line-height: 1.25; }
.pc .sh-sug-price { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pc .sh-sug > li > .mn-algs { grid-column: 1; margin-top: 6px; }
.pc .sh .sh-sug .mn-algs > li { height: 26px; min-width: 26px; font-size: 12px; padding: 0 5px; }
.pc .sh .sh-sug .mn-algs > li > svg { width: 15px; height: 15px; }

/* The + buttons and the add bar. */
.pc :is(.sh-sug-add, .sh-var-add) { position: relative; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; font-size: 20px; font-weight: 700; background: var(--p-accent); color: var(--p-bg); transition: transform .2s; }
.pc .sh-var-add { width: 32px; height: 32px; font-size: 16px; }
.pc .sh-var-add::after { content: ""; position: absolute; inset: -6px; }
.pc :is(.sh-sug-add, .sh-var-add):active { transform: scale(.9); }
.pc .sh-sug-add { grid-column: 2; grid-row: 1 / span 2; }
.pc .sh-bar { position: sticky; bottom: 0; z-index: 3; display: flex; gap: 10px; padding: 12px var(--pad) max(12px, env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--p-bg) 94%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 -1px 0 color-mix(in srgb, var(--p-fg) 10%, transparent); }
.pc .sh-addbtn { flex: 1; min-height: 50px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: 99px; background: var(--p-accent); color: var(--p-bg); font-weight: 700; font-size: 16px; }
.pc .sh-addbtn-count { flex-basis: 100%; font-size: 12px; font-weight: 600; opacity: .85; }

/* ================= Quieto: a printed carta, round corners ================= */
.pc[data-personality="quieto"] .sh-title { font-style: italic; }
.pc[data-personality="quieto"] .sh-price { font: 400 24px/1 var(--f-display); }
.pc[data-personality="quieto"] .sh-desc { font-style: italic; }
.pc[data-personality="quieto"] .sh-info { background: none; border-radius: 14px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--p-fg) 16%, transparent); }
.pc[data-personality="quieto"] :is(.sh-sug-add, .sh-var-add) { background: none; color: var(--p-fg); box-shadow: inset 0 0 0 1px currentColor; }
.pc[data-personality="quieto"] .sh-addbtn { text-transform: uppercase; letter-spacing: .1em; font-size: 13px; font-weight: 600; }

/* ================= Piazza: warm and round ================= */
.pc[data-personality="piazza"] .sh-price { justify-self: start; padding: 6px 14px; border-radius: 99px; background: color-mix(in srgb, var(--p-accent) 18%, transparent); font-size: 19px; }
.pc[data-personality="piazza"] .sh-info { background: color-mix(in srgb, var(--p-accent) 9%, var(--p-bg)); border-radius: 24px; }
.pc[data-personality="piazza"] .sh-sug-add { background: color-mix(in srgb, var(--p-accent) 16%, transparent); color: var(--p-accent); }
.pc[data-personality="piazza"][data-dark] .sh-sug-add { color: var(--p-fg); }
/* Allergens without the chip: the icon and the name, no louder than the
   ingredients above them (owner, 2026-10-23). The filter's icon is drawn the
   same size; both keep a finger-sized target around them. */
.pc[data-personality="piazza"] .sh .mn-algs { gap: 4px 18px; }
.pc[data-personality="piazza"] .sh .mn-algs > li,
.pc[data-personality="piazza"] .sh .mn-algs > li:is(.named, .code) { height: auto; min-width: 0; padding: 1px 0; gap: 6px; background: none; box-shadow: none; font: 400 15.5px/1.45 var(--f-body); }
.pc[data-personality="piazza"] .sh .mn-algs .mn-alg-tap { inset: -8px -6px; }
.pc[data-personality="piazza"] .sh .mn-algs .af-dish-filter { position: relative; width: 18px; height: 18px; border: 0; border-radius: 0; opacity: .75; }
.pc[data-personality="piazza"] .sh .mn-algs .af-dish-filter::after { content: ""; position: absolute; inset: -13px; }
.pc[data-personality="piazza"] .sh .mn-algs .af-dish-filter svg { width: 18px; height: 18px; }
.pc[data-personality="piazza"] .sh .sh-sug .mn-algs { gap: 10px; }
.pc[data-personality="piazza"] .sh .sh-sug .mn-algs > li { padding: 0; }

/* ================= Festa: loud; what you read in ink ================= */
.pc[data-personality="festa"] .sh-title { color: var(--p-accent); font-size: clamp(42px, 13vw, 64px); line-height: .9; }
.pc[data-personality="festa"] .sh-price { justify-self: start; padding: 6px 12px 5px; border-radius: 8px; background: var(--accent2); color: var(--p-ink); font: 400 26px/1 var(--f-display); rotate: -3deg; box-shadow: 0 0 0 2px var(--p-ink); }
.pc[data-personality="festa"][data-dark] .sh-price { color: var(--p-bg); }
.pc[data-personality="festa"] .sh-photo { box-shadow: 0 0 0 2px var(--p-ink); }
.pc[data-personality="festa"] .sh-info { background: var(--p-bg); border-radius: 14px; box-shadow: inset 0 0 0 2px var(--p-ink), 5px 5px 0 var(--p-ink); padding-top: 0; overflow: hidden; }
.pc[data-personality="festa"] .sh-info .sh-h { margin: 0 -16px 10px; padding: 9px 16px 8px; background: var(--p-ink); color: var(--p-bg); opacity: 1; }
.pc[data-personality="festa"] .sh-info .sh-h:not(:first-child) { margin-top: 16px; }
.pc[data-personality="festa"] .sh-sug > li { border-top: 2px solid var(--p-ink); }
.pc[data-personality="festa"] :is(.sh-desc, .sh-ing, .sh-facts, .sh .mn-unv, .sh-sug-open b) { color: var(--p-ink); }
.pc[data-personality="festa"] :is(.sh-sug-add, .sh-var-add) { border-radius: 12px; box-shadow: 0 3px 0 var(--p-ink); }
.pc[data-personality="festa"] .sh-addbtn { border-radius: 12px; font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: 21px; letter-spacing: .02em; box-shadow: 0 4px 0 var(--p-ink); }
.pc[data-personality="festa"] .sh-addbtn-count { font-family: var(--f-body); text-transform: none; letter-spacing: 0; }
/* A suggestion opened in place slides in over the dish it came from. */
.pc .sh-swap { animation: pc-sh-swap .26s cubic-bezier(.2, .8, .2, 1); }
@keyframes pc-sh-swap { from { opacity: 0; transform: translateX(24px); } }
/* The title stamped in as the sheet opens. */
.pc.mn-sheet[data-personality="festa"][data-state="open"]:not([data-motion-level="off"]) .sh-title { animation: pc-stamp .55s .12s cubic-bezier(.3, 1.4, .5, 1) backwards; }

/* ================= the dialog's layout ================= */
.pc.mn-dialog .sh-photo-look { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
.pc.mn-dialog .sh-photo-look .sh-photo { grid-column: 1; grid-row: 1 / span 2; position: sticky; top: 0; margin: 0; height: 86vh; aspect-ratio: auto; border-radius: 0; box-shadow: none; }
.pc.mn-dialog .sh-photo-look :is(.sh-body, .sh-bar) { grid-column: 2; }
.pc.mn-dialog .sh-photo-look .sh-body { padding-top: 40px; }
.pc.mn-dialog .sh-ed-look { padding-top: 20px; }
.pc.mn-dialog .sh { --pad: 40px; }

/* ================= the dish's own page ================= */
.pc .sh-page-wrap { max-width: 760px; margin: 0 auto; padding: 16px 0 60px; }
.pc .sh-page-back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: 0 var(--pad); font-weight: 600; font-size: 15px; color: var(--p-fg); text-decoration: none; }
.pc .sh-page-back:focus-visible { outline: 2px solid var(--p-accent); outline-offset: 2px; }
.pc .sh-page .sh-photo { --sheet-r: calc(var(--p-radius) + 8px); margin: 8px var(--pad) 0; height: min(46svh, 62vw); }
.pc .sh-page .sh-title { padding-right: 0; }
.pc .sh-page .sh-kicker { padding-right: 0; }
@media (min-width: 1024px) {
  .pc .sh-page-wrap { padding-top: 40px; }
  .pc .sh-page { --pad: 40px; }
}

.pc[data-motion-level="off"] .sh-swap { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .pc:is(.mn-scrim, .mn-dialog), .pc.mn-sheet .sh-title, .pc .sh-swap, .pc :is(.sh-sug-add, .sh-var-add) { animation: none !important; transition: none !important; }
}
.pc[data-motion-level="off"]:is(.mn-scrim, .mn-dialog) { animation: none !important; }
.file\:border-0::file-selector-button {
  border-width: 0px;
}
.file\:bg-transparent::file-selector-button {
  background-color: transparent;
}
.file\:text-sm::file-selector-button {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.file\:font-medium::file-selector-button {
  font-weight: 500;
}
.placeholder\:text-muted-foreground::placeholder {
  --tw-text-opacity: 1;
  color: hsl(var(--muted-foreground) / var(--tw-text-opacity, 1));
}
.hover\:bg-accent:hover {
  --tw-bg-opacity: 1;
  background-color: hsl(var(--accent) / var(--tw-bg-opacity, 1));
}
.hover\:bg-destructive\/80:hover {
  background-color: hsl(var(--destructive) / 0.8);
}
.hover\:bg-destructive\/90:hover {
  background-color: hsl(var(--destructive) / 0.9);
}
.hover\:bg-primary\/80:hover {
  background-color: hsl(var(--primary) / 0.8);
}
.hover\:bg-primary\/90:hover {
  background-color: hsl(var(--primary) / 0.9);
}
.hover\:bg-secondary\/80:hover {
  background-color: hsl(var(--secondary) / 0.8);
}
.hover\:text-accent-foreground:hover {
  --tw-text-opacity: 1;
  color: hsl(var(--accent-foreground) / var(--tw-text-opacity, 1));
}
.hover\:underline:hover {
  text-decoration-line: underline;
}
.hover\:opacity-100:hover {
  opacity: 1;
}
.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.focus\:ring-2:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-ring:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: hsl(var(--ring) / var(--tw-ring-opacity, 1));
}
.focus\:ring-offset-2:focus {
  --tw-ring-offset-width: 2px;
}
.focus-visible\:outline-none:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.focus-visible\:ring-2:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus-visible\:ring-ring:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: hsl(var(--ring) / var(--tw-ring-opacity, 1));
}
.focus-visible\:ring-offset-2:focus-visible {
  --tw-ring-offset-width: 2px;
}
.active\:cursor-grabbing:active {
  cursor: grabbing;
}
.disabled\:pointer-events-none:disabled {
  pointer-events: none;
}
.disabled\:cursor-not-allowed:disabled {
  cursor: not-allowed;
}
.disabled\:opacity-50:disabled {
  opacity: 0.5;
}
.data-\[state\=closed\]\:pointer-events-none[data-state="closed"] {
  pointer-events: none;
}
.data-\[state\=open\]\:bg-accent[data-state="open"] {
  --tw-bg-opacity: 1;
  background-color: hsl(var(--accent) / var(--tw-bg-opacity, 1));
}
.data-\[state\=open\]\:bg-secondary[data-state="open"] {
  --tw-bg-opacity: 1;
  background-color: hsl(var(--secondary) / var(--tw-bg-opacity, 1));
}
.data-\[state\=open\]\:text-muted-foreground[data-state="open"] {
  --tw-text-opacity: 1;
  color: hsl(var(--muted-foreground) / var(--tw-text-opacity, 1));
}
.data-\[state\=closed\]\:duration-300[data-state="closed"] {
  transition-duration: 300ms;
}
.data-\[state\=open\]\:duration-500[data-state="open"] {
  transition-duration: 500ms;
}
.data-\[state\=open\]\:animate-in[data-state="open"] {
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}
.data-\[state\=closed\]\:animate-out[data-state="closed"] {
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}
.data-\[state\=closed\]\:fade-out-0[data-state="closed"] {
  --tw-exit-opacity: 0;
}
.data-\[state\=open\]\:fade-in-0[data-state="open"] {
  --tw-enter-opacity: 0;
}
.data-\[state\=closed\]\:zoom-out-95[data-state="closed"] {
  --tw-exit-scale: .95;
}
.data-\[state\=open\]\:zoom-in-95[data-state="open"] {
  --tw-enter-scale: .95;
}
.data-\[state\=closed\]\:slide-out-to-bottom[data-state="closed"] {
  --tw-exit-translate-y: 100%;
}
.data-\[state\=closed\]\:slide-out-to-left[data-state="closed"] {
  --tw-exit-translate-x: -100%;
}
.data-\[state\=closed\]\:slide-out-to-left-1\/2[data-state="closed"] {
  --tw-exit-translate-x: -50%;
}
.data-\[state\=closed\]\:slide-out-to-right[data-state="closed"] {
  --tw-exit-translate-x: 100%;
}
.data-\[state\=closed\]\:slide-out-to-top[data-state="closed"] {
  --tw-exit-translate-y: -100%;
}
.data-\[state\=closed\]\:slide-out-to-top-\[48\%\][data-state="closed"] {
  --tw-exit-translate-y: -48%;
}
.data-\[state\=open\]\:slide-in-from-bottom[data-state="open"] {
  --tw-enter-translate-y: 100%;
}
.data-\[state\=open\]\:slide-in-from-left[data-state="open"] {
  --tw-enter-translate-x: -100%;
}
.data-\[state\=open\]\:slide-in-from-left-1\/2[data-state="open"] {
  --tw-enter-translate-x: -50%;
}
.data-\[state\=open\]\:slide-in-from-right[data-state="open"] {
  --tw-enter-translate-x: 100%;
}
.data-\[state\=open\]\:slide-in-from-top[data-state="open"] {
  --tw-enter-translate-y: -100%;
}
.data-\[state\=open\]\:slide-in-from-top-\[48\%\][data-state="open"] {
  --tw-enter-translate-y: -48%;
}
.data-\[state\=closed\]\:duration-300[data-state="closed"] {
  animation-duration: 300ms;
}
.data-\[state\=open\]\:duration-500[data-state="open"] {
  animation-duration: 500ms;
}
@media (min-width: 640px) {

  .sm\:max-w-sm {
    max-width: 24rem;
  }

  .sm\:flex-row {
    flex-direction: row;
  }

  .sm\:justify-end {
    justify-content: flex-end;
  }

  .sm\:space-x-2 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.5rem * var(--tw-space-x-reverse));
    margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
  }

  .sm\:rounded-lg {
    border-radius: var(--radius);
  }

  .sm\:text-left {
    text-align: left;
  }
}
@media (min-width: 768px) {

  .md\:h-10 {
    height: 2.5rem;
  }

  .md\:h-12 {
    height: 3rem;
  }

  .md\:h-16 {
    height: 4rem;
  }

  .md\:h-36 {
    height: 9rem;
  }

  .md\:h-40 {
    height: 10rem;
  }

  .md\:h-48 {
    height: 12rem;
  }

  .md\:h-56 {
    height: 14rem;
  }

  .md\:h-64 {
    height: 16rem;
  }

  .md\:h-80 {
    height: 20rem;
  }

  .md\:w-10 {
    width: 2.5rem;
  }

  .md\:w-12 {
    width: 3rem;
  }

  .md\:w-16 {
    width: 4rem;
  }

  .md\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
}
.\[\&_\*\]\:cursor-pointer * {
  cursor: pointer;
}

/* Generated by sync-product-surfaces.mjs; do not edit. */
*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}/*
! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
*//*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 221.2 83.2% 53.3%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 221.2 83.2% 53.3%;
    --radius: 0.5rem;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 217.2 91.2% 59.8%;
    --primary-foreground: 222.2 47.4% 11.2%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 224.3 76.3% 48%;
  }
  * {
  --tw-border-opacity: 1;
  border-color: hsl(var(--border) / var(--tw-border-opacity, 1));
}
  body {
  --tw-bg-opacity: 1;
  background-color: hsl(var(--background) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: hsl(var(--foreground) / var(--tw-text-opacity, 1));
}
.container {
  width: 100%;
}
@media (min-width: 640px) {

  .container {
    max-width: 640px;
  }
}
@media (min-width: 768px) {

  .container {
    max-width: 768px;
  }
}
@media (min-width: 1024px) {

  .container {
    max-width: 1024px;
  }
}
@media (min-width: 1280px) {

  .container {
    max-width: 1280px;
  }
}
@media (min-width: 1536px) {

  .container {
    max-width: 1536px;
  }
}
  .public-chrome-frame {
    color: hsl(var(--foreground));
    background: hsl(var(--background));
    font-family: var(--public-font-body), ui-sans-serif, system-ui, sans-serif;
    letter-spacing: 0.002em;
  }

  .public-chrome-frame .public-section-heading,
  .public-chrome-frame .public-site-brand-name,
  .public-mobile-nav [data-radix-dialog-title] {
    font-family: var(--public-font-display), ui-serif, Georgia, serif;
  }

  .public-main {
    overflow-x: clip;
  }

  /* The menu keeps one accessible structure; these hooks let each preset own
     its hierarchy without branching the menu data or interaction model. */

  .public-chrome-frame .public-menu-price,
  .public-themed-portal .public-menu-price {
    font-weight: 750;
    color: hsl(var(--foreground));
  }

  .public-allergen-list {
    row-gap: 0.4rem;
  }

  .public-allergen-badge {
    color: hsl(var(--foreground));
    border-width: 1px;
    box-shadow: none;
  }

  .public-allergen-inline,
  .public-allergen-count {
    color: hsl(var(--muted-foreground));
  }

  .public-chrome-frame .public-order-action,
  .public-themed-portal .public-order-action {
    color: hsl(var(--foreground));
  }

  .public-chrome-frame .public-order-action:hover,
  .public-themed-portal .public-order-action:hover {
    color: hsl(var(--primary-foreground));
  }

  .public-chrome-frame .public-order-action:focus-visible,
  .public-themed-portal .public-order-action:focus-visible {
    outline: 2px solid hsl(var(--foreground));
    outline-offset: 3px;
  }

  /* Modern: the public rendering from before the preset system landed.
     These resets deliberately retain the semantic hooks and later interaction
     fixes while removing the shared editorial treatment applied above. */
  .public-chrome-frame[data-public-style="modern"],
  .public-mobile-nav[data-public-style="modern"],
  .public-themed-portal[data-public-style="modern"] {
    font-family: inherit;
    letter-spacing: normal;
  }

  .public-chrome-frame[data-public-style="modern"] .public-section-heading,
  .public-chrome-frame[data-public-style="modern"] .public-site-brand-name,
  .public-chrome-frame[data-public-style="modern"]
    .public-menu-category-heading,
  .public-chrome-frame[data-public-style="modern"] .public-menu-item-name,
  .public-mobile-nav[data-public-style="modern"] [data-radix-dialog-title],
  .public-themed-portal[data-public-style="modern"] .public-section-heading,
  .public-themed-portal[data-public-style="modern"] .public-menu-item-name,
  .public-themed-portal[data-public-style="modern"] .public-item-detail-label {
    font-family: inherit;
    letter-spacing: normal;
    text-transform: none;
  }

  .public-chrome-frame[data-public-style="modern"] .public-site-header {
    border-color: hsl(var(--border));
    background: hsl(var(--background) / 0.95);
    box-shadow: none;
  }

  .public-chrome-frame[data-public-style="modern"] .public-site-header-inner {
    gap: 0;
  }

  .public-chrome-frame[data-public-style="modern"] .public-site-brand-name {
    letter-spacing: normal;
  }

  .public-chrome-frame[data-public-style="modern"] .public-site-nav {
    column-gap: 1rem;
  }

  .public-chrome-frame[data-public-style="modern"] .public-site-nav button {
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
  }

  .public-chrome-frame[data-public-style="modern"] .public-menu-card,
  .public-themed-portal[data-public-style="modern"] .public-order-list-item {
    border-color: hsl(var(--border));
    border-radius: 0.5rem;
    background: hsl(var(--card));
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  }

  .public-chrome-frame[data-public-style="modern"] .public-open-status {
    border: 0;
    border-radius: 9999px;
  }

  .public-chrome-frame[data-public-style="modern"] .public-menu-page,
  .public-chrome-frame[data-public-style="modern"] .public-ordering-page {
    padding-bottom: 0;
  }

  .public-chrome-frame[data-public-style="modern"] .public-menu-category-list {
    border-radius: 0.375rem;
    background: hsl(var(--muted));
  }

  .public-chrome-frame[data-public-style="modern"] .public-menu-card,
  .public-themed-portal[data-public-style="modern"] .public-order-list-item {
    overflow: hidden;
  }

  .public-chrome-frame[data-public-style="modern"]
    .public-menu-card:focus-within,
  .public-themed-portal[data-public-style="modern"]
    .public-order-list-item:focus-within {
    outline: none;
  }

  .public-chrome-frame[data-public-style="modern"] .public-menu-item-image,
  .public-themed-portal[data-public-style="modern"] .public-menu-item-image {
    border-radius: 0.375rem;
    background: hsl(var(--muted));
  }

  .public-chrome-frame[data-public-style="modern"] .public-menu-price,
  .public-themed-portal[data-public-style="modern"] .public-menu-price {
    color: hsl(var(--primary));
    font-weight: 600;
  }

  .public-chrome-frame[data-public-style="modern"]
    .public-menu-row
    .public-menu-price {
    color: hsl(var(--foreground) / 0.7);
    font-weight: 400;
  }

  .public-chrome-frame[data-public-style="modern"] .public-allergen-list {
    row-gap: 0.5rem;
  }

  .public-chrome-frame[data-public-style="modern"] .public-allergen-badge,
  .public-themed-portal[data-public-style="modern"] .public-allergen-badge {
    color: hsl(var(--secondary-foreground));
    box-shadow: none;
  }

  .public-chrome-frame[data-public-style="modern"] .public-order-action,
  .public-themed-portal[data-public-style="modern"] .public-order-action {
    color: hsl(var(--primary));
  }

  .public-chrome-frame[data-public-style="modern"]
    .public-order-action:focus-visible,
  .public-themed-portal[data-public-style="modern"]
    .public-order-action:focus-visible {
    outline: none;
  }

  /* The dish sheet (docs/plans/dish-sheet.md). Two looks on one structure:
     `photo` (delivery-app: image, bold section titles, thumbnails) and
     `editorial` (typographic, no images, small-caps section labels). */

  /* Three classes: the presets colour `.public-order-action` at two, plus an
     attribute (`[data-public-style="modern"] .public-order-action`). */

  /* Desktop dialog: the dish on the left, what goes with it on the right. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.pointer-events-none {
  pointer-events: none;
}
.\!visible {
  visibility: visible !important;
}
.visible {
  visibility: visible;
}
.invisible {
  visibility: hidden;
}
.collapse {
  visibility: collapse;
}
.static {
  position: static;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.sticky {
  position: sticky;
}
.inset-0 {
  inset: 0px;
}
.inset-x-0 {
  left: 0px;
  right: 0px;
}
.inset-y-0 {
  top: 0px;
  bottom: 0px;
}
.-bottom-2 {
  bottom: -0.5rem;
}
.-right-2 {
  right: -0.5rem;
}
.bottom-0 {
  bottom: 0px;
}
.bottom-\[var\(--shell-bottom\2c 0px\)\] {
  bottom: var(--shell-bottom,0px);
}
.left-0 {
  left: 0px;
}
.left-2 {
  left: 0.5rem;
}
.left-\[var\(--shell-left\2c 0px\)\] {
  left: var(--shell-left,0px);
}
.right-0 {
  right: 0px;
}
.right-2 {
  right: 0.5rem;
}
.top-0 {
  top: 0px;
}
.top-2 {
  top: 0.5rem;
}
.z-10 {
  z-index: 10;
}
.z-20 {
  z-index: 20;
}
.z-50 {
  z-index: 50;
}
.col-span-2 {
  grid-column: span 2 / span 2;
}
.col-span-3 {
  grid-column: span 3 / span 3;
}
.col-start-3 {
  grid-column-start: 3;
}
.row-start-1 {
  grid-row-start: 1;
}
.m-auto {
  margin: auto;
}
.-mx-1 {
  margin-left: -0.25rem;
  margin-right: -0.25rem;
}
.-mx-2 {
  margin-left: -0.5rem;
  margin-right: -0.5rem;
}
.-mx-4 {
  margin-left: -1rem;
  margin-right: -1rem;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.my-1 {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}
.-mr-1 {
  margin-right: -0.25rem;
}
.mb-3 {
  margin-bottom: 0.75rem;
}
.mb-4 {
  margin-bottom: 1rem;
}
.ml-1\.5 {
  margin-left: 0.375rem;
}
.ml-2 {
  margin-left: 0.5rem;
}
.ml-auto {
  margin-left: auto;
}
.mr-1 {
  margin-right: 0.25rem;
}
.mr-1\.5 {
  margin-right: 0.375rem;
}
.mr-2 {
  margin-right: 0.5rem;
}
.mt-0\.5 {
  margin-top: 0.125rem;
}
.mt-1 {
  margin-top: 0.25rem;
}
.mt-1\.5 {
  margin-top: 0.375rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-3 {
  margin-top: 0.75rem;
}
.mt-4 {
  margin-top: 1rem;
}
.line-clamp-3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.inline {
  display: inline;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.table {
  display: table;
}
.grid {
  display: grid;
}
.contents {
  display: contents;
}
.\!hidden {
  display: none !important;
}
.hidden {
  display: none;
}
.h-1\.5 {
  height: 0.375rem;
}
.h-10 {
  height: 2.5rem;
}
.h-11 {
  height: 2.75rem;
}
.h-12 {
  height: 3rem;
}
.h-14 {
  height: 3.5rem;
}
.h-16 {
  height: 4rem;
}
.h-2 {
  height: 0.5rem;
}
.h-3 {
  height: 0.75rem;
}
.h-3\.5 {
  height: 0.875rem;
}
.h-4 {
  height: 1rem;
}
.h-5 {
  height: 1.25rem;
}
.h-6 {
  height: 1.5rem;
}
.h-7 {
  height: 1.75rem;
}
.h-8 {
  height: 2rem;
}
.h-9 {
  height: 2.25rem;
}
.h-\[var\(--control-height\2c 2\.5rem\)\] {
  height: var(--control-height,2.5rem);
}
.h-\[var\(--radix-select-trigger-height\)\] {
  height: var(--radix-select-trigger-height);
}
.h-full {
  height: 100%;
}
.h-px {
  height: 1px;
}
.max-h-72 {
  max-height: 18rem;
}
.max-h-96 {
  max-height: 24rem;
}
.max-h-\[85dvh\] {
  max-height: 85dvh;
}
.max-h-\[calc\(100vh-3rem\)\] {
  max-height: calc(100vh - 3rem);
}
.max-h-\[var\(--radix-dropdown-menu-content-available-height\)\] {
  max-height: var(--radix-dropdown-menu-content-available-height);
}
.min-h-0 {
  min-height: 0px;
}
.min-h-10 {
  min-height: 2.5rem;
}
.min-h-11 {
  min-height: 2.75rem;
}
.min-h-12 {
  min-height: 3rem;
}
.min-h-6 {
  min-height: 1.5rem;
}
.min-h-64 {
  min-height: 16rem;
}
.min-h-9 {
  min-height: 2.25rem;
}
.min-h-\[80px\] {
  min-height: 80px;
}
.w-11 {
  width: 2.75rem;
}
.w-12 {
  width: 3rem;
}
.w-14 {
  width: 3.5rem;
}
.w-16 {
  width: 4rem;
}
.w-2 {
  width: 0.5rem;
}
.w-2\/3 {
  width: 66.666667%;
}
.w-20 {
  width: 5rem;
}
.w-24 {
  width: 6rem;
}
.w-3 {
  width: 0.75rem;
}
.w-3\.5 {
  width: 0.875rem;
}
.w-3\/4 {
  width: 75%;
}
.w-4 {
  width: 1rem;
}
.w-40 {
  width: 10rem;
}
.w-44 {
  width: 11rem;
}
.w-5 {
  width: 1.25rem;
}
.w-6 {
  width: 1.5rem;
}
.w-64 {
  width: 16rem;
}
.w-7 {
  width: 1.75rem;
}
.w-72 {
  width: 18rem;
}
.w-8 {
  width: 2rem;
}
.w-80 {
  width: 20rem;
}
.w-9 {
  width: 2.25rem;
}
.w-\[var\(--control-height\2c 2\.5rem\)\] {
  width: var(--control-height,2.5rem);
}
.w-auto {
  width: auto;
}
.w-full {
  width: 100%;
}
.min-w-0 {
  min-width: 0px;
}
.min-w-32 {
  min-width: 8rem;
}
.min-w-\[8rem\] {
  min-width: 8rem;
}
.min-w-\[var\(--radix-select-trigger-width\)\] {
  min-width: var(--radix-select-trigger-width);
}
.max-w-6xl {
  max-width: 72rem;
}
.flex-1 {
  flex: 1 1 0%;
}
.flex-shrink-0 {
  flex-shrink: 0;
}
.shrink {
  flex-shrink: 1;
}
.shrink-0 {
  flex-shrink: 0;
}
.grow {
  flex-grow: 1;
}
.origin-\[--radix-dropdown-menu-content-transform-origin\] {
  transform-origin: var(--radix-dropdown-menu-content-transform-origin);
}
.origin-\[--radix-popover-content-transform-origin\] {
  transform-origin: var(--radix-popover-content-transform-origin);
}
.-rotate-90 {
  --tw-rotate: -90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@keyframes pulse {

  50% {
    opacity: .5;
  }
}
.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes spin {

  to {
    transform: rotate(360deg);
  }
}
.animate-spin {
  animation: spin 1s linear infinite;
}
.cursor-default {
  cursor: default;
}
.cursor-not-allowed {
  cursor: not-allowed;
}
.cursor-pointer {
  cursor: pointer;
}
.touch-manipulation {
  touch-action: manipulation;
}
.select-none {
  user-select: none;
}
.resize-none {
  resize: none;
}
.resize {
  resize: both;
}
.scroll-mt-4 {
  scroll-margin-top: 1rem;
}
.list-none {
  list-style-type: none;
}
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grid-cols-7 {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.grid-cols-8 {
  grid-template-columns: repeat(8, minmax(0, 1fr));
}
.grid-cols-\[minmax\(0\2c 12rem\)_minmax\(0\2c 1fr\)_minmax\(0\2c 1fr\)_4\.5rem\] {
  grid-template-columns: minmax(0,12rem) minmax(0,1fr) minmax(0,1fr) 4.5rem;
}
.grid-cols-\[minmax\(0\2c 2fr\)_minmax\(0\2c 3fr\)_auto\] {
  grid-template-columns: minmax(0,2fr) minmax(0,3fr) auto;
}
.flex-col {
  flex-direction: column;
}
.flex-col-reverse {
  flex-direction: column-reverse;
}
.flex-wrap {
  flex-wrap: wrap;
}
.items-start {
  align-items: flex-start;
}
.items-center {
  align-items: center;
}
.items-baseline {
  align-items: baseline;
}
.justify-end {
  justify-content: flex-end;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.gap-0 {
  gap: 0px;
}
.gap-0\.5 {
  gap: 0.125rem;
}
.gap-1 {
  gap: 0.25rem;
}
.gap-1\.5 {
  gap: 0.375rem;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-2\.5 {
  gap: 0.625rem;
}
.gap-3 {
  gap: 0.75rem;
}
.gap-4 {
  gap: 1rem;
}
.gap-6 {
  gap: 1.5rem;
}
.gap-x-2 {
  column-gap: 0.5rem;
}
.gap-x-4 {
  column-gap: 1rem;
}
.gap-y-0\.5 {
  row-gap: 0.125rem;
}
.gap-y-1 {
  row-gap: 0.25rem;
}
.space-y-0\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.125rem * var(--tw-space-y-reverse));
}
.space-y-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
}
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.space-y-5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}
.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}
.divide-y > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-x-auto {
  overflow-x: auto;
}
.overflow-y-auto {
  overflow-y: auto;
}
.overflow-x-hidden {
  overflow-x: hidden;
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.whitespace-nowrap {
  white-space: nowrap;
}
.whitespace-pre-line {
  white-space: pre-line;
}
.whitespace-pre-wrap {
  white-space: pre-wrap;
}
.break-words {
  overflow-wrap: break-word;
}
.break-all {
  word-break: break-all;
}
.rounded {
  border-radius: 0.25rem;
}
.rounded-2xl {
  border-radius: 1rem;
}
.rounded-full {
  border-radius: 9999px;
}
.rounded-lg {
  border-radius: var(--radius);
}
.rounded-md {
  border-radius: calc(var(--radius) - 2px);
}
.rounded-sm {
  border-radius: calc(var(--radius) - 4px);
}
.rounded-xl {
  border-radius: 0.75rem;
}
.rounded-t-xl {
  border-top-left-radius: 0.75rem;
  border-top-right-radius: 0.75rem;
}
.border {
  border-width: 1px;
}
.border-2 {
  border-width: 2px;
}
.border-b {
  border-bottom-width: 1px;
}
.border-l {
  border-left-width: 1px;
}
.border-l-2 {
  border-left-width: 2px;
}
.border-r {
  border-right-width: 1px;
}
.border-t {
  border-top-width: 1px;
}
.border-dashed {
  border-style: dashed;
}
.border-\[hsl\(var\(--foreground\)\/0\.15\)\] {
  border-color: hsl(var(--foreground)/0.15);
}
.border-amber-300 {
  --tw-border-opacity: 1;
  border-color: rgb(252 211 77 / var(--tw-border-opacity, 1));
}
.border-amber-400 {
  --tw-border-opacity: 1;
  border-color: rgb(251 191 36 / var(--tw-border-opacity, 1));
}
.border-border {
  --tw-border-opacity: 1;
  border-color: hsl(var(--border) / var(--tw-border-opacity, 1));
}
.border-destructive {
  --tw-border-opacity: 1;
  border-color: hsl(var(--destructive) / var(--tw-border-opacity, 1));
}
.border-foreground {
  --tw-border-opacity: 1;
  border-color: hsl(var(--foreground) / var(--tw-border-opacity, 1));
}
.border-input {
  --tw-border-opacity: 1;
  border-color: hsl(var(--input) / var(--tw-border-opacity, 1));
}
.border-primary {
  --tw-border-opacity: 1;
  border-color: hsl(var(--primary) / var(--tw-border-opacity, 1));
}
.border-transparent {
  border-color: transparent;
}
.border-l-destructive {
  --tw-border-opacity: 1;
  border-left-color: hsl(var(--destructive) / var(--tw-border-opacity, 1));
}
.border-l-primary {
  --tw-border-opacity: 1;
  border-left-color: hsl(var(--primary) / var(--tw-border-opacity, 1));
}
.bg-\[hsl\(var\(--foreground\)\)\] {
  background-color: hsl(var(--foreground));
}
.bg-amber-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1));
}
.bg-amber-50\/60 {
  background-color: rgb(255 251 235 / 0.6);
}
.bg-amber-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(245 158 11 / var(--tw-bg-opacity, 1));
}
.bg-background {
  --tw-bg-opacity: 1;
  background-color: hsl(var(--background) / var(--tw-bg-opacity, 1));
}
.bg-background\/95 {
  background-color: hsl(var(--background) / 0.95);
}
.bg-black\/80 {
  background-color: rgb(0 0 0 / 0.8);
}
.bg-card {
  --tw-bg-opacity: 1;
  background-color: hsl(var(--card) / var(--tw-bg-opacity, 1));
}
.bg-destructive {
  --tw-bg-opacity: 1;
  background-color: hsl(var(--destructive) / var(--tw-bg-opacity, 1));
}
.bg-destructive\/5 {
  background-color: hsl(var(--destructive) / 0.05);
}
.bg-emerald-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(209 250 229 / var(--tw-bg-opacity, 1));
}
.bg-muted {
  --tw-bg-opacity: 1;
  background-color: hsl(var(--muted) / var(--tw-bg-opacity, 1));
}
.bg-muted\/40 {
  background-color: hsl(var(--muted) / 0.4);
}
.bg-muted\/60 {
  background-color: hsl(var(--muted) / 0.6);
}
.bg-popover {
  --tw-bg-opacity: 1;
  background-color: hsl(var(--popover) / var(--tw-bg-opacity, 1));
}
.bg-primary {
  --tw-bg-opacity: 1;
  background-color: hsl(var(--primary) / var(--tw-bg-opacity, 1));
}
.bg-primary\/10 {
  background-color: hsl(var(--primary) / 0.1);
}
.bg-primary\/5 {
  background-color: hsl(var(--primary) / 0.05);
}
.bg-red-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
}
.bg-secondary {
  --tw-bg-opacity: 1;
  background-color: hsl(var(--secondary) / var(--tw-bg-opacity, 1));
}
.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.fill-current {
  fill: currentColor;
}
.object-cover {
  object-fit: cover;
}
.p-0 {
  padding: 0px;
}
.p-0\.5 {
  padding: 0.125rem;
}
.p-1 {
  padding: 0.25rem;
}
.p-2 {
  padding: 0.5rem;
}
.p-3 {
  padding: 0.75rem;
}
.p-4 {
  padding: 1rem;
}
.p-5 {
  padding: 1.25rem;
}
.p-6 {
  padding: 1.5rem;
}
.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.px-1\.5 {
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}
.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.px-2\.5 {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}
.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}
.px-\[22px\] {
  padding-left: 22px;
  padding-right: 22px;
}
.py-0 {
  padding-top: 0px;
  padding-bottom: 0px;
}
.py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}
.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.pb-0\.5 {
  padding-bottom: 0.125rem;
}
.pb-1 {
  padding-bottom: 0.25rem;
}
.pb-1\.5 {
  padding-bottom: 0.375rem;
}
.pb-2 {
  padding-bottom: 0.5rem;
}
.pb-\[calc\(var\(--translations-footer-height\2c 120px\)\+16px\)\] {
  padding-bottom: calc(var(--translations-footer-height,120px) + 16px);
}
.pb-\[env\(safe-area-inset-bottom\)\] {
  padding-bottom: env(safe-area-inset-bottom);
}
.pl-3 {
  padding-left: 0.75rem;
}
.pl-4 {
  padding-left: 1rem;
}
.pl-8 {
  padding-left: 2rem;
}
.pr-1 {
  padding-right: 0.25rem;
}
.pr-14 {
  padding-right: 3.5rem;
}
.pr-2 {
  padding-right: 0.5rem;
}
.pt-1\.5 {
  padding-top: 0.375rem;
}
.pt-2 {
  padding-top: 0.5rem;
}
.pt-3 {
  padding-top: 0.75rem;
}
.pt-4 {
  padding-top: 1rem;
}
.pt-5 {
  padding-top: 1.25rem;
}
.pt-\[var\(--public-chrome-height\)\] {
  padding-top: var(--public-chrome-height);
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.align-middle {
  vertical-align: middle;
}
.font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}
.text-\[10px\] {
  font-size: 10px;
}
.text-\[11px\] {
  font-size: 11px;
}
.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}
.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
.font-medium {
  font-weight: 500;
}
.font-normal {
  font-weight: 400;
}
.font-semibold {
  font-weight: 600;
}
.uppercase {
  text-transform: uppercase;
}
.capitalize {
  text-transform: capitalize;
}
.italic {
  font-style: italic;
}
.tabular-nums {
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.leading-none {
  line-height: 1;
}
.leading-relaxed {
  line-height: 1.625;
}
.leading-snug {
  line-height: 1.375;
}
.tracking-tight {
  letter-spacing: -0.025em;
}
.tracking-wide {
  letter-spacing: 0.025em;
}
.tracking-widest {
  letter-spacing: 0.1em;
}
.text-\[hsl\(var\(--background\)\)\] {
  color: hsl(var(--background));
}
.text-amber-600 {
  --tw-text-opacity: 1;
  color: rgb(217 119 6 / var(--tw-text-opacity, 1));
}
.text-amber-700 {
  --tw-text-opacity: 1;
  color: rgb(180 83 9 / var(--tw-text-opacity, 1));
}
.text-amber-800 {
  --tw-text-opacity: 1;
  color: rgb(146 64 14 / var(--tw-text-opacity, 1));
}
.text-amber-950 {
  --tw-text-opacity: 1;
  color: rgb(69 26 3 / var(--tw-text-opacity, 1));
}
.text-current {
  color: currentColor;
}
.text-destructive {
  --tw-text-opacity: 1;
  color: hsl(var(--destructive) / var(--tw-text-opacity, 1));
}
.text-destructive-foreground {
  --tw-text-opacity: 1;
  color: hsl(var(--destructive-foreground) / var(--tw-text-opacity, 1));
}
.text-emerald-600 {
  --tw-text-opacity: 1;
  color: rgb(5 150 105 / var(--tw-text-opacity, 1));
}
.text-emerald-700 {
  --tw-text-opacity: 1;
  color: rgb(4 120 87 / var(--tw-text-opacity, 1));
}
.text-emerald-800 {
  --tw-text-opacity: 1;
  color: rgb(6 95 70 / var(--tw-text-opacity, 1));
}
.text-emerald-950 {
  --tw-text-opacity: 1;
  color: rgb(2 44 34 / var(--tw-text-opacity, 1));
}
.text-foreground {
  --tw-text-opacity: 1;
  color: hsl(var(--foreground) / var(--tw-text-opacity, 1));
}
.text-muted-foreground {
  --tw-text-opacity: 1;
  color: hsl(var(--muted-foreground) / var(--tw-text-opacity, 1));
}
.text-muted-foreground\/60 {
  color: hsl(var(--muted-foreground) / 0.6);
}
.text-popover-foreground {
  --tw-text-opacity: 1;
  color: hsl(var(--popover-foreground) / var(--tw-text-opacity, 1));
}
.text-primary {
  --tw-text-opacity: 1;
  color: hsl(var(--primary) / var(--tw-text-opacity, 1));
}
.text-primary-foreground {
  --tw-text-opacity: 1;
  color: hsl(var(--primary-foreground) / var(--tw-text-opacity, 1));
}
.text-red-700 {
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}
.text-red-800 {
  --tw-text-opacity: 1;
  color: rgb(153 27 27 / var(--tw-text-opacity, 1));
}
.text-secondary-foreground {
  --tw-text-opacity: 1;
  color: hsl(var(--secondary-foreground) / var(--tw-text-opacity, 1));
}
.text-violet-600 {
  --tw-text-opacity: 1;
  color: rgb(124 58 237 / var(--tw-text-opacity, 1));
}
.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.underline {
  text-decoration-line: underline;
}
.line-through {
  text-decoration-line: line-through;
}
.decoration-muted-foreground\/60 {
  text-decoration-color: hsl(var(--muted-foreground) / 0.6);
}
.underline-offset-2 {
  text-underline-offset: 2px;
}
.underline-offset-4 {
  text-underline-offset: 4px;
}
.opacity-50 {
  opacity: 0.5;
}
.opacity-60 {
  opacity: 0.6;
}
.opacity-70 {
  opacity: 0.7;
}
.opacity-80 {
  opacity: 0.8;
}
.shadow-\[0_-4px_12px_rgba\(0\2c 0\2c 0\2c 0\.06\)\] {
  --tw-shadow: 0 -4px 12px rgba(0,0,0,0.06);
  --tw-shadow-colored: 0 -4px 12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-md {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.outline {
  outline-style: solid;
}
.ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-0 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-1 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-2 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-inset {
  --tw-ring-inset: inset;
}
.ring-amber-300 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(252 211 77 / var(--tw-ring-opacity, 1));
}
.ring-black\/10 {
  --tw-ring-color: rgb(0 0 0 / 0.1);
}
.ring-emerald-300 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(110 231 183 / var(--tw-ring-opacity, 1));
}
.ring-primary {
  --tw-ring-opacity: 1;
  --tw-ring-color: hsl(var(--primary) / var(--tw-ring-opacity, 1));
}
.ring-offset-1 {
  --tw-ring-offset-width: 1px;
}
.ring-offset-background {
  --tw-ring-offset-color: hsl(var(--background) / 1);
}
.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.drop-shadow-lg {
  --tw-drop-shadow: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.\!filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important;
}
.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.backdrop-blur {
  --tw-backdrop-blur: blur(8px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[width\] {
  transition-property: width;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes enter {

  from {
    opacity: var(--tw-enter-opacity, 1);
    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));
  }
}
@keyframes exit {

  to {
    opacity: var(--tw-exit-opacity, 1);
    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
  }
}
.ease-in-out {
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.running {
  animation-play-state: running;
}
.paused {
  animation-play-state: paused;
}

  /* A pending plain link fades. Correct where the link *is* the text. */
  [data-navigation-pending="true"] {
    opacity: 0.6;
  }

  /* A pending navigation *row* fills instead of fading. Removing 40% of a
     row's contrast is a change you have to be looking at the row to notice;
     adding colour and a leading edge marker is one you catch from anywhere on
     the screen, which is the whole difference the owner reported. */
  [data-navigation-pending="row"] > button {
    background-color: hsl(var(--primary) / 0.15);
    box-shadow: inset 3px 0 0 0 hsl(var(--primary));
  }

  /* Horizontal scroll padding utility so first/last items are fully reachable */

  /* Lightweight CSS animation to replace Framer Motion */
  @keyframes fade-in-up {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
/* Fixed public preview/header chrome must not cover anchor and category targets. */
.public-chrome-frame [id] {
  scroll-margin-top: calc(var(--public-chrome-height) + 1rem);
}

/*
 * On a phone the admin's surfaces run edge to edge, like the *Altro* sheet's
 * rows, instead of floating inside the page's 16 px gutter
 * (docs/plans/admin-phone-polish.md). Two ways in:
 *
 * - every `Card` (it carries `data-card`) that is not inside another card, so
 *   a choice box drawn as a card inside a card keeps its frame;
 * - `.admin-bleed`, for a surface drawn without `Card` (a link list, a table).
 *
 * `data-inset` opts a card out, for one that does not sit on the 16 px gutter;
 * on a container it opts out every card inside (a row of side-by-side tiles).
 * Scoped to the admin's `<main>`: dialogs and sheets are portalled outside it,
 * and the public site's cards never match. From `md` up nothing changes.
 */
@media (max-width: 767.98px) {
  #admin-main-content [data-card]:not([data-card] [data-card]):not([data-inset]):not([data-inset] [data-card]),
  #admin-main-content .admin-bleed {
    margin-inline: -1rem;
    border-radius: 0;
    border-left-width: 0;
    border-right-width: 0;
    box-shadow: none;
  }
}

/*
 * The booking pages in the venue's personality (`docs/plans/menu-redesign.md`,
 * step 11), as the reviewed prototype (`proto/menu`, `booking.css`). Scoped to
 * the chrome frame's `.pc`; a Moderno venue never renders a `bk-` class.
 * Colours are the frame's `--p-*`, type its `--f-*` (`components/pages/personality.css`).
 *
 * Quieto: a hairline card, italic serif, round corners. Piazza: round and warm,
 * a tinted card, people as coins, a drawing beside the title. Festa: an
 * ink-framed ticket with a black step band, chunky choices, the picked one a
 * tilted sticker; only headings in the text colour, reading text in ink.
 */

.pc .bk { --line: color-mix(in srgb, var(--p-fg) 16%, transparent); --tint: color-mix(in srgb, var(--p-fg) 6%, transparent); --r: 18px; position: relative; width: 100%; min-width: 0; max-width: 760px; margin: 0 auto; padding: 0 var(--pad) 70px; color: var(--p-fg); font-family: var(--f-body); }
.pc .bk :is(h1, h2) { margin: 0; font-family: var(--f-display); font-weight: var(--w-display); letter-spacing: var(--track-display); text-transform: var(--case-display); }
.pc .bk p { margin: 0; }
.pc .bk-head { position: relative; padding: 30px 0 22px; display: grid; gap: 8px; }
.pc .bk-kicker { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--p-accent); font-weight: 600; }
.pc .bk-title { font-size: clamp(44px, 13vw, 72px); line-height: .95; max-width: 11ch; }
.pc .bk-intro { max-width: 52ch; font-size: 16px; opacity: .8; }
.pc .bk-burst, .pc .bk-art { display: none; }

.pc .bk-card { position: relative; min-width: 0; background: var(--p-bg); border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--line); }
.pc .bk-card-top { padding: 14px 18px; border-bottom: 1px solid var(--line); }
.pc .bk-body { padding: 20px 18px 18px; display: grid; gap: 20px; min-width: 0; }
.pc .bk-solo { padding: 24px 20px; display: grid; gap: 14px; }

.pc .bk-steps { list-style: none; margin: 0; padding: 0; display: flex; justify-content: space-between; gap: 6px; font-size: 13px; }
.pc .bk-steps li { display: flex; align-items: center; gap: 7px; min-width: 0; opacity: .55; }
.pc .bk-steps li[aria-current], .pc .bk-steps li.done { opacity: 1; }
.pc .bk-steps li[aria-current] { font-weight: 700; }
.pc .bk-n { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 99px; font: 600 11px/1 var(--f-body); background: var(--tint); }
.pc .bk-n svg { width: 13px; height: 13px; }
.pc .bk-steps li[aria-current] .bk-n, .pc .bk-steps li.done .bk-n { background: var(--p-accent); color: var(--p-bg); }

.pc .bk-sum { display: flex; flex-wrap: wrap; gap: 8px; }
.pc .bk-pill { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 14px; border: 0; border-radius: 99px; background: var(--tint); color: var(--p-fg); font: 600 14px/1 var(--f-body); cursor: pointer; }
.pc .bk-pill svg { width: 16px; height: 16px; }
.pc .bk-pill-date::first-letter { text-transform: uppercase; }
.pc .bk-step { display: grid; gap: 20px; min-width: 0; }
.pc .bk-step-head { display: grid; gap: 8px; }
.pc .bk-h2 { font-size: clamp(28px, 8vw, 40px); line-height: 1; outline: none; }
.pc .bk-hint { font-size: 15px; opacity: .75; }

.pc .bk-grid { display: grid; gap: 8px; }
.pc .bk-people { grid-template-columns: repeat(4, 1fr); }
.pc .bk-times { grid-template-columns: repeat(3, 1fr); }
.pc .bk-row { display: flex; flex-wrap: wrap; gap: 8px; }
.pc .bk-choice { min-height: 52px; min-width: 0; padding: 0 14px; border: 0; border-radius: var(--r); background: var(--p-bg); color: var(--p-fg); box-shadow: inset 0 0 0 1.5px var(--line); font: 600 17px/1 var(--f-body); font-variant-numeric: tabular-nums; cursor: pointer; transition: transform .15s, background-color .2s, color .2s, rotate .2s; }
.pc .bk-people .bk-choice { min-height: 58px; font-size: 21px; }
.pc .bk-times .bk-choice { padding: 0 4px; }
.pc .bk-choice:active { transform: scale(.95); }
.pc .bk-choice[aria-pressed="true"] { background: var(--p-accent); color: var(--p-bg); box-shadow: none; }
.pc .bk :is(button, a, input, textarea, summary):focus-visible { outline: 2px solid var(--p-accent); outline-offset: 2px; }

.pc .bk-when { display: grid; gap: 22px; min-width: 0; }
.pc .bk-cal { min-width: 0; padding: 10px; border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--line); }
.pc .bk-cal-top { display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 2px 2px 8px; }
.pc .bk-cal-month { font-family: var(--f-display); font-weight: var(--w-display); font-size: 20px; text-transform: var(--case-display); text-align: center; }
.pc .bk-cal-month::first-letter { text-transform: uppercase; }
.pc .bk-cal-nav { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border: 0; border-radius: 99px; background: var(--tint); color: var(--p-fg); cursor: pointer; }
.pc .bk-cal-nav:disabled { opacity: .3; }
.pc .bk-cal-nav svg { width: 18px; height: 18px; }
.pc .bk-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; text-align: center; }
.pc .bk-cal-wd { padding: 4px 0; font-size: 11px; font-weight: 700; opacity: .55; text-transform: capitalize; }
.pc .bk-day { width: 100%; min-width: 0; height: 44px; border: 0; border-radius: 99px; background: none; color: var(--p-fg); font: 500 15px/1 var(--f-body); font-variant-numeric: tabular-nums; cursor: pointer; touch-action: manipulation; }
.pc .bk-day:disabled { opacity: .3; cursor: default; }
.pc .bk-day[data-available] { background: color-mix(in srgb, #2fbf71 16%, transparent); font-weight: 700; }
.pc .bk-day[aria-pressed="true"] { background: var(--p-accent); color: var(--p-bg); font-weight: 700; }
.pc .bk-cal-key { display: flex; align-items: center; gap: 7px; padding: 8px 4px 2px; font-size: 12.5px; opacity: .8; }
.pc .bk-cal-key i { width: 12px; height: 12px; flex: none; border-radius: 4px; background: color-mix(in srgb, #2fbf71 30%, transparent); }
.pc .bk-side { display: grid; gap: 18px; align-content: start; min-width: 0; }
.pc .bk-fs { min-width: 0; margin: 0; padding: 0; border: 0; display: grid; gap: 10px; }
.pc .bk-fs legend { padding: 0 0 10px; font-weight: 700; font-size: 14px; }
.pc .bk-empty { display: grid; gap: 6px; justify-items: start; padding: 16px; border-radius: var(--r); background: var(--tint); }
.pc .bk-empty small { font-size: 13px; opacity: .75; }
.pc .bk-wait { display: grid; gap: 10px; }
.pc .bk-wait > p { font-size: 14px; opacity: .75; }
.pc .bk-wait i { display: block; height: 52px; border-radius: var(--r); background: linear-gradient(90deg, var(--tint) 30%, color-mix(in srgb, var(--p-fg) 12%, transparent) 50%, var(--tint) 70%) 0 0 / 300% 100%; animation: bk-shimmer 1.6s linear infinite; }

.pc .bk-fields { display: grid; gap: 16px; min-width: 0; }
.pc .bk-two { display: grid; gap: 16px; }
.pc .bk-field { display: grid; gap: 7px; min-width: 0; font-size: 14px; font-weight: 600; }
.pc .bk-field :is(input, textarea) { width: 100%; min-height: 52px; padding: 12px 14px; border: 0; border-radius: var(--r); background: var(--p-bg); color: var(--p-fg); box-shadow: inset 0 0 0 1.5px var(--line); font: 400 17px/1.3 var(--f-body); }
.pc .bk-field :is(input, textarea):focus { outline: none; box-shadow: inset 0 0 0 2px var(--p-accent); }
.pc .bk-field small { font-weight: 400; font-size: 13px; opacity: .75; }
.pc .bk-more { padding: 0 14px; border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--line); }
.pc .bk-more summary { list-style: none; min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 10px; font-weight: 600; font-size: 15px; cursor: pointer; }
.pc .bk-more summary::-webkit-details-marker { display: none; }
.pc .bk-more summary i { font-style: normal; font-size: 22px; line-height: 1; transition: transform .25s; }
.pc .bk-more[open] summary i { transform: rotate(45deg); }
.pc .bk-more .bk-field { padding-bottom: 14px; }
.pc .bk-privacy { font-size: 13px; line-height: 1.5; opacity: .8; }
.pc .bk-privacy a, .pc .bk-link-text { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.pc .bk-alert { padding: 12px 14px; border-radius: var(--r); background: color-mix(in srgb, #d64545 12%, var(--p-bg)); color: color-mix(in srgb, #b42318 70%, var(--p-fg)); font-size: 14.5px; font-weight: 600; }
.pc .bk-bar { display: flex; align-items: center; gap: 10px; padding-top: 16px; border-top: 1px solid var(--line); }
.pc .bk-back { display: inline-flex; align-items: center; gap: 6px; min-height: 52px; padding: 0 8px; border: 0; background: none; color: var(--p-fg); font: 600 15px/1 var(--f-body); cursor: pointer; }
.pc .bk :is(.bk-go, .bk-ghost) { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 54px; padding: 0 22px; border: 0; border-radius: 99px; font: 700 16px/1.1 var(--f-body); text-align: center; cursor: pointer; text-decoration: none; transition: transform .2s; }
.pc .bk-go { flex: 1; background: var(--p-accent); color: var(--p-bg); }
.pc .bk-ghost { background: transparent; color: var(--p-fg); box-shadow: inset 0 0 0 2px currentColor; }
.pc .bk :is(.bk-go, .bk-ghost):active { transform: scale(.97); }
.pc .bk :is(.bk-go, .bk-ghost):disabled { opacity: .4; cursor: default; transform: none; }
.pc .bk :is(.bk-go, .bk-ghost) svg { width: 17px; height: 17px; }
.pc .bk-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.pc .bk-actions > * { flex: 1 1 180px; }
.pc .bk-danger { background: #b42318; color: #fff; }

.pc .bk-big { font-size: 19px; line-height: 1.4; }
.pc .bk-q { font-weight: 700; }
.pc .bk-stamp { justify-self: start; display: grid; place-items: center; min-width: 64px; height: 64px; padding: 0 16px; border-radius: 99px; background: var(--p-accent); color: var(--p-bg); font-size: 28px; font-weight: 700; }
.pc .bk-stamp svg { width: 30px; height: 30px; }
.pc .bk-stamp b { display: none; }
.pc .bk-link { display: grid; gap: 8px; min-width: 0; padding: 14px; border-radius: var(--r); background: var(--tint); }
.pc .bk-link p { font-size: 14px; opacity: .8; }
.pc .bk-link code { display: block; padding: 10px; border-radius: 9px; background: var(--p-bg); font-size: 13px; word-break: break-all; }
.pc .bk-link .bk-ghost { justify-self: start; min-height: 44px; }
.pc .bk-text-btn { justify-self: start; min-height: 44px; padding: 0; border: 0; background: none; color: var(--p-fg); font: 600 15px/1 var(--f-body); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }

.pc .bk-doc { display: grid; gap: 10px; max-width: 62ch; font-size: 16.5px; line-height: 1.6; }
.pc .bk-doc h2 { margin-top: 18px; font-size: 26px; line-height: 1.05; }
.pc .bk-doc p { white-space: pre-line; opacity: .85; }
.pc .bk-doc .bk-card { margin-top: 18px; padding: 18px; display: grid; gap: 8px; }
.pc .bk-doc .bk-card h2 { margin: 0; }
.pc .bk-doc ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }

/* The loading state: both looks are in the markup, the menu-design attribute picks. */
.public-chrome-frame:not([data-menu-design="personality"]) .bk-sk { display: none; }
[data-menu-design="personality"] .bk-sk-moderno { display: none; }
.pc .bk-sk i { display: block; border-radius: var(--r); background: linear-gradient(90deg, var(--tint) 30%, color-mix(in srgb, var(--p-fg) 12%, transparent) 50%, var(--tint) 70%) 0 0 / 300% 100%; animation: bk-shimmer 1.6s linear infinite; }
.pc .bk-sk .bk-sk-title { height: 64px; width: 70%; }
.pc .bk-sk .bk-people i { height: 58px; }

/* The narrowest phones: only the current step keeps its word; the others their number. */
@media (max-width: 379px) {
  .pc .bk-steps li:not([aria-current]) > span:last-child { display: none; }
  .pc .bk-steps li[aria-current] { flex: 1; }
}

@media (min-width: 720px) {
  .pc .bk-head { padding: 60px 0 34px; }
  .pc .bk-card-top { padding: 18px 30px; }
  .pc .bk-body { padding: 30px; }
  .pc .bk-people { grid-template-columns: repeat(6, 1fr); }
  .pc .bk-when { grid-template-columns: 1.1fr 1fr; }
  .pc .bk-two { grid-template-columns: 1fr 1fr; }
  .pc .bk-solo { padding: 36px; }
}

/* ---------------- Quieto */
.pc[data-personality="quieto"] .bk { --r: 12px; }
.pc[data-personality="quieto"] .bk :is(.bk-title, .bk-h2, .bk-doc h2) { font-style: italic; }
.pc[data-personality="quieto"] .bk-card { border-radius: 18px; }
.pc[data-personality="quieto"] .bk-steps { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.pc .bk-steps li > span:last-child { white-space: nowrap; }
.pc[data-personality="quieto"] .bk-n { background: none; box-shadow: inset 0 0 0 1px var(--line); color: var(--p-accent); }
.pc[data-personality="quieto"] .bk-steps li:is([aria-current], .done) .bk-n { background: var(--p-fg); color: var(--p-bg); box-shadow: none; }
.pc[data-personality="quieto"] .bk-choice { box-shadow: inset 0 0 0 1px var(--line); font-weight: 500; }
.pc[data-personality="quieto"] .bk-people .bk-choice { font: 350 26px/1 var(--f-display); }
.pc[data-personality="quieto"] :is(.bk-choice, .bk-day)[aria-pressed="true"] { background: var(--p-fg); color: var(--p-bg); }
.pc[data-personality="quieto"] .bk-pill { background: none; box-shadow: inset 0 0 0 1px var(--line); font-weight: 500; }
.pc[data-personality="quieto"] .bk :is(.bk-go, .bk-ghost) { font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.pc[data-personality="quieto"] .bk-stamp { background: none; color: var(--p-accent); box-shadow: inset 0 0 0 1px var(--p-accent); }
.pc[data-personality="quieto"] .bk-big { font: italic 350 22px/1.35 var(--f-display); }

/* ---------------- Piazza */
.pc[data-personality="piazza"] .bk-title { color: var(--p-accent); max-width: 9ch; }
.pc[data-personality="piazza"] .bk-art { display: block; position: absolute; right: -8px; top: 18px; width: 120px; height: 120px; background: var(--p-accent); pointer-events: none; -webkit-mask: var(--art) center / contain no-repeat; mask: var(--art) center / contain no-repeat; animation: pc-bob 6s ease-in-out infinite; }
.pc[data-personality="piazza"] .bk-card { background: color-mix(in srgb, var(--p-accent) 8%, var(--p-bg)); box-shadow: none; border-radius: 28px; }
.pc[data-personality="piazza"] :is(.bk-card-top, .bk-bar) { border-color: color-mix(in srgb, var(--p-accent) 22%, transparent); }
.pc[data-personality="piazza"] .bk-steps li { flex: 1; }
.pc[data-personality="piazza"] .bk-steps li:last-child { flex: 0 1 auto; }
.pc[data-personality="piazza"] .bk-steps li:not(:last-child)::after { content: ""; flex: 1; min-width: 10px; height: 2px; border-radius: 2px; background: color-mix(in srgb, var(--p-accent) 30%, transparent); }
.pc[data-personality="piazza"] .bk-steps { gap: 5px; }
.pc[data-personality="piazza"] .bk-steps li > span:last-child { flex: none; white-space: nowrap; }
.pc[data-personality="piazza"] .bk-steps li:not(:last-child)::after { min-width: 4px; }
.pc[data-personality="piazza"] .bk-choice { box-shadow: none; }
.pc[data-personality="piazza"] .bk-people .bk-choice { aspect-ratio: 1; height: auto; border-radius: 99px; font: 800 22px/1 var(--f-display); }
.pc[data-personality="piazza"] :is(.bk-times, .bk-row) .bk-choice { border-radius: 99px; }
.pc[data-personality="piazza"] .bk-choice[aria-pressed="true"] { transform: scale(1.04); }
.pc[data-personality="piazza"] :is(.bk-cal, .bk-more, .bk-field input, .bk-field textarea, .bk-pill, .bk-link) { background: var(--p-bg); box-shadow: none; }
.pc[data-personality="piazza"] .bk-cal { border-radius: 22px; }
.pc[data-personality="piazza"] .bk-stamp { width: 72px; height: 72px; }

/* ---------------- Festa */
.pc[data-personality="festa"] .bk { --r: 12px; }
.pc[data-personality="festa"] .bk-title { color: var(--p-accent); font-size: clamp(54px, 17vw, 96px); line-height: .88; max-width: 8ch; }
.pc[data-personality="festa"] .bk-burst { display: block; position: absolute; right: -10px; top: 14px; width: 120px; color: var(--accent2); animation: pc-spin 18s linear infinite; }
.pc[data-personality="festa"] .bk-burst .pp-stk { width: 100%; height: auto; display: block; overflow: visible; color: inherit; }
.pc[data-personality="festa"] .bk-burst .pp-stk-word { font-family: var(--f-display); fill: var(--p-ink); font-size: 22px; }
.pc[data-personality="festa"][data-dark] .bk-burst .pp-stk-word { fill: var(--accent2); }
.pc[data-personality="festa"] .bk-card { border-radius: 16px; overflow: hidden; box-shadow: inset 0 0 0 2.5px var(--p-ink), 6px 6px 0 var(--p-ink); }
.pc[data-personality="festa"] .bk-card-top { border: 0; background: var(--p-ink); color: var(--p-bg); }
.pc[data-personality="festa"][data-dark] .bk-card-top { background: color-mix(in srgb, var(--p-fg) 14%, var(--p-bg)); color: var(--p-fg); }
.pc[data-personality="festa"] .bk-steps { font: 400 15px/1 var(--f-display); letter-spacing: .03em; text-transform: uppercase; }
.pc[data-personality="festa"] .bk-steps li { opacity: .5; }
.pc[data-personality="festa"] .bk-steps li:is([aria-current], .done) { opacity: 1; font-weight: 400; }
.pc[data-personality="festa"] .bk-n { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; color: inherit; font-family: var(--f-display); font-size: 13px; }
.pc[data-personality="festa"] .bk-steps li[aria-current] .bk-n { background: var(--accent2); color: var(--p-ink); box-shadow: none; }
.pc[data-personality="festa"] .bk-steps li.done .bk-n { background: var(--p-bg); color: var(--p-ink); box-shadow: none; }
.pc[data-personality="festa"] :is(.bk-h2, .bk-doc h2) { color: var(--p-accent); }
/* What you read inside the ticket is in ink (his review of the menu: «too much red text»). */
.pc[data-personality="festa"] :is(.bk-card, .bk-doc, .bk-field input, .bk-field textarea, .bk-cal-month, .bk-back, .bk-text-btn, .bk-cal-nav, .bk-day, .bk-choice) { color: var(--p-ink); }
.pc[data-personality="festa"] .bk-doc :is(h2, .bk-card h2) { color: var(--p-accent); }
.pc[data-personality="festa"][data-dark] :is(.bk-card, .bk-doc, .bk-field input, .bk-field textarea, .bk-cal-month, .bk-back, .bk-text-btn, .bk-cal-nav, .bk-day, .bk-choice) { color: var(--p-fg); }
.pc[data-personality="festa"] .bk-choice { font-weight: 800; box-shadow: inset 0 0 0 2px var(--p-ink), 0 3px 0 var(--p-ink); }
.pc[data-personality="festa"][data-dark] .bk-choice { box-shadow: inset 0 0 0 2px var(--p-fg), 0 3px 0 var(--p-fg); }
.pc[data-personality="festa"] .bk-people .bk-choice { font: 400 26px/1 var(--f-display); }
.pc[data-personality="festa"] .bk-choice[aria-pressed="true"] { background: var(--accent2); color: var(--p-ink); box-shadow: inset 0 0 0 2px var(--p-ink), 0 3px 0 var(--p-ink); rotate: -3deg; }
.pc[data-personality="festa"] .bk-day[aria-pressed="true"] { background: var(--accent2); color: var(--p-ink); rotate: -4deg; }
.pc[data-personality="festa"] :is(.bk-cal, .bk-more, .bk-link, .bk-field input, .bk-field textarea) { box-shadow: inset 0 0 0 2px var(--p-ink); }
.pc[data-personality="festa"][data-dark] :is(.bk-cal, .bk-more, .bk-link, .bk-field input, .bk-field textarea) { box-shadow: inset 0 0 0 2px var(--p-fg); }
.pc[data-personality="festa"] .bk-link { background: none; }
.pc[data-personality="festa"] .bk-pill { background: var(--accent2); color: var(--p-ink); box-shadow: 0 0 0 2px var(--p-ink); }
.pc[data-personality="festa"] .bk-bar { border-top: 2px dashed color-mix(in srgb, var(--p-ink) 40%, transparent); }
.pc[data-personality="festa"] .bk :is(.bk-go, .bk-ghost) { border-radius: 10px; font: 400 18px/1 var(--f-display); letter-spacing: .02em; text-transform: uppercase; box-shadow: 0 4px 0 var(--p-ink); }
.pc[data-personality="festa"] .bk-ghost { box-shadow: inset 0 0 0 2px currentColor, 0 4px 0 var(--p-ink); }
.pc[data-personality="festa"] .bk-stamp { border-radius: 10px; background: var(--accent2); color: var(--p-ink); box-shadow: 0 0 0 2.5px var(--p-ink); font: 400 34px/1 var(--f-display); text-transform: uppercase; rotate: -5deg; padding: 0 18px; animation: bk-stamp .5s cubic-bezier(.2, 1.6, .4, 1) both; }
.pc[data-personality="festa"] .bk-stamp svg { display: none; }
.pc[data-personality="festa"] .bk-stamp b { display: inline; font-weight: 400; }
/* On a dark Festa palette the ink is light: what sits on the second colour takes the page colour, as the menu's prices do. */
.pc[data-personality="festa"][data-dark] :is(.bk-pill, .bk-choice[aria-pressed="true"], .bk-day[aria-pressed="true"], .bk-stamp, .bk-steps li[aria-current] .bk-n) { color: var(--p-bg); }
.pc[data-personality="festa"][data-dark] .bk-steps li.done .bk-n { background: var(--p-fg); color: var(--p-bg); }
@keyframes bk-stamp { from { transform: scale(1.8); opacity: 0; } }
@keyframes bk-shimmer { to { background-position: -100% 0; } }

.pc[data-motion-level="soft"] :is(.bk-art, .bk-burst) { animation: none; }
.pc[data-motion-level="off"] :is(.bk, .bk *) { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .pc :is(.bk, .bk *) { animation: none !important; transition: none !important; }
}

/*
 * The personalities' tokens, in one place for everything that draws in them:
 * the sectioned pages (`.pp`) and every venue's public chrome (`.pc` — the
 * chrome frame: header, navigation panel, plus the menu when it follows the
 * personality). Colours come from the venue's template tokens
 * (HSL triplets on the chrome frame); `--accent2` is set beside the
 * attribute. `.pc` names its colours `--p-*` and its corner `--p-radius`:
 * the frame already carries shadcn's `--accent` and `--radius`, which every
 * shadcn component on the public site reads.
 */

.pp {
  --bg: hsl(var(--background));
  --fg: hsl(var(--foreground));
  --accent: hsl(var(--primary));
  --ink: var(--fg);
}
/* The same colours under other names: the chrome frame itself carries the
   shadcn triplets (`--accent`, `--background`…) its components read. */
.pc {
  --p-bg: hsl(var(--background));
  --p-fg: hsl(var(--foreground));
  --p-accent: hsl(var(--primary));
  --p-ink: var(--p-fg);
}

:is(.pp, .pc)[data-personality="quieto"] { --f-display: var(--pp-font-fraunces), Georgia, serif; --f-body: var(--pp-font-inter), system-ui, sans-serif; --w-display: 350; --track-display: -0.02em; --case-display: none; --p-radius: 2px; }
:is(.pp, .pc)[data-personality="piazza"] { --f-display: var(--pp-font-bricolage), system-ui, sans-serif; --f-body: var(--pp-font-inter), system-ui, sans-serif; --w-display: 800; --track-display: -0.04em; --case-display: none; --p-radius: 22px; }
:is(.pp, .pc)[data-personality="festa"] { --f-display: var(--pp-font-anton), Impact, sans-serif; --f-body: var(--pp-font-archivo), system-ui, sans-serif; --w-display: 400; --track-display: 0; --case-display: uppercase; --p-radius: 14px; }

/*
 * The sectioned public pages, as public/proto/style.css on proto/public-pages.
 * Everything is scoped under `.pp`, so nothing here reaches the menu, the
 * header or the admin. Colours come from the venue's template tokens (HSL
 * triplets on the chrome frame), plus the personality's second accent.
 */

.pp {
  /* --bg --fg --accent --ink and the personality's type: personality.css */
  --pad: 22px;
  --radius: 18px;
  --pp-top: var(--public-chrome-height, 64px);
  background: var(--bg);
  color: var(--fg);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.5;
  /* Sizes follow the page's own width (cqw), not the screen's, so the
     admin's preview and the add-section thumbnails draw true to the site. */
  container: pp / inline-size;
  /* Heights follow `var(--pp-screen, 100svh)`: the admin's preview sets a
     phone's, since inside the admin `svh` is the admin's window. */
  -webkit-text-size-adjust: 100%;
}
.pp *, .pp *::before, .pp *::after { box-sizing: border-box; }
.pp a { color: inherit; text-decoration: none; }
.pp img { max-width: 100%; display: block; }
.pp h1, .pp h2, .pp h3 { margin: 0; font-family: var(--f-display); font-weight: var(--w-display); line-height: .95; letter-spacing: var(--track-display); text-transform: var(--case-display); }
.pp p { margin: 0; }
.pp section { position: relative; }
/* A 390 px phone went 433 px wide in the prototype (the tilted marquee, the
   favourites dealt in from the side, the ticket's tilt) until something
   clipped sideways. Not the page, nor anything round the sticky sections:
   iOS WebKit scrolls a sticky element with the page only when no ancestor
   clips, and otherwise re-places it a frame late — the pinned cards and the
   chapters bobbed on his iPhone. So each other section clips itself, and
   `.public-main` stops clipping where these pages draw. */
.public-main:has(> .pp) { overflow-x: visible; }
.pp > :is(section, .pp-example, .pp-mq-clip):not(.pp-day, .pp-chaps, :has(.pp-day, .pp-chaps)) { overflow-x: clip; }

.pp[data-personality="quieto"] { --radius: 2px; }
.pp[data-personality="piazza"] { --radius: 22px; }
.pp[data-personality="festa"] { --radius: 14px; }

.pp-kicker { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.pp-sample { position: absolute; top: 16px; right: var(--pad); z-index: 3; font: 600 11px/1 var(--f-body); letter-spacing: .08em; text-transform: uppercase; padding: 6px 9px; border-radius: 99px; background: var(--fg); color: var(--bg); transform: rotate(4deg); }
.pp-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border-radius: 999px; background: var(--accent); color: var(--bg) !important; font-weight: 700; font-size: 15px; transition: transform .2s; }
.pp-btn:active { transform: scale(.96); }
.pp-btn-ghost { background: transparent; color: var(--fg) !important; box-shadow: inset 0 0 0 2px currentColor; }
.pp-btn-big { width: 100%; min-height: 58px; font-size: 17px; }
.pp[data-personality="quieto"] .pp-btn { border-radius: 0; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; font-size: 13px; }
.pp[data-personality="festa"] .pp-btn { border-radius: 10px; font-family: var(--f-display); text-transform: uppercase; font-size: 18px; letter-spacing: .02em; box-shadow: 0 4px 0 var(--ink); }
.pp[data-personality="festa"] .pp-btn-ghost { box-shadow: inset 0 0 0 2px currentColor, 0 4px 0 var(--ink); }
.pp-link-arrow { display: inline-block; margin-top: 26px; font-weight: 700; border-bottom: 2px solid var(--accent); padding-bottom: 3px; }
.pp-chip { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; padding: 8px 14px; border-radius: 99px; background: color-mix(in srgb, var(--fg) 8%, transparent); }
/* The pulse is a ring scaled and faded, not an animated box-shadow, which
   repainted every frame. */
/* Home's note for what is coming within two weeks, under the open chip. */
.pp-hours-note { margin-top: 10px; display: grid; gap: 6px; max-width: 34rem; }
.pp-hours-note p { font-size: 15px; font-weight: 600; line-height: 1.35; padding: 10px 14px; border-radius: 14px; background: color-mix(in srgb, var(--fg) 8%, transparent); }
.pp-hours-note-extra { display: block; font-weight: 400; opacity: .8; }
.pp-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #2fbf71; }
.pp-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(47,191,113,.6); opacity: 0; animation: pp-pulse 2s infinite; }
.pp-chip.is-closed .pp-dot { background: #e0533a; }
.pp-chip.is-closed .pp-dot::after { animation: none; }
@keyframes pp-pulse { 0% { transform: scale(1); opacity: 1; } 70% { transform: scale(3.5); opacity: 0; } 100% { opacity: 0; } }

/* ---------- art + stickers ---------- */
.pp-art { display: block; color: var(--accent); }
.pp-art-img { mix-blend-mode: multiply; width: 100%; height: 100%; object-fit: contain; }
/* A pack drawing: the file is the mask, the colour is the text colour. */
.pp-art-pack { width: 100%; height: 100%; aspect-ratio: 1; background: currentColor; -webkit-mask: var(--art) center / contain no-repeat; mask: var(--art) center / contain no-repeat; }
.pp[data-dark] .pp-art-img { mix-blend-mode: normal; filter: invert(1) hue-rotate(180deg); opacity: .92; }
.pp-stk { width: 100%; height: auto; display: block; color: var(--fg); overflow: visible; }
.pp-stk-word { font-family: var(--f-display); font-weight: var(--w-display); fill: currentColor; text-transform: uppercase; }
.pp-stk-ring-text { font-family: var(--f-body); font-weight: 700; letter-spacing: .14em; fill: currentColor; }
.pp-stk-ring { display: grid; }
.pp-stk-ring > * { grid-area: 1 / 1; }
.pp-spin { display: block; animation: pp-spin 18s linear infinite; will-change: transform; }
@keyframes pp-spin { to { transform: rotate(360deg); } }
.pp[data-dark] .pp-stk image { filter: invert(1) brightness(1.4); }
.pp-fill-accent2 { fill: var(--accent2); }
.pp-fill-bg { fill: var(--bg); }
.pp-checker { height: 14px; background: conic-gradient(var(--fg) 25%, transparent 0 50%, var(--fg) 0 75%, transparent 0) 0 0 / 14px 14px; }

/* ---------- opening: once per visit, never with reduced motion ---------- */
.pp-intro { position: fixed; inset: 0; z-index: 100; background: var(--accent); color: var(--bg); display: grid; place-items: center; animation: pp-intro-out .8s cubic-bezier(.7,0,.2,1) 1.6s forwards; cursor: pointer; }
.pp-intro-word { font-family: var(--f-display); font-weight: var(--w-display); letter-spacing: var(--track-display); font-size: 15cqw; line-height: 1; white-space: nowrap; }
.pp-intro-curtain .pp-intro-word { animation: pp-word-in 1.1s .2s cubic-bezier(.2,.8,.2,1) both; }
.pp-intro-letters .pp-intro-word > span { display: inline-block; animation: pp-letter-in .5s calc(var(--ci) * 70ms) cubic-bezier(.2,.8,.2,1) both; }
.pp[data-intro-seen] .pp-intro, .pp[data-motion="off"] .pp-intro { display: none; }
@keyframes pp-intro-out { to { clip-path: inset(0 0 100% 0); visibility: hidden; } }
@keyframes pp-word-in { from { transform: translateY(100%); opacity: 0; } }
@keyframes pp-letter-in { from { transform: translateY(40%) rotate(8deg); opacity: 0; } }

/* ---------- entrances ---------- */
.pp[data-motion="full"] [data-reveal="up"], .pp[data-motion="soft"] [data-reveal="up"] { opacity: 0; transform: translateY(28px); transition: opacity .8s, transform .9s cubic-bezier(.2,.8,.2,1); }
.pp[data-motion="full"] [data-reveal="fade"], .pp[data-motion="soft"] [data-reveal="fade"] { opacity: 0; transition: opacity 1.4s; }
.pp[data-motion="full"] [data-reveal="pop"], .pp[data-motion="soft"] [data-reveal="pop"] { opacity: 0; transform: scale(.4) rotate(-30deg); transition: opacity .5s, transform .9s cubic-bezier(.3,1.6,.5,1); }
.pp[data-motion="full"] [data-reveal="drop"] { opacity: 0; transform: translateY(-120px); transition: opacity .3s, transform 1s cubic-bezier(.3,1.5,.5,1); }
.pp[data-motion="full"] [data-reveal="deal"], .pp[data-motion="soft"] [data-reveal="deal"] { opacity: 0; transform: translateX(60px) rotate(6deg); transition: opacity .6s calc(var(--i) * .08s), transform .9s calc(var(--i) * .08s) cubic-bezier(.2,.8,.2,1); }
.pp [data-reveal].in { opacity: 1 !important; transform: none !important; }
.pp-w { display: inline-block; white-space: nowrap; }
.pp [data-reveal="chars"] .pp-c { display: inline-block; }
.pp[data-motion="full"] [data-reveal="chars"] .pp-c, .pp[data-motion="soft"] [data-reveal="chars"] .pp-c { transform: translateY(105%) rotate(8deg); opacity: 0; transition: transform .8s calc(var(--ci) * 28ms) cubic-bezier(.2,.8,.2,1), opacity .5s calc(var(--ci) * 28ms); }
.pp [data-reveal="chars"].in .pp-c { transform: none; opacity: 1; }
.pp-lw { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; }
.pp-lw > span { display: inline-block; }
.pp[data-motion="full"] [data-reveal="lines"] .pp-lw > span, .pp[data-motion="soft"] [data-reveal="lines"] .pp-lw > span { transform: translateY(110%); transition: transform 1s calc(var(--wi) * 45ms) cubic-bezier(.2,.8,.2,1); }
.pp [data-reveal="lines"].in .pp-lw > span { transform: none; }
.pp [data-words] span { transition: opacity .3s, color .3s; }
.pp[data-motion="full"] [data-words] span:not(.lit), .pp[data-motion="soft"] [data-words] span:not(.lit) { opacity: .16; }
/* If the script never runs, nothing may stay hidden. */
.pp[data-motion]:not([data-motion="off"]) [data-reveal]:not(.in),
.pp[data-motion]:not([data-motion="off"]) [data-reveal]:not(.in) .pp-c,
.pp[data-motion]:not([data-motion="off"]) [data-reveal]:not(.in) .pp-lw > span { animation: pp-failsafe 0s 6s forwards; }
@keyframes pp-failsafe { to { opacity: 1; transform: none; } }

/* ---------- hero ---------- */
.pp-hero { min-height: calc(var(--pp-screen, 100svh) - var(--pp-top)); padding: 30px var(--pad) 40px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.pp-hero-orbit { justify-content: center; text-align: center; align-items: center; gap: 18px; }
.pp-hero-giant { font-size: var(--giant, 27cqw); line-height: .82; color: var(--accent); position: relative; z-index: 2; }
.pp-hero-tag { font-size: 19px; max-width: 300px; position: relative; z-index: 2; font-weight: 500; }
.pp-hero-orbit .pp-chip, .pp-hero-orbit [data-reveal] { position: relative; z-index: 2; }
.pp-orb { position: absolute; width: 34cqw; height: 34cqw; max-width: 260px; max-height: 260px; z-index: 1; will-change: transform; }
.pp-orb-0 { top: 9%; left: -4%; } .pp-orb-1 { top: 6%; right: -6%; width: 30cqw; height: 30cqw; }
.pp-orb-2 { top: 33%; left: -10%; width: 26cqw; } .pp-orb-3 { bottom: 12%; right: -8%; }
.pp-orb-4 { bottom: 2%; left: 4%; width: 30cqw; } .pp-orb-5 { top: 26%; right: 6%; width: 18cqw; height: 18cqw; }
.pp-orb .pp-art { animation: pp-bob 6s ease-in-out infinite; } .pp-orb-1 .pp-art { animation-delay: -2s; } .pp-orb-3 .pp-art { animation-delay: -4s; }
@keyframes pp-bob { 50% { transform: translateY(-10px) rotate(-4deg); } }
.pp-hero-stamp { width: 130px; transform: rotate(-10deg); position: relative; z-index: 2; margin-top: 8px; }
.pp-hero-stamp .pp-stk { color: var(--accent); }

.pp-hero-stack { padding: 0; justify-content: space-between; background: var(--accent); color: var(--bg); }
.pp-stack { padding-top: 10px; }
.pp-stack-row { font-family: var(--f-display); font-size: 31cqw; line-height: .84; white-space: nowrap; text-align: center; color: transparent; -webkit-text-stroke: 2px var(--bg); will-change: transform; }
.pp-stack-row.is-solid { color: var(--accent2); -webkit-text-stroke: 0; }
.pp-stack-art { position: absolute; top: 8%; left: 30%; width: 46cqw; height: 46cqw; max-width: 360px; max-height: 360px; z-index: 2; will-change: transform; }
.pp-stack-art .pp-art { color: var(--accent2); }
.pp-stack-art .pp-art-img { mix-blend-mode: normal; background: var(--bg); border-radius: 50%; padding: 10%; }
.pp-hero-burst { position: absolute; right: -14px; top: 34%; width: 150px; color: var(--accent2); z-index: 3; }
.pp-hero-burst .pp-stk-word { fill: var(--accent2); }
.pp-hero-foot { position: relative; z-index: 3; padding: 24px var(--pad) 34px; background: var(--bg); color: var(--fg); border-radius: var(--radius) var(--radius) 0 0; display: grid; gap: 12px; justify-items: start; }
.pp-hero-name { font-size: 15cqw; color: var(--accent); }
.pp-hero-foot p { font-size: 18px; font-weight: 600; color: var(--ink); }

.pp-hero-line { gap: 22px; justify-content: center; align-items: flex-start; }
.pp-hero-title { font-size: 46px; line-height: 1.05; font-style: italic; }
.pp-hero-rule { height: 1px; width: 100%; background: currentColor; transform-origin: left; }
.pp[data-motion="full"] .pp-hero-rule, .pp[data-motion="soft"] .pp-hero-rule { animation: pp-draw 1.6s .5s cubic-bezier(.7,0,.2,1) both; }
@keyframes pp-draw { from { transform: scaleX(0); } }
.pp-hero-small-art { width: 90px; height: 90px; position: absolute; top: 40px; right: var(--pad); }

/* ---------- marquee ---------- */
.pp-marquee { overflow: hidden; padding: 0; background: var(--fg); color: var(--bg); transform: rotate(-3deg) scale(1.08); margin: 30px 0; }
.pp[data-personality="quieto"] .pp-marquee { transform: none; background: transparent; color: var(--fg); border-block: 1px solid currentColor; margin: 0; }
.pp[data-personality="festa"] .pp-marquee { background: var(--accent2); color: var(--ink); }
.pp-mq-track { display: flex; width: max-content; transform: skewX(var(--skew, 0deg)); }
.pp-mq-run { display: flex; align-items: center; gap: 22px; padding: 16px 11px; animation: pp-mq 22s linear infinite; font-family: var(--f-display); font-weight: var(--w-display); font-size: 40px; text-transform: var(--case-display); white-space: nowrap; }
.pp[data-personality="quieto"] .pp-mq-run { font-size: 26px; font-style: italic; animation-duration: 40s; }
.pp-mq-run b { color: var(--accent); font-weight: 400; }
@keyframes pp-mq { to { transform: translateX(-100%); } }
.pp[data-motion="off"] .pp-mq-run, .pp[data-motion="off"] .pp-spin, .pp[data-motion="off"] .pp-orb .pp-art, .pp[data-motion="off"] .pp-dot::after { animation: none; }

/* ---------- signature: pinned, scrolling sideways ---------- */
.pp-day { height: calc(var(--n) * var(--pp-screen, 100svh) * .85); }
.pp-day-sticky { position: sticky; top: var(--pp-top); height: calc(var(--pp-screen, 100svh) - var(--pp-top)); overflow: hidden; display: flex; flex-direction: column; padding: 20px 0 22px; }
.pp-day-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 0 var(--pad) 18px; }
.pp-day-head h2 { font-size: 38px; max-width: 250px; }
.pp-dial { width: 64px; height: 64px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 2px currentColor; position: relative; }
.pp-dial i { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: currentColor; transform: rotate(calc(var(--i) / var(--n) * 360deg)) translateY(-24px); }
.pp-dial-hand { position: absolute; left: 50%; top: 50%; width: 3px; height: 26px; margin-left: -1.5px; margin-top: -26px; background: var(--accent); border-radius: 3px; transform-origin: 50% 100%; }
.pp-day-track { display: flex; gap: 16px; padding: 0 var(--pad); flex: 1; min-height: 0; will-change: transform; }
.pp-day-card { flex: none; width: min(78cqw, 420px); border-radius: var(--radius); background: color-mix(in srgb, var(--fg) 6%, var(--bg)); padding: 22px; display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.pp[data-personality="festa"] .pp-day-card { background: var(--accent); color: var(--bg); }
.pp[data-personality="festa"] .pp-day-card .pp-art { color: var(--accent2); }
.pp[data-personality="quieto"] .pp-day-card { background: transparent; box-shadow: inset 0 0 0 1px currentColor; }
.pp-day-time { font-family: var(--f-display); font-weight: var(--w-display); font-size: 64px; line-height: 1; color: var(--accent); }
.pp[data-personality="festa"] .pp-day-time { color: var(--accent2); }
.pp-day-art, .pp-day-photo { flex: 1; min-height: 0; display: grid; place-items: center; }
.pp-day-art .pp-art { height: 100%; max-height: 220px; width: auto; aspect-ratio: 1; }
.pp-day-photo img { width: 100%; height: 100%; max-height: 260px; object-fit: cover; border-radius: calc(var(--radius) - 6px); transform: rotate(-2deg); }
.pp-day-card h3 { font-size: 30px; }
.pp-day-card p { font-size: 15px; opacity: .85; }
.pp-day-progress { margin: 16px var(--pad) 0; height: 3px; background: color-mix(in srgb, var(--fg) 15%, transparent); border-radius: 3px; overflow: hidden; }
.pp-day-progress i { display: block; height: 100%; background: var(--accent); transform-origin: left; transform: scaleX(0); }
/* Without motion the pinned section becomes a row to swipe. */
.pp[data-motion="off"] .pp-day, .pp:not([data-motion]) .pp-day { height: auto; }
.pp[data-motion="off"] .pp-day-sticky, .pp:not([data-motion]) .pp-day-sticky { position: static; height: auto; }
.pp[data-motion="off"] .pp-day-track, .pp:not([data-motion]) .pp-day-track { overflow-x: auto; scroll-snap-type: x mandatory; }
.pp[data-motion="off"] .pp-day-card, .pp:not([data-motion]) .pp-day-card { scroll-snap-align: center; min-height: 460px; }
.pp[data-motion="off"] .pp-day-progress, .pp:not([data-motion]) .pp-day-progress { display: none; }

/* ---------- signature: a timeline down the page ---------- */
.pp-moments { padding: 60px var(--pad) 50px; }
.pp-moments h2 { font-size: 40px; max-width: 520px; margin-bottom: 34px; }
.pp-moments-track { position: relative; }
/* The line fills as the section passes, its head riding the fill (both
   scroll-driven where the browser has it; otherwise simply drawn). */
.pp-moments-line { position: absolute; left: 9px; top: 6px; bottom: 6px; width: 3px; border-radius: 3px; background: color-mix(in srgb, var(--fg) 12%, transparent); }
.pp-moments-line i { display: block; height: 100%; border-radius: inherit; background: var(--accent); transform-origin: top; }
.pp-moments-line b { display: none; position: absolute; left: 50%; top: 0; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 22%, transparent); }
.pp-moments-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; counter-reset: pp-moment; }
.pp-moment { position: relative; padding-left: 40px; counter-increment: pp-moment; }
/* Each stop's dot, and the tick from it to its card. Both wait for the card
   to land (`.in`), then the dot fills and rings once. */
.pp-moment-dot { position: absolute; z-index: 1; left: 1px; top: 22px; width: 19px; height: 19px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 4px var(--accent); }
.pp-moment-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 2px var(--accent); opacity: 0; }
.pp-moment::before { content: ""; position: absolute; top: 30.5px; left: 20px; width: 20px; height: 2px; background: var(--accent); transform-origin: left; }
.pp-moment:has(> .in) .pp-moment-dot { box-shadow: inset 0 0 0 10px var(--accent); }
.pp:is([data-motion="full"], [data-motion="soft"]) .pp-moment:not(:has(> .in)) .pp-moment-dot { transform: scale(.35); animation: pp-failsafe 0s 6s forwards; }
.pp:is([data-motion="full"], [data-motion="soft"]) .pp-moment:not(:has(> .in))::before { transform: scaleX(0); animation: pp-failsafe 0s 6s forwards; }
.pp:is([data-motion="full"], [data-motion="soft"]) .pp-moment-dot { transition: box-shadow .5s .4s, transform .8s .3s cubic-bezier(.3,1.6,.5,1); }
.pp:is([data-motion="full"], [data-motion="soft"]) .pp-moment::before { transition: transform .5s .2s cubic-bezier(.2,.8,.2,1); }
.pp:is([data-motion="full"], [data-motion="soft"]) .pp-moment:has(> .in) .pp-moment-dot::after { animation: pp-ring 1.1s .5s ease-out; }
@keyframes pp-ring { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(2.8); } }
/* The card deals in from its side of the line, tilted, and settles. */
.pp:is([data-motion="full"], [data-motion="soft"]) [data-reveal="side"] { opacity: 0; transform: translateX(48px) rotate(4deg); transition: opacity .6s, transform 1s cubic-bezier(.2,.8,.2,1); }
.pp-moment-card { position: relative; overflow: hidden; border-radius: var(--radius); background: color-mix(in srgb, var(--fg) 6%, var(--bg)); padding: 18px 20px 20px; display: grid; gap: 10px; }
/* Its number, large and faint in the corner. */
.pp-moment-card::after { content: counter(pp-moment, decimal-leading-zero); position: absolute; right: 16px; top: 8px; font-family: var(--f-display); font-weight: var(--w-display); font-size: 72px; line-height: 1; opacity: .07; pointer-events: none; }
.pp:is([data-personality="piazza"], [data-personality="festa"]) .pp-moment:nth-child(odd) .pp-moment-card { rotate: -1deg; }
.pp:is([data-personality="piazza"], [data-personality="festa"]) .pp-moment:nth-child(even) .pp-moment-card { rotate: .8deg; }
.pp[data-personality="festa"] .pp-moment-card { background: var(--accent); color: var(--bg); box-shadow: 0 5px 0 var(--ink); }
.pp[data-personality="festa"] .pp-moment-card .pp-art { color: var(--accent2); }
/* A drawing would be ink on the red card: it sits on a round paper sticker. */
.pp[data-personality="festa"] .pp-moment-art { padding: 12px; border-radius: 50%; background: var(--bg); box-shadow: 0 0 0 2px var(--ink); }
.pp[data-personality="festa"] .pp-moment-card::after { opacity: .18; }
.pp[data-personality="quieto"] .pp-moment-card { background: transparent; box-shadow: inset 0 0 0 1px currentColor; }
.pp-moment-time { display: block; font-family: var(--f-display); font-weight: var(--w-display); font-size: 44px; line-height: 1; color: var(--accent); }
.pp[data-personality="festa"] .pp-moment-time { color: var(--accent2); }
.pp-moment-body { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 16px; align-items: center; }
.pp-moment-body:has(.pp-moment-photo) { grid-template-columns: minmax(0, 1fr); }
.pp-moment-art { width: 84px; height: 84px; display: grid; place-items: center; }
/* The drawings bob out of step, as the hero's do. */
.pp-moment-art .pp-art { width: 100%; height: 100%; animation: pp-bob 6s ease-in-out infinite; animation-delay: calc(var(--i) * -1.7s); }
.pp-moment-photo { width: 100%; max-height: 240px; object-fit: cover; border-radius: calc(var(--radius) - 6px); rotate: -1.5deg; }
.pp-moment:nth-child(even) .pp-moment-photo { rotate: 1.5deg; }
.pp-moment h3 { font-size: 28px; }
.pp-moment p { font-size: 15px; opacity: .85; margin-top: 6px; }
.pp[data-motion="off"] .pp-moment-art .pp-art { animation: none; }

/* ---------- favourites ---------- */
.pp-favs { padding: 70px var(--pad) 60px; }
.pp-favs-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 26px; }
.pp-favs-head h2 { font-size: 46px; max-width: 230px; }
.pp-favs-seal { width: 104px; flex: none; color: var(--ink); }
.pp-favs-list { display: grid; gap: 14px; margin-bottom: 26px; }
.pp-fav { display: grid; grid-template-columns: 76px 1fr auto; align-items: center; gap: 14px; padding: 12px 16px 12px 12px; border-radius: var(--radius); background: color-mix(in srgb, var(--fg) 6%, var(--bg)); }
.pp-fav:nth-child(odd) { rotate: -1.2deg; } .pp-fav:nth-child(even) { rotate: 1deg; }
.pp[data-personality="quieto"] .pp-fav { rotate: 0deg; background: none; border-bottom: 1px solid color-mix(in srgb, var(--fg) 25%, transparent); border-radius: 0; padding-inline: 0; }
.pp[data-personality="festa"] .pp-fav { background: var(--bg); box-shadow: inset 0 0 0 2px var(--ink), 0 5px 0 var(--ink); }
.pp-fav-art { width: 76px; height: 76px; border-radius: calc(var(--radius) - 6px); background: var(--bg); display: grid; place-items: center; padding: 6px; overflow: hidden; }
.pp-fav-initial { font-family: var(--f-display); font-size: 34px; line-height: 1; opacity: .35; }
.pp-fav-photo { width: 100%; height: 100%; object-fit: cover; border-radius: calc(var(--radius) - 10px); }
.pp-fav h3 { font-size: 22px; line-height: 1.05; }
.pp[data-personality="quieto"] .pp-fav h3 { font-size: 24px; }
.pp-fav p { font-size: 13px; opacity: .7; line-height: 1.3; margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pp-fav-price { font-weight: 800; font-size: 15px; color: var(--accent); white-space: nowrap; }

/* ---------- teaser ---------- */
.pp-teaser { padding: 80px var(--pad) 90px; }
.pp-teaser-text { font-family: var(--f-display); font-weight: var(--w-display); font-size: 40px; line-height: 1.04; letter-spacing: var(--track-display); }
.pp[data-personality="festa"] .pp-teaser-text { font-size: 50px; line-height: .98; text-transform: uppercase; }
.pp[data-personality="quieto"] .pp-teaser-text { font-style: italic; font-size: 36px; line-height: 1.15; }
.pp-teaser-text .lit:nth-child(4n+3) { color: var(--accent); }

/* ---------- visit ---------- */
.pp-visit { padding: 50px var(--pad) 80px; text-align: center; display: grid; justify-items: center; gap: 14px; background: color-mix(in srgb, var(--accent) 12%, var(--bg)); border-radius: 40px 40px 0 0; }
.pp[data-personality="festa"] .pp-visit { background: var(--accent2); color: var(--ink); }
.pp[data-personality="quieto"] .pp-visit { background: none; border-top: 1px solid currentColor; border-radius: 0; }
.pp-visit-ring { width: 210px; color: var(--fg); }
.pp[data-personality="festa"] .pp-visit-ring { color: var(--ink); }
.pp-visit h2 { font-size: 46px; }
.pp-visit-addr { font-size: 18px; font-weight: 600; }
.pp-visit-today { opacity: .75; }
.pp-visit-btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }

/* ---------- chi siamo ---------- */
.pp-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.pp-shero { min-height: calc(var(--pp-screen, 100svh) - var(--pp-top)); padding: 40px var(--pad) 50px; display: flex; flex-direction: column; justify-content: flex-end; gap: 18px; overflow: hidden; }
.pp-shero-title { font-size: 56px; line-height: .98; position: relative; z-index: 2; }
.pp[data-personality="festa"] .pp-shero-title { font-size: 74px; color: var(--accent); }
.pp[data-personality="quieto"] .pp-shero-title { font-style: italic; font-size: 50px; }
.pp-shero-lede { font-size: 16px; opacity: .8; max-width: 340px; position: relative; z-index: 2; }
.pp-shero-art { position: absolute; top: 30px; right: -50px; width: 280px; height: 280px; opacity: .5; }
.pp-scroll-cue { font-size: 26px; animation: pp-bob 2s infinite; }
.pp[data-motion="off"] .pp-scroll-cue { animation: none; }
.pp-chaps { padding: 10px 14px 80px; position: relative; }
.pp-chaps-line { position: absolute; left: 8px; top: 0; bottom: 0; width: 3px; background: color-mix(in srgb, var(--fg) 12%, transparent); }
.pp-chaps-line i { display: block; height: 100%; background: var(--accent); transform-origin: top; transform: scaleY(0); }
.pp[data-motion="off"] .pp-chaps-line i, .pp:not([data-motion]) .pp-chaps-line i { transform: none; }
.pp-chap { position: sticky; top: calc(var(--pp-top) + 16px + var(--i) * 12px); height: calc(var(--pp-screen, 100svh) * .76); margin-bottom: calc(var(--pp-screen, 100svh) * .16); }
.pp-chap-inner { height: 100%; border-radius: var(--radius); padding: 26px 24px; display: flex; flex-direction: column; gap: 12px; background: color-mix(in srgb, var(--fg) 7%, var(--bg)); position: relative; transform-origin: top center; will-change: transform; box-shadow: 0 -10px 30px rgba(0,0,0,.08); }
/* Darkens as the next chapter slides over it (`--dim`, from the motion loop). */
.pp-chap-inner::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #000; opacity: var(--dim, 0); pointer-events: none; }
/* nth-of-type: the progress line is a child too, and nth-child counted it. */
.pp-chap:nth-of-type(3n+2) .pp-chap-inner { background: var(--accent); color: var(--bg); }
.pp-chap:nth-of-type(3n+3) .pp-chap-inner { background: var(--fg); color: var(--bg); }
.pp-chap:nth-of-type(3n+2) .pp-art, .pp-chap:nth-of-type(3n+3) .pp-art { color: var(--accent2); }
.pp-chap:nth-of-type(3n+2) .pp-art-img, .pp-chap:nth-of-type(3n+3) .pp-art-img { mix-blend-mode: normal; background: var(--bg); border-radius: 50%; padding: 12%; }
.pp[data-personality="quieto"] .pp-chap-inner { background: var(--bg); color: var(--fg); box-shadow: inset 0 0 0 1px currentColor, 0 -10px 30px rgba(0,0,0,.05); }
.pp[data-personality="quieto"] .pp-chap .pp-art { color: var(--accent); }
.pp[data-personality="quieto"] .pp-chap .pp-art-img { background: none; padding: 0; mix-blend-mode: multiply; }
.pp[data-personality="quieto"][data-dark] .pp-chap .pp-art-img { mix-blend-mode: normal; }
.pp-chap-n { font-family: var(--f-display); font-weight: var(--w-display); font-size: 80px; line-height: .9; opacity: .9; }
.pp[data-personality="quieto"] .pp-chap-n { font-style: italic; font-size: 60px; color: var(--accent); }
.pp-chap-art { flex: 1; min-height: 0; display: grid; place-items: center; }
.pp-chap-art .pp-art { height: 100%; max-height: 210px; aspect-ratio: 1; width: auto; }
.pp-chap-photo { width: 100%; height: 100%; max-height: 240px; object-fit: cover; border-radius: calc(var(--radius) - 6px); }
.pp-chap h2 { font-size: 40px; }
.pp-chap p { font-size: 16px; line-height: 1.45; opacity: .9; }
.pp[data-motion="off"] .pp-chap, .pp:not([data-motion]) .pp-chap { position: static; height: auto; margin-bottom: 16px; }

/* Scroll-driven, where the browser has it (`data-sda`, set by MotionRoot).
   The pinned day, the chapters and the timeline's line move with the scroll itself instead of a
   script writing every frame: on iOS those writes made WebKit re-place the
   sticky cards a frame late, and they bobbed while scrolling. */
@keyframes pp-travel { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(calc(-1 * var(--travel, 0px)), 0, 0); } }
@keyframes pp-dial { from { transform: rotate(0deg); } to { transform: rotate(calc(360deg * (var(--n) - 1) / var(--n))); } }
@keyframes pp-grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes pp-grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes pp-shrink { from { transform: scale(1); } to { transform: scale(.92); } }
@keyframes pp-dim { from { opacity: 0; } to { opacity: .25; } }
.pp[data-sda]:is([data-motion="full"], [data-motion="soft"]) .pp-day { view-timeline: --pp-day block; view-timeline-inset: var(--pp-top) 0px; }
.pp[data-sda]:is([data-motion="full"], [data-motion="soft"]) .pp-day-track { animation: pp-travel linear both; animation-timeline: --pp-day; animation-range: contain 0% contain 100%; }
.pp[data-sda]:is([data-motion="full"], [data-motion="soft"]) .pp-day [data-dial] { animation: pp-dial linear both; animation-timeline: --pp-day; animation-range: contain 0% contain 100%; }
.pp[data-sda]:is([data-motion="full"], [data-motion="soft"]) .pp-day [data-progress] { transform-origin: left; animation: pp-grow-x linear both; animation-timeline: --pp-day; animation-range: contain 0% contain 100%; }
.pp[data-sda]:is([data-motion="full"], [data-motion="soft"]) .pp-moments-track { view-timeline: --pp-moments block; }
.pp[data-sda]:is([data-motion="full"], [data-motion="soft"]) .pp-moments-line i { animation: pp-grow-y linear both; animation-timeline: --pp-moments; animation-range: cover 10% contain 60%; }
.pp[data-sda]:is([data-motion="full"], [data-motion="soft"]) .pp-moments-line b { display: block; animation: pp-ride linear both; animation-timeline: --pp-moments; animation-range: cover 10% contain 60%; }
@keyframes pp-ride { from { top: 0%; } to { top: 100%; } }
.pp[data-sda]:is([data-motion="full"], [data-motion="soft"]) .pp-chaps { view-timeline: --pp-chaps block; timeline-scope: var(--chaps-scope); }
.pp[data-sda]:is([data-motion="full"], [data-motion="soft"]) .pp-chaps-line i { animation: pp-grow-y linear both; animation-timeline: --pp-chaps; animation-range: cover 0% cover 100%; }
/* A card's timeline ends as it sticks (the inset is its sticky top), so a
   sticky subject's position never enters the sum. */
.pp[data-sda]:is([data-motion="full"], [data-motion="soft"]) .pp-chap { view-timeline-name: var(--chap); view-timeline-axis: block; view-timeline-inset: calc(var(--pp-top) + 16px + var(--i) * 12px) 0px; }
.pp[data-sda]:is([data-motion="full"], [data-motion="soft"]) .pp-chap-inner { animation: pp-shrink linear both; animation-timeline: var(--chap-next); animation-range: entry 0% exit 0%; }
.pp[data-sda]:is([data-motion="full"], [data-motion="soft"]) .pp-chap-inner::after { animation: pp-dim linear both; animation-timeline: var(--chap-next); animation-range: entry 0% exit 0%; }
.pp[data-motion="off"] .pp-chap-inner, .pp:not([data-motion]) .pp-chap-inner { min-height: 520px; }
.pp-quote { padding: 70px var(--pad); position: relative; }
.pp-quote blockquote { margin: 0; font-family: var(--f-display); font-weight: var(--w-display); font-size: 44px; line-height: 1.02; letter-spacing: var(--track-display); }
.pp[data-personality="festa"] .pp-quote blockquote { text-transform: uppercase; font-size: 54px; color: var(--accent); }
.pp[data-personality="quieto"] .pp-quote blockquote { font-style: italic; font-size: 38px; line-height: 1.15; }
.pp-quote blockquote::before { content: "“"; display: block; font-size: 120px; line-height: .6; color: var(--accent); }
.pp-quote cite { display: block; margin-top: 22px; font-style: normal; font-weight: 600; opacity: .7; }
.pp-quote-burst { position: absolute; top: 20px; right: 10px; width: 120px; color: var(--accent); }
.pp-nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: color-mix(in srgb, var(--fg) 20%, transparent); border-block: 1px solid color-mix(in srgb, var(--fg) 20%, transparent); }
.pp-num { background: var(--bg); padding: 26px var(--pad); display: grid; gap: 4px; }
/* minmax(0, …) and a size that follows the width: «1996» at 58px nearly
   filled a 375 px phone's column, and on iPhone pushed the grid off-screen.
   Tabular figures keep the width still while the number counts up. */
.pp-num b { font-family: var(--f-display); font-weight: var(--w-display); font-size: min(58px, 13cqw); line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pp-num span { font-size: 14px; opacity: .75; }
.pp-scta { padding: 80px var(--pad) 90px; text-align: center; display: grid; gap: 22px; justify-items: center; }
.pp-scta h2 { font-size: 52px; }

/* ---------- contatti ---------- */
/* Half a screen, not three quarters: the word sits near the top instead of
   under a band of empty paper (owner, 2026-10-19). */
.pp-sthero { min-height: calc(var(--pp-screen, 100svh) * .5); padding: 32px var(--pad) 40px; display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; }
.pp-sthero.is-bare { min-height: 0; padding-top: 72px; }
.pp-sthero-big { font-family: var(--f-display); font-weight: var(--w-display); letter-spacing: var(--track-display); text-transform: var(--case-display); font-size: 30cqw; line-height: .8; color: var(--accent); white-space: nowrap; min-height: .8em; padding-bottom: .12em; }
/* .12em: the line box is .8em, and «Aperto»'s p hangs below it into the line under. */
.pp[data-personality="quieto"] .pp-sthero-big { font-style: italic; }
.pp-status.is-open .pp-sthero-big, .pp-status.is-closed .pp-sthero-big { animation: pp-word-in .9s cubic-bezier(.2,.8,.2,1) both; }
.pp[data-motion="off"] .pp-status .pp-sthero-big { animation: none; }
.pp-status.is-closed .pp-dot { background: #e0533a; animation: none; }
.pp-sthero-sub { display: flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 600; margin-top: 14px; }
.pp-sthero-btns { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.pp-ticket-wrap { padding: 30px var(--pad) 60px; }
.pp-ticket { background: var(--accent); color: var(--bg); border-radius: 16px; padding: 22px 22px 18px; position: relative; will-change: transform; box-shadow: 0 20px 40px rgba(0,0,0,.12);
  -webkit-mask: radial-gradient(circle 12px at 0 calc(100% - 58px), transparent 98%, #000), radial-gradient(circle 12px at 100% calc(100% - 58px), transparent 98%, #000); -webkit-mask-composite: source-in; mask-composite: intersect; }
.pp[data-personality="quieto"] .pp-ticket { background: var(--bg); color: var(--fg); box-shadow: inset 0 0 0 1px currentColor; }
.pp-ticket-head { display: flex; justify-content: space-between; gap: 12px; font-family: var(--f-display); font-weight: var(--w-display); font-size: 30px; line-height: 1.1; text-transform: var(--case-display); padding-bottom: 12px; border-bottom: 2px solid currentColor; }
.pp-ticket-rows { list-style: none; margin: 0; padding: 6px 0 0; }
.pp-ticket-rows li { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px dashed color-mix(in srgb, currentColor 40%, transparent); font-size: 15px; text-align: right; }
.pp-ticket-rows li > span:first-child { text-align: left; font-weight: 600; }
.pp-ticket-time { display: block; }
.pp-ticket-rows li.is-today { font-weight: 800; }
.pp-ticket-rows li.is-today > span:first-child::after { content: " · " attr(data-today); color: var(--accent2); }
.pp[data-personality="quieto"] .pp-ticket-rows li.is-today > span:first-child::after { color: var(--accent); }
/* Closures and different hours (docs/plans/hours-and-closures.md): the
   weekday whose next date is not the usual one shows it, with the date. */
.pp-ticket-rows li.is-special > span:last-child { font-weight: 800; }
.pp-ticket-date { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .75; }
.pp-ticket-special { margin-top: 14px; padding-top: 12px; border-top: 2px solid currentColor; }
.pp-ticket-special-title { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 4px; }
.pp-ticket-special ul { list-style: none; margin: 0; padding: 0; }
.pp-ticket-special li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; font-size: 14px; }
.pp-ticket-special li > span:first-child { font-weight: 700; }
.pp-ticket-perf { border-top: 2px dashed currentColor; margin: 16px -22px 12px; opacity: .6; }
.pp-ticket-foot { font-size: 12px; opacity: .8; text-transform: uppercase; letter-spacing: .1em; }
.pp-mapsec { padding: 0 var(--pad) 50px; }
.pp-map { position: relative; display: block; border-radius: var(--radius); overflow: hidden; }
.pp-map-svg { display: block; width: 100%; height: auto; }
.pp-map-bg { fill: color-mix(in srgb, var(--accent2) 22%, var(--bg)); }
.pp-map-road { fill: none; stroke: var(--bg); stroke-width: 12; stroke-linecap: round; }
.pp-map-road.is-big { stroke-width: 22; } .pp-map-road.is-thin { stroke-width: 6; }
.pp-map-square { fill: color-mix(in srgb, var(--accent) 25%, var(--bg)); stroke: var(--bg); stroke-width: 8; }
.pp-map-label { font: 700 13px var(--f-body); fill: var(--fg); }
.pp-map-pin { position: absolute; left: 51.25%; top: 50%; width: 58px; height: 58px; margin: -66px 0 0 -29px; border-radius: 50% 50% 50% 0; rotate: -45deg; background: var(--accent); color: var(--bg); display: grid; place-items: center; box-shadow: 0 8px 18px rgba(0,0,0,.2); font-family: var(--f-display); font-size: 26px; }
.pp-map-pin img { width: 34px; rotate: 45deg; filter: brightness(0) invert(1); }
.pp-map-pin > span { rotate: 45deg; }
.pp-map-open { position: absolute; right: 12px; bottom: 12px; background: var(--fg); color: var(--bg); padding: 8px 14px; border-radius: 99px; font-weight: 700; font-size: 13px; }
.pp-crows { padding: 0 var(--pad) 90px; }
.pp-crow { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; padding: 18px 0; border-bottom: 1px solid color-mix(in srgb, var(--fg) 20%, transparent); }
.pp-crow span { font-size: 12px; text-transform: uppercase; letter-spacing: .12em; opacity: .65; }
.pp-crow b { font-family: var(--f-display); font-weight: var(--w-display); font-size: 26px; line-height: 1.1; grid-row: 2; text-transform: var(--case-display); overflow-wrap: anywhere; }
.pp-crow i { grid-row: 1 / 3; grid-column: 2; align-self: center; font-style: normal; font-size: 24px; color: var(--accent); transition: transform .3s; }
.pp-crow:active i { transform: translateX(6px); }

/* ---------- footer: on every page, the menu included ---------- */
.pp-ftr { background: var(--fg); color: var(--bg); padding: 46px var(--pad) 0; overflow: hidden; }
.pp[data-personality="festa"].pp-ftr { background: var(--accent); }
.pp-ftr-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pp-ftr-cols div { display: grid; gap: 8px; font-weight: 600; align-content: start; }
.pp-ftr-legal { font-size: 12px; opacity: .6; margin: 30px 0 10px; display: grid; gap: 2px; }
.pp-ftr-lang { margin-top: 10px; }
.pp-ftr-lang * { color: inherit !important; justify-content: flex-start !important; }
.pp-ftr-word { font-family: var(--f-display); font-weight: var(--w-display); text-transform: uppercase; letter-spacing: var(--track-display); font-size: 20cqw; line-height: .8; white-space: nowrap; margin: 0 calc(var(--pad) * -1); text-align: center; padding-bottom: 24px; will-change: transform; }
.pp[data-personality="festa"] .pp-ftr-word { color: var(--accent2); }
/* Room for the action bar, on the pages that have it. */
.public-main:has(.pp.has-abar) ~ .pp-ftr .pp-ftr-word { padding-bottom: 104px; }
/* …and for the menu's floating order-list button. */
body:has(.public-order-list-trigger) .pp-ftr-word { padding-bottom: 96px; }
/* The personality's list button is wider and centred: room under the word,
   outside it — the word rises by a share of its own height, padding too. */
body:has(.mn-fab) .pp-ftr { padding-bottom: 84px; }

/* ---------- action bar: home, chi siamo, contatti only ---------- */
.pp-abar { position: fixed; z-index: 30; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; padding: 6px; border-radius: 22px; background: color-mix(in srgb, var(--fg) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transform: translateY(140%); transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.pp-abar.show { transform: none; }
.pp[data-motion="off"] .pp-abar { transition: none; }
.pp-abar a { display: grid; place-items: center; min-height: 48px; border-radius: 16px; color: var(--bg) !important; font-weight: 700; font-size: 14px; }
.pp-abar a:first-child { background: var(--accent); }
.pp[data-personality="festa"] .pp-abar { background: var(--ink); }
.pp[data-personality="festa"] .pp-abar a { font-family: var(--f-display); text-transform: uppercase; font-size: 17px; font-weight: 400; }
.pp[data-personality="quieto"] .pp-abar { border-radius: 0; left: 0; right: 0; bottom: 0; padding: 6px 6px max(6px, env(safe-area-inset-bottom)); }
.pp[data-personality="quieto"] .pp-abar a { border-radius: 0; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; font-size: 12px; }
@container pp (min-width: 900px) { .pp-abar { display: none; } }

/* ---------- wider screens: the phone layout, given room ---------- */
@container pp (min-width: 900px) {
  .pp > * { --pad: max(40px, calc((100cqw - 1100px) / 2)); }
  .pp-hero-giant { font-size: min(var(--giant, 27cqw), 300px); }
  .pp-stack-row { font-size: min(31cqw, 340px); }
  .pp-hero-name { font-size: min(15cqw, 160px); }
  .pp-hero-title { font-size: 72px; max-width: 900px; }
  .pp-teaser-text { font-size: 64px; max-width: 1000px; }
  .pp-orb { width: 20cqw; height: 20cqw; }
  .pp-favs-list { grid-template-columns: 1fr 1fr; }
  /* The timeline: the line in the middle, the stops either side of it, each
     rising beside the one before and dealt in from its own side. */
  .pp-moments h2 { font-size: 56px; text-align: center; margin-inline: auto; margin-bottom: 48px; }
  .pp-moments-track { max-width: 1000px; margin-inline: auto; }
  .pp-moments-line { left: 50%; margin-left: -1.5px; }
  .pp-moments-list { gap: 28px; }
  .pp-moment + .pp-moment { margin-top: -56px; }
  .pp-moment { width: 50%; padding: 0 44px 0 0; }
  .pp-moment:nth-child(even) { margin-left: 50%; padding: 0 0 0 44px; }
  .pp-moment-dot { left: auto; right: -9.5px; }
  .pp-moment:nth-child(even) .pp-moment-dot { right: auto; left: -9.5px; }
  .pp-moment::before { left: auto; right: 9.5px; width: 34.5px; transform-origin: right; }
  .pp-moment:nth-child(even)::before { right: auto; left: 9.5px; transform-origin: left; }
  .pp:is([data-motion="full"], [data-motion="soft"]) .pp-moment:nth-child(odd) [data-reveal="side"] { transform: translateX(-48px) rotate(-4deg); }
  .pp-moment-card { padding: 22px 26px 24px; }
  .pp-moment-card::after { font-size: 96px; }
  .pp-moment-time { font-size: 56px; }
  .pp-moment-body { grid-template-columns: 110px minmax(0, 1fr); }
  .pp-moment-art { width: 110px; height: 110px; }
  .pp-shero { min-height: 0; padding-top: 56px; }
  .pp-shero-title { font-size: 84px; max-width: 900px; }
  .pp-sthero-big { font-size: min(30cqw, 320px); }
  .pp-sthero { min-height: 0; padding-top: 56px; }
  /* As many columns as numbers, up to four; each cell pads itself rather than
     by the page's gutter, which at 1280 px left a 140 px cell and cut «12,00»
     (owner, 2026-10-19). The size follows the page so seven figures fit. */
  .pp-nums { grid-template-columns: repeat(min(var(--n, 4), 4), minmax(0, 1fr)); }
  .pp-num { padding: 34px 28px; }
  .pp-num b { font-size: min(64px, 4.2cqw); }
  /* The chapters: on a phone, cards stacking as you scroll; here a grid of
     plain cards, two across, since a 760 px column of near-full-screen cards
     was the phone's layout stretched (owner, 2026-10-19). */
  .pp-chaps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: calc(1100px + 2 * 40px); margin-inline: auto; padding: 20px 40px 90px; }
  .pp-chaps-line { display: none; }
  .pp-chap { position: static; height: auto; margin: 0; }
  .pp-chap-inner { min-height: 440px; transform: none !important; box-shadow: none; }
  .pp-chap-inner::after { content: none; }
  .pp[data-sda]:is([data-motion="full"], [data-motion="soft"]) .pp-chap-inner { animation: none; }
  /* A lone last chapter spans the row instead of leaving a hole. */
  .pp-chap:last-of-type:nth-of-type(odd) { grid-column: 1 / -1; }
  /* The ticket is tilted: keep the gutter inside the box, or the section's own
     sideways clip cuts its corners («Orari» lost its first letters). */
  .pp-ticket-wrap, .pp-mapsec, .pp-crows { max-width: calc(760px + 2 * 40px); margin-inline: auto; padding-inline: 40px; }
  .pp-ftr-word { font-size: min(20cqw, 260px); }
}

/* A section whose words are an example (Automatica's demo pages) says so
   until a person edits it. `data-example` is a hook for custom CSS too. */
.pp-example { position: relative; }
.pp-example:empty { display: none; }
.pp-example::before { content: attr(data-example); position: absolute; top: 10px; right: var(--pad); z-index: 6; padding: 5px 9px; border-radius: 999px; background: color-mix(in srgb, var(--fg) 82%, transparent); color: var(--bg); font: 600 11px/1 var(--f-body); letter-spacing: .06em; text-transform: uppercase; pointer-events: none; }
.file\:border-0::file-selector-button {
  border-width: 0px;
}
.file\:bg-transparent::file-selector-button {
  background-color: transparent;
}
.file\:text-sm::file-selector-button {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.file\:font-medium::file-selector-button {
  font-weight: 500;
}
.placeholder\:text-muted-foreground::placeholder {
  --tw-text-opacity: 1;
  color: hsl(var(--muted-foreground) / var(--tw-text-opacity, 1));
}
.placeholder\:text-muted-foreground\/70::placeholder {
  color: hsl(var(--muted-foreground) / 0.7);
}
.after\:absolute::after {
  content: var(--tw-content);
  position: absolute;
}
.after\:inset-0::after {
  content: var(--tw-content);
  inset: 0px;
}
.hover\:scale-110:hover {
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:border-foreground\/50:hover {
  border-color: hsl(var(--foreground) / 0.5);
}
.hover\:border-primary\/50:hover {
  border-color: hsl(var(--primary) / 0.5);
}
.hover\:bg-accent:hover {
  --tw-bg-opacity: 1;
  background-color: hsl(var(--accent) / var(--tw-bg-opacity, 1));
}
.hover\:bg-destructive\/80:hover {
  background-color: hsl(var(--destructive) / 0.8);
}
.hover\:bg-destructive\/90:hover {
  background-color: hsl(var(--destructive) / 0.9);
}
.hover\:bg-emerald-200:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(167 243 208 / var(--tw-bg-opacity, 1));
}
.hover\:bg-muted:hover {
  --tw-bg-opacity: 1;
  background-color: hsl(var(--muted) / var(--tw-bg-opacity, 1));
}
.hover\:bg-primary\/10:hover {
  background-color: hsl(var(--primary) / 0.1);
}
.hover\:bg-primary\/5:hover {
  background-color: hsl(var(--primary) / 0.05);
}
.hover\:bg-primary\/80:hover {
  background-color: hsl(var(--primary) / 0.8);
}
.hover\:bg-primary\/90:hover {
  background-color: hsl(var(--primary) / 0.9);
}
.hover\:bg-secondary\/80:hover {
  background-color: hsl(var(--secondary) / 0.8);
}
.hover\:text-accent-foreground:hover {
  --tw-text-opacity: 1;
  color: hsl(var(--accent-foreground) / var(--tw-text-opacity, 1));
}
.hover\:text-foreground:hover {
  --tw-text-opacity: 1;
  color: hsl(var(--foreground) / var(--tw-text-opacity, 1));
}
.hover\:underline:hover {
  text-decoration-line: underline;
}
.hover\:opacity-100:hover {
  opacity: 1;
}
.hover\:ring-2:hover {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.hover\:ring-offset-1:hover {
  --tw-ring-offset-width: 1px;
}
.focus\:bg-accent:focus {
  --tw-bg-opacity: 1;
  background-color: hsl(var(--accent) / var(--tw-bg-opacity, 1));
}
.focus\:text-accent-foreground:focus {
  --tw-text-opacity: 1;
  color: hsl(var(--accent-foreground) / var(--tw-text-opacity, 1));
}
.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.focus\:ring-2:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-ring:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: hsl(var(--ring) / var(--tw-ring-opacity, 1));
}
.focus\:ring-offset-2:focus {
  --tw-ring-offset-width: 2px;
}
.focus-visible\:outline-none:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.focus-visible\:ring-2:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus-visible\:ring-ring:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: hsl(var(--ring) / var(--tw-ring-opacity, 1));
}
.focus-visible\:ring-offset-2:focus-visible {
  --tw-ring-offset-width: 2px;
}
.focus-visible\:ring-offset-background:focus-visible {
  --tw-ring-offset-color: hsl(var(--background) / 1);
}
.active\:bg-muted\/50:active {
  background-color: hsl(var(--muted) / 0.5);
}
.disabled\:pointer-events-none:disabled {
  pointer-events: none;
}
.disabled\:cursor-not-allowed:disabled {
  cursor: not-allowed;
}
.disabled\:bg-muted\/50:disabled {
  background-color: hsl(var(--muted) / 0.5);
}
.disabled\:text-muted-foreground:disabled {
  --tw-text-opacity: 1;
  color: hsl(var(--muted-foreground) / var(--tw-text-opacity, 1));
}
.disabled\:opacity-25:disabled {
  opacity: 0.25;
}
.disabled\:opacity-50:disabled {
  opacity: 0.5;
}
.group[open] .group-open\:rotate-180 {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.peer:disabled ~ .peer-disabled\:cursor-not-allowed {
  cursor: not-allowed;
}
.peer:disabled ~ .peer-disabled\:opacity-70 {
  opacity: 0.7;
}
.data-\[disabled\]\:pointer-events-none[data-disabled] {
  pointer-events: none;
}
.data-\[state\=closed\]\:pointer-events-none[data-state="closed"] {
  pointer-events: none;
}
.data-\[side\=bottom\]\:translate-y-1[data-side="bottom"] {
  --tw-translate-y: 0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.data-\[side\=left\]\:-translate-x-1[data-side="left"] {
  --tw-translate-x: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.data-\[side\=right\]\:translate-x-1[data-side="right"] {
  --tw-translate-x: 0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.data-\[side\=top\]\:-translate-y-1[data-side="top"] {
  --tw-translate-y: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.data-\[state\=checked\]\:translate-x-5[data-state="checked"] {
  --tw-translate-x: 1.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.data-\[state\=unchecked\]\:translate-x-0[data-state="unchecked"] {
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.data-\[state\=checked\]\:bg-primary[data-state="checked"] {
  --tw-bg-opacity: 1;
  background-color: hsl(var(--primary) / var(--tw-bg-opacity, 1));
}
.data-\[state\=open\]\:bg-accent[data-state="open"] {
  --tw-bg-opacity: 1;
  background-color: hsl(var(--accent) / var(--tw-bg-opacity, 1));
}
.data-\[state\=open\]\:bg-secondary[data-state="open"] {
  --tw-bg-opacity: 1;
  background-color: hsl(var(--secondary) / var(--tw-bg-opacity, 1));
}
.data-\[state\=unchecked\]\:bg-input[data-state="unchecked"] {
  --tw-bg-opacity: 1;
  background-color: hsl(var(--input) / var(--tw-bg-opacity, 1));
}
.data-\[state\=checked\]\:text-primary-foreground[data-state="checked"] {
  --tw-text-opacity: 1;
  color: hsl(var(--primary-foreground) / var(--tw-text-opacity, 1));
}
.data-\[disabled\]\:opacity-50[data-disabled] {
  opacity: 0.5;
}
.data-\[state\=closed\]\:duration-300[data-state="closed"] {
  transition-duration: 300ms;
}
.data-\[state\=open\]\:duration-500[data-state="open"] {
  transition-duration: 500ms;
}
.data-\[state\=open\]\:animate-in[data-state="open"] {
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}
.data-\[state\=closed\]\:animate-out[data-state="closed"] {
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}
.data-\[state\=closed\]\:fade-out-0[data-state="closed"] {
  --tw-exit-opacity: 0;
}
.data-\[state\=open\]\:fade-in-0[data-state="open"] {
  --tw-enter-opacity: 0;
}
.data-\[state\=closed\]\:zoom-out-95[data-state="closed"] {
  --tw-exit-scale: .95;
}
.data-\[state\=open\]\:zoom-in-95[data-state="open"] {
  --tw-enter-scale: .95;
}
.data-\[side\=bottom\]\:slide-in-from-top-2[data-side="bottom"] {
  --tw-enter-translate-y: -0.5rem;
}
.data-\[side\=left\]\:slide-in-from-right-2[data-side="left"] {
  --tw-enter-translate-x: 0.5rem;
}
.data-\[side\=right\]\:slide-in-from-left-2[data-side="right"] {
  --tw-enter-translate-x: -0.5rem;
}
.data-\[side\=top\]\:slide-in-from-bottom-2[data-side="top"] {
  --tw-enter-translate-y: 0.5rem;
}
.data-\[state\=closed\]\:slide-out-to-bottom[data-state="closed"] {
  --tw-exit-translate-y: 100%;
}
.data-\[state\=closed\]\:slide-out-to-left[data-state="closed"] {
  --tw-exit-translate-x: -100%;
}
.data-\[state\=closed\]\:slide-out-to-right[data-state="closed"] {
  --tw-exit-translate-x: 100%;
}
.data-\[state\=closed\]\:slide-out-to-top[data-state="closed"] {
  --tw-exit-translate-y: -100%;
}
.data-\[state\=open\]\:slide-in-from-bottom[data-state="open"] {
  --tw-enter-translate-y: 100%;
}
.data-\[state\=open\]\:slide-in-from-left[data-state="open"] {
  --tw-enter-translate-x: -100%;
}
.data-\[state\=open\]\:slide-in-from-right[data-state="open"] {
  --tw-enter-translate-x: 100%;
}
.data-\[state\=open\]\:slide-in-from-top[data-state="open"] {
  --tw-enter-translate-y: -100%;
}
.data-\[state\=closed\]\:duration-300[data-state="closed"] {
  animation-duration: 300ms;
}
.data-\[state\=open\]\:duration-500[data-state="open"] {
  animation-duration: 500ms;
}
@media (prefers-reduced-motion: reduce) {

  .motion-reduce\:animate-none {
    animation: none;
  }

  .motion-reduce\:transition-none {
    transition-property: none;
  }
}
@media (min-width: 640px) {

  .sm\:inline {
    display: inline;
  }

  .sm\:hidden {
    display: none;
  }

  .sm\:w-auto {
    width: auto;
  }

  .sm\:max-w-md {
    max-width: 28rem;
  }

  .sm\:max-w-sm {
    max-width: 24rem;
  }

  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sm\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .sm\:flex-row {
    flex-direction: row;
  }

  .sm\:justify-end {
    justify-content: flex-end;
  }

  .sm\:space-x-2 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.5rem * var(--tw-space-x-reverse));
    margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
  }

  .sm\:p-3 {
    padding: 0.75rem;
  }

  .sm\:p-8 {
    padding: 2rem;
  }

  .sm\:px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .sm\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .sm\:text-left {
    text-align: left;
  }

  .sm\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
}
@media (min-width: 768px) {

  .md\:col-span-1 {
    grid-column: span 1 / span 1;
  }

  .md\:col-start-auto {
    grid-column-start: auto;
  }

  .md\:row-start-auto {
    grid-row-start: auto;
  }

  .md\:mr-0 {
    margin-right: 0px;
  }

  .md\:mr-2 {
    margin-right: 0.5rem;
  }

  .md\:line-clamp-none {
    overflow: visible;
    display: block;
    -webkit-box-orient: horizontal;
    -webkit-line-clamp: none;
  }

  .md\:block {
    display: block;
  }

  .md\:inline {
    display: inline;
  }

  .md\:grid {
    display: grid;
  }

  .md\:hidden {
    display: none;
  }

  .md\:w-auto {
    width: auto;
  }

  .md\:max-w-sm {
    max-width: 24rem;
  }

  .md\:grid-cols-\[1\.1fr_1fr\] {
    grid-template-columns: 1.1fr 1fr;
  }

  .md\:grid-cols-\[minmax\(0\2c 12rem\)_minmax\(0\2c 1fr\)_minmax\(0\2c 1fr\)_4\.5rem\] {
    grid-template-columns: minmax(0,12rem) minmax(0,1fr) minmax(0,1fr) 4.5rem;
  }

  .md\:gap-x-4 {
    column-gap: 1rem;
  }

  .md\:border {
    border-width: 1px;
  }

  .md\:border-current {
    border-color: currentColor;
  }

  .md\:border-transparent {
    border-color: transparent;
  }

  .md\:bg-\[var\(--publish-ink\)\] {
    background-color: var(--publish-ink);
  }

  .md\:bg-current {
    background-color: currentColor;
  }

  .md\:bg-primary {
    --tw-bg-opacity: 1;
    background-color: hsl(var(--primary) / var(--tw-bg-opacity, 1));
  }

  .md\:px-10 {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }

  .md\:px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .md\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .md\:pt-1\.5 {
    padding-top: 0.375rem;
  }

  .md\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  .md\:text-\[var\(--publish-ink\)\] {
    color: var(--publish-ink);
  }

  .md\:text-current {
    color: currentColor;
  }

  .md\:text-foreground {
    --tw-text-opacity: 1;
    color: hsl(var(--foreground) / var(--tw-text-opacity, 1));
  }

  .md\:text-primary {
    --tw-text-opacity: 1;
    color: hsl(var(--primary) / var(--tw-text-opacity, 1));
  }

  .md\:hover\:bg-\[var\(--publish-ink\)\]:hover {
    background-color: var(--publish-ink);
  }

  .md\:hover\:bg-black\/10:hover {
    background-color: rgb(0 0 0 / 0.1);
  }

  .md\:hover\:opacity-90:hover {
    opacity: 0.9;
  }
}
@media (prefers-color-scheme: dark) {

  .dark\:border-amber-700 {
    --tw-border-opacity: 1;
    border-color: rgb(180 83 9 / var(--tw-border-opacity, 1));
  }

  .dark\:border-amber-800 {
    --tw-border-opacity: 1;
    border-color: rgb(146 64 14 / var(--tw-border-opacity, 1));
  }

  .dark\:bg-amber-950\/20 {
    background-color: rgb(69 26 3 / 0.2);
  }

  .dark\:bg-amber-950\/40 {
    background-color: rgb(69 26 3 / 0.4);
  }

  .dark\:bg-emerald-950 {
    --tw-bg-opacity: 1;
    background-color: rgb(2 44 34 / var(--tw-bg-opacity, 1));
  }

  .dark\:bg-emerald-950\/60 {
    background-color: rgb(2 44 34 / 0.6);
  }

  .dark\:text-amber-100 {
    --tw-text-opacity: 1;
    color: rgb(254 243 199 / var(--tw-text-opacity, 1));
  }

  .dark\:text-emerald-100 {
    --tw-text-opacity: 1;
    color: rgb(209 250 229 / var(--tw-text-opacity, 1));
  }
}
.\[\&\:\:-webkit-details-marker\]\:hidden::-webkit-details-marker {
  display: none;
}
.\[\&\>button\]\:flex-1>button {
  flex: 1 1 0%;
}
.\[\&\>button\]\:px-2>button {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.\[\&\>span\]\:line-clamp-1>span {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.\[\&_\*\]\:cursor-pointer * {
  cursor: pointer;
}
.\[\&_svg\]\:pointer-events-none svg {
  pointer-events: none;
}
.\[\&_svg\]\:size-4 svg {
  width: 1rem;
  height: 1rem;
}
.\[\&_svg\]\:shrink-0 svg {
  flex-shrink: 0;
}

@font-face {
  font-family: 'Pomovi Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/product/current-piazza.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Pomovi Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/fonts/product/current-inter.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Pomovi Nunito Sans';
  font-style: normal;
  font-weight: 200 1000;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/product/current-nunito.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Pomovi Fraunces';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(/fonts/product/current-quieto-italic.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Pomovi Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/fonts/product/current-quieto.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Pomovi Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/product/current-festa.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Pomovi Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/product/current-archivo.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
.product-current-fonts { --pp-font-fraunces: 'Pomovi Fraunces'; --pp-font-inter: 'Pomovi Inter'; --pp-font-bricolage: 'Pomovi Bricolage Grotesque'; --pp-font-anton: 'Pomovi Anton'; --pp-font-archivo: 'Pomovi Archivo'; --font-public-body: 'Pomovi Nunito Sans'; }

/* Marketing framing. Product geometry and controls come from the snapshot. */
.current-booking-demo .booking-product-preview{min-width:0;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#fff9e9}
.booking-product-preview iframe,.booking-preview-loader{width:100%;height:780px;display:block;border:0}
.booking-preview-loader{padding:24px}.booking-product-preview:has(noscript iframe) .booking-preview-loader{display:none}
.surface-example-caption{margin:0;padding:12px 16px;background:var(--paper);font:400 13px/1.5 var(--sans);color:var(--site-muted)}
.surface-example-caption a{text-decoration:underline}.current-booking-demo.compact-booking{display:block}.current-booking-demo.compact-booking .demo-booking-copy{margin-bottom:24px}
.current-admin{color:hsl(var(--foreground));background:hsl(var(--background));font:400 16px/1.5 "Pomovi Inter",ui-sans-serif,system-ui,sans-serif;letter-spacing:normal;text-align:left}
/* The app inherits Inter from RootHtml. Keep marketing heading rules outside. */
.current-admin :where(h1,h2,h3,h4,h5,h6){font-family:inherit;line-height:inherit;letter-spacing:inherit;text-wrap:wrap}
.surface-print-workspace{display:grid;grid-template-columns:minmax(280px,.85fr) minmax(0,1.15fr);gap:32px;align-items:start}
.surface-print-options{padding:20px;border:1px solid var(--line);border-radius:16px}.surface-print-preview{min-height:400px;padding:16px}
.translation-console-frame{display:block;width:100%;height:720px;border:1px solid var(--line);border-radius:16px;background:#fff}
@media(max-width:700px){.surface-print-workspace{grid-template-columns:minmax(0,1fr)}.booking-product-preview iframe,.booking-preview-loader{height:740px}}

.demo-print > .surface-print-workspace { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr); }
.ingredient-product-source { width: min(520px, 100%); margin-inline: auto; }

.translation-console-frame { scroll-margin-top: 96px; }
.proof-viewport { height:132px; overflow:hidden; }
.proof-viewport iframe { width:320px; max-width:none; height:132px; border:0; display:block; pointer-events:none; }
.proof-site { position:relative; contain:layout paint; min-height:106px; overflow:hidden; }
.proof-site-status { padding-top:72px; }

.source-overlay-host { position:relative; z-index:200; }
.source-review-loading { position:fixed; inset:0; z-index:1001; display:grid; place-items:center; padding:24px; background:#0008; }
.source-review-loading > div { display:grid; gap:20px; width:min(100%,360px); padding:24px; border-radius:16px; background:#fff; }
.source-review-loading button { justify-self:start; min-height:44px; padding:8px 16px; border:1px solid #d4d4d8; border-radius:8px; background:#fff; }

/* Marketing hosts use their own color token; app --muted is an HSL triplet. */
.surface-qr-url{display:inline-flex;align-items:center;min-height:44px;max-width:100%;overflow-wrap:anywhere}
.surface-print-workspace.print-result { display: block; max-width: 760px; margin-inline: auto; }
.print-result .surface-print-preview { padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: #f5f2e9; }
.print-result-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.print-result-controls fieldset { display: flex; align-items: center; gap: 8px; border: 0; padding: 0; }
.print-result-controls legend { float: left; margin-right: 12px; font-size: 15px; }
.print-result-controls button { min-height: 48px; }
.print-result [aria-pressed=true] { outline: 2px solid #355344; outline-offset: 2px; }
.print-download-error { color: #a32b20; font-size: 15px; margin-top: 12px; }
@media (hover: none), (max-width: 700px) { .site-demo-phone iframe { pointer-events: none; } }

/* Host crop of real source markup. This preview has no navigation or runtime. */
.focused-preview .pc { min-height: 0; }
.focused-preview .pc-hdr, .focused-preview .mn-top, .focused-preview .mn-bar,
.focused-preview .mn-divider, .focused-preview .mn-dish-hit { display: none; }
.focused-preview .public-main { padding-top: 0; }
.focused-preview .pc .mn { padding-bottom: 20px; }
.focused-preview .mn-cat { opacity: 1 !important; transform: none !important; animation: none !important; }
.focused-preview [hidden] { display: none !important; }
.focused-preview [data-preview-empty] { padding: 24px; font: 17px/1.5 sans-serif; }
.proof-qr { display: flex; align-items: center; gap: 20px; padding: 12px 20px; color: #355344; font: 500 17px/1.5 sans-serif; }

html,body{margin:0;overflow:hidden}.proof-public{min-height:106px;display:grid;align-content:center}