/* pd-sections.css — layout for the 12-section product detail template.
   Loaded only by /products/<category>/<model>/ pages, after product-detail.css.
   Kept separate so the ported origin styles in product-detail.css stay untouched. */

/* ---------- page heading ---------- */
.pd-h1 {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.35;
  font-weight: 700;
  color: #0e1b2e;
}

.pd-eyebrow {
  margin: 0 0 0.85rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #94a3b8;
}

/* ---------- generic section shell ---------- */
.pd-block {
  max-width: 1280px;
  margin: 0 auto;
  padding: 1.75rem 1rem;
  border-top: 1px solid #eef2f7;
}
.pd-block:first-of-type { border-top: 0; }

.pd-h2 {
  margin: 0 0 0.85rem;
  font-size: 1.125rem;
  font-weight: 700;
  color: #0e1b2e;
  padding-left: 0.7rem;
  border-left: 4px solid #0b6eff;
  line-height: 1.2;
}

/* Quick Answers sub-heading: the question itself, styled as a follow-up to .pd-h2
   (shares the design tokens above so no new colours or sizes are introduced). */
.pd-h3 {
  margin: 1.1rem 0 0.3rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: #0e1b2e;
  line-height: 1.45;
}
.pd-block > .pd-h3:first-of-type { margin-top: 0.35rem; }

.pd-text {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.8;
  color: #46536b;
}

.pd-lead {
  margin: 0 0 0.85rem;
  font-size: 0.9rem;
  color: #64748b;
}

.pd-note {
  margin: 0.6rem 0 0;
  font-size: 0.8rem;
  color: #94a3b8;
}

/* ---------- product name ---------- */
.pd-name {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.45;
  color: #0e1b2e;
}

/* ---------- model chips (section 3) ---------- */
.pd-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.pd-chips li {
  padding: 0.35rem 0.8rem;
  border: 1px solid #dbe4f0;
  border-radius: 999px;
  background: #f7f9fc;
  font-size: 0.85rem;
  font-weight: 600;
  color: #115899;
  word-break: break-word;
}

/* ---------- bulleted lists (features / interface / protection) ---------- */
.pd-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pd-list li {
  position: relative;
  padding: 0.5rem 0 0.5rem 1.6rem;
  font-size: 0.95rem;
  line-height: 1.75;
  color: #46536b;
  border-bottom: 1px dashed #eef2f7;
  word-break: break-word;
}
.pd-list li:last-child { border-bottom: 0; }
.pd-list li::before {
  content: "";
  position: absolute;
  left: 0.25rem;
  top: 1.05rem;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #0b6eff;
}

/* ---------- honest placeholder blocks (real data not uploaded yet) ---------- */
.pd-todo {
  border: 1px dashed #c9d6e8;
  border-radius: 10px;
  background: #f8fafd;
  padding: 1rem 1.1rem;
}
.pd-todo-badge {
  display: inline-block;
  margin-bottom: 0.5rem;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: #e8effb;
  color: #115899;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.pd-todo-text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.75;
  color: #5a6b85;
}
.pd-todo-file {
  margin: 0.6rem 0 0;
  font-size: 0.78rem;
  line-height: 1.6;
  color: #94a3b8;
}
.pd-todo-file code {
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  background: #eef2f7;
  color: #115899;
  font-size: 0.75rem;
  word-break: break-all;
}

/* ---------- datasheet document list (section 10) ---------- */
.pd-docs {
  list-style: none;
  margin: 0.9rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}
.pd-doc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border: 1px solid #e3eaf4;
  border-radius: 8px;
  background: #fff;
  font-size: 0.9rem;
}
.pd-doc-kind { color: #0e1b2e; font-weight: 600; flex: none; min-width: 9.5rem; }
.pd-doc-file {
  flex: 1 1 auto;
  min-width: 0;
  color: #64748b;
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}
.pd-doc-link {
  flex: none;
  font-size: 0.8rem;
  font-weight: 600;
  color: #115899;
  padding: 0.3rem 0.7rem;
  border: 1px solid #cfe0f2;
  border-radius: 6px;
  background: #f4f9ff;
  white-space: nowrap;
}
.pd-doc-link:hover { background: #115899; color: #fff; border-color: #115899; }
.pd-doc-state {
  flex: none;
  font-size: 0.75rem;
  color: #94a3b8;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: #f1f5f9;
}
.pd-doc.is-empty { background: #f8fafd; border-style: dashed; }

/* ---------- request a quote (section 11) ---------- */
.pd-cta {
  margin-top: 1rem;
  padding: 3rem 1rem;
  background: #f5f7fa;
  text-align: center;
}
.pd-cta-inner { max-width: 44rem; margin: 0 auto; }
.pd-cta h2 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: #0e1b2e;
}
.pd-cta p {
  margin: 0.6rem 0 0;
  font-size: 0.95rem;
  line-height: 1.7;
  color: #5a6b85;
}
.pd-cta-actions {
  margin-top: 1.4rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}
.pd-btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
}
.pd-btn-primary { background: #0b6eff; color: #fff; }
.pd-btn-primary:hover { background: #084fb0; }
.pd-btn-dark { background: #0e1b2e; color: #fff; }
.pd-btn-dark:hover { background: #1c2f4a; }
.pd-cta-note { font-size: 0.8rem; color: #94a3b8; }

/* ---------- related products (section 12) ---------- */
.pd-rel-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.5rem;
}
.pd-rel-item a {
  display: block;
  padding: 0.7rem 0.9rem;
  border: 1px solid #e3eaf4;
  border-radius: 8px;
  font-size: 0.88rem;
  line-height: 1.5;
  color: #115899;
  text-decoration: none;
  word-break: break-word;
}
.pd-rel-item a:hover {
  border-color: #0b6eff;
  background: #f7faff;
}

/* ---------- responsive ---------- */
@media (max-width: 768px) {
  .pd-block { padding: 1.35rem 1rem; }
  .pd-h1 { font-size: 1.15rem; }
  .pd-h2 { font-size: 1.05rem; }
  .pd-name { font-size: 1.1rem; }
  .pd-list li { font-size: 0.9rem; padding-left: 1.35rem; }
  .pd-list li::before { top: 0.95rem; }
  .pd-cta { padding: 2.25rem 1rem; }
  .pd-cta h2 { font-size: 1.25rem; }
  .pd-doc { flex-direction: column; align-items: flex-start; gap: 0.35rem; }
  .pd-rel-list { grid-template-columns: 1fr; }
}

/* ---------- first-screen hero: image left (55%) / info right (45%) ----------
   P6: the row height is max(left, right); a short left column therefore used to
   leave a dead band under the product images. Each grid item now sizes to its
   own content (align-items:start + align-self:start) so the image column ends
   where the real image ends, and the taller info column simply continues. */
#content #pd-gallery .product-head {
  display: grid;
  grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
  gap: 1.5rem;
  align-items: start;
}
#content #pd-gallery .product-head > .left-img {
  align-self: start;
  min-width: 0;
}
#content #pd-gallery .product-head > .pd-hero-info {
  align-self: start;
}
.pd-hero-info {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}
.pd-hero-cell {
  border: 1px solid #eef2f7;
  border-radius: 8px;
  padding: 0.9rem 1rem;
  min-width: 0;
}
.pd-hero-cell .pd-h2 { margin-bottom: 0.55rem; }
.pd-hero-coop {
  border: 1px solid #dbe6f5;
  background: #f7faff;
  border-radius: 8px;
  padding: 0.85rem 1rem;
}
.pd-hero-coop p {
  margin: 0.18rem 0;
  font-size: 0.85rem;
  line-height: 1.55;
  color: #33415c;
}
.pd-hero-coop p:first-child { font-weight: 700; color: #0e1b2e; }
.pd-hero-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.pd-hero-actions .pd-btn { padding: 0.6rem 1.1rem; font-size: 0.88rem; }
.pd-btn-ghost { border: 1px solid #cbd5e1; color: #33415c; background: #fff; }
.pd-btn-ghost:hover { border-color: #0b6eff; color: #0b6eff; }
#pd-specs .table-responsive { overflow-x: auto; }
@media (max-width: 900px) {
  #content #pd-gallery .product-head { grid-template-columns: 1fr; }
}

/* ---------- series overview card (left column, under product images) ----------
   P6: the card stays in the left column (that keeps the image column visually
   full instead of dumping a tall empty band beside it), but the column is now
   a wrap container whose FIRST line is just image + thumbnails. The main image
   no longer carries height:100%, so the image line is exactly as tall as the
   real photo and the card begins immediately after it. */
#content #pd-gallery .product-head .left-img {
  flex-wrap: wrap;
  align-content: flex-start;
}
.pd-so {
  flex: 0 0 100%;
  width: 100%;
  box-sizing: border-box;
  margin-top: 1rem;
  border: 1px solid #e3eaf4;
  border-radius: 8px;
  background: #f8fafd;
  padding: 1.1rem 1.2rem 1.2rem;
}
.pd-so .pd-h2 { margin-bottom: 0.5rem; }
.pd-so-text {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.75;
  color: #33415c;
}
.pd-so-sub {
  margin: 0.9rem 0 0.55rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #0e1b2e;
}
.pd-hl-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}
.pd-hl-item {
  position: relative;
  padding: 0.55rem 0.7rem 0.55rem 1.5rem;
  border: 1px solid #e3eaf4;
  border-radius: 6px;
  background: #fff;
  font-size: 0.82rem;
  line-height: 1.55;
  color: #33415c;
}
.pd-hl-item::before {
  content: "";
  position: absolute;
  left: 0.7rem;
  top: 0.95rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #0b6eff;
}
@media (max-width: 900px) {
  .pd-hl-grid { grid-template-columns: 1fr; }
}

/* P6: highlight facets + hero overview cell */
.pd-hl-item .pd-hl-k { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; opacity: .62; margin-bottom: 2px; }
.pd-hl-item .pd-hl-v { display: block; }
.pd-hero-overview .pd-text { margin: 0; }