/* ==========================================================================
   Kindred Personalizer — front-end studio
   Tokens are inherited from the theme; fallbacks keep it safe standalone.
   ========================================================================== */
.kin-studio{
  --kin-paper:var(--paper,#F6EFE3);
  --kin-card:var(--tile,#FBF7EF);
  --kin-ink:var(--ink,#241C17);
  --kin-ink2:var(--ink-2,#5C4B3E);
  --kin-ink3:var(--ink-3,#8A7767);
  --kin-madder:var(--madder,#7C201A);
  --kin-indigo:var(--indigo,#17233F);
  --kin-saffron:var(--saffron,#C98A2E);
  --kin-rule:var(--rule,#E4D8C5);
  --kin-display:var(--display,"Fraunces",Georgia,serif);
  --kin-ui:var(--ui,"Karla",-apple-system,"Segoe UI",sans-serif);

  font-family:var(--kin-ui);
  color:var(--kin-ink);
  border:1px solid var(--kin-rule);
  background:var(--kin-card);
}

/* ---------- head ---------- */
.kin-head{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 18px;border-bottom:1px solid var(--kin-rule);
}
.kin-head .kin-label{
  font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--kin-madder);margin:0;
}
.kin-live{
  display:inline-flex;align-items:center;gap:7px;
  font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--kin-ink3);
}
.kin-live i{
  width:6px;height:6px;border-radius:50%;background:var(--kin-madder);
  animation:kin-pulse 2.4s ease-in-out infinite;
}
@keyframes kin-pulse{0%,100%{opacity:.35}50%{opacity:1}}

/* ---------- canvas ---------- */
.kin-canvas{
  padding:30px 30px 26px;background:
    repeating-linear-gradient(45deg,rgba(0,0,0,.012) 0 8px,transparent 8px 16px),
    var(--kin-paper);
  display:flex;justify-content:center;
}
.kin-print{
  width:100%;max-width:330px;
  box-shadow:0 16px 38px rgba(36,28,23,.16),0 1px 0 rgba(255,255,255,.7) inset;
  background:#FDFBF6;
}
.kin-print svg{display:block;width:100%;height:auto}

/* ---------- controls ---------- */
.kin-controls{
  display:grid;grid-template-columns:1fr 1fr;gap:16px 18px;
  padding:22px 22px 6px;
}
.kin-f{display:flex;flex-direction:column;min-width:0}
.kin-f.kin-full{grid-column:1/-1}
.kin-f label{
  font-size:10.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--kin-ink3);margin-bottom:7px;
}
.kin-f label .kin-count{float:right;letter-spacing:.06em;color:var(--kin-rule)}
.kin-f input[type=text],
.kin-f input[type=date],
.kin-f select{
  width:100%;box-sizing:border-box;
  font-family:var(--kin-ui);font-size:14.5px;color:var(--kin-ink);
  background:#fff;border:1px solid var(--kin-rule);border-radius:0;
  padding:11px 12px;line-height:1.3;
  transition:border-color .15s;
}
.kin-f input:focus,.kin-f select:focus{
  outline:none;border-color:var(--kin-madder);
  box-shadow:0 0 0 3px rgba(124,32,26,.09);
}
.kin-f .kin-hint{font-size:11.5px;color:var(--kin-ink3);margin:6px 0 0}
.kin-f.kin-error input,.kin-f.kin-error select{border-color:#B0342C}
.kin-f .kin-err{font-size:11.5px;color:#B0342C;margin:6px 0 0;display:none}
.kin-f.kin-error .kin-err{display:block}

/* ---------- photo field ---------- */
.kin-drop{
  border:1px dashed var(--kin-rule);background:#fff;
  padding:20px 18px;text-align:center;cursor:pointer;
  transition:border-color .15s,background .15s;
}
.kin-drop:hover,.kin-drop.kin-over{border-color:var(--kin-madder);background:#FFFDF8}
.kin-drop input[type=file]{display:none}
.kin-drop .kin-drop-t{font-family:var(--kin-display);font-size:16px;margin:0 0 4px}
.kin-drop .kin-drop-s{font-size:12px;color:var(--kin-ink3);margin:0}
.kin-thumb{display:flex;align-items:center;gap:12px;margin-top:12px}
.kin-thumb img{width:52px;height:52px;object-fit:cover;border:1px solid var(--kin-rule)}
.kin-thumb .kin-meta{font-size:12px;color:var(--kin-ink3);line-height:1.45}
.kin-thumb .kin-meta b{display:block;color:var(--kin-ink);font-weight:600;font-size:12.5px}
.kin-thumb button{
  margin-left:auto;background:none;border:0;cursor:pointer;
  font:600 11px/1 var(--kin-ui);letter-spacing:.1em;text-transform:uppercase;
  color:var(--kin-madder);padding:6px;
}
.kin-quality{margin-top:10px;font-size:11.5px;padding:9px 11px;border-left:2px solid}
.kin-quality.kin-ok{background:#F3F6F1;border-color:#5C7A52;color:#3E5537}
.kin-quality.kin-warn{background:#FBF4E7;border-color:var(--kin-saffron);color:#7A5713}
.kin-bar{height:3px;background:var(--kin-rule);margin-top:10px;overflow:hidden}
.kin-bar span{display:block;height:100%;width:0;background:var(--kin-madder);transition:width .25s}

/* ---------- foot ---------- */
.kin-foot{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:16px 22px;margin-top:16px;border-top:1px solid var(--kin-rule);
  font-size:12.5px;color:var(--kin-ink3);
}
.kin-foot .kin-proof{display:flex;align-items:center;gap:8px;max-width:62%}
.kin-foot .kin-proof svg{flex:none;color:var(--kin-madder)}
.kin-foot .kin-price{font-family:var(--kin-display);font-size:17px;color:var(--kin-ink)}

/* fields injected into the Woo form — never visible, JS keeps them in sync */
.kindred-cart-fields{display:none}

@media (max-width:640px){
  .kin-controls{grid-template-columns:1fr}
  .kin-canvas{padding:22px 18px}
  .kin-foot .kin-proof{max-width:100%}
}
@media (prefers-reduced-motion:reduce){
  .kin-live i{animation:none}
  .kin-bar span{transition:none}
}