/* =========================================
   LOOP CARD ANCHOR (needed for NEW ribbon)
   ========================================= */

.e-loop-item{
  position: relative;
  overflow: hidden;
}

/* =========================================
   SWATCH MEDIA WRAPPER (Image + status badge)
   Requires your inner container class: swatch-media
   ========================================= */
.swatch-media{
  position: relative;
  overflow: hidden;
  padding: 0;
}

/* make image define the box cleanly (prevents resize jitter) */
.swatch-media img{
  display: block;
  width: 100%;
  height: auto;
}

/* =========================================
   NEW RIBBON (top-left, shown only on category "new")
   ========================================= */
.new-ribbon{ display:none; }
.category-new .new-ribbon{ display:block; }

.category-new .new-ribbon{
  position:absolute;
  top:10px;
  left:-32px;
  z-index:10;
  background:#00AAA7;
  color:#fff;
  font:700 11px/1 Arial, Helvetica, sans-serif;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:6px 40px;
  transform:rotate(-45deg);
  box-shadow:0 1px 4px rgba(0,0,0,.18);
}

/* =========================================
   STATUS BADGE BASE (bottom-right of swatch image)
   One badge element with class: status-badge
   ========================================= */
.swatch-media .status-badge{
  display:none;
  position:absolute;
  bottom:12px;
  right:12px;
  z-index:10;
  padding:5px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.75);
  box-shadow:0 2px 4px rgba(0,0,0,.18);
  font-family:Arial, Helvetica, sans-serif;
  text-transform:uppercase;
  letter-spacing:.09em;
  color:transparent;
  font-size:0;
  align-items: center;

  justify-content:flex-start;
  width:auto;
  min-width:0;
  white-space:nowrap;
}

/* label text injected via ::after */
.swatch-media .status-badge::after{
  color:#fff;
  font-size:9px;
  font-weight:700;
  line-height:1em;
}

/* icon slot */
.swatch-media .status-badge::before{
  content:"";
  width:auto;
  height:auto;
  display:inline-flex;
  justify-content:center;
  margin:0;
  flex:0 0 auto;
}

/* =========================================
   IN STOCK (category "in-stock")
   ========================================= */
.category-in-stock .swatch-media .status-badge{
  display:flex;
  align-items:center;
  gap:2px;                 /* set to 2px if you want a small gap */
  background:#3f2a55;
}
.category-in-stock .swatch-media .status-badge::after{
  content:"IN-STOCK";
}
.category-in-stock .swatch-media .status-badge::before{
  content:"✓";
  background:none;
  color:#fff;
  font-size:10px;
  font-weight:900;
  line-height:1;
}


/* ============
   INACTIVE (category "inactive")
=================== */
.category-inactive .swatch-media .status-badge{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:2px;
  background:#6a6a6a;
  padding:5px 8px 3px 6px;
}

.category-inactive .swatch-media .status-badge::before{
  content:"";
  background:none;
  color:#fff;
  font-size:10px;
  font-weight:900;
  line-height:1;
}

.category-inactive .swatch-media .status-badge::after{
  content:"INACTIVE";
}

/* ============
   DISCONTINUED (category "discontinued")
=================== */
.category-discontinued .swatch-media .status-badge{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:2px;
  background:#8b8d6e;
  padding:5px 8px 3px 6px;
}

.category-discontinued .swatch-media .status-badge::before{
  content:"";
  background:none;
  color:#fff;
  font-size:10px;
  font-weight:900;
  line-height:1;
}

.category-discontinued .swatch-media .status-badge::after{
  content:"DISCONTINUED";
}