/* =========================
   COMPONENTS
========================= */

a { color: inherit; text-decoration: none; }
.kk-link { text-decoration: underline; }

/* Topbar */
.kk-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.95);
  border-bottom: var(--kk-border);
}
.kk-topbar-inner {
  max-width: 1000px;
  margin: auto;
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.kk-logo img { height: 34px; }

/* Nav */
.kk-topnav {
  display: flex;
  gap: 18px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: var(--kk-track-wide);
  text-transform: uppercase;
}

/* Chips */
.kk-chip {
  font-size:0.75rem;
  border: 4px solid #000;
  font-weight: 1000;
  cursor: pointer;
}

/* =========================
   SKELETON LOADING
========================= */
@keyframes skeleton-pulse {
  0% { background-color: #f3f3f3; }
  50% { background-color: #e0e0e0; }
  100% { background-color: #f3f3f3; }
}

.skeleton {
  animation: skeleton-pulse 1.8s ease-in-out infinite;
  background-color: #f7f7f7;   /* Much lighter base */
  color: transparent !important;
  user-select: none;
  pointer-events: none;
  border-radius: 4px;
}
/* Ensure text inside skeleton blocks is hidden/invisible */
.skeleton * {
  visibility: hidden;
}

@media (min-width: 768px) {

  .kk-chip {
    font-size: 0.95rem;
    padding: 10px 16px;
    border-width: 4px; /* keep your bold KK look */
  }
}

.kk-chip.is-active, .kk-chip.is-active:hover {
  background: #000;
  color: #fff;
}

.kk-chip:hover {
  background: var(--kk-pink);
  color: #000;
}

/* =========================
   SWATCHES (Product variants)
========================= */

.kk-swatches{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  align-items:center;
  max-width:100%;
}

.kk-swatch{
  display:inline-flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  border:0;
  background:transparent;
  padding:0;
}

.kk-swatch-dot{
  width:34px;
  height:34px;
  border:4px solid #000;
  background:#fff;
  display:inline-block;
}

/* active/selected state (JS should toggle .is-active) */
.kk-swatch.is-active .kk-swatch-dot{
  outline:4px solid #000;
  outline-offset:2px;
}

/* nice label if your JS adds it */
.kk-swatch-label{
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-size:11px;
  opacity:.85;
}

/* keyboard focus */
.kk-swatch:focus-visible .kk-swatch-dot{
  outline:4px solid var(--kk-pink);
  outline-offset:2px;
}

 
 