/* =========================
   EC Simple Product Labels
   – iWorkers palette styling
   ========================= */

/* Palet (pas zo nodig aan) */
:root{
  --ec-ink:        #3a312f; /* body-tekst */
  --ec-ink-strong: #201a19;
  --ec-white:      #fff;

  /* accenten (uit je screenshot/palet) */
  --ec-clay-rose:  #e9c8c8; /* lichte rose */
  --ec-rose:       #e99a9a; /* “Nieuw” */
  --ec-sage:       #7a9287; /* winter denim */
  --ec-moss:       #78867f; /* jogjeans/coating */
  --ec-stone:      #7d8a80; /* 7/8 etc. */
  --ec-choco:      #4d413f; /* sale – donker */
}

/* BASIS */
.ec-spl-badges,
.ec-spl-badges-grid{
  display:flex; flex-wrap:wrap; gap:.425rem .5rem;
  margin: 0 0 .5rem 0;
  font-family: inherit;
  z-index: 5;
}

/* Grid-variant (boven de foto) – wat extra lucht */
.ec-spl-badges-grid{ padding-top:.25rem; }

/* Overlay-variant: positionering in hoek (parent moet position:relative hebben;
   de meeste thema’s zetten dat al op .images; zo niet, zet het daar in je theme) */
.ec-spl-badges.ec-spl-left-top,
.ec-spl-badges.ec-spl-right-top{
  position:absolute; top:.66rem; left:.66rem; right:auto;
}
.ec-spl-badges.ec-spl-right-top{ left:auto; right:.66rem; }
.ec-spl-badges.ec-spl-left-top .ec-spl-badge,
.ec-spl-badges.ec-spl-right-top .ec-spl-badge{
  box-shadow: 0 2px 6px rgb(0 0 0 / .08);
}

/* Badge */
.ec-spl-badge{
  display:inline-flex; align-items:center; justify-content:center;
  padding: .28rem .5rem;
  border-radius: .5rem;
  font-weight: 700;
  font-size: .78rem; line-height: 1;
  letter-spacing:.2px;
  text-decoration:none;
  border: 1px solid transparent;
  outline: none;
  user-select:none;
  -webkit-font-smoothing: antialiased;
}

/* Een subtiele variant (bij grid) */
.ec-spl-badges-grid .ec-spl-badge{
  box-shadow: 0 1px 2px rgb(0 0 0 / .06);
}

/* Toegankelijkheid: focus states wanneer ze klikbaar zouden worden gemaakt */
.ec-spl-badge:focus{ box-shadow: 0 0 0 2px rgb(0 0 0 / .18); }

/* ====== MERK-KLEUREN PER SLUG ======
   De PHP geeft al een inline background; onderstaande forceert
   consistente tinten & correcte tekstkleur per label.
   (Gebruik !important zodat het inline style overschreven wordt.)  */

/* Sale – donker chocolade: witte tekst nodig */
.ec-spl-sale{
  background: var(--ec-choco) !important;
  color: var(--ec-white) !important;
  border-color: #3a2f2d;
}

/* Winter Denim – sage */
.ec-spl-winter-denim{
  background: var(--ec-sage) !important;
  color: var(--ec-white) !important;
  border-color: #6a8177;
}

/* Jogjeans */
.ec-spl-jogjeans{
  background: var(--ec-moss) !important;
  color: var(--ec-white) !important;
  border-color: #6a766f;
}

/* Nieuw – zacht rose: donkere tekst voor contrast */
.ec-spl-nieuw{
  background: var(--ec-rose) !important;
  color: var(--ec-ink-strong) !important;
  border-color: #d18383;
}

/* 7/8 lengte – stone */
.ec-spl-78-lengte{
  background: var(--ec-stone) !important;
  color: var(--ec-white) !important;
  border-color: #6e7970;
}

/* Coating – zelfde familie als moss/stone (visueel samenhangend) */
.ec-spl-coating{
  background: var(--ec-moss) !important;
  color: var(--ec-white) !important;
  border-color: #6a766f;
}

/* Responsief – iets kleiner op heel smal */
@media (max-width: 420px){
  .ec-spl-badge{ font-size:.74rem; padding:.25rem .45rem; }
}

/* ====== VEILIGE FALLBACKS ======
   Als je per ongeluk de layout-strings in PHP omwisselt,
   stijlen we beide containers vergelijkbaar. */
.ec-spl-badges:not(.ec-spl-left-top):not(.ec-spl-right-top){
  position:static;
}