/* =====================================================================
   BIOHEAL CATEGORY / LISTING GRID — 2026-05-26 v2 (mobile-only layout)
   Goals:
   1) WHITE image background on EVERY card (consistent look across the
      mix of transparent PNGs and old JPGs with baked-in white bg).
   2) Mobile portrait (≤768px) — compact 2-column grid, equal card
      heights, line-clamp on long names, full-width Megnézem + Kosárba.
   3) Desktop / tablet (>768px) — leave the theme's default layout alone.
      Only the white image background applies.
   ===================================================================== */

/* ===== ALL VIEWPORTS — only the image background tweak ===== */
.catalog-category-view .product-item .product-image-container,
.catalogsearch-result-index .product-item .product-image-container {
  background: #FFFFFF !important;
  border-radius: 8px;
}
.catalog-category-view .product-item .product-image-photo,
.catalogsearch-result-index .product-item .product-image-photo {
  object-fit: contain;
  background: #FFFFFF;
}

/* ===== MOBILE PORTRAIT ≤768px — compact 2-col grid + uniform heights ===== */
@media (max-width: 768px) {
  /* Equal-height cards with bottom-anchored action row */
  .catalog-category-view .products-grid .product-item,
  .catalogsearch-result-index .products-grid .product-item {
    display: flex !important;
    flex-direction: column;
    height: 100%;
    width: 100% !important;
    margin: 0 !important;
    padding: 10px 8px !important;
    background: var(--paper-3, #FFFFFF);
    border: 1px solid var(--hair, rgba(42, 53, 40, .14));
    border-radius: 14px;
    box-sizing: border-box;
  }
  .catalog-category-view .product-item-info,
  .catalogsearch-result-index .product-item-info {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
  }
  .catalog-category-view .product-item-details,
  .catalogsearch-result-index .product-item-details {
    display: flex;
    flex-direction: column;
    flex: 1;
  }
  .catalog-category-view .product-item-actions,
  .catalogsearch-result-index .product-item-actions {
    margin-top: auto;
  }

  /* 2-col grid wrapper */
  .catalog-category-view .products-grid .product-items,
  .catalogsearch-result-index .products-grid .product-items {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    padding: 0 8px !important;
    margin: 0 !important;
    list-style: none !important;
  }

  /* Image area: 1:1 square frame, white bg, contain-fit */
  .catalog-category-view .product-item .product-image-container,
  .catalogsearch-result-index .product-item .product-image-container {
    width: 100% !important;
    aspect-ratio: 1 / 1;
    background: #FFFFFF !important;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  .catalog-category-view .product-item .product-image-wrapper,
  .catalogsearch-result-index .product-item .product-image-wrapper {
    padding: 0 !important;
    height: 100% !important;
    width: 100% !important;
    position: static !important;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .catalog-category-view .product-item .product-image-photo,
  .catalogsearch-result-index .product-item .product-image-photo {
    position: static !important;
    width: auto !important;
    max-width: 92% !important;
    height: auto !important;
    max-height: 92% !important;
    object-fit: contain;
  }

  /* Name 2-line clamp + ellipsis */
  .catalog-category-view .product-item-name,
  .catalogsearch-result-index .product-item-name {
    display: block;
    margin: .5rem 0 .25rem;
    min-height: 2.6em;
  }
  .catalog-category-view .product-item-name a,
  .catalogsearch-result-index .product-item-name a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.25;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink, #2A3528);
  }

  /* Price */
  .catalog-category-view .product-item .price,
  .catalogsearch-result-index .product-item .price {
    font-weight: 700;
    color: var(--forest, #2D5A3D);
    font-size: 15px;
  }

  /* Hide the long description and "Tudj meg többet" on mobile listing */
  .catalog-category-view .product-item-description,
  .catalogsearch-result-index .product-item-description {
    display: none !important;
  }

  /* Action buttons: full-width vertical stack */
  .catalog-category-view .product-item-actions .actions-primary,
  .catalog-category-view .product-item-actions .actions-secondary,
  .catalogsearch-result-index .product-item-actions .actions-primary,
  .catalogsearch-result-index .product-item-actions .actions-secondary {
    display: block;
    width: 100%;
    margin: 4px 0;
  }
  .catalog-category-view .product-item-actions .action.primary,
  .catalog-category-view .product-item-actions button.tocart,
  .catalogsearch-result-index .product-item-actions .action.primary,
  .catalogsearch-result-index .product-item-actions button.tocart {
    width: 100% !important;
    padding: 10px 8px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    box-sizing: border-box;
    white-space: nowrap;
  }
  .catalog-category-view .product-item .qty-input,
  .catalog-category-view .product-item .control.qty,
  .catalogsearch-result-index .product-item .qty-input,
  .catalogsearch-result-index .product-item .control.qty {
    max-width: 100% !important;
  }
}

/* Slightly tighter under 380px */
@media (max-width: 380px) {
  .catalog-category-view .products-grid .product-items,
  .catalogsearch-result-index .products-grid .product-items {
    gap: 6px !important;
    padding: 0 6px !important;
  }
  .catalog-category-view .products-grid .product-item,
  .catalogsearch-result-index .products-grid .product-item {
    padding: 6px 6px !important;
  }
  .catalog-category-view .product-item-name a,
  .catalogsearch-result-index .product-item-name a {
    font-size: 12px;
  }
}