/* =========================================================================
   Single product — the product shot beside the title.
   Loaded on top of compound.css.
   ========================================================================= */

.hero-inner{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);gap:56px;align-items:start}
.hero-copy{min-width:0}

.hero-media{position:sticky;top:96px;display:flex;flex-direction:column;gap:12px}

.pshot{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:1/1;background:var(--oat);border:1px solid var(--mid);display:flex;align-items:center;justify-content:center}
.pshot img{width:100%;height:100%;object-fit:cover;display:block}

/* Empty state — the space is held even before an image is uploaded. */
.pshot-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;width:100%;height:100%;background:rgba(62,42,34,.28);color:var(--on-dark-soft)}
.pshot-empty .lbl{font-size:10px;letter-spacing:0.18em;text-transform:uppercase}
.pshot:has(.pshot-empty){background:transparent;border-style:dashed;border-color:var(--mid)}

/* Category stripe along the bottom edge of the frame. */
.pshot-stripe{position:absolute;left:0;right:0;bottom:0;height:4px;z-index:2}
.pshot.repair .pshot-stripe{background:var(--repair)}
.pshot.regenerate .pshot-stripe{background:var(--regenerate)}
.pshot.revive .pshot-stripe{background:var(--revive)}
.pshot.resolve .pshot-stripe{background:var(--resolve)}
.pshot.regain .pshot-stripe{background:var(--regain)}
.pshot.restore .pshot-stripe{background:var(--restore)}
.pshot.utility .pshot-stripe{background:var(--utility)}

.pshot-thumbs{display:flex;gap:8px;flex-wrap:wrap}
.pthumb{width:64px;height:64px;padding:0;border-radius:12px;overflow:hidden;border:1px solid var(--mid);background:var(--oat);cursor:pointer;transition:border-color .25s ease,transform .25s ease}
.pthumb img{width:100%;height:100%;object-fit:cover;display:block}
.pthumb:hover{transform:translateY(-2px)}
.pthumb.active{border-color:var(--cream)}
.pthumb:focus-visible{outline:2px solid var(--cream);outline-offset:2px}

@media (max-width:1024px){
  .hero-inner{gap:36px;grid-template-columns:minmax(0,1.2fr) minmax(240px,.8fr)}
  .hero-media{position:static}
}
@media (max-width:820px){
  .hero-inner{grid-template-columns:1fr;gap:32px}
  .pshot{max-width:420px}
  .pshot-thumbs{max-width:420px}
}