/* ==========================================================================
   MOBILE DENSITY v4.3 (24px gap polish) — CONSOLIDATED ROOT-CAUSE FIX (staging only, 2026-09-27)
   ==========================================================================

   ELEMENT SIZES (FROZEN — do not change):
   - Product image: 76×76px
   - Title: 13px / 1.3
   - Price: 15px / 1.3
   - Apple Pay visible: 92×36px
   - Cart visible: 36×36px (44px touch via ::after)
   - Wishlist visible: 32×32px (44px touch via ::after)
   - Touch targets: >=44px

   ROOT CAUSES FIXED:
   1. Rail stretch: .product-rail is grid with default align-items:stretch.
      On mobile, cards stretched to tallest card height. Fixed with
      align-items:start so each card wraps its own content.

   2. Old homepage.css mobile rules: .product-card had min-height:168px,
      display:grid, grid-template-rows:168px in @media (max-width:760px).
      Explicitly neutralized below with higher specificity.

   3. ::after touch targets: position:absolute (out of flow). Explicitly
      set pointer-events:none and display:block to ensure zero layout impact.

   SCOPE: .rch-template .rc-home .product-card.rcs-card ONLY (mobile).
   No PHP, no business logic, no Apple Pay engine, no desktop changes.
   No fixed heights, no max-height, no overflow:hidden, no negative margins,
   no transform/scale/zoom.
   ========================================================================== */

@media (max-width: 760px) {

  /* ---------- ROOT CAUSE 1: rail stretch ---------- */
  .rch-template .rc-home .product-rail {
    align-items: start;
  }

  /* ---------- ROOT CAUSE 2: neutralize old .product-card mobile rules ---------- */
  /* homepage.css @media (max-width:760px) sets:
     .product-card { min-height:168px; display:grid;
                     grid-template-columns:124px minmax(0,1fr);
                     grid-template-rows:168px; overflow:hidden; }
     These must NOT apply to the new .rcs-card. Higher specificity wins. */
  .rch-template .rc-home .product-card.rcs-card {
    display: flex;
    min-height: 0;
    grid-template-columns: none;
    grid-template-rows: none;
    overflow: visible;
  }

  /* ---------- card shell: content-driven height ---------- */
  .rch-template .rc-home .product-card.rcs-card {
    gap: 6px;
    padding: 4px 6px 6px;
    border-radius: 13px;
    margin-bottom: 2px;
  }

  /* ---------- product image: 76×76 (frozen) ---------- */
  .rch-template .rc-home .product-card.rcs-card .rcs-media {
    flex-basis: 76px;
    width: 76px;
    height: 76px;
    border-radius: 9px;
    flex: none;
    align-self: flex-start;
  }

  /* ---------- content column: natural stacking, no stretch ---------- */
  .rch-template .rc-home .product-card.rcs-card .rcs-main {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 0;
  }

  /* ---------- top row ---------- */
  .rch-template .rc-home .product-card.rcs-card .rcs-top {
    gap: 5px;
    align-items: flex-start;
  }

  /* ---------- category: 9px (frozen) ---------- */
  .rch-template .rc-home .product-card.rcs-card .rcs-cat {
    font-size: 9px;
    line-height: 1.4;
    margin-bottom: 1px;
    font-weight: 400;
  }

  /* ---------- title: 13px (frozen) ---------- */
  .rch-template .rc-home .product-card.rcs-card .rcs-title {
    font-size: 13px;
    line-height: 1.3;
    margin-bottom: 1px;
  }

  /* ---------- price: 15px (frozen) ---------- */
  .rch-template .rc-home .product-card.rcs-card .rcs-price {
    font-size: 15px;
    line-height: 1.3;
  }
  .rch-template .rc-home .product-card.rcs-card .rcs-price del {
    font-size: 11px;
  }

  /* ---------- trust: 9px (frozen) ---------- */
  .rch-template .rc-home .product-card.rcs-card .rcs-trust {
    font-size: 9px;
    line-height: 1.4;
    gap: 3px;
  }
  .rch-template .rc-home .product-card.rcs-card .rcs-trust svg {
    width: 11px;
    height: 11px;
  }

  /* ---------- action row ---------- */
  .rch-template .rc-home .product-card.rcs-card .rcs-borrow {
    margin-top: 4px;
    margin-bottom: 0;
    gap: 6px;
    min-height: 0;
  }
  /* ---------- v4.3: controlled ~24px Cart/Apple Pay gap ---------- */
  /* flex-end packs to LEFT in RTL (Cart stays at left edge).
     clamp: ~24px at 390px, shrinks safely to 8px minimum at 320px.
     8px minimum ensures 4px clearance between 44px touch areas. */
  .rch-template .rc-home .product-card.rcs-card .rcs-borrow .rcs-action {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(8px, 6vw, 24px);
    min-width: 0;
  }

  /* ---------- wishlist: 32px visual, 44px touch (frozen) ---------- */
  .rch-template .rc-home .product-card.rcs-card .rcs-wish {
    width: 32px;
    height: 32px;
    position: relative;
    flex: none;
  }
  .rch-template .rc-home .product-card.rcs-card .rcs-wish svg {
    width: 16px;
    height: 16px;
  }
  /* ROOT CAUSE 3: ::after is absolute (out of flow) — zero layout impact.
     pointer-events:none ensures it never intercepts layout calculations. */
  .rch-template .rc-home .product-card.rcs-card .rcs-wish::after {
    content: '';
    position: absolute;
    display: block;
    inset: -6px;
    pointer-events: none;
  }

  /* ---------- cart: 36px visual, 44px touch (frozen) ---------- */
  .rch-template .rc-home .product-card.rcs-card .rcs-buy {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    position: relative;
    flex: none;
  }
  .rch-template .rc-home .product-card.rcs-card .rcs-buy svg {
    width: 18px;
    height: 18px;
  }
  .rch-template .rc-home .product-card.rcs-card .rcs-buy::after {
    content: '';
    position: absolute;
    display: block;
    inset: -4px;
    pointer-events: none;
  }

  /* ---------- Apple Pay: 92×36px visible (frozen) ---------- */
  .rch-template .rc-home .product-card.rcs-card .rcs-apaybtn {
    --apple-pay-button-width: 92px;
    --apple-pay-button-height: 36px;
  }

  /* ---------- configurable / OOS: 36px (frozen) ---------- */
  .rch-template .rc-home .product-card.rcs-card .rcs-opt,
  .rch-template .rc-home .product-card.rcs-card .rcs-oos {
    height: 36px;
    min-height: 0;
    font-size: 12px;
    padding: 0 10px;
    border-radius: 9px;
    gap: 5px;
  }
  .rch-template .rc-home .product-card.rcs-card .rcs-opt svg,
  .rch-template .rc-home .product-card.rcs-card .rcs-oos svg {
    width: 14px;
    height: 14px;
  }
}