/* Keep the design cards aligned even when codes, names or materials have different lengths. */
@media (max-width: 820px) {
  .look-card .look-content { min-width: 0; }
  .look-card .look-img > .product-availability {
    top: auto;
    right: auto;
    bottom: 10px;
    left: 10px;
    max-width: calc(100% - 20px);
  }
  .look-card .look-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 14px 0 8px;
    font-size: 9px;
    line-height: 1.35;
  }
  .look-card .look-meta span { max-width: 100%; overflow-wrap: anywhere; }
  .look-card .look-meta .stock-count { white-space: normal; }
  .look-card .look-content h3 {
    font-size: clamp(18px, 5vw, 22px);
    line-height: 1.2;
    overflow-wrap: anywhere;
  }
  .look-card .look-content p { line-height: 1.45; overflow-wrap: anywhere; }

  /* Rows grow to fit the longest text in either card; no product text is hidden. */
  @supports (grid-template-rows: subgrid) {
    .look-grid { row-gap: 0; }
    .look-card {
      display: grid;
      grid-row: span 5;
      grid-template-rows: subgrid;
      align-items: start;
      min-width: 0;
    }
    .look-card .look-content {
      display: grid;
      grid-row: span 4;
      grid-template-rows: subgrid;
      align-self: stretch;
      align-content: start;
    }
    .look-card .look-price { margin-bottom: 30px !important; }
  }
  /* Older browsers keep a consistent, readable layout without horizontal overflow. */
  @supports not (grid-template-rows: subgrid) {
    .look-card .look-content h3 { min-height: 2.4em; }
    .look-card .look-content p:not(.look-price) { min-height: 2.9em; }
  }
}