/* „Любими“, „Сравни“, „Последно разгледани“, известия за продукт (public/js/shop-lists.js). */
:root { --tp-sl-accent: var(--primary-color, var(--bs-primary, #0d6efd)); --tp-sl-heart: #e11d48; }

/* Бутоните върху снимката на картата */
.tp-card-actions { position: absolute; top: .6rem; right: .6rem; z-index: 3; display: flex; flex-direction: column; gap: .4rem; }
.tp-card-act { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .92); color: #334155; box-shadow: 0 2px 10px rgba(15, 23, 42, .15); cursor: pointer; transition: transform .15s ease, color .15s ease, background .15s ease; }
.tp-card-act:hover { transform: scale(1.08); color: var(--tp-sl-accent); }
.tp-card-act:focus-visible { outline: 2px solid var(--tp-sl-accent); outline-offset: 2px; }
.tp-card-act[data-tp-wl].is-on { color: var(--tp-sl-heart); }
.tp-card-act[data-tp-cmp].is-on { background: var(--tp-sl-accent); color: #fff; }

/* Продуктовата страница */
.tp-pa { margin-top: 1rem; }
.tp-pa-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.tp-pa-btn { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .9rem; border: 1px solid rgba(100, 116, 139, .35); border-radius: 999px; background: transparent; color: inherit; font-size: .95rem; cursor: pointer; transition: border-color .15s ease, color .15s ease; }
.tp-pa-btn:hover { border-color: var(--tp-sl-accent); color: var(--tp-sl-accent); }
.tp-pa-btn .tp-on { display: none; }
.tp-pa-btn.is-on .tp-on { display: inline; }
.tp-pa-btn.is-on .tp-off { display: none; }
.tp-pa-btn[data-tp-wl].is-on { border-color: var(--tp-sl-heart); color: var(--tp-sl-heart); }
.tp-pa-btn[data-tp-cmp].is-on { border-color: var(--tp-sl-accent); color: var(--tp-sl-accent); }

.tp-alert { position: relative; margin-top: 1rem; padding: 1rem; border: 1px dashed rgba(100, 116, 139, .45); border-radius: 12px; }
.tp-alert-title { font-weight: 700; margin-bottom: .25rem; }
.tp-alert-title i { color: var(--tp-sl-accent); margin-right: .25rem; }
.tp-alert-text { margin: 0 0 .65rem; font-size: .9rem; opacity: .8; }
.tp-alert-price { position: relative; margin-top: .75rem; }
.tp-alert-price .tp-alert-form { margin-top: .5rem; max-width: 26rem; }
.tp-alert-link { padding: 0; border: 0; background: none; color: var(--tp-sl-accent); font-size: .9rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.tp-alert-msg { margin-top: .4rem; font-size: .875rem; }
.tp-alert-msg:empty { display: none; }
.tp-alert-msg.is-ok { color: #15803d; }
.tp-alert-msg.is-err { color: #b91c1c; }

/* Страниците „Любими“ и „Сравнение“ */
.tp-list-page, .tp-recent { --tpe-radius: 14px; }
.tp-loading { padding: 2rem 0; opacity: .7; }
.tp-empty { padding: 3rem 1rem; text-align: center; opacity: .9; }
.tp-empty > i { display: block; opacity: .5; }
.tp-card-remove { align-self: flex-start; margin-top: .35rem; padding: 0; border: 0; background: none; color: #b91c1c; font-size: .85rem; cursor: pointer; }
.tp-card-remove:hover { text-decoration: underline; }

.tp-cmp-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tp-cmp-table { width: 100%; min-width: 560px; border-collapse: collapse; table-layout: fixed; }
.tp-cmp-table th, .tp-cmp-table td { padding: .75rem; border-bottom: 1px solid rgba(100, 116, 139, .2); vertical-align: top; text-align: left; overflow-wrap: anywhere; }
.tp-cmp-table thead th { border-bottom-width: 2px; }
.tp-cmp-label { width: 11rem; font-weight: 600; opacity: .8; }
.tp-cmp-prod { position: relative; font-weight: 400; }
.tp-cmp-img { display: block; aspect-ratio: 1; max-width: 160px; margin-bottom: .5rem; overflow: hidden; border-radius: 10px; background: rgba(148, 163, 184, .12); }
.tp-cmp-img img { width: 100%; height: 100%; object-fit: cover; }
.tp-cmp-name { display: block; font-weight: 600; color: inherit; text-decoration: none; line-height: 1.3; }
.tp-cmp-name:hover { color: var(--tp-sl-accent); }
.tp-cmp-remove { position: absolute; top: .5rem; right: .5rem; display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; border: 0; border-radius: 999px; background: rgba(148, 163, 184, .2); color: inherit; cursor: pointer; }
.tp-cmp-remove:hover { background: #fee2e2; color: #b91c1c; }
.tp-cmp-stock.is-in { color: #15803d; }
.tp-cmp-stock.is-out { color: #b91c1c; }
@media (max-width: 575.98px) { .tp-cmp-label { width: 7.5rem; } }

/* Лентата „Последно разгледани“ */
.tp-recent-arrows { display: flex; gap: .4rem; }
.tp-recent-arrow { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border: 1px solid rgba(100, 116, 139, .35); border-radius: 999px; background: transparent; color: inherit; cursor: pointer; }
.tp-recent-arrow:hover { border-color: var(--tp-sl-accent); color: var(--tp-sl-accent); }
.tp-recent .tpe-pscroll .tpe-pgrid { scroll-behavior: smooth; }

/* Плаващата лента „Сравни (n)“ и съобщенията */
.tp-cmp-bar { position: fixed; left: 50%; bottom: 1rem; z-index: 1040; display: flex; align-items: center; gap: .5rem; padding: .4rem; border-radius: 999px; background: #0f172a; color: #fff; box-shadow: 0 10px 30px rgba(15, 23, 42, .3); transform: translate(-50%, 160%); transition: transform .25s ease, visibility .25s; visibility: hidden; }
.tp-cmp-bar.is-on { transform: translate(-50%, 0); visibility: visible; }
.tp-cmp-bar-go { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem 1rem; border-radius: 999px; background: var(--tp-sl-accent); color: #fff; font-weight: 600; text-decoration: none; }
.tp-cmp-bar-go:hover { color: #fff; filter: brightness(1.08); }
.tp-cmp-bar-clear { padding: .5rem .8rem; border: 0; border-radius: 999px; background: transparent; color: #cbd5e1; cursor: pointer; }
.tp-cmp-bar-clear:hover { color: #fff; }
@media (max-width: 767.98px) { .tp-cmp-bar { bottom: 4.75rem; } }

.tp-toast { position: fixed; left: 50%; top: 1rem; z-index: 1090; max-width: calc(100% - 2rem); padding: .65rem 1rem; border-radius: 10px; background: #0f172a; color: #fff; font-size: .925rem; box-shadow: 0 10px 30px rgba(15, 23, 42, .3); opacity: 0; pointer-events: none; transform: translate(-50%, -.5rem); transition: opacity .2s ease, transform .2s ease; }
.tp-toast.is-on { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.tp-toast a { color: #93c5fd; font-weight: 600; margin-left: .25rem; }

@media (prefers-reduced-motion: reduce) {
  .tp-card-act, .tp-cmp-bar, .tp-toast { transition: none; }
}