/*
 * Masa — the La Mihaela world, ordering side. Same world as the brand's website
 * (horeca-sites/apps/renderer/public/skins/masa/skin.css). This file is app.css, never skin.css: on the
 * brand's own menu domain the site renderer answers /skins/masa/skin.css first.
 *
 * Every catalogue photo was shot on one rust
 * board, so on the menu the plates melt into one table, each with its white ticket (name, price,
 * the orange "+"). The board owns the chrome and the menu table; product, cart, checkout and account
 * pages are white paper. Orange is the only pill; ink text sits on it.
 *
 * Loaded only for brands whose theme.skin is "masa" (core/skins.ts; the edge worker injects it into
 * the HTML). Every selector starts with #skin[data-skin] on <html>: Angular scopes each compound of a
 * component selector with an attribute, so only an id reliably outranks component and Material styles
 * without !important. Plain CSS, no nesting (older phones).
 */

@font-face {
  font-family: 'Sofia Sans Condensed';
  font-style: normal;
  font-weight: 1 1000;
  font-display: swap;
  src: url(fonts/sofia-sans-cond-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Sofia Sans Condensed';
  font-style: normal;
  font-weight: 1 1000;
  font-display: swap;
  src: url(fonts/sofia-sans-cond-latin.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: 'Sofia Sans';
  font-style: normal;
  font-weight: 1 1000;
  font-display: swap;
  src: url(fonts/sofia-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Sofia Sans';
  font-style: normal;
  font-weight: 1 1000;
  font-display: swap;
  src: url(fonts/sofia-sans-latin.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;
}

/* ── World: tokens ─────────────────────────────────────────────────────── */

#skin[data-skin='masa'] {
  --board: #45190A;
  --board-lit: #6B2F17;
  --board-deep: #2A0C03;
  --on-board: #FFFDF9;
  --on-board-2: #EDD6C6;
  --paper: #FFFFFF;
  --ink: #22100A;
  --ink-2: #5E4C44;
  --line: #E4DCD6;
  --field-line: #9C8C84;
  --orange: #E8913A;
  --orange-deep: #A34A1B;
  --sage: #9CA873;
  --coral: #E07A63;
  --display: 'Sofia Sans Condensed', 'Arial Narrow', sans-serif-condensed, sans-serif;
  --body: 'Sofia Sans', system-ui, sans-serif;
  --lift: cubic-bezier(0.16, 1, 0.3, 1);
  --ticket-shadow: 0 5px 14px rgba(12, 3, 0, 0.38), 0 1px 2px rgba(12, 3, 0, 0.25);

  /* The platform's tokens, re-mapped: every component that isn't styled below still belongs here. */
  --brand-primary: var(--board);
  --brand-on-primary: var(--on-board);
  --brand-secondary: var(--orange);
  --brand-on-secondary: var(--ink);
  --brand-surface-glass: var(--paper);
  --surface-glass: var(--paper);
  --horeca-font-family: var(--body);
  --horeca-font-display: var(--display);
  --horeca-surface: var(--paper);
  --horeca-surface-variant: var(--paper);
  --horeca-surface-dim: #F4F1EE;
  --horeca-on-surface: var(--ink);
  --horeca-on-surface-medium: var(--ink-2);
  --horeca-on-surface-low: #6F5F57;
  --horeca-outline: var(--line);
  --horeca-error: #B3261E;
  --horeca-success: var(--ink);
  --mdc-circular-progress-active-indicator-color: var(--orange-deep);
  --horeca-warning: #8A5A12;
  --horeca-radius-xs: 2px;
  --horeca-radius-sm: 3px;
  --horeca-radius-md: 3px;
  --horeca-radius-lg: 4px;
  --horeca-radius-xl: 4px;
  --horeca-radius-2xl: 6px;
  --horeca-radius-3xl: 6px;
  --horeca-radius: 4px;
  --horeca-shadow-xs: none;
  --horeca-shadow-sm: none;
  --horeca-shadow-md: 0 6px 18px rgba(34, 16, 10, 0.12);
  --horeca-shadow-lg: 0 14px 34px rgba(34, 16, 10, 0.18);
  --mat-app-text-color: var(--ink);
  --mat-app-background-color: var(--paper);

  /* Material: fonts and the fixed M2 palette. */
  --mdc-filled-button-label-text-font: var(--display);
  --mdc-outlined-button-label-text-font: var(--body);
  --mdc-text-button-label-text-font: var(--body);
  --mdc-protected-button-label-text-font: var(--body);
  --mdc-filled-button-container-shape: 999px;
  --mdc-outlined-button-container-shape: 999px;
  --mdc-text-button-container-shape: 3px;
  --mdc-protected-button-container-shape: 999px;
  --mdc-filled-button-container-color: var(--orange);
  --mdc-filled-button-label-text-color: var(--ink);
  --mdc-outlined-button-outline-color: var(--field-line);
  --mdc-outlined-button-label-text-color: var(--ink);
  --mdc-text-button-label-text-color: var(--orange-deep);
  --mat-form-field-container-text-font: var(--body);
  --mdc-outlined-text-field-label-text-font: var(--body);
  --mdc-filled-text-field-label-text-font: var(--body);
  --mdc-outlined-text-field-container-shape: 3px;
  --mdc-outlined-text-field-outline-color: var(--field-line);
  --mdc-outlined-text-field-focus-outline-color: var(--ink);
  --mdc-outlined-text-field-focus-label-text-color: var(--ink);
  --mdc-outlined-text-field-caret-color: var(--orange-deep);
  --mat-radio-label-text-font: var(--body);
  --mat-checkbox-label-text-font: var(--body);
  --mat-select-trigger-text-font: var(--body);
  --mat-option-label-text-font: var(--body);
  --mat-expansion-header-text-font: var(--body);
  --mat-expansion-container-text-font: var(--body);
  --mdc-dialog-supporting-text-font: var(--body);
  --mdc-dialog-subhead-font: var(--display);
  --mdc-dialog-container-color: var(--paper);
  --mdc-dialog-container-shape: 4px;
  --mat-bottom-sheet-container-text-font: var(--body);
  --mat-bottom-sheet-container-background-color: var(--paper);
  --mat-bottom-sheet-container-shape: 6px;
  --mdc-snackbar-supporting-text-font: var(--body);
  --mdc-snackbar-container-color: var(--board);
  --mdc-snackbar-supporting-text-color: var(--on-board);
  --mdc-snackbar-container-shape: 3px;
  --mat-card-title-text-font: var(--display);
  --mat-card-subtitle-text-font: var(--body);
  --mdc-elevated-card-container-color: var(--paper);
  --mdc-elevated-card-container-shape: 4px;
  --mdc-outlined-card-container-shape: 4px;
  --mat-badge-background-color: var(--orange);
  --mat-badge-text-color: var(--ink);
  --mat-badge-text-font: var(--body);

  background: var(--board);
  color-scheme: light;
  scrollbar-color: #A08A80 var(--paper);
}

/* The body class .mat-typography pins Inter; the world's faces win here. */
#skin[data-skin='masa'] body,
#skin[data-skin='masa'] .mat-typography {
  font: 400 1rem/1.5 var(--body);
  letter-spacing: 0;
  color: var(--ink);
}
#skin[data-skin='masa'] .mat-typography h1,
#skin[data-skin='masa'] .mat-typography h2,
#skin[data-skin='masa'] .mat-typography h3,
#skin[data-skin='masa'] h1,
#skin[data-skin='masa'] h2,
#skin[data-skin='masa'] h3 {
  font-family: var(--display);
  font-weight: 850;
  text-transform: none;
  letter-spacing: -0.005em;
  line-height: 0.98;
}
#skin[data-skin='masa'] ::selection { background: var(--orange); color: var(--ink); }
#skin[data-skin='masa'] :focus-visible {
  outline: 3px solid var(--orange-deep);
  outline-offset: 2px;
}
#skin[data-skin='masa'] .top-toolbar :focus-visible,
#skin[data-skin='masa'] .bottom-nav :focus-visible,
#skin[data-skin='masa'] .menu-page :focus-visible { outline-color: var(--orange); }

#skin[data-skin='masa'] .mat-mdc-radio-button.mat-accent,
#skin[data-skin='masa'] .mat-mdc-radio-button.mat-primary {
  --mdc-radio-selected-icon-color: var(--orange-deep);
  --mdc-radio-selected-focus-icon-color: var(--orange-deep);
  --mdc-radio-selected-hover-icon-color: var(--orange-deep);
  --mdc-radio-selected-pressed-icon-color: var(--orange-deep);
  --mdc-radio-unselected-icon-color: var(--field-line);
  --mat-radio-checked-ripple-color: var(--orange);
}
#skin[data-skin='masa'] .mat-mdc-checkbox {
  --mdc-checkbox-selected-icon-color: var(--orange-deep);
  --mdc-checkbox-selected-hover-icon-color: var(--orange-deep);
  --mdc-checkbox-selected-focus-icon-color: var(--orange-deep);
  --mdc-checkbox-selected-pressed-icon-color: var(--orange-deep);
  --mdc-checkbox-selected-checkmark-color: #FFFFFF;
  --mdc-checkbox-unselected-icon-color: var(--field-line);
}
#skin[data-skin='masa'] .mat-mdc-slide-toggle {
  --mdc-switch-selected-track-color: var(--orange-deep);
  --mdc-switch-selected-hover-track-color: var(--orange-deep);
  --mdc-switch-selected-focus-track-color: var(--orange-deep);
  --mdc-switch-selected-handle-color: #FFFFFF;
  --mdc-switch-selected-hover-handle-color: #FFFFFF;
  --mdc-switch-selected-focus-handle-color: #FFFFFF;
  --mdc-switch-selected-pressed-handle-color: #FFFFFF;
}
#skin[data-skin='masa'] .mat-mdc-outlined-button.mat-primary {
  --mdc-outlined-button-label-text-color: var(--ink);
  --mdc-outlined-button-outline-color: var(--field-line);
}
#skin[data-skin='masa'] .mat-mdc-button.mat-primary { --mdc-text-button-label-text-color: var(--orange-deep); }
#skin[data-skin='masa'] .mat-mdc-unelevated-button.mat-primary {
  --mdc-filled-button-container-color: var(--orange);
  --mdc-filled-button-label-text-color: var(--ink);
}
#skin[data-skin='masa'] .mat-mdc-unelevated-button { font-weight: 850; letter-spacing: 0.01em; }

/* ── Shell: toolbar, nav, footer ───────────────────────────────────────── */

#skin[data-skin='masa'] .top-toolbar,
#skin[data-skin='masa'] .mat-toolbar.mat-primary {
  background: var(--board);
  color: var(--on-board);
  --mat-toolbar-container-background-color: var(--board);
  --mat-toolbar-container-text-color: var(--on-board);
}
#skin[data-skin='masa'] .top-toolbar app-brand-logo img { border-radius: 4px; }

/* The live state: a plain line with a dot, the colour of the day's state. */
#skin[data-skin='masa'] app-availability-badge .badge {
  min-width: 0;
  max-width: 100%;
  min-height: 40px;
  gap: 0.5rem;
  padding: 0.3rem 0.2rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--on-board);
  font-family: var(--body);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.1;
  letter-spacing: 0;
  text-transform: none;
}
#skin[data-skin='masa'] app-availability-badge .label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
#skin[data-skin='masa'] app-availability-badge .chev { color: var(--on-board-2); }
#skin[data-skin='masa'] app-availability-badge .dot { width: 9px; height: 9px; }
#skin[data-skin='masa'] app-availability-badge .open { --tone: var(--sage); }
#skin[data-skin='masa'] app-availability-badge .open .dot { box-shadow: 0 0 0 3px rgba(156, 168, 115, 0.3); }
#skin[data-skin='masa'] app-availability-badge .closed { --tone: var(--coral); }
#skin[data-skin='masa'] app-availability-badge .paused { --tone: var(--orange); }
#skin[data-skin='masa'] .toolbar-badge { min-width: 0; }

#skin[data-skin='masa'] .bottom-nav {
  background: var(--board);
  border-top: 0;
  box-shadow: 0 -6px 18px rgba(20, 5, 0, 0.3);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
#skin[data-skin='masa'] .bottom-nav .nav-item {
  position: relative;
  color: var(--on-board-2);
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.98rem;
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: none;
}
#skin[data-skin='masa'] .bottom-nav .nav-item:hover,
#skin[data-skin='masa'] .bottom-nav .nav-item.active { color: var(--on-board); }
#skin[data-skin='masa'] .bottom-nav .nav-item.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 26%;
  right: 26%;
  height: 3px;
  border-radius: 0 0 2px 2px;
  background: var(--orange);
}
#skin[data-skin='masa'] .bottom-nav .nav-item:hover mat-icon { transform: none; }

#skin[data-skin='masa'] .page-content { background: var(--paper); }
#skin[data-skin='masa'] .app-footer { border-top-color: var(--line); color: var(--ink-2); font-size: 0.82rem; }
#skin[data-skin='masa'] .app-footer a,
#skin[data-skin='masa'] .app-footer .link { color: var(--ink-2); }
#skin[data-skin='masa'] .app-footer a:hover,
#skin[data-skin='masa'] .app-footer .link:hover { color: var(--ink); }
#skin[data-skin='masa'] .offline-banner { background: var(--board-deep); color: var(--on-board); }

/* ── Menu: the table ───────────────────────────────────────────────────── */
/* The whole menu sits on the board the photos were shot on; each plate melts into it and carries
   its white ticket. The band on top stays short so the categories and the first plates are in the
   first screen. */

#skin[data-skin='masa'] .page-content:has(.menu-page) {
  background:
    radial-gradient(90% 34rem at 22% 12rem, var(--board-lit) 0%, transparent 70%),
    var(--board);
}
#skin[data-skin='masa'] .page-content:has(.menu-page) > .app-footer {
  border-top-color: rgba(237, 214, 198, 0.2);
  color: var(--on-board-2);
}
#skin[data-skin='masa'] .page-content:has(.menu-page) > .app-footer a,
#skin[data-skin='masa'] .page-content:has(.menu-page) > .app-footer .link { color: var(--on-board-2); }
#skin[data-skin='masa'] .page-content:has(.menu-page) > .app-footer a:hover,
#skin[data-skin='masa'] .page-content:has(.menu-page) > .app-footer .link:hover { color: var(--on-board); }
#skin[data-skin='masa'] .menu-page { color: var(--on-board); }

#skin[data-skin='masa'] .menu-page .hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: 'copy plate';
  align-items: center;
  column-gap: 0.5rem;
  min-height: 0;
  margin: 0 -16px;
  padding: 0.4rem 0 0.6rem 16px;
  border-radius: 0;
  overflow: hidden;
  background: transparent;
}
#skin[data-skin='masa'] .menu-page .hero:not(.has-image) {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: 'copy';
  padding: 1rem 16px;
}
#skin[data-skin='masa'] .menu-page .hero-img {
  grid-area: plate;
  position: relative;
  inset: auto;
  width: clamp(9rem, 42vw, 14rem);
  height: auto;
  aspect-ratio: 3 / 2;
  margin-right: -1.5rem;
  border-radius: 0;
  object-fit: cover;
  -webkit-mask-image: radial-gradient(closest-side, #000 68%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 68%, transparent 100%);
}
#skin[data-skin='masa'] .menu-page .hero-scrim { display: none; }
#skin[data-skin='masa'] .menu-page .hero-content {
  grid-area: copy;
  position: relative;
  padding: 0;
}
#skin[data-skin='masa'] .menu-page .hero-title {
  margin: 0;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(2.1rem, 9vw, 3.1rem);
  line-height: 0.92;
  letter-spacing: -0.01em;
  text-transform: none;
  text-wrap: balance;
  text-shadow: 0 2px 18px rgba(20, 5, 0, 0.45);
  color: var(--on-board);
}
#skin[data-skin='masa'] .menu-page .hero-subtitle {
  margin: 0.4rem 0 0;
  font-size: 0.95rem;
  line-height: 1.35;
  text-shadow: none;
  color: var(--on-board-2);
}

/* Promotions: white tickets on the table. */
#skin[data-skin='masa'] .menu-page .promos-section { margin: 1.25rem 0 1.25rem; }
#skin[data-skin='masa'] .menu-page .promos-head { gap: 0.5rem; margin-bottom: 0.8rem; }
#skin[data-skin='masa'] .menu-page .promos-head mat-icon { color: var(--orange); }
#skin[data-skin='masa'] .menu-page .promos-head h2 { font-size: 1.5rem; color: var(--on-board); }
#skin[data-skin='masa'] .menu-page .promos-count { color: var(--on-board-2); font-weight: 700; }
#skin[data-skin='masa'] .detail-page .promos-title {
  font-family: var(--display);
  font-weight: 850;
  font-size: 1.35rem;
  letter-spacing: 0;
  text-transform: none;
}
#skin[data-skin='masa'] .promo-card {
  border: 0;
  border-radius: 3px;
  background: var(--paper);
  box-shadow: var(--ticket-shadow);
  color: var(--ink);
}
#skin[data-skin='masa'] .detail-page .promo-card { box-shadow: 0 0 0 1px var(--line); }
#skin[data-skin='masa'] .promo-card-top {
  min-width: 5rem;
  padding: 0.5rem 0.65rem 0.4rem;
  background: var(--orange);
  color: var(--ink);
}
#skin[data-skin='masa'] .promo-card-label {
  font-family: var(--display);
  font-weight: 900;
  font-size: 1.6rem;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
}
#skin[data-skin='masa'] .promo-code {
  border: 1px dashed var(--ink);
  border-radius: 2px;
  background: transparent;
  color: var(--ink);
  font-family: var(--display);
  font-size: 0.9rem;
  letter-spacing: 0.06em;
}
#skin[data-skin='masa'] .promo-card-name { font-weight: 700; font-size: 0.98rem; color: var(--ink); }
#skin[data-skin='masa'] .promo-summary { font-size: 0.82rem; color: var(--ink-2); }
#skin[data-skin='masa'] .promo-toggle { color: var(--ink-2); }
#skin[data-skin='masa'] button.promo-card-body:hover { background: #FBF8F6; }
#skin[data-skin='masa'] .promo-desc { color: var(--ink); }
#skin[data-skin='masa'] .cond-chip {
  border-radius: 2px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 0.8rem;
}

/* The category rail: the table's edge, the active category underlined in orange. */
#skin[data-skin='masa'] .menu-page .category-bar {
  margin: 0.5rem -16px 1.25rem;
  padding: 0 8px 0 4px;
  min-height: 52px;
  background: var(--board);
  border-bottom: 0;
  box-shadow: 0 8px 18px -10px rgba(12, 3, 0, 0.6);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
#skin[data-skin='masa'] .menu-page .promos-section + .category-bar { margin-top: 0; }
#skin[data-skin='masa'] .menu-page .bar-btn { color: var(--on-board-2); border-radius: 3px; }
#skin[data-skin='masa'] .menu-page .bar-btn:active { background: var(--board-deep); }
#skin[data-skin='masa'] .menu-page .pills { gap: 1.2rem; padding: 0 1.75rem 0 2px; }
#skin[data-skin='masa'] .menu-page .pill {
  min-height: 52px;
  padding: 0.4rem 0 0.25rem;
  border-radius: 0;
  box-shadow: inset 0 -3px 0 transparent;
  background: transparent;
  color: var(--on-board-2);
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
}
#skin[data-skin='masa'] .menu-page .pill.active {
  background: transparent;
  color: var(--on-board);
  font-weight: 850;
  box-shadow: inset 0 -3px 0 var(--orange);
}
#skin[data-skin='masa'] .menu-page .search-input { color: var(--on-board); font-family: var(--body); }
#skin[data-skin='masa'] .menu-page .search-input::placeholder { color: var(--on-board-2); }
#skin[data-skin='masa'] .menu-page .search-icon { color: var(--on-board-2); }
#skin[data-skin='masa'] .menu-page .search-row:focus-within { box-shadow: inset 0 -3px 0 var(--orange); }

#skin[data-skin='masa'] .menu-page .category-section { position: relative; scroll-margin-top: 64px; }
#skin[data-skin='masa'] .menu-page .category-section + .category-section { margin-top: 2rem; }
#skin[data-skin='masa'] .menu-page .section-title {
  margin: 0 0 0.75rem;
  font-family: var(--display);
  font-weight: 850;
  font-size: clamp(1.9rem, 8vw, 2.4rem);
  line-height: 0.95;
  letter-spacing: -0.005em;
  text-transform: none;
  color: var(--on-board);
}
#skin[data-skin='masa'] .menu-page .empty-state,
#skin[data-skin='masa'] .menu-page .no-results { color: var(--on-board-2); }
#skin[data-skin='masa'] .menu-page .product-grid { gap: 0.75rem 1rem; }

/* ── Product card: a plate on the table, its ticket below ─────────────── */

#skin[data-skin='masa'] .product-card {
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
#skin[data-skin='masa'] .product-card:hover { transform: none; box-shadow: none; }
#skin[data-skin='masa'] .product-card .image-box {
  aspect-ratio: 3 / 2;
  background: transparent;
  overflow: visible;
}
#skin[data-skin='masa'] .product-card .img {
  -webkit-mask-image: radial-gradient(closest-side, #000 70%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 70%, transparent 100%);
  transition: transform 0.45s var(--lift), filter 0.45s var(--lift);
}
#skin[data-skin='masa'] .product-card .img-placeholder { background: transparent; color: var(--on-board-2); }
@media (hover: hover) {
  #skin[data-skin='masa'] .product-card:hover .img {
    transform: translateY(-6px) scale(1.03);
    filter: drop-shadow(0 16px 14px rgba(12, 3, 0, 0.5));
  }
}
#skin[data-skin='masa'] .product-card .info {
  position: relative;
  z-index: 1;
  margin: -1.9rem 0.6rem 0;
  padding: 0.6rem 0.7rem 0.65rem;
  border-radius: 3px;
  background: var(--paper);
  box-shadow: var(--ticket-shadow);
  transform: rotate(-1.2deg);
}
#skin[data-skin='masa'] .product-grid > :nth-child(even) .product-card .info { transform: rotate(1deg); }
#skin[data-skin='masa'] .product-card .title {
  margin: 0 0 0.25rem;
  font-family: var(--body);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.22;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}
#skin[data-skin='masa'] .product-card .desc {
  margin-bottom: 0.5rem;
  font-size: 0.84rem;
  line-height: 1.38;
  color: var(--ink-2);
}
#skin[data-skin='masa'] .product-card .price {
  font-family: var(--display);
  font-weight: 900;
  font-size: 1.3rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
#skin[data-skin='masa'] .product-card .price.sale { color: var(--orange-deep); }
#skin[data-skin='masa'] .product-card .price-old { color: var(--ink-2); }
#skin[data-skin='masa'] .product-card .add-btn {
  width: 44px;
  height: 44px;
  margin: -2px 0;
  border-radius: 50%;
  background: var(--orange);
  color: var(--ink);
  box-shadow: none;
  transition: transform 0.2s var(--lift);
}
#skin[data-skin='masa'] .product-card .add-btn:hover { filter: none; transform: scale(1.06); }
#skin[data-skin='masa'] .product-card.just-added .add-btn {
  background: var(--sage);
  color: var(--ink);
  animation: masa-set-down 520ms var(--lift);
}
/* Added: the ticket is set down on the table. */
@keyframes masa-set-down {
  0% { transform: scale(0.86); }
  60% { transform: scale(1.08); }
  100% { transform: scale(1); }
}
#skin[data-skin='masa'] .product-card .open:focus-visible::after {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
}

/* Badges on the plate: small white tags. */
#skin[data-skin='masa'] .product-card .spotlight-badges { top: 6%; left: 8%; gap: 0.25rem; }
#skin[data-skin='masa'] .product-card .spotlight-badge,
#skin[data-skin='masa'] .product-card .spotlight-badge.bestseller {
  gap: 0.25rem;
  padding: 0.28rem 0.45rem 0.26rem 0.35rem;
  border-radius: 2px;
  box-shadow: 0 3px 8px rgba(12, 3, 0, 0.3);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-weight: 800;
  font-size: 0.68rem;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
#skin[data-skin='masa'] .product-card .spotlight-badge mat-icon { font-size: 12px; width: 12px; height: 12px; color: var(--orange-deep); }
#skin[data-skin='masa'] .product-card .promo-badge {
  top: 6%;
  right: 8%;
  border-radius: 2px;
  box-shadow: 0 3px 8px rgba(12, 3, 0, 0.3);
  background: var(--orange);
  color: var(--ink);
  font-family: var(--display);
  font-weight: 850;
  font-size: 0.95rem;
}
#skin[data-skin='masa'] .product-card .diet-badge {
  border-radius: 2px;
  background: var(--paper);
  box-shadow: none;
  color: var(--ink);
}

/* Sold out stays on the table, greyed; the ticket says why. */
#skin[data-skin='masa'] .product-card.unavailable { opacity: 1; }
#skin[data-skin='masa'] .product-card.unavailable .img { filter: grayscale(1) brightness(0.7); opacity: 0.6; }
#skin[data-skin='masa'] .product-card.unavailable .unavailable-overlay { background: transparent; }
#skin[data-skin='masa'] .product-card.unavailable .unavailable-chip {
  border-radius: 2px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
#skin[data-skin='masa'] .product-card.unavailable .title,
#skin[data-skin='masa'] .product-card.unavailable .price { color: var(--ink-2); }

/* ── Product detail: the plate on its own piece of the table ───────────── */

#skin[data-skin='masa'] .detail-page { background: var(--paper); }
#skin[data-skin='masa'] .detail-page .hero {
  display: flex;
  justify-content: center;
  border-radius: 0;
  background:
    radial-gradient(70% 90% at 30% 20%, var(--board-lit) 0%, transparent 70%),
    var(--board);
}
#skin[data-skin='masa'] .detail-page .hero img {
  max-width: 44rem;
  -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 72%, transparent 100%);
}
#skin[data-skin='masa'] .detail-page .back-btn {
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 3px 10px rgba(12, 3, 0, 0.35);
}
#skin[data-skin='masa'] .detail-page .title-row h1,
#skin[data-skin='masa'] .detail-page h1 {
  font-size: clamp(2.1rem, 9vw, 2.8rem);
  line-height: 0.95;
  color: var(--ink);
}
#skin[data-skin='masa'] .detail-page .base-price {
  font-family: var(--display);
  font-weight: 900;
  font-size: 1.6rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
#skin[data-skin='masa'] .detail-page .spotlight-chip,
#skin[data-skin='masa'] .detail-page .diet-chip {
  border-radius: 2px;
  box-shadow: none;
  font-family: var(--body);
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
#skin[data-skin='masa'] .detail-page .spotlight-chip { background: transparent; color: var(--orange-deep); padding-inline: 0; }
#skin[data-skin='masa'] .detail-page .spotlight-chip mat-icon { color: var(--orange-deep); }
#skin[data-skin='masa'] .detail-page .diet-chip {
  background: transparent;
  border: 1px solid var(--field-line);
  color: var(--ink);
}
#skin[data-skin='masa'] .detail-page .section-label {
  font-family: var(--display);
  font-weight: 850;
  font-size: 1.35rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}
#skin[data-skin='masa'] .detail-page .allergens span,
#skin[data-skin='masa'] .detail-page .allergens .chip,
#skin[data-skin='masa'] .detail-page .allergens li {
  border-radius: 2px;
  background: transparent;
  border: 1px solid var(--field-line);
  color: var(--ink);
}
#skin[data-skin='masa'] .detail-page .group-card {
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
#skin[data-skin='masa'] .detail-page .group-name {
  font-family: var(--display);
  font-weight: 850;
  font-size: 1.25rem;
  letter-spacing: 0;
  text-transform: none;
}
#skin[data-skin='masa'] .detail-page .promo-card { flex: 1 1 auto; width: 100%; }
#skin[data-skin='masa'] .detail-page .elig {
  border-radius: 2px;
  background: transparent;
  border: 1px solid currentColor;
}
#skin[data-skin='masa'] .detail-page .elig.met { color: var(--ink); background: transparent; }
#skin[data-skin='masa'] .detail-page .elig.short { color: var(--horeca-warning); background: transparent; }

/* The order action: the one orange pill on screen. */
#skin[data-skin='masa'] .cta-bar {
  background: var(--paper);
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 18px rgba(34, 16, 10, 0.08);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
#skin[data-skin='masa'] .cta-btn,
#skin[data-skin='masa'] .cta-btn.mat-mdc-unelevated-button,
#skin[data-skin='masa'] .cta-btn.mat-mdc-unelevated-button.mat-primary {
  --mdc-filled-button-container-color: var(--orange);
  --mdc-filled-button-label-text-color: var(--ink);
  border-radius: 999px;
  background: var(--orange);
  color: var(--ink);
}
#skin[data-skin='masa'] .cta-btn .cta-label,
#skin[data-skin='masa'] .cta-btn .cta-amount {
  font-family: var(--display);
  font-weight: 850;
  font-size: 1.35rem;
  letter-spacing: 0.01em;
  text-transform: none;
}
#skin[data-skin='masa'] .cta-btn .cta-amount { font-weight: 900; font-variant-numeric: tabular-nums; }
#skin[data-skin='masa'] .cta-hint { color: var(--ink-2); }

#skin[data-skin='masa'] .stepper {
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--field-line);
}
#skin[data-skin='masa'] .stepper .step-btn { border-radius: 50%; color: var(--ink); }
#skin[data-skin='masa'] .stepper .value { font-variant-numeric: tabular-nums; font-weight: 700; }

/* ── Cart / checkout / account: white paper ────────────────────────────── */

#skin[data-skin='masa'] .section-card {
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--paper);
  box-shadow: none;
}
#skin[data-skin='masa'] .section-card .title {
  font-family: var(--display);
  font-weight: 850;
  font-size: 1.35rem;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}
#skin[data-skin='masa'] .section-card .summary { color: var(--horeca-on-surface-medium); }
#skin[data-skin='masa'] .cart-page .mat-mdc-icon-button.mat-warn {
  --mdc-icon-button-icon-color: var(--horeca-on-surface-medium);
  --mat-icon-button-state-layer-color: var(--orange-deep);
  color: var(--horeca-on-surface-medium);
}
#skin[data-skin='masa'] .cart-page .mat-mdc-icon-button.mat-warn:hover,
#skin[data-skin='masa'] .cart-page .mat-mdc-icon-button.mat-warn:focus-visible { color: var(--orange-deep); }
#skin[data-skin='masa'] .mat-mdc-card {
  border-radius: 3px;
  box-shadow: none;
  border: 1px solid var(--line);
}
#skin[data-skin='masa'] .tip-title {
  font-family: var(--display);
  font-weight: 850;
  font-size: 1.35rem;
  letter-spacing: 0;
  text-transform: none;
}
#skin[data-skin='masa'] .tip-chip {
  min-height: 44px;
  padding: 0.5rem 0.9rem 0.42rem;
  border: 1px solid var(--field-line);
  border-radius: 999px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.1rem;
  font-variant-numeric: tabular-nums;
}
#skin[data-skin='masa'] .tip-chip.selected { border-color: var(--ink); background: var(--orange); color: var(--ink); }

/* ── Dark: the table after closing ─────────────────────────────────────── */
/* Reading surfaces go to the deep board; the plates and tickets stay as they are. */

#skin[data-skin='masa'][data-theme='dark'] {
  --paper-dark: #1E0C05;
  --paper-dark-2: #2A140B;
  --brand-primary: var(--on-board);
  --brand-on-primary: var(--board);
  --horeca-surface: #2A140B;
  --horeca-surface-variant: #1E0C05;
  --horeca-surface-dim: #33190E;
  --horeca-on-surface: var(--on-board);
  --horeca-on-surface-medium: var(--on-board-2);
  --horeca-on-surface-low: #BFA79A;
  --horeca-outline: #4A2A1C;
  --horeca-error: #FF8A7A;
  --horeca-success: var(--on-board);
  --mdc-circular-progress-active-indicator-color: var(--orange);
  --horeca-warning: #E0A04A;
  --mat-app-text-color: var(--on-board);
  --mdc-dialog-container-color: #2A140B;
  --mat-bottom-sheet-container-background-color: #2A140B;
  --mdc-elevated-card-container-color: #2A140B;
  --mdc-outlined-button-label-text-color: var(--on-board);
  --mdc-text-button-label-text-color: var(--orange);
  --mdc-outlined-text-field-focus-outline-color: var(--on-board);
  --mdc-outlined-text-field-focus-label-text-color: var(--on-board);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  #skin[data-skin='masa']:not([data-theme='light']) {
    --brand-primary: var(--on-board);
    --brand-on-primary: var(--board);
    --horeca-surface: #2A140B;
    --horeca-surface-variant: #1E0C05;
    --horeca-surface-dim: #33190E;
    --horeca-on-surface: var(--on-board);
    --horeca-on-surface-medium: var(--on-board-2);
    --horeca-on-surface-low: #BFA79A;
    --horeca-outline: #4A2A1C;
    --horeca-error: #FF8A7A;
    --horeca-success: var(--on-board);
    --mdc-circular-progress-active-indicator-color: var(--orange);
    --horeca-warning: #E0A04A;
    --mat-app-text-color: var(--on-board);
    --mdc-dialog-container-color: #2A140B;
    --mat-bottom-sheet-container-background-color: #2A140B;
    --mdc-elevated-card-container-color: #2A140B;
    --mdc-outlined-button-label-text-color: var(--on-board);
    --mdc-text-button-label-text-color: var(--orange);
    --mdc-outlined-text-field-focus-outline-color: var(--on-board);
    --mdc-outlined-text-field-focus-label-text-color: var(--on-board);
    color-scheme: dark;
  }
}
#skin[data-skin='masa'][data-theme='dark'] body,
#skin[data-skin='masa'][data-theme='dark'] .mat-typography,
#skin[data-skin='masa'][data-theme='dark'] .page-content,
#skin[data-skin='masa'][data-theme='dark'] .detail-page,
#skin[data-skin='masa'][data-theme='dark'] .cta-bar { background: #1E0C05; color: var(--on-board); }
#skin[data-skin='masa'][data-theme='dark'] .detail-page h1,
#skin[data-skin='masa'][data-theme='dark'] .detail-page .title-row h1,
#skin[data-skin='masa'][data-theme='dark'] .detail-page .base-price,
#skin[data-skin='masa'][data-theme='dark'] .detail-page .section-label,
#skin[data-skin='masa'][data-theme='dark'] .detail-page .diet-chip,
#skin[data-skin='masa'][data-theme='dark'] .section-card .title { color: var(--on-board); }
#skin[data-skin='masa'][data-theme='dark'] .section-card { background: #2A140B; border-color: #4A2A1C; }
#skin[data-skin='masa'][data-theme='dark'] .cta-bar { border-top-color: #4A2A1C; }
#skin[data-skin='masa'][data-theme='dark'] .detail-page .spotlight-chip,
#skin[data-skin='masa'][data-theme='dark'] .detail-page .spotlight-chip mat-icon { color: var(--orange); }
#skin[data-skin='masa'][data-theme='dark'] .app-footer { border-top-color: #4A2A1C; color: var(--on-board-2); }
#skin[data-skin='masa'][data-theme='dark'] .app-footer a,
#skin[data-skin='masa'][data-theme='dark'] .app-footer .link { color: var(--on-board-2); }
#skin[data-skin='masa'][data-theme='dark'] .app-footer a:hover,
#skin[data-skin='masa'][data-theme='dark'] .app-footer .link:hover { color: var(--on-board); }
@media (prefers-color-scheme: dark) {
  #skin[data-skin='masa']:not([data-theme='light']) body,
  #skin[data-skin='masa']:not([data-theme='light']) .mat-typography,
  #skin[data-skin='masa']:not([data-theme='light']) .page-content,
  #skin[data-skin='masa']:not([data-theme='light']) .detail-page,
  #skin[data-skin='masa']:not([data-theme='light']) .cta-bar { background: #1E0C05; color: var(--on-board); }
  #skin[data-skin='masa']:not([data-theme='light']) .detail-page h1,
  #skin[data-skin='masa']:not([data-theme='light']) .detail-page .title-row h1,
  #skin[data-skin='masa']:not([data-theme='light']) .detail-page .base-price,
  #skin[data-skin='masa']:not([data-theme='light']) .detail-page .section-label,
  #skin[data-skin='masa']:not([data-theme='light']) .detail-page .diet-chip,
  #skin[data-skin='masa']:not([data-theme='light']) .section-card .title { color: var(--on-board); }
  #skin[data-skin='masa']:not([data-theme='light']) .section-card { background: #2A140B; border-color: #4A2A1C; }
  #skin[data-skin='masa']:not([data-theme='light']) .cta-bar { border-top-color: #4A2A1C; }
  #skin[data-skin='masa']:not([data-theme='light']) .detail-page .spotlight-chip,
  #skin[data-skin='masa']:not([data-theme='light']) .detail-page .spotlight-chip mat-icon { color: var(--orange); }
  #skin[data-skin='masa']:not([data-theme='light']) .app-footer { border-top-color: #4A2A1C; color: var(--on-board-2); }
  #skin[data-skin='masa']:not([data-theme='light']) .app-footer a,
  #skin[data-skin='masa']:not([data-theme='light']) .app-footer .link { color: var(--on-board-2); }
  #skin[data-skin='masa']:not([data-theme='light']) .app-footer a:hover,
  #skin[data-skin='masa']:not([data-theme='light']) .app-footer .link:hover { color: var(--on-board); }
}
/* The menu is the table in both modes; keep its board and its tickets. */
#skin[data-skin='masa'][data-theme='dark'] .page-content:has(.menu-page) {
  background:
    radial-gradient(90% 34rem at 22% 12rem, var(--board-lit) 0%, transparent 70%),
    var(--board);
}
@media (prefers-color-scheme: dark) {
  #skin[data-skin='masa']:not([data-theme='light']) .page-content:has(.menu-page) {
    background:
      radial-gradient(90% 34rem at 22% 12rem, var(--board-lit) 0%, transparent 70%),
      var(--board);
  }
}

/* ── Desktop: one axis for everything ─────────────────────────────────── */
/* The board runs edge to edge; what sits on it — the logo, the live state, the name, the
   categories, the plates, the tabs — shares one centred column with the brand's site. */
@media (min-width: 900px) {
  #skin[data-skin='masa'] {
    --column: 72rem;
  }
  #skin[data-skin='masa'] .top-toolbar,
  #skin[data-skin='masa'] .menu-page .hero,
  #skin[data-skin='masa'] .menu-page .category-bar,
  #skin[data-skin='masa'] .menu-page .promos-section,
  #skin[data-skin='masa'] .menu-page .category-section {
    padding-inline: max(16px, calc((100% - var(--column)) / 2));
  }
  #skin[data-skin='masa'] .menu-page { padding: 0 0 2.5rem; }
  #skin[data-skin='masa'] .menu-page .hero,
  #skin[data-skin='masa'] .menu-page .category-bar { margin-inline: 0; }
  #skin[data-skin='masa'] .menu-page .hero { padding-block: 0.5rem 0.75rem; }
  #skin[data-skin='masa'] .menu-page .hero-img { width: clamp(12rem, 17vw, 15rem); margin-right: 0; }
  #skin[data-skin='masa'] .menu-page .hero-title { font-size: 3.4rem; }
  #skin[data-skin='masa'] .menu-page .product-grid {
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 1.25rem 1.75rem;
  }
  #skin[data-skin='masa'] .page-content > .app-footer,
  #skin[data-skin='masa'] .cart-page,
  #skin[data-skin='masa'] .orders-page,
  #skin[data-skin='masa'] .offers-page,
  #skin[data-skin='masa'] .loyalty-page,
  #skin[data-skin='masa'] .profile-page,
  #skin[data-skin='masa'] .bill-page,
  #skin[data-skin='masa'] .confirm-page,
  #skin[data-skin='masa'] .legal-page,
  #skin[data-skin='masa'] .detail-page {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--column);
    margin-inline: auto;
  }
  #skin[data-skin='masa'] .bottom-nav {
    padding-inline: max(0px, calc((100% - var(--column)) / 2));
  }
}