/* Base */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  margin: 0;
  background: #fafafa;
  padding-bottom: 64px; /* espaço para bottom bar */
}

/* MOBILE TOPBAR (compacto, cor amarelo como na imagem) */
.mobile-topbar {
  background: #ffdf47; /* amarelo claro */
  color: #111;
  height: 52px;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}
.mobile-topbar .mobile-topbar-inner {
  padding: 6px 8px;
  display:flex;
  align-items:center;
  gap:8px;
}
.mobile-logo img {
  height:36px;
  width:36px;
  object-fit:cover;
  border-radius:8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.mobile-search {
  background: #fff;
  border: none;
  height:36px;
  padding: 6px 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.mobile-search::placeholder { color:#999; }

/* topbar cart small */
.topbar-cart { color: #111; font-size: 18px; }

/* MOBILE GRID (3 colunas) */
.mobile-shelves { padding: 10px 6px 14px; }
.shelves-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.shelf-card {
  display:flex;
  flex-direction:column;
  align-items:center;
  text-decoration:none;
  color: #222;
  background: transparent;
  border-radius: 10px;
  padding: 6px 4px;
}
.shelf-card-img {
  width: 84px;
  height: 84px;
  border-radius: 14px;
  background: #fff;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}
.shelf-card-img img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.shelf-card-label {
  margin-top:6px;
  font-size: 0.78rem;
  text-align:center;
  line-height:1.05;
  max-height: 2.1em;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space: normal;
  width: 100%;
}

/* ensure approx 12 items visible on typical phone by compact sizes */
@media (max-width:420px) {
  .shelf-card-img { width:74px; height:74px; border-radius:12px; }
  .shelf-card-label { font-size:0.75rem; }
}

/* BOTTOM BAR (compact) */
.mobile-bottombar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 56px;
  background: #fff;
  border-top: 1px solid rgba(0,0,0,0.06);
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 1050;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.04);
}
.mobile-bottombar .bb-item {
  text-decoration: none;
  color: #444;
  font-size: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 20%;
}
.mobile-bottombar .bb-item small {
  font-size: 0.65rem;
  line-height: 1;
  color: #666;
}

/* Desktop: hide mobile UI */
@media (min-width: 768px) {
  .mobile-topbar, .mobile-bottombar, .mobile-shelves { display: none !important; }
  .main-wrapper { padding-top: 12px; }
}

/* small polish */
a.shelf-card:active { transform: translateY(-2px); transition: transform .12s; }