/*
 * Vesta product-page template v1.
 *
 * The product detail skeleton lives in styles.css. This file contains the
 * stable token aliases and template-level exceptions. Product color enters
 * through --series / --series-panel-start / --series-panel-end only.
 */

.product-page-template {
  --product-action: var(--orange);
  --product-focus: var(--gold);
  --product-accent: var(--series, var(--teal));
  --product-stage-start: var(--series-panel-start, var(--teal));
  --product-stage-end: var(--series-panel-end, var(--teal-dark));
  --product-surface: var(--mist);
}

.product-page-template .single-product-topline h1 {
  color: var(--product-accent);
}

.product-page-template .single-product-packshot {
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.22), transparent 28%),
    linear-gradient(135deg, var(--product-stage-start), var(--product-stage-end));
}

.product-page-template .btn-fill,
.product-page-template .btn-fill:hover,
.product-page-template .btn-fill:focus-visible {
  background: var(--product-action);
  border-color: var(--product-action);
}

.product-page-template .single-product-packshot img {
  object-fit: contain;
}

/* SS-998 uses the directly cut out product image in an upright presentation.
   Transparent end margins are trimmed in the asset rather than compensated
   for with layout transforms. */
.product-page-template.product-structural .single-product-packshot img {
  width: auto;
  max-width: min(72%, 388px);
  height: min(760px, calc(100vh - 88px));
  max-height: calc(100vh - 88px);
  aspect-ratio: auto;
  object-fit: contain;
  transform: none;
}

.product-page-template .product-template-note {
  max-width: 620px;
  margin-top: 18px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

/* SS-998 imagery roles: technical figures stay legible and are never cropped like a photo. */
.product-page-template .ss998-technical-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1.76;
  object-fit: contain;
  background: #f7fafb;
}

/* The structural cutaway is a tall technical detail; preserve the complete drawing instead of forcing the landscape ratio used by other figures. */
.product-page-template .ss998-technical-figure img.ss998-structural-cutaway {
  aspect-ratio: auto;
}

.product-page-template .ss998-node-detail {
  aspect-ratio: auto;
  margin-top: 18px;
}

.product-page-template .ss998-figure-stack {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.product-page-template .ss998-figure-stack figcaption {
  max-width: 720px;
}

.product-page-template .ss998-detail-image {
  aspect-ratio: 880 / 520;
  margin-top: 0;
  object-fit: contain;
}

.product-page-template .ss998-detail-divider {
  width: 100%;
  height: 3px;
  margin: 26px 0 18px;
  background: var(--teal-dark);
}

.product-page-template .ss998-defect-figure {
  align-self: center;
}

.product-page-template .product-core-performance-slot {
  margin-bottom: 34px;
}

/* Supply and technical data share one contract: table left, packing snapshot right. */
.product-page-template .product-technical-grid-with-supply {
  grid-template-columns: minmax(0, 1fr) minmax(250px, 0.31fr);
  gap: 34px;
}

.product-page-template .product-technical-table-column,
.product-page-template .product-technical-grid-with-supply .wr550-supply-ledger {
  min-width: 0;
}

.product-page-template .product-technical-grid-with-supply .wr550-supply-ledger {
  height: 100%;
}

.product-page-template .product-technical-grid-with-supply .wr550-data-table {
  min-width: 0;
  font-size: 14px;
}

.product-page-template .product-technical-grid-with-supply .wr550-data-table th,
.product-page-template .product-technical-grid-with-supply .wr550-data-table td {
  padding: 11px 12px;
}

.product-page-template .product-joint-only-grid {
  grid-template-columns: minmax(0, 1fr);
}

.product-page-template .product-joint-only-grid .wr550-joint-design {
  grid-template-columns: minmax(300px, 0.56fr) minmax(0, 1.44fr);
}

@media (max-width: 900px) {
  .product-page-template .product-technical-grid-with-supply {
    grid-template-columns: 1fr;
  }

  .product-page-template .product-technical-grid-with-supply .wr550-supply-ledger {
    height: auto;
    display: block;
  }

  .product-page-template .product-joint-only-grid .wr550-joint-design {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 560px) {
  .product-page-template .product-core-performance-slot {
    margin-bottom: 28px;
  }
}

@media (max-width: 1100px) {
  .product-page-template .single-product-packshot img {
    object-fit: contain;
  }
}

@media (max-width: 1280px) {
  .product-page-template.product-structural .single-product-packshot img {
    height: min(585px, calc(100vh - 140px));
  }
}

@media (max-width: 900px) {
  .product-page-template.product-structural .single-product-packshot img {
    height: min(430px, calc(100vh - 180px));
  }
}

@media (max-width: 760px) {
  .product-page-template.product-structural .single-product-packshot img {
    height: 340px;
  }
}