Product Specifications

<div class="product-specifications">
  <h3>Technical Specifications</h3>
  
  <table class="specs-table">
    <tbody>
      {% if product.metafields.custom.spec_speed != blank %}
      <tr>
        <td><strong>Data Rate / Speed</strong></td>
        <td>{{ product.metafields.custom.spec_speed }}</td>
      </tr>
      {% endif %}
      
      {% if product.metafields.custom.spec_form_factor != blank %}
      <tr>
        <td><strong>Form Factor</strong></td>
        <td>{{ product.metafields.custom.spec_form_factor }}</td>
      </tr>
      {% endif %}
      
      {% if product.metafields.custom.spec_connector != blank %}
      <tr>
        <td><strong>Connector Type</strong></td>
        <td>{{ product.metafields.custom.spec_connector }}</td>
      </tr>
      {% endif %}
      
      {% if product.metafields.custom.spec_distance != blank %}
      <tr>
        <td><strong>Transmission Distance</strong></td>
        <td>{{ product.metafields.custom.spec_distance }}</td>
      </tr>
      {% endif %}
      
      {% if product.metafields.custom.spec_wavelength != blank %}
      <tr>
        <td><strong>Wavelength</strong></td>
        <td>{{ product.metafields.custom.spec_wavelength }}</td>
      </tr>
      {% endif %}
      
      {% if product.metafields.custom.spec_temperature != blank %}
      <tr>
        <td><strong>Operating Temperature</strong></td>
        <td>{{ product.metafields.custom.spec_temperature }}</td>
      </tr>
      {% endif %}
      
      {% if product.metafields.custom.spec_protocol != blank %}
      <tr>
        <td><strong>Protocol</strong></td>
        <td>{{ product.metafields.custom.spec_protocol }}</td>
      </tr>
      {% endif %}
      
      {% if product.metafields.custom.spec_config != blank %}
      <tr>
        <td><strong>Configuration</strong></td>
        <td>{{ product.metafields.custom.spec_config }}</td>
      </tr>
      {% endif %}
      
      {% if product.metafields.custom.spec_length_m != blank %}
      <tr>
        <td><strong>Cable Length</strong></td>
        <td>{{ product.metafields.custom.spec_length_m }} meters</td>
      </tr>
      {% endif %}
      
      {% if product.metafields.custom.spec_signal_type != blank %}
      <tr>
        <td><strong>Signal Type</strong></td>
        <td>{{ product.metafields.custom.spec_signal_type }}</td>
      </tr>
      {% endif %}
      
      {% if product.metafields.custom.spec_extender_type != blank %}
      <tr>
        <td><strong>Extender Type</strong></td>
        <td>{{ product.metafields.custom.spec_extender_type }}</td>
      </tr>
      {% endif %}
    </tbody>
  </table>
  
  {% if product.metafields.custom.datasheet != blank %}
  <div class="datasheet-download" style="margin-top: 20px;">
    <a href="{{ product.metafields.custom.datasheet.url }}" 
       download="{{ product.metafields.custom.datasheet.name }}"
       class="btn btn--secondary"
       style="display: inline-block; padding: 12px 24px; background-color: #f5f5f5; text-decoration: none; border-radius: 4px;">
      📄 Download Datasheet
    </a>
  </div>
  {% endif %}
</div>

<style>
.specs-table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
}
.specs-table td {
  padding: 12px 16px;
  border-bottom: 1px solid #e5e5e5;
}
.specs-table tr:last-child td {
  border-bottom: none;
}
.specs-table td:first-child {
  width: 40%;
  color: #666;
}
.specs-table td:last-child {
  width: 60%;
  font-weight: 500;
}
</style>