/* Cards */
.kcyo-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:18px;margin:12px 0 24px}
.kcyo-card{border:1px solid #e6dfc6;border-radius:12px;background:#fff;padding:8px 8px 10px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;transition:box-shadow .2s,border-color .2s}
.kcyo-card.kcyo-card--selected{border-color:#caa42b;box-shadow:0 0 0 3px rgba(202,164,43,.25)}
.kcyo-card_media{width:100%;aspect-ratio:4/5;border-radius:8px;background:#faf8f2;display:flex;align-items:center;justify-content:center;overflow:hidden}
.kcyo-card_media img{max-width:100%;height:auto;display:block}
.kcyo-card_label{font-size:14px}

/* Wizard */
.kcyo-steps{display:flex;gap:10px;margin-bottom:10px}
.kcyo-steps .step{background:#efe7cf;color:#000;border-radius:999px;padding:4px 10px;font-size:12px;opacity:.75}
.kcyo-steps .step.current{background:#caa42b; color:#fff; opacity:1}

.kcyo-wizard-nav{display:flex;gap:10px}
.kcyo-wizard-nav .btn{background:#caa42b;border:none;color:#fff;border-radius:6px;padding:8px 12px;opacity:.9}
.kcyo-wizard-nav .btn[disabled]{opacity:.4;cursor:not-allowed}

/* Options */
.kcyo-opts{display:grid;grid-template-columns:1fr;gap:18px;max-width:720px}
.opt-group .label{font-weight:600;margin-bottom:6px}
.opt-group .choices{display:flex;flex-wrap:wrap;gap:10px}

/* Pills */
.choice-pill{border:1px solid #e6dfc6;border-radius:999px;padding:6px 12px;background:#fff;cursor:pointer}
.choice-pill.selected{border-color:#caa42b;box-shadow:0 0 0 2px rgba(202,164,43,.2)}

/* Color swatches */
.choice-swatch{width:34px;height:34px;border-radius:50%;border:2px solid #e6dfc6;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.choice-swatch.selected{border-color:#000;box-shadow:0 0 0 3px rgba(0,0,0,.15)}
.choice-swatch.white{border-color:#bbb}
.choice-swatch::after{content:'';display:block;width:0;height:0}


/* v6.1.1 — Ensure Next button is visible and styled */
.kcyo-wizard .btn{ background:#d4af37; color:#111; border:0; padding:.6rem 1.1rem; border-radius:8px; cursor:pointer; opacity:1 }
.kcyo-wizard .btn[disabled]{ opacity:.45; cursor:not-allowed }
/* Hide opt-group when JS decides; prevent placeholder children from showing while hidden */
.kcyo-view--variations .opt-group[style*="display: none"]{ display:none !important; }
/* Swatch dot default (if theme overrides) */
.kcyo-view--variations .choice-swatch span{ display:inline-block; width:22px; height:22px; border-radius:50%; border:1px solid rgba(0,0,0,.15); }
.kcyo-selected{ margin:.5rem 0 1rem; color:#333; }


/* Ensure enabled Next looks enabled even if theme adds styles */
.kcyo-view--product .btn.next:not([disabled]),
.kcyo-view--variations .btn.next:not([disabled]){ opacity:1; filter:none; }
.kcyo-card.selected{ outline:3px solid #d4af37; border-radius:12px; position:relative; }
.kcyo-card.selected:after{ content:'✓'; position:absolute; top:8px; right:8px; background:#d4af37; color:#111; width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; }


/* Force-enabled Next button */
.kcyo-view--product .btn.next.is-enabled,
.kcyo-view--variations .btn.next{ opacity:1 !important; pointer-events:auto !important; }


/* Ensure product card labels always visible */
.kcyo-card_label{ display:block !important; background:rgba(255,255,255,0.85); color:#111; font-weight:600; padding:.3rem .4rem; text-align:center; position:relative; }
.kcyo-card:hover .kcyo-card_label{ background:rgba(255,255,255,0.95); }
.kcyo-title-main{ margin:0 0 1rem; font-size:1.8rem; font-weight:700; text-align:left; color:#222; }


/* v6.1.5 Title position + card labels always visible */
.kcyo-title{ margin:0 0 10px; font-size:28px; font-weight:700; }
.kcyo-card_label{ opacity:1 !important; visibility:visible !important; background:#fff; color:#222; padding:6px 10px; border-radius:8px; margin-top:8px; font-weight:600; display:block; text-align:center; }
.kcyo-card:hover .kcyo-card_label{ opacity:1; }


/* joined look */
  border:1px solid #e5e7eb;
  border-radius:12px;
  overflow:hidden; /* clip child borders */
  background:#fff;
}
.kcyo-card{
  border-right:1px solid #e5e7eb;
  border-bottom:1px solid #e5e7eb;
  border-radius:0;
  box-shadow:none;
}
/* remove extra right border for last column items in each row */
@supports(display:grid){
  .kcyo-card:nth-last-child(-n+1){ border-right:0; }
}
/* Selected state still prominent */
.kcyo-card.selected{ outline:3px solid #d4af37; outline-offset:-3px; }


/* v6.1.6a — Wizard steps joined rectangle style */
.kcyo-steps{
  display:flex;
  border:1px solid #e5e7eb;
  border-radius:8px;
  overflow:hidden;
  margin-bottom:20px;
}
.kcyo-steps .step{
  flex:1;
  text-align:center;
  padding:.6rem 1rem;
  background:#f9f9f9;
  border-right:1px solid #e5e7eb;
  font-weight:500;
  color:#555;
}
.kcyo-steps .step:last-child{ border-right:0; }
.kcyo-steps .step.current{
  background:#d4af37;
  color:#111;
  font-weight:600;
}


/* v6.1.6-steps — Joined rectangle wizard step titles */
.kcyo-steps{
  display:inline-flex;
  border:1px solid #e5e7eb;
  border-radius:10px;
  overflow:hidden;
  background:#fff;
  margin:8px 0 14px;
}
.kcyo-steps .step{
  padding:8px 14px;
  font-weight:600;
  color:#555;
  background:#f7f7f7;
  border-right:1px solid #e5e7eb;
  margin:0;
  border-radius:0;
}
.kcyo-steps .step:last-child{ border-right:0; }
.kcyo-steps .step.current{
  background:#d4af37;
  color:#111;
}


/* v6.1.8 — Wizard steps equal size with extra padding */
.kcyo-steps{
  display:flex;
  justify-content:center;
  border:1px solid #e5e7eb;
  border-radius:10px;
  overflow:hidden;
  background:#fff;
  margin:10px 0 18px;
}
.kcyo-steps .step{
  flex:1;
  text-align:center;
  padding:12px 20px;
  font-size:16px;
  font-weight:600;
  color:#444;
  background:#f7f7f7;
  border-right:1px solid #e5e7eb;
}
.kcyo-steps .step:last-child{ border-right:0; }
.kcyo-steps .step.current{
  background:#d4af37;
  color:#111;
}


/* v6.1.8-steps — Equal-width wizard steps */
.kcyo-steps{ display:flex; width:100%; max-width:720px; }
.kcyo-steps .step{ flex:1 1 0; text-align:center; padding:12px 18px; font-size:14px; }


/* v6.1.9 — Disabled Next look */
.kcyo-wizard .btn.is-disabled,
.kcyo-wizard .btn[disabled]{ opacity:.45; pointer-events:none; }


/* v6.1.10 — Button enable/disable states */
.kcyo-wizard .btn.next.is-disabled,
.kcyo-wizard .btn.next[disabled],
.kcyo-wizard .btn.next[aria-disabled="true"]{ opacity:.45; pointer-events:none; }
.kcyo-wizard .btn.next{ transition:opacity .2s ease; }


/* v6.2.1 — Control Next via aria-disabled (no disabled attr) */
.kcyo-btn[aria-disabled="true"]{ opacity:.45; pointer-events:none; }
.kcyo-btn[aria-disabled="false"]{ opacity:1; pointer-events:auto; }


/* v6.2.6 — Variation pills & swatches */
.kcyo-view--variations .choice-pill{ display:inline-block; padding:.4rem .7rem; border:1px solid #ddd; border-radius:999px; margin:.25rem; background:#fff; cursor:pointer; }
.kcyo-view--variations .choice-pill.selected{ border-color:#d4af37; box-shadow:0 0 0 2px rgba(212,175,55,.25); }
.kcyo-view--variations .choice-swatch{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; border:1px solid #ddd; margin:.25rem; background:#fff; cursor:pointer; }
.kcyo-view--variations .choice-swatch span{ display:block; width:22px; height:22px; border-radius:50%; border:1px solid rgba(0,0,0,.1); }
.kcyo-view--variations .choice-swatch.selected{ border-color:#d4af37; box-shadow:0 0 0 2px rgba(212,175,55,.25); }


/* v6.2.7 — Class-based disabled for wizard buttons */
.kcyo-btn.is-disabled{ opacity:.45; pointer-events:none; }


/* MVP0: class-based disabled + variation choices */
.kcyo-btn.is-disabled{ opacity:.45; pointer-events:none; }
.kcyo-view--variations .choice-pill{ display:inline-block; padding:.4rem .7rem; border:1px solid #ddd; border-radius:999px; margin:.25rem; background:#fff; cursor:pointer; }
.kcyo-view--variations .choice-pill.selected{ border-color:#d4af37; box-shadow:0 0 0 2px rgba(212,175,55,.25); }
.kcyo-view--variations .choice-swatch{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; border:1px solid #ddd; margin:.25rem; background:#fff; cursor:pointer; }
.kcyo-view--variations .choice-swatch span{ display:block; width:22px; height:22px; border-radius:50%; border:1px solid rgba(0,0,0,.1); }
.kcyo-view--variations .choice-swatch.selected{ border-color:#d4af37; box-shadow:0 0 0 2px rgba(212,175,55,.25); }


/* === KHOORK MVP0 FIXES (6.3.6) === */
/* Ensure pill text is visible regardless of theme */
.kcyo-view--variations .choice-pill{
  background:#fff !important;
  color:#111 !important;
  border:1px solid #ddd;
  border-radius:999px;
  padding:.40rem .70rem;
  line-height:1.15;
  display:inline-block;
}
.kcyo-view--variations .choice-pill.selected{
  border-color:#d4af37;
  box-shadow:0 0 0 2px rgba(212,175,55,.25);
}
/* Color swatch visibility */
.kcyo-view--variations .choice-swatch{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%; background:#fff;
  border:1px solid #ddd;
}
.kcyo-view--variations .choice-swatch span{
  display:block; width:22px; height:22px; border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);
}
.kcyo-view--variations .choice-swatch.selected{
  border-color:#d4af37;
  box-shadow:0 0 0 2px rgba(212,175,55,.25);
}
/* Group spacing and layout */
.kcyo-view--variations .opt-group{ margin:10px 0 14px; }
.kcyo-view--variations .opt-group h4{ margin:0 0 6px; font-weight:600; }
.kcyo-view--variations [data-role="choices"]{ display:flex; flex-wrap:wrap; gap:8px; }
/* Action buttons block to avoid overlaying the size row */
.kcyo-view--variations .kcyo-actions{ display:flex; gap:10px; margin-top:16px; clear:both; }
.kcyo-view--variations .kcyo-actions .btn{ position:static !important; }
.kcyo-view--variations{ padding-bottom:14px; }
/* Product Next disabling via class */
.kcyo-btn.is-disabled{ opacity:.45; pointer-events:none; }


/* === KHOORK MVP0 FIXES (6.3.7) === */
/* Remove underline for anchor buttons */
.kcyo-wizard .btn{ text-decoration:none !important; -webkit-appearance:none; }
/* Mobile-safe color swatches */
.kcyo-view--variations .choice-swatch{
  position:relative;
  padding:6px;
  overflow:hidden;
  -webkit-appearance:none;
  appearance:none;
}
.kcyo-view--variations .choice-swatch span{
  width:100%; height:100%;
  border-radius:50%;
  display:block;
  pointer-events:none;
}
/* Ensure options never hide under actions */
.kcyo-view--variations [data-role="choices"]{ z-index:1; position:relative; }
.kcyo-view--variations .kcyo-actions{ z-index:0; position:relative; margin-top:18px; }


/* === KHOORK MVP0 FIXES (6.3.8) === */
/* Guarantee Sizes row never collapses beneath actions */
.kcyo-view--variations .opt-group[data-key="size"] [data-role="choices"]{ min-height: 38px; }
/* Normalize pill typography visibility across themes */
.kcyo-view--variations .choice-pill{ color:#111 !important; background:#fff !important; }
/* Swatch inner uses the exact hex */
.kcyo-view--variations .choice-swatch{ background:#fff; border:1px solid #ddd; border-radius:50%; width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center; }
.kcyo-view--variations .choice-swatch > span{ width:22px; height:22px; border-radius:50%; display:block; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); }

/* 6.3.11 ensure sizes visible and spacing */
.kcyo-view--variations .opt-group{margin-bottom:14px;}
.kcyo-view--variations .opt-group [data-role="choices"]{display:flex; flex-wrap:wrap; gap:8px; min-height:38px;}
.kcyo-view--variations .opt-group .choice-pill{padding:6px 12px; border-radius:16px; border:1px solid rgba(0,0,0,.1); background:#f7f7f7;}
.kcyo-view--variations .opt-group .choice-swatch{width:32px; height:32px; border-radius:16px; border:1px solid rgba(0,0,0,.15); display:inline-flex; align-items:center; justify-content:center;}
.kcyo-view--variations .opt-group .choice-swatch>span{display:block; width:18px; height:18px; border-radius:50%;}
.kcyo-nav{margin-top:20px;}