/* Brand4U refresh v1 (2026-09-30): product cards, homepage layout, mobile.
   Loaded after styles.css on index, category and search pages. Remove the <link> to undo. */

/* ---------- Product cards ---------- */
.product-card { display: flex; flex-direction: column; }
.product-card .product-content { display: flex; flex-direction: column; flex: 1; }
.product-card .product-footer { margin-top: auto; }
.product-card h3 {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 2.6em; line-height: 1.3;
}
.b4u-card-price {
  font-weight: 700; font-size: 1.1rem; color: #111; margin: 6px 0 6px; line-height: 1.2;
}
.b4u-card-price s { font-weight: 400; font-size: .82rem; color: #8a8a8a; margin-left: 6px; }
.b4u-cod {
  align-self: center; display: inline-block; font-size: .68rem; font-weight: 600; letter-spacing: .03em;
  background: #e9f7ef; color: #137a3a; border-radius: 999px; padding: 3px 10px; margin-bottom: 10px;
}
.b4u-wa-btn {
  order: 99; display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; min-height: 40px; margin-top: 8px; padding: 8px 10px; border-radius: 8px;
  background: #25D366; color: #fff !important; font-weight: 600; font-size: .8rem;
  text-decoration: none !important; transition: background .15s ease;
}
.b4u-wa-btn:hover { background: #1ebe5a; }
.product-card .add-to-cart-elegant { min-height: 40px; }

/* ---------- Homepage layout ---------- */
#home-page .category-products .section-header { margin-bottom: 28px; }
.b4u-view-all {
  display: inline-block; margin-top: 10px; font-size: .85rem; font-weight: 600;
  color: #fff !important; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.6);
}
.b4u-view-all:hover { border-bottom-color: #fff; }
#home-page section.categories .category-grid {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important; gap: 14px !important;
}
#home-page section.categories .category-card { padding: 18px 10px !important; }

/* ---------- Tablet ---------- */
@media (max-width: 1023px) {
  .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 14px !important; }
}

/* ---------- Mobile ---------- */
@media (max-width: 600px) {
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  .product-card { border-radius: 12px !important; }
  .product-card .product-content { padding: 10px 10px 12px !important; }
  .product-card h3 { font-size: .82rem !important; }
  .product-card .product-category { font-size: .6rem !important; }
  .b4u-card-price { font-size: 1rem; }
  .b4u-wa-btn, .product-card .add-to-cart-elegant { font-size: .74rem !important; padding: 8px 6px !important; }
  .product-card .quick-view-btn { display: none !important; }
  #home-page section.category-products { padding-left: 12px !important; padding-right: 12px !important; }
  #home-page .category-products .section-header h2 { font-size: 1.8rem !important; }

  /* categories become one swipeable row */
  #home-page section.categories .category-grid {
    display: flex !important; overflow-x: auto; gap: 10px !important; padding: 4px 4px 12px;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  }
  #home-page section.categories .category-card {
    flex: 0 0 96px; scroll-snap-align: start; padding: 12px 6px !important;
  }
  #home-page section.categories .category-card .icon-arrow { display: none; }
}

/* ---------- Homepage grid: 4 per row, centred, less empty space (desktop) ---------- */
@media (min-width: 1024px) {
  #home-page section.category-products { padding: 64px 24px !important; }
  #home-page section.category-products .product-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    max-width: 1180px; margin-left: auto !important; margin-right: auto !important; gap: 24px !important;
  }
}
@media (max-width: 1023px) {
  #home-page section.category-products { padding-top: 48px !important; padding-bottom: 48px !important; }
}

@media (max-width: 600px) {
  .b4u-wa-btn { white-space: nowrap; gap: 5px; }
  .b4u-wa-long { display: none; }
}