/* Consistent product cards on phones: no clipped horizontal rails. */
@media(max-width:600px){
  #flashDeals .deals-top{display:grid;grid-template-columns:1fr auto;gap:10px 8px;padding:13px 12px}
  #flashDeals .deals-title{grid-column:1/-1;justify-content:space-between;gap:8px}
  #flashDeals .deals-title strong{font-size:20px}
  #flashDeals .deals-title small{font-size:10px;text-align:right}
  #flashDeals .timer{justify-self:start;gap:4px}
  #flashDeals .timer-unit{min-width:33px}
  #flashDeals .deals-top>.btn{justify-self:end;white-space:nowrap}

  .deals .product-grid,
  #bestSellers .product-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    overflow:visible!important;
    width:100%;
  }
  .deals .product-card,
  #bestSellers .product-card{
    min-width:0!important;
    width:auto;
    scroll-snap-align:none;
    border-right:1px solid #ededed;
    border-bottom:1px solid #ededed;
    padding:10px!important;
  }
  .deals .product-card img,
  #bestSellers .product-card img{height:118px;margin:6px 0}
  .deals .product-title,
  #bestSellers .product-title{font-size:12px;line-height:1.35;min-height:34px;overflow-wrap:anywhere}
  .deals .price,
  #bestSellers .price{gap:5px;flex-wrap:wrap}
  .deals .price strong,
  #bestSellers .price strong{font-size:13px}
  .deals .old{font-size:10px}
  .deals .add,
  #bestSellers .add{font-size:10px;padding:9px 5px}
  .deals .add:after,
  #bestSellers .add:after{display:none}
  .product-card .quick-view-btn{max-width:calc(100% - 16px);font-size:9px}
  .product-card .wish-btn{width:28px;height:28px;right:7px;top:7px}

  .recommended-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;overflow:visible!important}
  .recommended-card{min-width:0!important}
  .recent-rail{display:grid;grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-columns:auto;overflow:visible}
  .recent-card{min-width:0}
}

@media(max-width:370px){
  .deals .product-card,
  #bestSellers .product-card{padding:8px!important}
  .deals .product-card img,
  #bestSellers .product-card img{height:100px}
  #flashDeals .deals-title{align-items:flex-start;flex-direction:column}
}