/* Hidden floating controls must also leave keyboard navigation. */
.nav-open .whatsapp-float,
.whatsapp-float[data-footer-visible],
.whatsapp-float[data-reading-visible] {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

/* Keep browsing cards compact; give an opened component table a reading row. */
@media (min-width: 700px) {
  .design-reference-list > li:has(.design-reference-specs[open]) {
    grid-column: 1 / -1;
    display: flow-root;
  }

  .design-reference-list > li:has(.design-reference-specs[open]) .design-reference-image {
    float: left;
    width: min(35%, 18rem);
    margin: 0 1.5rem 1rem 0;
  }

  .design-reference-specs[open] {
    clear: both;
    padding-top: 0.75rem;
  }
}