/* emag-tracker UI — product detail pages (product.html, catalog_product.html and their partials).
   Loaded after app.css; uses ONLY the tokens defined there (no colour literals) and extends the shared
   components (.metrics, .page-nav, .section, .kv, .chip, .pill ...). Owned by the detail-page work. */

/* ---------------------------------------------------------------- hero: image · identity · actions · metric row */
.product-hero { display: grid; grid-template-columns: minmax(180px, 260px) minmax(0, 1fr); gap: var(--space-5) var(--space-6); align-items: start; margin: 0 0 var(--space-2); }
.product-hero.no-media { grid-template-columns: minmax(0, 1fr); }
.hero-media, .hero-body { min-width: 0; }
/* thumbnails as one scrollable strip so a 12-image gallery does not stretch the hero */
.hero-media .gallery-thumbs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px; }
.hero-media .thumb { flex: none; width: 44px; height: 44px; }
.hero-body .crumbs { margin-bottom: var(--space-2); }
.hero-body .page-title { margin: 0 0 var(--space-2); }
.hero-chips { margin: 0 0 var(--space-2); }
.hero-chips .score-link { display: inline-flex; }
.hero-note { margin: 0 0 var(--space-2); }
.hero-actions { margin: var(--space-3) 0 var(--space-2); }
.product-hero .metrics { margin: var(--space-3) 0; padding: 0; }
.metrics .metric { display: flex; flex-direction: column; gap: 1px; }
.metrics dd { margin: 0; }
.metric-value .money-cur { font-size: 0.6em; }
.metric-value > .pill, .metric-value > .score-badge { font-size: var(--text-sm); padding: 3px 10px; vertical-align: 2px; }
.metric-value > .pill { padding-left: 8px; white-space: normal; max-width: 100%; }
.metric-unit { margin-left: 2px; font-size: var(--text-sm); font-weight: 400; color: var(--fg-muted); }
.metric-empty { font-weight: 400; color: var(--fg-4); }
.metric-sub { min-height: 1.4em; }
.metric-sub .chip { vertical-align: 1px; }
.metric-sub .old-price { font-size: inherit; }
.metric-sub .spark { margin-left: 4px; }
.metric-sub .momentum-arrow { font-size: 10px; }
/* the facts line under the metrics: when the data was seen, one inline pair per fact */
.hero-facts { display: flex; flex-wrap: wrap; gap: 2px var(--space-4); margin: 0; font-size: var(--text-sm); color: var(--fg-muted); }
.hero-facts > div { display: inline-flex; gap: 6px; min-width: 0; }
.hero-facts dt { color: var(--fg-4); white-space: nowrap; }
.hero-facts dd { margin: 0; color: var(--fg-2); }
.hero-facts a { color: var(--fg-2); }
.hero-empty { margin: var(--space-4) 0 0; }
.hero-empty p:last-child { margin-bottom: 0; }
@media (max-width: 720px) {
  .product-hero { grid-template-columns: 1fr; }
  .hero-media { max-width: 220px; }
}
@media (max-width: 640px) {
  .product-hero .metrics { border-bottom: 0; }
  .product-hero .metric { flex-basis: 50%; border-bottom: 1px solid var(--border); }
  .product-hero .metric:nth-child(2n) { border-right: 0; }
}

/* ---------------------------------------------------------------- in-page nav: sticks under the top bar on wide screens */
.page-nav-wrap { position: sticky; top: var(--topbar-h); z-index: calc(var(--z-thead) + 1); margin: 0 0 var(--space-2); background: var(--bg); }
.page-nav-wrap .page-nav { margin-top: 0; }
.product .section[id] { scroll-margin-top: calc(var(--topbar-h) + 44px); }
@media (max-width: 960px) {
  .page-nav-wrap { position: static; }
  .product .section[id] { scroll-margin-top: var(--space-4); }
}

/* ---------------------------------------------------------------- sections */
.section-range { margin: 0 0 var(--space-3); }
.catalog-state { margin: 0 0 var(--space-3); }
.offer-card .kv { margin-top: var(--space-1); }
.offer-price .money-cur { font-size: 0.55em; }
.reviews-summary .rating-big { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.reviews-list h3 { margin-bottom: 0; padding-bottom: var(--space-2); }
.review:last-child, .question:last-child { border-bottom: 0; }
.specs > summary { cursor: pointer; color: var(--fg-2); font-size: 13px; font-weight: 500; }
.raw-data .links { margin: 0 0 var(--space-3); }
.raw-report > summary { padding: var(--space-2) 0; cursor: pointer; color: var(--fg-2); font-size: 13px; font-weight: 500; }
.raw-report > summary .muted { font-weight: 400; }
.raw-report[open] > summary { margin-bottom: var(--space-2); border-bottom: 1px solid var(--border); }