/* ---------- Product page (js/product-page.js, Pass A) ----------
   Feature prefix .pp-. Reuses the Market and Store page patterns: .side-card (detail-pages.css) for the right column,
   .chips and .toggle-row (cards-chips.css) for the controls, .vendor-row for the list. Loaded last, so its rules win
   over the detail-page ones at equal specificity. */

/* Header (the shared entity header in css/entity-header.css) holds the avatar, name and facts. This file keeps the rest. */

.pp-note { color: var(--text-muted); font-size: 14px; }

/* Set your location: one thin banner above the vendor list, shown only until a location is set. */
.pp-locate {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin-bottom: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--brand-tint);
}

.pp-locate p { margin: 0; font-size: 14px; }

.pp-where > .pp-locate { order: 0; }

/* Two-column body (from 1100px, see the end of this file). Below that it is one column in DOM order: main (tabs and
   vendor list), then the price side. */
.pp-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "main" "side";
  margin-top: 16px;
}

.pp-col-main { grid-area: main; min-width: 0; }

.pp-col-side { grid-area: side; min-width: 0; margin-top: 16px; }

/* Tabs. A third tab only needs its button and panel (see bindProductTabs()). */
.pp-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}

.pp-tab {
  padding: 10px 14px;
  margin-bottom: -1px;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--text-muted);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

.pp-tab:hover { color: var(--text); }

.pp-tab[aria-selected="true"] {
  color: var(--brand-text);
  border-bottom-color: var(--brand-text);
  font-weight: 600;
}

.pp-tab:focus-visible {
  outline: 2px solid var(--brand-text);
  outline-offset: -2px;
  border-radius: var(--radius-sm);
}

/* Controls: the same markup is the app sidebar's (860px and wider). */
.pp-sidebar-controls {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.pp-ctl { margin-bottom: 18px; min-width: 0; }

.pp-ctl-label { margin: 0 0 6px; }

.pp-ctl-sub { margin: 8px 0 4px; font-weight: 600; color: var(--text); }

/* "May sell this": a link to the market, with the honest note that nobody has reported the item there. */
.pp-maysell-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  border-radius: var(--radius-sm);
  color: var(--text);
  text-decoration: none;
}

.pp-maysell-row:hover { background: var(--surface-2); }

.pp-maysell-name { font-size: 13px; font-weight: 600; }

.pp-maysell-sub { font-size: 12px; color: var(--text-muted); }

.pp-maysell-note { font-size: 12px; color: var(--text-muted); font-style: italic; }

.pp-maysell-row + .pp-maysell-row { margin-top: 2px; }

/* Dropdown menus (js/product-page.js productMenuHtml). Sidebar: a boxed trigger. Where to buy bar: plain text with an
   underline, so area and sort read as filters, not action buttons. */
.pp-menu { position: relative; min-width: 0; }

.pp-menu-btn {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  user-select: none;
}

.pp-menu-btn::-webkit-details-marker { display: none; }

.pp-menu-btn::after { content: "▾"; color: var(--text-muted); }

.pp-menu-label { color: var(--text-muted); }

.pp-menu-value { margin-left: auto; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pp-menu[open] > .pp-menu-btn { border-color: var(--brand-text); }

.pp-menu-list {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  left: 0;
  min-width: 200px;
  max-height: 280px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.pp-menu-item {
  text-align: left;
  padding: 8px 10px;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.pp-menu-item:hover { background: var(--surface-2); }

.pp-menu-item.is-selected { color: var(--brand-text); font-weight: 600; }

.pp-ctl .pp-menu { width: 100%; }

.pp-where-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 4px 0 12px;
}

.pp-where-bar .pp-menu { width: auto; }

.pp-where-bar .pp-menu-btn {
  padding: 4px 0;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: none;
}

.pp-where-bar .pp-menu[open] > .pp-menu-btn { border-bottom-color: var(--brand-text); }

/* Vendor list view: two text buttons, the selected one underlined. */
.pp-view { display: inline-flex; gap: 12px; margin-left: auto; align-self: center; }

.pp-view-btn {
  padding: 4px 0;
  border: none;
  border-bottom: 1px solid transparent;
  background: none;
  color: var(--text-muted);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.pp-view-btn.is-selected { color: var(--brand-text); border-bottom-color: var(--brand-text); font-weight: 600; }

/* Compact vendor rows: one line each, name and variant on the left, price and Message on the right. */
.pp-row-compact {
  padding: 10px 12px;
  margin-bottom: 6px;
}

.pp-row-line {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pp-row-main { flex: 1; min-width: 0; font-size: 14px; }

.pp-row-main strong { font-weight: 600; }

/* The flags (source, older price, unusual price) wrap onto a second line on a narrow phone rather than being cut off. */
.pp-row-sub { display: block; font-size: 12px; line-height: 1.5; color: var(--text-muted); overflow-wrap: anywhere; }

.pp-row-compact .vendor-price { font-size: 15px; white-space: nowrap; }

.pp-row-compact .btn { flex: none; }

/* Details tab */
.pp-desc { margin: 0 0 4px; font-size: 14px; line-height: 1.5; }

.pp-facts {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 8px 16px;
  margin: 14px 0 0;
  font-size: 14px;
}

.pp-facts dt { color: var(--text-muted); }

.pp-facts dd { margin: 0; }

/* Vendor rows in the Where to buy tab: tighter than the shared .vendor-row. */
.pp-where .vendor-row { padding: 10px 12px; margin-bottom: 8px; }

.pp-where .vendor-row .btn-row { margin-top: 6px; gap: 6px; }

/* 860px and wider: the controls move into the app sidebar (260px). The price column becomes a second column only from
   1100px: between 860px and 1100px, the sidebar plus a 320px column left the vendor list about 170-210px wide, so the
   price column stays under the list there. */

@media (min-width: 1100px) {
  .pp-layout {
    grid-template-columns: minmax(0, 1fr) 320px;
    grid-template-areas: "main side";
    column-gap: 24px;
    align-items: start;
  }

  .pp-col-side { margin-top: 0; }
}

/* ---------- Phone (below 860px): filter row, Filters sheet, one vendor row style ---------- */

/* The filter row under Report a price: the Filters button, then one removable chip per active choice. */
.pp-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 10px 0;
}

.pp-filter-btn {
  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;
}

.pp-filter-btn[aria-expanded="true"] { border-color: var(--brand-text); }

.pp-filter-chip {
  min-height: 44px;
  max-width: 100%;
  padding: 0 12px;
  border: 1px solid var(--brand-text);
  border-radius: 999px;
  background: var(--brand-tint);
  color: var(--brand-text);
  font: inherit;
  font-size: 14px;
  text-align: left;
  overflow-wrap: anywhere;
  cursor: pointer;
}

.pp-filter-btn:focus-visible,
.pp-filter-chip:focus-visible,
.pp-sheet-opt:focus-visible,
.pp-sheet-close:focus-visible {
  outline: 2px solid var(--brand-text);
  outline-offset: 2px;
}

/* The sheet: a bottom sheet over the page. The page behind does not scroll while it is open (body.pp-sheet-lock). */
.pp-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: rgba(0, 0, 0, 0.45);
}

.pp-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 901;
}

.pp-sheet[hidden],
.pp-sheet-backdrop[hidden] { display: none; }

.pp-sheet-panel {
  display: flex;
  flex-direction: column;
  max-height: 85vh;
  background: var(--surface);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.25);
}

.pp-sheet:not([hidden]) .pp-sheet-panel { animation: pp-sheet-up 200ms ease-out; }

@keyframes pp-sheet-up {
  from { transform: translateY(100%); }
  to { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pp-sheet:not([hidden]) .pp-sheet-panel { animation: none; }
}

body.pp-sheet-lock { overflow: hidden; }

/* The sheet's host is a direct child of <body> (outside #app), so no page stacking context covers it. On desktop the panel is
   centred, at most about 560 px wide, and anchored to the bottom. */
@media (min-width: 860px) {
  .pp-sheet {
    left: 0;
    right: 0;
    width: min(560px, 100%);
    margin: 0 auto;
  }
}

.pp-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 8px 8px 16px;
  border-bottom: 1px solid var(--border);
}

.pp-sheet-title { margin: 0; font-size: 18px; font-weight: 600; }

.pp-sheet-close {
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  border: none;
  background: none;
  color: var(--brand-text);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.pp-sheet-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0 16px;
}

.pp-sheet-group { min-width: 0; margin: 14px 0 0; padding: 0; border: none; }

.pp-sheet-legend { padding: 0; margin-bottom: 8px; font-size: 14px; font-weight: 600; color: var(--text-muted); }

.pp-sheet-opts { display: flex; flex-wrap: wrap; gap: 8px; }

.pp-sheet-opt {
  min-height: 44px;
  max-width: 100%;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  text-align: left;
  overflow-wrap: anywhere;
  cursor: pointer;
}

.pp-sheet-opt.is-selected {
  border-color: var(--brand-text);
  background: var(--brand-tint);
  color: var(--brand-text);
  font-weight: 600;
}

.pp-sheet-foot {
  padding: 12px 16px 16px;
  border-top: 1px solid var(--border);
}

.pp-sheet-done { width: 100%; }

/* The phone's May sell block sits under the vendor list (the sidebar copy is for 860px and wider). */
.pp-phone-maysell { margin-top: 16px; }

/* One vendor row style for phones: store and price, the details, then the flags with one contact action on the right. The
   action drops to its own right-aligned line when the flags do not leave room for it. */
.pp-vrow {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  margin-bottom: 8px;
}

.pp-vrow-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.pp-vrow-store {
  position: relative;
  min-width: 0;
  font-size: 14px;
  color: var(--text);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.pp-vrow-store::after { content: ""; position: absolute; inset: -12px -4px; }

.pp-vrow .vendor-price { font-size: 16px; white-space: nowrap; }

.pp-vrow-info {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

.pp-vrow-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 10px;
}

.pp-vrow-flags { flex: 0 1 auto; min-width: 0; margin: 0; line-height: 1.4; }

/* The action is a text link, not a bordered button. Its visible box is one line of text; its hit area (44 px tall and
   wide) is an invisible pseudo-element, which does not change the row's layout. */
.pp-vrow-contact {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 0;
  margin-left: auto;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--brand-text);
  white-space: nowrap;
  cursor: pointer;
}

.pp-vrow-contact::after { content: ""; position: absolute; inset: -12px -8px; }

.pp-vrow-chev { flex: none; }

/* 860px and wider: the desktop layout. The filter row, the sheet and the phone rows are not shown. */
@media (min-width: 860px) {
  .pp-filter-row,
  .pp-phone-maysell { display: none; }
}

/* Below 860px: the Where to buy bar (area, sort, Compact or Detailed) is replaced by the filter row and the sheet. The
   vendor list comes first in the Where to buy tab: the community fair-price block and the May sell block follow it. */
@media (max-width: 859px) {
  .pp-where-bar { display: none; }

  .pp-where { display: flex; flex-direction: column; }
  .pp-where[hidden] { display: none; }
  .pp-where > .pp-rows { order: 1; }
  .pp-where > #fairPriceSection { order: 2; }
  .pp-where > .pp-phone-maysell { order: 3; }

  /* Phone: the Set your location prompt is one thin line and one tap target (44 px tall), not the two-part banner. */
  .pp-locate-line {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    margin: 0 0 12px;
    padding: 0 12px;
    line-height: 1.3;
    border: 0;
    font: inherit;
    font-size: 14px;
    color: var(--text);
    text-align: left;
    cursor: pointer;
  }

  .pp-locate-line > span:first-child { min-width: 0; text-align: left; }
  /* Phone: "Show all N reports" under the newest three reports in Recently reported prices (js/catalogue-owner.js). */
  .pp-reports-toggle { width: 100%; margin: 8px 0 16px; }

  .pp-locate-action { flex: none; color: var(--brand-text); font-weight: 600; text-decoration: underline; }
}