/* Product pages v2 — the plugin itself is the hero, the machine is explorable.
   Loaded after style.css + store.css on /plugins/<name>/ pages only. */

/* ---------- hero: copy left, the real interface lit on the right ---------- */
.product-hero { padding-bottom: clamp(3rem, 6vw, 5rem); }
.product-hero::after { opacity: .35; }
.ph-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
.ph-copy .lede { max-width: 36rem; }
.ph-stage { position: relative; margin: 0; perspective: 1600px; }
@media (min-width: 1001px) { .ph-stage { margin-right: min(0px, calc((var(--container) - 100vw) / 2 + 1.5rem)); } }
.ph-stage::before { /* rim light in the plugin's own colour */
  content: ""; position: absolute; inset: 8% 4% -6% 10%;
  background: radial-gradient(60% 55% at 55% 50%, color-mix(in srgb, var(--product-accent) 42%, transparent), transparent 70%);
  filter: blur(38px); z-index: 0; pointer-events: none;
}
.ph-shot {
  position: relative; z-index: 1; display: block; width: 100%; height: auto;
  border-radius: 6px; border: 1px solid color-mix(in srgb, var(--product-accent) 45%, transparent);
  box-shadow: 0 40px 80px rgba(0, 0, 0, .65), 0 0 0 1px rgba(0, 0, 0, .6);
  transform: rotateY(-9deg) rotateX(3deg) translateZ(0);
  transform-origin: 60% 50%;
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
.ph-stage:hover .ph-shot { transform: rotateY(-3deg) rotateX(1deg); }
.ph-stage figcaption {
  position: relative; z-index: 1; margin-top: 1.1rem; text-align: right;
  font-family: var(--sans); font-size: .82rem; color: var(--text-dim);
}
.ph-stage figcaption a { color: var(--product-accent); }
.ph-facts { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.4rem; padding: 0; list-style: none; }
.ph-facts li {
  font-family: var(--sans); font-size: .78rem; color: var(--text);
  padding: .35rem .7rem; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--product-accent) 40%, transparent);
  background: color-mix(in srgb, var(--product-accent) 9%, transparent);
}
.product-hero .hero-compat { display: none; } /* replaced by .ph-facts */

@media (max-width: 1000px) {
  .ph-grid { grid-template-columns: 1fr; }
  .ph-stage { order: -1; max-width: 640px; }
  .ph-shot { transform: none; }
  .ph-stage figcaption { text-align: left; }
}
@media (prefers-reduced-motion: reduce) { .ph-shot, .ph-stage:hover .ph-shot { transform: none; transition: none; } }

/* the big below-the-fold copy of the same image is now the hero — keep the panel map */
.product-case > .container > .big-visual.product-visual--approved { display: none; }
.product-case > .container > .panel-map { margin-top: 0; }

/* ---------- Inside the machine: a case-file explorer ---------- */
.mx { display: grid; grid-template-columns: 17rem minmax(0, 1fr); margin-top: 2rem;
  border: 1px solid var(--line-strong); border-radius: 8px; overflow: hidden; background: rgba(7, 9, 15, .6); }
.mx-tabs { list-style: none; margin: 0; padding: .5rem; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px;
  max-height: 34rem; overflow-y: auto; }
.mx-tab { width: 100%; text-align: left; background: none; border: 0; border-radius: 5px; cursor: pointer;
  padding: .65rem .75rem; display: grid; grid-template-columns: 2.2rem 1fr; align-items: baseline; gap: .2rem;
  color: var(--text-dim); font: 500 .92rem/1.25 var(--sans); }
.mx-tab .n { font-family: var(--mono); font-size: .72rem; color: var(--text-faint); }
.mx-tab:hover { color: var(--paper); background: rgba(255, 255, 255, .03); }
.mx-tab[aria-selected="true"] { color: var(--paper); background: color-mix(in srgb, var(--accent, #68f1e6) 13%, transparent);
  box-shadow: inset 3px 0 0 var(--accent, #68f1e6); }
.mx-tab[aria-selected="true"] .n { color: var(--accent, #68f1e6); }
.mx-tab:focus-visible { outline: 2px solid var(--accent, #68f1e6); outline-offset: -2px; }
.mx-panel { padding: clamp(1.2rem, 3vw, 2rem); min-height: 22rem; }
.mx-panel h3 { margin: 0 0 .25rem; font-size: 1.6rem; color: var(--paper); }
.mx-panel .mx-kind { margin: 0 0 1rem; font-family: var(--sans); font-size: .85rem; color: var(--accent, #68f1e6); }
.mx-panel .mod-what { font-size: 1rem; line-height: 1.65; color: var(--text); max-width: 62ch; }
.mx-panel .module-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 1.4rem; margin-top: 1.3rem; }
.mx-panel .module-grid > div { font-size: .9rem; color: var(--text-dim); line-height: 1.5; }
.mx-panel .module-grid .k { display: block; font-family: var(--sans); font-weight: 600; font-size: .8rem; color: var(--paper); margin-bottom: .15rem; }
.mx-panel .mod-controls { margin-top: 1.4rem; }
.mx-panel [hidden] { display: none !important; }
@media (max-width: 760px) {
  .mx { grid-template-columns: 1fr; }
  .mx-tabs { flex-direction: row; overflow-x: auto; max-height: none; border-right: 0; border-bottom: 1px solid var(--line); scrollbar-width: thin; }
  .mx-tab { width: auto; white-space: nowrap; grid-template-columns: auto auto; }
  .mx-tab[aria-selected="true"] { box-shadow: inset 0 -3px 0 var(--accent, #68f1e6); }
  .mx-panel .module-grid { grid-template-columns: 1fr; }
}

/* ---------- demos: one honest state instead of cards + a duplicate list ---------- */
.evidence-grid:not(:has(.evidence-card:not([hidden]))) { display: none; }
.evidence-strip { border-radius: 8px; }

/* ---------- buy box: price reads first ---------- */
.price { color: var(--paper); }
.evidence-grid:has(.evidence-card:not([hidden])) + .evidence-strip .es-list { display: none; }

.product-hero .btn-row { flex-wrap: wrap; gap: .7rem; }
.product-hero .btn-row .btn { padding-left: 1.1rem; padding-right: 1.1rem; }
.product-hero .btn-row .js-buy { order: -1; }
.product-hero .btn-row .btn { letter-spacing: .08em; font-size: .72rem; }
.product-hero .buy-note { margin-top: .9rem; }