/* Apple product specification sheet
 *
 * A shared, editorial spec layout based on the iPad Pro product page.  The
 * markup stays deliberately simple: every product keeps its own .spec-row
 * data, while this sheet gives all Apple product pages the same visual
 * language.
 *
 * SPECIFICITY NOTE — do not simplify these selectors back to
 * `body.product-page .spec-row`. css/responsive.css still carries the older
 * light-card treatment as `.static-product-page .specs-table .spec-row` (0,3,0),
 * which outranks (0,2,1). When only half this sheet won, the rows kept a white
 * card while the labels and values went light — the whole table rendered white
 * on white. The `.specs-table` qualifier lifts every rule here to (0,3,1) so the
 * sheet lands as one piece.
 */

body.product-page .specs {
  /* Full-bleed black surface; the responsive inline padding holds the sheet
     itself to the same calm 1240px reading width as the iPad Pro page. */
  max-width: none !important;
  margin: 0 auto !important;
  padding: clamp(4rem, 6vw, 6.25rem) max(1.5rem, calc((100vw - 1240px) / 2)) !important;
  background: #000 !important;
  color: #f5f5f7 !important;
}

body.product-page .specs-head {
  /* css/responsive.css caps .specs-head at 720px for the old centred head.
     Here the head sits directly above a 1240px grid, so a 720px cap left its
     hairline stopping halfway across the table it introduces. */
  max-inline-size: none !important;
  margin: 0 !important;
  padding: 0 0 1.35rem !important;
  border-bottom: 1px solid rgba(255, 255, 255, .24) !important;
  text-align: right !important;
}

body.product-page .specs-eyebrow,
body.product-page .section-kicker {
  margin: 0 0 .45rem !important;
  color: rgba(255, 255, 255, .52) !important;
  font-family: var(--font-en, inherit) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .24em !important;
  text-transform: uppercase !important;
}

body.product-page .specs-title,
body.product-page .section-title {
  margin: 0 !important;
  color: #f5f5f7 !important;
  font-size: clamp(2.25rem, 4vw, 3.7rem) !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  letter-spacing: -.045em !important;
}

body.product-page .specs-table {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  border-radius: 0 !important;
  background: transparent !important;
}

body.product-page .specs-table .spec-row {
  display: flex !important;
  min-height: 112px !important;
  padding: 1.45rem 1.35rem !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: .55rem !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, .13) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: right !important;
}

body.product-page .specs-table .spec-row:not(:nth-child(3n + 1)) {
  border-inline-start: 1px solid rgba(255, 255, 255, .13) !important;
}

/* A spec count that is not a multiple of the column count used to leave the
   final row's unused tracks unpainted: the closing hairline stopped a third of
   the way across and the remainder read as a hole punched in the sheet.
   Products carry whatever spec list they have — the live catalog commonly
   sends seven — so let the trailing row take the leftover tracks rather than
   assume every product has a multiple of three. A count that already divides
   evenly matches neither selector, so those pages are untouched. */
body.product-page .specs-table .spec-row:last-child:nth-child(3n + 1) {
  grid-column: 1 / -1 !important;
}
body.product-page .specs-table .spec-row:last-child:nth-child(3n + 2) {
  grid-column: span 2 !important;
}

body.product-page .specs-table .spec-label {
  color: rgba(255, 255, 255, .52) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: .02em !important;
}

body.product-page .specs-table .spec-value {
  color: #f5f5f7 !important;
  font-family: var(--font-ar, inherit) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.55 !important;
}

body.product-page .specs-table .spec-value span {
  color: inherit !important;
}

body.product-page .specs-table .spec-value[lang="en"] {
  font-family: var(--font-en, inherit) !important;
  letter-spacing: -.02em !important;
}

@media (max-width: 900px) {
  body.product-page .specs-table { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  body.product-page .specs-table .spec-row:not(:nth-child(3n + 1)) { border-inline-start: 0 !important; }
  body.product-page .specs-table .spec-row:not(:nth-child(2n + 1)) { border-inline-start: 1px solid rgba(255, 255, 255, .13) !important; }
  /* Two columns leave a different remainder, so re-derive the span here
     instead of inheriting the three-column one. */
  body.product-page .specs-table .spec-row:last-child { grid-column: auto !important; }
  body.product-page .specs-table .spec-row:last-child:nth-child(2n + 1) { grid-column: 1 / -1 !important; }
}

@media (max-width: 640px) {
  body.product-page .specs { padding: 3.5rem 1.2rem !important; }
  body.product-page .specs-table { grid-template-columns: 1fr !important; }
  /* Single column: nothing is ever left over, so drop the span entirely. */
  body.product-page .specs-table .spec-row:last-child { grid-column: auto !important; }
  body.product-page .specs-table .spec-row { min-height: 0 !important; padding: 1rem 0 !important; }
  body.product-page .specs-table .spec-row:not(:nth-child(2n + 1)) { border-inline-start: 0 !important; }
  body.product-page .specs-title,
  body.product-page .section-title { font-size: 2.25rem !important; }
  body.product-page .specs-table .spec-value { font-size: 14px !important; }
}

/* Disclosure header
 *
 * The summary is `display:flex; justify-content:space-between` (from
 * css/responsive.css), and its three children are the eyebrow, the title and
 * the +/x toggle. Spreading three items across the full width parked the
 * eyebrow at one edge, the title floating in the middle and the toggle at the
 * other — a header that read as three unrelated fragments. Wrapping the title
 * onto its own row puts the kicker and the toggle on one line and lets the
 * title start where every other section title on the page starts.
 */
body.product-page .product-specs-summary {
  flex-wrap: wrap !important;
  align-items: center !important;
}
body.product-page .product-specs-summary .specs-eyebrow {
  order: 1;
  margin-inline-end: auto !important;
  margin-bottom: 0 !important;
}
body.product-page .product-specs-summary .product-specs-summary-icon {
  order: 2;
  border-color: rgba(255, 255, 255, .22) !important;
  background: rgba(255, 255, 255, .06) !important;
  color: #f5f5f7 !important;
}
body.product-page .product-specs-summary .specs-title {
  order: 3;
  flex: 0 0 100%;
}

@media (max-width: 640px) {
  /* The eyebrow is hidden at this width, so the title shares the toggle's row
     instead of leaving it stranded above an empty line. */
  body.product-page .product-specs-summary .specs-title {
    flex: 1 1 auto;
    order: 1;
    margin-inline-end: auto !important;
  }
  body.product-page .product-specs-summary .product-specs-summary-icon { order: 2; }
}