/* ============================================================
   Hermes pricewatch — UI polish layer.
   ============================================================ */

/* Brand-coloured store badges */
.pw-badge-kaufland {
    background-color: #E60012 !important;
    color: #ffffff !important;
}

.pw-badge-lidl {
    background-color: #0050AA !important;
    color: #ffffff !important;
}

.pw-badge-billa {
    background-color: #ED1C24 !important;
    color: #ffffff !important;
}

/* Product card — gentle lift on hover */
.pw-product-card {
    transition: transform .15s ease-in-out, box-shadow .15s ease-in-out;
}

.pw-product-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .12) !important;
}

.pw-product-card:hover .pw-price {
    color: #0a58ca !important;
}

.pw-price {
    transition: color .15s ease-in-out;
}

/* Filter action buttons — fixed layout so they never stretch on click/focus
   (the submit fills the column; the clear-X stays a fixed square). */
.hermes-filter-actions {
    display: flex;
    gap: .5rem;
    align-items: stretch;
}
.hermes-filter-submit {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 38px;          /* match .form-select height for alignment */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
}
.hermes-filter-clear {
    flex: 0 0 auto;
    width: 44px;
    min-height: 38px;
    padding-left: 0;
    padding-right: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* Stable on interaction — no layout shift / no ring-induced "stretch". */
.hermes-filter-actions .btn:focus,
.hermes-filter-actions .btn:active {
    box-shadow: none;
    transform: none;
}

/* Active-filter chips (above the product grid) */
.pw-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .65rem;
    border-radius: 999px;
    background: #eef2f7;
    color: #34495e;
    font-size: .85rem;
    text-decoration: none;
    border: 1px solid transparent;
}

.pw-chip:hover {
    background: #dde4ee;
    border-color: #c8d3e0;
    color: #1c2e44;
}

.pw-chip i {
    font-size: .75rem;
}

/* Empty-state container — used in list/detail/dashboard */
.pw-empty {
    padding: 3rem 1rem;
    text-align: center;
    color: #6c757d;
}

.pw-empty .bi {
    font-size: 3rem;
    display: block;
    margin-bottom: .5rem;
    opacity: .55;
}

/* Mobile tweak — keep two columns on phones, not one */
@media (max-width: 575.98px) {
    .pw-product-grid > [class^="col-"],
    .pw-product-grid > [class*=" col-"] {
        flex: 0 0 50%;
        max-width: 50%;
    }

    /* Compact pagination on phones — hide intermediate page numbers,
       leave only prev/next + first/last anchors. */
    .pagination .page-item.pw-page-num {
        display: none;
    }
}