/*
 * Cornicione — the A'luat Pizza world, ordering side. Same world as the brand's website
 * (horeca-sites/apps/renderer/public/skins/cornicione/skin.css): char chrome, flour reading
 * surfaces, leopard-spot marks, San Marzano red only on the edge that moves (the order action,
 * the active tab, the confirmation).
 *
 * Loaded only for brands whose theme.skin is "cornicione" (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 iPhones).
 */

@font-face {
  font-family: 'Sofia Sans Extra Condensed';
  font-style: normal;
  font-weight: 1 1000;
  font-display: swap;
  src: url(fonts/sofia-sans-xcond-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 Extra Condensed';
  font-style: normal;
  font-weight: 1 1000;
  font-display: swap;
  src: url(fonts/sofia-sans-xcond-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='cornicione'] {
  --char: #16110D;
  --char-2: #231B15;
  --soot: #3B2F26;
  --ash: #6F6256;
  --flour: #EFEDE8;
  --parchment: #F8F7F4;
  --ink: #1A1511;
  --ink-2: #5A5048;
  --line: #D6D1C7;
  --field-line: #857A6F;
  --flour-dim: #B8B0A4;
  --crust: #C98635;
  --tomato: #C42A1A;
  --tomato-deep: #A32214;
  --display: 'Sofia Sans Extra Condensed', 'Arial Narrow', sans-serif-condensed, sans-serif;
  --body: 'Sofia Sans', system-ui, sans-serif;

  /* The platform's tokens, re-mapped: every component that isn't styled below still belongs here. */
  --brand-primary: var(--char);
  --brand-on-primary: var(--flour);
  --brand-secondary: var(--crust);
  --brand-on-secondary: var(--char);
  --brand-surface-glass: var(--flour);
  --surface-glass: var(--flour);
  --horeca-font-family: var(--body);
  --horeca-font-display: var(--display);
  --horeca-surface: var(--parchment);
  --horeca-surface-variant: var(--flour);
  --horeca-surface-dim: #E6E3DC;
  --horeca-on-surface: var(--ink);
  --horeca-on-surface-medium: var(--ink-2);
  --horeca-on-surface-low: #6E645B;
  --horeca-outline: var(--line);
  --horeca-error: #B3261E;
  --horeca-success: var(--ink);
  --mdc-circular-progress-active-indicator-color: var(--char);
  --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(22, 17, 13, 0.12);
  --horeca-shadow-lg: 0 14px 34px rgba(22, 17, 13, 0.18);
  --mat-app-text-color: var(--ink);
  --mat-app-background-color: var(--flour);

  /* Material: fonts and the fixed M2 palette. */
  --mdc-filled-button-label-text-font: var(--body);
  --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: 3px;
  --mdc-outlined-button-container-shape: 3px;
  --mdc-text-button-container-shape: 3px;
  --mdc-protected-button-container-shape: 3px;
  --mdc-filled-button-container-color: var(--char);
  --mdc-filled-button-label-text-color: var(--flour);
  --mdc-outlined-button-outline-color: var(--field-line);
  --mdc-outlined-button-label-text-color: var(--ink);
  --mdc-text-button-label-text-color: var(--ink);
  --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(--tomato);
  --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(--parchment);
  --mdc-dialog-container-shape: 4px;
  --mat-bottom-sheet-container-text-font: var(--body);
  --mat-bottom-sheet-container-background-color: var(--parchment);
  --mat-bottom-sheet-container-shape: 6px;
  --mdc-snackbar-supporting-text-font: var(--body);
  --mdc-snackbar-container-color: var(--char);
  --mdc-snackbar-supporting-text-color: var(--flour);
  --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(--parchment);
  --mdc-elevated-card-container-shape: 4px;
  --mdc-outlined-card-container-shape: 4px;
  --mat-badge-background-color: var(--tomato);
  --mat-badge-text-color: #FFFFFF;
  --mat-badge-text-font: var(--body);

  background: var(--char);
  color-scheme: light;
  scrollbar-color: #8A8177 var(--flour);
}

/* The body class .mat-typography pins Inter; the world's faces win here. */
#skin[data-skin='cornicione'] body,
#skin[data-skin='cornicione'] .mat-typography {
  font: 400 1rem/1.5 var(--body);
  letter-spacing: 0;
  color: var(--ink);
}
#skin[data-skin='cornicione'] .mat-typography h1,
#skin[data-skin='cornicione'] .mat-typography h2,
#skin[data-skin='cornicione'] .mat-typography h3,
#skin[data-skin='cornicione'] h1,
#skin[data-skin='cornicione'] h2,
#skin[data-skin='cornicione'] h3 {
  font-family: var(--display);
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  line-height: 0.95;
}
#skin[data-skin='cornicione'] ::selection { background: var(--tomato); color: #FFFFFF; }
#skin[data-skin='cornicione'] :focus-visible {
  outline: 2px solid var(--tomato);
  outline-offset: 2px;
}
/* Radios and checkboxes: the order's own marks, ink on flour, red only when chosen. */
#skin[data-skin='cornicione'] .mat-mdc-radio-button.mat-accent,
#skin[data-skin='cornicione'] .mat-mdc-radio-button.mat-primary {
  --mdc-radio-selected-icon-color: var(--tomato);
  --mdc-radio-selected-focus-icon-color: var(--tomato);
  --mdc-radio-selected-hover-icon-color: var(--tomato);
  --mdc-radio-selected-pressed-icon-color: var(--tomato);
  --mdc-radio-unselected-icon-color: var(--field-line);
  --mat-radio-checked-ripple-color: var(--tomato);
}
#skin[data-skin='cornicione'] .mat-mdc-checkbox {
  --mdc-checkbox-selected-icon-color: var(--char);
  --mdc-checkbox-selected-hover-icon-color: var(--char);
  --mdc-checkbox-selected-focus-icon-color: var(--char);
  --mdc-checkbox-selected-pressed-icon-color: var(--char);
  --mdc-checkbox-selected-checkmark-color: var(--flour);
  --mdc-checkbox-unselected-icon-color: var(--field-line);
}
#skin[data-skin='cornicione'] .mat-mdc-slide-toggle {
  --mdc-switch-selected-track-color: var(--char);
  --mdc-switch-selected-hover-track-color: var(--char);
  --mdc-switch-selected-focus-track-color: var(--char);
  --mdc-switch-selected-handle-color: var(--flour);
  --mdc-switch-selected-hover-handle-color: var(--flour);
  --mdc-switch-selected-focus-handle-color: var(--flour);
  --mdc-switch-selected-pressed-handle-color: var(--flour);
}
#skin[data-skin='cornicione'] .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='cornicione'] .mat-mdc-button.mat-primary { --mdc-text-button-label-text-color: var(--ink); }
#skin[data-skin='cornicione'] .mat-mdc-unelevated-button.mat-primary {
  --mdc-filled-button-container-color: var(--char);
  --mdc-filled-button-label-text-color: var(--flour);
}

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

#skin[data-skin='cornicione'] .top-toolbar,
#skin[data-skin='cornicione'] .mat-toolbar.mat-primary {
  background: var(--char);
  color: var(--flour);
  --mat-toolbar-container-background-color: var(--char);
  --mat-toolbar-container-text-color: var(--flour);
}
/* The stamp is a flour disc on black: `screen` melts the square into the char. */
#skin[data-skin='cornicione'] .top-toolbar app-brand-logo img { mix-blend-mode: screen; }

/* The live state reads like the oven's own instrument, not a pill. */
#skin[data-skin='cornicione'] app-availability-badge .badge {
  min-width: 0;
  max-width: 100%;
  min-height: 40px;
  gap: 0.5rem;
  padding: 0.35rem 0.55rem 0.3rem;
  border: 1px solid var(--ash);
  border-radius: 3px;
  background: transparent;
  box-shadow: none;
  color: var(--flour);
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
#skin[data-skin='cornicione'] app-availability-badge .label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
#skin[data-skin='cornicione'] app-availability-badge .chev { color: var(--flour-dim); }
#skin[data-skin='cornicione'] app-availability-badge .dot { width: 9px; height: 9px; }
#skin[data-skin='cornicione'] app-availability-badge .open { --tone: var(--crust); }
#skin[data-skin='cornicione'] app-availability-badge .open .dot {
  box-shadow: 0 0 0 3px rgba(201, 134, 53, 0.22), 0 0 10px 1px rgba(224, 154, 74, 0.55);
}
#skin[data-skin='cornicione'] app-availability-badge .closed { --tone: var(--ash); }
#skin[data-skin='cornicione'] app-availability-badge .paused { --tone: #E0A04A; }
#skin[data-skin='cornicione'] .toolbar-badge { min-width: 0; }

#skin[data-skin='cornicione'] .bottom-nav {
  background: var(--char);
  border-top: 1px solid var(--soot);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
#skin[data-skin='cornicione'] .bottom-nav .nav-item {
  position: relative;
  color: var(--flour-dim);
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.98rem;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
#skin[data-skin='cornicione'] .bottom-nav .nav-item:hover,
#skin[data-skin='cornicione'] .bottom-nav .nav-item.active { color: var(--flour); }
#skin[data-skin='cornicione'] .bottom-nav .nav-item.active::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 22%;
  right: 22%;
  height: 3px;
  background: var(--tomato);
}
#skin[data-skin='cornicione'] .bottom-nav .nav-item:hover mat-icon { transform: none; }

#skin[data-skin='cornicione'] .page-content { background: var(--flour); }
#skin[data-skin='cornicione'] .app-footer { border-top-color: var(--line); color: var(--ink-2); font-size: 0.82rem; }
#skin[data-skin='cornicione'] .app-footer a,
#skin[data-skin='cornicione'] .app-footer .link { color: var(--ink-2); }
#skin[data-skin='cornicione'] .app-footer a:hover,
#skin[data-skin='cornicione'] .app-footer .link:hover { color: var(--ink); }

#skin[data-skin='cornicione'] .offline-banner { background: var(--char-2); color: var(--flour); }

/* ── Menu: a low char masthead with a peephole into the oven ───────────── */
/* The menu is for ordering: the name and the mouth share one short band, so the
   categories and the first products stay in the first screen on phone and desktop. */

#skin[data-skin='cornicione'] .menu-page .hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: 'copy mouth';
  align-items: end;
  column-gap: 1rem;
  min-height: 0;
  margin: 0 -16px;
  padding: 0.75rem 16px 1.1rem;
  border-radius: 0;
  overflow: visible;
  background: var(--char);
}
#skin[data-skin='cornicione'] .menu-page .hero:not(.has-image) {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: 'copy';
  padding-top: 1.25rem;
}
#skin[data-skin='cornicione'] .menu-page .hero-img,
#skin[data-skin='cornicione'] .menu-page .hero.has-image .hero-scrim {
  grid-area: mouth;
  position: relative;
  inset: auto;
  width: clamp(7.5rem, 30vw, 10.5rem);
  height: auto;
  aspect-ratio: 1.45;
  border-radius: 50% 50% 3px 3px / 64% 64% 3px 3px;
}
#skin[data-skin='cornicione'] .menu-page .hero-img {
  object-fit: cover;
  object-position: 50% 55%;
  background: var(--char-2);
}
/* The scrim becomes the scorched lip of the mouth. */
#skin[data-skin='cornicione'] .menu-page .hero.has-image .hero-scrim {
  z-index: 1;
  background:
    url(arch-rim.svg) 0 0 / 100% 100% no-repeat,
    radial-gradient(115% 95% at 50% 108%, transparent 52%, rgba(22, 17, 13, 0.6) 100%);
}
#skin[data-skin='cornicione'] .menu-page .hero:not(.has-image) .hero-scrim { display: none; }
#skin[data-skin='cornicione'] .menu-page .hero-content {
  grid-area: copy;
  position: relative;
  padding: 0;
}
#skin[data-skin='cornicione'] .menu-page .hero-title {
  margin: 0;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(2rem, 8.6vw, 3rem);
  line-height: 0.88;
  letter-spacing: 0.004em;
  text-transform: uppercase;
  text-wrap: balance;
  text-shadow: none;
  color: var(--flour);
}
#skin[data-skin='cornicione'] .menu-page .hero-subtitle {
  margin: 0.4rem 0 0;
  font-size: 0.95rem;
  line-height: 1.35;
  text-shadow: none;
  color: var(--flour-dim);
}
/* Where the char ends, it ends blistered. The first 20% of edge-char.svg is empty,
   so the overlap into the band scales with the edge height (48px → 9.6px). */
#skin[data-skin='cornicione'] .menu-page .hero::after {
  content: '';
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  top: calc(100% - 9.6px);
  height: 48px;
  background: url(edge-char.svg) 0 0 / auto 48px repeat-x;
  pointer-events: none;
}

/* Promotions: stamped tickets. */
#skin[data-skin='cornicione'] .menu-page .promos-section { margin: 2.75rem 0 1.5rem; }
#skin[data-skin='cornicione'] .menu-page .promos-head { gap: 0.5rem; margin-bottom: 0.9rem; }
#skin[data-skin='cornicione'] .menu-page .promos-head mat-icon { color: var(--ink); }
#skin[data-skin='cornicione'] .menu-page .promos-head h2 { font-size: 1.45rem; }
#skin[data-skin='cornicione'] .menu-page .promos-count { color: var(--ink-2); font-weight: 700; }
#skin[data-skin='cornicione'] .detail-page .promos-title {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
#skin[data-skin='cornicione'] .promo-card {
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--parchment);
  box-shadow: none;
}
/* The ticket stub is char; the body is the parchment it tears from. */
#skin[data-skin='cornicione'] .promo-card-top {
  min-width: 5rem;
  padding: 0.5rem 0.65rem 0.4rem;
  background: var(--char);
  color: var(--flour);
}
#skin[data-skin='cornicione'] .promo-card-label {
  font-family: var(--display);
  font-weight: 900;
  font-size: 1.6rem;
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
#skin[data-skin='cornicione'] .promo-code {
  border: 1px dashed var(--flour-dim);
  border-radius: 2px;
  background: transparent;
  color: var(--flour);
  font-family: var(--display);
  font-size: 0.9rem;
  letter-spacing: 0.08em;
}
#skin[data-skin='cornicione'] .promo-card-name { font-weight: 700; font-size: 0.98rem; }
#skin[data-skin='cornicione'] .promo-summary { font-size: 0.82rem; color: var(--ink-2); }
#skin[data-skin='cornicione'] .promo-toggle { color: var(--ink-2); }
#skin[data-skin='cornicione'] button.promo-card-body:hover { background: var(--flour); }
#skin[data-skin='cornicione'] .promo-desc { color: var(--ink); }
#skin[data-skin='cornicione'] .cond-chip {
  border-radius: 2px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 0.8rem;
}

/* The category rail continues the char chrome; the active category is the moving edge. */
#skin[data-skin='cornicione'] .menu-page .category-bar {
  margin: 2.5rem -16px 1.25rem;
  padding: 0 8px 0 4px;
  min-height: 52px;
  background: var(--char);
  border-bottom: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
#skin[data-skin='cornicione'] .menu-page .promos-section + .category-bar { margin-top: 0; }
#skin[data-skin='cornicione'] .menu-page .bar-btn { color: var(--flour-dim); border-radius: 3px; }
#skin[data-skin='cornicione'] .menu-page .bar-btn:active { background: var(--char-2); }
#skin[data-skin='cornicione'] .menu-page .pills { gap: 1.1rem; padding: 0 1.75rem 0 2px; }
#skin[data-skin='cornicione'] .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(--flour-dim);
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
#skin[data-skin='cornicione'] .menu-page .pill.active {
  background: transparent;
  color: var(--flour);
  font-weight: 800;
  box-shadow: inset 0 -3px 0 var(--tomato);
}
#skin[data-skin='cornicione'] .menu-page .search-input {
  color: var(--flour);
  font-family: var(--body);
}
#skin[data-skin='cornicione'] .menu-page .search-input::placeholder { color: var(--flour-dim); }
#skin[data-skin='cornicione'] .menu-page .search-icon { color: var(--flour-dim); }
#skin[data-skin='cornicione'] .menu-page .search-row:focus-within { box-shadow: inset 0 -3px 0 var(--tomato); }

/* Sections sit on the hearth, separated by a rim of blisters. */
#skin[data-skin='cornicione'] .menu-page .category-section { position: relative; scroll-margin-top: 64px; }
#skin[data-skin='cornicione'] .menu-page .category-section + .category-section {
  margin-top: 2.25rem;
  padding-top: 2.5rem;
}
#skin[data-skin='cornicione'] .menu-page .category-section + .category-section::before {
  content: '';
  position: absolute;
  top: -20px;
  left: -16px;
  right: -16px;
  height: 40px;
  background: url(rim-char.svg) 37% 50% / auto 40px repeat-x;
  pointer-events: none;
}
#skin[data-skin='cornicione'] .menu-page .section-title {
  margin: 0 0 1rem;
  font-family: var(--display);
  font-weight: 850;
  font-size: clamp(2.1rem, 9vw, 2.7rem);
  line-height: 0.9;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}
#skin[data-skin='cornicione'] .menu-page .product-grid { gap: 1.75rem 0.85rem; }

/* ── Product card: photo flush, name in the oven's voice ───────────────── */

#skin[data-skin='cornicione'] .product-card {
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
#skin[data-skin='cornicione'] .product-card:hover { transform: none; box-shadow: none; }
#skin[data-skin='cornicione'] .product-card .image-box {
  aspect-ratio: 1;
  background: #E6E3DC;
}
#skin[data-skin='cornicione'] .product-card .info { padding: 0.7rem 0 0; }
#skin[data-skin='cornicione'] .product-card .title {
  margin: 0 0 0.3rem;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.42rem;
  line-height: 0.95;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--ink);
}
#skin[data-skin='cornicione'] .product-card .origin { gap: 0.3rem; margin: 0.1rem 0 0.45rem; }
#skin[data-skin='cornicione'] .product-card .origin li {
  padding: 0.26rem 0.4rem 0.22rem;
  border: 1px dashed var(--field-line);
  border-radius: 2px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.8rem;
  line-height: 1;
  letter-spacing: 0.07em;
  color: var(--ink);
}
#skin[data-skin='cornicione'] .product-card .desc {
  margin-bottom: 0.7rem;
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--ink-2);
}
#skin[data-skin='cornicione'] .product-card .price {
  font-family: var(--body);
  font-weight: 750;
  font-size: 1.02rem;
  color: var(--ink);
}
#skin[data-skin='cornicione'] .product-card .price.sale { color: var(--ink); }
#skin[data-skin='cornicione'] .product-card .price-old { color: var(--ink-2); }
#skin[data-skin='cornicione'] .product-card .add-btn {
  width: 44px;
  height: 44px;
  margin: -2px 0 -2px 0;
  border-radius: 3px;
  background: var(--char);
  color: var(--flour);
  box-shadow: none;
  transition: background-color 0.15s ease, transform 0.12s ease;
}
#skin[data-skin='cornicione'] .product-card .add-btn:hover { filter: none; background: var(--soot); }
#skin[data-skin='cornicione'] .product-card.just-added .add-btn {
  background: var(--tomato);
  color: #FFFFFF;
  animation: cornicione-blister 560ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
/* Added: one blister pops around the button, like the crust catching. */
@keyframes cornicione-blister {
  0% { box-shadow: 0 0 0 0 rgba(224, 154, 74, 0.75); }
  100% { box-shadow: 0 0 0 16px rgba(224, 154, 74, 0); }
}
#skin[data-skin='cornicione'] .product-card .open:focus-visible::after {
  outline: 2px solid var(--tomato);
  outline-offset: 3px;
}

/* Badges on the photo: char labels, not candy. */
#skin[data-skin='cornicione'] .product-card .spotlight-badges { top: 0; left: 0; gap: 0; }
#skin[data-skin='cornicione'] .product-card .spotlight-badge,
#skin[data-skin='cornicione'] .product-card .spotlight-badge.bestseller {
  gap: 0.25rem;
  padding: 0.34rem 0.45rem 0.3rem 0.35rem;
  border-radius: 0;
  box-shadow: none;
  background: var(--char);
  color: var(--flour);
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.86rem;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
#skin[data-skin='cornicione'] .product-card .spotlight-badge mat-icon { font-size: 13px; width: 13px; height: 13px; color: var(--crust); }
#skin[data-skin='cornicione'] .product-card .promo-badge {
  top: 0;
  right: 0;
  border-radius: 0;
  box-shadow: none;
  background: var(--char);
  color: var(--flour);
  font-family: var(--display);
  font-size: 0.95rem;
  letter-spacing: 0.03em;
}
#skin[data-skin='cornicione'] .product-card .diet-badge {
  border-radius: 2px;
  background: var(--parchment);
  box-shadow: none;
  color: var(--ink);
}

/* Sold out stays on the shelf, as a ghost: the slot is kept, the colour is gone. */
#skin[data-skin='cornicione'] .product-card.unavailable { opacity: 1; }
#skin[data-skin='cornicione'] .product-card.unavailable .img { filter: grayscale(1) contrast(0.8); opacity: 0.55; }
#skin[data-skin='cornicione'] .product-card.unavailable .unavailable-overlay { background: transparent; }
#skin[data-skin='cornicione'] .product-card.unavailable .unavailable-chip {
  border-radius: 2px;
  background: var(--char);
  color: var(--flour);
  font-family: var(--display);
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
#skin[data-skin='cornicione'] .product-card.unavailable .title,
#skin[data-skin='cornicione'] .product-card.unavailable .price { color: var(--ink-2); }

/* ── Product detail ────────────────────────────────────────────────────── */

#skin[data-skin='cornicione'] .detail-page { background: var(--flour); }
#skin[data-skin='cornicione'] .detail-page .hero { border-radius: 0; }
#skin[data-skin='cornicione'] .detail-page .back-btn {
  border-radius: 3px;
  background: var(--char);
  color: var(--flour);
}
#skin[data-skin='cornicione'] .detail-page .title-row h1,
#skin[data-skin='cornicione'] .detail-page h1 {
  font-size: clamp(2.3rem, 10vw, 3rem);
  line-height: 0.9;
}
#skin[data-skin='cornicione'] .detail-page .base-price {
  font-family: var(--body);
  font-weight: 750;
  color: var(--ink);
}
#skin[data-skin='cornicione'] .detail-page .spotlight-chip,
#skin[data-skin='cornicione'] .detail-page .diet-chip {
  border-radius: 2px;
  box-shadow: none;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
#skin[data-skin='cornicione'] .detail-page .spotlight-chip { background: var(--char); color: var(--flour); }
#skin[data-skin='cornicione'] .detail-page .spotlight-chip mat-icon { color: var(--crust); }
#skin[data-skin='cornicione'] .detail-page .diet-chip {
  background: transparent;
  border: 1px solid var(--field-line);
  color: var(--ink);
}
#skin[data-skin='cornicione'] .detail-page .section-label {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
}
#skin[data-skin='cornicione'] .detail-page .allergens span,
#skin[data-skin='cornicione'] .detail-page .allergens .chip,
#skin[data-skin='cornicione'] .detail-page .allergens li {
  border-radius: 2px;
  background: transparent;
  border: 1px solid var(--field-line);
  color: var(--ink);
}
#skin[data-skin='cornicione'] .detail-page .group-card {
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
#skin[data-skin='cornicione'] .detail-page .group-name {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

#skin[data-skin='cornicione'] .detail-page .promo-card { flex: 1 1 auto; width: 100%; }
#skin[data-skin='cornicione'] .detail-page .elig {
  border-radius: 2px;
  background: transparent;
  border: 1px solid currentColor;
}
#skin[data-skin='cornicione'] .detail-page .elig.met { color: var(--ink); background: transparent; }
#skin[data-skin='cornicione'] .detail-page .elig.short { color: var(--horeca-warning); background: transparent; }

/* The order action: the one red thing on screen. */
#skin[data-skin='cornicione'] .cta-bar {
  background: var(--flour);
  border-top: 1px solid var(--line);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
#skin[data-skin='cornicione'] .cta-btn,
#skin[data-skin='cornicione'] .cta-btn.mat-mdc-unelevated-button,
#skin[data-skin='cornicione'] .cta-btn.mat-mdc-unelevated-button.mat-primary {
  --mdc-filled-button-container-color: var(--tomato);
  --mdc-filled-button-label-text-color: #FFFFFF;
  border-radius: 3px;
  background: var(--tomato);
  color: #FFFFFF;
}
#skin[data-skin='cornicione'] .cta-btn .cta-label,
#skin[data-skin='cornicione'] .cta-btn .cta-amount {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.45rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
#skin[data-skin='cornicione'] .cta-btn .cta-amount { font-variant-numeric: tabular-nums; text-transform: none; }
#skin[data-skin='cornicione'] .cta-hint { color: var(--ink-2); }

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

/* ── Cart / checkout sections ──────────────────────────────────────────── */

#skin[data-skin='cornicione'] .section-card {
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--parchment);
  box-shadow: none;
}
#skin[data-skin='cornicione'] .section-card .title {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.3rem;
  line-height: 1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink);
}
#skin[data-skin='cornicione'] .section-card .summary { color: var(--horeca-on-surface-medium); }
#skin[data-skin='cornicione'] .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(--tomato);
  color: var(--horeca-on-surface-medium);
}
#skin[data-skin='cornicione'] .cart-page .mat-mdc-icon-button.mat-warn:hover,
#skin[data-skin='cornicione'] .cart-page .mat-mdc-icon-button.mat-warn:focus-visible { color: var(--tomato); }
#skin[data-skin='cornicione'] .mat-mdc-card {
  border-radius: 3px;
  box-shadow: none;
  border: 1px solid var(--line);
}

#skin[data-skin='cornicione'] .tip-title {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
#skin[data-skin='cornicione'] .tip-chip {
  min-height: 44px;
  padding: 0.5rem 0.9rem 0.42rem;
  border: 1px solid var(--field-line);
  border-radius: 3px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.12rem;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
#skin[data-skin='cornicione'] .tip-chip.selected { border-color: var(--char); }

/* ── Dark: the oven at night ───────────────────────────────────────────── */

#skin[data-skin='cornicione'][data-theme='dark'] {
  --brand-primary: var(--flour);
  --brand-on-primary: var(--char);
  --horeca-surface: #241C16;
  --horeca-surface-variant: #1B1511;
  --horeca-surface-dim: #2E241D;
  --horeca-on-surface: var(--flour);
  --horeca-on-surface-medium: var(--flour-dim);
  --horeca-on-surface-low: #A39A8E;
  --horeca-outline: var(--soot);
  --horeca-error: #FF8A7A;
  --horeca-success: var(--flour);
  --mdc-circular-progress-active-indicator-color: var(--flour);
  --horeca-warning: #E0A04A;
  --mat-app-text-color: var(--flour);
  --mdc-dialog-container-color: #241C16;
  --mat-bottom-sheet-container-background-color: #241C16;
  --mdc-elevated-card-container-color: #241C16;
  --mdc-filled-button-container-color: var(--flour);
  --mdc-filled-button-label-text-color: var(--char);
  --mdc-outlined-button-label-text-color: var(--flour);
  --mdc-text-button-label-text-color: var(--flour);
  --mdc-outlined-text-field-focus-outline-color: var(--flour);
  --mdc-outlined-text-field-focus-label-text-color: var(--flour);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  #skin[data-skin='cornicione']:not([data-theme='light']) {
    --brand-primary: var(--flour);
    --brand-on-primary: var(--char);
    --horeca-surface: #241C16;
    --horeca-surface-variant: #1B1511;
    --horeca-surface-dim: #2E241D;
    --horeca-on-surface: var(--flour);
    --horeca-on-surface-medium: var(--flour-dim);
    --horeca-on-surface-low: #A39A8E;
    --horeca-outline: var(--soot);
    --horeca-error: #FF8A7A;
    --horeca-success: var(--flour);
    --mdc-circular-progress-active-indicator-color: var(--flour);
    --horeca-warning: #E0A04A;
    --mat-app-text-color: var(--flour);
    --mdc-dialog-container-color: #241C16;
    --mat-bottom-sheet-container-background-color: #241C16;
    --mdc-elevated-card-container-color: #241C16;
    --mdc-filled-button-container-color: var(--flour);
    --mdc-filled-button-label-text-color: var(--char);
    --mdc-outlined-button-label-text-color: var(--flour);
    --mdc-text-button-label-text-color: var(--flour);
    --mdc-outlined-text-field-focus-outline-color: var(--flour);
    --mdc-outlined-text-field-focus-label-text-color: var(--flour);
    color-scheme: dark;
  }
}
#skin[data-skin='cornicione'][data-theme='dark'] body,
#skin[data-skin='cornicione'][data-theme='dark'] .mat-typography,
#skin[data-skin='cornicione'][data-theme='dark'] .page-content,
#skin[data-skin='cornicione'][data-theme='dark'] .detail-page,
#skin[data-skin='cornicione'][data-theme='dark'] .cta-bar { background: #1B1511; color: var(--flour); }
#skin[data-skin='cornicione'][data-theme='dark'] .product-card .title,
#skin[data-skin='cornicione'][data-theme='dark'] .product-card .price,
#skin[data-skin='cornicione'][data-theme='dark'] .product-card .origin li,
#skin[data-skin='cornicione'][data-theme='dark'] .section-card .title,
#skin[data-skin='cornicione'][data-theme='dark'] .detail-page .base-price,
#skin[data-skin='cornicione'][data-theme='dark'] .detail-page .section-label,
#skin[data-skin='cornicione'][data-theme='dark'] .detail-page .diet-chip { color: var(--flour); }
#skin[data-skin='cornicione'][data-theme='dark'] .product-card .desc { color: var(--flour-dim); }
#skin[data-skin='cornicione'][data-theme='dark'] .product-card.unavailable .title,
#skin[data-skin='cornicione'][data-theme='dark'] .product-card.unavailable .price,
#skin[data-skin='cornicione'][data-theme='dark'] .product-card .price-old { color: #A39A8E; }
#skin[data-skin='cornicione'][data-theme='dark'] .product-card .add-btn { background: var(--flour); color: var(--char); }
#skin[data-skin='cornicione'][data-theme='dark'] .section-card { background: #241C16; border-color: var(--soot); }
#skin[data-skin='cornicione'][data-theme='dark'] .promo-card { background: #241C16; border-color: var(--soot); }
#skin[data-skin='cornicione'][data-theme='dark'] .promo-card-name,
#skin[data-skin='cornicione'][data-theme='dark'] .menu-page .promos-head mat-icon { color: var(--flour); }
#skin[data-skin='cornicione'][data-theme='dark'] .cond-chip { border-color: var(--soot); color: var(--flour-dim); }
#skin[data-skin='cornicione'][data-theme='dark'] .promo-summary,
#skin[data-skin='cornicione'][data-theme='dark'] .promo-toggle,
#skin[data-skin='cornicione'][data-theme='dark'] .menu-page .promos-count { color: var(--flour-dim); }
#skin[data-skin='cornicione'][data-theme='dark'] .promo-desc { color: var(--flour); }
#skin[data-skin='cornicione'][data-theme='dark'] button.promo-card-body:hover { background: var(--char-2); }
/* Char blisters vanish on char: at night the rims give way to a plain hearth line. */
#skin[data-skin='cornicione'][data-theme='dark'] .menu-page .category-section + .category-section::before {
  top: 0;
  height: 1px;
  background: var(--soot);
}
#skin[data-skin='cornicione'][data-theme='dark'] .menu-page .hero::after { display: none; }
@media (prefers-color-scheme: dark) {
  #skin[data-skin='cornicione']:not([data-theme='light']) body,
  #skin[data-skin='cornicione']:not([data-theme='light']) .mat-typography,
  #skin[data-skin='cornicione']:not([data-theme='light']) .page-content,
  #skin[data-skin='cornicione']:not([data-theme='light']) .detail-page,
  #skin[data-skin='cornicione']:not([data-theme='light']) .cta-bar { background: #1B1511; color: var(--flour); }
  #skin[data-skin='cornicione']:not([data-theme='light']) .product-card .title,
  #skin[data-skin='cornicione']:not([data-theme='light']) .product-card .price,
  #skin[data-skin='cornicione']:not([data-theme='light']) .product-card .origin li,
  #skin[data-skin='cornicione']:not([data-theme='light']) .section-card .title,
  #skin[data-skin='cornicione']:not([data-theme='light']) .detail-page .base-price,
  #skin[data-skin='cornicione']:not([data-theme='light']) .detail-page .section-label,
  #skin[data-skin='cornicione']:not([data-theme='light']) .detail-page .diet-chip { color: var(--flour); }
  #skin[data-skin='cornicione']:not([data-theme='light']) .product-card .desc { color: var(--flour-dim); }
  #skin[data-skin='cornicione']:not([data-theme='light']) .product-card.unavailable .title,
  #skin[data-skin='cornicione']:not([data-theme='light']) .product-card.unavailable .price,
  #skin[data-skin='cornicione']:not([data-theme='light']) .product-card .price-old { color: #A39A8E; }
  #skin[data-skin='cornicione']:not([data-theme='light']) .product-card .add-btn { background: var(--flour); color: var(--char); }
  #skin[data-skin='cornicione']:not([data-theme='light']) .section-card { background: #241C16; border-color: var(--soot); }
  #skin[data-skin='cornicione']:not([data-theme='light']) .promo-card { background: #241C16; border-color: var(--soot); }
  #skin[data-skin='cornicione']:not([data-theme='light']) .promo-card-name,
  #skin[data-skin='cornicione']:not([data-theme='light']) .menu-page .promos-head mat-icon { color: var(--flour); }
  #skin[data-skin='cornicione']:not([data-theme='light']) .cond-chip { border-color: var(--soot); color: var(--flour-dim); }
  #skin[data-skin='cornicione']:not([data-theme='light']) .promo-summary,
  #skin[data-skin='cornicione']:not([data-theme='light']) .promo-toggle,
  #skin[data-skin='cornicione']:not([data-theme='light']) .menu-page .promos-count { color: var(--flour-dim); }
  #skin[data-skin='cornicione']:not([data-theme='light']) .promo-desc { color: var(--flour); }
  #skin[data-skin='cornicione']:not([data-theme='light']) button.promo-card-body:hover { background: var(--char-2); }
  #skin[data-skin='cornicione']:not([data-theme='light']) .menu-page .category-section + .category-section::before {
    top: 0;
    height: 1px;
    background: var(--soot);
  }
  #skin[data-skin='cornicione']:not([data-theme='light']) .menu-page .hero::after { display: none; }
}

/* ── Desktop: one axis for everything ─────────────────────────────────────── */
/* In a browser window the char bands and the blister rims still run edge to edge, but what sits in
   them — the stamp, the live state, the name and the mouth, the promotions, the categories, the
   pizzas, the tabs — shares one centred column, so header, menu and tabs read as one counter. */
@media (min-width: 900px) {
  #skin[data-skin='cornicione'] {
    --column: 72rem;
  }
  #skin[data-skin='cornicione'] .top-toolbar,
  #skin[data-skin='cornicione'] .menu-page .hero,
  #skin[data-skin='cornicione'] .menu-page .category-bar,
  #skin[data-skin='cornicione'] .menu-page .promos-section,
  #skin[data-skin='cornicione'] .menu-page .category-section {
    padding-inline: max(16px, calc((100% - var(--column)) / 2));
  }
  #skin[data-skin='cornicione'] .menu-page { padding: 0 0 2.5rem; }
  #skin[data-skin='cornicione'] .menu-page .hero,
  #skin[data-skin='cornicione'] .menu-page .category-bar { margin-inline: 0; }
  #skin[data-skin='cornicione'] .menu-page .category-section + .category-section::before { left: 0; right: 0; }
  #skin[data-skin='cornicione'] .page-content > .app-footer,
  #skin[data-skin='cornicione'] .cart-page,
  #skin[data-skin='cornicione'] .orders-page,
  #skin[data-skin='cornicione'] .offers-page,
  #skin[data-skin='cornicione'] .loyalty-page,
  #skin[data-skin='cornicione'] .profile-page,
  #skin[data-skin='cornicione'] .bill-page,
  #skin[data-skin='cornicione'] .confirm-page,
  #skin[data-skin='cornicione'] .legal-page,
  #skin[data-skin='cornicione'] .detail-page {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--column);
    margin-inline: auto;
  }
  /* The tabs sit on the same column instead of spreading across the whole window. */
  #skin[data-skin='cornicione'] .bottom-nav {
    padding-inline: max(0px, calc((100% - var(--column)) / 2));
  }
}