@import url('./prototype.css');
#jk-app { width:100%; max-width:none; text-align:left; }
#jk-app button, #jk-app input, #jk-app select { font:inherit; }
/* Theme form styles must not reintroduce rounded corners. */
#jk-app button, #jk-app input, #jk-app select, #jk-app textarea, #jk-app img { border-radius:0; }
#jk-app button { text-transform:none; letter-spacing:normal; }
#jk-app header.site { position:static; }
#jk-app .nav-links button { background:transparent; color:var(--ink-soft); border:0; cursor:pointer; padding:6px 0; }
#jk-app .nav-links button:hover { color:var(--ink); border-bottom:2px solid var(--line); }
#jk-app .jk-message { margin:16px 0; border-left:4px solid var(--orange); background:var(--orange-tint); padding:14px 18px; color:var(--orange-ink); }
#jk-app .jk-message:empty { display:none; }
#jk-app .jk-honeypot { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
#jk-app .choice input { width:20px; height:20px; flex:0 0 20px; margin:0; accent-color:var(--orange); }
#jk-app .choice { cursor:pointer; }
#jk-app label.choice, #jk-app .field label.choice { display:flex; align-items:center; gap:12px; margin-bottom:0; }
#jk-app .choice input[type="checkbox"] { order:-1; }
#jk-app .choice > span { min-width:0; }
#jk-app .field select { height:auto; }
#jk-app .qty-row input { width:90px; padding:10px; border:1px solid var(--line); border-radius:0; }
#jk-app .link-box input { min-width:0; width:100%; border:0; background:transparent; color:var(--blue-ink); }
#jk-app .seller-table-wrap { overflow:auto; }
#jk-app .summary-line .v { text-align:right; overflow-wrap:anywhere; }
#jk-app .summary-line { gap:18px; }
#jk-app .jk-muted { color:var(--ink-mute); font-size:13px; }
#jk-app .jk-coupon { margin-top:24px; padding-top:20px; border-top:1px solid var(--line); }
#jk-app .jk-coupon .field { margin-bottom:6px; }
#jk-app .jk-coupon .jk-muted { margin:0; }
#jk-app .jk-coupon > label { display:block; margin-bottom:7px; font-weight:700; }
#jk-app .jk-coupon__row { display:flex; align-items:stretch; gap:10px; }
#jk-app .jk-coupon__row input { flex:1 1 220px; min-width:0; }
#jk-app .jk-coupon__row .btn { flex:none; }
#jk-app .jk-coupon__applied { margin:9px 0 0; color:#1D6B43; font-size:13px; }
#jk-app .jk-free-shipping { display:flex; align-items:center; gap:10px; margin:16px 0 0; padding:12px 16px; background:var(--blue-tint); color:var(--blue-ink); font-size:14px; font-weight:600; }
#jk-app .jk-free-shipping svg { flex:none; }
#jk-app .jk-free-shipping.is-reached { background:#E8F5EE; color:#1D6B43; }
#jk-app .flow-actions { flex-wrap:wrap; gap:12px; }
#jk-app .progress { height:auto; overflow:visible; background:transparent; border:0; box-shadow:none; line-height:1.55; }
#jk-app .progress .pip { min-width:0; padding-left:8px; padding-right:8px; font-size:12px; white-space:nowrap; }
#jk-app .jk-materials { display:flex; gap:12px; flex-wrap:wrap; margin:20px 0; }
#jk-app h1, #jk-app h2, #jk-app h3 { color:var(--ink); }
#jk-app a.btn { text-decoration:none; }
#jk-app .product-grid { margin-top:28px; }
#jk-app .jk-slug-field { display:flex; align-items:stretch; border:1.5px solid var(--line); border-radius:var(--radius-sm); background:var(--paper); overflow:hidden; }
#jk-app .jk-slug-field:focus-within { border-color:var(--blue); }
#jk-app .jk-slug-field span { display:flex; align-items:center; max-width:55%; padding:0 4px 0 13px; background:var(--paper-2); color:var(--ink-mute); font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#jk-app .field .jk-slug-field input[type=text] { flex:1; min-width:0; border:0; border-radius:0; padding-left:4px; }
#jk-app details { margin:20px 0; }
#jk-app summary { cursor:pointer; font-weight:600; padding:12px 0; }
#jk-app details form { margin-top:16px; }
#jk-app .footer-links button { padding:0; border:0; background:transparent; color:var(--ink-mute); cursor:pointer; font:inherit; }
#jk-app .footer-links button:hover { color:var(--ink); }
#jk-app label.choice.jk-product-choice { display:grid; grid-template-columns:auto 1fr auto; align-items:center; }
#jk-app .jk-product-choice input[type="checkbox"] { order:initial; margin-left:auto; }
@media(max-width:600px) { #jk-app .hero {padding:38px 0;} #jk-app .hero-art {height:300px;} #jk-app .flow-shell {padding-top:24px;} }
/* Mobile stepper: numbers only, the current step keeps its name; hidden names stay readable to screen readers. */
@media(max-width:600px) {
  #jk-app .progress { flex-wrap:nowrap; gap:6px; }
  #jk-app .progress .pip { flex:0 0 40px; padding:10px 0; }
  #jk-app .progress .pip .pip-l { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  #jk-app .progress .pip.active { flex:1 1 auto; padding:10px 12px; overflow:hidden; text-overflow:ellipsis; }
  #jk-app .progress .pip.active .pip-l { position:static; width:auto; height:auto; overflow:visible; clip:auto; }
}

/* ---------- label library + editor (#labels) ---------- */
#jk-app .jk-lx { --lx-paper-3:#F1EDE6; --lx-shadow:0 1px 2px rgba(24,22,20,.04),0 18px 40px -24px rgba(24,22,20,.28); }
#jk-app .jk-lx__shell { padding:36px 28px 72px; }
#jk-app .jk-lx__shell--wide { max-width:1360px; }
#jk-app .jk-lx__back { display:inline-flex; align-items:center; gap:8px; margin:0 0 18px; padding:6px 0; border:0; background:none; color:var(--ink-soft); font-size:14px; font-weight:600; cursor:pointer; }
#jk-app .jk-lx__back:hover { color:var(--ink); }
#jk-app .jk-lx__head { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:24px; }
#jk-app .jk-lx__intro { min-width:0; max-width:640px; }
#jk-app .jk-lx__eyebrow { margin:0 0 6px; font-size:12.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--orange); }
#jk-app .jk-lx__head h1 { font-size:clamp(26px,3vw,34px); line-height:1.15; }
#jk-app .jk-lx__head h1:focus { outline:none; }
#jk-app .jk-lx__lead { margin:8px 0 0; font-size:15.5px; color:var(--ink-soft); }
#jk-app .jk-lx__owner { margin:8px 0 0; font-size:14px; color:var(--ink-soft); }
#jk-app .jk-lx__owner-email, #jk-app .jk-lx__owner-switch { color:var(--orange); }
#jk-app .jk-lx__owner-email { font-weight:600; }
#jk-app .jk-lx__owner-separator { margin:0 7px; color:var(--ink-mute); }
#jk-app .jk-lx__owner-switch { border:0; background:none; padding:0; font-weight:600; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
#jk-app .jk-lx__owner-switch:hover { color:var(--orange-ink); }
#jk-app .jk-lx__aside { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
#jk-app .jk-lx-count { display:inline-flex; align-items:baseline; gap:0; padding:8px 14px; border-radius:var(--radius-pill); background:var(--lx-paper-3); color:var(--ink-soft); font-size:13.5px; white-space:nowrap; }
#jk-app .jk-lx-count strong { color:var(--ink); font-size:15px; }
#jk-app .jk-lx .btn svg { flex:none; }
#jk-app .jk-lx .jk-lx__restore { border-color:var(--orange); background:transparent; color:var(--orange); }
#jk-app .jk-lx .jk-lx__restore:hover { background:var(--orange-tint); }
#jk-app .jk-lx .jk-message { margin:0 0 20px; border-radius:var(--radius-sm); }

#jk-app .jk-lx-steps { display:flex; gap:10px; margin:0; padding:0; list-style:none; counter-reset:jk-step; }
#jk-app .jk-lx-steps li { counter-increment:jk-step; display:flex; align-items:center; gap:10px; margin:0; padding:9px 14px 9px 9px; background:var(--paper); border:1px solid var(--line); border-radius:0; font-size:13.5px; font-weight:500; white-space:nowrap; }
#jk-app .jk-lx-steps li::before { content:counter(jk-step); display:grid; place-items:center; width:26px; height:26px; border-radius:0; background:var(--orange-tint); color:var(--orange-ink); font-size:13px; font-weight:700; }

/* library grid */
#jk-app .jk-lx-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:20px; }
#jk-app .jk-lx-card { display:flex; flex-direction:column; min-width:0; background:var(--paper); border:1px solid var(--line); border-radius:0; overflow:hidden; box-shadow:0 1px 2px rgba(24,22,20,.04); transition:box-shadow .2s, transform .2s, border-color .2s; }
#jk-app .jk-lx-card:hover { box-shadow:var(--lx-shadow); transform:translateY(-2px); }
#jk-app .jk-lx-card__preview { display:grid; place-items:center; aspect-ratio:4/3; padding:18px; background:var(--lx-paper-3); color:#C9C1B3; }
#jk-app .jk-lx-card__preview img { width:auto; max-width:100%; height:100%; object-fit:contain; background:#fff; border-radius:0; box-shadow:0 1px 1px rgba(24,22,20,.08),0 10px 22px -8px rgba(24,22,20,.25); }
/* Bag mockup. The slot is the bag's former label window; the label keeps its own proportions inside it, so any print size fits without white bars. */
#jk-app .jk-bag { position:relative; display:block; aspect-ratio:480/722; background:url('bag-red.png') center/contain no-repeat; filter:drop-shadow(0 10px 12px rgba(24,22,20,.18)); }
#jk-app .jk-bag__slot { position:absolute; left:14.68%; top:24.09%; width:69.88%; height:56.27%; display:flex; align-items:center; justify-content:center; }
#jk-app .jk-bag .jk-bag__label { display:block; width:auto; height:auto; max-width:100%; max-height:100%; background:#fff; border:0; border-radius:0; box-shadow:0 1px 2px rgba(0,0,0,.25); }
#jk-app .jk-lx-card__preview:has(.jk-bag) { aspect-ratio:1; padding:14px; }
#jk-app .jk-lx-card__preview .jk-bag { height:100%; }
#jk-app .jk-label-option .jk-bag { height:130px; }
#jk-app .jk-bag--black { background-image:url('bag-black.png'); }
#jk-app .jk-bag--brown { background-image:url('bag-brown.png'); }
#jk-app .jk-lx-card__order { width:100%; justify-content:center; margin:0 0 10px; }

/* Label and bag are order choices. Each ordered product keeps its own bag colour. */
#jk-app .jk-order-labels { display:grid; gap:12px; margin:18px 0; }
#jk-app .jk-order-label-row { display:grid; grid-template-columns:minmax(170px,1fr) minmax(190px,1fr) minmax(170px,.8fr); align-items:end; gap:14px; padding:16px; border:1.5px solid var(--line); background:var(--paper-2); }
#jk-app .jk-order-label-row h3 { align-self:center; margin:0; font-size:15px; }
#jk-app .jk-order-label-row .field { margin:0; }
#jk-app .jk-order-label-row > .field:last-child { grid-column:3; }
#jk-app .flow-actions { padding-bottom:24px; }
@media (max-width:700px) {
  #jk-app .jk-order-label-row { grid-template-columns:1fr; }
  #jk-app .jk-order-label-row > .field:last-child { grid-column:auto; }
}

/* Bag colour picker in the label editor. */
#jk-app .jk-lx-bags { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:0; padding:0 0 4px; border:0; }
#jk-app .jk-lx-bags legend { float:left; width:100%; margin-bottom:6px; padding:0; font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-mute); }
#jk-app .jk-lx-bag { position:relative; display:inline-flex; align-items:center; gap:6px; padding:5px 10px 5px 6px; border:1.5px solid var(--line); background:var(--paper); font-size:12.5px; cursor:pointer; }
#jk-app .jk-lx-bag input { position:absolute; opacity:0; pointer-events:none; }
#jk-app .jk-lx-bag:has(input:checked) { border-color:var(--orange); background:var(--orange-tint); }
#jk-app .jk-lx-bag:has(input:focus-visible) { outline:2px solid var(--orange); outline-offset:2px; }
#jk-app .jk-lx-bag__dot { width:16px; height:16px; border-radius:50%; background:#8A1B2B; box-shadow:inset 0 0 0 1px rgba(0,0,0,.2); }
#jk-app .jk-lx-bag--black .jk-lx-bag__dot { background:#1C1C1C; }
#jk-app .jk-lx-bag--brown .jk-lx-bag__dot { background:#A58B6E; }
#jk-app .jk-lx-card__body { display:flex; flex-direction:column; flex:1; padding:16px 18px 18px; }
#jk-app .jk-lx-card__body h3 { font-size:16.5px; line-height:1.3; overflow-wrap:anywhere; }
#jk-app .jk-lx-card__meta { margin:4px 0 16px; font-size:13px; color:var(--ink-mute); }
#jk-app .jk-lx-card__actions { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; }
#jk-app .jk-lx-icon { display:grid; place-items:center; width:38px; height:38px; border:1.5px solid transparent; border-radius:0; background:none; color:var(--ink-mute); cursor:pointer; transition:background .15s,color .15s; }
#jk-app .jk-lx-icon:hover { background:var(--orange-tint); color:var(--orange-ink); }
#jk-app .jk-lx-card--new { align-items:center; justify-content:center; gap:6px; min-height:260px; padding:24px; border:1.5px dashed #D6CFC2; background:transparent; box-shadow:none; color:var(--ink-soft); font:inherit; font-size:13.5px; text-align:center; cursor:pointer; }
#jk-app .jk-lx-card--new:hover { border-color:var(--orange); background:var(--paper); color:var(--ink); }
#jk-app .jk-lx-card--new strong { color:var(--ink); font-size:16px; }
#jk-app .jk-lx-card__plus { display:grid; place-items:center; width:48px; height:48px; margin-bottom:8px; border-radius:0; background:var(--orange-tint); color:var(--orange); }

#jk-app .jk-lx-empty { padding:48px 28px; text-align:center; background:var(--paper); border:1px solid var(--line); border-radius:0; box-shadow:var(--lx-shadow); }
#jk-app .jk-lx-empty__art { display:grid; place-items:center; width:120px; height:120px; margin:0 auto 18px; border-radius:0; background:var(--lx-paper-3); color:#C9C1B3; }
#jk-app .jk-lx-empty h2 { font-size:21px; margin-bottom:8px; }
#jk-app .jk-lx-empty p { max-width:460px; margin:0 auto 22px; color:var(--ink-soft); }
#jk-app .jk-lx-empty__actions { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; }

#jk-app .jk-lx-note { display:flex; align-items:flex-start; gap:12px; margin:20px 0 0; padding:14px 18px; background:var(--orange-tint); border-radius:0; color:var(--orange-ink); font-size:14px; }
#jk-app .jk-lx-note svg { flex:none; margin-top:2px; }

#jk-app .jk-lx-panel { display:grid; grid-template-columns:auto minmax(0,1fr) minmax(280px,420px); align-items:center; gap:18px 24px; margin-top:28px; padding:24px 26px; background:var(--paper); border:1px solid var(--line); border-radius:0; }
#jk-app .jk-lx-panel__icon { display:grid; place-items:center; width:48px; height:48px; border-radius:0; background:var(--blue-tint); color:var(--blue-ink); }
#jk-app .jk-lx-panel__text h2 { font-size:17px; margin-bottom:4px; }
#jk-app .jk-lx-panel__text p { margin:0; font-size:14px; color:var(--ink-soft); }
#jk-app .jk-lx-panel__form { display:flex; align-items:stretch; gap:10px; }
#jk-app .jk-lx-panel__form .field { flex:1; margin:0; }
#jk-app .jk-lx-panel__form .field label { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
#jk-app .jk-lx-panel__form .btn { justify-content:center; }

/* editor */
#jk-app .jk-lx-editor { background:var(--paper); border:1px solid var(--line); border-radius:0; box-shadow:var(--lx-shadow); overflow:hidden; }
#jk-app .jk-lx-editor__bar { display:flex; align-items:flex-end; gap:16px; padding:18px 22px; border-bottom:1px solid var(--line); }
#jk-app .jk-lx-editor__bar .field { flex:1 1 320px; max-width:520px; margin:0; }
#jk-app .jk-lx-editor__bar .field label { font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-mute); margin-bottom:6px; }
#jk-app .jk-lx-editor__chips { display:flex; gap:8px; margin-right:auto; padding-bottom:10px; }
#jk-app .jk-lx-chip { padding:4px 10px; border-radius:var(--radius-pill); background:var(--lx-paper-3); color:var(--ink-soft); font-size:12.5px; font-weight:500; white-space:nowrap; }
#jk-app .jk-lx-editor__save { min-height:46px; }
#jk-app .jk-lx-editor__stage { background:#fff; }
#jk-app #jk-designer-frame { display:block; width:100%; height:min(78vh,780px); min-height:560px; border:0; background:#fff; }
#jk-app .jk-lx-editor__foot { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 22px; border-top:1px solid var(--line); background:var(--paper-2); }
#jk-app .jk-lx-editor__foot p { display:flex; align-items:center; gap:10px; margin:0; font-size:13.5px; color:var(--ink-soft); }
#jk-app .jk-lx-editor__foot svg { flex:none; color:var(--ink-mute); }

@media (max-width:1024px) {
  #jk-app .jk-lx-steps { display:none; }
  #jk-app .jk-lx-panel { grid-template-columns:auto minmax(0,1fr); }
  #jk-app .jk-lx-panel__form { grid-column:1 / -1; }
}
@media (max-width:640px) {
  #jk-app .jk-coupon__row { flex-direction:column; }
  #jk-app .jk-coupon__row input { flex-basis:auto; }
  #jk-app .jk-coupon__row .btn { justify-content:center; }
  #jk-app .jk-lx__shell { padding:24px 16px 48px; }
  #jk-app .jk-lx__head { margin-bottom:18px; gap:14px; }
  #jk-app .jk-lx__lead { font-size:14.5px; }
  #jk-app .jk-lx__aside, #jk-app .jk-lx__aside .btn { width:100%; justify-content:center; }
  #jk-app .jk-lx-grid { grid-template-columns:1fr 1fr; gap:12px; }
  #jk-app .jk-lx-card__body { padding:12px; }
  #jk-app .jk-lx-card__body h3 { font-size:15px; }
  #jk-app .jk-lx-card__actions .btn { padding:7px 10px; }
  #jk-app .jk-lx-card--new { min-height:200px; }
  #jk-app .jk-lx-panel { grid-template-columns:1fr; padding:20px; }
  #jk-app .jk-lx-panel__icon { display:none; }
  #jk-app .jk-lx-panel__form { flex-direction:column; }
  #jk-app .jk-lx-editor__bar { flex-wrap:wrap; padding:16px; }
  #jk-app .jk-lx-editor__bar .field { flex-basis:100%; max-width:none; }
  #jk-app .jk-lx-editor__chips { padding-bottom:0; }  #jk-app .jk-lx-editor__save { flex:1; justify-content:center; }
  #jk-app .jk-lx-editor__foot { flex-direction:column; align-items:stretch; padding:14px 16px; }
  #jk-app .jk-lx-editor__foot .btn { justify-content:center; }
  #jk-app .jk-lx-editor { border-radius:0; }
  #jk-app #jk-designer-frame { height:calc(100svh - 120px); min-height:520px; }
}