/* =========================================================
   SPACE MENU THEME
   BAR CENTRALE 2.2 — DEFINITIVE
   ---------------------------------------------------------
   Concept:
   - avorio / sabbia / bianco caldo
   - marrone espresso
   - architettura del locale reinterpretata nel background
   - grandi curve bianche ispirate alle arcate del soffitto
   - hero immersiva e compatta su mobile
   - avatar circolare
   - dock categorie sticky
   - prodotti chiari, editoriali e leggibili
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Montserrat:wght@400;500;600;700;800&display=swap');


/* =========================================================
   TOKENS
   ========================================================= */

body[data-theme="barcentrale"] {
  --bc-bg: #e8decd;
  --bc-bg-soft: #f2eadf;
  --bc-white: #fffdf9;
  --bc-white-soft: #f8f4ed;
  --bc-sand: #d8c7ae;
  --bc-sand-dark: #bba58a;
  --bc-espresso: #251a14;
  --bc-coffee: #4e3526;
  --bc-coffee-soft: #755a45;
  --bc-text: #241b16;
  --bc-text-soft: #594b40;
  --bc-muted: #817367;
  --bc-line: rgba(62, 45, 33, .14);
  --bc-line-dark: rgba(62, 45, 33, .25);
  --bc-shadow: 0 20px 55px rgba(67, 47, 32, .10);

  --font-heading: "Cormorant Garamond", Georgia, serif;
  --font-body: "Montserrat", Arial, sans-serif;

  --space-page-accent: var(--bc-coffee) !important;
  --space-tag-icon-color: var(--bc-coffee) !important;

  /* Product modal native empty-media fallback */
  --menu-modal-empty-bg:
    radial-gradient(circle at 22% 18%, rgba(255,255,255,.70), transparent 32%),
    radial-gradient(circle at 86% 76%, rgba(168,135,97,.16), transparent 37%),
    linear-gradient(145deg, #e6d8c2 0%, #f7f1e8 52%, #ddd0bc 100%);
  --menu-modal-empty-icon-bg: rgba(255,253,249,.68);
  --menu-modal-empty-icon-border: rgba(78,53,38,.15);
  --menu-modal-empty-icon-color: var(--bc-coffee);

  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  color: var(--bc-text) !important;
  font-family: var(--font-body) !important;

  /*
   * Le arcate sono solo background.
   * Nessun pseudo-elemento assoluto può allargare il documento.
   */
  background-color: var(--bc-bg) !important;
  background-image:

    /* alone bianco alto sinistra */
    radial-gradient(
      circle 250px at 4% 520px,
      transparent 0 62%,
      rgba(255,255,255,.34) 62.5% 70%,
      transparent 70.5%
    ),

    /* grande arcata chiara sinistra */
    radial-gradient(
      ellipse 390px 720px at -105px 1120px,
      rgba(255,255,255,.54) 0 46%,
      rgba(255,255,255,.25) 46.4% 54%,
      transparent 54.5%
    ),

    /* cerchio / volta centrale molto morbida */
    radial-gradient(
      circle 330px at 88% 1680px,
      transparent 0 61%,
      rgba(255,255,255,.27) 61.5% 69%,
      transparent 69.5%
    ),

    /* grande arcata destra */
    radial-gradient(
      ellipse 470px 800px at calc(100% + 150px) 2280px,
      rgba(255,255,255,.42) 0 47%,
      rgba(255,255,255,.18) 47.4% 55%,
      transparent 55.5%
    ),

    /* arco chiaro più in basso */
    radial-gradient(
      ellipse 500px 850px at -155px 3520px,
      rgba(255,255,255,.36) 0 48%,
      rgba(255,255,255,.14) 48.5% 56%,
      transparent 56.5%
    ),

    /* piccolo alone caldo/bianco */
    radial-gradient(
      circle 290px at 92% 4300px,
      transparent 0 63%,
      rgba(255,255,255,.22) 63.5% 70%,
      transparent 70.5%
    ),

    /* luce ambiente superiore */
    radial-gradient(
      circle at -8% 2%,
      rgba(255,255,255,.98) 0,
      rgba(255,255,255,.72) 15rem,
      transparent 31rem
    ),

    radial-gradient(
      circle at 94% -8%,
      rgba(255,255,255,.90) 0,
      rgba(255,255,255,.48) 15rem,
      transparent 31rem
    ),

    /* calore sabbia */
    radial-gradient(
      circle at 100% 56%,
      rgba(190,164,128,.18),
      transparent 29rem
    ),

    /* trama leggerissima */
    repeating-linear-gradient(
      0deg,
      rgba(72,53,38,.014) 0 1px,
      transparent 1px 4px
    ) !important;

  background-attachment: fixed !important;
  -webkit-font-smoothing: antialiased !important;
  text-rendering: optimizeLegibility !important;
}


/* =========================================================
   GLOBAL
   ========================================================= */

body[data-theme="barcentrale"] * {
  box-sizing: border-box !important;
}

body[data-theme="barcentrale"] a {
  color: inherit !important;
}

body[data-theme="barcentrale"] button,
body[data-theme="barcentrale"] input,
body[data-theme="barcentrale"] select,
body[data-theme="barcentrale"] textarea {
  font-family: var(--font-body) !important;
}

body[data-theme="barcentrale"] svg.menu-tag-icon {
  color: var(--space-tag-icon-color, #4e3526) !important;
}


/* =========================================================
   PAGE
   ========================================================= */

body[data-theme="barcentrale"] .wrap {
  position: relative !important;
  z-index: 1 !important;

  width: 100% !important;
  max-width: 650px !important;

  margin: 0 auto !important;
  padding: 0 16px 36px !important;

  /*
   * Sticky richiede che gli antenati non creino
   * un contenitore di scroll/clipping.
   */
  overflow: visible !important;
  transform: none !important;
  contain: none !important;
  isolation: auto !important;
}


/* Nessuna vecchia geometria assoluta. */
body[data-theme="barcentrale"] .wrap::before,
body[data-theme="barcentrale"] .wrap::after,
body[data-theme="barcentrale"] .section::before {
  content: none !important;
  display: none !important;
}

/* =========================================================
   MINI HEADER
   ========================================================= */

body[data-theme="barcentrale"] .miniHeader {
  position:
    fixed !important;

  top:
    calc(
      env(safe-area-inset-top) + 12px
    ) !important;

  left:
    0 !important;

  right:
    0 !important;

  z-index:
    1000 !important;

  pointer-events:
    none !important;
}

body[data-theme="barcentrale"] .miniInner {
  width:
    min(
      606px,
      calc(100% - 26px)
    ) !important;

  min-height:
    64px !important;

  margin:
    0 auto !important;

  padding:
    8px 11px !important;

  border:
    1px solid
    rgba(79,57,40,.13) !important;

  border-radius:
    999px !important;

  background:
    rgba(255,253,249,.94) !important;

  color:
    var(--bc-text) !important;

  box-shadow:
    0 10px 34px
    rgba(64,45,31,.10) !important;

  backdrop-filter:
    blur(16px)
    saturate(105%) !important;

  -webkit-backdrop-filter:
    blur(16px)
    saturate(105%) !important;

  pointer-events:
    auto !important;
}

body[data-theme="barcentrale"] .miniInner {
  pointer-events: none !important;
}

body[data-theme="barcentrale"].hasMiniHeader .miniHeader,
body[data-theme="barcentrale"].hasMiniHeader .miniInner {
  pointer-events: auto !important;
}

body[data-theme="barcentrale"] .miniLogo {
  width:
    43px !important;

  height:
    43px !important;

  min-width:
    43px !important;

  overflow:
    hidden !important;

  border:
    1px solid
    rgba(68,48,34,.16) !important;

  border-radius:
    50% !important;

  background:
    #fff !important;

  box-shadow:
    0 3px 9px
    rgba(47,33,23,.08) !important;
}

body[data-theme="barcentrale"] .miniLogo img {
  width:
    100% !important;

  height:
    100% !important;

  object-fit:
    cover !important;

  border-radius:
    50% !important;
}

body[data-theme="barcentrale"] .miniTitle b {
  color:
    var(--bc-espresso) !important;

  font-family:
    var(--font-heading) !important;

  font-size:
    1.2rem !important;

  font-weight:
    700 !important;

  line-height:
    .93 !important;

  letter-spacing:
    .06em !important;

  text-transform:
    uppercase !important;
}

body[data-theme="barcentrale"] .miniTitle span {
  margin-top:
    4px !important;

  color:
    var(--bc-coffee-soft) !important;

  font-size:
    .61rem !important;

  font-weight:
    800 !important;

  letter-spacing:
    .17em !important;

  text-transform:
    uppercase !important;
}

body[data-theme="barcentrale"] .miniPill {
  min-width:
    65px !important;

  min-height:
    42px !important;

  padding:
    9px 14px !important;

  border:
    0 !important;

  border-radius:
    999px !important;

  background:
    var(--bc-espresso) !important;

  color:
    #fff8ee !important;

  box-shadow:
    none !important;

  font-size:
    .72rem !important;

  font-weight:
    800 !important;
}

body[data-theme="barcentrale"] .miniDot {
  background:
    #d5b486 !important;
}


/* =========================================================
   LANGUAGE
   ========================================================= */

body[data-theme="barcentrale"] .langTrigger {
  border:
    1px solid
    rgba(68,48,34,.15) !important;

  border-radius:
    999px !important;

  background:
    rgba(255,253,249,.94) !important;

  color:
    var(--bc-text) !important;

  box-shadow:
    0 8px 22px
    rgba(55,39,28,.08) !important;
}

body[data-theme="barcentrale"] .langFlag {
  background:
    rgba(232,222,205,.60) !important;
}

body[data-theme="barcentrale"] .langTriggerText strong,
body[data-theme="barcentrale"] .langChevron {
  color:
    var(--bc-espresso) !important;
}

body[data-theme="barcentrale"] .langTriggerText small {
  color:
    var(--bc-muted) !important;
}

body[data-theme="barcentrale"] .langDropdown {
  border:
    1px solid
    rgba(68,48,34,.12) !important;

  border-radius:
    20px !important;

  background:
    rgba(255,253,249,.985) !important;

  box-shadow:
    0 24px 50px
    rgba(55,39,28,.14) !important;
}

body[data-theme="barcentrale"] .langOption {
  color:
    var(--bc-text) !important;
}

body[data-theme="barcentrale"] .langOption:hover,
body[data-theme="barcentrale"] .langOption.is-active {
  background:
    rgba(221,205,181,.28) !important;
}

body[data-theme="barcentrale"] .langCheck {
  color:
    var(--bc-coffee) !important;
}

body[data-theme="barcentrale"] .langBar {
  z-index: 1100 !important;
  pointer-events: auto !important;
}

body[data-theme="barcentrale"] .langMenu,
body[data-theme="barcentrale"] .langTrigger {
  pointer-events: auto !important;
}

.langOptionText small {
    color: var(--bc-text) !important;
}

.langOptionText strong {
    color: var(--bc-text) !important;
}

/* =========================================================
   HERO
   ========================================================= */

body[data-theme="barcentrale"] .hero {
  position: relative !important;

  /*
   * La hero è un elemento top-level, NON è dentro .wrap.
   * Quindi niente calc(100% + padding), margini negativi o
   * translate usati per simulare il full-bleed.
   */
  width: min(820px, 100%) !important;
  max-width: 100% !important;

  margin: 0 auto 0px !important;
  padding: 0 !important;

  left: auto !important;
  right: auto !important;
  transform: none !important;

  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body[data-theme="barcentrale"] .cover {
  position: relative !important;
  width: 100% !important;
  min-height: 450px !important;
  overflow: hidden !important;

  border: 0 !important;
  border-radius: 0 0 62px 62px !important;

  background: var(--bc-coffee) !important;
  box-shadow: 0 28px 64px rgba(59,42,29,.15) !important;
}

body[data-theme="barcentrale"] .coverMedia {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
}

body[data-theme="barcentrale"] .coverMedia img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;

  object-fit: cover !important;
  object-position: center !important;

  filter:
    saturate(.78)
    contrast(.94)
    brightness(.85)
    sepia(.035) !important;

  transform: scale(1.01) !important;
}

body[data-theme="barcentrale"] .cover::before,
body[data-theme="barcentrale"] .cover::after {
  content: none !important;
  display: none !important;
}

body[data-theme="barcentrale"] .coverOverlay {
  background:
    linear-gradient(
      180deg,
      rgba(30,20,14,.03) 0%,
      rgba(30,20,14,.07) 32%,
      rgba(30,20,14,.30) 62%,
      rgba(30,20,14,.91) 100%
    ) !important;
}

body[data-theme="barcentrale"] .coverBottom {
  position: absolute !important;
  z-index: 5 !important;

  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;

  width: 100% !important;
  padding: 44px 30px 32px !important;
}

body[data-theme="barcentrale"] .brandBadge {
  display: flex !important;
  align-items: center !important;
  gap: 17px !important;

  width: 100% !important;
  max-width: none !important;

  padding: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;

  background: transparent !important;
  box-shadow: none !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body[data-theme="barcentrale"] .logo {
  width: 88px !important;
  height: 88px !important;
  min-width: 88px !important;
  flex: 0 0 88px !important;

  padding: 5px !important;
  overflow: hidden !important;

  border: 4px solid rgba(255,250,240,.96) !important;
  border-radius: 50% !important;

  background: #fff !important;
  box-shadow: 0 11px 26px rgba(0,0,0,.20) !important;
}

body[data-theme="barcentrale"] .logo img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;

  object-fit: cover !important;
  border-radius: 50% !important;
}

body[data-theme="barcentrale"] .brandText {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

body[data-theme="barcentrale"] .brandText h1 {
  max-width: 100% !important;
  margin: 0 !important;

  color: #fffaf0 !important;
  font-family: var(--font-heading) !important;

  font-size: clamp(3.1rem, 8vw, 5.1rem) !important;
  font-weight: 600 !important;
  line-height: .72 !important;
  letter-spacing: -.025em !important;
  text-transform: uppercase !important;

  text-shadow: 0 5px 25px rgba(0,0,0,.28) !important;
}

body[data-theme="barcentrale"] .brandText p {
  margin: 14px 0 0 !important;

  color: rgba(255,248,237,.78) !important;

  font-size: .68rem !important;
  font-weight: 800 !important;
  letter-spacing: .20em !important;
  text-transform: uppercase !important;
}

body[data-theme="barcentrale"] .coverChargeBox {
  width: fit-content !important;
  max-width: 100% !important;

  margin-top: 15px !important;
  padding: 8px 13px !important;

  border: 1px solid rgba(255,250,240,.28) !important;
  border-radius: 999px !important;

  background: rgba(255,255,255,.11) !important;
  color: #fffaf0 !important;

  box-shadow: none !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body[data-theme="barcentrale"] .coverChargeMain {
  color: #fffaf0 !important;
}

/* =========================================================
   DOCK / CATEGORIE
   Sticky reale dentro .wrap.
   ========================================================= */

body[data-theme="barcentrale"] .dock,
body[data-theme="barcentrale"] #dock {
  position: -webkit-sticky !important;
  position: sticky !important;

  /*
   * Mini header: ~64px + respiro.
   * Resta sotto l'header quando questo compare durante lo scroll.
   */
  top: calc(env(safe-area-inset-top, 0px) + 78px) !important;

  z-index: 850 !important;

  width: 100% !important;
  max-width: 100% !important;

  margin: 0 0 34px !important;
  padding: 8px !important;

  overflow: visible !important;

  border: 1px solid rgba(67,48,34,.12) !important;
  border-radius: 21px !important;

  background: rgba(255,253,249,.94) !important;

  box-shadow:
    0 13px 38px rgba(63,44,31,.09),
    inset 0 1px 0 rgba(255,255,255,.68) !important;

  backdrop-filter: blur(16px) saturate(105%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(105%) !important;

  transform: none !important;
  contain: none !important;
}

body[data-theme="barcentrale"] .tabRow,
body[data-theme="barcentrale"] #tabs {
  display: flex !important;

  width: 100% !important;
  max-width: 100% !important;

  gap: 2px !important;
  padding: 2px !important;

  overflow-x: auto !important;
  overflow-y: hidden !important;

  overscroll-behavior-x: contain !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
}

body[data-theme="barcentrale"] .tabRow::-webkit-scrollbar,
body[data-theme="barcentrale"] #tabs::-webkit-scrollbar {
  display: none !important;
}

body[data-theme="barcentrale"] .tab {
  position: relative !important;
  flex: 0 0 auto !important;

  min-height: 42px !important;
  max-width: none !important;

  padding: 9px 13px !important;

  border: 0 !important;
  border-radius: 999px !important;

  background: transparent !important;
  color: #817366 !important;

  box-shadow: none !important;

  font-size: .67rem !important;
  font-weight: 800 !important;
  letter-spacing: .075em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

body[data-theme="barcentrale"] .tab:hover {
  background: rgba(229,216,197,.32) !important;
}

body[data-theme="barcentrale"] .tab.is-active {
  border: 0 !important;
  background: var(--bc-espresso) !important;
  color: #fffaf2 !important;
  box-shadow: none !important;
}

body[data-theme="barcentrale"] #dock .tabSearchToggle.is-search-open {
  background: rgba(117,90,69,.11) !important;
  color: var(--bc-espresso) !important;
}

body[data-theme="barcentrale"] #dock .searchRow {
  width: 100% !important;
  max-width: 100% !important;
}

body[data-theme="barcentrale"] .search {
  display: block !important;

  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;

  min-height: 44px !important;

  margin-top: 7px !important;
  padding: 0 16px !important;

  border: 1px solid rgba(70,50,36,.11) !important;
  border-radius: 999px !important;

  background: var(--bc-white-soft) !important;
  color: var(--bc-text) !important;

  box-shadow: none !important;
}

body[data-theme="barcentrale"] .search::placeholder {
  color: #9b8e82 !important;
}

body[data-theme="barcentrale"] .search:focus {
  outline: none !important;
  border-color: rgba(78,53,38,.35) !important;
  box-shadow: 0 0 0 4px rgba(78,53,38,.05) !important;
}

/* =========================================================
   SECTION HEADERS
   ========================================================= */

body[data-theme="barcentrale"] .section {
  position: relative !important;
  z-index: 1 !important;

  width: 100% !important;
  max-width: 100% !important;

  margin-top: 38px !important;

  transform: none !important;
  isolation: auto !important;
}

body[data-theme="barcentrale"] .section.is-in,
body[data-theme="barcentrale"] .section.secWrap {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

body[data-theme="barcentrale"] .sectionHead {
  position: relative !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;

  width: 100% !important;
  max-width: 100% !important;

  min-height: 76px !important;

  margin: 0 0 10px !important;
  padding: 10px 62px 13px 2px !important;

  border: 0 !important;
  border-left: none !important;
  border-top: 1px solid var(--bc-line-dark) !important;
  border-bottom: 1px solid var(--bc-line) !important;

  background: transparent !important;
  overflow: hidden !important;
}

body[data-theme="barcentrale"] .sectionHead::before {
  content: none !important;
  display: none !important;
}

body[data-theme="barcentrale"] .sectionHead::after {
  content: "" !important;

  position: absolute !important;
  right: 2px !important;
  bottom: 15px !important;

  width: 52px !important;
  height: 3px !important;

  background: var(--bc-coffee) !important;
  opacity: .52 !important;
}

body[data-theme="barcentrale"] .sectionHead b {
  display: block !important;

  max-width: 100% !important;

  color: var(--bc-espresso) !important;
  font-family: var(--font-heading) !important;

  font-size: clamp(2.5rem, 7vw, 3.55rem) !important;
  font-weight: 600 !important;
  line-height: .82 !important;
  letter-spacing: -.03em !important;
  text-transform: uppercase !important;
}

body[data-theme="barcentrale"] .sectionHead small {
  margin-top: 7px !important;

  color: var(--bc-muted) !important;

  font-size: .68rem !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
}


/* =========================================================
   PRODUCTS
   Markup reale:
   .item.menu-item
     .itemContent
       .thumb
       .itemMain > .itemTop
     .itemMeta
   ========================================================= */

body[data-theme="barcentrale"] .item.menu-item {
  position: relative !important;

  display: flex !important;
  flex-direction: column !important;

  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;

  min-height: 104px !important;

  margin: 0 0 10px !important;
  padding: 12px !important;

  overflow: hidden !important;

  border: 1px solid rgba(74,53,37,.10) !important;
  border-radius: 22px !important;

  background: rgba(255,253,249,.76) !important;

  box-shadow: 0 5px 18px rgba(60,43,30,.035) !important;

  transform: none !important;

  transition:
    background .18s ease,
    border-color .18s ease,
    box-shadow .18s ease !important;
}

body[data-theme="barcentrale"] .item.menu-item:hover {
  border-color: rgba(74,53,37,.16) !important;
  background: rgba(255,255,255,.91) !important;
  box-shadow: 0 12px 28px rgba(60,43,30,.07) !important;
  transform: none !important;
}

body[data-theme="barcentrale"] .item.menu-item > .itemContent {
  display: flex !important;
  align-items: stretch !important;

  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;

  gap: 15px !important;
}

body[data-theme="barcentrale"] .thumb {
  position: relative !important;

  width: 96px !important;
  height: 96px !important;
  min-width: 96px !important;

  flex: 0 0 96px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  overflow: hidden !important;

  border: 1px solid rgba(67,48,34,.10) !important;
  border-radius: 17px !important;

  background: #eee4d4 !important;
  color: var(--bc-coffee) !important;

  box-shadow: none !important;

  font-family: var(--font-heading) !important;
  font-size: 1.2rem !important;
}

body[data-theme="barcentrale"] .thumb::before,
body[data-theme="barcentrale"] .thumb::after {
  content: none !important;
  display: none !important;
}

body[data-theme="barcentrale"] .thumb img {
  display: block !important;

  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;

  object-fit: cover !important;

  border-radius: 16px !important;

  filter:
    saturate(.86)
    contrast(.97) !important;

  transition: transform .35s ease !important;
}

body[data-theme="barcentrale"] .item.menu-item:hover .thumb img {
  transform: scale(1.04) !important;
}

/* Nessuna foto: card testuale pulita, niente finto thumbnail. */
body[data-theme="barcentrale"]
.item.menu-item:not(:has(.thumb img[src])) .thumb {
  display: none !important;
}

body[data-theme="barcentrale"]
.item.menu-item:not(:has(.thumb img[src])) > .itemContent {
  gap: 0 !important;
}

body[data-theme="barcentrale"] .itemMain {
  flex: 1 1 auto !important;

  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

body[data-theme="barcentrale"] .itemTop {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;

  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;

  gap: 12px !important;
}

body[data-theme="barcentrale"] .itemTop > div:first-child {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

body[data-theme="barcentrale"] .itemTop > div:last-child {
  flex: 0 0 auto !important;
  min-width: 0 !important;
}

body[data-theme="barcentrale"] .name {
  min-width: 0 !important;
  margin: 0 !important;

  color: var(--bc-espresso) !important;
  font-family: var(--font-heading) !important;

  font-size: clamp(1.42rem, 4vw, 1.72rem) !important;
  font-weight: 700 !important;
  line-height: .99 !important;
  letter-spacing: .003em !important;

  overflow-wrap: anywhere !important;
}

body[data-theme="barcentrale"] .desc {
  margin-top: 7px !important;

  color: var(--bc-muted) !important;

  font-size: .75rem !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
}

body[data-theme="barcentrale"] .price {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-width: 64px !important;
  max-width: 100% !important;

  padding: 8px 11px !important;

  border: 1px solid rgba(78,53,38,.17) !important;
  border-radius: 999px !important;

  background: #fff !important;
  color: var(--bc-coffee) !important;

  box-shadow: none !important;

  font-family: var(--font-heading) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;

  white-space: nowrap !important;
}

body[data-theme="barcentrale"] .meta,
body[data-theme="barcentrale"] .itemMeta {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;

  color: var(--bc-text-soft) !important;
}

body[data-theme="barcentrale"] .itemMeta {
  margin-top: 10px !important;
  padding-top: 9px !important;

  border-top-color: rgba(78,53,38,.13) !important;
}

body[data-theme="barcentrale"] .itemMetaGroup--allergens {
  border-top-color: rgba(78,53,38,.15) !important;
}

body[data-theme="barcentrale"] .chip {
  min-height: 25px !important;

  padding: 5px 9px !important;

  border: 1px solid rgba(78,53,38,.10) !important;
  border-radius: 999px !important;

  background: #fff !important;
  color: var(--bc-text-soft) !important;

  box-shadow: none !important;

  font-size: .61rem !important;
  font-weight: 700 !important;
}

body[data-theme="barcentrale"] .soldout,
body[data-theme="barcentrale"] .item-disabled {
  opacity: .48 !important;
}

/* =========================================================
   PRODUCT MODAL
   ========================================================= */

body[data-theme="barcentrale"] .menuModalBackdrop {
  background:
    rgba(34,24,17,.48) !important;

  backdrop-filter:
    blur(8px) !important;

  -webkit-backdrop-filter:
    blur(8px) !important;
}

body[data-theme="barcentrale"] .menuModalPanel {
  overflow:
    hidden !important;

  border:
    1px solid
    rgba(64,45,31,.14) !important;

  border-radius:
    28px !important;

  background:
    var(--bc-white-soft) !important;

  color:
    var(--bc-text) !important;

  box-shadow:
    0 32px 85px
    rgba(37,26,18,.25) !important;
}

body[data-theme="barcentrale"] .menuModalHero {
  min-height:
    350px !important;

  background:
    linear-gradient(
      145deg,
      #e4d6c1,
      #f7f2e9
    ) !important;
}

body[data-theme="barcentrale"] .menuModalHero img {
  filter:
    saturate(.82)
    brightness(.92) !important;
}

body[data-theme="barcentrale"] .menuModalHeroOverlay {
  background:
    linear-gradient(
      180deg,
      rgba(31,21,15,.01),
      rgba(31,21,15,.14) 48%,
      rgba(31,21,15,.83)
    ) !important;
}

body[data-theme="barcentrale"] .menuModalTitle {
  color:
    #fffaf0 !important;

  font-family:
    var(--font-heading) !important;

  font-size:
    clamp(
      2.4rem,
      8vw,
      3.5rem
    ) !important;

  font-weight:
    600 !important;

  line-height:
    .83 !important;

  text-transform:
    uppercase !important;
}

body[data-theme="barcentrale"] .menuModalPrice {
  color:
    #fffaf0 !important;

  font-family:
    var(--font-heading) !important;
}

body[data-theme="barcentrale"] .menuModalContent {
  background:
    var(--bc-white-soft) !important;

  color:
    var(--bc-text) !important;
}

body[data-theme="barcentrale"] .menuModalDesc {
  color:
    var(--bc-muted) !important;

  border-left:
    2px solid
    var(--bc-sand-dark) !important;
}

body[data-theme="barcentrale"] .menuModalGroup {
  border:
    1px solid
    rgba(65,46,32,.10) !important;

  border-radius:
    16px !important;

  background:
    #fff !important;
}

body[data-theme="barcentrale"] .menuModalGroupHead {
  border-bottom-color:
    var(--bc-line) !important;

  background:
    #f1e8dc !important;
}

body[data-theme="barcentrale"] .menuModalGroupHead b,
body[data-theme="barcentrale"] .menuModalOptionName {
  color:
    var(--bc-text) !important;
}

body[data-theme="barcentrale"] .menuModalOptionPrice {
  color:
    var(--bc-coffee) !important;
}

body[data-theme="barcentrale"] .menuModalClose {
  width:
    42px !important;

  height:
    42px !important;

  border:
    1px solid
    rgba(61,43,30,.12) !important;

  border-radius:
    50% !important;

  background:
    rgba(255,255,255,.94) !important;

  color:
    var(--bc-espresso) !important;

  box-shadow:
    0 7px 18px
    rgba(0,0,0,.10) !important;
}


/* =========================================================
   RESERVATION
   ========================================================= */

body[data-theme="barcentrale"] .reservationBackdrop {
  background:
    rgba(34,24,17,.48) !important;

  backdrop-filter:
    blur(8px) !important;

  -webkit-backdrop-filter:
    blur(8px) !important;
}

body[data-theme="barcentrale"] .reservationPanel {
  border:
    1px solid
    rgba(64,45,31,.13) !important;

  border-radius:
    28px !important;

  background:
    var(--bc-white-soft) !important;

  color:
    var(--bc-text) !important;

  box-shadow:
    0 32px 85px
    rgba(37,26,18,.23) !important;
}

body[data-theme="barcentrale"] .reservationPanelHead h2,
body[data-theme="barcentrale"] #reservationTitle {
  color:
    var(--bc-espresso) !important;

  font-family:
    var(--font-heading) !important;

  font-size:
    clamp(
      2.3rem,
      8vw,
      3.1rem
    ) !important;

  font-weight:
    600 !important;

  text-transform:
    uppercase !important;
}

body[data-theme="barcentrale"] .reservationSubtitle,
body[data-theme="barcentrale"] .reservationHint {
  color:
    var(--bc-muted) !important;
}

body[data-theme="barcentrale"] .reservationField label {
  color:
    var(--bc-text-soft) !important;
}

body[data-theme="barcentrale"] .reservationField input,
body[data-theme="barcentrale"] .reservationField select,
body[data-theme="barcentrale"] .reservationField textarea {
  border:
    1px solid
    rgba(65,46,32,.12) !important;

  border-radius:
    14px !important;

  background:
    #fff !important;

  color:
    var(--bc-text) !important;

  box-shadow:
    none !important;
}

body[data-theme="barcentrale"] .reservationSlot {
  border:
    1px solid
    rgba(65,46,32,.14) !important;

  border-radius:
    999px !important;

  background:
    #fff !important;

  color:
    var(--bc-text) !important;
}

body[data-theme="barcentrale"]
.reservationSlot.is-selected {
  border-color:
    var(--bc-espresso) !important;

  background:
    var(--bc-espresso) !important;

  color:
    #fff !important;
}

body[data-theme="barcentrale"] #r_submit,
body[data-theme="barcentrale"] .reservationSubmit {
  border:
    0 !important;

  border-radius:
    999px !important;

  background:
    var(--bc-espresso) !important;

  color:
    #fff !important;
}

body[data-theme="barcentrale"] #reservationClose {
  background:
    #efe5d8 !important;

  color:
    var(--bc-text) !important;
}


/* =========================================================
   BOTTOM APP BAR
   ========================================================= */

body[data-theme="barcentrale"] .menuAppBar {
  border:
    1px solid
    rgba(66,47,33,.13) !important;

  border-radius:
    999px !important;

  background:
    rgba(255,253,249,.95) !important;

  box-shadow:
    0 17px 38px
    rgba(51,36,25,.14) !important;

  backdrop-filter:
    blur(18px) !important;

  -webkit-backdrop-filter:
    blur(18px) !important;
}

body[data-theme="barcentrale"] .menuAppBarBtn,
body[data-theme="barcentrale"] #appBarCallBtn {
  color:
    var(--bc-text-soft) !important;
}

body[data-theme="barcentrale"]
.menuAppBarBtn:hover {
  background:
    rgba(226,211,190,.25) !important;
}

body[data-theme="barcentrale"]
.menuAppBarBtn.is-primary,
body[data-theme="barcentrale"]
.menuAppBarBtn.is-accent {
  border:
    0 !important;

  background:
    var(--bc-espresso) !important;

  color:
    #fff !important;
}


/* =========================================================
   INFO
   ========================================================= */

body[data-theme="barcentrale"]
.menuInfoModalBackdrop {
  background:
    rgba(34,24,17,.50) !important;
}

body[data-theme="barcentrale"]
.menuInfoModalPanel {
  border:
    1px solid
    rgba(64,45,31,.13) !important;

  border-radius:
    28px !important;

  background:
    var(--bc-white-soft) !important;

  color:
    var(--bc-text) !important;
}

body[data-theme="barcentrale"]
.menuInfoModalKicker {
  color:
    var(--bc-coffee) !important;
}

body[data-theme="barcentrale"]
.menuInfoModalTitle,
body[data-theme="barcentrale"]
.menuInfoCardValue {
  color:
    var(--bc-text) !important;
}

body[data-theme="barcentrale"]
.menuInfoModalSub,
body[data-theme="barcentrale"]
.menuInfoMini {
  color:
    var(--bc-muted) !important;
}

body[data-theme="barcentrale"]
.menuInfoCard {
  border:
    1px solid
    rgba(65,46,32,.09) !important;

  border-radius:
    16px !important;

  background:
    #fff !important;
}

body[data-theme="barcentrale"]
.menuInfoLink,
body[data-theme="barcentrale"]
.menuInfoLinkBtn {
  border:
    1px solid
    rgba(78,53,38,.12) !important;

  border-radius:
    999px !important;

  background:
    #efe5d8 !important;

  color:
    var(--bc-coffee) !important;
}


/* =========================================================
   LOADER
   ========================================================= */

body[data-theme="barcentrale"]
.spacePageLoader {
  background:
    radial-gradient(
      circle at 18% 14%,
      rgba(255,255,255,.85),
      transparent 35%
    ),
    radial-gradient(
      circle at 82% 76%,
      rgba(187,165,138,.17),
      transparent 40%
    ),
    var(--bc-bg) !important;

  color:
    var(--bc-text) !important;
}

body[data-theme="barcentrale"]
.spacePageLoader::before {
  opacity:
    .10 !important;
}

body[data-theme="barcentrale"]
.spacePageLoaderCard {
  border:
    1px solid
    rgba(64,45,31,.11) !important;

  border-radius:
    28px !important;

  background:
    var(--bc-white) !important;

  color:
    var(--bc-text) !important;

  box-shadow:
    0 28px 65px
    rgba(62,44,30,.12) !important;
}

body[data-theme="barcentrale"]
.spacePageLoaderText strong {
  color:
    var(--bc-text) !important;
}

body[data-theme="barcentrale"]
.spacePageLoaderText span {
  color:
    var(--bc-muted) !important;
}

body[data-theme="barcentrale"]
.spacePageLoaderLogo {
  border-color:
    rgba(64,45,31,.13) !important;

  background:
    #fff !important;
}

body[data-theme="barcentrale"]
.spacePageLoaderBar {
  background:
    rgba(78,53,38,.08) !important;
}

body[data-theme="barcentrale"]
.spacePageLoaderBar i {
  background:
    linear-gradient(
      90deg,
      transparent,
      var(--bc-coffee),
      #c3a47b,
      var(--bc-coffee),
      transparent
    ) !important;

  box-shadow:
    none !important;
}


/* =========================================================
   FOOTER
   ========================================================= */

body[data-theme="barcentrale"]
.space-public-footer {
  border-top-color:
    rgba(255,255,255,.10) !important;

  background:
    var(--bc-espresso) !important;
}

/* Bar Centrale skin for the native empty-media placeholder. */
body[data-theme="barcentrale"] .menuModalPlaceholder {
  color: var(--bc-coffee) !important;
}

body[data-theme="barcentrale"] .menuModalPlaceholder::before,
body[data-theme="barcentrale"] .menuModalPlaceholder::after {
  border-color: rgba(78,53,38,.09) !important;
}

body[data-theme="barcentrale"] .menuModalPlaceholderIcon {
  background: rgba(255,253,249,.68) !important;
  border-color: rgba(78,53,38,.15) !important;
  color: var(--bc-coffee) !important;
  box-shadow:
    0 18px 44px rgba(78,53,38,.08),
    inset 0 1px 0 rgba(255,255,255,.72) !important;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 620px) {

  body[data-theme="barcentrale"] {
    /*
     * background-attachment: fixed è pesante e poco affidabile
     * sui browser mobile.
     */
    background-attachment: scroll !important;
  }

  body[data-theme="barcentrale"] .wrap {
    width: 100% !important;
    max-width: 100% !important;

    margin: 0 auto !important;
    padding: 0 12px 34px !important;

    overflow: visible !important;
    transform: none !important;
    contain: none !important;
  }


  /* Hero top-level: nessun margine negativo, nessun calc > 100%. */
  body[data-theme="barcentrale"] .hero {
    width: 100% !important;
    max-width: 100% !important;

    margin: 0 0 0px !important;

    left: auto !important;
    right: auto !important;
    transform: none !important;

    overflow: visible !important;
  }

  body[data-theme="barcentrale"] .cover {
    width: 100% !important;
    min-height: 0 !important;
    height: 320px !important;

    margin: 0 !important;

    border-radius: 0 0 40px 40px !important;
  }

  body[data-theme="barcentrale"] .coverMedia,
  body[data-theme="barcentrale"] .coverMedia img {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
  }

  body[data-theme="barcentrale"] .coverMedia img {
    object-fit: cover !important;
    object-position: center 49% !important;
    transform: none !important;
  }

  body[data-theme="barcentrale"] .coverBottom {
    width: 100% !important;
    padding: 54px 18px 22px !important;
  }

  body[data-theme="barcentrale"] .brandBadge {
    width: 100% !important;
    max-width: 100% !important;

    gap: 11px !important;
    overflow: visible !important;
  }

  body[data-theme="barcentrale"] .logo {
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    flex-basis: 58px !important;

    padding: 3px !important;
    border-width: 3px !important;
  }

  body[data-theme="barcentrale"] .brandText {
    min-width: 0 !important;
    max-width: calc(100% - 69px) !important;
    overflow: hidden !important;
  }

  body[data-theme="barcentrale"] .brandText h1 {
    max-width: 100% !important;

    font-size: clamp(2rem, 10vw, 2.8rem) !important;
    line-height: .77 !important;

    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  body[data-theme="barcentrale"] .brandText p {
    margin-top: 8px !important;
    font-size: .59rem !important;
    letter-spacing: .17em !important;
  }

  body[data-theme="barcentrale"] .coverTop {
    top: 14px !important;
    right: 14px !important;
    max-width: calc(100% - 28px) !important;
  }

  body[data-theme="barcentrale"] .langTrigger {
    max-width: 100% !important;
  }


  /* Sticky dock. */
  body[data-theme="barcentrale"] .dock,
  body[data-theme="barcentrale"] #dock {
    position: -webkit-sticky !important;
    position: sticky !important;

    top: calc(env(safe-area-inset-top, 0px) + 78px) !important;

    z-index: 850 !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 0 28px !important;
    padding: 7px !important;

    overflow: visible !important;

    border-radius: 18px !important;
  }

  body[data-theme="barcentrale"] .tab {
    min-height: 38px !important;

    padding: 7px 10px !important;

    font-size: .60rem !important;
  }

  body[data-theme="barcentrale"] #dock .searchRow {
    padding: 5px 2px 2px !important;
  }

  body[data-theme="barcentrale"] .search {
    min-height: 40px !important;
    margin: 0 !important;
  }


  /* Sections. */
  body[data-theme="barcentrale"] .section {
    width: 100% !important;
    max-width: 100% !important;

    margin-top: 30px !important;
  }

  body[data-theme="barcentrale"] .sectionHead {
    min-height: 59px !important;

    margin: 0 0 8px !important;
    padding: 8px 50px 10px 0 !important;
  }

  body[data-theme="barcentrale"] .sectionHead::after {
    width: 42px !important;
    bottom: 12px !important;
  }

  body[data-theme="barcentrale"] .sectionHead b {
    max-width: 100% !important;

    font-size: clamp(1.95rem, 9vw, 2.6rem) !important;

    white-space: normal !important;
  }


  /* Products. */
  body[data-theme="barcentrale"] .item.menu-item {
    min-height: 82px !important;

    margin-bottom: 8px !important;
    padding: 11px !important;

    border-radius: 18px !important;
  }

  body[data-theme="barcentrale"] .item.menu-item > .itemContent {
    gap: 10px !important;
  }

  body[data-theme="barcentrale"] .thumb {
    width: 70px !important;
    height: 70px !important;
    min-width: 70px !important;
    flex-basis: 70px !important;

    border-radius: 14px !important;
  }

  body[data-theme="barcentrale"] .thumb img {
    border-radius: 13px !important;
  }

  body[data-theme="barcentrale"]
  .item.menu-item:not(:has(.thumb img[src])) {
    min-height: 76px !important;
  }

  body[data-theme="barcentrale"] .itemTop {
    gap: 8px !important;
  }

  body[data-theme="barcentrale"] .name {
    font-size: 1.18rem !important;
    line-height: 1.02 !important;
  }

  body[data-theme="barcentrale"] .desc {
    margin-top: 5px !important;

    font-size: .69rem !important;
    line-height: 1.4 !important;
  }

  body[data-theme="barcentrale"] .price {
    min-width: auto !important;
    max-width: 82px !important;

    padding: 6px 8px !important;

    font-size: .87rem !important;
  }

  body[data-theme="barcentrale"] .meta,
  body[data-theme="barcentrale"] .itemMeta {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  body[data-theme="barcentrale"] .chip {
    max-width: 100% !important;
  }


  /* Modal. */
  body[data-theme="barcentrale"] .menuModalHero {
    min-height: 300px !important;
  }

  body[data-theme="barcentrale"] .menuModalPanel,
  body[data-theme="barcentrale"] .reservationPanel,
  body[data-theme="barcentrale"] .menuInfoModalPanel {
    border-radius: 24px !important;
  }


  /* Appbar: manteniamo la geometria reale del componente. */
  body[data-theme="barcentrale"] .menuAppBar {
    left: 12px !important;
    right: 12px !important;

    width: auto !important;
    max-width: none !important;

    margin: 0 !important;
    transform: none !important;
  }

  body[data-theme="barcentrale"] .space-public-footer,
  body[data-theme="barcentrale"] .space-public-footer__inner {
    width: 100% !important;
    max-width: 100% !important;
  }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 390px) {

  body[data-theme="barcentrale"] .cover {
    height: 300px !important;
  }

  body[data-theme="barcentrale"] .logo {
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    flex-basis: 54px !important;
  }

  body[data-theme="barcentrale"] .brandText {
    max-width: calc(100% - 65px) !important;
  }

  body[data-theme="barcentrale"] .brandText h1 {
    font-size: 2rem !important;
  }

  body[data-theme="barcentrale"] .tab {
    padding-left: 9px !important;
    padding-right: 9px !important;
    font-size: .58rem !important;
  }

  body[data-theme="barcentrale"] .thumb {
    width: 62px !important;
    height: 62px !important;
    min-width: 62px !important;
    flex-basis: 62px !important;
  }

  body[data-theme="barcentrale"] .name {
    font-size: 1.1rem !important;
  }

  body[data-theme="barcentrale"] .price {
    font-size: .82rem !important;
  }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  body[data-theme="barcentrale"] *,
  body[data-theme="barcentrale"] *::before,
  body[data-theme="barcentrale"] *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* =========================================================
   SPACE CATEGORY TABS CONTRACT
   Shared animated indicator tokens.
   ========================================================= */
body[data-theme="barcentrale"] {
    --space-menu-tab-active-bg: var(--bc-espresso);
    --space-menu-tab-active-color: #fffaf2;
    --space-menu-tab-active-border: 0 solid transparent;
    --space-menu-tab-active-shadow: none;
    --space-menu-tab-active-radius: 999px;
    --space-menu-tab-active-transform: none;
}