/* ===========================
   KHOORK CYO – Frontend Styles
   v5.5 (cleaned • no duplicates • unified tiles • Astra width fix)
   =========================== */

/* ---------- App shell ---------- */
.kcyo-app{
  --k-text:#111; --k-muted:#666; --k-bg:#fff; --k-panel:#f7f7f7; --k-border:rgba(0,0,0,.14);
  --k-grey-1:#f7f7f7; --k-grey-2:#efefef; --k-grey-3:#e6e6e6; --k-grey-4:#d9d9d9;
  --left:270px; --right:230px; --gap:5px;

  max-width:1440px;
  margin:0 auto;
  color:var(--k-text);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Inter,"Helvetica Neue",Arial,Manrope,sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  padding:0 12px;
  font-size:14px;
  line-height:1.25;
}

input[type="text"] {
  height: 20px; /* Sets a fixed height of 20 pixels */
}

input[type="number"] {
  height: 20px; /* Sets a fixed height of 20 pixels */
}

/* Expand inside Astra container without changing theme globally */
.ast-container .kcyo-app{
  max-width:100% !important; width:100% !important;
  padding-left:0 !important; padding-right:0 !important;
  margin-left:auto !important; margin-right:auto !important;
}
.kcyo-shell{ max-width:1440px; width:100%; margin:0 auto; }

/* Title */
.kcyo-title{ text-align:center; margin:.25rem auto .8rem; font-weight:600; font-size:clamp(12px,1.8vw,18px); letter-spacing:.4px; }

/* Steps */
.kcyo-steps{ display:flex; flex-wrap:wrap; margin:0 auto 1rem; padding:0; gap:0; list-style:none; }
.kcyo-steps .step{
  display:inline-flex; align-items:center; line-height:1;
  padding:.5rem .95rem; background:var(--k-grey-1); color:var(--k-text);
  border:1px solid var(--k-border); font-weight:700; letter-spacing:.35px;
}
.kcyo-steps .step + .step{ margin-left:-1px; }
.kcyo-steps .step:first-child{ border-radius:10px 0 0 10px; }
.kcyo-steps .step:last-child{ border-radius:0 10px 10px 0; }
.kcyo-steps .step:not(.current):hover{ background:#eee; }

/* ---------- CJ1 grid ---------- */
.kcyo-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:14px; }
.kcyo-card{
  display:flex; flex-direction:column; background:#fff; border:1px solid var(--k-border); border-radius:10px; overflow:hidden;
  cursor:pointer; transition:box-shadow .15s, border-color .15s, transform .05s, background .15s;
}
.kcyo-card:hover{ background:color-mix(in srgb,#fff 70%,var(--k-panel) 30%); box-shadow:0 4px 16px rgba(242, 202, 82, 0.06); }
.kcyo-card .kcyo-card_media{   color:black; aspect-ratio:1 / 1; background:#fafafa; margin-bottom: 5px; }
.kcyo-card.selected{ border-color:#bbb; box-shadow:0 0 0 2px rgba(0,0,0,.07); background-color: rgba(231, 198, 90, 0.06); }
.kcyo-card_label {color:grey; letter-spacing:.3px; font-size: calc(0.8rem * var(--lt-scale)); margin-top: 5px;}

/* ---------- CJ nav buttons ---------- */
.kcyo-nav{ display:flex; justify-content:space-between; gap:.5rem; margin:12px 0; }
.kcyo-app .btn{ padding:.48rem .9rem; border:1px solid #cfcfcf; border-radius:8px; background:#fff; color:#222; cursor:pointer; }
.kcyo-app .btn:hover{ background:#eee; border-color:#c7c7c7; }
.kcyo-app .btn.primary{ background:#e6e6e6; border-color:#d0d0d0; color:#111; } /* greys only */
.kcyo-app .btn.is-disabled, .kcyo-app .btn[disabled]{ opacity:.45; pointer-events:none; }

/* ---------- CJ2 choices ---------- */
.kcyo-opts .opt{ margin:1rem 0; }
.kcyo-opts .opt .label{ font-weight:700; margin:0 0 .45rem; }
.kcyo-opts .choices{ display:inline-flex; flex-wrap:wrap; gap:0; }
.kcyo-opts .choices button{
  margin:0; border:1px solid var(--k-border); background:#fff; color:#222; border-radius:0;
  padding:.42rem .95rem; cursor:pointer; line-height:1;
}
.kcyo-opts .choices button + button{ margin-left:-1px; }
.kcyo-opts .choices button:first-child{ border-radius:8px 0 0 8px; }
.kcyo-opts .choices button:last-child{ border-radius:0 8px 8px 0; }
.kcyo-opts .choices button:hover{ background:#eee; }
.kcyo-opts .choices button.selected{ background:var(--k-grey-3); border-color:var(--k-grey-4); color:#111; }

/* ---------- CJ3 toolbar ---------- */
/* ---------- CJ3 toolbar & view tabs ---------- */
.kcyo-toolbar{
  display:flex;
  align-items:center;
  justify-content:flex-start;   /* left aligned like before */
  margin:.5rem 0 10px;
}

/* container for the Front/Back buttons */
#kcyo-view-tabs{
  display:flex;
  gap:10px;                     /* space between Front & Back */
}

/* default button look (same family as Upload tab) */
#kcyo-view-tabs > button{
  appearance:none;
  border:1px solid #d0d0d0;
  background:#fff;              /* white by default */
  color:#222;
  font-weight:600;
  font-size:13px;
  padding:.4rem .9rem;
  border-radius:8px;
  cursor:pointer;
  line-height:1;
  transition:background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

/* hover: soft gold tint */
#kcyo-view-tabs > button:hover{
  background:#f8f1dc;
  border-color:#d4af37;
}

/* selected (the JS adds .current) */
#kcyo-view-tabs > button.current,
#kcyo-view-tabs > button[aria-selected="true"]{
  background:#d4af37;           /* Khoork gold */
  border-color:#b68f23;
  color:#fff;
  box-shadow:0 0 0 1px rgba(182,143,35,.18) inset, 0 0 6px rgba(212,175,55,.45);
}

/* optional: keyboard focus ring */
#kcyo-view-tabs > button:focus-visible{
  outline:2px solid #d4af37;
  outline-offset:2px;
}

/* ---------- 3-column shell ---------- */
.kcyo-shell{ display:grid; grid-template-columns: var(--left) 1fr var(--right); gap:var(--gap); align-items:start; }
/* Force left panel to match stage height */
#kcyo-left {
  height: 664px;              /* match stage-wrap height */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: auto;             /* scroll inner content if too tall */
}

/* Optional: make the inside tabs stretch nicely */
#kcyo-left .kcyo-arttabs {
  flex: 1;                    /* stretch full height */
  display: flex;
  flex-direction: column;
}
#kcyo-left .kcyo-arttabs [role="tabpanel"] {
  flex: 1;
  overflow-y: auto;           /* independent scroll for artwork grids */
}

/* ---------- LEFT PANEL (compact) ---------- */
.kcyo-arttabs{ background:#f9f9f9; border:1px solid var(--k-border); border-radius:8px; padding:8px; box-sizing:border-box; --lt-scale:.7; }
.kcyo-arttabs-bar{ display:flex; gap:0; overflow:hidden; }
.kcyo-arttabs-bar .btn{
  flex:1 1 0; min-width:0; border-radius:8px 8px 0 0; border:1px solid #cfcfcf; background:#fff; color:#222;
  text-transform:uppercase; font-weight:700; letter-spacing:.3px;
  font-size: calc(0.8rem * var(--lt-scale)); padding: calc(.36rem * var(--lt-scale)) calc(.36rem * var(--lt-scale));
  white-space:normal; line-height:1.15; word-break:break-word;
}
.kcyo-arttabs-bar .btn + .btn{ margin-left:-1px; }
.kcyo-arttabs-bar .btn.active{ background:#e6e6e6; color:#000; }
.kcyo-arttabs-bar .btn:hover{ background:#f0f0f0; border-color:#bbb; }
.kcyo-arttabs [role="tabpanel"]{
  border:1px solid #d0d0d0; border-top:none; border-radius:0 0 8px 8px; background:#fff;
  padding: calc(8px * var(--lt-scale)); max-height: calc(100dvh - 360px); overflow:auto; box-sizing:border-box;
  font-size: calc(0.8rem * var(--lt-scale));
}
.kcyo-library-filters, .kcyo-upload-area, .kcyo-ai-controls{ display:flex; gap: calc(6px * var(--lt-scale)); flex-wrap:wrap; margin-bottom: calc(6px * var(--lt-scale)); }
.kcyo-scale input[type="number"]{ width: calc(60px * var(--lt-scale)); padding:.24rem .3rem; border:1px solid #cfcfcf; border-radius:5px; font-size: calc(.65rem * var(--lt-scale)); }

/* ---------- CENTER: Stage exact 576×664 ---------- */
#kcyo-stage{
  position:relative; z-index:1; display:flex; justify-content:center; align-items:center;
  width:576px; height:664px; margin:0 auto;
}

/* =========================
   Stage (floating golden 3D)
   ========================= */
.stage-wrap {
  position: relative;
  width: 576px;
  height: 664px;
  background: linear-gradient(to bottom, #fdf7e3 0%, #f9e9b8 100%);
  border: 1px solid rgba(184, 134, 11, 0.25);
  border-radius: 12px;
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.18),
    0 4px 10px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  /*padding-right: 8px; rail space */
}

/* =========================
   Panels (grey 3D)
   ========================= */
#kcyo-left,
#kcyo-right,
#kcyo-bottom {
  background: linear-gradient(to bottom, #fcfcfc 0%, #f0f0f0 100%);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 12px;
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.12),
    0 3px 8px rgba(0, 0, 0, 0.06);
  padding: 12px;
}

/* Canvas + overlay fill stage */
.canvas-zoom-target,
#kcyo-canvas,
#kcyo-prints,
#kcyo-safe{
  width:100%;
  height:100%;
  display:block;
}
.canvas-zoom-target{ position:relative; }
#kcyo-canvas{ position:relative; z-index:0; background:none!important; }

/* PRINTS overlay (div) must accept input */
#kcyo-prints{
  position:absolute;
  inset:0;
  z-index:15;
  pointer-events:auto;
  touch-action:none;
}

/* SAFE above prints if you draw labels/ticks here */
#kcyo-safe{
  position:absolute;
  inset:0;
  z-index:20;
  pointer-events:none;
}

/* ---------- Stage rail ---------- */
/* ---------- Stage rail ---------- */
#kcyo-stage-rail {
  position: absolute;
  inset: 0 6px 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  z-index: 30;
}

#kcyo-stage-rail .rail-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

#kcyo-zoom-out,
#kcyo-zoom-in,
#kcyo-zoom-fit,
#kcyo-toggle-grid,
#kcyo-lens,
#kcyo-stage-rail .rail-btn {
  width: 34px;
  height: 34px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid #cfcfcf;
  color: #222;
  border-radius: 8px;
  line-height: 1;
  box-shadow: none;
}

#kcyo-stage-rail .rail-btn:hover,
#kcyo-zoom-out:hover,
#kcyo-zoom-in:hover,
#kcyo-zoom-fit:hover,
#kcyo-toggle-grid:hover,
#kcyo-lens:hover {
  background: #f0f0f0;
  border-color: #bbb;
}

#kcyo-stage-rail .rail-meter {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid #cfcfcf;
  color: #222;
  border-radius: 8px;
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
}

/* ---------- Stage rail Left ---------- */
/* make sure the absolute rails are positioned relative to the stage */

/* LEFT rail: pin to left edge, vertically centered */
#kcyo-stage-rail-left {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  right: auto;
  bottom: auto;
  display: flex;
  z-index: 30;
}


/* stack stays vertical */
#kcyo-stage-rail-left .rail-stack-left {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}

/* make zoom target a positioning context */
#kcyo-zoom-target { position: relative; }

/* preview button styling now that it's inside the stage */
/* Standalone preview button */
/* === KCYO PREVIEW BUTTON (inside stage) === */
/* === KCYO PREVIEW BUTTON (inside stage) — FINAL REPLACEMENT === */
.kcyo-preview-btn {
  position: absolute;
  top: 12px;
  left: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid #cfcfcf;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: none;
  z-index: 60;
  isolation: isolate;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Ensure icon is perfectly centered and not clipped */

/* Ensure icon is perfectly centered and not clipped */
.kcyo-preview-btn .kcyo-preview-icon {
  width: 24px !important;
  height: 24px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transform: translateY(1.2px); /* ↑ increased from 0.5px to 1.2px */
}

/* Guarantee SVG visible and centered */
#kcyo-preview svg.kcyo-preview-icon {
  display: block !important;
  width: 24px !important;
  height: 24px !important;
  margin: auto;
  flex-shrink: 0 !important;
}

/* Stroke appearance — dark by default */
.kcyo-preview-btn .kcyo-preview-icon * {
  stroke: #111 !important;       /* dark gray / nearly black */
  fill: none !important;
  stroke-width: 1.8 !important;  /* slightly bolder for visibility */
  vector-effect: non-scaling-stroke;
}

/* Hover → KHOORK gold + soft glow */
.kcyo-preview-btn:hover {
  border-color: #d4af37;
  box-shadow: 0 0 4px rgba(212, 175, 55, 0.5);
}
.kcyo-preview-btn:hover .kcyo-preview-icon * {
  stroke: #d4af37 !important;
}

/* Active (click) state */
.kcyo-preview-btn:active {
  background: #fdf8e6;
  border-color: #caa632;
}

/* Responsive safety for mobile stage */
@media (max-width: 640px) {
  .kcyo-preview-btn {
    top: 8px;
    width: 32px;
    height: 32px;
  }
  .kcyo-preview-btn .kcyo-preview-icon {
    width: 20px !important;
    height: 20px !important;
    transform: translateY(0.4px);
  }
}

#kcyo-layer-up,
#kcyo-layer-down,
#kcyo-align-bl,
#kcyo-align-bc,
#kcyo-align-ml,
#kcyo-align-mc,
#kcyo-align-mr,
#kcyo-align-tl,
#kcyo-align-tc,
#kcyo-align-tr,
#kcyo-stage-rail-left .rail-btn-left {
  width: 34px;
  height: 34px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid #cfcfcf;
  color: #222;
  border-radius: 8px;
  line-height: 1;
  box-shadow: none;
}

#kcyo-stage-rail-left .rail-btn-left:hover,
#kcyo-layer-up:hover,
#kcyo-layer-down:hover,
#kcyo-align-br:hover,
#kcyo-align-bl:hover,
#kcyo-align-bc:hover,
#kcyo-align-tc:hover,
#kcyo-align-tr:hover,
#kcyo-align-tl:hover,
#kcyo-align-mc:hover,
#kcyo-align-mr:hover {
  background: #f0f0f0;
  border-color: #bbb;
}

#kcyo-stage-rail-left .rail-meter {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid #cfcfcf;
  color: #222;
  border-radius: 8px;
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
}

/* --- SCALE CONTROLS (W/H/Ratio) --- */
#kcyo-scale-w,
#kcyo-scale-h {
  width: 38px;
  height: 34px;
  box-sizing: border-box;
  padding: 0;
  text-align: center;            /* center text */
  font-size: 11px;
  font-weight: 500;
  line-height: 34px;             /* perfect vertical centering */
  border: 1px solid #cfcfcf;
  border-radius: 8px;
  background: #fff;
  color: #111;
  outline: none;
  appearance: textfield;
}

#kcyo-scale-w::-webkit-inner-spin-button,
#kcyo-scale-h::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

#kcyo-scale-w:focus,
#kcyo-scale-h:focus {
  border-color: #b1976b;         /* subtle golden focus border */
  background: #fffbe8;
}

/* Labels (W, H, Ratio) */
#kcyo-stage-rail label,
#kcyo-stage-rail-left label {
  font-size: 10px;
  color: #333;
  text-align: center;
  display: block;
  margin: 2px 0 2px;
  line-height: 1;
}

/* Ratio checkbox */
#kcyo-scale-lock {
  width: 34px;
  height: 34px;
  border: 1px solid #cfcfcf;
  border-radius: 8px;
  background: #fff;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* ✅ Use KHOORK gold when checked */
#kcyo-scale-lock:checked {
  background: #d4af37;           /* KHOORK gold */
  border-color: #b79125;
}
#kcyo-scale-lock:checked::after {
  content: "✔";
  color: #fff;
  font-size: 14px;
  line-height: 1;
}

/* Stack vertically with same rhythm as zoom controls */
#kcyo-stage-rail .scale-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

/* ---------- Right panel ---------- */
#kcyo-right {
  position: relative;
  z-index: 100;
}

.kcyo-block {
  background: #fafafa;
  border: 1px solid #d0d0d0;
  border-radius: 8px;
  padding: 8px;
  margin-bottom: 10px;
}

/* ---------- iOS Tap Fix (merged for both rails) ---------- */
#kcyo-stage-rail,
#kcyo-stage-rail-left {
  pointer-events: none; /* let touches pass through */
}

#kcyo-stage-rail .rail-btn,
#kcyo-stage-rail .rail-meter,
#kcyo-stage-rail-left .rail-btn-left,
#kcyo-scale-w,
#kcyo-scale-h,
#kcyo-scale-lock {
  pointer-events: auto; /* re-enable buttons only */
}

#kcyo-right,
.kcyo-block {
  position: relative;
  width: 100%;
  z-index: 100; /* ensure above floats on mobile */
}

/* Variations header as full-width capsule */
.kcyo-designer .block-title,
.kcyo-designer .block-toggle{
  display:block; margin:0 0 6px; 
  background:#eee; border:1px solid #d0d0d0; border-radius:8px;width: 100%;
  font-weight:800; letter-spacing:.3px; text-transform:uppercase; font-size:.8rem; color:#222; text-align:left;
  white-space:normal; line-height:1.15;
}
.kcyo-designer .block-toggle{ display:flex; align-items:center; justify-content:space-between; gap:6px; }
.kcyo-variations-body{ width:100%; box-sizing:border-box; margin-top:8px; overflow:hidden; transition:max-height .22s ease; }

/* Artwork tools buttons */
.kcyo-align-grid{ display:grid; grid-template-columns:repeat(3,34px); gap:10px; justify-content:flex-start; }
.kcyo-layering{ display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }
.kcyo-align-grid .btn, .kcyo-layering .btn{
  width:34px; height:34px; padding:0; display:inline-flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid #cfcfcf; color:#222; border-radius:8px;
}
.kcyo-align-grid .btn:hover, .kcyo-layering .btn:hover{ background:#f0f0f0; border-color:#bbb; }

/* Scale row */
.kcyo-scale{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-top:10px; }
.kcyo-scale label{ display:inline-flex; align-items:center; gap:6px; }
.kcyo-scale input[type="number"]{ height:34px; padding:0 8px; border:1px solid #cfcfcf; border-radius:6px; }

/* ---------- Bottom dock ---------- */
.kcyo-bottom{ margin-top:10px; display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:start; }
.kcyo-layers{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:5px; }

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .kcyo-shell{ grid-template-columns: var(--left) 1fr; }
  #kcyo-right{ grid-column:1 / -1; }
}
@media (max-width:767px){
  .kcyo-shell{ grid-template-columns:1fr; }
  #kcyo-left,#kcyo-right{ order:2; } #kcyo-stage{ order:1; }
}

/* Designer-only variation chips */
.kcyo-designer .kcyo-variations-body .choices button {
  padding: 0.15rem 0.4rem;
  font-size: 0.7rem;
  border-radius: 10px;
  margin: 1.5px;
  border: 1px solid var(--k-border, #ccc);
  background: #fff;
  transition: all 0.15s ease;
  min-width: 28px;
  min-height: 22px;
  line-height: 1.2;
}
.kcyo-designer .kcyo-variations-body .choices button:hover { background: var(--k-grey-2, #f0f0f0); }
.kcyo-designer .kcyo-variations-body .choices button.selected {
  background: var(--k-accent, #ffd54d);
  border-color: var(--k-accent, #ffd54d);
  color: #111;
  font-weight: 700;
}
.kcyo-designer .kcyo-variations-body .choices button[data-color="white"] { background:#fff; border:1px solid #999; }
.kcyo-designer .kcyo-variations-body .opt .label {
  font-size: 0.7rem; font-weight: 600; color: #444; margin-bottom: 0.15rem;
  text-transform: uppercase; letter-spacing: 0.3px;
}
/* Perfect circular swatches */
.kcyo-designer .kcyo-variations-body .choices button[data-color],
.kcyo-designer .kcyo-variations-body .choices .swatch,
.kcyo-designer .kcyo-variations-body .choices .kcyo-swatch{
  padding:0 !important; min-width:0 !important; min-height:0 !important;
  width:24px; height:24px; aspect-ratio:1/1; border-radius:50% !important; box-sizing:border-box;
  border:1.6px solid rgba(0,0,0,.28); display:inline-flex; align-items:center; justify-content:center; vertical-align:middle;
}
.kcyo-designer .kcyo-variations-body .choices button[data-color].selected {
  border-color: var(--k-accent, #f4b400);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--k-accent, #f4b400) 30%, transparent);
}
.kcyo-designer .kcyo-variations-body .choices button[data-color="white"]{
  background:#fff !important; border-color:#999 !important;
}
.kcyo-designer .kcyo-variations-body .choices button[data-color] > i,
.kcyo-designer .kcyo-variations-body .choices button[data-color]::before{
  width:70%; height:70%; border-radius:50%; display:block;
}

/* --- Size Chart Link Styling --- */
.kcyo-sizechart-link {
  font-size: 11px;
  font-weight: 500;
  color: #d4af37;          /* Khoork Gold */
  margin-left: 6px;
  text-decoration: none;
  transition: color 0.2s ease;
}

.kcyo-sizechart-link:hover {
  color: #b79125;          /* darker gold hover */
  text-decoration: underline;
}

.kcyo-sizechart-link:active {
  opacity: 0.85;
}

/* =========================
   Left-panel artwork cards
   (thumbs with tiny corner icons)
   ========================= */
.kcyo-artcard{
  position:relative;
  border-radius:10px;
  overflow:hidden;
  border:1px solid var(--k-border, #ddd);
  background:#fff;
}
.kcyo-artcard__thumb{ position:relative; aspect-ratio:1 / 1; background:#fff; }
.kcyo-artcard__thumb img{
  width:100%; height:100%; object-fit:cover; display:block; cursor:grab;
}
.kcyo-artcard__thumb img:active{ cursor:grabbing; }

/* Corner icon rails */
.kcyo-artcard__icons{
  position:absolute; top:4px; display:flex; gap:6px; z-index:2;
}
.kcyo-artcard__icons--left{ left:6px; }
.kcyo-artcard__icons--right{ right:6px; }

/* Tiny glyph-only icons */
.kcyo-icn{
  width:16px; height:16px; display:inline-block;
  color:#d4a017; opacity:.92; cursor:pointer;
  transition:transform .12s ease, opacity .12s ease, color .12s ease;
}
.kcyo-icn:hover{ transform:scale(1.08); opacity:1; color:#b88900; }
.kcyo-icn:active{ transform:scale(0.95); }
.kcyo-icn::before{
  content:""; display:block; width:100%; height:100%; background:currentColor;
  -webkit-mask-size: contain; -webkit-mask-repeat:no-repeat; -webkit-mask-position:center;
          mask-size: contain;         mask-repeat:no-repeat;         mask-position:center;
}
.kcyo-icn--trash::before{
  -webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 3h6l1 2h4v2H4V5h4l1-2zm2 7v7h2v-7h-2z"/></svg>');
          mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 3h6l1 2h4v2H4V5h4l1-2zm2 7v7h2v-7h-2z"/></svg>');
}
.kcyo-icn--max::before{
  -webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 9V5h4M15 5h4v4M19 15v4h-4M9 19H5v-4" stroke="black" fill="none" stroke-width="2" stroke-linecap="round"/></svg>');
          mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 9V5h4M15 5h4v4M19 15v4h-4M9 19H5v-4" stroke="black" fill="none" stroke-width="2" stroke-linecap="round"/></svg>');
}
@media (max-width: 420px){ .kcyo-icn{ width:14px; height:14px; } }
.kcyo-artcard:hover{ box-shadow:0 4px 14px rgba(0,0,0,.07); }

/* =========================
   Stage prints (overlay items)
   ========================= */

/* Safety: overlay accepts input */
#kcyo-prints { pointer-events: auto; position: absolute; inset: 0; }

/* Default print: NO border/handles until selected */
.kcyo-print{
  position:absolute;
  box-sizing:border-box;
  touch-action:none;        /* touch drag/resize without scrolling */
}

/* Selected print: very thin GOLDEN dotted outline + grab cursor */
.kcyo-print.is-selected{
  outline: 1px dashed #c99a00;     /* golden dotted */
  outline-offset: -1px;
  box-shadow: 0 0 0 1px rgba(200,150,0,.10);
  cursor: grab;
}
.kcyo-print.is-selected:active{ cursor: grabbing; }

/* Image inside */
.kcyo-print img{
  width:100%; height:100%; object-fit: contain; display:block; user-select:none; pointer-events:none;
}

/* 8 resize handles (shown ONLY when selected) */
.kcyo-h{
  position:absolute; width:12px; height:12px; display:none;
  background:#fff; border:1px solid rgba(0,0,0,.35);
  border-radius:3px; box-shadow:0 1px 2px rgba(0,0,0,.12);
}
.kcyo-print.is-selected .kcyo-h{ display:block; }

/* corners */
.kcyo-ne{ top:-6px;  right:-6px;  cursor:nesw-resize; }
.kcyo-nw{ top:-6px;  left:-6px;   cursor:nwse-resize; }
.kcyo-se{ bottom:-6px; right:-6px; cursor:nwse-resize; }
.kcyo-sw{ bottom:-6px; left:-6px;  cursor:nesw-resize; }

/* sides */
.kcyo-n{ top:-6px;   left:50%; transform:translateX(-50%); cursor:n-resize; }
.kcyo-s{ bottom:-6px;left:50%; transform:translateX(-50%); cursor:s-resize; }
.kcyo-e{ right:-6px; top:50%;   transform:translateY(-50%); cursor:e-resize; }
.kcyo-w{ left:-6px;  top:50%;   transform:translateY(-50%); cursor:w-resize; }

/* ------- Layers (bottom panel) ------- */
.kcyo-layers{ padding:6px; border:1px solid var(--k-border,#ddd); border-radius:8px; background:#fff; }
.kcyo-layer{
  display:grid; grid-template-columns: 28px 1fr auto auto auto; gap:6px;
  align-items:center; padding:4px 6px; border-radius:6px;
  border:1px solid transparent;
}
.kcyo-layer + .kcyo-layer{ margin-top:6px; }
.kcyo-layer.is-selected{ background:#f9f3df; border-color:#ead08a; }
.kcyo-layer__num{ font-weight:700; color:#7a5d00; text-align:center; }
.kcyo-layer__name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#222; }

.kcyo-layer__btn{
  appearance:none; -webkit-appearance:none;
  width:28px; height:24px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid #d7d7d7; background:#fff; border-radius:6px; cursor:pointer;
  color:#222; font-size:14px; line-height:1; font-weight:600;
}
.kcyo-layer__btn:hover{ background:#f2f2f2; }
.kcyo-layer__btn:focus-visible{ outline:2px solid #7aa7ff; outline-offset:1px; }
/* ** end patch23Sep */
/* optional: empty row style */

.kcyo-layer--empty{
  padding:6px 8px;
  color:#666;
  font-style:italic;
  border:1px dashed #ddd;
  border-radius:6px;
  background:#fafafa;
}

/* ** start patch23Sep — layers tweaks */

/* Left panel full height */
/* === Left column: make the thumbnails fill the column height === */
:root { --stage-h: 664px; }            /* keep in one place */

/* column matches stage height */
#kcyo-left{
  display:flex;
  flex-direction:column;
  height:var(--stage-h);
  max-height:var(--stage-h);
  min-height:0;                        /* IMPORTANT for flex overflow math */
  overflow:hidden;
}

/* tabs stack fills the column */
.kcyo-arttabs{
  flex:1;
  display:flex;
  flex-direction:column;
  min-height:0;                        /* allow child to grow */
  overflow:hidden;
}

/* each panel fills; hidden panels really hidden */
.kcyo-arttabs [role="tabpanel"]{
  flex:1;
  display:flex;
  flex-direction:column;
  min-height:0;                        /* allow grid to take remaining space */
  overflow:hidden;
  max-height:none !important;          /* override any older cap */
}
.kcyo-arttabs [role="tabpanel"][hidden]{ display:none !important; }

/* the thumbnail grid becomes the dedicated scroller and fills the rest */
.kcyo-artgrid--scroll{
  flex:1;
  min-height:0;
  overflow:auto;
  max-height:none !important;          /* kill legacy 280px cap */
  padding-right:4px;
}

/* tidy grid */
/* === CYO left-panel thumbnails: perfect squares, images fit (no crop) === */

/* 2 equal columns; the cards will be true squares */
.kcyo-artgrid{
  overflow:auto;
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap: calc(8px * var(--lt-scale, 1));
}

/* Card shell */
.kcyo-artcard{
  border:1px solid var(--k-border, #ddd);
  border-radius:8px;
  background:#fff;
  overflow:hidden;
  height: 80px; 
  width: 80px;
}

/* Square thumb area */
.kcyo-artcard__thumb{
  aspect-ratio:1 / 1;                 /* <- makes every thumb a square */
  display:grid;
  place-items:center;
  padding:6px;                         /* little white margin around the image */
  background:#fff;
}

/* Image fits fully inside the square (no cropping) */
.kcyo-artcard__thumb img{
  width:100%;
  height:100%;
  object-fit:contain;                  /* contain = “fit inside” */
  object-position:center;
  display:block;
}

/* Optional: small hover polish */
.kcyo-artcard:hover{ box-shadow:0 3px 10px rgba(0,0,0,.08); }

/* Very narrow screens: stack to 1 column so squares remain squares */
@media (max-width: 380px){
  .kcyo-artgrid{ grid-template-columns:1fr; }
}

/* Layers: thumb + meta (squares, fit image) */
.kcyo-layer__info{ display:flex; align-items:center; gap:6px; overflow:hidden; }
.kcyo-layer__thumb{ flex:0 0 36px; height:36px; border:1px solid #ccc; border-radius:4px; overflow:hidden; background:#fafafa; }
.kcyo-layer__thumb img{ width:100%; height:100%; object-fit:fill; display:block; }
.kcyo-layer__meta{ font-size:11px; line-height:1.25; color:#333; }
.kcyo-layer__dim{ font-weight:600; color:#444; }
.kcyo-layer__price{ color:#007c3c; font-weight:700; }


/* --- Normalize Khoork side panel inputs --- */
/* ---------- Inputs / selects / labels ---------- */
.kcyo-panel select,
.kcyo-panel input[type="text"],
.kcyo-panel input[type="search"]{
  font-size:13px;
  line-height:1.3;
  padding:4px 6px;
  height:auto;
  border:1px solid #ccc;
  border-radius:4px;
  width:100%;
  box-sizing:border-box;
  background:#fff;
}

/* Dropdown arrow */
.kcyo-panel select{
  appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg fill='%23666' height='12' width='12' viewBox='0 0 24 24'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat:no-repeat;
  background-position:right 6px center;
  background-size:12px;
  padding-right:20px;
}

.kcyo-panel label{
  font-size:12px;
  color:#444;
  margin-bottom:2px;
  display:block;
}

/* ---------- Panel inputs, selects, textareas ---------- */
.kcyo-panel select,
.kcyo-panel input[type="text"],
.kcyo-panel input[type="search"] {
  font-size: 13px;
  line-height: 1.3;
  padding: 4px 6px;
  height: auto;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 100%;
  box-sizing: border-box;
  background: #fff;
}

.kcyo-panel select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg fill='%23666' height='12' width='12' viewBox='0 0 24 24'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 6px center;
  background-size: 12px;
  padding-right: 20px;
}

.kcyo-panel label {
  font-size: 12px;
  color: #444;
  margin-bottom: 2px;
  display: block;
}

.kcyo-panel textarea {
  resize: vertical;
  overflow: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
  min-height: 40px;
  max-height: 80px;
}

/* ---------- Library filters ---------- */
.kcyo-library-filters {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}
.kcyo-library-filters .filter-group { display: flex; flex-direction: column; }
.kcyo-library-filters label {
  font-size: 12px;
  font-weight: 500;
  color: #444;
  margin-bottom: 2px;
}
#kcyo-lib-collection, #kcyo-lib-tags {
  font-size: 13px;
  padding: 5px 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 100%;
  box-sizing: border-box;
  line-height: 1.4;
}
#kcyo-lib-tags { height: 28px; }

/* ---------- Tabs Bar ---------- */
.kcyo-arttabs-bar {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 8px;
}
.kcyo-arttabs-bar .btn {
  flex: 1;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #f8f8f8;
  color: #333;
  padding: 6px 4px;
  transition: all 0.2s ease;
  cursor: pointer;
}
.kcyo-arttabs-bar .btn:hover {
  background: #eee;
  border-color: #bbb;
}

/* ✅ Active Tab (Khoork Gold) */
.kcyo-arttabs-bar .btn[aria-selected="true"],
.kcyo-arttabs-bar .btn.active {
  background: #d4af37;     /* Khoork gold */
  border-color: #c9a134;
  color: #fff;
  box-shadow: 0 0 2px rgba(0,0,0,0.15);
}

/* ---------- Art Grid (tight packing) ---------- */
.kcyo-artgrid {
  --thumb: 96px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--thumb), 1fr));
  gap: calc(8px * var(--lt-scale));
  align-content: start;
  justify-content: stretch;
  grid-auto-flow: row dense;
  overflow: auto;
}
.kcyo-artgrid--scroll {
  max-height: calc(280px * var(--lt-scale));
  overflow: auto;
  padding: 4px 6px;
  border: 1px dashed var(--k-border);
  border-radius: 6px;
  background: #fff;
}

/* ---------- Art Tiles ---------- */
.kcyo-art {
  appearance: none; -webkit-appearance: none;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  position: relative;
  width: 100%;
}
.kcyo-art .kcyo-art__thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 8px;
  background: #f6f7f8;
}
.kcyo-art .kcyo-art__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.kcyo-art__toolbar {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  gap: 6px;
}

/* Loading & error states */
.kcyo-art.is-loading .kcyo-art__thumb,
.kcyo-art.is-error .kcyo-art__thumb {
  display: grid;
  place-items: center;
}
.kcyo-art.is-loading .kcyo-art__toolbar {
  opacity: .35;
  pointer-events: none;
}
.kcyo-art__msg {
  font-size: 12px;
  line-height: 1.2;
  opacity: .75;
  text-align: center;
  padding: 6px;
}
.kcyo-art__spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(0,0,0,.2);
  border-top-color: rgba(0,0,0,.6);
  border-radius: 50%;
  margin-bottom: 6px;
  animation: kcyo-spin .8s linear infinite;
}
@keyframes kcyo-spin { to { transform: rotate(360deg); } }

/* ---------- Responsive Thumb Sizes ---------- */
@media (max-width: 1200px) { .kcyo-artgrid { --thumb: 88px; } }
@media (max-width: 980px)  { .kcyo-artgrid { --thumb: 80px; } }
@media (max-width: 480px)  { .kcyo-artgrid { --thumb: 68px; } }

/* ---------- AI Assist Panel Alignment ---------- */
.kcyo-ai-controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#kcyo-ai-print-style,
#kcyo-ai-prompt {
  font-size: 13px;
  line-height: 1.4;
  width: 100%;
  box-sizing: border-box;
}
#kcyo-ai-prompt {
  padding: 5px 6px;
  margin-top: 2px;
  resize: vertical;
  min-height: 100px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
/* KHOORK CYO – Product search CJ1 */
.kcyo-products-toolbar{
  display:flex;
  justify-content:flex-end;
  margin:6px 0 14px;
}

.kcyo-search-group{
  display:inline-flex;
  align-items:stretch;
  border:1px solid rgba(0,0,0,.18);
  border-radius:6px;
  overflow:hidden;
  background:#fff;
}

.kcyo-search-input{
  width:220px;            /* compact */
  padding:6px 8px;
  border:0;
  outline:none;
  font-size:14px;
}

.kcyo-search-input:focus,
.kcyo-search-group:focus-within{
  /* light-gold focus ring to match site theme */
  box-shadow:0 0 0 2px rgba(212,175,55,.28);
}

.kcyo-search-clear{
  padding:0 10px;
  border:0;
  outline:none;
  font-size:12px;
  font-weight:700;
  letter-spacing:.4px;
  text-transform:uppercase;
  cursor:pointer;
  background:#f7f7f7;     /* neutral button surface */
  color:#111;             /* text color */
  border-left:1px solid rgba(0,0,0,.12);
}

.kcyo-search-clear:hover{ background:#efefef; }
.kcyo-search-clear:active{ background:#e6e6e6; }

@media (max-width:768px){
  .kcyo-search-input{ width:42vw; }
}

/* helper class toggled by JS */
.kcyo-card--hidden{ display:none !important; }


/* KHOORK CYO – Product search CJ1  ENDS*/


/* MOQ note under Qty */
/* Always-visible MOQ label */
/* MOQ UI */
.kcyo-moq-note{
  margin-top:4px;
  font-size:12px;
  color:#666;      /* grey hint */
}
.kcyo-moq-msg{
  margin-top:4px;
  font-size:12px;
  color:#b00020;   /* red error */
}

/* MOQ note under Qty ENDS*/

/* ===========================
   KHOORK CYO – Pricing Panel
   =========================== */
#kcyo-pricing-panel{
  margin-top:16px;
  padding:10px 12px;
  border:1px solid var(--k-border, rgba(0,0,0,.14));
  border-radius:6px;
  background:#fff;
}

#kcyo-pricing-panel .block-title{
  display:block; margin:0 0 6px; padding:.45rem .6rem;
  background:#eee; border:1px solid #d0d0d0; border-radius:8px;
  font-weight:800; letter-spacing:.3px; text-transform:uppercase; font-size:.8rem; color:#222;
  white-space:normal; line-height:1.15;
}

/* Tree rows */
.kcyo-pricing-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  padding:6px 6px;
  font-size:13px;
  border-bottom:1px solid var(--k-grey-2,#efefef);
}
.kcyo-pricing-row:last-child{ border-bottom:0; }

.kcyo-pricing-row .label{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;            /* allow text ellipsis if needed */
}
.kcyo-pricing-row .price{
  margin-left:auto;
  font-weight:500;
  color:#111;
  white-space:nowrap;
}

/* Expand/collapse toggles (works with delegated JS) */
/* Toggle rows */
/* Expand/collapse toggles */
.kcyo-pricing-row.kcyo-toggle{
  position:relative;
  cursor:pointer;
  padding-right:20px;  /* room for chevron */
  user-select:none;
}
.kcyo-pricing-row.kcyo-toggle::after{
  content:"▸";
  position:absolute;
  right:6px;
  top:50%;
  transform:translateY(-50%) rotate(0deg);
  transition:transform .18s ease;
  opacity:.7;
}
.kcyo-pricing-row.kcyo-toggle.expanded::after{
  content:"▾";
  transform:translateY(-50%) rotate(0deg);
}

/* Nested views */
.kcyo-pricing-children{
  display:none;
  margin:6px 0 8px 12px;
  padding-left:8px;
  border-left:2px solid var(--k-grey-2,#efefef);
}
.kcyo-pricing-children.expanded{ display:block; }


/* Layer rows with thumbnails */
.kcyo-pricing-layer{
  display:flex;
  align-items:center;
  gap:10px;
  padding:4px 0;
}
.kcyo-pricing-layer img.thumb{
  width:32px;
  height:32px;
  object-fit:contain;
  border:1px solid var(--k-border, rgba(0,0,0,.14));
  border-radius:4px;
  background:#fafafa;
}
.kcyo-pricing-layer .layer-price{
  margin-left:auto;
  font-size:12px;
  color:#333;
}

/* Subtotal + Total */
.kcyo-pricing-subtotal,
.kcyo-pricing-total{
  padding:8px 4px;
  font-size:12px;
  font-weight:500;
  display:flex;
  justify-content:space-between;
  border-top:1px solid var(--k-grey-3,#e6e6e6);
}
.kcyo-pricing-total{
  font-size:12px;
  font-weight:500;
  color:#000;
}

/* ===== CYO – Print Settings block (rows) ===== */
/* ---- KHOORK CYO: Print section = same visual as Cost Summary ---- */
#kcyo-panel-print.kcyo-block{
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  border-radius:12px;
  padding:.75rem;
  box-shadow:0 1px 0 rgba(0,0,0,.03) inset;
}

#kcyo-panel-print .kcyo-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.5rem;
  padding:.35rem 0;
  border-bottom:1px dashed rgba(0,0,0,.06);
}
#kcyo-panel-print .kcyo-row:last-child{ border-bottom:0; }

/* Section header (optional, to mirror your card headings) */
/* Select + checkbox line up cleanly */
#kcyo-panel-print select#kcyo-print-type{
  width:100%;
  max-width:180px;
  border:1px solid #d0d0d0;
  border-radius:8px;
  background:#fff;
  padding:.4rem .6rem;             /* compact */
  font-size:.92rem;
}

/* Proof row layout */
#kcyo-panel-print .proof{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  gap:.75rem;
}
#kcyo-panel-print .proof > div:first-child{
  display:flex; align-items:center; gap:.5rem;
}
#kcyo-panel-print #kcyo-proof-fee{
  color:#666; font-size:.9rem;
}

/* Quantity row: label + MOQ note left; input right */
#kcyo-panel-print .kcyo-qty{
  align-items:center;
}
#kcyo-panel-print .kcyo-qty .kcyo-label{
  font-weight:600; color:#333;
}
#kcyo-panel-print .kcyo-qty #kcyo-moq-note{
  margin-left:.5rem; color:#888; font-size:.85rem;
}

/* Input height = 75% of current (compact control) */
#kcyo-panel-print input#kcyo-qty{
  width:84px;
  border:1px solid #d0d0d0;
  border-radius:8px;
  background:#fff;
  padding:.35rem .6rem;            /* ↓ height */
  font-size:.95rem;
  line-height:1.1;
  
}

/* Cart button to match card spacing */
#kcyo-panel-print .kcyo-cart-actions{
  display:flex; justify-content:stretch; margin-top:.5rem;
}
#kcyo-panel-print .kcyo-cart-actions .btn.primary{
  width:100%;
  border-radius:8px;
  padding:.6rem .8rem;
  background:#d4af37;              /* gold */
  color:#111;
  border:1px solid #b08d1f;
  font-weight:700;
}
#kcyo-panel-print .kcyo-cart-actions .btn.primary:hover{
  filter:brightness(0.96);
}

/* ===== Cost Summary: collapsible wrapper ===== */
/* Collapsible panel title (chevron at the START) */
#kcyo-pricing-panel .block-title.kcyo-collapsible{
  position: relative;
  padding-left: 26px;          /* room for chevron on left */
}

/* Base chevron styling */
/* Base chevron */
/* ---------- Shared toggle button styling ---------- */
.block-toggle,
.block-title.kcyo-collapsible {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  padding: 10px 12px 10px 36px; /* room for chevron */
  background: #fff;
  border: 1px solid #d0d0d0;
  border-radius: 6px;
  font-weight: 600;
  text-transform: uppercase;
  color: #333;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.block-toggle:hover,
.block-title.kcyo-collapsible:hover {
  background: #faf7f0;
  border-color: #b79125;
}

/* ---------- Unified Gold Chevron ---------- */
/* Common chevron (left side) */
.block-toggle .kcyo-var-chevron::before,
.block-title.kcyo-collapsible .kcyo-chevron::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  width: 8px;
  height: 8px;
  border: solid #b79125;  /* KHOORK gold */
  border-width: 0 2px 2px 0;
  transform: translateY(-50%) rotate(-45deg); /* default: right */
  transition: transform 0.25s ease;
}

/* Expanded (arrow down) */
.block-toggle[aria-expanded="true"] .kcyo-var-chevron::before,
.block-title.kcyo-collapsible[aria-expanded="true"] .kcyo-chevron::before {
  transform: translateY(-50%) rotate(45deg);
}

/* Container under Print Costs */
/* indent each view's breakdown slightly */
.kcyo-view-breakdown{
  margin: 4px 0 8px 12px;
  padding-left: 8px;
  border-left: 2px solid var(--k-grey-2,#efefef);
}

/* one-line row: tiny thumb + amount right-aligned */
.kcyo-layer-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:3px 0;
}

.kcyo-layer-row .left{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-width:0;
}

.kcyo-layer-row img.thumb{
  width:25px;
  height:25px;
  object-fit:contain;
  border:1px solid var(--k-border, rgba(0,0,0,.14));
  border-radius:3px;
  background:#fafafa;
}

.kcyo-layer-row .amt{
  margin-left:auto;
  font-size:12px;
  color:#222;
  white-space:nowrap;
}


.kcyo-layer-row .thumb{width:28px;height:28px;object-fit:cover;border-radius:3px;}
.kcyo-layer-row .dim{font-size:8px;opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.kcyo-layer-row .amt{font-size:12px;font-variant-numeric:tabular-nums;}
.kcyo-cost-up{
  color:#333;border-radius:4px;font-size:10px;line-height:1;padding:2px 6px;cursor:pointer;}
.kcyo-cost-del{border:0;background:none;color:#b00;font-size:10px;line-height:1;padding:2px 4px;cursor:pointer;}


.kcyo-flash {
  position: fixed; bottom: 20px; left: 50%;
  transform: translateX(-50%);
  background: #111; color: #fff;
  padding: 8px 16px; border-radius: 6px;
  font-size: 13px; z-index: 9999;
  opacity: .95;
}
.kcyo-flash.kcyo-info   { background: #2c2c2c; }
.kcyo-flash.kcyo-warn   { background: #b08d1f; color:#111; }
.kcyo-flash.kcyo-error  { background: #d33; }

/* Persistent DPI badge */
#kcyo-quality {
  position: fixed;
  left: 16px;
  bottom: 16px;
  padding: 6px 10px;
  border-radius: 6px;
  background: #111;
  color: #fff;
  font-size: 12px;
  line-height: 1.2;
  z-index: 4000;
  opacity: .95;
  pointer-events: none; /* don't steal clicks */
}

/* color states */
#kcyo-quality.is-neutral {
  background: #444;
  color: #eee;
}

#kcyo-quality.is-best   { background:#1f9d55; color:#fff; }   /* green */
#kcyo-quality.is-better { background:#b08d1f; color:#111; }   /* gold */
#kcyo-quality.is-good   { background:#ff8a00; color:#111; }   /* orange */
#kcyo-quality.is-low    { background:#d33;    color:#fff; }   /* red  */
#kcyo-quality { transition: background .15s ease,color .15s ease; }

/* Overlay for Submission */

/* === KCYO overlay === */
#kcyo-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(6px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease;
}
#kcyo-overlay.show {
  opacity: 1;
  pointer-events: all;
}

.kcyo-overlay-content {
  text-align: center;
  color: #fff;
  font-family: 'Inter', sans-serif;
  animation: fadeInUp .6s ease both;
}

.kcyo-flash-text span {
  display: inline-block;
  font-size: 2.5rem;
  font-weight: 900;
  background: linear-gradient(90deg, #ffcc33, #ff9900, #ffcc33);
  -webkit-text-fill-color: transparent;
  animation: flicker 1.5s infinite alternate;
  letter-spacing: 3px;
}

.kcyo-overlay-msg {
  font-size: 1.1rem;
  margin-top: .75rem;
  font-weight: 500;
  color: #ffeccc;
}

.kcyo-progress-bar {
  width: 220px;
  height: 6px;
  border-radius: 4px;
  background: rgba(255,255,255,0.2);
  overflow: hidden;
  margin: 1.2rem auto 0;
}

.kcyo-progress-inner {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #ffcc33, #ff8800);
  border-radius: 4px;
  transition: width .3s ease;
}

/* Animations */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes flicker {
  0% { opacity: 1; text-shadow: 0 0 8px #ffcc33, 0 0 16px #ff6600; }
  100% { opacity: .7; text-shadow: 0 0 4px #ff9900, 0 0 12px #ffcc33; }
}

/* Overlay Ends */


/* === KCYO MAGIC PENDING (AI) === */
.kcyo-artcard__thumb.kcyo-magic {
  position: relative;
  width: 96px;
  height: 96px;
  border-radius: 10px;
  overflow: hidden;
  background: #0f0f13;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.08);
}
.kcyo-magic__backdrop {
  position: absolute; inset: 0;
  background:
    radial-gradient(120px 80px at 30% 20%, rgba(212,175,55,.2), transparent 60%),
    radial-gradient(120px 80px at 80% 70%, rgba(76,175,80,.18), transparent 60%),
    linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}
.kcyo-magic__orb {
  position: absolute; width: 52px; height: 52px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.9), rgba(212,175,55,.65) 45%, rgba(0,0,0,0) 70%);
  animation: kcyo-orb 1.8s ease-in-out infinite;
  mix-blend-mode: screen;
}
@keyframes kcyo-orb {
  0%,100% { transform: scale(0.85); opacity: .8; }
  50% { transform: scale(1.05); opacity: 1; }
}
.kcyo-magic__wand {
  position: absolute; width: 42px; height: 42px; color: #ffd54d;
  animation: kcyo-wand 1.9s ease-in-out infinite;
  filter: drop-shadow(0 2px 6px rgba(212,175,55,.45));
}
@keyframes kcyo-wand {
  0%   { transform: translate(-30px, 22px) rotate(-25deg); opacity:.85; }
  50%  { transform: translate(10px, -18px) rotate(10deg);  opacity:1;   }
  100% { transform: translate(-30px, 22px) rotate(-25deg); opacity:.85; }
}
.kcyo-magic__sparkles span {
  position: absolute; width: 6px; height: 6px; border-radius: 50%;
  background: radial-gradient(circle, #fff, rgba(255,255,255,0));
  box-shadow: 0 0 8px rgba(255,255,255,.8);
  animation: kcyo-twinkle 1.4s linear infinite;
}
@keyframes kcyo-twinkle {
  0%,100% { transform: scale(.7); opacity: .4; }
  50% { transform: scale(1.2); opacity: 1; }
}
.kcyo-magic__label {
  position: absolute; bottom: 6px; left: 50%;
  transform: translateX(-50%);
  font-size: 11px; color: rgba(255,255,255,.85);
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
}
.kcyo-upspin__ring {
  width: 28px; height: 28px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.15);
  border-top-color: rgba(255,255,255,.9);
  animation: kcyo-spin .9s linear infinite;
}
@keyframes kcyo-spin { to { transform: rotate(360deg); } }