/*
 * Product detail — the child theme's additions: the versions block inside the
 * hero card and the datasheet section (specification rails closed by a product
 * literature rail). The agency sections around them (.section-product-detail,
 * .section-accessories, .section-blue-product, .section-doc) keep their design;
 * the only touch on accessories is a style-neutral anchor so the cards go
 * somewhere.
 *
 * One system, measured out of the compiled bundle rather than invented:
 *
 *   display voice   Barlow 600/700 — the face the site titles with
 *   body voice      Arial 17px/27px #404554 — the bundle's own body spec
 *   ink             #181726      wash #eef5f9      hairline rgba(164,171,193,.28)
 *   deep cyan       #0b6e9b — brand cyan taken dark enough to pass AA as small
 *                   text (5.65:1 on white, 5.13:1 on the wash, 4.81:1 on the
 *                   chip fill; #15a7de itself is 2.76:1 and is used only in the
 *                   non-text gradient rule)
 *   meta gray       #5f6577 (5.81:1 white / 5.27:1 wash) — never the bundle's
 *                   #8b91a6 or #a4abc1, which fail
 *   orange #f45821  action only: hover borders and the pdf glyph, never
 *                   body-size text
 *
 * Recurring parts:
 *   .pdp-head        section header: 40px Barlow title over a short
 *                    cyan-to-ice gradient rule — the one decorative mark this
 *                    section adds, a nod to a temperature scale
 *   .pdp-rail        group anatomy: uppercase deep-cyan label in a left rail,
 *                    content beside it, a cool 1px rule across the top —
 *                    spec tables and literature cards share it, which is what
 *                    lets both live in one section and read as one datasheet
 */

/* ---------- section header ---------- */

.section-specs .inner {
  max-width: 1173px; /* the container .section-doc/.section-product-detail use */
}

.section-specs .section-title {
  margin: 0;
  color: #181726;
  font-family: Barlow, Helvetica, Arial, sans-serif;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.15;
}

.section-specs .section-title::after {
  content: '';
  display: block;
  width: 56px;
  height: 4px;
  margin-top: 16px;
  border-radius: 2px;
  background: linear-gradient(90deg, #15a7de, #c9e9f8);
}

.pdp-head {
  margin-bottom: 46px;
}

/* ---------- group rail (shared by specs + documents) ---------- */

.pdp-rail {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  column-gap: 48px;
  align-items: start;
  border-top: 1px solid #c9d9e4;
  /*
   * Full shorthand, not padding-top: the bundle carries a bare
   * `section{padding-top:40px;padding-bottom:40px}` in its mobile styles and
   * these rails are <section> elements — without an explicit bottom the rails
   * picked up 40px of bundle padding under 768px.
   */
  padding: 26px 0 0;
}

.pdp-rail + .pdp-rail {
  margin-top: 46px;
}

.pdp-rail-label {
  margin: 3px 0 0;
  color: #0b6e9b;
  font-family: Barlow, Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ---------- versions (inside the hero card) ---------- */

/*
 * The hero's .right column is a wrapping flex row; without an explicit basis
 * this block shrank to content width and left a dead zone beside it.
 */
.section-product-detail .product-versions {
  flex: 0 0 100%;
  max-width: 100%;
}

.section-product-detail .product-versions .versions-title {
  margin: 0 0 6px;
  color: #404554;
  font-family: Barlow, Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.section-product-detail .product-versions ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.section-product-detail .product-versions li {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr) auto;
  column-gap: 20px;
  align-items: baseline;
  padding: 15px 0;
}

.section-product-detail .product-versions li + li {
  border-top: 1px solid rgba(164, 171, 193, 0.28);
}

.section-product-detail .product-versions li:last-child {
  padding-bottom: 6px;
}

.section-product-detail .product-versions .version-temp {
  justify-self: start;
  white-space: nowrap;
  padding: 4px 9px;
  border-radius: 2px;
  background: #dcf0fa;
  color: #0b6e9b;
  font-family: Barlow, Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}

.section-product-detail .product-versions .version-text {
  min-width: 0;
}

.section-product-detail .product-versions .version-name {
  margin-right: 10px;
  color: #181726;
  font-family: Barlow, Helvetica, Arial, sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
}

.section-product-detail .product-versions .version-desc {
  color: #404554;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 17px;
  line-height: 24px;
}

.section-product-detail .product-versions .version-meta {
  justify-self: end;
  white-space: nowrap;
  color: #5f6577;
  font-family: Barlow, Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

.section-product-detail .product-versions .version-meta > span + span::before {
  content: '·';
  margin: 0 7px;
}

/* ---------- the datasheet section ---------- */

/*
 * White band after the ice-wash Overall Dimensions section, closing the page
 * against the dark footer — 112px below because it is the last thing on the
 * page. The literature cards carry the wash instead.
 */
.section-specs {
  padding: 96px 0 112px;
  background: #fff;
}

.section-specs .spec-table {
  width: 100%;
  border-collapse: collapse;
}

.section-specs .spec-table th,
.section-specs .spec-table td {
  text-align: left;
  vertical-align: top;
  padding: 12px 0 13px;
}

.section-specs .spec-table th {
  width: 38%;
  padding-right: 28px;
  color: #181726;
  font-family: Barlow, Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 26px;
}

.section-specs .spec-table td {
  color: #404554;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 17px;
  line-height: 26px;
  font-variant-numeric: tabular-nums;
}

.section-specs .spec-table tr + tr th,
.section-specs .spec-table tr + tr td {
  border-top: 1px solid rgba(164, 171, 193, 0.28);
}

/* First row shares the rail label's baseline zone. */
.section-specs .spec-table tr:first-child th,
.section-specs .spec-table tr:first-child td {
  padding-top: 0;
}

/* ---------- product literature (the datasheet's closing rail) ---------- */

.section-specs .documents-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
}

.document-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 118px;
  padding: 18px 18px 20px;
  border: 1px solid transparent;
  border-radius: 8px; /* the hero card's radius */
  background: #eef5f9;
  text-decoration: none;
  transition: all 0.25s ease; /* the bundle's timing */
}

.document-card:hover {
  background: #fff;
  border-color: #f45821;
  box-shadow: 0 14px 30px rgba(24, 23, 38, 0.12);
  transform: translateY(-2px);
}

.document-card:active {
  transform: translateY(-2px) scale(0.985);
}

.document-card:focus-visible {
  outline: 2px solid #0b6e9b;
  outline-offset: 2px;
}

.document-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.document-card-top img {
  display: block;
  width: 18px;
  height: auto;
}

.document-card-meta {
  color: #5f6577;
  font-family: Barlow, Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

.document-card-label {
  margin-top: auto;
  color: #181726;
  font-family: Barlow, Helvetica, Arial, sans-serif;
  font-size: 17px;
  font-weight: 600;
  line-height: 24px;
  word-break: break-word;
}

/* ---------- accessories (agency section — link only, no restyle) ---------- */

/*
 * The card contents are wrapped in an anchor so each accessory goes somewhere
 * (its `link` field, or Request a Quote with the part number). The anchor must
 * be invisible: the bundle's global `a` is orange with hover underline, and
 * the card's own .item-title/.subtitle rules out-rank `inherit`, so this only
 * neutralises what would leak onto unclassed text. The focus ring is the same
 * one the document cards use.
 */
.section-accessories .accessory-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.section-accessories .accessory-link:hover {
  text-decoration: none;
}

.section-accessories .accessory-link:focus-visible {
  outline: 2px solid #0b6e9b;
  outline-offset: 4px;
  border-radius: 5px;
}

/* ---------- responsive ---------- */

@media (max-width: 1199px) {
  .pdp-rail {
    grid-template-columns: 200px minmax(0, 1fr);
    column-gap: 36px;
  }
}

@media (max-width: 991px) {
  .section-specs {
    padding: 64px 0 84px;
  }

  .section-specs .section-title {
    font-size: 32px;
  }

  .pdp-head {
    margin-bottom: 36px;
  }

  .pdp-rail {
    grid-template-columns: 168px minmax(0, 1fr);
    column-gap: 28px;
  }

  .section-specs .spec-table th {
    width: 44%;
    font-size: 15px;
    line-height: 24px;
  }

  .section-specs .spec-table td {
    font-size: 16px;
    line-height: 25px;
  }
}

@media (max-width: 767px) {
  .pdp-rail {
    display: block;
  }

  .pdp-rail + .pdp-rail {
    margin-top: 36px;
  }

  .pdp-rail-label {
    margin: 0 0 16px;
  }

  /* Stacked rows: the attribute sits directly above its value. */
  .section-specs .spec-table,
  .section-specs .spec-table tbody,
  .section-specs .spec-table tr,
  .section-specs .spec-table th,
  .section-specs .spec-table td {
    display: block;
    width: auto;
  }

  .section-specs .spec-table th {
    padding: 12px 0 1px;
    font-size: 15px;
    line-height: 22px;
  }

  .section-specs .spec-table td {
    padding: 0 0 12px;
    font-size: 16px;
    line-height: 25px;
  }

  .section-specs .spec-table tr + tr td {
    border-top: 0; /* the border stays on the th, once per row */
  }

  .section-specs .spec-table tr:first-child th {
    padding-top: 0;
  }

  /* Versions stack: chip, then name + description, then part · weight. */
  .section-product-detail .product-versions li {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 7px;
    padding: 16px 0;
  }

  .section-product-detail .product-versions .version-meta {
    justify-self: start;
  }

  .section-specs .documents-list {
    gap: 10px;
  }

  .document-card {
    min-height: 0;
  }
}

/* ---------- accessories ---------- */

/*
 * The agency's accessory cards are informational tiles and stay that way. The
 * only addition is a NAMED action, because an unlabelled link wrapping the whole
 * tile and landing on a generic quote form read as a dead end — every accessory
 * went to the same place with nothing acknowledging which was clicked.
 *
 * Brand orange, and large enough to clear WCAG as an action: white-on-#f45821 is
 * 3.35:1, which passes only as large text, so this is a link rather than a
 * filled button — orange on white is 5.02:1 at the darkened #b8410f.
 */
.section-accessories .accessory-request {
  display: inline-block;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #b8410f;
  text-decoration: none;
  border-bottom: 1px solid rgba(184, 65, 15, 0.35);
  padding-bottom: 2px;
}

.section-accessories .accessory-request:hover,
.section-accessories .accessory-request:focus-visible {
  color: #15a7de;
  border-bottom-color: #15a7de;
}

.section-accessories .accessory-link {
  display: block;
  text-decoration: none;
  color: inherit;
}