/* =========================================================
   GLOBAL MOBILE HORIZONTAL PRODUCT CARD LOCK
   Loaded after page CSS, ensures cards stay horizontal
   across zoom levels and browser font-size changes.
   ========================================================= */

@media (max-width: 768px) {
  body .product-card,
  body .showcase-card,
  body .related-card {
    flex-direction: row !important;
    align-items: stretch !important;
    min-height: 0 !important;
    padding: 0.75rem !important;
    border-radius: 1.5rem !important;
    gap: 0.75rem !important;
    overflow: hidden !important;
    text-decoration: none !important;
    color: inherit !important;
  }

  body .product-card .card-img-wrap,
  body .showcase-card .showcase-img,
  body .related-card .card-img-wrap {
    flex: 0 0 104px !important;
    width: 104px !important;
    height: 104px !important;
    aspect-ratio: auto !important;
    border-radius: 1rem !important;
    margin: 0 !important;
    overflow: hidden !important;
    position: relative !important;
  }

  body .product-card .card-img-inner,
  body .product-card .card-img-wrap img,
  body .showcase-card .showcase-img img,
  body .showcase-card .showcase-img video,
  body .related-card .card-img-wrap img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  body .product-card .card-body,
  body .showcase-card .showcase-body,
  body .related-card .related-body {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    padding: 0 !important;
    gap: 0.25rem !important;
    overflow: hidden !important;
  }

  body .product-card .product-title,
  body .showcase-card .product-title,
  body .related-card .product-title {
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    font-size: 0.85rem !important;
    line-height: 1.3 !important;
    margin: 0 !important;
  }

  body .product-card .card-desc,
  body .showcase-card .card-desc,
  body .related-card .card-desc {
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    font-size: 0.75rem !important;
    line-height: 1.4 !important;
    margin: 0 !important;
  }

  body .product-card .card-bottom,
  body .showcase-card .showcase-meta,
  body .related-card .related-price {
    margin-top: auto !important;
  }

  body .product-card .btn-card {
    font-size: 0.72rem !important;
    padding: 0.4rem 0.7rem !important;
  }

  body .product-card .card-footer,
  body .showcase-card .showcase-meta {
    gap: 0.4rem !important;
    flex-wrap: wrap !important;
  }
}


/* =========================================================
   EXPANDED TITLE EXCEPTIONS FOR MOBILE HORIZONTAL CARDS
   Allow full title visibility when user taps toggle.
   ========================================================= */
@media (max-width: 768px) {
  body .product-card.title-expanded-card,
  body .showcase-card.title-expanded-card,
  body .related-card.title-expanded-card {
    overflow: visible !important;
    height: auto !important;
  }

  body .product-card.title-expanded-card .card-body,
  body .showcase-card.title-expanded-card .showcase-body,
  body .related-card.title-expanded-card .related-body {
    overflow: visible !important;
  }

  body .product-card.title-expanded-card .product-title,
  body .showcase-card.title-expanded-card .product-title,
  body .related-card.title-expanded-card .product-title {
    display: block !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: vertical !important;
    overflow: visible !important;
    white-space: normal !important;
  }
}


/* =========================================================
   EXPANDED DESCRIPTION FOR MOBILE HORIZONTAL CARDS
   Shows a useful part of short_description when opened.
   ========================================================= */
@media (max-width: 768px) {
  body .product-card.title-expanded-card .card-desc,
  body .showcase-card.title-expanded-card .card-desc,
  body .related-card.title-expanded-card .card-desc {
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    white-space: normal !important;
    line-height: 1.5 !important;
    font-size: 0.78rem !important;
  }

  /* Make sure expanded card does not clip the extra description */
  body .product-card.title-expanded-card,
  body .showcase-card.title-expanded-card,
  body .related-card.title-expanded-card {
    overflow: visible !important;
    height: auto !important;
  }
}


/* =========================================================
   UNIFORM PRODUCT CARD IMAGE SIZING
   Restore cover so all card images look the same size,
   regardless of their original dimensions.
   ========================================================= */
.card-img-wrap img,
.card-img-inner img,
.showcase-img img,
.related-card .card-img-wrap img {
  object-fit: cover !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  display: block !important;
}


/* =========================================================
   FINAL PRODUCT CARD IMAGE DISPLAY FIX
   Show the entire product inside a uniform-sized box.
   Card box stays same size; empty space uses card background.
   Main product gallery/lightbox remains unchanged.
   ========================================================= */
.product-card .card-img-wrap img,
.product-card .card-img-inner img,
.showcase-card .showcase-img img,
.related-card .card-img-wrap img {
  object-fit: contain !important;
  object-position: center !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  display: block !important;
  background: var(--bg-secondary, transparent) !important;
}

@media (max-width: 768px) {
  body .product-card .card-img-wrap img,
  body .product-card .card-img-inner img,
  body .showcase-card .showcase-img img,
  body .related-card .card-img-wrap img {
    object-fit: contain !important;
    object-position: center !important;
  }
}