/* ==========================================================================
   ZamaniAuto: Product Card, Desktop Compact System (>= 1025px only)
   Loaded LAST from head.php with media="screen and (min-width:1025px)".
   Mobile and tablet never download-apply this file.

   Root causes this file fixes:
   1. Rail cards (.product-rail-cell) were forced to min-height:480px
      (product-card.css), so the body stretched and the price section
      (margin-top:auto) dropped far below the MPN row.
   2. .za-card-title reserved 2 lines (min-height:2.6em + 8px margin) even for
      one-line names, creating the big gap above the key-spec chip.
   3. Older overrides were scoped only to .products-grid, so they never
      reached rail cards, or were nested inside a max-width:1024px block.

   Selector scope: :is(#shop-main, #product-main, .shop-page-wrap) carries ID
   specificity, so it wins over every legacy class-level !important rule.
   Spacing scale: 2 / 4 / 6 / 8 px. Pass 3 (r3): desktop information order.
   ========================================================================== */

/* Card frame: height follows content; equal heights come from the row. */
:is(#shop-main, #product-main, .shop-page-wrap) .product-card.za-product-card-v3 {
  min-height: 0 !important;
  max-height: none !important;
  height: 100% !important;
  padding: 8px !important;
  border-radius: 12px !important;
  gap: 0 !important;
}

/* Top bar: status badge + tools */
:is(#shop-main, #product-main, .shop-page-wrap) .za-product-card-v3 .za-card-top-bar {
  min-height: 24px !important;
  margin: 0 0 4px !important;
  gap: 6px !important;
}
:is(#shop-main, #product-main, .shop-page-wrap) .za-product-card-v3 .za-card-badge {
  padding: 1px 6px !important;
  font-size: .64rem !important;
  line-height: 1.3 !important;
}
:is(#shop-main, #product-main, .shop-page-wrap) .za-product-card-v3 .za-card-side-tools { gap: 4px !important; }
:is(#shop-main, #product-main, .shop-page-wrap) .za-product-card-v3 .za-card-side-tools .za-tool-btn {
  width: 24px !important; height: 24px !important;
  min-width: 24px !important; min-height: 24px !important;
  max-width: 24px !important; max-height: 24px !important;
  font-size: .78rem !important;
}

/* Media: 3:2 instead of 1:1 saves ~33% of image height */
:is(#shop-main, #product-main, .shop-page-wrap) .za-product-card-v3 .za-card-media-wrap {
  aspect-ratio: 3 / 2 !important;
  margin: 0 0 6px !important;
  border-radius: 8px !important;
}
:is(#shop-main, #product-main, .shop-page-wrap) .za-product-card-v3 .za-card-img-anchor { padding: 4px !important; }
:is(#shop-main, #product-main, .shop-page-wrap) .za-product-card-v3 .za-card-media-wrap img { padding: 2px !important; }

/* Body: natural flow, no injected space between rows */
:is(#shop-main, #product-main, .shop-page-wrap) .za-product-card-v3 .za-card-body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  gap: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
}
:is(#shop-main, #product-main, .shop-page-wrap) .za-product-card-v3 .za-card-meta-row {
  min-height: 0 !important;
  margin: 0 0 2px !important;
  gap: 6px !important;
}
:is(#shop-main, #product-main, .shop-page-wrap) .za-product-card-v3 .za-card-brand { font-size: .74rem !important; line-height: 1.35 !important; }
:is(#shop-main, #product-main, .shop-page-wrap) .za-product-card-v3 .za-card-cat   { font-size: .68rem !important; line-height: 1.35 !important; }

/* Title: max 2 lines, but no reserved empty second line */
:is(#shop-main, #product-main, .shop-page-wrap) .za-product-card-v3 .za-card-title {
  min-height: 0 !important;
  height: auto !important;
  margin: 0 0 4px !important;
  font-size: .86rem !important;
  line-height: 1.35 !important;
  -webkit-line-clamp: 2 !important;
}

/* Key technical spec chip (e.g. 14 inputs / 10 outputs) */
:is(#shop-main, #product-main, .shop-page-wrap) .za-product-card-v3 .za-card-highlight-spec {
  margin: 0 0 4px !important;
  padding: 2px 8px !important;
  font-size: .7rem !important;
  line-height: 1.35 !important;
}

/* Desktop information order: product name -> technical code -> key feature. */
:is(#shop-main, #product-main, .shop-page-wrap) .za-product-card-v3 .za-card-meta-row { order: 0 !important; }
:is(#shop-main, #product-main, .shop-page-wrap) .za-product-card-v3 .za-card-title { order: 1 !important; }
:is(#shop-main, #product-main, .shop-page-wrap) .za-product-card-v3 .za-card-mpn-row { order: 2 !important; }
:is(#shop-main, #product-main, .shop-page-wrap) .za-product-card-v3 .za-card-highlight-spec { order: 3 !important; }

/* MPN row */
:is(#shop-main, #product-main, .shop-page-wrap) .za-product-card-v3 .za-card-mpn-row {
  min-height: 0 !important;
  margin: 0 0 4px !important;
  padding: 2px 8px !important;
  border-bottom: 0 !important;
  font-size: .7rem !important;
  line-height: 1.35 !important;
}
:is(#shop-main, #product-main, .shop-page-wrap) .za-product-card-v3 .za-mpn-placeholder { display: none !important; }

/* Price: sits right after the MPN; margin-top:auto only absorbs the
   small height difference between cards in the same row, so CTAs align. */
:is(#shop-main, #product-main, .shop-page-wrap) .za-product-card-v3 .za-card-price-section { order: 4 !important;
  min-height: 0 !important;
  margin: auto 0 4px !important;
  padding: 4px 0 0 !important;
}
:is(#shop-main, #product-main, .shop-page-wrap) .za-product-card-v3 .za-price-quote { font-size: .76rem !important; line-height: 1.35 !important; }
:is(#shop-main, #product-main, .shop-page-wrap) .za-product-card-v3 .za-price-val   { font-size: 1.08rem !important; line-height: 1.2 !important; }

/* Keep actions after the reordered information rows. */
:is(#shop-main, #product-main, .shop-page-wrap) .za-product-card-v3 .za-card-actions-row { order: 5 !important; }

/* Actions: 32px desktop target (above WCAG 2.2 24px minimum) */
:is(#shop-main, #product-main, .shop-page-wrap) .za-product-card-v3 .za-card-actions-row { gap: 6px !important; margin: 0 !important; }
:is(#shop-main, #product-main, .shop-page-wrap) .za-product-card-v3 .za-btn-action {
  height: 32px !important; min-height: 32px !important;
  padding: 0 10px !important;
  font-size: .78rem !important;
  border-radius: 8px !important;
}
:is(#shop-main, #product-main, .shop-page-wrap) .za-product-card-v3 .za-btn-detail {
  height: 32px !important; min-height: 32px !important;
  border-radius: 8px !important;
}