/* Customer-only compact catalog/header. Desktop styles and application logic unchanged. */
@media (max-width: 575.98px) {
    .product-card-body { padding: .625rem; min-width: 0; }
    .product-card .product-name { font-size: .8125rem; }
    .product-card .product-pricing-box { padding: .5rem; margin-bottom: .625rem; min-width: 0; }
    .product-card .product-pricing-box > .d-flex { flex-wrap: wrap; gap: .25rem; }
    .product-card .price-main { font-size: .9375rem; min-width: 0; overflow-wrap: anywhere; }
    .product-card .price-unit { display: block; font-size: .75rem; line-height: 1.4; }
    .product-card .wholesale-tier-pills { height: auto; min-height: 0; overflow: visible; }
    .product-card .tier-pill { flex-wrap: wrap; gap: .2rem .35rem; padding: .25rem .375rem; font-size: .75rem; white-space: normal; }
    .product-card .tier-pill .tier-qty,
    .product-card .tier-pill .tier-price { white-space: normal; overflow-wrap: anywhere; min-width: 0; max-width: 100%; }
    .product-card .tier-pill .tier-price { margin-left: 0; }
    .product-card .badge { max-width: 100%; white-space: normal; overflow-wrap: anywhere; line-height: 1.4; font-size: .75rem; text-align: left; }
    .product-card .product-category-tag { max-width: calc(100% - 12px); top: 6px; right: 6px; font-size: .6875rem; padding: .2rem .375rem; }
    .product-card .d-grid { gap: .375rem !important; }
    .product-card .btn-quick-add,
    .product-card .d-grid > .btn { font-size: .8125rem; padding: .375rem .25rem; min-height: 44px; display: flex; align-items: center; justify-content: center; }
}

@media (max-width: 991.98px) {
    .customer-navbar #navCustomer { padding-top: .5rem; }
    .customer-navbar #navCustomer > .d-flex { width: 100%; padding-left: 0 !important; padding-right: 0 !important; }
    .customer-navbar #navCustomer .search-bar-container { max-width: none; width: 100%; }
    .customer-navbar #navCustomer > .d-flex:last-child { justify-content: stretch !important; align-items: stretch !important; flex-direction: column; gap: .5rem !important; }
    .customer-navbar #navCustomer .user-account-dropdown,
    .customer-navbar #navCustomer .user-account-dropdown .btn-user-profile,
    .customer-navbar #navCustomer > .d-flex:last-child > .d-flex { width: 100%; }
    .customer-navbar #navCustomer .user-account-dropdown .btn-user-profile { justify-content: flex-start; min-height: 48px; padding: .5rem .75rem; }
    .customer-navbar #navCustomer .user-account-dropdown .btn-user-profile::after { margin-left: auto; }
    .customer-navbar #navCustomer .user-account-dropdown .dropdown-menu { position: static !important; transform: none !important; inset: auto !important; width: 100%; max-width: 100%; margin-top: .5rem !important; border: 1px solid var(--pnl-border) !important; box-shadow: var(--pnl-card-shadow) !important; }
    .customer-navbar #navCustomer .user-account-dropdown .dropdown-menu.show { display: block; }
    .customer-navbar #navCustomer .user-account-dropdown .text-start { display: block !important; min-width: 0; }
    .customer-navbar #navCustomer .user-account-dropdown .text-truncate { max-width: none !important; }
    .customer-navbar #navCustomer .btn-outline-primary,
    .customer-navbar #navCustomer .btn-primary { width: 100%; justify-content: center; min-height: 44px; }
}