:root {

    --navy:#10263A;
    --navy-dark:#081725;

    --cream:#FBF4EA;
    --cream-2:#F5E9D9;

    --gold:#E8B96C;
    --gold-soft:#F4D39A;

    --caramel:#B8783E;

    --white:#FFFDF9;

    --ink:#13202D;
    --muted:#766B60;

    --border:rgba(16,38,58,.13);

    --success:#A9C69A;
    --warning:#F3D48B;
    --danger:#E8C1BC;

    --shadow:
        0 22px 60px rgba(6,20,33,.16);
}


* {
    box-sizing:border-box;
}


html {
    scroll-behavior:smooth;
}


body {

    margin:0;

    background:
        var(--cream);

    color:
        var(--ink);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}


button,
input,
textarea,
select {
    font:inherit;
}


button {
    cursor:pointer;
}


.hidden {
    display:none !important;
}


.full {
    width:100%;
}


h1,
h2,
h3 {
    font-family:Georgia,serif;
}


.eyebrow {

    color:
        var(--caramel);

    font-size:10px;

    font-weight:800;

    letter-spacing:.18em;

    text-transform:uppercase;
}


.gold {
    color:var(--gold-soft);
}


.muted {
    color:var(--muted);
}


.helper {

    display:block;

    margin-top:6px;

    color:var(--muted);

    font-size:10px;
}


/* HEADER */

.topbar {

    position:sticky;

    top:0;

    z-index:200;

    height:72px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:
        0 max(18px,5vw);

    background:
        var(--navy-dark);

    color:
        var(--cream);
}


.brand {

    display:flex;

    align-items:center;

    gap:10px;

    border:0;

    background:transparent;

    color:inherit;
}


.brand-moon {

    color:var(--gold);

    font:
        38px Georgia,serif;
}


.brand strong {

    display:block;

    font:
        17px Georgia,serif;

    letter-spacing:.12em;
}


.brand small {

    display:block;

    color:
        var(--gold-soft);

    font-size:7px;

    letter-spacing:.2em;
}


.top-actions {

    display:flex;

    gap:10px;
}


.nav-text {

    padding:
        9px 18px;

    border:
        1px solid rgba(255,255,255,.15);

    border-radius:
        999px;

    background:
        transparent;

    color:white;
}


.account-button {

    width:40px;

    height:40px;

    border:0;

    border-radius:50%;

    background:
        var(--cream);

    color:
        var(--navy);
}


/* HERO */

.hero {

    position:relative;

    min-height:285px;

    overflow:hidden;

    display:flex;

    align-items:center;

    padding:
        50px max(20px,7vw);

    background:
        linear-gradient(
            150deg,
            #071522,
            #10263A
        );

    color:white;
}


.hero h1 {

    margin:
        8px 0;

    font-size:
        clamp(42px,7vw,76px);
}


.hero p {

    color:
        #F4E1C2;

    font:
        italic 18px Georgia,serif;
}


.hero-copy {
    z-index:2;
}


.hero-copy > span {
    color:var(--gold-soft);
}


.moon {

    position:absolute;

    right:8vw;

    color:
        var(--gold-soft);

    opacity:.35;

    font:
        220px Georgia,serif;
}


/* MENU */

.app-shell {

    max-width:1300px;

    margin:auto;
}


.menu-section {

    padding:
        45px max(16px,5vw) 75px;
}


.section-head {

    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    gap:15px;
}


.section-head h2 {

    margin:
        5px 0;

    font-size:38px;
}


.eta {

    display:flex;

    gap:10px;

    align-items:center;

    min-width:140px;

    padding:12px;

    border:
        1px solid var(--border);

    border-radius:15px;

    background:white;
}


.eta small,
.eta strong {
    display:block;
}


.eta small {

    color:
        var(--muted);

    font-size:9px;
}


.categories {

    display:flex;

    gap:8px;

    margin:
        28px 0;

    overflow:auto;
}


.category {

    flex:
        0 0 auto;

    padding:
        10px 17px;

    border:0;

    border-radius:
        999px;

    background:
        var(--cream-2);
}


.category.active {

    background:
        var(--navy);

    color:white;
}


.product-grid {

    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:14px;
}


.product-card {

    display:grid;

    grid-template-columns:
        110px 1fr 42px;

    align-items:center;

    gap:14px;

    padding:13px;

    border:
        1px solid var(--border);

    border-radius:18px;

    background:white;
}


.product-image {

    height:100px;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    border-radius:14px;

    background:
        var(--cream-2);

    font-size:48px;
}


.product-image img,
.staff-pos-image img,
.manager-product-icon img,
.cart-thumb img,
.product-hero img {

    width:100%;

    height:100%;

    object-fit:cover;
}


.product-info h3 {

    margin:
        4px 0;

    font-family:inherit;
}


.product-info p {

    color:
        var(--muted);

    font-size:12px;
}


.product-badge {

    color:
        var(--caramel);

    font-size:9px;

    font-weight:800;
}


.product-price {

    font:
        700 18px Georgia,serif;
}


.product-add {

    width:38px;

    height:38px;

    border:0;

    border-radius:50%;

    background:
        var(--navy);

    color:white;

    font-size:20px;
}


.brand-story {

    padding:
        70px 20px;

    text-align:center;

    background:
        var(--navy-dark);

    color:white;
}


.desktop-cart {

    position:fixed;

    right:25px;

    bottom:25px;

    z-index:100;

    display:flex;

    gap:12px;

    padding:
        14px 18px;

    border:0;

    border-radius:15px;

    background:
        var(--navy);

    color:white;

    box-shadow:
        var(--shadow);
}


.bottom-nav {
    display:none;
}


/* OVERLAYS */

.overlay {

    position:fixed;

    inset:0;

    z-index:1000;

    display:none;

    background:
        rgba(4,14,23,.62);

    backdrop-filter:
        blur(7px);
}


.overlay.active {
    display:block;
}


.overlay.center.active {

    display:flex;

    align-items:center;

    justify-content:center;

    padding:20px;
}


.admin-overlay {
    z-index:5000 !important;
}


.staff-order-overlay {
    z-index:5000 !important;
}


.modal,
.product-modal {

    position:relative;

    width:
        min(500px,100%);

    max-height:
        94vh;

    overflow-y:auto;

    padding:26px;

    border-radius:25px;

    background:
        var(--cream);

    box-shadow:
        var(--shadow);
}


.product-modal {
    padding:0;
}


.admin-modal {

    width:
        min(760px,100%);
}


.panel-head {

    display:flex;

    align-items:flex-start;

    justify-content:space-between;

    gap:15px;

    margin-bottom:20px;
}


.round {

    width:38px;

    height:38px;

    border:
        1px solid var(--border);

    border-radius:50%;

    background:
        var(--cream-2);

    color:
        var(--navy);

    font-size:21px;
}


.modal-close {

    position:absolute;

    right:15px;

    top:15px;
}


/* FORM */

label {

    display:block;

    margin:
        14px 0 6px;

    font-size:12px;

    font-weight:750;
}


.input {

    width:100%;

    padding:12px;

    border:
        1px solid var(--border);

    border-radius:10px;

    background:white;
}


.textarea {

    min-height:76px;

    resize:vertical;
}


.primary,
.secondary,
.danger-button {

    min-height:44px;

    padding:
        10px 15px;

    border-radius:10px;

    font-weight:750;
}


.primary {

    border:0;

    background:
        var(--navy);

    color:white;
}


.secondary {

    border:
        1px solid var(--navy);

    background:
        transparent;

    color:
        var(--navy);
}


.danger-button {

    border:0;

    background:
        #C66F65;

    color:white;
}


.link {

    border:0;

    background:transparent;

    color:
        var(--caramel);

    font-weight:700;
}


.inline-check {

    display:flex;

    align-items:center;

    gap:8px;
}


.form-grid {

    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:10px;
}


.toggle-row {

    display:flex;

    gap:20px;

    margin:
        20px 0;
}


/* CHOICES */

.choice {

    width:100%;

    display:flex;

    align-items:center;

    gap:11px;

    margin-bottom:8px;

    padding:13px;

    border:
        1px solid var(--border);

    border-radius:12px;

    background:white;

    color:
        var(--ink);

    text-align:left;
}


.choice.selected {

    border-color:
        var(--navy);

    box-shadow:
        0 0 0 1px var(--navy);
}


.choice strong,
.choice small {

    display:block;
}


.choice small {

    color:
        var(--muted);
}


.check {

    width:26px;

    height:26px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:
        var(--navy);

    color:white;
}


.choice-icon {

    width:26px;

    text-align:center;

    color:
        var(--caramel);

    font-size:22px;
}


.schedule-box {

    padding:10px;

    margin-bottom:15px;

    border-radius:10px;

    background:
        var(--cream-2);
}


.checkout-total {

    display:flex;

    justify-content:space-between;

    margin:
        20px 0 10px;

    padding-top:15px;

    border-top:
        1px solid var(--border);
}


/* PRODUCT MODAL */

.product-hero {

    position:relative;

    height:220px;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    border-radius:
        25px 25px 0 0;

    background:
        var(--cream-2);

    font-size:90px;
}


.product-back {

    position:absolute;

    left:15px;

    top:15px;

    z-index:2;
}


.product-body {

    padding:22px;
}


.option-section {

    margin-top:18px;
}


.option-title {

    margin-bottom:8px;

    font-weight:800;
}


.segment {

    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:6px;
}


.option {

    padding:9px 5px;

    border:
        1px solid var(--border);

    border-radius:9px;

    background:white;
}


.option strong {

    display:block;

    font-size:9px;
}


.option.selected {

    background:
        var(--navy);

    color:white;
}


.extra-list {

    display:grid;

    gap:6px;
}


.extra {

    display:flex;

    justify-content:space-between;

    padding:10px;

    border:
        1px solid var(--border);

    border-radius:9px;

    background:white;
}


.extra.selected {

    background:
        #FAEFD6;

    border-color:
        var(--caramel);
}


.product-actions {

    display:grid;

    grid-template-columns:
        100px 1fr;

    gap:10px;

    margin-top:20px;
}


.qty {

    display:flex;

    align-items:center;

    justify-content:space-between;

    border:
        1px solid var(--border);

    border-radius:10px;

    background:white;
}


.qty button {

    border:0;

    background:transparent;

    font-size:20px;
}


/* CART */

.drawer {

    position:absolute;

    right:0;

    top:0;

    width:
        min(480px,100%);

    height:100%;

    overflow:auto;

    padding:25px;

    background:
        var(--cream);
}


.cart-item {

    display:grid;

    grid-template-columns:
        65px 1fr;

    gap:10px;

    padding:
        12px 0;

    border-bottom:
        1px solid var(--border);
}


.cart-thumb {

    height:65px;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    border-radius:10px;

    background:
        var(--cream-2);

    font-size:30px;
}


.cart-title {

    display:flex;

    justify-content:space-between;

    gap:10px;
}


.cart-title h4 {
    margin:0;
}


.cart-meta {

    margin-top:4px;

    color:
        var(--muted);

    font-size:10px;
}


/* LOGIN */

.login-logo {

    display:flex;

    flex-direction:column;

    align-items:center;

    margin-bottom:22px;
}


.login-logo > span {

    color:
        var(--gold);

    font-size:52px;
}


.login-logo strong {

    font:
        20px Georgia,serif;

    letter-spacing:.1em;
}


.login-logo small {

    color:
        var(--muted);
}


.login-submit {
    margin-top:18px;
}


.staff-login-submit {
    margin-top:22px;
}


.centered-text {
    text-align:center;
}


.divider {

    margin:
        23px 0 13px;

    text-align:center;

    color:
        var(--caramel);

    font-size:9px;

    font-weight:800;

    letter-spacing:.15em;
}


.guest-button {

    width:100%;

    min-height:50px;

    border:
        1px solid var(--navy);

    border-radius:11px;

    background:white;

    color:
        var(--navy);

    font-weight:750;
}


.guest-description {

    display:block;

    margin-top:8px;

    color:
        var(--muted);

    text-align:center;

    line-height:1.4;
}


.staff-link {

    width:100%;

    border:0;

    background:transparent;

    color:
        var(--muted);
}


/* CONFIRMATION */

.confirmation {
    text-align:center;
}


.success {

    width:70px;

    height:70px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:auto;

    border-radius:50%;

    background:
        var(--gold);

    font-size:34px;
}


.order-code {

    font:
        21px Georgia,serif;
}


.coffee {

    margin:18px;

    font-size:40px;
}


.locker-box {

    display:flex;

    gap:12px;

    align-items:center;

    margin:
        20px 0;

    padding:14px;

    border-radius:12px;

    background:
        var(--cream-2);

    text-align:left;
}


.locker-symbol {

    width:45px;

    height:45px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:10px;

    background:
        var(--navy);

    color:
        var(--gold);
}


.locker-box strong,
.locker-box small {

    display:block;
}


.locker-box small {

    margin-top:2px;

    color:
        var(--muted);
}


.scheduled-confirm {

    margin-top:10px;

    padding:10px;

    border-radius:10px;

    background:
        #FFF0CF;
}


.signature {

    margin-top:20px;

    font:
        italic 21px Georgia,serif;
}


/* CUSTOMER / GUEST ORDERS */

.account-card {

    padding:14px;

    border-radius:12px;

    background:
        var(--cream-2);
}


.customer-orders {

    display:grid;

    gap:9px;

    margin-top:14px;
}


.customer-order-card {

    padding:13px;

    border:
        1px solid var(--border);

    border-radius:11px;

    background:white;
}


.customer-order-top {

    display:flex;

    justify-content:space-between;

    gap:10px;
}


.customer-order-meta {

    margin-top:6px;

    color:
        var(--muted);

    font-size:11px;
}


.customer-locker {

    margin-top:9px;

    padding:9px;

    border-radius:8px;

    background:
        var(--cream-2);

    font-size:11px;
}


.cancel-customer {

    margin-top:9px;

    padding:7px 10px;

    border:
        1px solid #BF7168;

    border-radius:8px;

    background:white;

    color:#9D5048;

    font-size:11px;
}


/* STAFF */

.staff-dashboard {

    position:fixed;

    inset:0;

    z-index:3000;

    display:none;

    grid-template-columns:
        220px 1fr;

    background:
        var(--cream);
}


.staff-dashboard.active {
    display:grid;
}


.staff-sidebar {

    display:flex;

    flex-direction:column;

    padding:
        25px 15px;

    background:
        var(--navy-dark);

    color:white;
}


.staff-brand {

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:30px;
}


.staff-brand > span {

    color:
        var(--gold);

    font-size:35px;
}


.staff-brand strong,
.staff-brand small {
    display:block;
}


.staff-sidebar nav {

    display:grid;

    gap:5px;
}


.staff-nav {

    width:100%;

    padding:12px;

    border:0;

    border-radius:9px;

    background:transparent;

    color:#D7DCE0;

    text-align:left;
}


.staff-nav.active {

    background:
        rgba(232,185,108,.18);

    color:white;
}


.staff-logout {

    margin-top:auto;

    padding:10px;

    border:
        1px solid rgba(255,255,255,.15);

    border-radius:8px;

    background:transparent;

    color:white;
}


.staff-main {

    overflow:auto;

    padding:30px;

    background:#F9F4EB;
}


.staff-header {

    display:flex;

    justify-content:space-between;

    gap:20px;
}


.staff-profile {

    display:flex;

    align-items:center;

    gap:10px;

    text-align:right;
}


.staff-profile strong,
.staff-profile small {

    display:block;
}


.role-badge {

    display:inline-block;

    padding:
        5px 8px;

    border-radius:
        999px;

    background:
        var(--gold-soft);

    color:
        var(--navy);

    font-size:9px;

    font-weight:900;
}


.live-bar {

    display:flex;

    align-items:center;

    gap:8px;

    margin:
        18px 0;

    padding:
        10px 12px;

    border:
        1px solid var(--border);

    border-radius:10px;

    background:white;

    font-size:11px;
}


.live-dot {

    width:8px;

    height:8px;

    border-radius:50%;

    background:#5FA05B;
}


.live-bar button {

    margin-left:auto;
}


.staff-orders {

    display:grid;

    grid-template-columns:
        repeat(3,minmax(240px,1fr));

    gap:12px;
}


.staff-card {

    display:flex;

    flex-direction:column;

    padding:15px;

    border:
        1px solid var(--border);

    border-radius:12px;

    background:white;
}


.staff-card.priority {

    border:
        2px solid var(--gold);
}


.priority-badge,
.programmed-badge {

    width:max-content;

    margin-bottom:8px;

    padding:
        5px 8px;

    border-radius:
        999px;

    background:
        var(--gold-soft);

    font-size:9px;

    font-weight:900;
}


.staff-top {

    display:flex;

    justify-content:space-between;
}


.staff-number {

    font:
        700 19px Georgia,serif;
}


.staff-customer,
.staff-time {

    color:
        var(--muted);

    font-size:11px;
}


.staff-item {

    margin-top:9px;

    padding-top:9px;

    border-top:
        1px solid #EEE7DD;

    font-size:12px;
}


.staff-item small {

    display:block;

    color:
        var(--muted);
}


.staff-note {

    margin-top:8px;

    padding:7px;

    border-radius:7px;

    background:
        #FFF1CE;

    font-size:10px;
}


.staff-action {

    margin-top:13px;

    padding:10px;

    border:0;

    border-radius:8px;

    font-weight:800;
}


.received {

    background:
        var(--caramel);

    color:white;
}


.preparing {

    background:
        var(--warning);
}


.ready {

    background:
        var(--success);
}


.staff-cancel {

    margin-top:7px;

    padding:8px;

    border:
        1px solid #C47770;

    border-radius:8px;

    background:white;

    color:#A6534B;
}


.staff-empty {

    padding:40px;

    text-align:center;

    color:
        var(--muted);
}


.order-section-title {

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin:
        20px 0 10px;
}


/* POS */

.staff-pos {

    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        360px;

    gap:18px;
}


.staff-pos-products {

    display:grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap:10px;
}

/* Grid children must shrink inside the space left by the staff navigation. */
.staff-pos > *,
.staff-pos-card {
    min-width:0;
}

.staff-pos-card {
    overflow-wrap:anywhere;
}


.staff-pos-card {

    padding:11px;

    border:
        1px solid var(--border);

    border-radius:11px;

    background:white;

    text-align:left;
}


.staff-pos-image {

    height:90px;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    margin-bottom:8px;

    border-radius:9px;

    background:
        var(--cream-2);

    font-size:40px;
}


.staff-pos-cart {

    position:sticky;

    top:0;

    align-self:start;

    padding:17px;

    border:
        1px solid var(--border);

    border-radius:12px;

    background:white;
}


.staff-cart-line {

    display:flex;

    justify-content:space-between;

    gap:8px;

    padding:
        8px 0;

    border-bottom:
        1px solid var(--border);
}


/* ADMIN */

.section-toolbar {

    display:flex;

    align-items:center;

    justify-content:space-between;

    flex-wrap:wrap;

    gap:10px;

    margin-bottom:15px;
}


.toolbar-actions {

    display:flex;

    gap:8px;

    flex-wrap:wrap;
}


.manager-menu {

    display:grid;

    gap:9px;
}


.manager-product {

    display:grid;

    grid-template-columns:
        55px 1fr auto;

    gap:12px;

    align-items:center;

    padding:12px;

    border:
        1px solid var(--border);

    border-radius:10px;

    background:white;
}


.manager-product-icon {

    width:50px;

    height:50px;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    border-radius:9px;

    background:
        var(--cream-2);

    font-size:27px;
}


.manager-actions {

    display:flex;

    gap:5px;

    flex-wrap:wrap;
}


.manager-actions button {

    padding:
        7px 9px;

    border:0;

    border-radius:7px;
}


.edit-button {
    background:var(--gold-soft);
}


.pause-button {
    background:var(--warning);
}


.delete-button {
    background:var(--danger);
}


.extras-admin-section {

    margin-top:40px;

    padding-top:25px;

    border-top:
        1px solid var(--border);
}


.extra-admin-list {

    display:grid;

    grid-template-columns:
        repeat(2,1fr);

    gap:9px;
}


.extra-admin-card {

    padding:13px;

    border:
        1px solid var(--border);

    border-radius:10px;

    background:white;
}


.extra-category-labels {

    margin-top:6px;

    color:
        var(--muted);

    font-size:10px;
}


.apply-grid {

    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:7px;
}


.apply-choice {

    display:flex;

    align-items:center;

    gap:8px;

    margin:0;

    padding:10px;

    border:
        1px solid var(--border);

    border-radius:9px;

    background:white;
}


/* MODIFIERS */

.modifier-section {

    margin-top:20px;

    padding-top:15px;

    border-top:
        1px solid var(--border);
}


.modifier-head {

    display:flex;

    justify-content:space-between;

    align-items:center;
}


.modifier-row {

    display:grid;

    grid-template-columns:
        1fr 120px 38px;

    gap:7px;

    margin-top:7px;
}


.modifier-remove {

    border:0;

    border-radius:8px;

    background:
        var(--danger);
}


.image-preview {

    width:160px;

    height:130px;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    margin-top:10px;

    border:
        1px solid var(--border);

    border-radius:10px;

    background:
        var(--cream-2);

    color:
        var(--muted);
}


.image-preview img {

    width:100%;

    height:100%;

    object-fit:cover;
}


.save-admin-button {

    margin-top:20px;
}


/* CONFIG */

.config-grid {

    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:13px;
}


.config-card {

    padding:17px;

    border:
        1px solid var(--border);

    border-radius:12px;

    background:white;
}


.config-card.wide {

    grid-column:
        1/-1;
}


.wait-rules-editor {

    max-width:760px;
}


.wait-rule-head,
.wait-rule-row {

    display:grid;

    grid-template-columns:
        130px 130px 150px 150px 38px;

    gap:7px;
}


.wait-rule-head {

    color:
        var(--muted);

    font-size:9px;

    font-weight:800;
}


.wait-rule-row {

    margin-top:7px;
}


.wait-rule-row input {

    width:100%;

    padding:9px;

    border:
        1px solid var(--border);

    border-radius:8px;
}


.employee-table {

    display:grid;

    gap:8px;
}


.employee-row {

    display:grid;

    grid-template-columns:
        110px 1fr 120px 100px 70px;

    align-items:center;

    gap:8px;

    padding:12px;

    border:
        1px solid var(--border);

    border-radius:9px;

    background:white;
}


/* HISTORY */

.history-list {

    display:grid;

    gap:8px;
}


.history-row {

    padding:12px;

    border:
        1px solid var(--border);

    border-radius:10px;

    background:white;
}


.history-main {

    display:grid;

    grid-template-columns:
        120px 1fr 100px 100px;

    gap:10px;

    align-items:center;
}


.history-reason {

    margin-top:8px;

    padding:8px;

    border-radius:7px;

    background:#FCE5E1;

    color:#984C45;

    font-size:10px;
}


.status-pill {

    width:max-content;

    padding:
        5px 8px;

    border-radius:
        999px;

    background:
        var(--cream-2);

    font-size:9px;

    font-weight:800;
}


/* TOAST */

.toast {

    position:fixed;

    left:50%;

    bottom:90px;

    z-index:7000;

    transform:
        translate(-50%,20px);

    padding:
        11px 17px;

    border-radius:
        999px;

    background:
        var(--navy);

    color:white;

    opacity:0;

    pointer-events:none;

    transition:.2s;
}


.toast.show {

    opacity:1;

    transform:
        translate(-50%,0);
}


/* RESPONSIVE */

@media(max-width:1200px) {

    .staff-pos {

        grid-template-columns:1fr;
    }


    .staff-pos-cart {

        position:static;
    }


    .staff-pos-products {

        grid-template-columns:
            repeat(2,1fr);
    }
}


@media(max-width:900px) {

    .product-grid,
    .staff-orders {

        grid-template-columns:1fr;
    }


    .config-grid {

        grid-template-columns:1fr;
    }


    .config-card.wide {

        grid-column:auto;
    }
}


@media(max-width:700px) {

    .wait-rule-head {
        display:none;
    }


    .wait-rule-row {

        grid-template-columns:
            1fr 1fr;
    }
}


@media(max-width:650px) {

    body {
        padding-bottom:70px;
    }


    .desktop-only,
    .desktop-cart {

        display:none;
    }


    .topbar {

        height:62px;

        padding:
            0 14px;
    }


    .hero {

        min-height:200px;

        padding:
            30px 17px;
    }


    .hero h1 {

        font-size:36px;
    }


    .moon {

        right:0;

        font-size:130px;
    }


    .menu-section {

        padding:
            30px 14px 55px;
    }


    .section-head {

        align-items:center;
    }


    .section-head h2 {

        font-size:27px;
    }


    .product-card {

        grid-template-columns:
            65px 1fr 35px;

        padding:
            10px 3px;

        border:0;

        border-bottom:
            1px solid var(--border);

        border-radius:0;

        background:transparent;
    }


    .product-image {

        height:65px;

        font-size:32px;
    }


    .product-info p {

        display:none;
    }


    .product-add {

        width:33px;

        height:33px;
    }


    .bottom-nav {

        position:fixed;

        left:0;

        right:0;

        bottom:0;

        z-index:400;

        height:68px;

        display:grid;

        grid-template-columns:
            repeat(3,1fr);

        background:
            var(--cream);

        border-top:
            1px solid var(--border);
    }


    .bottom-nav button {

        border:0;

        background:transparent;

        color:
            var(--navy);
    }


    .bottom-nav small {

        display:block;

        font-size:9px;
    }


    .cart-icon {

        position:relative;
    }


    .cart-icon b {

        position:absolute;

        right:-10px;

        top:-8px;
    }


    .overlay.center.active {

        align-items:flex-end;

        padding:0;
    }


    .modal,
    .product-modal {

        width:100%;

        max-height:96vh;

        border-radius:
            25px 25px 0 0;
    }


    .staff-dashboard.active {

        display:block;

        overflow:auto;
    }


    .staff-sidebar {

        position:sticky;

        top:0;

        z-index:20;

        flex-direction:row;

        align-items:center;

        padding:10px;
    }


    .staff-brand {

        margin:
            0 auto 0 0;
    }


    .staff-sidebar nav {

        position:fixed;

        left:0;

        right:0;

        bottom:0;

        z-index:30;

        display:flex;

        overflow:auto;

        padding:7px;

        background:
            var(--navy-dark);
    }


    .staff-nav {

        width:auto;

        flex:
            0 0 auto;
    }


    .staff-logout {

        margin:0;
    }


    .staff-main {

        padding:
            15px 12px 90px;
    }


    .staff-header {

        flex-direction:column;
    }


    .staff-profile {

        text-align:left;
    }


    .staff-pos-products {

        grid-template-columns:
            1fr 1fr;
    }


    .form-grid,
    .apply-grid,
    .extra-admin-list {

        grid-template-columns:1fr;
    }


    .manager-product {

        grid-template-columns:
            50px 1fr;
    }


    .manager-actions {

        grid-column:
            1/-1;
    }


    .employee-row {

        grid-template-columns:
            1fr 1fr;
    }


    .history-main {

        grid-template-columns:
            1fr 1fr;
    }
}


.locker-availability{padding:4px 7px;border-radius:999px;background:var(--locker-availability-color,#eef6e9);color:#253341;white-space:nowrap}