/* Kolbo Variations Swatches — Base */
.kolbo-hidden{display:none !important;}
.kolbo-attr{margin:12px 0 18px;font-family:inherit;}
.kolbo-attr__label{font-weight:700;margin-bottom:6px;}
.kolbo-attr__hint{min-height:18px;font-size:12px;color:#b91c1c;/* red-700 */margin-bottom:4px;}

.kolbo-attr__row{display:flex;align-items:center;gap:10px;}
.kolbo-attr__options{display:flex;flex-wrap:wrap;gap:8px;}

.kolbo-pill{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid #d1d5db;
  padding:8px 12px 8px 10px;
  border-radius:999px;
  background:#fff;
  cursor:pointer;
  line-height:1;
  transition:transform .08s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
  min-height:36px;
}
.kolbo-pill:hover{transform:translateY(-1px); box-shadow:0 1px 6px rgba(0,0,0,.06);}
.kolbo-pill.is-active{border-color:#2563eb; box-shadow:0 0 0 2px rgba(37,99,235,.2) inset; background:#f8fafc;}
.kolbo-pill.is-disabled{opacity:.38; cursor:not-allowed; text-decoration:line-through;}

.kolbo-swatch{
  width:22px;height:22px;flex:0 0 22px;border-radius:6px;border:1px solid #e5e7eb;background-size:cover;background-position:center center;background-repeat:no-repeat;
}
.kolbo-swatch--color{border-radius:50%;}
.kolbo-pill.is-color .kolbo-swatch--color{border-color:rgba(0,0,0,.08);}
.kolbo-pill.is-image .kolbo-swatch--image{border-color:rgba(0,0,0,.08);}

.kolbo-pill__label{white-space:nowrap;}

.kolbo-clear{
  margin-inline-start:auto;
  background:#f3f4f6;
  border:1px solid #e5e7eb;
  padding:6px 10px;
  border-radius:8px;
}
.kolbo-clear:hover{background:#e5e7eb;}

.kolbo-selected-summary{
  margin:12px 0 10px;
  padding:10px 12px;
  background:#f9fafb;
  border:1px solid #e5e7eb;
  border-radius:10px;
  font-weight:500;
}

.kolbo-var-warning{
  display:block;
  margin:8px 0 10px;
  padding:10px 12px;
  border:1px solid #fecaca; /* red-200 */
  background:#fef2f2;       /* red-50 */
  color:#991b1b;            /* red-800 */
  border-radius:10px;
  font-weight:600;
}

/* Missing highlight */
.kolbo-attr.is-missing .kolbo-attr__label{color:#b91c1c;}
.kolbo-attr.is-missing .kolbo-attr__options{outline:2px dashed #ef4444; outline-offset:4px; border-radius:12px;}
.kolbo-attr.is-missing.is-shaking{animation:kolbo-shake .3s linear 1;}
@keyframes kolbo-shake{
  0%{transform:translateX(0)} 25%{transform:translateX(-3px)} 50%{transform:translateX(3px)} 75%{transform:translateX(-2px)} 100%{transform:translateX(0)}
}

.kolbo-reset-all{
  margin-bottom:10px;
  background:#111827;
  color:#fff;
  border:none;
  padding:10px 14px;
  border-radius:10px;
  cursor:pointer;
}
.kolbo-reset-all:hover{opacity:.92;}

/* Compact on small screens */
@media (max-width:480px){
  .kolbo-pill{padding:6px 10px; min-height:34px;}
  .kolbo-swatch{width:18px; height:18px;}
}