/* Reusable components: buttons, product card, badges, stars, empty states, toasts */
.btn { font-weight: 600; border-radius: var(--se-radius-sm); }
.btn-primary { --bs-btn-bg: var(--se-primary); --bs-btn-border-color: var(--se-primary); --bs-btn-hover-bg: var(--se-primary-dark); --bs-btn-hover-border-color: var(--se-primary-dark); --bs-btn-active-bg: var(--se-primary-dark); --bs-btn-active-border-color: var(--se-primary-dark); --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-disabled-bg: var(--se-primary); --bs-btn-disabled-border-color: var(--se-primary); }
[data-bs-theme="dark"] .btn-primary { --bs-btn-color: #0B1220; --bs-btn-hover-color: #0B1220; --bs-btn-active-color: #0B1220; }
.btn-outline-primary { --bs-btn-color: var(--se-primary); --bs-btn-border-color: var(--se-primary); --bs-btn-hover-bg: var(--se-primary); --bs-btn-hover-border-color: var(--se-primary); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--se-primary); --bs-btn-active-border-color: var(--se-primary); }
[data-bs-theme="dark"] .btn-outline-primary { --bs-btn-hover-color: #0B1220; }
.btn-soft { background: var(--se-primary-soft); color: var(--se-primary); border: 0; }
.btn-soft:hover { background: rgba(var(--se-primary-rgb), .2); color: var(--se-primary); }
.text-primary { color: var(--se-primary) !important; }
.bg-primary { background-color: var(--se-primary) !important; }
.badge-soft-success { background: rgba(22,163,74,.12); color: var(--se-success); }
.badge-soft-warning { background: rgba(245,158,11,.16); color: #B45309; }
.badge-soft-danger { background: rgba(220,38,38,.12); color: var(--se-danger); }
.badge-soft-primary { background: var(--se-primary-soft); color: var(--se-primary); }
.badge-soft-secondary { background: var(--se-surface-2); color: var(--se-muted); }
[data-bs-theme="dark"] .badge-soft-warning { color: #FBBF24; }

/* Product card */
.product-card { position: relative; height: 100%; display: flex; flex-direction: column; background: var(--se-surface); border: 1px solid var(--se-border); border-radius: var(--se-radius); overflow: hidden; transition: box-shadow .2s, transform .2s; }
.product-card:hover { box-shadow: var(--se-shadow-lg); transform: translateY(-2px); }
.product-card .pc-media { position: relative; display: block; aspect-ratio: 1 / 1; background: var(--se-surface-2); overflow: hidden; }
.product-card .pc-media img { width: 100%; height: 100%; object-fit: cover; }
.product-card .pc-badge { position: absolute; top: .6rem; left: .6rem; background: var(--se-danger); color: #fff; font-size: .75rem; font-weight: 700; padding: .2rem .5rem; border-radius: 999px; }
.product-card .pc-wish { position: absolute; top: .5rem; right: .5rem; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--se-surface); color: var(--se-muted); display: grid; place-items: center; box-shadow: var(--se-shadow); }
.product-card .pc-wish.active { color: var(--se-danger); }
.product-card .pc-wish:hover { color: var(--se-danger); }
.product-card .pc-body { padding: .9rem; display: flex; flex-direction: column; gap: .3rem; flex: 1; }
.product-card .pc-brand { font-size: .78rem; color: var(--se-muted); }
.product-card .pc-title { font-size: .95rem; font-weight: 600; color: var(--se-text); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
.product-card .pc-title:hover { color: var(--se-primary); }
.product-card .pc-actions { margin-top: auto; display: flex; gap: .5rem; padding-top: .6rem; }
.product-card .pc-actions .btn { flex: 1; font-size: .85rem; padding: .45rem .5rem; }
.product-card .pc-stock { font-size: .78rem; font-weight: 600; }
.product-list-view .product-card { flex-direction: row; }
.product-list-view .product-card .pc-media { width: 200px; flex: 0 0 200px; aspect-ratio: 1/1; }
@media (max-width: 575.98px) { .product-list-view .product-card .pc-media { width: 120px; flex-basis: 120px; } }

/* Rating */
.stars { color: #F59E0B; letter-spacing: 1px; white-space: nowrap; }
.rating-chip { display: inline-flex; align-items: center; gap: .25rem; background: var(--se-success); color: #fff; font-size: .75rem; font-weight: 700; padding: .1rem .45rem; border-radius: .35rem; }
.rating-input { display: inline-flex; flex-direction: row-reverse; gap: .2rem; }
.rating-input input { position: absolute; opacity: 0; }
.rating-input label { font-size: 1.6rem; color: var(--se-border); cursor: pointer; }
.rating-input input:checked ~ label, .rating-input label:hover, .rating-input label:hover ~ label { color: #F59E0B; }
.rating-input input:focus-visible + label { outline: 3px solid rgba(var(--se-primary-rgb), .55); }

/* Empty state */
.empty-state { text-align: center; padding: 3rem 1rem; background: var(--se-surface); border: 1px dashed var(--se-border); border-radius: var(--se-radius); }
.empty-state .es-icon { font-size: 3rem; color: var(--se-muted); }
.empty-state h2 { font-size: 1.25rem; margin-top: .75rem; }

/* Quantity stepper */
.qty-stepper { display: inline-flex; align-items: center; border: 1px solid var(--se-border); border-radius: var(--se-radius-sm); overflow: hidden; background: var(--se-surface); }
.qty-stepper button { width: 34px; height: 36px; border: 0; background: transparent; color: var(--se-text); }
.qty-stepper button:hover { background: var(--se-surface-2); }
.qty-stepper .qty-value { min-width: 38px; text-align: center; font-weight: 600; }

/* Toasts */
.toast.se-toast { border: 0; border-left: 4px solid var(--se-primary); box-shadow: var(--se-shadow-lg); background: var(--se-surface); color: var(--se-text); }
.toast.se-toast.t-success { border-left-color: var(--se-success); }
.toast.se-toast.t-danger { border-left-color: var(--se-danger); }
.toast.se-toast.t-warning { border-left-color: var(--se-warning); }

/* Status pills */
.status-pill { display: inline-block; padding: .2rem .65rem; border-radius: 999px; font-size: .78rem; font-weight: 700; }