/* Product detail */

/* The rules here that look like copies of a bundle rule mostly are not, and
   deleting them is not safe by inspection.

   A page sheet loads after the whole bundle, so a rule here is the last
   declaration for every element it matches — it out-orders *other* selectors in
   the bundle, not just its own twin. Deleting all 577 byte-identical copies
   across this sheet, dashboard.css and admin.css moved 16,026 elements on 76 of
   77 pages. Three ways that happens, all measured:

     .form-actions { gap: 10px }       beat base.css `.feedback-actions { gap: 16px }`
                                       on an element carrying both classes
     .admin-home-shell { padding-top } beat base.css `.page-shell { padding: … }`,
                                       because a shorthand resets the longhand
     .star-rating-button:disabled      is pinned by tests/test_one_tap_rating.py,
                                       whose own docstring says this sheet
                                       "carries its own copy" on purpose

   566 copies have been removed across six passes and 10 remain. The last of
   the 577 is neither: #5663 renamed `.stat-card-button` to
   `button.stat-card-button`, taking it out of the byte-identical class rather
   than out of the sheet.

   Of the 10:

     6   measured load-bearing — cutting the set moved an element matching them
     2   inert and kept anyway — the star-rating pair
         tests/test_one_tap_rating.py asserts this sheet carries its own copy of
     2   share a selector one sheet declares twice, which deletion by selector
         text cannot separate

   The 29 that named a state were not decided by looking at the page. Their
   states were forced — Chrome DevTools Protocol for :hover and its siblings,
   classList/setAttribute for the rest — and 17 came out that way. A resting
   sweep cannot speak for any of them, and it fails toward "inert", which is
   the answer that authorises a deletion; scripts/css_differential/statecut.py
   exists for exactly that, and its result is only worth reading beside the
   planted control that proves it can still see.

   The last 10 to go were the ones no rendered page could speak for, and they
   were decided statically rather than by another sweep: nothing in the tree
   carries their anchor class at all. Ask that with exact class *tokens*, not a
   substring — `fs-status-dot`, `ownership-checklist-item` and
   `owned-products-filters-sx` each contain one of those names while being a
   different class, so a substring scan reports the class as present when no
   element carries it. The permissive scan is still the right first question
   (it cannot wrongly clear a class built at runtime); its hits just have to be
   read rather than counted.

   Nothing here is held back because a test mentions one of its classes. That
   ground once held 60 rules and was almost entirely class-name collision — a
   test can only pin a rule to *this* sheet if it reads this sheet, and 13 of
   746 test files do. The one real pin is the star-rating pair above.

   The third pass is the one to read before touching this file, because it found
   a mechanism the first two missed. Two duplicates whose selectors overlap
   **mask each other**: `.stat-card` and `.stat-card-button` both declare the
   border and, when this was measured, both sat after the `.sx` button reset at
   the specificity it then tied them at, so deleting either alone changed nothing
   — the other still covered it — while deleting both dropped the border on every
   pipeline card. Test one rule at a time and the pair reports inert.

   That pair has since been re-measured and is gone. #5699 lowered the reset to
   `:where(.sx) button` (0,0,1), so the bundle's own `.stat-card` at (0,1,0)
   beats it on specificity and the local copy stopped being a tie-breaker. The
   masking lesson is untouched by that and still decides how this file is cut:
   the whole proposed set at once, never one rule, because two overlapping
   duplicates hide each other from a per-rule probe whatever the reset does.

   So the whole proposed set is cut at once in the live CSSOM, and every rule
   matching an element that moved is kept. Two more traps in the measuring:
   `getComputedStyle().getPropertyValue("border")` is `""` — shorthands are not
   in the computed style, so a probe reading a rule's own property names sees no
   change for a shorthand-only rule — and a reachability sweep that settles
   sooner than the sweep it authorises reports a class as rendered nowhere while
   the other renders four of them.

   Before deleting anything here because the bundle already says it, read
   CLAUDE.md's "a rule duplicated into a page sheet is a tie-breaker" section. A
   comparison of the two rules will tell you it is safe, and it is wrong. */

/* ── sx design-system re-palette (#3690) ─────────────────────────────────────
   Map the legacy tokens this sheet uses onto the sx palette so the product
   detail page reads as one system with the redesigned prompt detail page.
   Scoped to the product containers (not :root) so shared nav/footer chrome is
   untouched; literal fallbacks keep it safe. Rose = the product type accent. */
.product-main,
.product-panel.condensed,
.marketplace-back-link {
  --surface: var(--sx-surface, #FFFFFF);
  --surface-color: var(--sx-surface, #FFFFFF);
  --surface-elevated: var(--sx-surface, #FFFFFF);
  --panel-bg: var(--sx-surface, #FFFFFF);
  --surface-2: var(--sx-surface-2, #F7F8FB);
  --sunken: var(--sx-surface-2, #F7F8FB);
  --border: var(--sx-line, #E6E8EE);
  --border-color: var(--sx-line, #E6E8EE);
  --border-default: var(--sx-line, #E6E8EE);
  --border-subtle: var(--sx-line, #E6E8EE);
  --line-color: var(--sx-line, #E6E8EE);
  --overlay-stroke: var(--sx-line, #E6E8EE);
  --text-primary: var(--sx-text, #0E1320);
  --text-color: var(--sx-text, #0E1320);
  --text-secondary: var(--sx-text-2, #4B5263);
  --muted-text: var(--sx-text-3, #616879);
  --muted-color: var(--sx-text-3, #616879);
  --text-muted: var(--sx-text-3, #616879);
  --radius-lg: 14px;
  --shadow-card: 0 1px 2px rgba(11, 18, 32, 0.04);
  --pd-rose: #C42B6E;
  --pd-rose-2: #A11E56;
}
[data-theme="dark"] .product-main,
[data-theme="dark"] .product-panel.condensed,
[data-theme="dark"] .marketplace-back-link {
  --pd-rose: #E24E8A;
  --pd-rose-2: #F9BFE0;
}

/* pd- hero: a soft rose/brand gradient wash + inset frame, echoing the prompt
   detail page's .pp-hero-bg treatment. */
.product-hero {
  position: relative;
  padding: clamp(22px, 3vw, 40px) clamp(18px, 2vw, 30px) clamp(24px, 3vw, 36px);
  margin-bottom: clamp(28px, 3.5vw, 48px);
  border-radius: 18px;
  background:
    radial-gradient(55% 60% at 12% 16%, rgba(196, 43, 110, 0.07) 0%, transparent 62%),
    radial-gradient(72% 55% at 100% 0%, rgba(29, 51, 255, 0.045) 0%, transparent 58%),
    var(--sx-surface, #FFFFFF);
  box-shadow: 0 0 0 1px var(--sx-line, #E6E8EE) inset;
}
[data-theme="dark"] .product-hero {
  background:
    radial-gradient(55% 60% at 12% 16%, rgba(226, 78, 138, 0.13) 0%, transparent 62%),
    radial-gradient(72% 55% at 100% 0%, rgba(109, 120, 255, 0.10) 0%, transparent 58%),
    var(--sx-surface, #14181F);
}
.product-hero .product-heading { padding-top: 0; }

/* Rose accents — the product identity, applied like the prompt hero's teal. */
.product-hero .eyebrow {
  font-family: var(--sx-font-mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pd-rose-2, #A11E56);
  margin: 0 0 8px;
}
.product-hero .badge-group-label { color: var(--pd-rose-2, #A11E56); }
.product-tabs-shell .tab-pill.is-active,
.product-tabs-shell .tab-pill[aria-selected="true"] { color: var(--pd-rose-2, #A11E56); }


@media (max-width: 960px) {
  .prompt-hero-content {
    grid-template-columns: minmax(0, 1fr);
  }

  }


.product-card[data-type="assistant"] .type-pill {
  background: #5B5BD6;
}


.persona-tagline {
  font-style: italic;
  color: var(--text-secondary);
  margin: 0.25rem 0 0.5rem;
}


/* .product-cta / .product-cta-integrated each declare their own `display`
   at (0,1,0), which ties the UA's `[hidden] { display: none }` on
   specificity and beats it on source order (this sheet loads after the UA
   stylesheet) -- so a bare [hidden] on an element carrying both classes
   silently keeps rendering. (0,3,0) beats both unconditionally. */
.product-cta.product-cta-integrated[hidden] {
  display: none;
}


.seller-summary .seller-name {
  font-weight: 600;
  color: var(--text-primary);
}


.guest-mode-microcopy {
  margin: 8px 0 4px;
  font-size: 0.92rem;
  color: var(--text-muted);
}


.ownership-badge--corner {
  position: absolute;
  top: 11px;
  right: 11px;
  z-index: 4;
  max-width: calc(100% - 22px);
  padding: 0.18rem 0.45rem;
  font-size: 0.68rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  border-radius: 10px;
  border-color: color-mix(in srgb, var(--success-color, #2fbf71) 40%, var(--border));
  background: color-mix(in srgb, var(--success-color, #2fbf71) 14%, var(--surface));
  color: color-mix(in srgb, var(--success-strong, #177a47) 86%, var(--text-primary));
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}


.ownership-card {
  margin-top: 0.9rem;
  padding: 0.8rem;
  border: 1px solid var(--line-color);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-color) 92%, var(--text-color) 8%);
}


.ownership-meta-grid code {
  font-size: 0.82rem;
  padding: 0.2rem 0.4rem;
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-color) 82%, black 18%);
}


.owner-value-panel {
  margin-top: 0.7rem;
  padding: 0.65rem 0.7rem;
  border: 1px solid color-mix(in srgb, var(--line-color) 82%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-color) 96%, var(--text-color) 4%);
}


.ownership-checklist {
  margin-top: 0.7rem;
  border: 1px solid var(--line-color);
  border-radius: 10px;
  padding: 0.45rem 0.6rem;
  background: color-mix(in srgb, var(--surface-color) 94%, var(--text-color) 6%);
}


.ownership-checklist-item.is-complete {
  color: var(--muted-color);
}


.product-panel h3 {
  margin: 0 0 16px;
}


@keyframes listingSectionHighlight {
  0% {
    background: color-mix(in srgb, var(--accent, #4f8cff) 24%, transparent);
  }
  100% {
    background: transparent;
  }
}


/* ---------- Tokens tab panel ---------- */
.tokens-panel h4 {
  font-size: 0.95rem;
  margin: 1.25rem 0 0.5rem;
  color: var(--text-primary, #111);
}
.tokens-panel a {
  color: var(--accent-500, #4f46e5);
  text-decoration: underline;
}
.tokens-estimate-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin: 0 0 1rem 0;
  padding: 0;
}
.tokens-estimate-cell {
  background: var(--surface-2, #f7f7f9);
  border-radius: 8px;
  padding: 12px 14px;
}
.tokens-estimate-cell dt {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary, #6b7280);
  margin-bottom: 4px;
}
.tokens-estimate-cell dd {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary, #111);
}
.tokens-estimate-empty {
  background: var(--surface-2, #f7f7f9);
  border: 1px dashed var(--border-default, #e5e7eb);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 1rem;
}
.tokens-estimate-empty p {
  margin: 0;
}
.tokens-estimate-empty p + p {
  margin-top: 4px;
}
.tokens-notes {
  font-size: 0.85rem;
  margin-top: -0.5rem;
  margin-bottom: 1rem;
}
.tokens-guidance p {
  font-size: 0.9rem;
  line-height: 1.55;
  margin: 0 0 0.5rem;
}

.product-list {
  padding-left: 20px;
  margin: 10px 0 0;
}


.review-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.review-section-header h3 {
  margin: 0;
}

.review-write-cta {
  font-size: 0.85rem;
  white-space: nowrap;
}

.review-list {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.review-card {
  border: 1px solid var(--border-color, #d3d9e8);
  border-radius: 12px;
  background: var(--surface, var(--panel-bg, #fff));
  padding: 14px 16px;
  display: grid;
  gap: 6px;
}


.review-rating {
  color: var(--rating-star-color, #f5b300);
  font-weight: 700;
  letter-spacing: 1px;
}


.review-meta {
  margin: 0;
  font-size: 0.82rem;
  color: var(--muted-text, #4f5872);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.review-meta span + span::before {
  content: "\00b7";
  margin-right: 6px;
}

.review-meta .review-visibility-badge::before {
  content: none;
}

.review-body {
  margin: 0;
  max-width: 72ch;
  line-height: 1.55;
  font-size: 0.95rem;
}

.review-empty {
  color: var(--muted-text, #56607a);
  font-style: italic;
  text-align: center;
  padding: 24px 16px;
}

.review-form {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border-color, #d3d9e8);
  display: grid;
  gap: 14px;
}

.review-form-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.review-form-header h4 {
  margin: 0;
}


@keyframes reviewSkeletonPulse {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}


.product-cta .secondary-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}


.product-cta .secondary-cta {
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
}


/* .marketplace-back-link look lives in the global css/sx-eyebrow.css so the
   shared back-link renders identically on every detail page (product, assistant,
   agent) regardless of which page-specific CSS is loaded. */