/* Packageha's designer — scoped under .pk so it sits inside the store's theme without touching it */
.pk { --pk-yellow: #FECD1A; --pk-gold: #8A6D00; --pk-ink: #2B2118; --pk-soft: #FFF8E1; --pk-line: #EADFC8; --pk-muted: #6E6253; --pk-bg: #FFFFFF; --pk-ok: #2E7D32; --pk-bad: #B3261E;
  direction: rtl; font-family: inherit; color: var(--pk-ink); max-width: 760px; margin: 24px auto; padding: 0 16px; box-sizing: border-box; line-height: 1.6; }
.pk *, .pk *::before, .pk *::after { box-sizing: border-box; }
.pk-card { background: var(--pk-bg); border: 1px solid var(--pk-line); border-radius: 18px; box-shadow: 0 6px 24px rgba(43,33,24,.07); overflow: hidden; }
.pk-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; background: var(--pk-soft); border-bottom: 1px solid var(--pk-line); }
.pk-title { font-weight: 700; font-size: 18px; display: flex; align-items: center; gap: 8px; }
.pk-title b { background: var(--pk-yellow); color: var(--pk-ink); border-radius: 8px; padding: 1px 8px; font-size: 13px; }
.pk-steps { display: flex; gap: 6px; flex-wrap: wrap; font-size: 12px; }
.pk-steps span { padding: 3px 9px; border-radius: 99px; background: #fff; border: 1px solid var(--pk-line); color: var(--pk-muted); }
.pk-steps span.on { background: var(--pk-yellow); border-color: var(--pk-yellow); color: var(--pk-ink); font-weight: 700; }
.pk-steps span.done { color: var(--pk-gold); }
.pk-body { padding: 16px 18px 18px; }

/* the conversation */
.pk-msgs { display: flex; flex-direction: column; gap: 10px; max-height: 52vh; min-height: 220px; overflow-y: auto; padding: 4px 2px 8px; }
.pk-msg { max-width: 85%; padding: 10px 14px; border-radius: 16px; white-space: pre-wrap; word-wrap: break-word; font-size: 15px; }
.pk-msg.bot { align-self: flex-start; background: var(--pk-soft); border: 1px solid var(--pk-line); border-start-start-radius: 4px; }
.pk-msg.me { align-self: flex-end; background: var(--pk-ink); color: #fff; border-start-end-radius: 4px; }
.pk-msg img { display: block; max-width: 160px; border-radius: 10px; margin-bottom: 6px; }
.pk-typing { align-self: flex-start; color: var(--pk-muted); font-size: 13px; padding: 4px 6px; }
.pk-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; }
.pk-chip { border: 1px solid var(--pk-gold); color: var(--pk-gold); background: #fff; border-radius: 99px; padding: 6px 12px; font-size: 14px; cursor: pointer; font-family: inherit; }
.pk-chip:hover { background: var(--pk-soft); }
.pk-input { display: flex; gap: 8px; align-items: flex-end; margin-top: 10px; }
.pk-input textarea { flex: 1; resize: none; min-height: 46px; max-height: 140px; border: 1px solid var(--pk-line); border-radius: 14px; padding: 11px 14px; font: inherit; font-size: 15px; color: var(--pk-ink); }
.pk-input textarea:focus, .pk-field input:focus, .pk-field textarea:focus { outline: 2px solid var(--pk-yellow); border-color: var(--pk-yellow); }
.pk-icon { width: 46px; height: 46px; flex: none; border-radius: 14px; border: 1px solid var(--pk-line); background: #fff; cursor: pointer; font-size: 20px; display: grid; place-items: center; }
.pk-photo-note { font-size: 13px; color: var(--pk-muted); margin-top: 6px; display: flex; gap: 8px; align-items: center; }
.pk-photo-note img { width: 36px; height: 36px; object-fit: cover; border-radius: 8px; }

/* buttons */
.pk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 10px 18px; border-radius: 14px; border: 0; cursor: pointer; font: inherit; font-weight: 700; font-size: 15px; }
.pk-btn.main { background: var(--pk-yellow); color: var(--pk-ink); }
.pk-btn.main:hover { filter: brightness(.96); }
.pk-btn.ghost { background: #fff; border: 1px solid var(--pk-line); color: var(--pk-ink); }
.pk-btn.send { background: var(--pk-ink); color: #fff; width: 46px; padding: 0; }
.pk-btn[disabled] { opacity: .5; cursor: not-allowed; }
.pk-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.pk-actions .pk-btn.main { flex: 1 1 200px; }

/* the design */
.pk-design { display: grid; gap: 12px; }
.pk-design img { width: 100%; border-radius: 14px; border: 1px solid var(--pk-line); background: var(--pk-soft); aspect-ratio: 1 / 1; object-fit: cover; }
.pk-wait { display: grid; place-items: center; gap: 10px; aspect-ratio: 1 / 1; border-radius: 14px; background: var(--pk-soft); border: 1px dashed var(--pk-line); color: var(--pk-muted); text-align: center; padding: 20px; }
.pk-spin { width: 42px; height: 42px; border-radius: 50%; border: 4px solid var(--pk-line); border-top-color: var(--pk-gold); animation: pk-spin 1s linear infinite; }
@keyframes pk-spin { to { transform: rotate(360deg); } }
.pk-note { font-size: 13px; color: var(--pk-muted); }

/* the parts */
.pk-intro { margin: 0 0 10px; }
.pk-list { display: grid; gap: 10px; }
.pk-item { display: grid; grid-template-columns: auto 56px 1fr auto; gap: 10px; align-items: center; padding: 10px; border: 1px solid var(--pk-line); border-radius: 14px; background: #fff; }
.pk-item.off { opacity: .55; }
.pk-item input[type=checkbox] { width: 22px; height: 22px; accent-color: var(--pk-gold); }
.pk-thumb { width: 56px; height: 56px; border-radius: 10px; background: var(--pk-soft); object-fit: cover; display: grid; place-items: center; font-size: 24px; }
.pk-name { font-weight: 700; }
.pk-spec { font-size: 13px; color: var(--pk-muted); }
.pk-price { font-size: 12px; display: inline-block; margin-top: 2px; padding: 1px 8px; border-radius: 99px; background: var(--pk-soft); color: var(--pk-gold); }
.pk-qty { display: flex; align-items: center; border: 1px solid var(--pk-line); border-radius: 12px; overflow: hidden; }
.pk-qty button { width: 34px; height: 38px; border: 0; background: #fff; font-size: 18px; cursor: pointer; }
.pk-qty input { width: 64px; height: 38px; border: 0; text-align: center; font: inherit; border-inline: 1px solid var(--pk-line); }
.pk-add { display: flex; gap: 8px; margin-top: 10px; }
.pk-add .pk-btn { flex: none; }
.pk-add input { flex: 1; min-width: 0; min-height: 46px; border: 1px solid var(--pk-line); border-radius: 14px; padding: 0 14px; font: inherit; }

/* the quote */
.pk-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pk-field { display: grid; gap: 4px; font-size: 14px; }
.pk-field.wide { grid-column: 1 / -1; }
.pk-field input, .pk-field textarea { min-height: 46px; border: 1px solid var(--pk-line); border-radius: 12px; padding: 10px 12px; font: inherit; font-size: 15px; }
.pk-sum { background: var(--pk-soft); border: 1px solid var(--pk-line); border-radius: 14px; padding: 12px 14px; font-size: 14px; margin-bottom: 14px; }
.pk-sum ul { margin: 6px 0 0; padding-inline-start: 18px; }
.pk-err { color: var(--pk-bad); font-size: 14px; margin-top: 10px; }
.pk-done { text-align: center; padding: 22px 6px; }
.pk-done .pk-ref { display: inline-block; font-size: 22px; font-weight: 700; letter-spacing: .5px; background: var(--pk-yellow); border-radius: 12px; padding: 6px 16px; margin: 10px 0; direction: ltr; }
.pk-foot { font-size: 12px; color: var(--pk-muted); text-align: center; padding: 10px; }

@media (max-width: 560px) {
  .pk { margin: 12px auto; padding: 0 12px; }
  .pk-head { flex-direction: column; align-items: flex-start; }
  .pk-item { grid-template-columns: auto 44px 1fr; }
  .pk-item .pk-qty { grid-column: 1 / -1; justify-self: end; }
  .pk-thumb { width: 44px; height: 44px; }
  .pk-form { grid-template-columns: 1fr; }
  .pk-msg { max-width: 92%; }
}
.pk-price.est { background: var(--pk-yellow); color: var(--pk-ink); font-weight: 700; }
.pk-price small { font-weight: 400; }
a.pk-price { text-decoration: none; }
.pk-est { margin-top: 12px; padding: 10px 14px; border-radius: 14px; background: var(--pk-soft); border: 1px solid var(--pk-line); font-size: 14px; }

/* decisions 501–503: the product study, the sign-in, the two lists */
.pk-study { display: grid; gap: 10px; margin-bottom: 6px; }
.pk-study textarea { min-height: 64px; resize: vertical; }
.pk-page { color: var(--pk-muted); font-weight: 400; }
.pk-guess { background: var(--pk-soft); color: var(--pk-gold); border-radius: 99px; padding: 1px 8px; font-weight: 600; }
.pk-login { text-align: center; padding: 22px 12px; border: 1px dashed var(--pk-line); border-radius: 16px; background: var(--pk-soft); display: grid; gap: 8px; justify-items: center; }
.pk-login p { margin: 0; color: var(--pk-muted); font-size: 14px; max-width: 420px; }
.pk-login .pk-btn { text-decoration: none; min-width: 200px; }
.pk-group { border: 1px solid var(--pk-line); border-radius: 16px; padding: 14px; margin-top: 14px; }
.pk-group h4 { margin: 0 0 4px; font-size: 18px; }
.pk-group > p { margin: 0 0 10px; color: var(--pk-ink); }
.pk-group.store { background: linear-gradient(180deg, var(--pk-soft), #fff 120px); border-color: var(--pk-yellow); }
.pk-prod { display: block; font-size: 13px; color: var(--pk-gold); }
.pk-var { display: block; margin: 4px 0; max-width: 100%; min-height: 36px; border: 1px solid var(--pk-line); border-radius: 10px; padding: 4px 8px; font: inherit; font-size: 13px; background: #fff; }
.pk-logo { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 14px; }
.pk-logo img { width: 44px; height: 44px; object-fit: contain; border-radius: 8px; border: 1px solid var(--pk-line); background: #fff; }
.pk-logo-pick { cursor: pointer; border: 1px dashed var(--pk-gold); border-radius: 14px; padding: 10px 14px; color: var(--pk-gold); background: #fff; }
.pk-field select { min-height: 46px; }
.pk-item > div { min-width: 0; }
.pk-var { width: 100%; }
.pk-prod, .pk-spec, .pk-name { overflow-wrap: anywhere; }
.pk-conv { margin-top: 4px; font-size: 14px; }
.pk-conv b { color: var(--pk-ink); }