/* Ribbon */
/* Cucina Ribbon (Popular) */
.product-thumb{
  position: relative;
  overflow: hidden; /* keep diagonal clean */
}

.cz-ribbon{
  position: absolute;
  top: 15px;
  left: -35px;              /* pushes ribbon out for diagonal look */
  z-index: 6;
  pointer-events: none;
}

.cz-ribbon > span{
  display: block;
  width: 140px;
  padding: 7px 0;
  background: #0f0f0f;      /* maroon */
  color: #fff;
  text-align: center;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;

  transform: rotate(-45deg);
  transform-origin: center;

  /* flat, but still premium */
  border: 1px solid rgba(255,255,255,.18);
}

/* optional: slight tightening for very small cards */
@media (max-width: 480px){
  .cz-ribbon{ top: 8px; left: -48px; }
  .cz-ribbon > span{ width: 132px; font-size: 10px; padding: 6px 0; }
}


/* ---------------------------------------------------------------
   Het velocart-thema gebruikt eigen productkaarten (.b-card) en een
   eigen fotoblok op de productpagina, niet de standaardopmaak van
   OpenCart waar de module op zoekt. Daarom hier dezelfde banderol
   voor die twee.

   De banderol staat rechtsboven en niet linksboven, want linksboven
   hangt al de groene vlag "In winkelwagen". Stonden ze allebei in
   dezelfde hoek, dan dekte de zwarte de groene af. (19-09-2026)
   --------------------------------------------------------------- */

.b-card__media,
.lc-gallery__main {
    position: relative;
    overflow: hidden;
}

.b-card__media .cz-ribbon,
.lc-gallery__main .cz-ribbon {
    left: auto;
}

.b-card__media .cz-ribbon > span,
.lc-gallery__main .cz-ribbon > span {
    transform: rotate(45deg);
}

.b-card__media .cz-ribbon {
    top: 12px;
    right: -38px;
}

.b-card__media .cz-ribbon > span {
    width: 130px;
    padding: 5px 0;
    font-size: 10px;
    letter-spacing: .1em;
}

/* De hartjes- en vergelijkknopjes staan normaal rechtsboven; op een
   kaart met een banderol zakken ze naar beneden zodat ze er niet
   onder verdwijnen. */
.b-card__media:has(.cz-ribbon) .b-card__overlay-top {
    top: auto;
    bottom: 8px;
}

.lc-gallery__main .cz-ribbon {
    top: 18px;
    right: -32px;
}

.lc-gallery__main .cz-ribbon > span {
    width: 140px;
    padding: 7px 0;
}

@media (max-width: 480px) {
    .b-card__media .cz-ribbon { top: 8px; right: -44px; }
    .b-card__media .cz-ribbon > span { width: 122px; font-size: 9px; padding: 4px 0; }
}