/* =========================================================
   TanuArtVibes - Home Screenshot UI Fixes
   Fix date: 2026-06-19
   Purpose: mobile home layout, product image ratio, titles,
            custom form blank date field, review images,
            footer readability, floating buttons, logo size,
            category card consistency.
========================================================= */

/* 1) Best Sellers mobile: avoid single card stuck on left side */
@media (max-width: 768px) {
  body[data-page="index"] .tav-home-best-section .tav-product-grid {
    grid-template-columns: 1fr !important;
    max-width: 430px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    gap: 18px !important;
  }

  body[data-page="index"] .tav-home-best-section .tav-product {
    width: 100% !important;
  }
}

/* 2) Product images: keep same square ratio and show full admin image */
.tav-product .tav-product-media,
.tav-shop-page .tav-product-media,
body[data-page="wishlist"] .tav-product-media {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  min-height: 0 !important;
  background: #fff8f0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

.tav-product .tav-product-media img,
.tav-shop-page .tav-product-media img,
body[data-page="wishlist"] .tav-product-media img,
.product-card img {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: contain !important;
  object-position: center !important;
  background: #fff8f0 !important;
  transform: none !important;
}

/* 3) Product title: premium two-line clamp without awkward overflow */
.tav-product-title,
.tav-product-title h3,
.tav-product h3,
.product-title {
  min-height: 42px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}

@media (max-width: 768px) {
  .tav-product-title,
  .tav-product-title h3,
  .tav-product h3,
  .product-title {
    min-height: 52px !important;
    line-height: 1.35 !important;
  }
}

/* 4) Custom order form: hide blank date/deadline field that appears as thin empty line */
body[data-page="index"] #customOrderForm input[name="deadline"],
body[data-page="index"] .tav-custom-form input[name="deadline"],
.hidden-field,
.form-group:empty {
  display: none !important;
}

/* Keep custom form fields clean and equal height */
.tav-custom-step-form input,
.tav-custom-step-form select,
.tav-custom-step-form textarea {
  width: 100% !important;
  min-height: 48px !important;
  box-sizing: border-box !important;
}

/* 5) Testimonials/review images: full-width premium fit */
.tav-review img,
.tav-review-upgraded img,
.review-card img {
  width: 100% !important;
  height: 260px !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 24px !important;
  background: #fff8f0 !important;
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (max-width: 768px) {
  .tav-review img,
  .tav-review-upgraded img,
  .review-card img {
    height: 230px !important;
  }
}

/* 6) Footer dark background readability */
.tav-footer,
.footer {
  color: #f7eadc !important;
}

.tav-footer p,
.tav-footer a,
.tav-footer li,
.tav-footer span,
.tav-footer-bottom p,
.footer p,
.footer a,
.footer li {
  color: #f7eadc !important;
}

.tav-footer h3,
.tav-footer h4,
.tav-footer strong,
.footer h3,
.footer h4 {
  color: #d9b77e !important;
}

.tav-footer a:hover,
.footer a:hover {
  color: #fff8f0 !important;
}

/* 7) Floating WhatsApp/Instagram: keep above mobile bottom nav */
@media (max-width: 768px) {
  .tav-float,
  .floating-buttons,
  .floating-social,
  .float-social,
  .whatsapp-float,
  .instagram-float {
    bottom: 95px !important;
    z-index: 9997 !important;
  }

  .tav-float {
    right: 14px !important;
    flex-direction: row !important;
    gap: 10px !important;
  }

  body {
    padding-bottom: 100px !important;
  }
}

/* 8) Mobile header logo slightly bigger */
@media (max-width: 768px) {
  .tav-logo img,
  .site-logo img,
  .navbar-brand img {
    max-width: 145px !important;
    width: auto !important;
    height: auto !important;
    max-height: 62px !important;
    object-fit: contain !important;
  }
}

/* 9) Category cards: consistent height and count text wrapping */
.tav-cat-card-luxury,
.tav-cat-card,
.category-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

.tav-cat-card-luxury .tav-cat-content,
.tav-cat-card .tav-cat-content,
.category-card .count {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
}

.tav-cat-card-luxury p,
.tav-cat-card p,
.category-card .count {
  min-height: 42px !important;
  line-height: 1.35 !important;
}

@media (min-width: 769px) {
  .tav-cat-card-luxury,
  .tav-cat-card,
  .category-card {
    min-height: 430px !important;
  }
}

@media (max-width: 768px) {
  body[data-page="index"] .tav-cat-grid-luxury {
    align-items: stretch !important;
  }

  body[data-page="index"] .tav-cat-card-luxury,
  body[data-page="index"] .tav-cat-card,
  body[data-page="index"] .category-card {
    min-height: 0 !important;
  }

  body[data-page="index"] .tav-cat-card-luxury p,
  body[data-page="index"] .tav-cat-card p,
  body[data-page="index"] .category-card .count {
    min-height: 44px !important;
  }
}