/* ============================================================================
   Marketplace "Click to Buy" button -- SINGLE SOURCE OF TRUTH.

   Referenced via <link> from:
     - journal3/products.twig   (search / category listing cards)
     - account/wishlist.twig     (wishlist "Buy On" column)
     - product/compare.twig      (compare matrix)

   Base design = two rows (logo + price, then a full-width teal "Click to Buy"
   pill). The listing keeps this everywhere (its grid cells are narrow). Wishlist
   and compare have room on desktop, so they switch to a single FULL-WIDTH row
   (logo left | price right, next to an inline pill on the far right -- the
   product-page layout) via a desktop viewport media query, and fall back to the
   two-row stack on phones.

   All sizing lives here (prices use .mkl-cur/.mkl-int/.mkl-dec classes, not inline
   styles) so the whole button scales from one place.

   NOT bundled by journal3 (not a registered asset), so edits take effect directly
   -- no md5 asset-bundle cache trap. Bump the ?v= on the <link> tags to bust cache.

   product/product.twig keeps its own canonical full-page / quickview design
   (.market-link-btn / .qv-market-link) -- not shared here.
   ============================================================================ */

/* Grid, not flex-wrap: a flex line wraps before it shrinks, so the widest logo
   we ship (4.2:1, against 2.5:1 for the narrowest) pushed the price onto a third
   row and left that one card taller than the others beside it. In a grid the
   logo column gives way instead, and the pill spans both columns as the second
   row.

   The logo column is 1fr, not auto, so the two columns fill the button rather
   than shrinking to their contents. Two things follow. The pill spans the
   COLUMNS, so with auto columns it came out as wide as whatever logo and price
   happened to sit above it - every button a different width from the one under
   it, which only became visible once the listing stacked them one per row
   instead of packing two into a narrow cell. And the price now ends at the same
   right edge in every button, so prices read down the card as a column, which
   is the comparison the card exists to make. */
.market-link-card {
  box-sizing: border-box; max-width: 100%;
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: 8px 14px;
  padding: 11px 16px 12px;
  font-family: 'Inter', sans-serif;
  background: #f8f9fa; border: 1px solid #ddd; border-radius: 999px;
  color: #333; text-decoration: none;
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
}
/* Shadow and border only — no transform (it was translateY(-1px), 2026-09-17).
   A transform composites this pill, and a rounded box on its own layer loses
   subpixel text antialiasing, so the price and "Click to Buy" went soft on
   hover. Same reason the card box above it stopped lifting. */
.market-link-card:hover {
  border-color: #bbb;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
}
.market-link-card .mkl-logo { min-width: 0; display: flex; align-items: center; }
.market-link-card .mkl-logo img { height: 24px; width: auto; max-width: min(100px, 100%); object-fit: contain; }

.market-link-card .mkl-price { display: inline-flex; align-items: flex-start; line-height: 1; opacity: 0.9; white-space: nowrap; }
.market-link-card .mkl-cur { font-size: 12px; font-weight: 700; line-height: 1; margin-right: 1px; align-self: flex-start; }
.market-link-card .mkl-int { font-size: 20px; font-weight: 700; line-height: 1; }
.market-link-card .mkl-dec { font-size: 11px; font-weight: 400; line-height: 1.3; align-self: flex-start; }

/* Base (and phone) = two rows: the pill takes a full-width second row. */
.market-link-card .mkl-cta {
  grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 9px; padding: 7px 14px;
  background: #195C5B; border-radius: 999px;
}
.market-link-card .mkl-cta-text {
  font-size: 14px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.03em; color: #fff;
}
.market-link-card .mkl-cta-arrow {
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: #fff; color: #195C5B; flex-shrink: 0;
}
.market-link-card .mkl-cta-arrow svg { display: block; width: 13px; height: 13px; }

/* Scoped through the row container (.td-price / .cmp-market-stack), not the page id
   alone: the recommendation rail renders INSIDE #account-wishlist / #product-compare,
   and a bare id selector outranks anything recommendations.css can say about its own
   cards. Keep a container in the selector so these rules stay on the table.

   Desktop wishlist + compare: single, full-width row. A fixed-width logo column
   makes every price start at the same x, so prices line up in a LEFT-aligned column
   (not shoved against the pill); the pill sits on the far right. Low vertical
   padding keeps rows short. Scoped to those two page containers; the listing stays
   two-row. Phones (<=480px) fall through to the two-row base. */
@media (min-width: 481px) {
  #account-wishlist .td-price .market-link-card,
  #product-compare .cmp-market-stack .market-link-card {
    display: grid; grid-template-columns: 180px auto 1fr; align-items: center;
    gap: 8px 18px; padding: 7px 24px;
    width: 100%; max-width: 560px; margin: 0 auto;
  }
  #account-wishlist .td-price .market-link-card .mkl-logo,
  #product-compare .cmp-market-stack .market-link-card .mkl-logo { justify-self: start; }
  #account-wishlist .td-price .market-link-card .mkl-price,
  #product-compare .cmp-market-stack .market-link-card .mkl-price { justify-self: start; }
  #account-wishlist .td-price .market-link-card .mkl-cta,
  #product-compare .cmp-market-stack .market-link-card .mkl-cta {
    /* grid-column:auto undoes the base two-row span: here the pill is the third
       column of a single row, not a row of its own. */
    grid-column: auto; justify-self: end; width: auto; margin-top: 0;
    padding: 7px 7px 7px 16px; white-space: nowrap;
  }
  #account-wishlist .td-price .market-link-card .mkl-cta-text,
  #product-compare .cmp-market-stack .market-link-card .mkl-cta-text { white-space: nowrap; }
}