/* LUSO mobile marketplace grid - 2026-10-16
 * CSS-only visual override for phone viewports. 641px+ (tablet and desktop)
 * intentionally retains the already homologated layout.
 * Product, stock, checkout, prices, and modal behaviour remain unchanged.
 */
@media screen and (max-width:640px) {
  /* Beats the legacy inline 520px single-column rule without affecting tablets. */
  .luso-shop main.shop #productsGrid {
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    align-items:stretch;
    column-gap:clamp(8px,2.5vw,12px)!important;
    row-gap:12px!important;
    width:100%;
    min-width:0;
  }

  .luso-shop #productsGrid .card {
    min-width:0;
    height:100%;
    overflow:hidden;
    border-radius:13px;
    box-shadow:0 3px 12px rgba(14,43,66,.055);
  }

  .luso-shop #productsGrid .pic {
    position:relative;
    width:100%;
    min-width:0;
    aspect-ratio:1 / 1!important;
    background:#f8fafb;
    isolation:isolate;
  }

  .luso-shop #productsGrid .pic img {
    display:block;
    width:100%;
    height:100%;
    max-width:100%;
    object-fit:contain!important;
    object-position:center;
    padding:clamp(8px,2.6vw,13px);
  }

  /* The original desktop add button remains in the DOM; on phones the same
     window.add handler is exposed as an easy-to-tap image overlay. */
  .luso-shop #productsGrid .marketplace-mobile-add {
    display:grid!important;
    position:absolute;
    right:9px;
    bottom:9px;
    z-index:4;
    place-items:center;
    width:44px;
    height:44px;
    min-width:44px;
    min-height:44px;
    padding:0;
    border:1px solid #d4e0e8;
    border-radius:50%;
    background:#fff;
    color:#16527e;
    box-shadow:0 3px 12px rgba(19,57,85,.15);
    font:700 1.65rem/1 Arial,sans-serif;
    cursor:pointer;
    touch-action:manipulation;
  }
  .luso-shop #productsGrid .marketplace-mobile-add:active {
    background:#e9f2f8;
    transform:scale(.96);
  }
  .luso-shop #productsGrid .marketplace-mobile-add:focus-visible {
    outline:3px solid #327dab;
    outline-offset:2px;
  }

  .luso-shop #productsGrid .badge {
    top:8px;
    left:8px;
    max-width:calc(100% - 16px);
    padding:5px 7px;
    border-radius:6px;
    font-size:.57rem;
    line-height:1.15;
    white-space:normal;
  }

  /* Keep the current percentage logic; only move the visual badge. */
  .luso-shop #productsGrid .catalog-discount-badge {
    top:auto;
    right:auto;
    left:8px;
    bottom:9px;
    z-index:3;
    padding:5px 7px;
    border:1px solid #cde9d9;
    border-radius:6px;
    background:#eaf8ef;
    color:#17643b;
    font-size:.65rem;
    letter-spacing:0;
  }

  .luso-shop #productsGrid .body {
    min-width:0;
    flex:1 1 auto;
    padding:10px 10px 12px!important;
  }

  .luso-shop #productsGrid .meta,
  .luso-shop #productsGrid .details,
  .luso-shop #productsGrid .desc {
    display:none!important;
  }

  .luso-shop #productsGrid .title {
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    line-clamp:2;
    min-height:2.6em;
    max-height:2.6em;
    margin:1px 0 7px;
    overflow:hidden;
    color:#193c59;
    font:600 clamp(.82rem,3.65vw,.94rem)/1.3 Inter,Arial,sans-serif;
    overflow-wrap:anywhere;
  }

  .luso-shop #productsGrid .low-stock {
    margin:0 0 5px;
    font-size:.68rem;
    line-height:1.25;
  }

  .luso-shop #productsGrid .bottom {
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-end;
    gap:7px!important;
    border-top:0;
    margin-top:auto;
    padding-top:2px!important;
    min-width:0;
  }

  .luso-shop #productsGrid .price {
    display:block;
    min-width:0;
    color:#0d314c;
    font-size:clamp(1.02rem,4.6vw,1.23rem)!important;
    font-weight:800;
    line-height:1.13;
    letter-spacing:-.025em;
    overflow-wrap:anywhere;
  }

  .luso-shop #productsGrid .price small {
    display:block;
    margin-bottom:5px;
    font-size:.71rem!important;
    font-weight:400;
    line-height:1.12;
    letter-spacing:0;
    color:#798691!important;
  }

  .luso-shop #productsGrid .card-actions {
    display:block!important;
    width:100%;
    min-width:0;
  }
  .luso-shop #productsGrid .card-actions .add {
    display:none!important;
  }
  .luso-shop #productsGrid .card-actions .view-product {
    display:block;
    width:100%!important;
    min-width:0;
    min-height:44px!important;
    padding:8px 5px!important;
    border:1px solid #d3dfe7;
    border-radius:8px!important;
    background:#fff;
    color:#174e76;
    font:700 .73rem/1.2 Inter,Arial,sans-serif!important;
    white-space:normal;
    text-align:center;
    touch-action:manipulation;
  }
  .luso-shop #productsGrid .card-actions .view-product:focus-visible {
    outline:3px solid #327dab;
    outline-offset:2px;
  }

  .luso-shop #productsGrid .card.is-soldout .pic {
    background:#f3f5f6;
  }
}