/* ---------- Shared entity header (js/entity-header.js, docs/DESIGN-RULES.md section 5) ----------
   Feature prefix .eh-. Phone first: line 1 holds the avatar (left) and Save and the menu (right); the name sits under the
   avatar at full width; then the chips, the facts lines and the actions. Desktop (860px and wider): the avatar, the name and
   the tools share one line, and the rest sits underneath. The grid areas below do that with one DOM order (avatar, name,
   tools, meta), so keyboard order follows the reading order on both layouts. */

.eh-header {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "avatar tools"
    "name name"
    "meta meta";
  column-gap: 12px;
  align-items: center;
  margin-top: 8px;
  min-width: 0;
}

/* A photo strip (only when a real photo URL is passed, see js/market-page.js). It is decorative (alt=""), 64 px tall on a phone.
   Its neutral background shows while the image loads; a failed image removes the strip. The avatar overlaps its lower edge. */
.eh-header.has-banner { padding-top: 40px; }

.eh-banner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 64px;
  overflow: hidden;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--surface-2);
}

.eh-banner-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.eh-avatar-slot { position: relative; z-index: 1; }
.eh-header.has-banner .eh-avatar { box-shadow: 0 0 0 3px var(--bg); }

.eh-avatar-slot { grid-area: avatar; min-width: 0; }

.eh-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  overflow: hidden;
}

.eh-avatar-initials { background: var(--brand); }

.eh-name-slot {
  grid-area: name;
  position: relative;
  min-width: 0;
  margin-top: 6px;
}

/* The name. Its size steps by length (eh-name-22 to eh-name-16, set in ehNameSizeClass); a long name wraps, never cut. */
.eh-name {
  margin: 0;
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.eh-name-22 { font-size: 22px; }
.eh-name-19 { font-size: 19px; }
.eh-name-17 { font-size: 17px; }
.eh-name-16 { font-size: 16px; }

/* The model switcher: the name is the button, with a down arrow. The touch target is 44 px tall. */
.eh-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-height: 44px;
  padding: 0;
  border: none;
  background: none;
  color: var(--text);
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.eh-switch-text { overflow-wrap: anywhere; }

.eh-switch-chevron { flex: none; color: var(--text-muted); }

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

.eh-switch-list {
  position: absolute;
  z-index: 30;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-width: 100%;
  max-height: 60vh;
  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);
}

.eh-switch-list[hidden] { display: none; }

.eh-switch-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  color: var(--text);
  text-decoration: none;
  font-size: 14px;
}

.eh-switch-item:hover { background: var(--surface-2); }

.eh-switch-item:focus-visible {
  outline: 2px solid var(--brand-text);
  outline-offset: -2px;
}

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

.eh-switch-item-price { flex: none; color: var(--text-muted); white-space: nowrap; }

/* Save (a heart) and the more menu. The Save button is a plain icon here, not the absolute corner button of a card. */
.eh-tools {
  grid-area: tools;
  display: flex;
  align-items: center;
  gap: 8px;
}

.eh-tools .save-toggle {
  position: static;
  width: 44px;
  height: 44px;
}

.eh-tools .save-toggle svg { width: 20px; height: 20px; }

/* The 44 px box is the whole hit area, so the enlarged ::after of the phone sizing rules (which would overlap the neighbours) is off. */
.eh-header .eh-tools .save-toggle:not(.btn)::after { content: none; }

.eh-meta {
  grid-area: meta;
  min-width: 0;
  margin-top: 6px;
}

.eh-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

/* The two facts lines. Both at least 14 px (docs/DESIGN-RULES.md rule 2). */
.eh-facts {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--text);
}

.eh-facts-2 {
  margin-top: 2px;
  color: var(--text-muted);
}

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

/* The small "From" label before the lowest price, when the range rule is not met (js/product-page.js). */
.eh-price-from { font-size: 12px; color: var(--text-muted); margin-right: 4px; }

/* The primary action sits under the facts: full width on a phone, its own width on desktop. */
.eh-actions {
  margin-top: 12px;
}

.eh-actions .btn { width: 100%; }

@media (min-width: 860px) {
  .eh-header {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "avatar name tools"
      "meta meta meta";
  }

  /* Desktop strip: 140 px, the 72 px avatar overlaps its lower edge. */
  .eh-header.has-banner { padding-top: 104px; }
  .eh-header.has-banner .eh-banner { height: 140px; }

  .eh-avatar {
    width: 72px;
    height: 72px;
    font-size: 22px;
  }

  .eh-name-slot { margin-top: 0; }

  .eh-actions .btn { width: auto; }
}

/* Market and Store (inlineFacts), wide layout only (1200px and wider, EH_WIDE_MIN in js/entity-header.js; from 860 to 1199 they keep
   two lines, because the sidebar leaves the main column too narrow for one). */
@media (min-width: 1200px) {
  /* the facts line and the location line share one line, separated by a middle dot, wrapping
     item by item when it is long. The two lines become the wrapper's flex items (display: contents), so no 25 px phone spacing
     applies and the chips, this line and the buttons keep the 8 to 12 px rhythm. */
  .eh-facts-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 10px;
    font-size: 14px;
    line-height: 22px;
  }

  .eh-facts-wrap > .eh-facts,
  .eh-facts-wrap > .eh-facts-2 { display: contents; }

  .eh-facts-wrap > .eh-facts + .eh-facts-2::before {
    content: "·";
    color: var(--text-muted);
  }
}

/* ---------- Pending answers (docs/DESIGN-RULES.md rule 6) ----------
   A control, label or number that depends on a late answer is drawn as a same-size grey block until the answer arrives, then swapped
   for its final content in one step. The blocks are decorative (aria-hidden) and never focusable. The shimmer runs only when the
   viewer has not asked for reduced motion; otherwise the block is plain grey. */
.eh-skel {
  display: block;
  background: var(--surface-2);
  border-radius: var(--radius-lg, 12px);
}
.eh-skel-btn { flex: 1 1 0; min-width: 0; min-height: 48px; }
@media (min-width: 860px) {
  .mk-actions .eh-skel-btn, .pl-actions .eh-skel-btn { flex: 0 0 120px; }
}
/* The rating link while its answer is pending: same 14 px line, a quiet pill instead of the text. */
.eh-pending,
:is(.st-link, .mk-link, .pl-link).eh-pending { /* the page link styles load after this file; the pending pill must still win */
  display: inline-block;
  width: 96px;
  height: 14px;
  min-height: 0;
  padding: 0;
  border: 0;
  margin-block: 2px; /* with vertical-align middle this gives the same line box as the 20 px final text (eh-facts), so the swap moves nothing (measured) */
  border-radius: 7px;
  background: var(--surface-2);
  color: transparent;
  vertical-align: middle;
  pointer-events: none;
}
.eh-pending::before { content: none !important; }
.rv-loading { min-height: 96px; }
@media (prefers-reduced-motion: no-preference) {
  .eh-skel, .eh-pending { animation: eh-skel-pulse 1.4s ease-in-out infinite; }
}
@keyframes eh-skel-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }