/* ---------- Store page (js/store-page.js; renderStore in js/entity-pages.js) ----------
   Feature prefix .st-. Phone first, one column; the wide layout (1200px and wider, EH_WIDE_MIN in js/entity-header.js) follows the Market layout. The header is the shared
   entity header (css/entity-header.css), the same as the Market page. */

/* The header rhythm on a phone: the same as the Market page (css/market-page.css). */
.st-layout .eh-facts-2 { margin-top: 25px; }

/* A text link that opens or scrolls somewhere on this page: 44 px tall hit area, the text stays 14 px. */
.st-link {
  display: inline-flex;
  align-items: center;
  position: relative;
  min-height: 0;
  line-height: 22px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--brand-text);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* The 44 px hit area comes from an invisible box around the 22 px line, so the visible lines can sit close together. */
.st-link::before {
  content: "";
  position: absolute;
  top: -12px;
  bottom: -12px;
  left: -8px;
  right: -8px;
}

.st-link:focus-visible {
  outline: 2px solid var(--brand-text);
  outline-offset: 2px;
}

/* The header's three-dot menu: the same 44 px box as the heart beside it. */
.st-menu .row-menu-btn {
  width: 44px;
  height: 44px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.st-menu .row-menu-btn::after { content: none; }

/* The ownership chips (Owner-managed, Boosted) arrive from a request. Their 22 px row is ALWAYS kept on a Store page, filled or not:
   holding it only while pending collapsed it on every unclaimed store (CLS 0.21), and holding nothing pushed every claimed store
   down when its chip arrived (CLS 0.24); measured 2026-11-04. The cost is a blank 22 px row under the name of an unclaimed store
   (founder to confirm). */
.st-owner-slot { display: flex; flex-wrap: wrap; gap: 6px; min-height: 22px; }

/* The buttons: Report a price (primary) fills the row alone; Message (secondary) shares it half and half once the store is
   known to be claimed. Both 48 px tall, so the answer arriving changes no height. */
.st-actions {
  display: flex;
  gap: 12px;
}

/* The owner menu item is hidden until the answer says so; the dropdown rule sets display:block, which would beat [hidden]. */
.st-menu a[hidden] { display: none; }

.st-actions .btn {
  flex: 1 1 0;
  min-width: 0;
  min-height: 48px;
  width: auto;
}

/* The line under the buttons. Its room is reserved from the first paint. */
.st-claim-line {
  margin: 8px 0 0;
  min-height: 22px;
  font-size: 14px;
  line-height: 22px;
  color: var(--text-muted);
}

.st-claim-line a { color: var(--brand-text); font-weight: 600; }

.st-description { margin: 12px 0 0; font-size: 14px; line-height: 1.45; color: var(--text); }

/* ---------- Catalogue ---------- */
/* A block (subcategory): the title with its Filter button, then a grid of compact product rows. The columns keep a fixed
   size (auto-fill, not auto-fit), so a block with one product keeps the width of ONE row instead of stretching across. */
.st-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.st-block-title { min-width: 0; margin: 0; overflow-wrap: anywhere; }

.st-filter-btn {
  flex: none;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.st-filter-btn:focus-visible,
.st-prow-head:focus-visible,
.st-vrow:focus-visible {
  outline: 2px solid var(--brand-text);
  outline-offset: 2px;
}

/* "Showing 2 of 3 · Clear" */
.st-block-status {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
  font-size: 14px;
  color: var(--text-muted);
}

.st-empty { margin: 4px 0 0; }

.st-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 8px;
  align-items: start;
}

.st-prow {
  min-width: 0;
  background: var(--surface-2);
  border-radius: var(--radius-lg);
}

/* An expanded row spans the whole grid width. */
.st-prow.is-open { grid-column: 1 / -1; }

.st-prow-head {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 64px;
  padding: 10px 12px;
  border: none;
  border-radius: var(--radius-lg);
  background: none;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.st-prow-tile {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
}

.st-prow-tile svg { width: 20px; height: 20px; }

.st-prow-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.st-prow-name { font-size: 16px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.st-prow-price { font-size: 14px; font-weight: 600; color: var(--brand-text); }
.st-prow-options { font-size: 14px; color: var(--text-muted); }

.st-prow-chevron { flex: none; color: var(--text-muted); transition: transform 0.2s ease; }
.st-prow.is-open .st-prow-chevron { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .st-prow-chevron { transition: none; } }

/* A product with every option out of stock: greyed, no button. */
.st-prow.is-out .st-prow-name,
.st-prow.is-out .st-prow-price { color: var(--text-muted); }
.st-prow.is-out .st-prow-tile { opacity: 0.5; }
.st-prow.is-out .st-prow-price { font-weight: 400; }

.st-prow-panel { padding: 0 12px 12px; }

.st-vrows { display: flex; flex-direction: column; gap: 6px; }

.st-vrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  text-align: left;
}

button.st-vrow { cursor: pointer; }

.st-vrow.is-selected {
  border-color: var(--brand-text);
  background: var(--brand-tint);
}

.st-vrow-label { min-width: 0; overflow-wrap: anywhere; }
.st-vrow-price { flex: none; font-weight: 600; }

.st-vrow.out { color: var(--text-muted); }
.st-vrow.out .st-vrow-price { font-weight: 400; text-decoration: line-through; }

.st-check { width: 100%; margin-top: 10px; }

/* ---------- Page layout ---------- */
/* Phone, one column in this order: the header (with its buttons and the description), the catalogue, the recently reported
   prices, the reviews. The map and the routes are not in the page: they open in the Directions sheet. */
.st-layout {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "header" "stores" "prices" "reviews";
  column-gap: 0;
  align-items: start;
}

.st-col-side { display: contents; }
.st-col-side > #storePriceReportsSection { grid-area: prices; min-width: 0; }

/* Wide layout (1200px and wider, EH_WIDE_MIN): the header, the catalogue and the reviews in the left column; the side column to the right with
   the map card first, then the routes card (a store in a market), then the recently reported prices (the DOM has them in the
   reverse order). The map is always shown. */
@media (min-width: 1200px) { /* EH_WIDE_MIN */
  .st-layout {
    grid-template-columns: minmax(0, 1fr) 320px;
    grid-template-areas: "header side" "stores side" "reviews side";
    column-gap: 24px;
  }

  .st-col-side {
    grid-area: side;
    display: flex;
    flex-direction: column-reverse;
    min-width: 0;
  }

  .st-col-side > #storePriceReportsSection { grid-area: auto; }

  /* The Directions link and its dot are for the phone (they open the sheet); desktop has the map card. */
  .st-dir-link,
  .st-dir-sep { display: none; }
}

.st-map-card:focus { outline: none; }
.st-map-card:focus-visible { outline: 2px solid var(--brand-text); outline-offset: 4px; }
.st-pin-note { margin: 0; padding: 14px; }
.st-gmaps { padding: 12px 14px 0; }
.st-gmaps .btn { width: 100%; min-height: 48px; }

/* The Store page's reviews keep their markup (css/reviews.css, shared with the Market and Product pages): 44 px hit areas. */
.st-layout .market-col-reviews .review-controls { gap: 16px 8px; }
.st-layout .market-col-reviews .review-filter-group { gap: 8px; }
.st-layout .market-col-reviews .review-filter-btn { min-height: 44px; min-width: 44px; padding: 0 12px; }
.st-layout .market-col-reviews .review-select-group select { min-height: 44px; }

/* The top bar is sticky (css/header-nav.css). Scroll targets on this page stop below it. */
#stMapCard,
#stCatalogueHeading { scroll-margin-top: calc(var(--topbar-h, 96px) + 12px); }

/* The trailing Directions link on the location line (phone): a small map icon, then the text. */
.st-dir-link { gap: 4px; }
.st-dir-icon { flex: none; }

/* The map and address lines, in the desktop map card and in the sheet. */
.st-address { margin: 0; padding: 10px 14px 0; }
#stSheet .st-address { padding: 12px 0 0; }
.st-pinfix { margin: 0; padding: 4px 14px 0; }
#stSheet .st-pinfix { padding: 4px 0 0; }
#stSheet .st-gmaps { padding: 12px 0 0; }
#stSheet .st-pin-note { padding: 14px 0; }
#stSheet .market-minimap { height: 200px; margin-bottom: 0; }
#stSheet #directionsSection { padding-top: 4px; }
#stSheet #directionsSection > .section-title { display: none; }

/* A store with no catalogue: one compact card, about 80 px. */
.st-empty-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  margin: 12px 0;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.st-empty-line { margin: 0; font-size: 14px; line-height: 22px; color: var(--text-muted); }
.st-empty-link { margin: 0; }

/* The claim line while the answer is pending (rule 6): the shared .eh-pending pill, sized like a short line of text. */
.st-claim-pending { width: 180px; max-width: 100%; }