/* ============================================
   RUNNIT — COMPONENTS
   Header/nav, buttons, cards, badges, footer.
   Shared across every page.
   ============================================ */

/* ---------- Header / Nav ---------- */
.skip-link {
  position: absolute;
  top: -48px;
  left: var(--space-3);
  z-index: 100;
  background: var(--color-brand-dark);
  color: var(--color-on-brand);
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-weight: 600;
  transition: top 120ms ease;
}

.skip-link:focus {
  top: var(--space-3);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-line);
}

.nav-bar {
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}

.logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-lg);
  color: var(--color-brand-dark);
  letter-spacing: -0.01em;
  flex-shrink: 0;
}

.logo span {
  color: var(--color-accent);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  font-size: var(--fs-sm);
  font-weight: 500;
}

.nav-links a {
  color: var(--color-ink-soft);
  padding: var(--space-2) 0;
  border-bottom: 2px solid transparent;
}

.nav-links a:hover,
.nav-links a[aria-current="page"] {
  color: var(--color-brand-dark);
  border-bottom-color: var(--color-brand);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  position: relative;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  background: transparent;
  color: var(--color-ink);
}

.icon-btn:hover {
  background: var(--color-bg-alt);
}

.icon-btn svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
}

.cart-count {
  position: absolute;
  top: -2px;
  right: -2px;
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: 10px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
}

/* display:flex above would otherwise override the hidden attribute */
.cart-count[hidden] {
  display: none;
}

.nav-tooltip {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--color-inverse-bg);
  color: var(--color-inverse-ink);
  font-size: var(--fs-xs);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.nav-toggle {
  display: none;
  border: none;
  background: none;
  width: 40px;
  height: 40px;
}

.nav-toggle svg {
  width: 24px;
  height: 24px;
  stroke: var(--color-ink);
  fill: none;
  stroke-width: 1.8;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-sm);
  line-height: 1.2;
  min-height: var(--control-h);
  padding: 0 var(--space-5);
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.btn-primary {
  background: var(--color-brand);
  color: var(--color-on-brand);
}
.btn-primary:hover { background: var(--color-brand-dark); }

.btn-accent {
  background: var(--color-accent);
  color: var(--color-on-accent);
}
.btn-accent:hover { background: var(--color-accent-dark); }

.btn-outline {
  background: transparent;
  border-color: var(--color-line-strong);
  color: var(--color-ink);
}
.btn-outline:hover { border-color: var(--color-brand); color: var(--color-brand-dark); }

.btn-block { width: 100%; }
.btn-sm { min-height: 36px; padding: 0 var(--space-4); }

.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ---------- Badges / tags ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  background: var(--color-brand-tint);
  color: var(--color-brand-dark);
}

.badge-accent {
  background: var(--color-accent-tint);
  color: var(--color-accent-dark);
}

.badge-outline {
  background: transparent;
  border: 1px solid var(--color-line-strong);
  color: var(--color-ink-soft);
}

.badge-danger {
  background: var(--color-danger-tint);
  color: var(--color-danger);
}

.badge-verified {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--color-brand-tint);
  color: var(--color-brand-dark);
}
.badge-verified svg {
  width: 13px;
  height: 13px;
  stroke: none;
  fill: currentColor;
}

/* ---------- Vendor verification badge (built by js/modules/verified.js) ---------- */
/* Same size, corners and rhythm as every other .badge, so it sits naturally in a row of tags. */
.verified-badge {
  gap: 5px;
  padding: 3px 9px 3px 5px;
  background: var(--color-brand-tint);
  color: var(--color-brand-dark);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-brand) 18%, transparent);
  white-space: nowrap;
}
.verified-badge svg,
.verified-mark svg {
  width: 16px;
  height: 16px;
  flex: none;
  display: block;
}
/* green seal with a white tick */
.verified-badge .seal,
.verified-mark .seal {
  fill: var(--color-brand);
  stroke: none;
}
.verified-badge .tick,
.verified-mark .tick {
  fill: none;
  stroke: var(--color-on-brand);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* beside a store name */
.verified-badge--lg {
  gap: 6px;
  padding: 4px 11px 4px 6px;
  font-size: var(--fs-sm);
}
.verified-badge--lg svg {
  width: 20px;
  height: 20px;
}
/* just the seal, right after a name */
.verified-name-end {
  font-weight: inherit; /* a <b>, so surrounding "span" styles never touch it */
  white-space: nowrap;
}
.verified-mark {
  display: inline-flex;
  vertical-align: -3px;
  margin-left: 2px;
}

.inline-icon {
  display: inline-flex;
  vertical-align: -2px;
}
.inline-icon svg {
  width: 13px;
  height: 13px;
  stroke: none;
  fill: var(--color-brand-dark);
}

.form-submit-error {
  display: none;
  background: var(--color-danger-tint);
  color: var(--color-danger);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  margin-top: var(--space-4);
}

/* ---------- Forms ---------- */
/* Shared by checkout.html and become-vendor.html — kept here (not in
   either page's own CSS) so every page with a form actually gets it. */
.form-group {
  margin-bottom: var(--space-4);
}

.form-group label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.form-group input[type="text"],
.form-group input[type="tel"],
.form-group input[type="email"],
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--color-ink);
  background: var(--color-surface);
}

.form-group select {
  appearance: auto;
}

.form-group input.has-error,
.form-group textarea.has-error,
.form-group select.has-error {
  border-color: var(--color-danger);
}

.field-error {
  display: block;
  font-size: var(--fs-xs);
  color: var(--color-danger);
  margin-top: 4px;
  min-height: 14px;
}

.form-fieldset {
  border: none;
  padding: 0;
  margin: 0 0 var(--space-4);
}

.form-fieldset legend {
  display: block;
  width: 100%;
  padding: 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  margin-bottom: var(--space-2);
  color: var(--color-ink);
}

/* ---------- Quantity stepper ---------- */
/* Shared by the product detail page and the cart page. */
.qty-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.qty-stepper button {
  width: 38px;
  height: 38px;
  border: none;
  background: var(--color-bg-alt);
  font-size: var(--fs-md);
  color: var(--color-ink);
}

.qty-stepper button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.qty-stepper span {
  min-width: 36px;
  text-align: center;
  font-weight: 600;
  font-size: var(--fs-sm);
}

.rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--color-ink);
}

.rating svg {
  width: 13px;
  height: 13px;
  fill: var(--color-accent);
  stroke: none;
}

/* ---------- Cards ---------- */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
}

/* Product and vendor cards share one structure: media, then a body whose
   last row (buttons) always sits at the bottom, so cards in a row line up.
   No shadows: hover only darkens the border. */
.product-card,
.vendor-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color 120ms ease;
}

.product-card:hover,
.vendor-card:hover {
  border-color: var(--color-ink-faint);
}

.product-card__media,
.vendor-card__media {
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--color-bg-alt);
  overflow: hidden;
}

.vendor-card__media {
  aspect-ratio: 16 / 9;
}

.product-card__media img,
.vendor-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-card__body,
.vendor-card__body {
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
  min-width: 0;
}

.product-card__top-row,
.vendor-card__top-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-1) var(--space-2);
}

.product-card__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-base);
  line-height: 1.3;
  margin: 0;
  color: var(--color-ink);
  overflow-wrap: anywhere;
}

.product-card__name:hover {
  color: var(--color-brand-dark);
  text-decoration: underline;
}

/* vendor name on the left, rating on the right; a long vendor name wraps
   onto a second line rather than being cut off or pushing the rating out */
.product-card__meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
  min-width: 0;
}

.product-card__vendor {
  min-width: 0;
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.35;
  color: var(--color-ink-soft);
  overflow-wrap: anywhere;
}

.product-card__meta .rating {
  flex-shrink: 0;
  line-height: 1.35;
}

.product-card__price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-md);
  color: var(--color-brand-dark);
}

/* Card buttons. The layout depends on the CARD's width (not the screen's),
   and every card in a row has the same width, so neighbouring cards always
   match: two buttons side by side when the card is wide enough, otherwise
   stacked at full width. Labels never wrap onto a second line. */
.product-card,
.vendor-card {
  container-type: inline-size;
}

.product-card__footer,
.vendor-card__actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-2);
}

.product-card__footer .btn,
.vendor-card__actions .btn {
  padding-inline: var(--space-3);
  white-space: nowrap;
}

/* "Message vendor" on Marketplace cards ("Message vendor first" mode).
   A little tighter than the other buttons so the words fit a phone's card. */
.product-card__footer .product-card__message {
  padding-inline: var(--space-2);
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
}

@container (min-width: 300px) {
  .product-card__footer,
  .vendor-card__actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.vendor-card__top-row {
  flex-wrap: nowrap;
  align-items: flex-start;
}

.vendor-card__top-row h3 {
  min-width: 0;
  margin: 0;
  font-size: var(--fs-md);
  overflow-wrap: anywhere;
}

.vendor-card__top-row .rating {
  flex-shrink: 0;
  margin-top: 3px;
}

.vendor-card__logo {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-pill);
  object-fit: cover;
  border: 1px solid var(--color-line);
  background: var(--color-bg-alt);
}

/* badges on one row; location and product count each get their own line,
   so every vendor card has the same three-part shape */
.vendor-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.vendor-card__meta {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-sm);
  color: var(--color-ink-soft);
}

.vendor-card__meta li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  line-height: 1.4;
  min-width: 0;
}

.vendor-card__meta li span {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* icons are plain outlines, not solid shapes */
.vendor-card__meta svg {
  width: 14px;
  height: 14px;
  margin-top: 3px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}



@media (min-width: 641px) {
  .product-card__body,
  .vendor-card__body {
    padding: var(--space-4);
  }
}

/* ---------- Category chips ---------- */
.category-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  text-align: left;
  width: 100%;
}

.category-card:hover {
  border-color: var(--color-brand);
  background: var(--color-brand-tint);
}

.category-card__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--color-brand-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-brand-dark);
}

.category-card__icon svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
}

.category-card__name {
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--color-ink);
}

/* ---------- Search bar ---------- */
.search-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: calc(var(--control-h) + 8px);
  padding: 3px 3px 3px var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-sm);
}

.search-bar:focus-within {
  border-color: var(--color-brand);
  outline: 2px solid var(--color-brand);
  outline-offset: -1px;
}

.search-bar input {
  flex: 1;
  min-width: 0; /* lets the box shrink on very narrow phones instead of pushing the page sideways */
  align-self: stretch;
  border: none;
  outline: none;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  background: transparent;
  color: var(--color-ink);
}

.search-bar input::placeholder {
  color: var(--color-ink-faint);
  text-overflow: ellipsis;
}

.search-bar svg {
  width: 18px;
  height: 18px;
  stroke: var(--color-ink-faint);
  fill: none;
  stroke-width: 1.8;
  flex-shrink: 0;
}

.search-bar .btn {
  flex-shrink: 0;
  min-height: var(--control-h);
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--color-footer-bg);
  color: var(--color-footer-text);
  padding-block: var(--space-8) var(--space-6);
}

.site-footer .logo { color: var(--color-footer-strong); }
.site-footer .logo span { color: var(--color-accent); }

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--space-6);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-footer-line);
}

.footer-grid p {
  color: var(--color-footer-soft);
  font-size: var(--fs-sm);
}

.footer-col h4 {
  color: var(--color-footer-strong);
  font-size: var(--fs-sm);
  text-transform: none;
  margin-bottom: var(--space-3);
}

.footer-col ul li {
  margin-bottom: var(--space-2);
}

.footer-col a {
  color: var(--color-footer-soft);
  font-size: var(--fs-sm);
}

.footer-col a:hover { color: var(--color-footer-strong); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding-top: var(--space-5);
  font-size: var(--fs-xs);
  color: var(--color-footer-faint);
}

/* ---------- Filter chips ---------- */
.filter-chip {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  min-height: var(--control-h);
  padding: 0 var(--space-4);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.2;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-line-strong);
  background: var(--color-surface);
  color: var(--color-ink-soft);
  flex-shrink: 0;
}

.filter-chip:hover {
  border-color: var(--color-brand);
  color: var(--color-brand-dark);
}

.filter-chip.is-active {
  background: var(--color-brand);
  border-color: var(--color-brand);
  color: var(--color-on-brand);
}

/* ---------- Shared grids ---------- */
/* Used by home, marketplace, product (related items), vendors, and
   vendor-store — kept here (not in a single page's CSS) so every page
   that renders a product or vendor grid actually gets the layout. */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-5);
}

.vendor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-5);
}

/* Phones: two product cards per row (one on very narrow screens). */
@media (max-width: 640px) {
  .product-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--space-3);
  }

  .vendor-grid {
    gap: var(--space-3);
  }
}

/* ---------- Steps (How it works) ---------- */
/* Used on the homepage and the Become a Vendor page. */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.step {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.step__index {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--color-accent);
}

.step__index::after {
  content: '';
  display: block;
  width: 32px;
  height: 2px;
  background: var(--color-line-strong);
  margin-top: var(--space-3);
}

/* ---------- Benefit / "why" cards ---------- */
/* Used on the homepage ("Why Runnit") and Become a Vendor ("Why sell on Runnit"). */
.why-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}

.why-item {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
}

.why-item__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: var(--color-brand-tint);
  color: var(--color-brand-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.why-item__icon svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
}

.why-item h3 { margin-bottom: var(--space-1); }
.why-item p { margin: 0; font-size: var(--fs-sm); }

@media (max-width: 900px) {
  .steps { grid-template-columns: 1fr; gap: var(--space-5); }
  .why-grid { grid-template-columns: 1fr; }
}

/* ---------- Placeholder / stub page ---------- */
.stub-page {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-8) var(--space-4);
}

.stub-page__inner {
  max-width: 480px;
}

.stub-page__badge {
  margin-bottom: var(--space-4);
}

/* ---------- Empty / no-results states ---------- */
.empty-state {
  text-align: center;
  padding: var(--space-7) var(--space-4);
  border: 1px dashed var(--color-line-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.empty-state h1,
.empty-state h2,
.empty-state h3 {
  font-size: var(--fs-lg);
  font-weight: 600;
  margin-bottom: var(--space-2);
}

/* ---------- Responsive: mobile nav ---------- */
@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }

  /* The open menu itself: see "Phone menu" further down. */

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 900px) {
  .footer-grid .footer-col:first-child { grid-column: 1 / -1; }
}

/* Phones: the link columns sit two side by side, so the footer is short. */
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-5) var(--space-4); }
}

/* Rows that only appear in the phone menu (see layout.js). */
.nav-phone-only { display: none; }

/* ---------- Unread count next to the "Messages" menu link ---------- */
.nav-pill {
  display: inline-block;
  margin-left: 6px;
  min-width: 18px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  vertical-align: middle;
}

/* ---------- Install the app ---------- */
/* The "Install app" row in the phone menu. Desktop has the footer link instead.
   It stays hidden until the browser says Runnit can be installed (see pwa.js). */
.nav-install {
  display: none;
}

@media (max-width: 900px) {
  .nav-install:not([hidden]) {
    display: block;
  }
}

/* The iPhone / iPad "Add to Home Screen" steps */
.install-dialog {
  width: min(92vw, 380px);
  padding: var(--space-5);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-ink);
  box-shadow: var(--shadow-md);
}

.install-dialog::backdrop {
  background: var(--color-scrim-brand);
}

.install-dialog h2 {
  margin-bottom: var(--space-3);
  font-size: var(--fs-lg);
}

.install-dialog ol {
  display: grid;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  padding-left: var(--space-5);
  color: var(--color-ink-soft);
  list-style: decimal;
}

.install-dialog__icon svg {
  width: 18px;
  height: 18px;
  vertical-align: text-bottom;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
}

.install-dialog .btn {
  width: 100%;
}

/* Very narrow phones: the Messages icon needs the room, and Search is in the menu too. */
@media (max-width: 380px) {
  .nav-search {
    display: none;
  }
}

/* ---------- Listing pages: Marketplace and Vendors ---------- */
/* One set of components for both pages: header, search bar, category chips,
   sort control and results. Every section sets its own vertical padding
   (the global `section` rule is far larger) and the toolbar spaces its
   children with `gap`, so nothing touches or overlaps. */
.listing-header {
  padding-block: var(--space-6) var(--space-5);
}

.listing-header h1 {
  font-size: var(--fs-2xl);
  margin-bottom: var(--space-2);
}

.listing-header p {
  margin: 0;
  font-size: var(--fs-base);
  text-wrap: pretty;
}

.listing-toolbar {
  padding-block: 0 var(--space-5);
}

.listing-toolbar > .container {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.listing-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-4);
}

.listing-controls__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.results-count {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--color-ink-soft);
}

.sort-control {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--color-ink-soft);
}

.sort-control select {
  min-height: var(--control-h);
  padding: 0 36px 0 var(--space-3);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--color-ink);
  background-color: var(--color-surface);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%234E5A54' stroke-width='1.6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-sm);
  appearance: none;
  -webkit-appearance: none;
}

.sort-control select:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: -1px;
  border-color: var(--color-brand);
}

.listing-results {
  padding-block: 0 var(--space-8);
}

@media (max-width: 640px) {
  .listing-header {
    padding-block: var(--space-5) var(--space-4);
  }

  .listing-header h1 {
    font-size: var(--fs-xl);
  }

  .listing-toolbar {
    padding-block: 0 var(--space-4);
  }

  .listing-results {
    padding-block: 0 var(--space-7);
  }

  /* one scrolling row of chips that runs to the screen edge, so a chip
     cut off at the edge reads as "scroll for more", not as a mistake */
  .filter-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-inline: calc(var(--space-4) * -1);
    padding-inline: var(--space-4);
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }

  .filter-chips::-webkit-scrollbar {
    display: none;
  }

  .listing-controls__tools {
    width: 100%;
  }

  .sort-control {
    flex: 1;
  }

  .sort-control select {
    flex: 1;
    min-width: 0;
  }
}

/* ---------- Touch targets ---------- */
/* On phones and tablets every control gets at least a 44px tap area
   (the size Apple and Google recommend). Buttons, chips, search boxes and
   selects all read --control-h, so one change keeps them lined up. */
@media (max-width: 640px), (pointer: coarse) {
  :root {
    --control-h: 44px;
  }

  .logo {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .icon-btn,
  .nav-toggle {
    width: 44px;
    height: 44px;
  }

  .nav-actions {
    gap: var(--space-1);
  }

  .btn-sm {
    min-height: 44px;
  }

  .qty-stepper button {
    width: 44px;
    height: 44px;
  }

  .form-group input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  .form-group textarea,
  .form-group select {
    min-height: 48px;
  }

  .footer-col ul li {
    margin-bottom: 0;
  }

  .footer-col a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
}

@media (max-width: 360px) {
  .nav-bar {
    gap: var(--space-2);
  }
}

/* ---------- Spam trap and consent lines ---------- */
/* A form box that real people never see (it sits far off-screen and can't be
   tabbed to). Bots fill every box they find, which gives them away. */
.hp-field {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-consent {
  margin: var(--space-3) 0;
  font-size: var(--fs-xs);
  color: var(--color-ink-soft);
}

.form-consent a {
  color: var(--color-brand);
  font-weight: 600;
  text-decoration: underline;
}

/* Footer links to the legal pages: roomy enough to tap on a phone */
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
}

.footer-legal a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--color-footer-soft);
  text-decoration: underline;
}

.footer-legal a:hover {
  color: var(--color-footer-strong);
}

/* ---------- Campus choice ---------- */
/* The "Campus: Osogbo" row in the header menu. Last in the desktop nav; first in the phone menu. */
.nav-campus {
  order: 99;
}
.nav-campus a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.nav-campus svg {
  width: 18px;
  height: 18px;
  flex: none;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
}
@media (max-width: 900px) {
  .nav-links.is-open .nav-campus {
    order: -1;
  }
}

/* The campus picker reuses the install-dialog look. */
.campus-dialog {
  max-height: 90dvh;
  overflow-y: auto;
}
.campus-dialog h2:focus,
.campus-dialog h2:focus-visible {
  outline: none;
}
.campus-dialog__intro {
  margin: 0 0 var(--space-4);
  color: var(--color-ink-soft);
}
.campus-dialog__list {
  display: grid;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
}
.campus-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  min-height: 56px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.campus-option strong {
  font-size: var(--fs-md);
}
.campus-option span {
  font-size: var(--fs-xs);
  color: var(--color-ink-soft);
}
.campus-option:hover,
.campus-option:focus-visible,
.campus-option[aria-current="true"] {
  border-color: var(--color-brand);
  background: var(--color-brand-tint);
}

/* "Showing vendors and products at ... Change campus" */
.campus-note {
  margin-top: var(--space-3);
  font-size: var(--fs-sm);
  color: var(--color-ink-soft);
}
.campus-note:empty {
  display: none;
}
.campus-link {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--color-brand-dark);
  text-decoration: underline;
  cursor: pointer;
}
.field-hint {
  display: block;
  margin-top: 4px;
  font-size: var(--fs-xs);
  color: var(--color-ink-soft);
}

/* ---------- A campus with no vendors yet (campus.js: noVendorsHtml) ---------- */
.campus-empty {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  max-width: 560px;
  margin: 0 auto;
}
.campus-empty h2 { margin-bottom: 0; }
.campus-empty p { color: var(--color-ink-soft); margin: 0; }
.campus-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--color-brand-tint);
}
.campus-empty__icon svg {
  width: 40px;
  height: 40px;
  fill: none;
  stroke: var(--color-brand);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.campus-empty__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
}
/* Roomy, easy to tap on phones. */
.campus-empty__actions .btn { min-height: 48px; padding-inline: var(--space-5); }
@media (max-width: 480px) {
  .campus-empty__actions { flex-direction: column; width: 100%; }
  .campus-empty__actions .btn { width: 100%; }
}

/* ============================================
   DARK MODE SWITCH (js/modules/theme.js)
   ============================================ */
/* Both icons are in the button; CSS shows the right one, so a saved copy of
   the header never shows the wrong icon. Moon = "go dark", sun = "go light". */
.theme-icon { display: inline-flex; }
.theme-icon--sun { display: none; }
:root[data-theme="dark"] .theme-icon--moon { display: none; }
:root[data-theme="dark"] .theme-icon--sun { display: inline-flex; }
.theme-icon svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The "Dark mode  On/Off" row lives in the phone menu only; computers get the icon. */
.nav-theme-row { display: none; }

@media (max-width: 900px) {
  .nav-theme { display: none; }
}

/* Small dark-mode-only touches that a colour token can't reach. */
:root[data-theme="dark"] .sort-control select {
  /* the arrow is an image, so it gets its own light-grey version */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23B1C3B8' stroke-width='1.6'/></svg>");
}
:root[data-theme="dark"] img.has-error,
:root[data-theme="dark"] .product-card__media img,
:root[data-theme="dark"] .vendor-card__media img {
  /* photos a touch dimmer at night, so they don't glare */
  filter: brightness(0.92);
}

/* ======================================================================
   Reviews, reports and blocking (js/modules/trustUi.js, orderActions.js)
   ====================================================================== */
.link-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-brand-dark);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.link-button:hover { color: var(--color-brand); }

/* ---- Stars (display) ---- */
.stars {
  display: inline-flex;
  gap: 2px;
  vertical-align: middle;
}
.stars__star svg {
  width: 16px;
  height: 16px;
  fill: var(--color-line-strong);
  stroke: none;
}
.stars__star.is-on svg { fill: var(--color-accent); }
.stars--small .stars__star svg { width: 13px; height: 13px; }

/* ---- Star picker (giving a rating) ---- */
.star-picker {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: var(--space-2) 0 var(--space-3);
}
.star-picker label {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.star-picker label svg {
  width: 30px;
  height: 30px;
  fill: var(--color-line-strong);
  stroke: none;
  transition: fill var(--transition-fast, 0.15s), transform 0.15s;
}
.star-picker[data-value="1"] label:nth-of-type(-n + 1) svg,
.star-picker[data-value="2"] label:nth-of-type(-n + 2) svg,
.star-picker[data-value="3"] label:nth-of-type(-n + 3) svg,
.star-picker[data-value="4"] label:nth-of-type(-n + 4) svg,
.star-picker[data-value="5"] label:nth-of-type(-n + 5) svg {
  fill: var(--color-accent);
}
.star-picker label:hover svg { transform: scale(1.12); }
.star-picker input:focus-visible + label {
  outline: 2px solid var(--color-brand);
  outline-offset: 1px;
}
.star-picker__word {
  margin-left: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-ink-soft);
}

/* ---- Under each order: received / rate / report ---- */
.order-actions {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--color-line);
}
.order-actions p { margin: 0; }
.order-actions__received {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-brand-tint);
}
.order-actions__received p { font-size: var(--fs-sm); color: var(--color-ink); }
.order-actions__received .btn { justify-self: start; }
.order-actions__label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-ink);
}
.order-actions__hidden { font-weight: 400; color: var(--color-ink-faint); }
.order-actions__mine {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-1) 0 var(--space-2);
}
.order-actions__mine q {
  font-size: var(--fs-sm);
  color: var(--color-ink-soft);
}
.order-actions__form textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-ink);
  font: inherit;
  font-size: var(--fs-sm);
  resize: vertical;
}
.order-actions__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.order-actions__error {
  margin-top: var(--space-2) !important;
  font-size: var(--fs-sm);
  color: var(--color-danger);
}
.order-actions__report {
  justify-self: start;
  color: var(--color-ink-soft);
  font-weight: 500;
}
.order-actions__dispute {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-accent-tint);
  font-size: var(--fs-sm);
  color: var(--color-ink);
}

/* The vendor marked it Ready: "I received my order" is the step that gets them
   paid, so it stands out (orderActions.js). "is-flash" = arrived from a reminder. */
.order-actions__received--ready {
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--color-brand);
  border-left-width: 4px;
}
.order-actions__received--ready .order-actions__received-title {
  font-weight: 700;
  font-size: var(--fs-base);
}
.order-actions__received--ready .btn { min-width: 200px; }
.order-actions__received--ready p { max-width: none; }
.order-actions__due {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  color: var(--color-ink-soft) !important;
  font-size: var(--fs-xs) !important;
  line-height: 1.5;
}
.order-actions__due svg {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
}
.order-actions__due strong { color: var(--color-ink); font-weight: 600; }
.order-actions__received.is-flash { animation: received-flash 1.6s ease-out 1; }
@keyframes received-flash {
  0%, 30% { box-shadow: 0 0 0 4px var(--color-accent); }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* ---- Under the header on every page: "Got your order from …?" (receivedReminder.js) ---- */
.confirm-strip {
  background: var(--color-brand-tint);
  border-bottom: 1px solid var(--color-line);
  animation: confirm-strip-in 0.25s ease-out;
}
.confirm-strip__inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-3);
}
.confirm-strip__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-brand);
}
.confirm-strip__icon svg,
.confirm-strip__close svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
}
.confirm-strip__text {
  flex: 1;
  max-width: none;
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--color-ink);
  line-height: 1.45;
}
.confirm-strip__text span { color: var(--color-ink-soft); }
.confirm-strip__go { flex: none; }
.confirm-strip__close {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-ink-soft);
  cursor: pointer;
}
.confirm-strip__close:hover { background: var(--color-surface); color: var(--color-ink); }
@keyframes confirm-strip-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}
/* Phones: the text gets the full width, the button and × sit under it. */
@media (max-width: 600px) {
  .confirm-strip__inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "icon text close"
      ".    go   go";
    align-items: start;
    gap: var(--space-2) var(--space-3);
  }
  .confirm-strip__icon { grid-area: icon; }
  .confirm-strip__text { grid-area: text; padding-top: 7px; }
  .confirm-strip__close { grid-area: close; margin-right: calc(var(--space-2) * -1); }
  .confirm-strip__go { grid-area: go; justify-self: start; }
}

/* A dot on the phone menu button when "My orders" inside it has a count. */
.nav-toggle { position: relative; }
.nav-toggle.has-dot::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 7px;
  width: 9px;
  height: 9px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  box-shadow: 0 0 0 2px var(--color-surface);
}
.nav-toggle.has-dot[aria-expanded="true"]::after { display: none; }

@media (prefers-reduced-motion: reduce) {
  .confirm-strip,
  .order-actions__received.is-flash { animation: none; }
  .order-actions__received.is-flash { box-shadow: 0 0 0 3px var(--color-accent); }
}

/* ---- Report / confirm dialogs ---- */
.trust-dialog { width: min(94vw, 420px); }
.trust-dialog__form { margin: 0; }
.trust-dialog__text {
  margin: 0 0 var(--space-4);
  color: var(--color-ink-soft);
  font-size: var(--fs-sm);
}
.trust-dialog__reasons {
  display: grid;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  padding: 0;
  border: 0;
}
.trust-dialog__reasons legend {
  margin-bottom: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.trust-reason,
.trust-check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  cursor: pointer;
}
.trust-reason:has(input:checked) {
  border-color: var(--color-brand);
  background: var(--color-brand-tint);
}
.trust-reason input,
.trust-check input {
  margin-top: 2px;
  accent-color: var(--color-brand);
}
.trust-check { margin-top: var(--space-3); border: 0; padding: 0; }
.trust-dialog__label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.trust-dialog__label span { font-weight: 400; color: var(--color-ink-faint); }
.trust-dialog textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-ink);
  font: inherit;
  font-size: var(--fs-sm);
  resize: vertical;
}
.trust-dialog__error {
  margin: var(--space-3) 0 0;
  font-size: var(--fs-sm);
  color: var(--color-danger);
}
.trust-dialog .btn { width: 100%; margin-top: var(--space-3); }
.trust-dialog .btn + .btn { margin-top: var(--space-2); }
.trust-dialog__danger {
  background: var(--color-danger);
  border-color: var(--color-danger);
  color: var(--color-on-danger);
}
.trust-dialog__danger:hover { background: var(--color-danger-strong); border-color: var(--color-danger-strong); }
.trust-dialog__done {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: var(--space-3);
  border-radius: 50%;
  background: var(--color-brand-tint);
}
.trust-dialog__done svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: var(--color-brand-dark);
  stroke-width: 2.2;
}

/* ---- Reviews on product and store pages ---- */
.reviews-section {
  margin-top: var(--space-7);
}
.reviews-section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.reviews-section__head h2 { font-size: var(--fs-xl); margin: 0; }
.reviews-section__head p { margin: 0; font-size: var(--fs-sm); color: var(--color-ink-soft); }
.reviews__empty {
  padding: var(--space-5);
  border: 1px dashed var(--color-line-strong);
  border-radius: var(--radius-md);
  color: var(--color-ink-soft);
  text-align: center;
}
.reviews__summary {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-5);
  align-items: center;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.reviews__score { display: grid; justify-items: center; gap: 4px; }
.reviews__score strong { font-family: var(--font-display); font-size: var(--fs-3xl); line-height: 1; }
.reviews__score > span:last-child { font-size: var(--fs-xs); color: var(--color-ink-soft); }
.reviews__bars { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.reviews__bars li {
  display: grid;
  grid-template-columns: 10px 12px 1fr 24px;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  color: var(--color-ink-soft);
}
.reviews__bars svg { width: 12px; height: 12px; fill: var(--color-accent); stroke: none; }
.reviews__bar {
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--color-bg-alt);
  overflow: hidden;
}
.reviews__bar span { display: block; height: 100%; background: var(--color-accent); border-radius: inherit; }
.reviews__n { text-align: right; }
.reviews__list { display: grid; gap: var(--space-3); margin: var(--space-4) 0 0; padding: 0; list-style: none; }
.review {
  padding: var(--space-4);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.review__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.review__head strong { font-size: var(--fs-sm); }
.review__badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--color-brand-dark);
}
.review__badge svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.4; }
.review__text { margin: var(--space-2) 0 0; font-size: var(--fs-sm); color: var(--color-ink); overflow-wrap: anywhere; }
.review__meta { margin: var(--space-2) 0 0; font-size: var(--fs-xs); color: var(--color-ink-faint); }
.rating__count { font-weight: 400; color: var(--color-ink-soft); }

/* "Report this listing / store" link at the bottom of a page */
.report-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-5);
  color: var(--color-ink-soft);
  font-weight: 500;
  text-decoration: none;
}
.report-link svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.report-link:hover { color: var(--color-danger); }

@media (max-width: 480px) {
  .reviews__summary { grid-template-columns: 1fr; gap: var(--space-3); }
}

/* ======================================================================
   Navigation helpers
   ====================================================================== */
/* "Marketplace / Food & Drinks", "My account / Your store": where you are,
   and one tap back. Sits just above a page's title. */
.page-crumbs,
.listing-header .page-crumbs {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-xs);
  color: var(--color-ink-faint);
  overflow-wrap: anywhere;
}
.page-crumbs a { color: var(--color-ink-soft); }
.page-crumbs a:hover { color: var(--color-brand-dark); }
.page-crumbs span[aria-hidden] { margin: 0 4px; }

/* A vendor's own pages: Orders · Products · Inbox */
.store-tabs {
  display: flex;
  gap: var(--space-5);
  margin: 0 0 var(--space-4);
  border-bottom: 1px solid var(--color-line);
  overflow-x: auto;
}
.store-tabs a {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  color: var(--color-ink-soft);
  font-weight: 600;
  font-size: var(--fs-sm);
}
.store-tabs a:hover { color: var(--color-ink); }
.store-tabs a[aria-current="page"] {
  color: var(--color-brand-dark);
  border-bottom-color: var(--color-brand);
}

/* ======================================================================
   "Can't find it on Runnit? Request it" (js/modules/requests.js)
   The form reuses the report dialog's look (.trust-dialog).
   ====================================================================== */
.request-cta {
  margin: var(--space-5) 0 0;
  text-align: center;
  color: var(--color-ink-soft);
  font-size: var(--fs-sm);
}
.empty-state__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.request-dialog__input {
  width: 100%;
  min-height: 44px;
  margin-bottom: var(--space-4);
  padding: 10px 12px;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-ink);
  font: inherit;
  font-size: var(--fs-base);
}
.request-dialog__input:focus,
.trust-dialog textarea:focus {
  outline: none;
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px var(--color-brand-tint);
}
.request-dialog__money {
  position: relative;
}
.request-dialog__money > span {
  position: absolute;
  left: 12px;
  top: 11px;
  color: var(--color-ink-soft);
  font-weight: 600;
}
.request-dialog__money .request-dialog__input {
  padding-left: 30px;
}
.trust-dialog__hint {
  margin: var(--space-2) 0 0;
  font-size: var(--fs-xs);
  color: var(--color-ink-faint);
}

/* ======================================================================
   Phone menu (the ☰ button, screens up to 900px wide; built in layout.js)
   A full-screen layer of its own under the header, with its own scrolling
   (the website behind it is never locked or changed, so it can't get stuck).
   It shows the campus on top, then
   rounded cards of rows, each with a small icon tile:
     Home · Marketplace · Vendors · Messages · (My wallet, for store logins) · Become a Vendor
     YOUR ACCOUNT   My account & orders · Your requests · Help & support
     YOUR STORE     your store(s), "Support inbox" for the Runnit team
     APP            Install app · Dark mode (a switch)
   On a computer none of this shows: the links stay plain words in the bar.
   ====================================================================== */
.nav-ico { display: none; }
.nav-section { display: none; }

@media (max-width: 900px) {
  .nav-links.is-open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    height: calc(100vh - var(--header-height));
    height: calc(100dvh - var(--header-height));
    padding: var(--space-3) var(--space-4) calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
    background: var(--color-bg);
    border-top: 1px solid var(--color-line);
    /* its own scroll area: scrolling it never moves the page, and the page is never locked */
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    animation: nav-sheet-in 180ms ease-out;
  }

  .nav-links.is-open .nav-phone-only,
  .nav-links.is-open .nav-section { display: block; }

  /* Small grey heading above a card */
  .nav-links.is-open .nav-section {
    margin: var(--space-5) 0 var(--space-2);
    padding: 0 var(--space-2);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-ink-faint);
  }

  /* A row is part of a white card; the first and last rows round its corners. */
  .nav-links.is-open .nav-row {
    background: var(--color-surface);
    border-inline: 1px solid var(--color-line);
  }
  .nav-links.is-open .nav-row.nav-first {
    border-top: 1px solid var(--color-line);
    border-radius: 16px 16px 0 0;
  }
  .nav-links.is-open .nav-row.nav-last {
    border-bottom: 1px solid var(--color-line);
    border-radius: 0 0 16px 16px;
    box-shadow: var(--shadow-sm);
  }
  .nav-links.is-open .nav-row.nav-first.nav-last,
  .nav-links.is-open .nav-install[hidden] + .nav-theme-row {
    border-top: 1px solid var(--color-line);
    border-radius: 16px;
  }
  .nav-links.is-open .nav-row > a,
  .nav-links.is-open .nav-theme-row__btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 58px;
    padding: 9px 14px;
    border: none;
    border-radius: inherit;
    background: none;
    color: var(--color-ink);
    font: 600 var(--fs-base) var(--font-body);
    text-align: left;
  }

  /* A thin line between rows, starting after the icon (like a phone's settings). */
  .nav-links.is-open .nav-row:not(.nav-first) > a::before,
  .nav-links.is-open .nav-row:not(.nav-first) > .nav-theme-row__btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: 64px;
    right: 0;
    border-top: 1px solid var(--color-line);
  }
  .nav-links.is-open .nav-install[hidden] + .nav-theme-row > .nav-theme-row__btn::before {
    display: none;
  }

  /* "Tap to go" arrow */
  .nav-links.is-open .nav-row > a::after {
    content: "";
    flex: none;
    width: 7px;
    height: 7px;
    margin: 0 4px 0 auto;
    border-top: 2px solid var(--color-ink-faint);
    border-right: 2px solid var(--color-ink-faint);
    transform: rotate(45deg);
  }

  .nav-links.is-open .nav-row > a:hover,
  .nav-links.is-open .nav-row > a:active,
  .nav-links.is-open .nav-theme-row__btn:hover {
    background: var(--color-bg-alt);
  }

  /* The icon tile */
  .nav-links.is-open .nav-ico {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: var(--color-brand-tint);
    color: var(--color-brand-dark);
  }
  .nav-links.is-open .nav-ico svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .nav-links.is-open .nav-ico .theme-icon svg { width: 20px; height: 20px; }
  /* a store's first letter, in the store colours from My account */
  .nav-links.is-open .nav-ico--store {
    background: var(--color-accent-tint);
    color: var(--color-accent-dark);
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
  }

  .nav-links.is-open .nav-label {
    flex: 1;
    min-width: 0;
    display: grid;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .nav-links.is-open .nav-label > span {
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .nav-links.is-open .nav-label small {
    font-size: var(--fs-xs);
    font-weight: 500;
    color: var(--color-ink-soft);
  }
  /* the unread count next to "Messages" */
  .nav-links.is-open .nav-label + .nav-pill {
    margin-left: -6px;
  }

  /* The page you're on */
  .nav-links.is-open .nav-row > a[aria-current="page"] {
    color: var(--color-brand-dark);
    background: color-mix(in srgb, var(--color-brand-tint) 55%, transparent);
  }
  .nav-links.is-open .nav-row > a[aria-current="page"] .nav-ico {
    background: var(--color-brand);
    color: var(--color-on-brand);
  }

  /* Campus: its own small card on top, with "Change" on the right */
  .nav-links.is-open .nav-campus:not([hidden]) {
    display: block;
    margin-bottom: var(--space-3);
  }
  .nav-links.is-open .nav-campus a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 6px 8px 6px 14px;
    border: 1px solid color-mix(in srgb, var(--color-brand) 22%, transparent);
    border-radius: 14px;
    background: var(--color-brand-tint);
    color: var(--color-brand-dark);
    font-size: var(--fs-sm);
    font-weight: 700;
  }
  .nav-links.is-open .nav-campus a::after {
    content: "Change";
    margin-left: auto;
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-brand-dark);
    font-size: var(--fs-xs);
    font-weight: 700;
    box-shadow: var(--shadow-sm);
  }

  /* Install app: shows only when the browser offers it (pwa.js) */
  .nav-links.is-open .nav-install[hidden] { display: none; }

  /* Dark mode: an on/off switch instead of a word */
  .nav-links.is-open .nav-theme-row { display: block; }
  .nav-links.is-open .nav-theme-row__state {
    position: relative;
    flex: none;
    width: 46px;
    height: 28px;
    margin-left: auto;
    padding: 0;
    border-radius: 14px;
    background: var(--color-line-strong);
    font-size: 0;
    color: transparent;
    transition: background-color 160ms ease;
  }
  .nav-links.is-open .nav-theme-row__state::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    transition: transform 160ms ease;
  }
  .nav-links.is-open .nav-theme-row__btn[aria-pressed="true"] .nav-theme-row__state {
    background: var(--color-brand);
  }
  .nav-links.is-open .nav-theme-row__btn[aria-pressed="true"] .nav-theme-row__state::after {
    transform: translateX(18px);
  }
}

@keyframes nav-sheet-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-links.is-open { animation: none; }
  .nav-links.is-open .nav-theme-row__state,
  .nav-links.is-open .nav-theme-row__state::after { transition: none; }
}

/* The floating "Ask Runnit AI" button would sit on top of the menu's last rows. */
html:has(.nav-links.is-open) .ask-launcher { display: none; }

/* "My orders" in the header: computers only (phones have it in the menu). */
@media (max-width: 900px) {
  .nav-orders { display: none; }
}

/* ======================================================================
   Store links: the "Share" box (js/modules/storeShare.js), used on the store
   page, the vendor's Orders page ("Your store link") and in Admin.
   ====================================================================== */
.share-dialog {
  position: relative;
  width: min(92vw, 420px);
  padding: var(--space-5);
  border: 1px solid var(--color-line);
  border-radius: 20px;
  background: var(--color-surface);
  color: var(--color-ink);
  box-shadow: var(--shadow-md);
}
.share-dialog::backdrop { background: var(--color-scrim-brand); }

.share-dialog__head {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding-right: 36px;
  margin-bottom: var(--space-4);
}
.share-dialog__head h2 {
  margin: 0 0 4px;
  font-size: var(--fs-lg);
  overflow-wrap: anywhere;
}
.share-dialog__head p {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--color-ink-soft);
}
.share-dialog__icon,
.store-link-card__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: var(--color-brand-tint);
  color: var(--color-brand-dark);
}
.share-dialog svg,
.store-link-card svg,
.store-share-btn svg,
.share-whatsapp svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.share-dialog__label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.share-link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px 4px 4px 12px;
  border: 1px solid var(--color-line-strong);
  border-radius: 12px;
  background: var(--color-bg);
}
.share-link input {
  flex: 1;
  min-width: 0;
  padding: 8px 0;
  border: none;
  background: transparent;
  color: var(--color-ink);
  font: 600 var(--fs-sm) var(--font-body);
  outline: none;
}
.share-link .btn { flex: none; }

.share-whatsapp,
.share-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  min-height: 48px;
  margin-top: var(--space-3);
}
.share-whatsapp {
  border: none;
  background: #1FA855;   /* WhatsApp green: people recognise it at a glance */
  color: #FFFFFF;
  font-weight: 700;
}
.share-whatsapp:hover { background: #178C46; color: #FFFFFF; }

.share-dialog__status {
  min-height: 1.4em;
  margin: var(--space-2) 0 0;
  font-size: var(--fs-xs);
  color: var(--color-brand-dark);
  text-align: center;
}
.share-dialog__close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: var(--color-bg-alt);
  color: var(--color-ink);
}

/* "Share store" on the store page, next to Contact Vendor */
.store-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

/* "Your store link" on the vendor's Orders page */
.store-link-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid color-mix(in srgb, var(--color-brand) 25%, transparent);
  border-radius: 16px;
  background: var(--color-brand-tint);
}
.store-link-card__text {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 2px;
}
.store-link-card__text strong { font-size: var(--fs-sm); }
.store-link-card__url {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-brand-dark);
  font-weight: 600;
  font-size: var(--fs-sm);
}
.store-link-card__note {
  font-size: var(--fs-xs);
  color: var(--color-danger);
}
.store-link-card__actions {
  flex: none;
  display: flex;
  gap: var(--space-2);
}
.store-link-card__actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.store-link-card__actions svg { width: 17px; height: 17px; }

@media (max-width: 640px) {
  .store-link-card { flex-wrap: wrap; }
  .store-link-card__text { flex-basis: calc(100% - 60px); }
  .store-link-card__actions { width: 100%; }
  .store-link-card__actions .btn { flex: 1; justify-content: center; }
}