/* Customer-only compact catalog/header/forms. 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; }

    main.flex-grow-1 { padding-top: 1rem !important; padding-bottom: 1.25rem !important; }
    main.flex-grow-1 > .container { padding-left: .75rem; padding-right: .75rem; }
    main .breadcrumb { font-size: .75rem; margin-bottom: .75rem; row-gap: .25rem; }
    main h1.h3 { font-size: 1.22rem; line-height: 1.3; margin-bottom: 1rem !important; }
    main h1.h3 .bi { font-size: 1.05rem; }
    .card.card-custom { border-radius: .875rem; }
    .card.card-custom .card-header { padding: .75rem .875rem !important; }
    .card.card-custom .card-header h5,
    .card.card-custom h5.fw-bold { font-size: 1rem; line-height: 1.3; }
    .card.card-custom .card-body { padding: .875rem !important; }
    .form-label { font-size: .875rem; line-height: 1.35; }
    .form-control, .input-group-text { font-size: .9rem; }
    textarea.form-control { min-height: 72px; }

    #formCheckout .row.g-4,
    body:has(#formProfil) .row.g-4 { --bs-gutter-y: 1rem; }
    #formCheckout .alert.alert-primary { padding: .75rem !important; margin-bottom: .875rem !important; }
    #formCheckout .alert.alert-primary > .d-flex { align-items: flex-start !important; gap: .625rem; }
    #formCheckout .alert.alert-primary > .d-flex > .d-flex { min-width: 0; align-items: flex-start !important; }
    #formCheckout .alert.alert-primary .fs-4 { font-size: 1.15rem !important; }
    #formCheckout .alert.alert-primary .fw-bold.text-body { font-size: .95rem !important; line-height: 1.25; overflow-wrap: anywhere; }
    #formCheckout .alert.alert-primary .small { font-size: .78rem; line-height: 1.35; }
    #formCheckout .alert.alert-primary .btn { flex: 0 0 auto; padding: .35rem .55rem !important; font-size: .78rem; line-height: 1.2; white-space: normal; max-width: 110px; }
    #formCheckout .alert.alert-primary .badge { display: inline-block; margin-left: 0 !important; margin-top: .2rem; font-size: .68rem; }
    #formCheckout .sticky-top { position: static !important; }
    #formCheckout .table-responsive { overflow: visible; }
    #formCheckout table.table-sm { font-size: .82rem; }
    #formCheckout .fs-4 { font-size: 1.25rem !important; }
    #formCheckout .alert-info { font-size: .78rem; line-height: 1.45; }

    body:has(#formProfil) .d-flex.flex-wrap.justify-content-between.align-items-center.mb-4 { gap: .75rem !important; margin-bottom: 1rem !important; }
    body:has(#formProfil) .d-flex.flex-wrap.justify-content-between.align-items-center.mb-4 > div { width: 100%; }
    body:has(#formProfil) .d-flex.flex-wrap.justify-content-between.align-items-center.mb-4 h1.h3 { margin-bottom: .35rem !important; }
    body:has(#formProfil) .d-flex.flex-wrap.justify-content-between.align-items-center.mb-4 p { font-size: .78rem; line-height: 1.4; }
    body:has(#formProfil) .d-flex.flex-wrap.justify-content-between.align-items-center.mb-4 > a { width: 100%; min-height: 42px; display: inline-flex; align-items: center; justify-content: center; }
    #formProfil .row.g-3 { --bs-gutter-y: .75rem; }
    #formProfil .mb-4 { margin-bottom: 1rem !important; }
    #formProfil .alert { font-size: .78rem; line-height: 1.45; }
    #formProfil .d-flex.align-items-center.gap-2 { flex-direction: column; align-items: stretch !important; }
    #formProfil .d-flex.align-items-center.gap-2 .btn { width: 100%; min-height: 44px; }
    body:has(#formProfil) .col-lg-4 .card.card-custom { padding: 1rem !important; }
    body:has(#formProfil) .col-lg-4 .fs-2 { font-size: 1.5rem !important; }
    body:has(#formProfil) .col-lg-4 h5 { font-size: 1rem; }
    body:has(#formProfil) .col-lg-4 .badge { white-space: normal; line-height: 1.35; }

    body:has(a[href$="order/riwayat"]):has(table) main > .container > .d-flex.justify-content-between.align-items-center.mb-4 { gap: .75rem; margin-bottom: 1rem !important; }
    body:has(a[href$="order/riwayat"]):has(table) main > .container > .d-flex.justify-content-between.align-items-center.mb-4 h1 { max-width: calc(100% - 52px); }
    body:has(a[href$="order/riwayat"]):has(table) main > .container > .d-flex.justify-content-between.align-items-center.mb-4 > a.btn { width: 44px; min-width: 44px; height: 44px; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center; font-size: 0; border-radius: .75rem; }
    body:has(a[href$="order/riwayat"]):has(table) main > .container > .d-flex.justify-content-between.align-items-center.mb-4 > a.btn .bi { font-size: 1.1rem; margin: 0 !important; }
    body:has(a[href$="order/riwayat"]):has(table) form[action$="order/riwayat"] .form-control { font-size: .85rem; text-overflow: ellipsis; }
    body:has(a[href$="order/riwayat"]):has(table) form[action$="order/riwayat"] .btn-primary { min-height: 42px; }
    body:has(a[href$="order/riwayat"]):has(table) table { display: block; width: 100%; }
    body:has(a[href$="order/riwayat"]):has(table) thead { display: none; }
    body:has(a[href$="order/riwayat"]):has(table) tbody { display: block; }
    body:has(a[href$="order/riwayat"]):has(table) tbody tr { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .35rem .75rem; padding: .85rem; border-bottom: 1px solid var(--pnl-border); }
    body:has(a[href$="order/riwayat"]):has(table) tbody td { display: block; padding: 0 !important; border: 0; min-width: 0; text-align: left !important; overflow-wrap: anywhere; }
    body:has(a[href$="order/riwayat"]):has(table) tbody td:nth-child(1) { grid-column: 1 / 2; grid-row: 1; }
    body:has(a[href$="order/riwayat"]):has(table) tbody td:nth-child(2) { grid-column: 1 / 2; grid-row: 2; color: var(--pnl-text-muted); }
    body:has(a[href$="order/riwayat"]):has(table) tbody td:nth-child(3) { grid-column: 1 / 2; grid-row: 3; }
    body:has(a[href$="order/riwayat"]):has(table) tbody td:nth-child(4) { grid-column: 2 / 3; grid-row: 1 / 3; align-self: start; justify-self: end; text-align: right !important; font-size: .9rem; max-width: 130px; }
    body:has(a[href$="order/riwayat"]):has(table) tbody td:nth-child(5) { grid-column: 1 / 2; grid-row: 4; }
    body:has(a[href$="order/riwayat"]):has(table) tbody td:nth-child(6) { grid-column: 2 / 3; grid-row: 3 / 5; align-self: end; justify-self: end; }
    body:has(a[href$="order/riwayat"]):has(table) tbody td:nth-child(6) .btn { width: 44px; height: 44px; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center; font-size: 0; }
    body:has(a[href$="order/riwayat"]):has(table) tbody td:nth-child(6) .btn .bi { font-size: 1rem; margin: 0 !important; }
    body:has(a[href$="order/riwayat"]):has(table) tbody .badge { white-space: normal; line-height: 1.35; }

    .modal .modal-dialog { margin: .75rem; }
    .modal .modal-content { border-radius: .875rem !important; }
    .modal .modal-header { padding: .75rem .875rem !important; }
    .modal .modal-title { font-size: 1rem; line-height: 1.3; }
    .modal .modal-body { padding: .875rem !important; }
    .modal .modal-body .alert { font-size: .78rem; line-height: 1.45; padding: .65rem .75rem !important; }
    .modal .modal-body .input-group { width: 100%; }
    .modal .modal-body .input-group-text { flex: 0 0 42px; justify-content: center; }
    .modal .modal-body .input-group .form-control { min-width: 0; flex: 1 1 auto; width: 1%; }
    .modal .modal-footer { padding: .75rem .875rem !important; display: grid !important; grid-template-columns: 1fr 1fr; gap: .5rem !important; }
    .modal .modal-footer .btn { width: 100%; min-height: 44px; margin: 0 !important; padding-left: .5rem !important; padding-right: .5rem !important; }
    .modal .modal-footer #btnSimpanDanCheckout { font-size: 0; }
    .modal .modal-footer #btnSimpanDanCheckout::after { content: 'Checkout'; font-size: .95rem; }
    .modal .modal-footer #btnSimpanDanCheckout .bi { font-size: .95rem; margin-right: .35rem !important; }
}

@media (max-width: 991.98px) {
    .customer-navbar { padding-top: .5rem !important; padding-bottom: .5rem !important; }
    .customer-navbar > .container { flex-wrap: nowrap; gap: .375rem; padding-left: .625rem; padding-right: .625rem; }
    .customer-navbar .customer-brand-logo { display: none !important; }
    .customer-navbar .mobile-header-search { display: block !important; min-width: 0; margin-left: 0 !important; margin-right: .25rem !important; }
    .customer-navbar .mobile-header-search .search-input-group { border-width: 1.5px; min-height: 42px; box-shadow: none; }
    .customer-navbar .mobile-header-search .search-input-field { padding: .45rem .65rem; font-size: .9rem; min-width: 0; }
    .customer-navbar .mobile-header-search .search-submit-btn { padding: .45rem .75rem; min-width: 42px; }
    .customer-navbar .mobile-header-actions { margin-left: 0 !important; margin-right: 0 !important; flex: 0 0 auto; }
    .customer-navbar .mobile-header-actions .cart-header-btn { width: 42px; height: 42px; min-width: 42px; padding: 0; justify-content: center; }
    .customer-navbar .navbar-toggler { flex: 0 0 42px; width: 42px; height: 42px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
    .customer-navbar { position: sticky; }
    .customer-navbar > .container { position: relative; }
    .customer-navbar #navCustomer { position: absolute; top: calc(100% + .15rem); right: .625rem; left: auto; width: min(320px, calc(100vw - 1.25rem)); padding: .75rem; z-index: 1050; background-color: #ffffff; border-radius: .875rem; border: 1px solid var(--pnl-border, #e2e8f0); box-shadow: 0 8px 24px rgba(0,0,0,.12); }
    .customer-navbar #navCustomer.collapsing { transition: none; }
    .customer-navbar #navCustomer .search-bar-container { display: none; }
    .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 .cart-header-btn.d-none.d-lg-inline-flex { display: none !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 { display: none !important; }
    .customer-navbar #navCustomer .user-account-dropdown .dropdown-menu { position: static !important; transform: none !important; inset: auto !important; display: block !important; width: 100%; max-width: 100%; margin-top: 0 !important; border: 1px solid var(--pnl-border) !important; box-shadow: var(--pnl-card-shadow) !important; }
    .customer-navbar #navCustomer .user-account-dropdown .dropdown-menu li:first-child { background: #f8fafc; }
    .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; }
    /* Wrapper tombol Masuk & Daftar: sejajar 1 baris 50:50 */
    .customer-navbar #navCustomer > .d-flex:last-child > .d-flex.align-items-center.gap-2 { flex-direction: row !important; align-items: stretch !important; gap: .5rem !important; width: 100%; }
    .customer-navbar #navCustomer > .d-flex:last-child > .d-flex.align-items-center.gap-2 > .btn { flex: 1 1 0 !important; width: 50% !important; min-width: 0 !important; padding-left: .5rem !important; padding-right: .5rem !important; font-size: .85rem !important; }
}