/*
 * Compare-checkbox / wishlist-heart layout fix — v3.
 *
 * v3 requires the matching PHP template changes (content-product.php,
 * content-product-carousel.php, product-carousel.php) that wrap the
 * wishlist heart + Compare pill + product image together inside a
 * single ".product-card__media-wrap" / ".dcs-card__media-wrap"
 * container. That wrapper is what makes "bottom-right of the actual
 * photo" possible — the heart is positioned relative to it, and its
 * height is exactly the photo's height (the heart/Compare are
 * absolutely positioned, so they don't add height of their own).
 * Without that markup change this CSS has nothing correct to attach
 * to, so make sure the PHP files were reuploaded too.
 *
 * Layout:
 *   - Compare pill  -> top-right corner of the photo
 *   - Wishlist heart -> bottom-right corner of the photo
 *   - Sale/discount/"Featured" badge -> stays top-left, untouched
 *
 * Covers every card type it appears on:
 *   .product-card__media-wrap -> shop / archive / Featured / Popular / related products
 *   .dcs-card__media-wrap     -> homepage & Hot Deals carousels
 *
 * Enqueue this AFTER your main theme stylesheet (see functions.php
 * snippet in the chat) — an un-enqueued file has zero effect.
 */

 .product-card__media-wrap,
 .dcs-card__media-wrap {
	 position: relative !important;
	 display: block !important;
 }
 
 /* ---- Compare pill: top-right corner of the photo ---- */
 
 .product-card__compare,
 .dcs-card__compare,
 .product-card .product-card__compare,
 .dcs-card .dcs-card__compare,
 article.dcs-card .dcs-card__compare {
	 position: absolute !important;
	 display: inline-flex !important;
	 visibility: visible !important;
	 opacity: 1 !important;
	 pointer-events: auto !important;
	 align-items: center !important;
	 gap: 5px !important;
	 width: auto !important;
	 max-width: max-content !important;
	 height: auto !important;
	 top: 10px !important;
	 left: auto !important;
	 right: 10px !important;
	 bottom: auto !important;
	 inset: auto !important;
	 z-index: 6 !important;
	 background: rgba(255, 255, 255, 0.94) !important;
	 border: 1px solid #dde1e8 !important;
	 border-radius: 5px !important;
	 box-shadow: 0 1px 3px rgba(15, 25, 45, 0.08) !important;
	 padding: 3px 8px !important;
	 margin: 0 !important;
	 font-size: 11px !important;
	 font-weight: 600 !important;
	 color: #5b6377 !important;
	 line-height: 1.3 !important;
	 cursor: pointer !important;
	 overflow: visible !important;
 }
 
 .product-card__compare input[type="checkbox"],
 .dcs-card__compare input[type="checkbox"] {
	 position: static !important;
	 display: inline-block !important;
	 visibility: visible !important;
	 opacity: 1 !important;
	 width: 12px !important;
	 height: 12px !important;
	 margin: 0 !important;
	 accent-color: #c53030 !important;
	 cursor: pointer !important;
	 flex: 0 0 auto !important;
 }
 
 .product-card__compare span,
 .dcs-card__compare span {
	 display: inline !important;
	 visibility: visible !important;
	 opacity: 1 !important;
	 line-height: 1 !important;
	 color: #5b6377 !important;
	 white-space: nowrap !important;
 }
 
 .product-card__compare:hover,
 .dcs-card__compare:hover {
	 border-color: #c53030 !important;
	 color: #c53030 !important;
 }
 
 /* ---- Wishlist heart: bottom-right corner of the photo ---- */
 
 .product-card__media-wrap .dcs-wishlist-btn--card,
 .dcs-card__media-wrap .dcs-wishlist-btn--card {
	 position: absolute !important;
	 top: auto !important;
	 bottom: 10px !important;
	 right: 10px !important;
	 left: auto !important;
	 z-index: 6 !important;
 }
 
 /*
  * The sale/discount/"Featured" badge lives INSIDE the photo link
  * itself (content-product.php) or as a sibling before the wrapper
  * (product-carousel.php) — either way it's untouched by this file and
  * keeps sitting top-left, same as before.
  */