/* UI base */
:root { --fp-radius: 14px; }
body { background: #f7f7fb; }
.navbar { box-shadow: 0 2px 18px rgba(0,0,0,.06); }
.card { border-radius: var(--fp-radius); }
.btn { border-radius: 12px; }
.badge { border-radius: 999px; }

/* Product cards */
.fp-product-card .card-body { display: flex; flex-direction: column; gap: .5rem; }
.fp-price { font-weight: 700; }

/* Cart drawer (offcanvas) tweaks */
.offcanvas { border-top-left-radius: var(--fp-radius); border-top-right-radius: var(--fp-radius); }
@media (min-width: 992px) {
  .offcanvas { border-radius: var(--fp-radius); }
}
.fp-muted { color: rgba(0,0,0,.6); }

/* HTMX loading */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator { display: inline-block; }

.cart-line{
    border: 1px solid rgba(0,0,0,.06);
    border-radius: .9rem;
    background: #fff;
  }
  .cart-thumb{
    width: 54px;
    height: 54px;
    border-radius: .75rem;
    background: #f8f9fa;
    overflow: hidden;
    flex: 0 0 auto;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .cart-thumb img{
    width: 100%;
    height: 100%;
    object-fit: cover; /* miniatura linda */
    display:block;
  }
  .cart-name{
    font-weight: 800;
    font-size: .95rem;
    line-height: 1.1rem;
    margin: 0;
  }
  .cart-meta{
    color: #6c757d;
    font-size: .8rem;
  }
  .qty-pill{
    min-width: 44px;
    font-weight: 800;
  }
  .cart-total{
    font-weight: 900;
    white-space: nowrap;
  }

  /* ===== Modern Offcanvas Menu ===== */
.modern-menu .offcanvas-header { background: rgba(255,255,255,.95); }
.menu-avatar{
  width: 40px; height: 40px; border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  background:#111; color:#fff; font-weight:800;
}
.menu-section{
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(0,0,0,.55);
  padding: 0 .25rem .35rem;
}
.menu-item{
  display:flex;
  align-items:center;
  gap:.65rem;
  padding:.65rem .75rem;
  margin:.15rem 0;
  border-radius: 14px;
  text-decoration:none;
  color: #111;
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.85);
  box-shadow: 0 10px 22px rgba(0,0,0,.04);
  transition: transform .08s ease, box-shadow .12s ease;
}
.menu-item:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(0,0,0,.07);
  color:#111;
}
.menu-ico{ width: 26px; display:flex; justify-content:center; }