:root {
    --jrmsu-navy: #102a43;
    --jrmsu-blue: #1d4ed8;
    --jrmsu-gold: #f59e0b;
    --jrmsu-green: #0f766e;
    --surface: #f4f7fb;
    --border: #dbe4ee;
    --sidebar-width: 280px;
}

html { scroll-behavior: smooth; }
body { background: var(--surface); color: #243b53; font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { text-underline-offset: .18em; }
img { max-width: 100%; }

.brand-logo { width: 44px; height: 44px; object-fit: contain; border-radius: 50%; background: #fff; }
.brand-logo-lg { width: 86px; height: 86px; object-fit: contain; border-radius: 50%; background: #fff; box-shadow: 0 12px 35px rgba(16,42,67,.18); }

.public-navbar { backdrop-filter: blur(16px); background: rgba(255,255,255,.92); border-bottom: 1px solid rgba(219,228,238,.85); }
.hero-section { min-height: 78vh; display: flex; align-items: center; background: radial-gradient(circle at 88% 15%, rgba(245,158,11,.18), transparent 32%), linear-gradient(135deg, #eff6ff, #fff 55%, #ecfeff); }
.hero-kicker { color: var(--jrmsu-blue); letter-spacing: .12em; text-transform: uppercase; font-weight: 800; font-size: .76rem; }
.hero-title { font-size: clamp(2.4rem, 6vw, 5.3rem); line-height: .98; letter-spacing: -.055em; color: var(--jrmsu-navy); }
.hero-card { border: 0; border-radius: 2rem; box-shadow: 0 26px 70px rgba(16,42,67,.15); overflow: hidden; }
.hero-card .visual { min-height: 420px; background: linear-gradient(145deg, #153e75, #0f766e); display: grid; place-items: center; position: relative; }
.hero-card .visual::before, .hero-card .visual::after { content: ""; position: absolute; border-radius: 999px; background: rgba(255,255,255,.09); }
.hero-card .visual::before { width: 230px; height: 230px; top: -70px; right: -55px; }
.hero-card .visual::after { width: 150px; height: 150px; left: -40px; bottom: -40px; }
.section-title { color: var(--jrmsu-navy); letter-spacing: -.03em; }
.feature-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 1rem; background: #e0ecff; color: var(--jrmsu-blue); font-size: 1.25rem; }

.app-sidebar { width: var(--sidebar-width); min-height: 100vh; position: fixed; inset: 0 auto 0 0; background: #0b1f33; color: #fff; z-index: 1030; overflow-y: auto; }
.app-sidebar .nav-link { color: #b8c9d9; padding: .78rem 1rem; border-radius: .8rem; display: flex; align-items: center; gap: .8rem; font-weight: 600; }
.app-sidebar .nav-link:hover, .app-sidebar .nav-link.active { color: #fff; background: rgba(255,255,255,.1); }
.app-sidebar .nav-link i { width: 1.25rem; text-align: center; }
.app-main { margin-left: var(--sidebar-width); min-height: 100vh; }
.app-topbar { min-height: 74px; background: rgba(255,255,255,.92); border-bottom: 1px solid var(--border); backdrop-filter: blur(14px); position: sticky; top: 0; z-index: 1020; }
.desktop-topbar { display: flex; min-height: 92px; padding-top: 1.1rem; padding-bottom: 1.1rem; }
.mobile-topbar { display: none; }
.page-shell { padding: 1.5rem; }

.surface-card { border: 1px solid var(--border); border-radius: 1.15rem; box-shadow: 0 10px 28px rgba(16,42,67,.055); background: #fff; }
.stat-card { border: 0; border-radius: 1.15rem; overflow: hidden; box-shadow: 0 10px 28px rgba(16,42,67,.065); }
.stat-icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 1rem; font-size: 1.35rem; background: #edf4ff; color: var(--jrmsu-blue); }
.table-card .table { margin-bottom: 0; }
.table-card .table > :not(caption) > * > * { padding: .9rem .85rem; vertical-align: middle; }
.table-card thead th { color: #627d98; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; border-bottom-width: 1px; white-space: nowrap; }

.product-card { border: 1px solid var(--border); border-radius: 1.2rem; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; height: 100%; }
.product-card:hover { transform: translateY(-4px); box-shadow: 0 18px 42px rgba(16,42,67,.12); }
.product-image { aspect-ratio: 4/3; width: 100%; object-fit: cover; background: linear-gradient(145deg, #e6fffa, #dbeafe); }
.product-placeholder { aspect-ratio: 4/3; display: grid; place-items: center; background: linear-gradient(145deg, #e6fffa, #dbeafe); color: var(--jrmsu-navy); }
.product-placeholder img { width: 42%; opacity: .9; }
.price { color: var(--jrmsu-green); font-weight: 800; }

.auth-page { min-height: 100vh; background: radial-gradient(circle at 15% 15%, rgba(29,78,216,.14), transparent 35%), radial-gradient(circle at 85% 85%, rgba(15,118,110,.14), transparent 35%), #f8fafc; display: grid; place-items: center; padding: 1rem; }
.auth-card { max-width: 980px; width: 100%; border: 0; border-radius: 1.5rem; overflow: hidden; box-shadow: 0 26px 70px rgba(16,42,67,.14); }
.auth-brand-panel { background: linear-gradient(145deg, #102a43, #0f766e); color: #fff; min-height: 620px; }
.form-control, .form-select { min-height: 46px; border-color: #cbd5e1; border-radius: .75rem; }
textarea.form-control { min-height: 110px; }
.btn { border-radius: .72rem; font-weight: 700; }
.btn-primary { background: var(--jrmsu-blue); border-color: var(--jrmsu-blue); }
.btn-primary:hover { background: #1e40af; border-color: #1e40af; }

/* Compact order status badges */
.order-status-badge {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    justify-content: center;
    flex: 0 0 auto;
    gap: .35rem;
    width: max-content;
    max-width: 100%;
    min-height: 1.75rem;
    padding: .35rem .65rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    vertical-align: middle;
}
.order-status-badge .bi { flex: 0 0 auto; font-size: .82rem; }
.order-status-badge--pending { color: #9a3412; background: #fff7ed; border-color: #fed7aa; }
.order-status-badge--confirmed { color: #155e75; background: #ecfeff; border-color: #a5f3fc; }
.order-status-badge--preparing { color: #1e40af; background: #eff6ff; border-color: #bfdbfe; }
.order-status-badge--ready,
.order-status-badge--delivered { color: #065f46; background: #ecfdf5; border-color: #a7f3d0; }
.order-status-badge--out-for-delivery { color: #5b21b6; background: #f5f3ff; border-color: #ddd6fe; }
.order-status-badge--cancelled { color: #991b1b; background: #fef2f2; border-color: #fecaca; }
.order-status-badge--neutral { color: #334155; background: #f8fafc; border-color: #cbd5e1; }

.status-timeline { position: relative; padding-left: 1.35rem; }
.status-timeline::before { content: ""; position: absolute; left: .35rem; top: .35rem; bottom: .35rem; width: 2px; background: var(--border); }
.status-step { position: relative; padding: 0 0 1.2rem 1rem; }
.status-step::before { content: ""; position: absolute; width: .72rem; height: .72rem; border-radius: 50%; background: var(--jrmsu-blue); left: -1.35rem; top: .32rem; box-shadow: 0 0 0 4px #dbeafe; }

.cart-sticky { position: sticky; top: 94px; }
.empty-state { text-align: center; padding: 3.5rem 1.25rem; color: #627d98; }
.empty-state i { font-size: 3rem; display: block; margin-bottom: .75rem; color: #9fb3c8; }

@media (max-width: 991.98px) {
    .app-sidebar { display: none; }
    .app-main { margin-left: 0; }
    .desktop-topbar { display: none; }
    .mobile-topbar { display: flex; padding-top: .75rem; padding-bottom: .75rem; }
    .page-shell { padding: 1rem; }
    .hero-section { min-height: auto; padding: 5rem 0 3rem; }
    .hero-card .visual { min-height: 310px; }
    .auth-brand-panel { min-height: 280px; }
    .cart-sticky { position: static; }
}

@media (max-width: 575.98px) {
    .hero-title { font-size: 2.55rem; }
    .surface-card, .stat-card, .product-card { border-radius: .95rem; }
    .table-responsive { border-radius: .8rem; }
    .btn-mobile-block { width: 100%; }
    .page-shell { padding: .75rem; }
    .app-topbar { min-height: 64px; }
}

/* Shared icon-enhanced fields */
.field-icon { position: relative; min-width: 0; }
.field-icon-symbol { position: absolute; left: .95rem; top: 50%; transform: translateY(-50%); z-index: 4; color: #718096; pointer-events: none; line-height: 1; }
.field-icon > .form-control,
.field-icon > .form-select { padding-left: 2.75rem; }
.field-icon > textarea.form-control { padding-top: .85rem; }
.field-icon > textarea.form-control + .field-icon-symbol,
.field-icon:has(textarea) .field-icon-symbol { top: 1rem; transform: none; }
/* Accessible custom file picker */
.file-picker {
    position: relative;
    min-width: 0;
}
.file-picker-input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
.file-picker-shell {
    min-height: 68px;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: .85rem;
    padding: .7rem .75rem;
    border: 1px solid #cbd5e1;
    border-radius: .85rem;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.file-picker-shell:hover {
    border-color: #9db4d0;
    background: #fbfdff;
}
.file-picker:focus-within .file-picker-shell,
.file-picker.is-dragging .file-picker-shell {
    border-color: #7aa2f7;
    box-shadow: 0 0 0 .22rem rgba(29,78,216,.12);
}
.file-picker.is-dragging .file-picker-shell { background: #f3f7ff; }
.file-picker.has-file .file-picker-shell { padding-right: 3rem; }
.file-picker.is-invalid .file-picker-shell {
    border-color: #dc3545;
    box-shadow: 0 0 0 .22rem rgba(220,53,69,.1);
}
.file-picker-thumbnail {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: .7rem;
    background: #edf4ff;
    color: var(--jrmsu-blue);
    font-size: 1.15rem;
}
.file-picker-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.file-picker-details {
    min-width: 0;
    display: grid;
    gap: .18rem;
}
.file-picker-name {
    overflow: hidden;
    color: var(--jrmsu-navy);
    font-size: .9rem;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.file-picker-meta {
    min-height: 1em;
    overflow: hidden;
    color: #718096;
    font-size: .75rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.file-picker-action {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .55rem .8rem;
    border: 1px solid #b8cae5;
    border-radius: .68rem;
    background: #f8fbff;
    color: var(--jrmsu-blue);
    font-size: .82rem;
    font-weight: 800;
    white-space: nowrap;
}
.file-picker-shell:hover .file-picker-action { background: #edf4ff; }
.file-picker-clear {
    position: absolute;
    top: .35rem;
    right: .35rem;
    z-index: 2;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: #627d98;
    box-shadow: 0 2px 8px rgba(16,42,67,.16);
}
.file-picker-clear:hover { color: #b42318; background: #fff5f5; }
.file-picker-clear:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 .2rem rgba(29,78,216,.16), 0 2px 8px rgba(16,42,67,.16);
}
.file-picker-clear[hidden] { display: none !important; }

@media (max-width: 575.98px) {
    .file-picker-shell {
        grid-template-columns: 40px minmax(0, 1fr);
        min-height: 76px;
        gap: .7rem;
    }
    .file-picker-thumbnail { width: 40px; height: 40px; }
    .file-picker-action {
        grid-column: 1 / -1;
        width: 100%;
    }
}

.form-control:focus,
.form-select:focus { border-color: #7aa2f7; box-shadow: 0 0 0 .22rem rgba(29,78,216,.12); }
.input-group-text { border-color: #cbd5e1; background: #f8fafc; color: #627d98; }
.min-w-0 { min-width: 0; }
.field-icon.has-password-toggle > .form-control { padding-right: 3rem; }
.password-toggle {
    width: 46px;
    min-width: 46px;
    min-height: 46px;
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    color: #627d98;
    display: inline-grid;
    place-items: center;
    padding: 0;
    line-height: 1;
    cursor: pointer;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.password-toggle:hover { background: #eef2f7; color: var(--jrmsu-blue); }
.password-toggle:focus-visible { outline: 0; border-color: #7aa2f7; box-shadow: 0 0 0 .22rem rgba(29,78,216,.12); z-index: 6; }
.password-toggle-group { border-radius: 0 .75rem .75rem 0; }
.input-group > .password-toggle-group { margin-left: -1px; }
.password-toggle-overlay {
    position: absolute;
    top: 50%;
    right: 0;
    z-index: 5;
    transform: translateY(-50%);
    border: 0;
    border-radius: 0 .75rem .75rem 0;
    background: transparent;
}
.password-toggle-overlay:hover { background: rgba(238,242,247,.85); }

.auth-home-button {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1060;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(203,213,225,.9);
    border-radius: 50%;
    background: rgba(255,255,255,.94);
    color: var(--jrmsu-navy);
    box-shadow: 0 10px 28px rgba(16,42,67,.14);
    text-decoration: none;
    backdrop-filter: blur(12px);
}
.auth-home-button:hover { color: var(--jrmsu-blue); background: #fff; transform: translateY(-1px); }
.auth-home-button:focus-visible { outline: 0; box-shadow: 0 0 0 .22rem rgba(29,78,216,.18), 0 10px 28px rgba(16,42,67,.14); }

/* Responsive interaction and layout improvements */
.btn { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; }
.btn-sm { min-height: 34px; }
.table-responsive { overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch; }
.table-card { min-width: 0; }
.modal-content { border: 0; border-radius: 1.1rem; }
.offcanvas { width: min(88vw, 340px) !important; }
.navbar-collapse .btn { white-space: nowrap; }

/* Consistent spacing for adjacent actions */
.table-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: .625rem;
}
.table-actions > form {
    display: inline-flex;
    margin: 0;
}
.action-cell {
    min-width: 118px;
    white-space: nowrap;
}
.modal-footer {
    gap: .75rem;
}
.modal-footer > * {
    margin: 0;
}

@media (max-width: 767.98px) {
    .responsive-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
    .responsive-table,
    .responsive-table tbody { display: block; width: 100%; }
    .responsive-table tbody { padding: .75rem; }
    .responsive-table tbody tr {
        display: block;
        border: 1px solid var(--border);
        border-radius: .9rem;
        background: #fff;
        overflow: hidden;
        margin-bottom: .75rem;
        box-shadow: 0 6px 18px rgba(16,42,67,.045);
    }
    .responsive-table tbody tr:last-child { margin-bottom: 0; }
    .responsive-table tbody td {
        display: grid;
        grid-template-columns: minmax(92px, .42fr) minmax(0, 1fr);
        gap: 1rem;
        align-items: center;
        width: 100%;
        padding: .75rem;
        text-align: right !important;
        border-bottom: 1px solid #edf2f7;
        overflow-wrap: anywhere;
    }
    .responsive-table tbody td:last-child { border-bottom: 0; }
    .responsive-table tbody td::before {
        content: attr(data-label);
        color: #627d98;
        font-size: .72rem;
        font-weight: 800;
        letter-spacing: .04em;
        text-transform: uppercase;
        text-align: left;
    }
    .responsive-table tbody td > .d-flex,
    .responsive-table tbody td > form,
    .responsive-table tbody td > .d-inline-flex,
    .responsive-table tbody td > .table-actions { justify-content: flex-end !important; flex-wrap: wrap; }
    .responsive-table tbody td > .table-actions { width: 100%; }
    .responsive-table tbody td[colspan] { display: block; text-align: center !important; padding: 0; }
    .responsive-table tbody td[colspan]::before { display: none; }
    .table-card > .table-responsive { overflow: visible; }
    .modal-dialog { margin: .75rem; }
    .modal-footer { flex-wrap: wrap; }
    .modal-footer .btn { flex: 1 1 140px; }
    .page-shell > .d-flex.flex-column > .btn,
    .page-shell > .d-flex.flex-column > a.btn { width: 100%; align-self: stretch !important; }
}

@media (max-width: 575.98px) {
    body { overflow-x: hidden; }
    input.form-control,
    select.form-select,
    textarea.form-control { font-size: 16px; }
    .auth-page { padding: 0; align-items: stretch; }
    .auth-home-button { top: .75rem; right: .75rem; width: 42px; height: 42px; }
    .auth-card { min-height: 100vh; border-radius: 0; }
    .auth-brand-panel { min-height: 220px; }
    .auth-brand-panel .display-6 { font-size: 1.8rem; }
    .brand-logo-lg { width: 68px; height: 68px; }
    .surface-card.p-4,
    .stat-card.p-4,
    .product-card .p-4 { padding: 1rem !important; }
    .page-shell .row.g-4 { --bs-gutter-x: 1rem; --bs-gutter-y: 1rem; }
    .product-card:hover { transform: none; }
    .product-image,
    .product-placeholder { aspect-ratio: 16 / 11; }
    .d-flex.flex-sm-row { align-items: stretch; }
    .d-flex.flex-sm-row > .btn { width: 100%; }
    .navbar-brand { font-size: .95rem; }
    .navbar-brand .brand-logo { width: 38px; height: 38px; }
    .navbar-collapse { padding-top: .75rem; }
    .navbar-collapse .btn,
    .navbar-collapse .nav-link { width: 100%; text-align: center; }
    .responsive-table tbody { padding: .5rem; }
    .responsive-table tbody td { grid-template-columns: minmax(82px, .38fr) minmax(0, 1fr); gap: .65rem; padding: .7rem; }
    .cart-sticky { top: auto; }
}

/* Desktop-wide layout, adaptive action rows, and confirmation dialog */
body { min-width: 0; overflow-x: clip; }
.app-main,
.page-shell,
.page-shell > * { min-width: 0; }
.page-shell { width: 100%; max-width: 1800px; margin-inline: auto; }
.table-responsive { width: 100%; overflow-x: auto; }
.table-card .table { width: 100%; }

.cart-line,
.pos-line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: .75rem;
    align-items: center;
}
.cart-line-main,
.pos-line-main { min-width: 0; }
.cart-line-quantity { width: 76px; }
.pos-line-quantity { width: 65px; }
.cart-line-remove,
.pos-line-remove { flex: 0 0 auto; }

.confirmation-dialog {
    width: min(480px, calc(100vw - 2rem));
    max-width: none;
    padding: 0;
    border: 0;
    border-radius: 1.1rem;
    background: transparent;
    color: inherit;
    box-shadow: 0 24px 70px rgba(16,42,67,.22);
}
.confirmation-dialog::backdrop { background: rgba(8, 24, 40, .58); backdrop-filter: blur(2px); }
.confirmation-dialog-panel { overflow: hidden; border-radius: 1.1rem; background: #fff; }
.confirmation-dialog-header,
.confirmation-dialog-body,
.confirmation-dialog-footer { display: flex; align-items: center; padding: 1rem 1.25rem; }
.confirmation-dialog-header { justify-content: space-between; gap: 1rem; padding-bottom: .5rem; }
.confirmation-dialog-body { align-items: flex-start; gap: .9rem; font-size: 1rem; line-height: 1.6; overflow-wrap: anywhere; }
.confirmation-dialog-footer { justify-content: flex-end; flex-wrap: wrap; gap: .75rem; padding-top: .5rem; }
.confirmation-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #e8f0ff;
    color: var(--jrmsu-blue);
    font-size: 1.2rem;
}
.confirmation-icon.is-danger { background: #fee2e2; color: #b91c1c; }

@media (min-width: 992px) and (max-width: 1199.98px) {
    :root { --sidebar-width: 240px; }
    .app-sidebar { padding-inline: .85rem !important; }
    .app-sidebar .nav-link { padding-inline: .8rem; }
    .page-shell { padding: 1.25rem; }
}

@media (min-width: 1200px) {
    .page-shell { padding: 1.75rem; }
    .surface-card,
    .stat-card { min-width: 0; }
}

@media (min-width: 1400px) {
    .page-shell { padding: 2rem 2.25rem; }
    .table-card .table > :not(caption) > * > * { padding: 1rem; }
}

@media (min-width: 1600px) {
    [data-product-column] { width: 25%; }
    .hero-section .container,
    .public-navbar .container,
    footer .container { max-width: 1500px; }
}

@media (max-width: 767.98px) {
    .responsive-table tbody td > form .form-select,
    .responsive-table tbody td > .d-inline-flex .form-select {
        flex: 1 1 130px;
        width: auto !important;
        min-width: 0;
    }
    .responsive-table tbody td > form .btn,
    .responsive-table tbody td > .d-inline-flex .btn { flex: 0 0 auto; }
}

@media (max-width: 575.98px) {
    .cart-line,
    .pos-line {
        grid-template-columns: minmax(0, 1fr) 72px auto;
        gap: .5rem;
    }
    .cart-line-quantity,
    .pos-line-quantity { width: 100%; }
    .confirmation-dialog-footer .btn { flex: 1 1 0; }
}

@media (max-width: 399.98px) {
    .cart-line,
    .pos-line { grid-template-columns: minmax(0, 1fr) auto; }
    .cart-line-main,
    .pos-line-main { grid-column: 1 / -1; }
    .cart-line-quantity,
    .pos-line-quantity { width: 84px; }
}

/* User avatars */
.user-identity {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 0;
}
.user-identity > .min-w-0 { flex: 1 1 auto; }
.user-avatar,
.sidebar-user-avatar {
    flex: 0 0 auto;
    object-fit: cover;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--border);
}
.user-avatar {
    width: 48px;
    height: 48px;
    box-shadow: 0 5px 14px rgba(16,42,67,.1);
}
.sidebar-user-avatar {
    width: 42px;
    height: 42px;
    border-color: rgba(255,255,255,.28);
}

@media (max-width: 767.98px) {
    .responsive-table tbody td .user-identity {
        width: 100%;
        justify-content: flex-end;
        text-align: left;
    }
}

/* Account settings */
.settings-avatar {
    width: clamp(96px, 10vw, 132px);
    height: clamp(96px, 10vw, 132px);
    flex: 0 0 auto;
    object-fit: cover;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--border);
    box-shadow: 0 12px 30px rgba(16,42,67,.14);
}
.settings-icon {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: grid;
    place-items: center;
    border-radius: .85rem;
    background: #e8f0ff;
    color: var(--jrmsu-blue);
    font-size: 1.15rem;
}

@media (max-width: 575.98px) {
    .settings-avatar {
        width: 104px;
        height: 104px;
        align-self: center;
    }
}

/* Customer menu and cart refinement */
:root {
    --surface-strong: #ffffff;
    --surface-muted: #f8fafc;
    --text-muted: #64748b;
    --shadow-soft: 0 12px 32px rgba(15, 42, 67, .075);
    --shadow-hover: 0 22px 48px rgba(15, 42, 67, .14);
}

.bi { line-height: 1; }
.app-sidebar .nav-link {
    min-height: 48px;
    padding: .8rem .95rem;
    border: 1px solid transparent;
    transition: color .18s ease, background-color .18s ease, border-color .18s ease, transform .18s ease;
}
.app-sidebar .nav-link:hover { transform: translateX(2px); }
.app-sidebar .nav-link.active {
    background: rgba(255, 255, 255, .115);
    border-color: rgba(255, 255, 255, .075);
    box-shadow: inset 3px 0 0 #60a5fa;
}
.app-sidebar .nav-link i {
    width: 1.5rem;
    height: 1.5rem;
    flex: 0 0 1.5rem;
    display: inline-grid;
    place-items: center;
    font-size: 1.02rem;
}
.app-sidebar .nav-link span { line-height: 1.2; }

.topbar-heading { min-width: 0; line-height: 1.25; }
.topbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .85rem;
}
.topbar-icon-button {
    width: 44px;
    height: 44px;
    min-height: 44px;
    flex: 0 0 44px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    border: 1px solid #cbd8e6;
    border-radius: .9rem;
    background: #fff;
    color: var(--jrmsu-navy);
    box-shadow: 0 5px 14px rgba(15, 42, 67, .06);
    text-decoration: none;
    transition: color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.topbar-icon-button:hover {
    color: var(--jrmsu-blue);
    border-color: #9db7ea;
    box-shadow: 0 9px 22px rgba(29, 78, 216, .12);
    transform: translateY(-1px);
}
.topbar-icon-button:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 .22rem rgba(29, 78, 216, .14);
}
.topbar-icon-button > .bi { font-size: 1.1rem; }
.topbar-icon-spacer { width: 44px; height: 44px; flex: 0 0 44px; }
.cart-count-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    border: 2px solid #fff;
    border-radius: 999px;
    background: #dc2626;
    color: #fff;
    font-size: .67rem;
    font-weight: 800;
    line-height: 1;
}
.cart-count-badge[hidden] { display: none !important; }
.topbar-date {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    color: var(--text-muted);
    font-size: .88rem;
    font-weight: 600;
    white-space: nowrap;
}
.topbar-date i { color: #7c93ad; }


.cart-hover-preview {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.cart-hover-preview::after {
    content: "";
    position: absolute;
    top: 100%;
    right: 0;
    width: min(370px, calc(100vw - 2rem));
    height: .85rem;
}
.cart-preview-panel {
    position: absolute;
    top: calc(100% + .8rem);
    right: 0;
    z-index: 1080;
    width: min(370px, calc(100vw - 2rem));
    overflow: hidden;
    border: 1px solid #d7e2ee;
    border-radius: 1.15rem;
    background: rgba(255, 255, 255, .985);
    box-shadow: 0 24px 58px rgba(15, 42, 67, .18);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-7px) scale(.985);
    transform-origin: top right;
    transition: opacity .16s ease, visibility .16s ease, transform .16s ease;
}
.cart-hover-preview:hover .cart-preview-panel,
.cart-hover-preview:focus-within .cart-preview-panel,
.cart-preview-panel.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}
.cart-preview-header {
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.1rem;
    border-bottom: 1px solid #e4ebf3;
    background: linear-gradient(135deg, #fff, #f6f9fd);
}
.cart-preview-eyebrow {
    margin-bottom: .2rem;
    color: var(--jrmsu-blue);
    font-size: .67rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}
.cart-preview-title {
    margin: 0;
    color: var(--jrmsu-navy);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -.02em;
}
.cart-preview-count {
    flex: 0 0 auto;
    padding: .35rem .6rem;
    border-radius: 999px;
    background: #e8f0ff;
    color: var(--jrmsu-blue);
    font-size: .72rem;
    font-weight: 800;
}
.cart-preview-items {
    max-height: 292px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}
.cart-preview-item {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    align-items: center;
    gap: .75rem;
    padding: .85rem 1.1rem;
    border-bottom: 1px solid #edf1f6;
}
.cart-preview-item:last-child { border-bottom: 0; }
.cart-preview-item-icon,
.cart-preview-item-image {
    width: 40px;
    height: 40px;
    border-radius: .8rem;
}
.cart-preview-item-icon {
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, #eef6ff, #e5f7f3);
    color: var(--jrmsu-blue);
    font-size: 1rem;
}
.cart-preview-item-image {
    display: block;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    object-fit: cover;
}
.cart-preview-item-copy { min-width: 0; }
.cart-preview-item-name {
    overflow: hidden;
    margin: 0 0 .15rem;
    color: var(--jrmsu-navy);
    font-size: .84rem;
    font-weight: 800;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cart-preview-item-meta {
    overflow: hidden;
    color: var(--text-muted);
    font-size: .72rem;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cart-preview-item-price {
    color: var(--jrmsu-green);
    font-size: .8rem;
    font-weight: 800;
    white-space: nowrap;
}
.cart-preview-more {
    padding: .7rem 1.1rem;
    border-top: 1px solid #edf1f6;
    background: #fafcff;
    color: var(--text-muted);
    font-size: .74rem;
    font-weight: 700;
    text-align: center;
}
.cart-preview-empty {
    display: grid;
    justify-items: center;
    gap: .5rem;
    padding: 2rem 1rem;
    color: var(--text-muted);
    text-align: center;
}
.cart-preview-empty-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 1rem;
    background: #eef4fb;
    color: #7890aa;
    font-size: 1.15rem;
}
.cart-preview-empty strong { color: var(--jrmsu-navy); font-size: .9rem; }
.cart-preview-empty span { max-width: 220px; font-size: .76rem; line-height: 1.45; }
.cart-preview-footer {
    padding: 1rem 1.1rem 1.1rem;
    border-top: 1px solid #e4ebf3;
    background: #fff;
}
.cart-preview-subtotal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .85rem;
    color: var(--text-muted);
    font-size: .8rem;
    font-weight: 700;
}
.cart-preview-subtotal strong { color: var(--jrmsu-navy); font-size: 1rem; }

@media (prefers-reduced-motion: reduce) {
    .cart-preview-panel { transition: none; }
}

.page-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: .65rem;
    color: var(--jrmsu-blue);
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .085em;
    text-transform: uppercase;
}
.page-heading-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}
.page-heading-row h1,
.menu-heading h1 { font-size: clamp(1.85rem, 3vw, 2.4rem); letter-spacing: -.045em; }
.page-heading-action {
    min-width: max-content;
    padding-inline: 1rem;
    background: rgba(255, 255, 255, .72);
}

.menu-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 1.35rem;
    padding: 1.5rem;
    border: 1px solid rgba(203, 216, 230, .9);
    border-radius: 1.35rem;
    background:
        radial-gradient(circle at 88% 18%, rgba(59, 130, 246, .11), transparent 31%),
        linear-gradient(135deg, #fff, #f7fbff);
    box-shadow: var(--shadow-soft);
}
.menu-heading { flex: 1 1 auto; min-width: 0; }
.menu-search {
    position: relative;
    width: min(100%, 470px);
    flex: 0 1 470px;
}
.menu-search .form-control {
    min-height: 56px;
    padding: .75rem 8.3rem .75rem 3rem;
    border-color: #c9d6e5;
    border-radius: 1rem;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 7px 20px rgba(15, 42, 67, .055);
}
.menu-search .form-control::placeholder { color: #8799ad; }
.menu-search .form-control:focus {
    border-color: #78a0ee;
    box-shadow: 0 0 0 .22rem rgba(29, 78, 216, .11), 0 10px 24px rgba(15, 42, 67, .07);
}
.menu-search-icon {
    position: absolute;
    top: 50%;
    left: 1rem;
    z-index: 4;
    transform: translateY(-50%);
    color: #71869e;
    font-size: 1rem;
    pointer-events: none;
}
.menu-search .btn {
    position: absolute;
    top: 6px;
    right: 6px;
    bottom: 6px;
    min-height: 44px;
    padding-inline: 1rem;
    border-radius: .8rem;
    box-shadow: 0 7px 16px rgba(29, 78, 216, .2);
}

.category-filter {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: 1.5rem;
    padding: .2rem .05rem;
    overflow-x: auto;
    scrollbar-width: thin;
}
.category-pill {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    flex: 0 0 auto;
    padding: .5rem .85rem;
    border: 1px solid #c6d3e1;
    border-radius: 999px;
    background: rgba(255, 255, 255, .78);
    color: #435a70;
    font-size: .84rem;
    font-weight: 700;
    text-decoration: none;
    transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.category-pill:hover {
    color: var(--jrmsu-blue);
    border-color: #9db7ea;
    background: #fff;
    transform: translateY(-1px);
}
.category-pill.active {
    color: #fff;
    border-color: var(--jrmsu-blue);
    background: var(--jrmsu-blue);
    box-shadow: 0 8px 18px rgba(29, 78, 216, .21);
}

.menu-grid { --bs-gutter-x: 1.35rem; --bs-gutter-y: 1.35rem; }
.product-card {
    display: flex;
    flex-direction: column;
    border-color: #cfdae6;
    border-radius: 1.25rem;
    box-shadow: 0 8px 24px rgba(15, 42, 67, .06);
}
.product-card:hover {
    border-color: #b7c9db;
    box-shadow: var(--shadow-hover);
}
.product-media {
    position: relative;
    overflow: hidden;
    background: linear-gradient(145deg, #ecfeff, #eaf2ff);
}
.product-image,
.product-placeholder {
    aspect-ratio: 16 / 10;
    transition: transform .3s ease;
}
.product-card:hover .product-image,
.product-card:hover .product-placeholder img { transform: scale(1.025); }
.product-image { display: block; }
.product-placeholder img { width: min(38%, 142px); filter: drop-shadow(0 10px 18px rgba(15, 42, 67, .12)); }
.product-category-badge {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: .35rem .7rem;
    border: 1px solid rgba(255, 255, 255, .75);
    border-radius: 999px;
    background: rgba(255, 255, 255, .9);
    color: #4b637a;
    box-shadow: 0 5px 14px rgba(15, 42, 67, .1);
    backdrop-filter: blur(10px);
    font-size: .72rem;
    font-weight: 800;
}
.product-card-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: .9rem;
    padding: 1.2rem;
}
.product-card-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .9rem;
}
.product-card-heading h2 { line-height: 1.28; }
.product-card-heading .price {
    padding-top: .12rem;
    font-size: .94rem;
}
.product-description {
    min-height: 2.9rem;
    margin: 0;
    font-size: .86rem;
    line-height: 1.65;
}
.product-addons {
    padding: .85rem;
    border: 1px solid #e0e8f1;
    border-radius: .9rem;
    background: #f8fafc;
}
.product-addons-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .55rem;
    color: #334e68;
    font-size: .78rem;
    font-weight: 800;
}
.product-addons-title i { color: #829ab1; }
.product-addon-list { display: grid; gap: .45rem; }
.product-addon-option {
    min-height: 32px;
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: 0;
    padding: .25rem .35rem;
}
.product-addon-option .form-check-input {
    width: 1.05rem;
    height: 1.05rem;
    flex: 0 0 1.05rem;
    margin: 0;
    border-color: #b7c7d8;
}
.product-addon-option .form-check-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    width: 100%;
    color: #435a70;
    font-size: .8rem;
    cursor: pointer;
}
.product-addon-option small { color: var(--jrmsu-green); font-weight: 700; white-space: nowrap; }
.product-purchase-row {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    gap: .7rem;
    margin-top: auto;
    padding-top: .15rem;
}
.quantity-field {
    position: relative;
    display: block;
}
.quantity-field > i {
    position: absolute;
    top: 50%;
    left: .72rem;
    z-index: 2;
    transform: translateY(-50%);
    color: #829ab1;
    pointer-events: none;
}
.quantity-field .form-control {
    min-height: 46px;
    padding: .5rem .55rem .5rem 2rem;
    text-align: center;
    font-weight: 700;
}
.product-add-button { min-height: 46px; box-shadow: 0 8px 18px rgba(29, 78, 216, .18); }

.cart-list-card { overflow: hidden; }
.cart-list-header {
    min-height: 82px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.2rem 1.25rem;
    border-bottom: 1px solid #e3ebf3;
    background: linear-gradient(180deg, #fff, #fbfdff);
}
.cart-list-icon,
.cart-summary-icon {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    color: var(--jrmsu-blue);
    background: #eaf1ff;
}
.cart-list-icon { width: 42px; height: 42px; border-radius: .85rem; }
.cart-list { padding: 0 1.25rem; }
.cart-line {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto 40px;
    gap: 1rem;
    align-items: center;
    padding: 1.15rem 0;
    border-bottom: 1px solid #e6edf4;
}
.cart-line:last-child { border-bottom: 0; }
.cart-line-icon,
.cart-line-image {
    width: 48px;
    height: 48px;
    border-radius: .9rem;
}
.cart-line-icon {
    display: inline-grid;
    place-items: center;
    background: linear-gradient(145deg, #e8f5ff, #eef2ff);
    color: var(--jrmsu-blue);
    font-size: 1.15rem;
}
.cart-line-image {
    display: block;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    object-fit: cover;
}
.cart-line-main { min-width: 0; }
.cart-line-title-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
}
.cart-line-title {
    min-width: 0;
    margin: 0;
    color: var(--jrmsu-navy);
    font-size: .96rem;
    font-weight: 800;
    line-height: 1.35;
}
.cart-line-unit-price {
    color: #7890a7;
    font-size: .72rem;
    white-space: nowrap;
}
.cart-addon-list {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-top: .5rem;
}
.cart-addon-chip {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: .25rem .5rem;
    border: 1px solid #d5e1ec;
    border-radius: 999px;
    background: #f8fafc;
    color: #60758a;
    font-size: .68rem;
    font-weight: 700;
}
.cart-addon-chip.is-standard { color: #718096; }
.cart-line-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
}
.quantity-stepper {
    height: 40px;
    display: grid;
    grid-template-columns: 34px 42px 34px;
    align-items: stretch;
    overflow: hidden;
    border: 1px solid #cbd8e6;
    border-radius: .75rem;
    background: #fff;
}
.quantity-stepper button,
.quantity-stepper input {
    min-width: 0;
    min-height: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #334e68;
}
.quantity-stepper button {
    display: inline-grid;
    place-items: center;
    padding: 0;
    cursor: pointer;
    transition: color .15s ease, background-color .15s ease;
}
.quantity-stepper button:hover { color: var(--jrmsu-blue); background: #eef4ff; }
.quantity-stepper button:focus-visible { outline: 2px solid rgba(29, 78, 216, .35); outline-offset: -2px; }
.quantity-stepper input {
    width: 42px;
    padding: 0;
    border-inline: 1px solid #e0e8f1;
    text-align: center;
    font-size: .83rem;
    font-weight: 800;
    appearance: textfield;
}
.quantity-stepper input::-webkit-inner-spin-button,
.quantity-stepper input::-webkit-outer-spin-button { margin: 0; appearance: none; }
.cart-line-total {
    min-width: 78px;
    color: var(--jrmsu-green);
    font-size: .9rem;
    text-align: right;
    white-space: nowrap;
}
.cart-line-remove {
    width: 40px;
    height: 40px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    border: 1px solid #f1c7c7;
    border-radius: .75rem;
    background: #fff;
    color: #c24141;
    cursor: pointer;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease, transform .15s ease;
}
.cart-line-remove:hover {
    color: #fff;
    border-color: #dc2626;
    background: #dc2626;
    transform: translateY(-1px);
}
.cart-line-remove:focus-visible { outline: 0; box-shadow: 0 0 0 .2rem rgba(220, 38, 38, .13); }
.cart-empty-state { padding-block: 4rem; }
.empty-state-icon {
    width: 62px;
    height: 62px;
    display: inline-grid;
    place-items: center;
    margin: 0 auto 1rem;
    border-radius: 1.1rem;
    background: #eaf1ff;
    color: var(--jrmsu-blue);
}
.empty-state-icon i { margin: 0; color: inherit; font-size: 1.55rem; }

.cart-summary { padding: 1.25rem; }
.cart-summary-heading {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding-bottom: 1.1rem;
    border-bottom: 1px solid #e3ebf3;
}
.cart-summary-icon { width: 46px; height: 46px; border-radius: .9rem; font-size: 1.1rem; }
.cart-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem 0;
    color: #526a80;
}
.cart-summary-row strong { color: var(--jrmsu-navy); font-size: 1.15rem; }
.cart-summary-note {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    margin-bottom: 1rem;
    padding: .8rem;
    border: 1px solid #dce6f0;
    border-radius: .85rem;
    background: #f8fafc;
    color: #687d91;
    font-size: .76rem;
    line-height: 1.55;
}
.cart-summary-note i { margin-top: .12rem; color: #71869e; }
.cart-checkout-button {
    min-height: 52px;
    justify-content: space-between;
    padding-inline: 1rem;
    box-shadow: 0 10px 22px rgba(29, 78, 216, .2);
}
.cart-secure-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    margin-top: .85rem;
    color: #7890a7;
    font-size: .7rem;
    font-weight: 700;
}
.cart-secure-note i { color: var(--jrmsu-green); }

@media (max-width: 1199.98px) {
    .menu-hero { align-items: stretch; }
    .menu-search { flex-basis: 420px; }
    .cart-line { grid-template-columns: 44px minmax(0, 1fr) auto; gap: .8rem; }
    .cart-line-icon,
    .cart-line-image { width: 44px; height: 44px; }
    .cart-line-remove { grid-column: 3; justify-self: end; }
    .cart-line-controls { grid-column: 2 / 3; justify-content: flex-start; margin-top: -.15rem; }
}

@media (max-width: 991.98px) {
    .menu-hero { flex-direction: column; gap: 1.25rem; }
    .menu-search { width: 100%; flex-basis: auto; max-width: none; }
    .page-heading-row { align-items: flex-end; }
    .cart-line {
        grid-template-columns: 48px minmax(0, 1fr) auto 40px;
        gap: 1rem;
    }
    .cart-line-controls { grid-column: auto; justify-content: flex-end; margin-top: 0; }
    .cart-line-remove { grid-column: auto; }
}

@media (max-width: 767.98px) {
    .page-heading-row { align-items: stretch; flex-direction: column; gap: 1rem; }
    .page-heading-action { align-self: flex-start; }
    .menu-hero { padding: 1.2rem; border-radius: 1.15rem; }
    .product-description { min-height: 0; }
    .cart-list { padding-inline: 1rem; }
    .cart-list-header { padding-inline: 1rem; }
    .cart-line {
        grid-template-columns: 44px minmax(0, 1fr) 40px;
        gap: .75rem;
        align-items: start;
    }
    .cart-line-icon,
    .cart-line-image { width: 44px; height: 44px; }
    .cart-line-main { padding-top: .1rem; }
    .cart-line-title-row { align-items: flex-start; flex-direction: column; gap: .15rem; }
    .cart-line-controls {
        grid-column: 2 / -1;
        justify-content: space-between;
        width: 100%;
        padding-left: 0;
    }
    .cart-line-remove { grid-column: 3; grid-row: 1; }
}

@media (max-width: 575.98px) {
    .topbar-actions { gap: .55rem; }
    .topbar-icon-button,
    .topbar-icon-spacer { width: 42px; height: 42px; flex-basis: 42px; }
    .menu-hero { padding: 1rem; }
    .menu-search .form-control {
        min-height: 52px;
        padding-right: 3.25rem;
    }
    .menu-search .btn {
        width: 40px;
        min-width: 40px;
        padding: 0;
    }
    .menu-search .btn span { display: none; }
    .category-filter { margin-inline: -.1rem; padding-bottom: .4rem; }
    .product-card-body { padding: 1rem; }
    .product-card-heading { align-items: flex-start; }
    .product-purchase-row { grid-template-columns: 76px minmax(0, 1fr); }
    .product-add-button span { font-size: .82rem; }
    .cart-list-header { min-height: 76px; }
    .cart-list-icon { display: none; }
    .cart-line { padding-block: 1rem; }
    .cart-line-controls { flex-wrap: wrap; gap: .65rem; }
    .quantity-stepper { grid-template-columns: 32px 38px 32px; }
    .quantity-stepper input { width: 38px; }
    .cart-line-total { min-width: 0; }
    .cart-summary { padding: 1rem; }
}

@media (max-width: 399.98px) {
    .page-heading-action { width: 100%; }
    .product-purchase-row { grid-template-columns: 70px minmax(0, 1fr); gap: .55rem; }
    .product-add-button { padding-inline: .7rem; }
    .cart-line {
        grid-template-columns: 40px minmax(0, 1fr) 38px;
        gap: .6rem;
    }
    .cart-line-icon,
    .cart-line-image { width: 40px; height: 40px; }
    .cart-line-remove { width: 38px; height: 38px; }
}

/* Checkout */
.checkout-page { max-width: 1480px; }
.checkout-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(310px, 390px);
    gap: 1.5rem;
    align-items: start;
}
.checkout-content { display: grid; gap: 1.5rem; min-width: 0; }
.checkout-items-card,
.checkout-details-card,
.checkout-summary { overflow: hidden; }
.checkout-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.35rem 1.5rem;
    border-bottom: 1px solid var(--border);
}
.checkout-card-icon,
.checkout-summary-icon {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    display: grid;
    place-items: center;
    border-radius: .9rem;
    background: #edf4ff;
    color: var(--jrmsu-blue);
    font-size: 1.15rem;
}
.checkout-items { padding: 0 1.5rem; }
.checkout-loading { display: flex; align-items: center; gap: .65rem; padding: 1.5rem 0; color: #627d98; }
.checkout-item {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    padding: 1rem 0;
    border-bottom: 1px solid #e8eef5;
}
.checkout-item:last-child { border-bottom: 0; }
.checkout-item-image,
.checkout-item-placeholder {
    width: 64px;
    height: 64px;
    border-radius: .9rem;
    object-fit: cover;
    background: #edf4ff;
}
.checkout-item-placeholder { display: grid; place-items: center; color: var(--jrmsu-blue); font-size: 1.2rem; }
.checkout-item-copy { min-width: 0; }
.checkout-item-copy h3 { margin: 0 0 .2rem; color: var(--jrmsu-navy); font-size: 1rem; font-weight: 800; }
.checkout-item-copy p { margin: 0 0 .2rem; color: #627d98; font-size: .82rem; overflow-wrap: anywhere; }
.checkout-item-copy span { color: #829ab1; font-size: .78rem; }
.checkout-item > strong { color: var(--jrmsu-green); white-space: nowrap; }
.checkout-empty {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem 0;
    color: #627d98;
}
.checkout-empty > div { flex: 1 1 auto; }
.checkout-empty strong { display: block; margin-bottom: .2rem; color: var(--jrmsu-navy); }
.checkout-empty-icon {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    display: grid;
    place-items: center;
    border-radius: 1rem;
    background: #edf4ff;
    color: var(--jrmsu-blue);
    font-size: 1.3rem;
}
.checkout-details-card .row { padding: 1.5rem; }
.checkout-summary { padding: 1.5rem; }
.checkout-summary-heading { display: flex; align-items: center; gap: .9rem; padding-bottom: 1.15rem; border-bottom: 1px solid var(--border); }
.checkout-summary-row,
.checkout-summary-total { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.checkout-summary-row { padding: .9rem 0; border-bottom: 1px solid #edf2f7; }
.checkout-summary-total { padding-top: 1.15rem; font-size: 1.12rem; font-weight: 800; }
.checkout-summary-total strong { font-size: 1.35rem; }
.checkout-error { margin: 1rem 0 0; overflow-wrap: anywhere; }
.checkout-error[hidden] { display: none !important; }
.checkout-summary button[aria-busy="true"] { cursor: wait; }

@media (max-width: 1199.98px) {
    .checkout-layout { grid-template-columns: minmax(0, 1fr) minmax(290px, 340px); }
}

@media (max-width: 991.98px) {
    .checkout-layout { grid-template-columns: 1fr; }
    .checkout-summary { position: static; }
}

@media (max-width: 575.98px) {
    .checkout-card-header { align-items: flex-start; padding: 1rem; }
    .checkout-card-header .btn { flex: 0 0 auto; }
    .checkout-items { padding: 0 1rem; }
    .checkout-details-card .row { padding: 1rem; }
    .checkout-summary { padding: 1rem; }
    .checkout-item { grid-template-columns: 52px minmax(0, 1fr); gap: .75rem; }
    .checkout-item-image,
    .checkout-item-placeholder { width: 52px; height: 52px; }
    .checkout-item > strong { grid-column: 2; justify-self: start; }
    .checkout-empty { align-items: flex-start; flex-wrap: wrap; }
    .checkout-empty .btn { width: 100%; }
}