/*
 * Unicorn – Mobile Overrides
 * 需求：移动端商品图改为正方形，图片更宽并贴近外框边缘。
 * 做法：在移动端以更高优先级覆盖商品卡片图片的尺寸与内边距。
 */

@media (max-width: 767.98px) {
  input[type="text"],
  input[type="email"],
  input[type="number"],
  input[type="password"],
  input[type="tel"],
  select,
  textarea,
  .form-control {
    font-size: 16px !important;
    line-height: 1.4 !important;
  }

  /* 卡片本身不留边，图片可以贴边显示 */
  .product-card { padding: 0 !important; overflow: hidden; }

  /* 商品封面图：方形、覆盖裁剪、填满卡片宽度并取消内框留白 */
  .product-card .card-img-top {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: contain !important;     /* 显示更完整的图片，缩小一点 */
    object-position: center !important;
    padding: .2rem !important;          /* 恢复轻微留白，视觉更广 */
    margin: 0 !important;
    border: none !important;
    border-top-left-radius: inherit !important;
    border-top-right-radius: inherit !important;
    display: block;
  }

  /* 内容区略收紧但保持舒适的左右内距 */
  .product-card .card-body { padding-left: .6rem !important; padding-right: .6rem !important; }
}