/**
 * Shared bundle card — the homepage block, the CPT archive, and the wishlist all
 * render the same arcaffe_render_bundle_card() markup, so this one stylesheet
 * drives the card look everywhere. Enqueued by arcaffe_bundle_cards_assets() on
 * every frontend surface where cards can appear. Grid/section chrome stays in the
 * block / archive stylesheets; only the card itself lives here.
 */
.bundle-card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
  border: 1px solid #e0e0e0;
  background: #fff;
  overflow: hidden;
  text-align: right;
  padding: 11px;
  min-height: 490px;
  height: 100%;
}

/* The card is never dimmed — only the "order" CTA is disabled when a component
   is out of stock (the bundle can't be added as-is). */
.bundle-card.arcaffe-unavailable {
  opacity: 1;
}

.bundle-card-image {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

/* !important beats WooCommerce's `.woocommerce ul.products li.product a img
   { height:auto }`, which otherwise wins on the wishlist and un-crops the image. */
.bundle-card-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
}

.bundle-card-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 0 0;
  flex: 1;
}

.bundle-card-title {
  font-size: 18px;
  font-weight: 900;
  line-height: 1.3;
  margin: 0;
}

.bundle-card-title a {
  color: inherit;
  text-decoration: none;
  font-weight: 900;
}

.bundle-card-serves,
.bundle-card-excerpt {
  font-size: 14px;
  line-height: 1;
  color: #060706;
  margin: 0;
}

.bundle-card-pricing {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
    margin-top: auto;
    margin-bottom: 0;
    padding: 0 0 4px;
}

.bundle-card-total {
  font-size: 24px;
  font-weight: 900;
  color: #060706;
}

.bundle-card-per-person {
  font-size: 16px;
  color: #707070;
}

.bundle-card-per-person span {
  font-weight: 400;
}

.bundle-card-per-person .woocommerce-Price-currencySymbol {
  font-weight: 400;
}

/* Two CTAs, full-bleed to the card's side/bottom edges (like the design). */
.bundle-card-buttons {
  display: flex;
  gap: 9px;
  min-height: 42px;
}

.bundle-card-buttons .arcaffe-button {
  flex: 1;
  max-width: 100% !important;
  /* The <a> (customize) defaults to content-box while the <button> (order) is
     border-box, so identical height + 1px borders rendered 2px taller on the
     <a>. Force border-box on both so their heights match exactly. */
  box-sizing: border-box;
  height: 42px;
  min-height: 42px;
  border-radius: 0;
  font-size: 16px;
  padding: 0;
}

/* Primary filled (black) = customize; secondary outline (white) = order. */
.bundle-card-buttons .bundle-customize {
  background-color: #060706 !important;
  color: #ffffff !important;
  border-color: #060706 !important;
}

.bundle-card-buttons .bundle-order.arcaffe-product-disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* While the add-to-cart request is in flight the button is disabled to block a
   double submit. Without this rule it falls through to `.arcaffe-button:disabled`,
   whose `no-drop` cursor renders as a "blocked" icon and reads as a rejected
   click rather than one being processed. Mirrors `.bundle-single-add.is-loading`. */
.bundle-card-buttons .bundle-order.is-loading,
.bundle-card-buttons .bundle-order.is-loading:disabled {
  opacity: 0.7;
  cursor: progress;
}

.bundle-card-error {
  color: #c0392b;
  font-size: 13px;
  margin: 8px 16px 12px;
}

/* Wishlist: the product <li> is only a grid cell + heart anchor; the inner
   .bundle-card is the visual card, so strip the product-item card chrome and let
   the heart (positioned by .product-item .uw-wishlist-button-container) overlay
   the card image. */
.bundle-wishlist-item.product-item {
  border: 0 !important;
  padding: 0 !important;
  position: relative;
}

/* Outspecify the theme's `ul.products.columns-N .product-item { padding: … !important }`
   (any column count) so the inner .bundle-card fills the whole cell and matches
   the product card's height. */
ul.products li.bundle-wishlist-item.product-item {
  padding: 0 !important;
}

/* Equalise card heights in the mixed product/bundle wishlist grid. The list is a
   flexbox that centers its items by default, so a shorter bundle card wouldn't
   match the taller product card beside it. Stretch the row and let the bundle
   card (height:100%) fill its cell. */
.woocommerce-account ul.products {
  align-items: stretch;
}

.bundle-wishlist-item .bundle-card {
  min-height: 100%;
}

.bundle-wishlist-item .bundle-card .bundle-card-image {
  max-height: 239px;
  min-height: 239px;
}

.bundle-wishlist-item .bundle-card .bundle-card-title {
  padding: 0 !important;
}