/* Parcelry "Try it on" tool — shared styles.
   Loaded by index.html and wholesale.html. All classes are prefixed .to- so the
   tool can drop into any page without colliding with that page's own styles.
   The design tokens it uses (--cream, --terracotta, --ink…) come from the host
   page's :root, so both pages must define them. */
/* ---- TRY IT ON (logo preview) — all classes prefixed .to- to avoid collisions ---- */
.tryon{background:var(--paper)}
.to-grid{display:grid;grid-template-columns:1fr 330px;gap:28px;align-items:start;max-width:1000px;margin:0 auto}
.to-stage{background:var(--cream);border:1px solid var(--cream-deep);border-radius:18px;padding:22px;overflow:hidden}
.to-toggle{display:inline-flex;background:var(--paper);border:1px solid var(--cream-deep);border-radius:999px;padding:4px;margin-bottom:18px;gap:4px}
.to-toggle button{font-family:'Jost',sans-serif;font-size:.85rem;font-weight:500;border:0;background:transparent;color:var(--ink-soft);padding:7px 16px;border-radius:999px;cursor:pointer;transition:all .18s ease}
.to-toggle button.on{background:var(--ink);color:var(--paper)}
.to-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.to-bar .to-toggle{margin-bottom:0}
.to-dl{font-family:'Jost',sans-serif;font-size:.8rem;font-weight:500;border:1px solid var(--cream-deep);background:var(--paper);color:var(--ink-soft);padding:8px 15px;border-radius:999px;cursor:pointer;transition:all .15s ease}
.to-dl:hover:not(:disabled){border-color:var(--terracotta);color:var(--terracotta)}
.to-dl:disabled{opacity:.4;cursor:not-allowed}
.to-frame{position:relative;border-radius:12px;overflow:hidden;background:linear-gradient(135deg,#efe7d8,#f6f1e8);min-height:230px;display:flex;align-items:center;justify-content:center}
.to-frame canvas{display:block;width:100%;height:auto}
.to-hint{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--ink-soft);padding:24px;pointer-events:none}
.to-hint svg{width:38px;height:38px;stroke:var(--kraft);margin-bottom:12px}
.to-hint strong{font-family:'Fraunces',serif;font-weight:500;font-size:1.1rem;color:var(--ink);display:block;margin-bottom:4px}
.to-hint span{font-size:.85rem}
.to-altlink{display:block;margin:10px auto 0;background:none;border:0;cursor:pointer;font-family:'Jost',sans-serif;font-size:.84rem;color:rgba(246,242,234,.72);text-decoration:underline dotted;text-underline-offset:3px}
.to-altlink:hover{color:#fff}
.to-altlink strong{font-weight:600}
.to-altlink[hidden]{display:none}
.to-note{margin-top:15px;font-size:.78rem;color:var(--ink-soft);display:flex;gap:8px;align-items:flex-start;line-height:1.45}
.to-note svg{width:15px;height:15px;flex-shrink:0;stroke:var(--terracotta);margin-top:2px}
.to-panel{background:var(--cream);border:1px solid var(--cream-deep);border-radius:18px;padding:22px}
.to-panel + .to-panel{margin-top:18px}
.to-panel h3{font-size:1.12rem;margin-bottom:4px}
.to-panel .to-sub{font-size:.82rem;color:var(--ink-soft);margin-bottom:16px}
.to-drop{border:1.5px dashed var(--kraft);border-radius:12px;padding:24px 16px;text-align:center;cursor:pointer;transition:all .18s ease;background:var(--paper)}
.to-drop:hover,.to-drop.over{border-color:var(--terracotta);background:#f9efe6}
.to-drop svg{width:30px;height:30px;stroke:var(--kraft);margin-bottom:8px}
.to-drop p{font-size:.85rem;color:var(--ink);font-weight:500}
.to-drop small{font-size:.76rem;color:var(--ink-soft)}
.to-uploaded{display:none;align-items:center;gap:12px;margin-top:14px;padding:10px 12px;background:var(--paper);border:1px solid var(--cream-deep);border-radius:10px}
.to-uploaded.show{display:flex}
.to-uploaded img{width:40px;height:40px;border-radius:8px;background:#fff;border:1px solid var(--cream-deep);object-fit:contain;padding:3px}
.to-uploaded .to-name{font-size:.8rem;font-weight:500;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.to-uploaded button{border:0;background:transparent;color:var(--ink-soft);cursor:pointer;font-size:.75rem;text-decoration:underline;padding:4px}
.to-lowres{margin-top:10px;padding:9px 12px;background:#fdf3e3;border:1px solid #f0d9b5;border-radius:9px;font-size:.78rem;line-height:1.45;color:#7a5c33}
.to-lowres[hidden]{display:none}
.to-designs{margin-top:18px}
.to-or{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.to-or::before,.to-or::after{content:"";flex:1;height:1px;background:var(--cream-deep)}
.to-or span{font-family:'Fraunces',Georgia,serif;font-style:italic;font-size:1rem;color:var(--ink-soft)}
.to-designs .to-dlabel{display:block;font-size:.88rem;color:var(--ink);margin-bottom:10px;line-height:1.5}
.to-designs .to-dlabel strong{color:var(--terracotta)}
.to-chiprow{display:flex;flex-wrap:wrap;gap:8px}
.to-chip{font-family:'Jost',sans-serif;font-size:.8rem;font-weight:500;border:1.5px solid var(--cream-deep);background:var(--paper);color:var(--ink);padding:6px 14px;border-radius:999px;cursor:pointer;transition:all .15s ease}
.to-chip:hover{border-color:var(--terracotta);color:var(--terracotta)}
.to-chip.on{background:var(--terracotta);border-color:var(--terracotta);color:#fff}
.to-designmode .to-stagectrls,.to-designmode .to-makeyours{opacity:.35;pointer-events:none}
#toDesignCta{text-decoration:none;background:var(--terracotta);border-color:var(--terracotta);color:#fff;display:inline-block}
#toDesignCta:hover{background:var(--terracotta-deep,#a95a3c);color:#fff}
#toDesignCta[hidden]{display:none}
.to-field{margin-top:16px}
.to-field > label{display:block;font-size:.82rem;font-weight:500;margin-bottom:9px}
.to-field label .to-val{color:var(--ink-soft);font-weight:400;float:right}
.to-swatches{display:flex;gap:8px;flex-wrap:wrap}
.to-sw{width:34px;height:34px;border-radius:9px;cursor:pointer;border:2px solid transparent;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);transition:transform .12s ease}
.to-sw:hover{transform:scale(1.08)}
.to-sw.on{border-color:var(--ink)}
.to-range{-webkit-appearance:none;appearance:none;width:100%;height:4px;background:var(--cream-deep);border-radius:999px;outline:none}
.to-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:var(--terracotta);cursor:pointer;border:3px solid var(--cream);box-shadow:0 1px 3px rgba(0,0,0,.2)}
.to-range::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--terracotta);cursor:pointer;border:3px solid var(--cream);box-shadow:0 1px 3px rgba(0,0,0,.2)}
.to-inkrow{display:flex;gap:6px}
.to-inkrow button{flex:1;font-family:'Jost',sans-serif;font-size:.74rem;font-weight:500;padding:9px 4px;border:1px solid var(--cream-deep);background:var(--paper);border-radius:9px;cursor:pointer;color:var(--ink-soft);transition:all .15s ease;white-space:nowrap}
.to-inkrow button.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.to-cta{background:var(--ink);border:0;color:var(--paper)}
.to-cta h3{color:var(--paper)}
.to-cta .to-sub{color:rgba(246,242,234,.6)}
.to-cta .to-field > label{color:var(--paper)}
.to-cta input{width:100%;padding:11px 13px;border-radius:9px;border:1px solid #463f38;background:#36302a;color:var(--paper);font-family:'Jost',sans-serif;font-size:.92rem}
.to-cta input::placeholder{color:#8a8076}
.to-cta input:focus{outline:2px solid var(--terracotta);outline-offset:1px;border-color:transparent}
.to-submit{width:100%;margin-top:18px;padding:13px;border:0;border-radius:10px;background:var(--terracotta);color:#fff;font-family:'Jost',sans-serif;font-size:.95rem;font-weight:600;cursor:pointer;transition:background .15s ease}
.to-submit:hover:not(:disabled){background:var(--terracotta-deep)}
.to-submit:disabled{background:#5a534c;color:#9a9088;cursor:not-allowed}
.to-formnote{font-size:.72rem;color:#8a8076;margin-top:10px;text-align:center}
.to-status{font-size:.82rem;margin-top:13px;padding:11px 13px;border-radius:9px;display:none}
.to-status.show{display:block}
.to-status.ok{background:#2f3b2c;color:#c3d6b6}
.to-status.err{background:#4a2e26;color:#e5b3a2}
.to-controls{display:flex;flex-direction:column;gap:16px}
@media(max-width:880px){
  .to-grid{grid-template-columns:1fr;align-items:start}
  /* keep the tape preview pinned while you scroll the controls */
  .to-stage{position:sticky;top:74px;z-index:20;box-shadow:0 10px 22px rgba(43,38,32,.12)}
}

/* tool: balanced stage + full-width proof form below */
.to-grid{align-items:stretch}
.to-stage{display:flex;flex-direction:column}
.to-stage .to-frame{flex:1 1 auto}
.to-cta-wide{margin-top:18px}
.to-cta-head{margin-bottom:16px}
.to-proofrow{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap}
.to-cta-wide .to-field{flex:1 1 180px;margin-top:0}
.to-cta-wide .to-submit{flex:0 0 auto;width:auto;margin-top:0;padding:13px 26px;white-space:nowrap}
@media(max-width:560px){ .to-proofrow{flex-direction:column;align-items:stretch} .to-cta-wide .to-submit{width:100%} }
.to-stagectrls{display:grid;grid-template-columns:1fr 1fr;gap:6px 22px;margin-top:14px}
.to-stagectrls .to-field{margin-top:0}
@media(max-width:560px){ .to-stagectrls{grid-template-columns:1fr} }
.to-check{display:inline-flex;align-items:center;gap:8px;margin-top:12px;font-size:.78rem;color:var(--ink-soft);cursor:pointer}
.to-check input{width:auto;margin:0}
.to-upload{max-width:1000px;margin:0 auto 20px}
.to-upload .to-drop{display:flex;flex-direction:column;align-items:center}