/* ============================================================
 * Cart page - cross-sells as rows.
 *
 * Loaded only on the cart page, by fotofile_v2_enqueue_cart_assets().
 *
 * WooCommerce prints cross-sells through the same `ul.products` /
 * `li.product` loop as the shop archive, so the theme's archive card styling
 * applies to them and they arrive as large tiles. This file turns that loop
 * into a single column of compact rows: 64px image, name, price, outline
 * button. Nothing here changes which products WooCommerce chooses, or any
 * quantity, total, coupon or checkout behaviour.
 *
 * The `!important` here is not decoration. `ul.products li.product` carries
 * widths, floats, margins and text alignment from WooCommerce's own
 * stylesheet and from the theme's archive rules, all of which assume a grid;
 * a row layout has to win against both. Each one overrides a known grid
 * declaration and nothing else.
 * ============================================================ */

body.woocommerce-cart .cross-sells {
  margin-top: 26px;
}

body.woocommerce-cart .cross-sells h2 {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.35;
}

body.woocommerce-cart .cross-sells ul.products {
  display: flex !important;
  flex-direction: column;
  gap: 10px;
  margin: 0 !important;
  padding: 0 !important;
}

body.woocommerce-cart .cross-sells ul.products li.product {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center;
  gap: 12px;
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 10px 12px !important;
  float: none !important;
  text-align: left !important;
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 12px;
  box-shadow: none !important;
}

/*
 * The whole card is one link in WooCommerce's markup, so image, title and
 * price have to be placed inside it. A two-column grid keeps the image at a
 * fixed 64px and lets the text column shrink: `minmax(0, 1fr)` is what stops
 * a long product name from pushing the button off the row.
 */
body.woocommerce-cart .cross-sells li.product .woocommerce-LoopProduct-link {
  display: grid !important;
  grid-template-columns: 64px minmax(0, 1fr) !important;
  grid-template-areas:
    "img title"
    "img price" !important;
  align-items: center;
  justify-items: start !important;
  column-gap: 12px;
  row-gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 !important;
  text-decoration: none;
}

/*
 * Only three things are allowed in the row.
 *
 * The link is a named grid with areas for the image, the title and the price.
 * Anything else inside it has no area, so CSS grid auto-places it into a new
 * implicit row and the row stops being a row. WooCommerce's own loop can add a
 * star rating there, the sale flash is already there, and a plugin may add more
 * later. Rather than chase that list, everything that is not one of the three
 * is hidden.
 *
 * Verified against the live shop markup on 2026-10-22: the thumbnail is a
 * direct child of the link, not wrapped. If a plugin ever wraps it, the wrapper
 * would be hidden by this rule and the image would vanish - which is why the
 * harness asserts this rule names the image.
 */
body.woocommerce-cart .cross-sells li.product .woocommerce-LoopProduct-link > *:not(img):not(.woocommerce-loop-product__title):not(.price) {
  display: none !important;
}

body.woocommerce-cart .cross-sells li.product img {
  grid-area: img;
  width: 64px !important;
  height: 64px !important;
  max-width: 64px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 8px;
  background: #fff;
  object-fit: contain;
}

/* Two lines of name, then an ellipsis - the row must stay one height. */
body.woocommerce-cart .cross-sells li.product .woocommerce-loop-product__title {
  grid-area: title;
  align-self: end;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  font-size: 14px !important;
  font-weight: 600;
  line-height: 1.35 !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body.woocommerce-cart .cross-sells li.product .price {
  grid-area: price;
  align-self: start;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 15px !important;
}

body.woocommerce-cart .cross-sells li.product .price del {
  font-size: 12px;
}

/*
 * Outline rather than solid: the cart already has one filled orange CTA
 * (proceed to checkout), and a row of equally loud buttons beside it would
 * compete with it.
 */
body.woocommerce-cart .cross-sells li.product a.button {
  flex: 0 0 auto;
  width: auto !important;
  height: auto !important;
  min-height: 38px;
  margin: 0 !important;
  padding: 8px 14px !important;
  border: 2px solid var(--fotofile-v2-accent, #ee4d2d) !important;
  border-radius: var(--fotofile-v2-radius-sm, 9px) !important;
  background: #fff !important;
  color: var(--fotofile-v2-accent, #ee4d2d) !important;
  font-size: 14px !important;
  font-weight: 700;
  line-height: 1.2 !important;
  white-space: nowrap;
  box-shadow: none !important;
}

body.woocommerce-cart .cross-sells li.product a.button:hover,
body.woocommerce-cart .cross-sells li.product a.button:focus-visible {
  background: #fff4f1 !important;
}

body.woocommerce-cart .cross-sells li.product a.button:focus-visible {
  outline: 2px solid var(--fotofile-v2-ink, #222);
  outline-offset: 2px;
}

/* WooCommerce's "View cart" confirmation link would add a second row. */
body.woocommerce-cart .cross-sells li.product a.added_to_cart {
  display: none;
}

/* Sale flashes and card badges are grid-card furniture; a row has no space. */
body.woocommerce-cart .cross-sells li.product .onsale,
body.woocommerce-cart .cross-sells li.product [class*="badge"] {
  display: none !important;
}

/*
 * Under 480px the button moves to its own line.
 *
 * Measured at 375px with the button still in the row: image 64, button 101 and
 * two gaps leave the product name 98px. Over two clamped lines that is about
 * eighteen characters, and four cross-sells all read "Leofoto BACKUP 11L..." -
 * the row is there to tell them apart and at that width it cannot. Letting the
 * row wrap gives the name the full measure and costs about 44px of height per
 * row, which is the right trade on a phone.
 */
@media (max-width: 480px) {
  body.woocommerce-cart .cross-sells ul.products li.product {
    flex-wrap: wrap !important;
  }

  body.woocommerce-cart .cross-sells li.product .woocommerce-LoopProduct-link {
    flex: 1 1 100%;
  }

  body.woocommerce-cart .cross-sells li.product a.button {
    margin-left: auto !important;
    padding: 8px 14px !important;
  }
}