/* GearLama product cards — clean, scannable, light + dark. */

/* ── Image: fill box, no grey bars ── */
.gl-card-img-wrap {
  background: #f9fafb !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.gl-card-img-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}

/* ── Card (light) ── */
.gl-card {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif !important;
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease !important;
}
.gl-card:hover {
  border-color: #d1d5db !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.07) !important;
  transform: translateY(-1px) !important;
}
.gl-card-store {
  color: #9ca3af !important;
}
.gl-card-title {
  color: #111827 !important;
}
.gl-card-price,
.gl-card-price-range {
  color: #111827 !important;
}
.gl-card-price-na,
.gl-card-sizes {
  color: #9ca3af !important;
}
.gl-card-badge--green {
  background: #ecfdf5 !important;
  color: #059669 !important;
}
.gl-card-badge--red {
  background: #fef2f2 !important;
  color: #dc2626 !important;
}
.gl-card-badge--yellow {
  background: #fffbeb !important;
  color: #d97706 !important;
}
.gl-card-noimg {
  color: #d1d5db !important;
}

/* ── Dark mode ── */
[data-theme="dark"] .gl-card,
.dark .gl-card {
  background: #1f2937 !important;
  border-color: #374151 !important;
}
[data-theme="dark"] .gl-card:hover,
.dark .gl-card:hover {
  border-color: #4b5563 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}
[data-theme="dark"] .gl-card-store,
.dark .gl-card-store {
  color: #9ca3af !important;
}
[data-theme="dark"] .gl-card-title,
.dark .gl-card-title {
  color: #f3f4f6 !important;
}
[data-theme="dark"] .gl-card-price,
[data-theme="dark"] .gl-card-price-range,
.dark .gl-card-price,
.dark .gl-card-price-range {
  color: #f3f4f6 !important;
}
[data-theme="dark"] .gl-card-price-na,
[data-theme="dark"] .gl-card-sizes,
.dark .gl-card-price-na,
.dark .gl-card-sizes {
  color: #9ca3af !important;
}
[data-theme="dark"] .gl-card-badge--green,
.dark .gl-card-badge--green {
  background: #064e3b !important;
  color: #6ee7b7 !important;
}
[data-theme="dark"] .gl-card-badge--red,
.dark .gl-card-badge--red {
  background: #7f1d1d !important;
  color: #fca5a5 !important;
}
[data-theme="dark"] .gl-card-badge--yellow,
.dark .gl-card-badge--yellow {
  background: #78350f !important;
  color: #fcd34d !important;
}
[data-theme="dark"] .gl-card-img-wrap,
.dark .gl-card-img-wrap {
  background: #374151 !important;
}
[data-theme="dark"] .gl-card-noimg,
.dark .gl-card-noimg {
  color: #6b7280 !important;
}

.gearlama-cards-container {
  margin-top: 1.25rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.625rem !important;
}

/* Out-of-stock card */
.gl-card--oos {
  opacity: 0.55 !important;
}
.gl-card--oos:hover {
  opacity: 0.75 !important;
}
.gl-card--oos .gl-card-img-wrap img {
  filter: grayscale(30%) !important;
}

/* ── Dark mode: invert line-art logo ── */
[data-theme="dark"] img[src*="gearlama"],
.dark img[src*="gearlama"] {
  filter: invert(1) !important;
}

/* ── Chainlit header branding ── */
header img[src*="logo"]:not([src*="gearlama"]),
header a[href="/"] img:not([src*="gearlama"]),
[class*="header"] img[src*="logo"]:not([src*="gearlama"]),
[class*="sidebar"] img[src*="logo"]:not([src*="gearlama"]) {
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}
header a[href="/"],
[class*="header"] a[href="/"] {
  font-weight: 700 !important;
  font-size: 1.25rem !important;
  color: inherit !important;
  text-decoration: none !important;
}
header a[href="/"]::after,
[class*="header"] a[href="/"]::after {
  content: "GearLama" !important;
  visibility: visible !important;
  margin-left: 0.25rem;
}
header a[href="/"]:has(img[src*="gearlama"])::after,
[class*="header"] a[href="/"]:has(img[src*="gearlama"])::after {
  content: none !important;
}