/* Mobile product details are a compact editorial strip, not a floating card.
   Desktop card composition, film framing, and interaction timing are untouched. */
@media (max-width:1000px) {
  .product-card, .product-card[data-role="bag"] {
    position:relative; inset:auto; width:100%; max-width:none;
    height:auto; max-height:none; margin:0; padding:14px 18px 10px;
    border:0; border-radius:0; box-shadow:none; transform:none;
    background:#fff; overflow:visible;
    display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.35fr);
    grid-template-rows:auto auto auto 34px 44px; gap:6px 16px; align-items:center;
  }
  .product-card .product-photo {
    grid-column:1; grid-row:1/4; min-height:0; height:110px; aspect-ratio:auto;
  }
  .product-card[data-role="shoes"] .product-photo {
    height:auto; min-height:0; aspect-ratio:7/3;
  }
  .product-card .card-copy {display:contents}
  .product-card .brand {grid-column:2; grid-row:1; align-self:start; margin:0; font-size:9px; letter-spacing:.12em}
  .product-card .card-copy h2 {grid-column:2; grid-row:2; align-self:start; margin:0; font-size:19px; line-height:1.12}
  .product-card .card-copy ul {grid-column:2; grid-row:3; margin:0; padding:0; list-style:none; font-size:11px; line-height:1.35}
  .product-card .price {grid-column:1; grid-row:4; margin:0; font-size:23px; line-height:1.2}
  .product-card .price-chart {grid-column:2; grid-row:4; height:34px; width:100%; margin:0}
  .product-card .shop-link {grid-column:2; grid-row:5; min-height:44px; padding:10px 12px; font-size:12px}
  .product-card .back {grid-column:1; grid-row:5; padding:0; min-height:44px; font-size:12px; text-align:left}
}
@media (max-width:360px) {
  .product-card, .product-card[data-role="bag"] {padding-inline:12px; column-gap:12px}
  .product-card .card-copy h2 {font-size:17px}
}