/* ============================================================================
   PRODUCT DETAIL — SPEC-VALUE OVERFLOW FIX
   ----------------------------------------------------------------------------
   PROBLEM
   On the product detail page, the "General Information" / "Category Specific"
   spec tables render as a two-column grid on phones (each cell = a gray label
   stacked over its bold value). A spec VALUE that is one long token with no
   spaces — e.g. a serial number like "#JAFDL550PNM400605" — has nowhere to
   wrap, so it ran straight out of its own cell and overlapped the value in the
   neighbouring column (it printed across "Used" under Condition).

   FIX
   Let such values break onto the next line WITHIN their own cell, the same way
   a normal multi-word value like "Santa Fe Springs, CA" already wraps. Plain
   multi-word values are unaffected — they still break at spaces only; only an
   unbreakable token is forced to wrap, and only when it would otherwise
   overflow. No text is ever allowed to cross into the adjacent column.

   SCOPE
   Targets only the spec-table label (.para) and value (.para-bold) cells inside
   #productDetail .product-detail-table-wrapper. Nothing else on the page is
   affected.

   LOAD ORDER
   Link this file AFTER product-detail-redesign.css (which is itself loaded
   after product-details.css). See README for the exact <link> line.
   ========================================================================= */

/* Allow the grid cell to shrink to the column width so its contents wrap
   instead of pushing the cell wider than its track. */
#productDetail .product-detail-table-wrapper .product-table-row .product-table-col {
  min-width: 0;
}

/* Break long, space-less values (serial numbers, VIN/model codes, etc.) onto
   the next line inside their own cell. overflow-wrap:anywhere handles the
   wrapping; word-break:break-word is the fallback for older engines. */
#productDetail .product-detail-table-wrapper .product-table-row .para,
#productDetail .product-detail-table-wrapper .product-table-row .para-bold {
  overflow-wrap: anywhere;
  word-break: break-word;
}