/* Product pages — all_in_one_pc.php, ptz_camera.php, ops.php */

/* Hero device frame holding a still product photo (white studio backdrop) */

/* Spec-card grid with an uneven card count: centre the short last row */
.ifp-spec-grid.pp-spec-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.pp-spec-grid .ifp-spec-card { flex: 0 1 calc((100% - 48px) / 3); }
@media (max-width: 900px) {
  .pp-spec-grid .ifp-spec-card { flex-basis: calc((100% - 24px) / 2); }
}
@media (max-width: 599px) {
  .pp-spec-grid .ifp-spec-card { flex-basis: 100%; }
}
/* Optional one-line description under a card's spec line (AIO "Top Features"). */
.pp-spec-grid .ifp-spec-text p + p { margin-top: 6px; color: var(--fg-muted); }

/* "Product information" accordion (AIO specifications) */
.pp-info { background: var(--bg); padding: var(--space-section) var(--site-pad-x); }
.pp-info-inner { max-width: var(--site-max-w); margin: 0 auto; }
.pp-info h2 {
  margin: 0 0 8px;
  text-align: left;
  font-family: var(--h-font, 'Inter', sans-serif);
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.3px;
  color: var(--fg-primary);
}
.pp-info-lede {
  margin: 0 0 24px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--fg-muted);
}

.pp-info-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 30px; align-items: start; }
@media (min-width: 1024px) {
  .pp-info-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.pp-info-item { border-bottom: 1px solid #D5E1EE; }
.pp-info-item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 17px 20px;
  cursor: pointer;
  list-style: none;
  font-family: var(--h-font, 'Inter', sans-serif);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--fg-primary);
  transition: background 0.2s ease;
}
.pp-info-item > summary::-webkit-details-marker { display: none; }
.pp-info-item > summary::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
.pp-info-item[open] > summary::after { margin-top: 4px; transform: rotate(-135deg); }
.pp-info-item > summary:hover { background: rgba(var(--accent-rgb), 0.05); }
.pp-info-item > summary:focus-visible { outline: 2px solid var(--primary, var(--primary)); outline-offset: -2px; }

.pp-info-panel { padding: 0 20px 22px; animation: pp-info-in 0.2s ease; }
@keyframes pp-info-in { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .pp-info-panel { animation: none; } }

/* Specification rows. A row shared by both configurations spans the value */
.pp-info-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 14.5px; line-height: 1.5; }
.pp-info-table th,
.pp-info-table td { padding: 10px 12px; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.pp-info-table thead th {
  background: var(--surface);
  font-family: var(--h-font, 'Inter', sans-serif);
  font-size: 12px;
  font-weight: 700;
  color: var(--primary-deep, var(--accent-deep));
}
.pp-info-table thead th:first-child,
.pp-info-table tbody th { width: 36%; }
.pp-info-table tbody th { font-weight: 600; color: var(--fg-primary); }
.pp-info-table tbody td { color: var(--fg-body); }
.pp-info-table tbody tr + tr > * { border-top: 1px solid #E8EEF6; }
.pp-info-table tbody tr.is-diff td { font-weight: 600; color: var(--fg-primary); }
.pp-info-table tbody td[colspan] { text-align: center; }
/* A blank cell on the specification sheet (PTZ): a muted dash, never bold. */
.pp-info-table .pp-na { font-weight: 400; color: var(--fg-faint); }

.pp-swatches { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pp-swatch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 13px;
  color: var(--fg-body);
}
.pp-swatch::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14);
}
.pp-swatch--black  { --c: #111827; }
.pp-swatch--pink   { --c: #F472B6; }
.pp-swatch--orange { --c: #FB923C; }
.pp-swatch--blue   { --c: var(--accent-deep); }
.pp-swatch--green  { --c: #22C55E; }
.pp-swatch--purple { --c: #8B5CF6; }
.pp-swatch--gray   { --c: #9CA3AF; }
.pp-swatch--yellow { --c: #FACC15; }

@media (max-width: 599px) {
  .pp-info-item > summary { padding: 15px 12px; font-size: 16px; }
  .pp-info-panel { padding: 0 12px 18px; }
  .pp-info-table th,
  .pp-info-table td { padding: 9px 8px; }
}

/* Variant picker (AIO processors, PTZ models): the IFP size-picker markup, with the photo gallery in */
.ifp-size-media { min-width: 0; }

/* SNL OPS gallery (ops.php): the module photos are wide and thin, so the frames are 4:3 instead of square and the thumbnails show the whole photo. */
.ops-gallery .ifp-55-main,
.ops-gallery .ifp-55-gallery-item { aspect-ratio: 4 / 3; }
.ops-gallery .ifp-55-thumb { height: 48px; }
.ops-gallery .ifp-55-thumb img { object-fit: contain; }
/* "What is OPS?" (ops.php): the same gallery, in the grid cell the single photo used to fill (.edla-image, which sizes every <img> inside it, so it is not reused). */
.ops-what-media { min-width: 0; }
/* the white photo sits on a white section here, so the main image gets the card edge the tinted module section gives it for free */
.ops-what-media .ifp-55-main,
.ops-what-media .ifp-55-gallery-item { border: 1px solid var(--border); box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08); }
@media (max-width: 900px) { .ops-what-media { order: 2; } }