/* produs.css — single product. */

.produs__top { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }

/* Same light plate as the cards. The catalogue photography is mostly shot on
   white; a dark stage turns every one of those into a glaring rectangle. */
.produs__stage {
  margin: 0; overflow: hidden; aspect-ratio: 1 / 1; position: relative;
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, #FFFFFF 0%, #EFF2F5 100%);
}
.produs__stage::after {
  content: ""; position: absolute; inset: 0; border-radius: var(--r-lg);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.07); pointer-events: none;
}
.produs__stage-img { width: 100%; height: 100%; object-fit: contain; padding: 7%; }

.produs__thumbs { display: flex; gap: .5rem; margin-top: .7rem; flex-wrap: wrap; }
.produs__thumb {
  width: 68px; height: 68px; padding: 5px; cursor: pointer;
  background: #FFFFFF; border: 1px solid transparent; border-radius: var(--r);
  overflow: hidden; transition: border-color .3s var(--ease), opacity .3s;
  opacity: .5;
}
.produs__thumb img { width: 100%; height: 100%; object-fit: contain; }
.produs__thumb:hover { opacity: 1; }
.produs__thumb.is-active { border-color: var(--accent); opacity: 1; }

.produs__info { padding-top: .4rem; }
.produs__info h1 { font-size: clamp(1.75rem, 3.1vw, 2.7rem); margin-bottom: .5em; }

.produs__price {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 500; letter-spacing: -0.03em;
  color: var(--text); margin: 0 0 .3rem; font-variant-numeric: tabular-nums;
}
.produs__price--ask { color: var(--dim); font-size: 1.2rem; }

.produs__variants {
  list-style: none; padding: 0; margin: 1.3rem 0 1.6rem;
  border-top: 1px solid var(--rule);
}
.produs__variants li {
  display: flex; justify-content: space-between; gap: 1.5rem; align-items: baseline;
  padding: .7rem 0; font-size: .9rem; color: var(--dim);
  border-bottom: 1px solid var(--rule);
}
.produs__variants strong { color: var(--text); white-space: nowrap; font-weight: 500; font-variant-numeric: tabular-nums; }

.produs__intro { margin: 1.4rem 0; color: var(--dim); max-width: none; }
.produs__intro p { margin-bottom: .7em; }
.produs__options { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 1.4rem; margin-top: 1.6rem; }
.produs__actions { display: flex; gap: .65rem; flex-wrap: wrap; margin-top: 1.8rem; }
/* No decorative dots: the three items are already a list, and a coloured dot
   before each one is pure ornament. */
.produs__trust {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem 1.5rem;
  margin-top: 2.2rem; padding-top: 1.5rem; border-top: 1px solid var(--rule);
  font-size: .84rem; color: var(--dim);
}

@media (max-width: 900px) { .produs__top { grid-template-columns: 1fr; } }


/* The gallery stays with the reader as they work down the specification list.
   Motivated motion: the object under discussion should not scroll away from the
   discussion. Disabled below the split so it never traps a phone viewport. */
@media (min-width: 901px) {
  .produs__gallery { position: sticky; top: 104px; }
}