/* Load after the shared and page styles. Only catalogue cards change on phones. */
@media (max-width:767.98px), (max-width:900px) and (max-height:500px) {
  .product-grid,
  .commerce-saved-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-auto-flow:row;
    grid-auto-columns:auto;
    gap:14px 12px;
    width:100%;
    max-width:none;
    margin-inline:auto;
    overflow:visible;
    scroll-snap-type:none;
  }

  .product-grid > .product-card,
  .commerce-saved-grid > .product-card,
  .product-grid.featured-grid > .product-card:last-child:nth-child(odd) {
    min-width:0;
    width:100%;
    max-width:none;
    grid-column:auto;
    justify-self:stretch;
  }

  /* Near-square framing keeps two complete rows within a typical phone view. */
  .product-card .card-picture {
    width:100%;
    min-height:0;
    height:auto;
    max-height:190px;
    aspect-ratio:9/8;
    border-radius:18px;
  }

  .product-card .card-picture > a:first-child {
    width:100%;
    height:100%;
  }

  .product-card .card-picture img {
    width:100%;
    height:100%;
  }

  .product-card .card-copy {
    min-width:0;
    padding:5px 1px 0;
  }

  .product-card .card-copy .card-meta {
    width:100%;
    font-size:9.5px;
    line-height:1.2;
    margin:0 0 2px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .product-card .card-copy h3 {
    flex:none;
    width:100%;
    max-width:none;
    height:2.2em;
    margin:0;
    font-size:16px;
    line-height:1.1;
  }

  /* The full name remains in the link's accessible text; only its visual lines clamp. */
  .product-card .card-copy h3 a {
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    line-clamp:2;
    overflow:hidden;
    overflow-wrap:break-word;
  }

  .product-card .card-copy .card-price {
    height:22px;
    margin:4px 0 0;
    font-size:18px;
    line-height:22px;
  }

  .product-card .card-copy .price-unknown {
    font-size:16px;
  }

  .product-card .card-copy .card-add {
    width:100%;
    min-width:0;
    min-height:44px;
    height:44px;
    margin-top:5px;
    padding:8px 10px;
    border-radius:10px;
    font-size:13px;
    line-height:1.15;
    gap:6px;
    flex-shrink:0;
    white-space:nowrap;
  }

  .product-card .card-add svg {
    width:17px;
    height:17px;
  }

  .product-card .wish-button {
    width:44px;
    height:44px;
    min-width:44px;
    min-height:44px;
    top:5px;
    right:5px;
  }

  .product-card .wish-button svg {
    width:20px;
    height:20px;
  }

  .product-card .card-brand {
    left:7px;
    bottom:7px;
    max-width:calc(100% - 14px);
    padding:4px 8px;
    font-size:10px;
    line-height:1.2;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
}