/* ==========================================================================
   ui.css — shared primitives: dividers, buttons, nav, cart badge
   Split out of the original components.css; load order is preserved
   exactly, because several rules here depend on source order.
   ========================================================================== */

/* ==========================================================================
   components.css — reusable UI pieces
   ========================================================================== */

/* ---- Dividers ---- */
.divider--v {
  width: 1px;
  height: 24px;
  background: var(--grey-400);
  flex-shrink: 0;
}
.divider--light { background: rgba(255, 255, 255, 0.2); }

/* ---- Buttons ---- */
/* Design: Aeonik Medium 16 / 24 */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: var(--w-medium);
  font-size: 16px;
  line-height: 24px;
  border-radius: var(--radius-pill);
  transition: transform 0.2s var(--ease), filter 0.2s var(--ease), background 0.2s var(--ease);
  white-space: nowrap;
}
.btn:active { transform: scale(0.97); }

.btn--lime {
  background: var(--lime-grad);
  color: var(--ink);
  padding: 12px 20px;
  border-radius: 74px;
}
.btn--lime:hover { filter: brightness(1.04); }

.btn--ghost {
  background: var(--grey-200);
  color: var(--ink);
  padding: 12px 20px;
  backdrop-filter: blur(20px);
}
.btn--ghost:hover { background: #e2e2e5; }

.btn--pill {
  background: var(--white);
  color: var(--ink);
  padding: 12px 20px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.btn--pill:hover { background: var(--grey-050); }

.btn--glass {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--white);
  padding: 12px 20px;
  backdrop-filter: blur(8px);
}
.btn--glass img { width: 24px; height: 24px; }
.btn--glass:hover { background: rgba(255, 255, 255, 0.18); }

/* ---- Nav ---- */
.nav-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 156px;
  height: 48px;
  background: var(--lime);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.nav-logo img { width: 127px; height: 14px; }

.nav-pill {
  display: flex;
  align-items: center;
  flex: 1;
  height: 48px;
  padding: 0 20px;
  background: var(--grey-100);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: 16px;
  backdrop-filter: blur(10px);
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.nav-pill:hover { background: var(--grey-200); }
.nav-pill.is-active { background: var(--ink); color: var(--white); }

.icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: var(--grey-100);
  border-radius: var(--radius-sm);
  backdrop-filter: blur(10px);
  position: relative;
  transition: background 0.2s var(--ease);
}
.icon-btn:hover { background: var(--grey-200); }
.icon-btn img { width: 24px; height: 24px; }

/* Mobile menu button — a 2x2 grid glyph; hidden on desktop. */
.menu-btn { display: none; }
.menu-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3px;
}
.menu-grid i {
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform 0.25s var(--ease);
}
.site-header.is-menu-open .menu-grid i:nth-child(1) { transform: translate(2px, 2px); }
.site-header.is-menu-open .menu-grid i:nth-child(4) { transform: translate(-2px, -2px); }

.cart-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: var(--lime);
  color: var(--ink);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}