/* =========================================================
   CWC Variant Swatches – style.css (COMPLETE)
   Badge: rak text + snedskurna sidor (ingen rotation)
   ========================================================= */

/* Gridlayout: raka rader + skarpa tumnaglar */
.cwc-swatches{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(110px, 1fr));
  gap:12px;
  margin:12px 0 8px 0;
  overflow:visible; /* så badge inte klipps */
}

.cwc-swatch{
  cursor:pointer;
  text-align:center;
  border:1px solid transparent;
  border-radius:8px;
  background:#fff;
  padding:8px;
  transition:border-color .15s ease, box-shadow .15s ease;
  position:relative;
  overflow:visible;
}

.cwc-swatch.selected{
  border-color:#6b6b6b;
  box-shadow:0 0 0 0px rgba(230,57,70,.12);
}

.cwc-swatch-imgwrap{
  width:100%;
  aspect-ratio:4/3;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:visible;
  position:relative;
}

.cwc-swatch img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

.cwc-swatch-label{
  display:block;
  font-size:11px;
  line-height:1.2;
  margin-top:6px;
  max-height:2.4em; /* ~2 rader */
  overflow:hidden;
}

/* Döljer Woo label-cellen; lämnar dropdownen orörd */
.variations .label{ display:none !important; }
.variations tr td.value{
  background-color:transparent !important;
  padding:0 !important;
}

/* =========================================================
   BADGE – kundens önskade form:
   - INGEN rotation
   - snedskuren vänster + höger
   - rak text
   ========================================================= */

.cwc-badge{
  /* placering sköts redan av inline-style i pluginet (top/left) */
  position:absolute !important;
	  top:-4px !important;
  left:-4px !important;
  z-index:50 !important;

  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  background:#e00000 !important;
  color:#fff !important;

  font-size:12px !important;
  line-height:1 !important;
  font-weight:800 !important;
  letter-spacing:.02em !important;
  text-transform:uppercase !important;

  padding:6px 12px !important;
  border-radius:2px !important;

  /* VIKTIGT: ingen transform (kunden vill inte ha roterad badge) */
  transform:none !important;

  /* Snedskurna sidor (formen) */
  -webkit-clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%) !important;
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%) !important;

  box-shadow:0 1px 2px rgba(0,0,0,.12) !important;

  pointer-events:none !important;
  white-space:nowrap !important;
}

/* Om du har gamla “pil/utstick”-regler kvar någonstans – neutralisera */
.cwc-badge::after{
  content:none !important;
}

/* Extra skydd mot klippning i vissa wrappers på produktsidan */
.single-product form.variations_form,
.single-product .variations{
  overflow:visible !important;
}
/* Badge on main image for selected variation (standard Woo + RTWPVG) */
.cwc-main-variation-badge{
  position:absolute !important;
  top:12px !important;
  left:12px !important;
  z-index:20 !important;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  background:#e00000;
  color:#fff;

  font-size:12px;
  line-height:1;
  font-weight:800;
  letter-spacing:.02em;
  text-transform:uppercase;

  padding:6px 12px;
  border-radius:2px;

  transform:none !important;

  -webkit-clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);

  pointer-events:none;
  white-space:nowrap;
}

.cwc-main-variation-badge {
    top: 16px !important;
    left: 16px !important;
}