/* Rapid 3D — Filament Properties
 *
 * The professional decision data, styled to be read in seconds and not to
 * compete with the buy button. Follows the conventions already set by
 * availability.css: 6px radii, the same slate/amber palette, 14px base.
 *
 * The heat figure is the one thing that should be legible from across a desk —
 * everything else is support.
 */

/* The whole component is ONE panel.
 *
 * The storefront runs a dark product area, so anything left on the page
 * background inherits near-invisible contrast. The footer used to sit outside
 * the card and the guide link disappeared into the background — every part of
 * this component must live inside the light panel and set its own colours. */
.r3d-fp {
  margin: 16px 0;
  font-size: 14px;
  line-height: 1.5;
  border: 1px solid #E2E8F0;
  border-left: 3px solid #0F172A;
  border-radius: 6px;
  background: #F8FAFC;
  color: #0F172A;
  overflow: hidden;
}

.r3d-fp-card {
  padding: 14px 16px;
  color: #0F172A;
}

.r3d-fp-card + .r3d-fp-card {
  border-top: 1px solid #E2E8F0;
}

/* Shown only where one product spans several materials (TPU, PC, Silk). */
.r3d-fp-material {
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #475569;
  margin-bottom: 6px;
}

/* ── The deciding number ─────────────────────────────────── */

.r3d-fp-heat {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.r3d-fp-heat-value {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
  color: #0F172A;
}

.r3d-fp-heat-label {
  font-size: 12px;
  color: #64748B;
}

.r3d-fp-use {
  margin: 0 0 10px;
  color: #1E293B;
}

/* ── Operational cost ────────────────────────────────────── */

.r3d-fp-ops {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.r3d-fp-op {
  font-size: 12.5px;
  padding: 3px 9px;
  border-radius: 4px;
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  color: #92400E;
}

/* Nothing unusual required — say so plainly, it is a selling point. */
.r3d-fp-op-clear {
  background: #F0FDF4;
  border-color: #BBF7D0;
  color: #166534;
}

.r3d-fp-vent {
  margin-top: 10px;
  font-size: 13px;
  color: #475569;
}

.r3d-fp-vent summary {
  cursor: pointer;
  font-weight: 500;
  color: #334155;
}

.r3d-fp-vent p {
  margin: 6px 0 0;
}

/* ── Footer ──────────────────────────────────────────────── */

.r3d-fp-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 9px 16px;
  border-top: 1px solid #E2E8F0;
  background: #F1F5F9;
  font-size: 12px;
}

/* Colour is set explicitly, never inherited — the surrounding page is dark. */
.r3d-fp-link {
  color: #0F172A;
  text-decoration: underline;
  font-weight: 600;
}

.r3d-fp-link:hover,
.r3d-fp-link:focus {
  color: #334155;
}

.r3d-fp-src {
  color: #64748B;
}

/* ── Category / collection cards ─────────────────────────── */

/* The tile line.
 *
 * `width: 100%` and `flex-basis: 100%` are load-bearing: the surrounding tile
 * lays its children out as flex columns, and without them this line is squeezed
 * to a one-character-wide column that overlaps the title and price. */
.r3d-fp-card-line {
  display: block;
  width: 100%;
  flex: 0 0 100%;
  box-sizing: border-box;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid #E2E8F0;
  font-size: 12.5px;
  line-height: 1.45;
  text-align: left;
}

.r3d-fp-card-heat {
  display: inline-block;
  font-weight: 700;
  color: #0F172A;
  white-space: nowrap;
  margin-right: 6px;
}

.r3d-fp-card-flex {
  color: #475569;
}

.r3d-fp-card-use {
  color: #475569;
}

.r3d-fp-card-op {
  display: block;
  margin-top: 2px;
  color: #92400E;
}

/* ── Responsive ──────────────────────────────────────────── */

@media (max-width: 767px) {
  .r3d-fp-card {
    padding: 12px 13px;
  }

  .r3d-fp-heat-value {
    font-size: 24px;
  }

  .r3d-fp {
    font-size: 13px;
  }
}