/*
 * Markething Herba — product loop CARD.
 *
 * Restyles Blocksy's WooCommerce cards (shop, category/tag archives, related
 * products, up-sells) to match the Elementor loop design: a single primary
 * category pill + ACF subtitle (injected by the Product_Card module via
 * Blocksy's title:before / title:after card hooks), a round red discount badge,
 * and a centered layout. Scoped to loop cards (li.product) so the single
 * product page (div.product) is untouched.
 */

/* Centered card content */
.woocommerce ul.products li.product,
ul.products li.product,
.related.products li.product,
.up-sells li.product {
  text-align: center !important;
  background: #fff !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  padding: 0 16px 18px !important;
}

/* Media is the positioning context for the badge; full-bleed to the card edges */
li.product > figure {
  position: relative !important;
  margin: 0 -16px 12px !important;
}

/* Product image: 1:1 ratio, full image visible (never cropped) */
li.product .ct-media-container {
  aspect-ratio: 1 / 1 !important;
  background: #fff !important;
}
li.product .ct-media-container img,
li.product img.wp-post-image {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: contain !important;
  background: #fff !important;
}

/* Discount badge -> red circle, top-right of the image */
li.product > figure .ct-woo-badges {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  left: auto !important;
  margin: 0 !important;
  z-index: 2 !important;
}
li.product > figure .ct-woo-badges .onsale {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: 52px !important;
  height: 52px !important;
  min-width: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: #b3261e !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

/* Hide the -% discount badge on catalog LOOP cards only (shop, category/tag
   archives, related, up-sells). The single product page uses different markup
   (div.product) and keeps its badge. Delete this block to show it again. */
li.product > figure .ct-woo-badges .onsale {
  display: none !important;
}

/* ...except on products tagged "akcijski-paketi" (the discount packages), where
   the badge IS wanted on the catalog card. Blocksy prints the tag as a
   product_tag-<slug> class on li.product; this rule has higher specificity than
   the hide rule above, so it re-shows the badge for just those products in every
   loop (shop, category, tag archive, related, up-sells). */
li.product.product_tag-akcijski-paketi > figure .ct-woo-badges .onsale {
  display: flex !important;
}

/* Category pill (above the title) */
li.product .mh-card-category {
  margin: 4px 0 6px !important;
  line-height: 1 !important;
}

/* Subtitle (below the title, above the price) */
li.product .mh-card-subtitle {
  margin: 4px 0 8px !important;
  font-family: "Santral", sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.2px !important;
  color: #6f6670 !important;
}

/* Hide Blocksy's all-categories meta list (replaced by the single pill) */
li.product .entry-meta,
li.product ul.entry-meta,
li.product .meta-categories {
  display: none !important;
}

/* Title */
li.product .woocommerce-loop-product__title {
  font-weight: 700 !important;
  color: #2d202b !important;
}

/* Price */
li.product .price,
li.product .price .woocommerce-Price-amount {
  color: #2d202b !important;
  font-weight: 700 !important;
}

/* Button (kept on catalog cards) */
li.product .ct-woo-card-actions {
  justify-content: center !important;
}
li.product .ct-woo-card-actions .button,
li.product .button.add_to_cart_button {
  border-radius: 7px !important;
  font-size: 14px !important;
}

/* === MH catalog hover (TEST 2026-09-24 — delete this block to revert) === */
.woocommerce ul.products li.product,
ul.products li.product,
.related.products li.product,
.up-sells li.product {
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}
.woocommerce ul.products li.product:hover,
ul.products li.product:hover,
.related.products li.product:hover,
.up-sells li.product:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 10px 24px rgba(45, 32, 43, 0.10) !important;
}
li.product .ct-media-container img,
li.product img.wp-post-image {
  transition: transform 0.35s ease !important;
}
li.product:hover .ct-media-container img,
li.product:hover img.wp-post-image {
  transform: scale(1.03) !important;
}
/* === /MH catalog hover === */

/* ==========================================================================
   Cart cross-sells (the "maybe you need this too" block) on the WooCommerce
   Cart block. Its cross-sells render as Product-Collection cards
   (li.wc-block-product), not Blocksy's li.product catalog card, so these rules
   (a) add breathing room between the cart and that block and (b) restyle those
   block cards to match the catalog. Loaded on the cart by the Product_Card
   module (is_cart()).
   ========================================================================== */
.wp-block-woocommerce-cart hr.wp-block-separator {
  margin: 56px 0 0 !important;
  border: 0 !important;
  border-top: 1px solid #ece8eb !important;
}
.wp-block-woocommerce-cart .wp-block-woocommerce-product-collection {
  margin-top: 40px !important;
}
.wp-block-woocommerce-cart .wp-block-woocommerce-product-collection > h2,
.wp-block-woocommerce-cart .wp-block-woocommerce-product-collection > h3,
.wp-block-woocommerce-cart .wp-block-woocommerce-product-collection > h4 {
  margin: 0 0 24px !important;
}
.wp-block-woocommerce-cart .wc-block-product-template {
  gap: 20px !important;
}
/* Card */
.wp-block-woocommerce-cart li.wc-block-product {
  text-align: center !important;
  background: #fff !important;
  border: 1px solid #f0ecef !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  padding: 0 16px 18px !important;
  transition: transform .25s ease, box-shadow .25s ease !important;
}
.wp-block-woocommerce-cart li.wc-block-product:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 10px 24px rgba(45, 32, 43, .10) !important;
}
/* Image: full-bleed, 1:1, never cropped */
.wp-block-woocommerce-cart li.wc-block-product .wc-block-components-product-image {
  position: relative !important;
  margin: 0 -16px 12px !important;
}
.wp-block-woocommerce-cart li.wc-block-product .wc-block-components-product-image img {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: contain !important;
  background: #fff !important;
}
/* Sale badge -> red pill, top-right (matches the catalog accent) */
.wp-block-woocommerce-cart li.wc-block-product .wc-block-components-product-sale-badge {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  left: auto !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  height: auto !important;
  padding: 7px 12px !important;
  border-radius: 999px !important;
  background: #b3261e !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}
.wp-block-woocommerce-cart li.wc-block-product .wc-block-components-product-sale-badge__text {
  color: #fff !important;
}
/* Title */
.wp-block-woocommerce-cart li.wc-block-product .wp-block-post-title {
  font-size: 18px !important;
}
.wp-block-woocommerce-cart li.wc-block-product .wp-block-post-title a {
  font-weight: 700 !important;
  color: #2d202b !important;
}
/* Price */
.wp-block-woocommerce-cart li.wc-block-product .wc-block-components-product-price {
  color: #2d202b !important;
  font-weight: 700 !important;
  justify-content: center !important;
}
/* Button -> brand plum, rounded (matches catalog) */
.wp-block-woocommerce-cart li.wc-block-product .wc-block-components-product-button .wp-block-button__link {
  border-radius: 7px !important;
  font-size: 14px !important;
  background: #4b3447 !important;
  color: #fff !important;
  padding: 12px 22px !important;
}