/*
 * Sissy Product Experience — shared product cards
 * Presentation only: WooCommerce data and Woodmart controls remain untouched.
 */

/* Cards use one photographic rhythm wherever Woodmart renders them: archives,
   Home, carousels, shortcodes, related products and cross-sells. */
body.sissy-product-cards .wd-product .wd-product-img-link {
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}

body.sissy-product-cards .wd-product .wd-product-img-link > img,
body.sissy-product-cards .wd-product .wd-product-img-hover > img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}

body.sissy-product-cards .wd-product .wd-product-img-hover {
  height: 100%;
}

/* Labels are deliberately paused. Woodmart's native Sale/New badges and any
   cached label-plugin wrapper stay out of the visual layer; prices, sale state,
   stock and product data remain unchanged. */
body.sissy-product-cards .product-labels,
body.sissy-product-cards .label-wrap {
  display: none !important;
}

/* Express-payment widgets belong to the primary purchase flow, cart and
   checkout. Inside a compact recommendation card they add a second CTA and
   break the shared price/finish row. */
body.sissy-product-cards .wd-product .ppcp-messages,
body.sissy-product-cards .wd-product .ppc-button-wrapper,
body.sissy-product-cards .wd-product .ppcp-button-wrapper {
  display: none !important;
}

/* Reviews do not belong in the compact catalogue scan. Keep the sidebar and
   every non-product-card rating outside this deliberately narrow scope. */
body.sissy-product-cards .wd-product .star-rating,
body.sissy-product-cards .wd-product .woocommerce-product-rating,
body.sissy-product-cards .wd-product .wd-loop-prod-rating {
  display: none !important;
}

/* Category metadata is redundant in a browsable catalogue and its variable
   length breaks the shared card rhythm. Product taxonomy and filters remain
   untouched; only the metadata row inside each card is removed. */
body.sissy-product-cards .wd-product .wd-product-cats {
  display: none !important;
}

/* Every title owns exactly two lines. Short names leave the second line free;
   long names stop after line two with the browser's native ellipsis. */
body.sissy-product-cards .wd-product .wd-entities-title {
  display: -webkit-box !important;
  height: 2.8em;
  min-height: 2.8em;
  max-height: 2.8em;
  overflow: hidden;
  line-height: 1.4;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

/* Reserve the same decision row in every card. A simple product has only its
   price; a variable product uses the same 34px row for price and finish dots.
   The empty space is structural, not a fake option, so CTAs stay aligned. */
body.sissy-product-cards .wd-product .wp-block-wd-container:has(> .wd-loop-prod-price) {
  min-height: 34px;
  align-items: center !important;
}

/* Only cards that already expose Woodmart swatches receive the compact
   price-left / finishes-right row. Native selects keep their existing layout. */
body.sissy-product-cards .wd-product .wp-block-wd-container:has(> .wd-loop-prod-price + .wd-loop-prod-variations .wd-swatches-product) {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 8px;
}

body.sissy-product-cards .wd-product .wd-loop-prod-price:has(+ .wd-loop-prod-variations .wd-swatches-product) {
  width: auto !important;
  min-width: 0;
  flex: 1 1 auto !important;
  margin: 0 !important;
}

body.sissy-product-cards .wd-product .wd-loop-prod-variations:has(.wd-swatches-product) {
  width: auto !important;
  min-width: 38px;
  max-width: none !important;
  flex: 0 0 auto !important;
  margin: 0 0 0 auto !important;
  pointer-events: none;
}

body.sissy-product-cards .wd-product .wd-loop-prod-variations:has(.wd-swatches-product) :is(form.variations_form, .variations, .variations tbody, .variations tr, .variations .value) {
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
}

body.sissy-product-cards .wd-product .wd-swatches-product {
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  gap: 6px !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
}

/* In compact cards the finishes are quiet catalogue metadata, not a second
   variation picker. The real choice remains on the product page. */
body.sissy-product-cards .wd-product .wd-swatches-product .wd-swatch {
  position: relative;
  box-sizing: border-box;
  display: inline-flex !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: default !important;
  pointer-events: none !important;
  transition: none !important;
}

body.sissy-product-cards .wd-product .wd-swatches-product .wd-swatch-bg {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  flex: 0 0 16px !important;
  border: 1px solid rgba(25, 25, 24, 0.1) !important;
  border-radius: 50% !important;
  background-image: none !important;
  box-shadow: none !important;
}

body.sissy-product-cards .wd-product .wd-swatch[data-value="oro"] .wd-swatch-bg {
  background-color: #e5d58d !important;
}

body.sissy-product-cards .wd-product .wd-swatch:is([data-value="argento"], [data-value="oro-bianco"]) .wd-swatch-bg {
  background-color: #c9cccb !important;
}

body.sissy-product-cards .wd-product .wd-swatches-product .wd-swatch-text {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (max-width: 575px) {
  body.sissy-product-cards .wd-product .wp-block-wd-container:has(> .wd-loop-prod-price + .wd-loop-prod-variations .wd-swatches-product) {
    gap: 4px;
  }

  body.sissy-product-cards .wd-product .wd-loop-prod-variations:has(.wd-swatches-product) {
    min-width: 38px;
  }
}