/* ============================================
   LAYOUT — structural positioning
   ============================================ */

body {
  background: var(--cream);
  font-family: var(--font-body);
  color: var(--ink);
}

.app {
  min-height: 100vh;
}

/* ---- Topbar ---- */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: 0 var(--space-6);
  background: var(--card);
  border-bottom: 1px solid var(--border);
}

.topbar .search {
  flex: 1;
  max-width: 480px;
}

.topbar .right {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* ---- Page body ---- */
.page {
  padding-top: var(--topbar-h);
  max-width: var(--max-w);
  margin-inline: auto;
}

.catalog {
  padding: var(--space-6);
}

/* ---- Category rail ---- */
.categories {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-6);
  scrollbar-width: none;
}

.categories::-webkit-scrollbar {
  display: none;
}

/* ---- Product grid ---- */
.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-5);
}

/* When the catalog fails to load, .products holds this single block instead
   of cards — override the grid so it centers as one unit rather than
   sitting in a grid cell. */
.products:has(.catalog-error) {
  display: block;
}

.catalog-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-2);
  min-height: 60vh;
  max-width: 360px;
  margin-inline: auto;
  padding: var(--space-6);
}

.catalog-error i {
  font-size: 40px;
  color: var(--red);
  margin-bottom: var(--space-2);
}

.catalog-error h3 {
  font-size: 18px;
  color: var(--ink);
}

.catalog-error p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: var(--space-2);
}

/* ---- Cart drawer ---- */
.cart-panel {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: var(--cart-w);
  max-width: 92vw;
  background: var(--card);
  border-left: 1px solid var(--border);
  z-index: 200;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--normal) var(--ease);
}

.cart-panel.is-open {
  transform: translateX(0);
}

.cart-scrim {
  position: fixed;
  inset: 0;
  background: var(--charcoal);
  z-index: 190;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--normal) var(--ease);
}

.cart-scrim.is-open {
  opacity: 1;
  pointer-events: auto;
}

.cart-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: var(--space-5);
  border-bottom: 1px solid var(--border);
}

.cart-items {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
}

.cart-summary {
  padding: var(--space-5);
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* ---- Product preview modal ---- */
.modal-scrim {
  position: fixed;
  inset: 0;
  background: var(--charcoal);
  z-index: 290;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--normal) var(--ease);
}

.modal-scrim.is-open {
  opacity: 1;
  pointer-events: auto;
}

.product-preview {
  background: var(--card);
  border-radius: var(--radius-lg);
  max-width: 760px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  transform: translateY(12px);
  transition: transform var(--normal) var(--ease);
}

.checkout-modal {
  position: relative;
  background: var(--card);
  border-radius: var(--radius-lg);
  max-width: 440px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  padding: var(--space-6);
  transform: translateY(12px);
  transition: transform var(--normal) var(--ease);
}

.modal-scrim.is-open .checkout-modal {
  transform: translateY(0);
}

.modal-scrim.is-open .product-preview {
  transform: translateY(0);
}

.preview-image-wrap {
  background: var(--green-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
}

.preview-details {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* ---- Kanti AI widget ---- */
.ai-launcher {
  position: fixed;
  bottom: var(--space-5);
  right: var(--space-5);
  z-index: 300;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  transition: transform 220ms var(--ease), opacity 200ms var(--ease);
}

.ai-launcher.is-hidden {
  transform: scale(0.4);
  opacity: 0;
  pointer-events: none;
}

/* The panel morphs out of the launcher's own footprint: it starts pill-shaped,
   pinned to the same bottom-right corner, then grows/unrounds into the full
   chat surface. transform-origin anchors the growth to that corner so it
   reads as one continuous shape rather than a swap. */
.kanti-ai {
  position: fixed;
  bottom: var(--space-5);
  right: var(--space-5);
  z-index: 300;
  width: 360px;
  max-width: 92vw;
  height: 480px;
  max-height: 70vh;
  background: var(--card);
  border-radius: 999px;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform-origin: bottom right;
  transform: scale(0.12);
  opacity: 0;
  pointer-events: none;
  transition:
    transform 460ms cubic-bezier(0.16, 1, 0.3, 1),
    border-radius 460ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 260ms var(--ease);
}

.kanti-ai.is-open {
  transform: scale(1);
  border-radius: var(--radius-lg);
  opacity: 1;
  pointer-events: auto;
}

/* Inner content cascades in slightly after the shell finishes unfurling,
   so the motion reads as "the panel opens, then it speaks" rather than
   everything appearing at once. */
.kanti-ai .head,
.kanti-ai .ai-body,
.kanti-ai .ai-footer {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 240ms var(--ease), transform 240ms var(--ease);
}

.kanti-ai.is-open .head {
  transition-delay: 160ms;
  opacity: 1;
  transform: none;
}

.kanti-ai.is-open .ai-body {
  transition-delay: 220ms;
  opacity: 1;
  transform: none;
}

.kanti-ai.is-open .ai-footer {
  transition-delay: 280ms;
  opacity: 1;
  transform: none;
}

.kanti-ai.is-open {
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}

.ai-body {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
}

.ai-footer {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  border-top: 1px solid var(--border);
}

@media (max-width: 720px) {
  .product-preview {
    grid-template-columns: 1fr;
  }
}