/* ---------- Detail pages ---------- */

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 13px;
  min-height: 28px;
  margin-bottom: 8px;
}

.detail-header {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
  margin-bottom: 16px;
}

.listing-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.listing-thumb {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

.listing-row-body { flex: 1; min-width: 0; }

.listing-photo {
  width: 100%;
  height: 160px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.listing-photo svg { width: 40px; height: 40px; }

.store-banner {
  height: 110px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--brand-tint), var(--surface-2));
  position: relative;
  margin-bottom: 34px;
}

.store-avatar {
  position: absolute;
  bottom: -26px;
  left: 16px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--brand);
  color: var(--on-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 18px;
  border: 3px solid var(--surface);
}

/* Market name/location/hours sit above the hero, not on top of it — same spacing rhythm as .detail-header. */
.market-title-block { margin-bottom: 12px; }

/* Market page hero: a placeholder, same category-fill + icon language as .listing-photo, just full-width
   and wide/short (not a fixed small square) — there's no photo storage system yet (see roadmap #13), so
   this is what stands in for one until that exists. Short on purpose: a tall hero pushed stores too far
   down the page. */
.market-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 2.6 / 1;
  max-height: 260px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  overflow: hidden;
}

.market-hero-icon svg { width: 40px; height: 40px; }

/* A dark scrim along the bottom of the hero so the description reads over the (flat-color, for now)
   image, the same way a caption sits over a photo — not a separate card underneath it. */
.market-hero-vignette {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 24px 16px 12px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
}

.market-hero-desc {
  margin: 0;
  color: #fff;
  font-size: 13px;
  line-height: 1.4;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Market page content split, within #app only — independent of .side-rail (ad space) and .app-sidebar
   (primary nav), see index.html. Below 860px: a single column in document order (header, directions+map,
   stores, reviews) — the same order the page always had. At ≥860px (see that media query below) "side"
   moves into its own right-hand column instead of sitting between header and stores. */
.market-layout {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "header" "side" "stores" "reviews";
  gap: 0;
}
.market-col-header { grid-area: header; min-width: 0; }
.market-col-side { grid-area: side; min-width: 0; }
.market-col-stores { grid-area: stores; min-width: 0; }
.market-col-reviews { grid-area: reviews; min-width: 0; }

.market-minimap {
  width: 100%;
  height: 180px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 16px;
  background: var(--surface-2);
}

/* Store page right column (.market-col-side): each logical group — map+directions, message/report/claim,
   recently reported prices — sits in its own card instead of running together as one long list. */
.side-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px;
  margin-bottom: 12px;
}
.side-card-map { padding: 0; overflow: hidden; }
.side-card-map .market-minimap { margin-bottom: 0; border-radius: 0; }
.side-card-map #directionsSection { padding: 14px; }
.side-card .section-title { margin-top: 0; }

.side-card-cta { width: 100%; }

.side-link-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 10px;
}
.side-link-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  border-radius: var(--radius-sm);
}
.side-link-row:hover { background: var(--surface-2); }
.side-link-row svg { flex: none; color: var(--brand-text); }

/* A category row: color dot + name + item count. Shared, unconditionally, by the desktop sidebar's
   market category list (sidebarMarketCategoriesHtml(), wrapped in .sidebar-categories, hidden below
   860px since .app-sidebar itself is) and .market-mobile-categories below (the <860px equivalent, in
   the main content, for a market page) — one row shape instead of two near-identical ones. */
.sidebar-cat-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 8px;
  border: none;
  background: none;
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--text);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
}
.sidebar-cat-row:hover { background: var(--surface-2); }
.sidebar-cat-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.sidebar-cat-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-cat-count { color: var(--text-muted); font-size: 12px; }

/* Market page, below 860px only: the category browsing the desktop sidebar provides at that width
   (see .app-sidebar) has no equivalent in the main content otherwise. Hidden at 860px below, the
   same pattern .category-rail-wrap/.cat-sticky-wrap use to disappear once the sidebar takes over. */
.market-mobile-categories {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 16px;
}

.detail-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Shared title-row pill: Verified's own look, plus color modifiers (.owner-badge, .boosted-badge) that
   reuse the same shape/sizing for the store page's other two badges (see loadStoreOwnershipBadge()). */
.verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  color: var(--verified);
  background: color-mix(in srgb, var(--verified) 16%, var(--surface));
}

.owner-badge { color: var(--brand-text); background: var(--brand-tint); }
.boosted-badge { color: var(--confirmed-text); background: var(--confirmed-bg); }

.badge-tick {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--verified);
}

.badge-tick svg { width: 9px; height: 9px; }

.rating-row {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 4px;
}

.section-title {
  margin: 20px 0 10px;
}

.subcat-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px;
  margin-bottom: 12px;
}

/* Generic "title left, meta/chevron right" row — the Market page's expandable product list
   (data-toggle-product) and a direction-item's "N steps · cost/time" header, not the Store page's
   catalogue card (that's .product-card-head below). */
.product-row-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.subcat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

/* One compact product card, two per row (see renderStore()'s catalogHtml): a small square thumbnail
   beside the name as a header row, then the "Message about this" button and variant rows run the card's
   FULL width underneath — not squeezed into a narrow column beside the thumbnail, which was previously
   making these cards read as tall/vertical instead of compact. */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}

.product-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--surface-2);
  border-radius: 20px;
  padding: 10px;
}

.product-card-top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.product-card-banner {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
}
.product-card-banner svg { width: 20px; height: 20px; }

.product-card-name { min-width: 0; }
.product-card-message { align-self: flex-start; }

.variant-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Collapsible: .variant-row-main is always the one-line summary (label · price · chevron), and
   .variant-row-action (the "Check availability" button) only renders when that variant is the one
   expanded — see openCatalogVariants/touchedCatalogProducts in renderStore(). Out-of-stock variants
   have nothing to expand, so .variant-row-main renders as plain text there, not a button. */
.variant-row {
  background: var(--surface);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.variant-row-main {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 4px;
  font: inherit;
  font-size: 13px;
  color: inherit;
  background: none;
  border: none;
  padding: 8px 10px;
  text-align: left;
}
button.variant-row-main { cursor: pointer; }
button.variant-row-main:hover { background: var(--surface-2); }

.variant-chevron { color: var(--text-muted); font-size: 11px; }

.variant-row-action { padding: 0 10px 8px; }

.variant-row.out { color: var(--text-muted); }
.variant-row.out .price { color: var(--text-muted); text-decoration: line-through; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 999px;
  padding: 9px 16px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  transition: transform 0.1s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.btn-primary {
  background: var(--btn-gradient);
  /* .btn has a 1px transparent border and a gradient is painted from the padding box and tiles into it, which showed the far end's
     colour as a sliver at each rounded end. Starting it at the border box removes that. */
  background-origin: border-box;
  color: var(--on-brand);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--brand) 35%, transparent);
}
.btn-primary:hover { filter: brightness(1.06); }
.btn-primary:active { transform: scale(0.98); }
.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border); border-radius: var(--radius-lg); }
.btn-secondary:hover { background: var(--surface-2); }
.btn-danger { background: var(--danger-text); color: #fff; border-color: var(--danger-text); }
.btn-danger:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-small { padding: 5px 12px; font-size: 12px; }

.btn-row {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.vendor-row {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px;
  margin-bottom: 10px;
}

.vendor-row.cheapest { border-color: var(--brand-text); }

.vendor-row-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.vendor-price {
  font-size: 16px;
  font-weight: 600;
  color: var(--brand-text);
}

.vendor-meta-line {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}