/* ERP Commerce — Λίστα προσφοράς (theme tokens: --erp-*). */

/* ---------- Category strip ---------- */
.erpc-ql-strip { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; padding: 14px 16px; border: 1px solid var(--erp-line); border-left: 4px solid var(--erp-primary); border-radius: var(--erp-r, 12px); background: var(--erp-bg); }
.erpc-ql-strip p { flex: 1; margin: 0; color: var(--erp-text); font-size: var(--erp-fs-base, 15px); line-height: 1.45; }
.erpc-ql-strip b { color: var(--erp-ink); }
.erpc-ql-strip__ic { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--erp-primary-50); color: var(--erp-primary); }
.erpc-ql-strip__ic svg { width: 21px; height: 21px; }
.erpc-ql-strip__btn { flex: none; white-space: nowrap; }
.erpc-ql-strip__btn svg { width: 17px; height: 17px; }
@media (max-width: 640px) {
	.erpc-ql-strip { flex-wrap: wrap; gap: 10px 12px; }
	.erpc-ql-strip p { flex-basis: calc(100% - 56px); font-size: 14px; }
	.erpc-ql-strip__btn { width: 100%; justify-content: center; }
}

/* ---------- Product page prompt ---------- */
.erpc-ql-prompt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; margin: 14px 0 0; padding: 10px 14px; border: 1px dashed var(--erp-line-strong); border-radius: var(--erp-r-sm, 8px); transition: background .2s, border-color .2s; }
.erpc-ql-prompt p { margin: 0; color: var(--erp-muted); font-size: var(--erp-fs-sm, 14px); }
.erpc-ql-prompt__btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid var(--erp-ink); border-radius: 999px; background: var(--erp-bg); color: var(--erp-ink); font: inherit; font-size: var(--erp-fs-sm, 14px); font-weight: 700; cursor: pointer; }
.erpc-ql-prompt__btn:hover { background: var(--erp-ink); color: #fff; }
.erpc-ql-prompt__btn svg { width: 16px; height: 16px; }
.erpc-ql-prompt.is-hot { border-style: solid; border-color: var(--erp-primary); background: var(--erp-primary-50); }
.erpc-ql-prompt.is-hot p { color: var(--erp-ink); font-weight: 700; }
.erpc-ql-prompt.is-hot .erpc-ql-prompt__btn { border-color: var(--erp-primary); background: var(--erp-primary); color: #fff; }

/* ---------- Card link ---------- */
.erpc-ql-card { display: flex; align-items: center; justify-content: center; gap: 5px; width: 100%; margin: 8px 0 0; padding: 4px; border: 0; background: none; color: var(--erp-muted); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.erpc-ql-card:hover { color: var(--erp-primary); text-decoration: underline; }
.erpc-ql-card svg { width: 14px; height: 14px; }

/* ---------- Tab on the right edge ---------- */
.erpc-ql-tab { position: fixed; z-index: 9990; right: 0; top: 50%; display: flex; align-items: center; gap: 8px; padding: 14px 9px; border: 0; border-radius: 12px 0 0 12px; background: var(--erp-ink); color: #fff; font: inherit; font-size: 13px; font-weight: 700; writing-mode: vertical-rl; transform: translateY(-50%) rotate(180deg); box-shadow: 0 8px 24px rgba(0, 0, 0, .2); cursor: pointer; }
.erpc-ql-tab[hidden] { display: none; }
.erpc-ql-tab svg { width: 18px; height: 18px; transform: rotate(90deg); }
.erpc-ql-tab b { display: grid; place-items: center; min-width: 22px; height: 22px; border-radius: 999px; background: var(--erp-primary); writing-mode: horizontal-tb; transform: rotate(180deg); font-size: 12px; }
.erpc-ql-open .erpc-ql-tab { visibility: hidden; }

/* ---------- Panel ---------- */
.erpc-ql { position: fixed; inset: 0; z-index: 100000; }
.erpc-ql[hidden] { display: none; }
.erpc-ql-open, .erpc-ql-open body { overflow: hidden; }
.erpc-ql__backdrop { position: absolute; inset: 0; background: rgba(17, 20, 24, .45); opacity: 0; transition: opacity .25s; }
.erpc-ql__panel { position: absolute; top: 0; right: 0; bottom: 0; display: flex; flex-direction: column; width: min(480px, 100vw); background: var(--erp-bg); box-shadow: -10px 0 40px rgba(0, 0, 0, .2); transform: translateX(100%); transition: transform .25s ease; }
.erpc-ql.is-open .erpc-ql__backdrop { opacity: 1; }
.erpc-ql.is-open .erpc-ql__panel { transform: none; }
.erpc-ql__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 18px 20px 14px; border-bottom: 1px solid var(--erp-line); }
.erpc-ql__head h2 { margin: 0; font-size: 1.3rem; color: var(--erp-ink); }
.erpc-ql__head p { margin: 2px 0 0; color: var(--erp-muted); font-size: 14px; }
.erpc-ql__x { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border: 1px solid var(--erp-line); border-radius: 50%; background: var(--erp-bg); color: var(--erp-ink); cursor: pointer; }
.erpc-ql__x svg { width: 20px; height: 20px; }
.erpc-ql__body { flex: 1; overflow-y: auto; padding: 16px 20px 28px; overscroll-behavior: contain; }
.erpc-ql h3 { margin: 22px 0 6px; font-size: 1rem; color: var(--erp-ink); }

.erpc-ql__empty { margin: 0; padding: 16px; border: 1px dashed var(--erp-line-strong); border-radius: var(--erp-r-sm, 8px); color: var(--erp-muted); font-size: 14px; text-align: center; }
.erpc-ql__item { display: grid; grid-template-columns: 52px minmax(0, 1fr) 76px 34px; gap: 10px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--erp-line); }
.erpc-ql__item.is-new { animation: erpc-ql-flash 1.2s ease; }
@keyframes erpc-ql-flash { 0%, 40% { background: var(--erp-primary-50); } 100% { background: transparent; } }
.erpc-ql__item img, .erpc-ql__noimg { width: 52px; height: 52px; object-fit: cover; border-radius: 8px; background: var(--erp-soft); }
.erpc-ql__noimg { display: grid; place-items: center; color: var(--erp-muted); }
.erpc-ql__noimg svg { width: 22px; height: 22px; }
.erpc-ql__info b { display: block; color: var(--erp-ink); font-size: 14px; line-height: 1.3; }
.erpc-ql__info small { display: block; color: var(--erp-muted); font-size: 12px; }
.erpc-ql__info input { width: 100%; margin-top: 6px; padding: 6px 8px; border: 1px solid var(--erp-line); border-radius: 6px; font: inherit; font-size: 13px; }
.erpc-ql__qty { display: grid; gap: 2px; }
.erpc-ql__qty span { color: var(--erp-muted); font-size: 11px; font-weight: 700; text-transform: uppercase; }
.erpc-ql__qty input { width: 100%; padding: 7px 6px; border: 1px solid var(--erp-line-strong); border-radius: 6px; font: inherit; font-size: 15px; font-weight: 700; text-align: center; }
.erpc-ql__rm { display: grid; place-items: center; width: 34px; height: 34px; margin-top: 16px; border: 0; border-radius: 8px; background: none; color: var(--erp-muted); cursor: pointer; }
.erpc-ql__rm:hover { background: #fdecec; color: #a11a1a; }
.erpc-ql__rm svg { width: 17px; height: 17px; }

.erpc-ql__more[hidden] { display: none; }
.erpc-ql__more p { margin: 0 0 10px; color: var(--erp-muted); font-size: 13px; }
.erpc-ql__cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.erpc-ql__cat { display: grid; grid-template-columns: 40px minmax(0, 1fr) 20px; gap: 8px; align-items: center; padding: 6px 8px 6px 6px; border: 1px solid var(--erp-line); border-radius: 10px; background: var(--erp-bg); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, background .15s; }
.erpc-ql__cat:hover { border-color: var(--erp-primary); background: var(--erp-primary-50); }
.erpc-ql__cat img { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; }
.erpc-ql__cat b { display: block; overflow: hidden; color: var(--erp-ink); font-size: 13px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.erpc-ql__cat small { color: var(--erp-primary-700, var(--erp-primary)); font-size: 12px; font-weight: 700; }
.erpc-ql__cat i { color: var(--erp-primary); }
.erpc-ql__cat i svg { width: 18px; height: 18px; }

.erpc-ql__form { display: grid; gap: 10px; }
.erpc-ql__form[hidden] { display: none; }
.erpc-ql__form label { display: grid; gap: 4px; min-width: 0; }
.erpc-ql__form label > span { color: var(--erp-muted); font-size: 12px; font-weight: 700; }
.erpc-ql__form input, .erpc-ql__form textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--erp-line-strong); border-radius: 8px; background: var(--erp-bg); font: inherit; font-size: 15px; }
.erpc-ql__form input:focus, .erpc-ql__form textarea:focus { outline: 2px solid var(--erp-primary-200, #c3d2f8); border-color: var(--erp-primary); }
.erpc-ql__form .is-invalid { border-color: #c81e1e; }
.erpc-ql__row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.erpc-ql__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.erpc-ql__err { margin: 0; padding: 10px 12px; border-radius: 8px; background: #fdecec; color: #a11a1a; font-size: 14px; font-weight: 600; }
.erpc-ql__send { width: 100%; justify-content: center; }
.erpc-ql__send.is-loading { opacity: .6; pointer-events: none; }
.erpc-ql__fine { margin: 0; color: var(--erp-muted); font-size: 12px; text-align: center; }
.erpc-ql__done { padding: 30px 6px; text-align: center; }
.erpc-ql__done svg { width: 52px; height: 52px; color: var(--erp-green); }
.erpc-ql__done h3 { margin: 10px 0 6px; font-size: 1.25rem; }
.erpc-ql__done h3 span { color: var(--erp-primary); }
.erpc-ql__done p { margin: 0 0 18px; color: var(--erp-text); }
@media (max-width: 480px) {
	.erpc-ql__row, .erpc-ql__cats { grid-template-columns: minmax(0, 1fr); }
	.erpc-ql__item { grid-template-columns: 44px minmax(0, 1fr) 66px 30px; }
	.erpc-ql__item img, .erpc-ql__noimg { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .erpc-ql__panel, .erpc-ql__backdrop { transition: none; } }

/* ---------- «Μπορεί να σας ενδιαφέρουν» on the offer page ---------- */
.erpc-ql-sugg { margin: 28px 0 0; padding: 22px; border: 1px solid var(--erp-line); border-radius: var(--erp-r-lg, 16px); background: var(--erp-bg); }
.erpc-ql-sugg h2 { margin: 0 0 4px; font-size: var(--erp-fs-lg, 1.25rem); color: var(--erp-ink); }
.erpc-ql-sugg > p { margin: 0 0 14px; color: var(--erp-muted); }
.erpc-ql-sugg__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.erpc-ql-sugg__item { display: flex; flex-direction: column; gap: 2px; padding: 8px; border: 1px solid var(--erp-line); border-radius: var(--erp-r, 12px); color: var(--erp-ink); text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.erpc-ql-sugg__item:hover { border-color: var(--erp-primary); box-shadow: var(--erp-shadow); }
.erpc-ql-sugg__item img { width: 100%; aspect-ratio: 1; object-fit: cover; margin-bottom: 6px; border-radius: 8px; background: var(--erp-soft); }
.erpc-ql-sugg__item b { font-size: 14px; }
.erpc-ql-sugg__item small { color: var(--erp-primary-700, var(--erp-primary)); font-weight: 700; }
.erpc-ql-sugg__more { display: inline-block; margin-top: 14px; color: var(--erp-primary); font-weight: 700; }