@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&display=swap");

#hb-app{
      --brand: #ffa800;
      --brand-dark: #ffa800;
      --ink: #25211f;
      --muted: #6d6661;
      --paper: #000000;
      --line: #f0e5dd;
    }

    #hb-app, #hb-app *{ box-sizing: border-box; }

    #hb-app{
      width: 100%;
      margin: 0;
      color: var(--ink);
      background: var(--paper);
      font-family: "DM Sans", sans-serif;
    }

    #hb-app button, #hb-app input, #hb-app textarea, #hb-app select{ font: inherit; }
    #hb-app button{ -webkit-tap-highlight-color: transparent; cursor: pointer; }

    #hb-app .app-shell{
      width: 100%;
      min-height: calc(100 * min(var(--vh, 1vh), 1vh));
      padding-bottom: 6.5rem;
    }

    #hb-app .page-wrap{
      width: 100%;
      max-width: 760px;
      margin: 0 auto;
      padding: 1rem 1rem 2rem;
    }

    #hb-app .topbar{
      position: sticky;
      top: 0;
      z-index: 20;
      margin: -1rem -1rem 1.25rem;
      padding: 1rem;
      border-bottom: 1px solid #f1e6de;
      background: rgba(0, 0, 0, .93);
      backdrop-filter: blur(14px);
    }

    #hb-app .brand-mark{
      display: grid;
      width: 2.7rem;
      height: 2.7rem;
      place-items: center;
      border-radius: 14px;
      color: #fff;
      background: var(--brand);
      box-shadow: 0 7px 18px rgba(255, 168, 0, .23);
    }

    #hb-app .store-name{
      margin: 0;
      overflow: hidden;
      font-size: 1.125rem;
      font-weight: 800;
      line-height: 1.2;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    #hb-app .cart-button{
      position: relative;
      display: grid;
      width: 2.8rem;
      height: 2.8rem;
      place-items: center;
      border: 1px solid #eaded6;
      border-radius: 14px;
      color: var(--ink);
      background: #fff;
    }

    #hb-app .cart-count{
      position: absolute;
      top: -.35rem;
      right: -.25rem;
      display: grid;
      min-width: 1.25rem;
      height: 1.25rem;
      padding: 0 .25rem;
      place-items: center;
      border-radius: 999px;
      color: #fff;
      background: var(--brand);
      font-size: .7rem;
      font-weight: 800;
    }

    #hb-app .stepper{ display: flex; gap: .35rem; margin-top: .9rem; }
    #hb-app .step-dot{
      height: .32rem;
      flex: 1;
      border-radius: 999px;
      background: #eaded6;
      transition: background .25s ease, transform .25s ease;
    }
    #hb-app .step-dot.active{ background: var(--brand); transform: scaleY(1.45); }

    #hb-app .view{ display: none; animation: view-in .28s ease both; }
    #hb-app .view.active{ display: block; }

    @keyframes view-in {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }

    #hb-app .kicker{
      margin: 0;
      color: var(--brand);
      font-size: .75rem;
      font-weight: 800;
      letter-spacing: .08rem;
      text-transform: uppercase;
    }

    #hb-app .page-title{
      margin: .25rem 0 0;
      font-size: 1.5rem;
      font-weight: 800;
      line-height: 1.2;
    }

    #hb-app .section-card{
      padding: 1rem;
      border: 1px solid var(--line);
      border-radius: 22px;
      background: #fff;
      box-shadow: 0 10px 28px rgba(79, 43, 20, .06);
    }

    #hb-app .chips{
      display: flex;
      gap: .55rem;
      overflow-x: auto;
      padding: .15rem .1rem .7rem;
      scrollbar-width: none;
    }
    #hb-app .chips::-webkit-scrollbar{ display: none; }

    #hb-app .chip{
      padding: .68rem .9rem;
      border: 1px solid #eaded6;
      border-radius: 999px;
      color: #5e554f;
      background: #fff;
      font-size: .88rem;
      font-weight: 700;
      white-space: nowrap;
      transition: .2s;
    }

    #hb-app .chip.active{
      border-color: var(--brand);
      color: #fff;
      background: var(--brand);
      box-shadow: 0 6px 14px rgba(255, 168, 0, .2);
    }

    #hb-app .product-grid{ display: grid; gap: .8rem; }

    #hb-app .product-card{
      padding: 1rem;
      border: 1px solid var(--line);
      border-radius: 20px;
      background: #fff;
      box-shadow: 0 8px 22px rgba(79, 43, 20, .045);
    }

    #hb-app .product-name{ margin: 0; font-size: 1rem; font-weight: 800; }

    #hb-app .product-description{
      min-height: 1.25rem;
      margin: .3rem 0 0;
      color: var(--muted);
      font-size: .88rem;
      line-height: 1.4;
    }

    #hb-app .price{ color: var(--brand); font-weight: 800; }

    #hb-app .primary-action, #hb-app .secondary-action{
      min-height: 2.75rem;
      padding: .72rem 1rem;
      border-radius: 13px;
      font-weight: 800;
      transition: transform .16s ease, background .16s ease;
    }

    #hb-app .primary-action{
      border: 0;
      color: #fff;
      background: var(--brand);
    }

    #hb-app .primary-action:hover{ background: var(--brand-dark); }
    #hb-app .primary-action:active{ transform: scale(.97); }

    #hb-app .secondary-action{
      border: 1px solid #e5d8d0;
      color: #4f4640;
      background: #fff;
    }

    #hb-app .qty-control{
      display: inline-flex;
      align-items: center;
      gap: .7rem;
      padding: .28rem;
      border: 1px solid #ecdcd3;
      border-radius: 13px;
      background: #fffaf6;
    }

    #hb-app .qty-control button{
      display: grid;
      width: 2rem;
      height: 2rem;
      padding: 0;
      place-items: center;
      border: 0;
      border-radius: 9px;
      color: var(--brand);
      background: #fff;
      font-weight: 800;
      box-shadow: 0 2px 7px rgba(0, 0, 0, .05);
    }

    #hb-app .qty-value{
      min-width: 1.1rem;
      text-align: center;
      font-weight: 800;
    }

    #hb-app .cart-row{
      padding: .9rem 0;
      border-bottom: 1px solid #f1e7e0;
    }

    #hb-app .cart-row:last-child{ border-bottom: 0; }

    #hb-app .cart-item-name{ margin: 0; font-weight: 800; }
    #hb-app .cart-item-price{ margin: .22rem 0 0; color: var(--muted); font-size: .83rem; }

    #hb-app .sauce-box{
      margin-top: .85rem;
      padding: .85rem;
      border: 1px solid #f0dfd4;
      border-radius: 15px;
      background: #fffaf6;
    }

    #hb-app .sauce-box-title{
      margin: 0;
      color: #4f4640;
      font-size: .86rem;
      font-weight: 800;
    }

    #hb-app .sauce-box-helper{
      margin: .2rem 0 .65rem;
      color: var(--muted);
      font-size: .77rem;
      line-height: 1.35;
    }

    #hb-app .sauce-options{
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: .45rem;
    }

    #hb-app .sauce-option{
      display: flex;
      align-items: center;
      gap: .45rem;
      min-width: 0;
      padding: .55rem;
      border: 1px solid #eee1d8;
      border-radius: 10px;
      color: #4d453f;
      background: #fff;
      font-size: .75rem;
      font-weight: 600;
      cursor: pointer;
    }

    #hb-app .sauce-option:has(input:checked){
      border-color: var(--brand);
      background: #fff2ea;
    }

    #hb-app .option-label{
      display: flex;
      align-items: center;
      gap: .7rem;
      padding: .76rem .8rem;
      border: 1px solid #eee1d8;
      border-radius: 13px;
      cursor: pointer;
    }

    #hb-app .option-label:has(input:checked){
      border-color: var(--brand);
      background: #fff5ef;
    }

    #hb-app input[type="radio"], #hb-app input[type="checkbox"]{
      width: 1.1rem;
      height: 1.1rem;
      flex: 0 0 auto;
      accent-color: var(--brand);
    }

    #hb-app .field-label{
      display: block;
      margin: .9rem 0 .38rem;
      color: #4d453f;
      font-size: .88rem;
      font-weight: 800;
    }

    #hb-app .field{
      width: 100%;
      min-height: 2.9rem;
      padding: .7rem .8rem;
      border: 1px solid #dfd3cc;
      border-radius: 12px;
      outline: none;
      color: var(--ink);
      background: #fffdfb;
      transition: border .18s, box-shadow .18s;
    }

    #hb-app .field:focus{
      border-color: var(--brand);
      box-shadow: 0 0 0 3px rgba(255, 168, 0, .13);
    }

    #hb-app .field.invalid{
      border-color: #c92a2a;
      background: #fff6f6;
    }

    #hb-app .field-error{
      display: block;
      min-height: 1rem;
      margin-top: .3rem;
      color: #c92a2a;
      font-size: .78rem;
    }

    #hb-app .line-total{
      margin-top: .75rem;
      padding-top: .9rem;
      border-top: 1px dashed #dfcfc5;
    }

    #hb-app .menu-footer{ margin-top: 1.25rem; padding-bottom: .5rem; }
    #hb-app .menu-footer button{ width: 100%; min-height: 3.25rem; font-size: 1rem; }
    #hb-app .menu-footer button:disabled{ cursor: not-allowed; opacity: .52; transform: none; }

    #hb-app .bottom-cart{
      position: fixed;
      z-index: 30;
      right: 0;
      bottom: 0;
      left: 0;
      padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
      border-top: 1px solid #eddfd7;
      background: rgba(255, 250, 246, .94);
      backdrop-filter: blur(14px);
    }

    #hb-app .bottom-cart-inner{ max-width: 760px; margin: auto; }

    #hb-app .bottom-cart button{
      display: flex;
      width: 100%;
      align-items: center;
      justify-content: space-between;
    }

    #hb-app .toast{
      position: fixed;
      z-index: 60;
      top: 1rem;
      left: 50%;
      width: min(90%, 430px);
      padding: .85rem 1rem;
      border-radius: 14px;
      transform: translate(-50%, -130%);
      color: #fff;
      opacity: 0;
      background: #2f2a27;
      box-shadow: 0 12px 28px rgba(0, 0, 0, .17);
      font-size: .9rem;
      font-weight: 700;
      transition: transform .24s ease, opacity .24s ease;
    }

    #hb-app .toast.show{ transform: translate(-50%, 0); opacity: 1; }
    #hb-app .toast.error{ background: #b42318; }

    #hb-app .summary-row{
      display: flex;
      justify-content: space-between;
      gap: 1rem;
      padding: .5rem 0;
      color: #574e48;
      font-size: .92rem;
    }

    #hb-app .summary-row strong{
      color: var(--ink);
      text-align: right;
    }

    #hb-app .summary-item{
      display: block;
      padding: .6rem 0;
      border-bottom: 1px solid #f1e7e0;
      color: #574e48;
      font-size: .92rem;
      line-height: 1.45;
    }

    #hb-app .summary-item:last-of-type{ border-bottom: 0; }

    #hb-app .total-banner{
      padding: 1rem;
      border-radius: 17px;
      color: var(--brand-dark);
      background: #fff1e8;
    }

    #hb-app .hidden{ display: none !important; }

    #hb-app :focus-visible{
      outline: 3px solid rgba(255, 168, 0, .38);
      outline-offset: 3px;
    }

    @media (min-width: 640px) {
      #hb-app .page-wrap{ padding: 1.5rem 1.5rem 3rem; }
      #hb-app .topbar{ margin: -1.5rem -1.5rem 1.5rem; padding: 1.2rem 1.5rem; }
      #hb-app .product-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
      #hb-app .bottom-cart{ display: none; }
      #hb-app .app-shell{ padding-bottom: 0; }
    }

    @media (max-width: 420px) {
      #hb-app .sauce-options{ grid-template-columns: 1fr; }
    }

    @media (prefers-reduced-motion: reduce) {
      #hb-app, #hb-app *, #hb-app *::before, #hb-app *::after{
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
      }
    }

/* Utilitários usados pelo layout original, limitados ao aplicativo */
#hb-app .flex{display:flex}
#hb-app .grid{display:grid}
#hb-app .items-center{align-items:center}
#hb-app .items-start{align-items:flex-start}
#hb-app .justify-between{justify-content:space-between}
#hb-app .justify-end{justify-content:flex-end}
#hb-app .gap-2{gap:.5rem}
#hb-app .gap-3{gap:.75rem}
#hb-app .gap-4{gap:1rem}
#hb-app .m-0{margin:0}
#hb-app .mb-2{margin-bottom:.5rem}
#hb-app .mb-4{margin-bottom:1rem}
#hb-app .mt-0{margin-top:0}
#hb-app .mt-1{margin-top:.25rem}
#hb-app .mt-3{margin-top:.75rem}
#hb-app .mt-4{margin-top:1rem}
#hb-app .mt-5{margin-top:1.25rem}
#hb-app .my-3{margin-top:.75rem;margin-bottom:.75rem}
#hb-app .py-5{padding-top:1.25rem;padding-bottom:1.25rem}
#hb-app .min-w-0{min-width:0}
#hb-app .min-h-24{min-height:6rem}
#hb-app .resize-y{resize:vertical}
#hb-app .whitespace-nowrap{white-space:nowrap}
#hb-app .text-center{text-align:center}
#hb-app .text-sm{font-size:.875rem;line-height:1.25rem}
#hb-app .text-lg{font-size:1.125rem;line-height:1.75rem}
#hb-app .text-xl{font-size:1.25rem;line-height:1.75rem}
#hb-app .font-bold{font-weight:700}
#hb-app .font-extrabold{font-weight:800}
#hb-app .underline{text-decoration:underline}
#hb-app .text-stone-500{color:#78716c}
#hb-app .text-stone-600{color:#57534e}
#hb-app .text-green-700{color:#15803d}
#hb-app .text-red-700{color:#b91c1c}
#hb-app .border-stone-200{border-color:#e7e5e4}
#hb-app .hb-icon{display:inline-flex;align-items:center;justify-content:center;min-width:1em;font-size:1.1em;line-height:1}
@media (min-width:640px){
  #hb-app .sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  #hb-app .sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  #hb-app .sm\:col-span-2{grid-column:span 2 / span 2}
}

/* Ajuste mobile: categorias do cardápio não ficam cortadas */
@media (max-width: 639px) {
  #hb-app .chips {
    display: flex;
    flex-wrap: wrap;
    overflow-x: visible;
    overflow-y: visible;
    gap: .5rem;
    padding-right: 0;
    padding-bottom: .7rem;
  }

  #hb-app .chip {
    flex: 0 1 auto;
    max-width: 100%;
    white-space: nowrap;
  }
}