/** Shopify CDN: Minification failed

Line 7:0 Unexpected "<"
Line 153:0 Unexpected "<"

**/
<style>
  /* =========================================
     EXISTING CUSTOM STYLES
  ========================================= */
  .card__sku {
    font-size: 1.1rem;
    color: rgba(var(--color-foreground), 0.75);
    margin-bottom: 8px;
    line-height: 1;
    letter-spacing: 0.05rem;
    text-transform: uppercase; 
  }

  .card__swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 10px;
  }

  .swatch-square {
    display: block;
    width: 18px;
    height: 18px;
    border: 1px solid rgba(0,0,0,0.1);
    background-size: cover;
    background-position: center;
    transition: opacity 0.2s ease;
  }

  .swatch-square:hover {
    opacity: 0.8;
    border-color: rgba(0,0,0,0.6);
  }

  .swatch-more {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background-color: #121212;
    color: #ffffff;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
  }
  
  .quick-add-bulk .card__swatches {
    display: none;
  }

  /* =========================================
     FINAL MINIMALIST CARD STYLING
  ========================================= */

  /* 1. BADGE: Rounded Pill + Custom Red var(--color-red) */
  .card__badge .badge {
    background-color: var(--color-red) !important;
    border-color:var(--color-red) !important;
    color: #ffffff !important;
    border-radius: 99px !important;
    padding: 5px !important;
    font-weight: 500;
    letter-spacing: 0.05rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
  }

  /* 2. TITLE: Underline Animation (Left-to-Right) */
  .card__heading a {
    text-decoration: none !important;
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 1px;
    transition: background-size 0.4s ease;
    padding-bottom: 3px;
  }

  .card-wrapper:hover .card__heading a {
    background-size: 100% 1px;
  }

  /* 3. HOVER STATE: Remove Backgrounds */
  .card-wrapper:hover,
  .card-wrapper:hover .card,
  .card-wrapper:hover .card__inner {
     background: transparent !important;
     background-color: transparent !important;
     box-shadow: none !important;
  }

  /* 4. FIX IMAGE OPACITY (The "Ghost" Effect) */
  /* Force the FIRST image (main) to stay solid 100% of the time */
  .media--hover-effect > img:first-child {
    opacity: 1 !important;
    transition: none !important; /* No transition on the main image */
  }

  /* Only animate the SECONDARY image fading in on top */
  .media--hover-effect > img + img {
    opacity: 0;
    transition: opacity 0.3s ease; /* Only fade the second image */
    z-index: 2;
  }

  /* Show secondary image on hover */
  .card-wrapper:hover .media--hover-effect > img + img {
    opacity: 1;
  }

  /* =========================================
     FULL CARD CLICK LOGIC
  ========================================= */
  
  /* Create the context for absolute positioning */
  .card-wrapper {
    position: relative;
  }

  /* The invisible link overlay */
  .card-link-overlay::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1; /* Sits above the card content */
  }

  /* ELEVATE INTERACTIVE ELEMENTS
     These must be z-index 2 or higher to sit ABOVE the invisible link 
  */
  .card__swatches,
  .quick-add,
  .card__badge,
  .card__information-volume-pricing-note,
  .quantity-popover,
  .rating,
  .swatch-square {
    position: relative;
    z-index: 2;
    pointer-events: auto;
  }

</style>