.webCustomerAuth {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    background: #f7f7f4;
}
.webCustomerAuthCard {
    width: min(460px, 100%);
    padding: 28px;
    display: grid;
    gap: 12px;
}
.webCustomerAuthCard h1,
.webCustomerAuthCard p {
    margin: 0;
}
.webCustomerAuthCard small {
    color: #6b7280;
    text-align: center;
}
.googleAuthButton {
    border: 1px solid #d1d5db;
    background: #fff;
    border-radius: 13px;
    padding: 14px 16px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.googleAuthButton span {
    font-size: 20px;
    font-weight: 900;
}
.webCustomerOnboarding {
    max-height: calc(100vh - 32px);
    overflow: auto;
}
.webMap.webRegistrationMap {
    height: 220px;
    min-height: 220px;
}
.webCustomerOnboarding > small {
    text-align: left;
}
.manualLocationActions {
    display: grid;
    gap: 7px;
}
.manualLocationConfirm:disabled {
    opacity: .48;
    cursor: not-allowed;
}
.manualLocationConfirm.locationConfirmed {
    background: #176b3a;
    color: #fff;
}
.webMapHint {
    color: #6b7280;
    text-align: left;
}
.webHeaderActions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.directCustomerAuth form {
    display: grid;
    gap: 10px;
}

.directForgotPassword {
    justify-self: end;
    padding: 2px 0 4px;
    font-size: 12px;
}

.customerGoogleLogin {
    width: 100%;
    min-height: 44px;
    display: grid;
    place-items: center;
}

.customerGoogleLogin > div,
.customerGoogleLogin iframe {
    max-width: 100% !important;
}

.googleAuthLoading {
    width: 100%;
    padding: 12px;
    border: 1px solid #d1d5db;
    border-radius: 12px;
    color: #6b7280;
    text-align: center;
    font-size: 12px;
    font-weight: 800;
}

.webGuestCheckout {
    display: grid;
    gap: 5px;
    margin: 12px 0;
    padding: 14px;
    border: 1px solid #f2cf86;
    border-radius: 14px;
    background: #fff7e6;
}

.webGuestCheckout b {
    font-size: 14px;
}

.webGuestCheckout span {
    color: #6b7280;
    font-size: 12px;
    line-height: 1.4;
}
.directAuthDivider {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #9ca3af;
    font-size: 12px;
}
.directAuthDivider::before,
.directAuthDivider::after {
    content: '';
    height: 1px;
    flex: 1;
    background: #e5e7eb;
}
.webHeaderActions button {
    white-space: nowrap;
}
.webOrderPublic {
    min-height: 100vh;
    background: #f7f7f4;
    color: #171717;
}
.webOrderHeader {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: #111;
    color: #fff;
}
.webOrderBrand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 900;
}
.webOrderHeader button {
    border: 0;
    border-radius: 999px;
    padding: 10px 14px;
    font-weight: 900;
}
.webOrderHero {
    max-width: 1180px;
    margin: 0 auto;
    padding: 28px 18px 12px;
}
.webOrderHero h1 {
    margin: 0;
    font-size: clamp(34px, 7vw, 64px);
    line-height: .96;
}
.webOrderHero p {
    color: #6b7280;
    font-size: 18px;
}
.webOrderLayout {
    max-width: 1180px;
    margin: 0 auto;
    padding: 12px 18px 50px;
    display: grid;
    grid-template-columns: 1fr 390px;
    gap: 18px;
}
.webCats {
    display: flex;
    gap: 8px;
    overflow: auto;
    padding: 4px 0 14px;
}
.webCats button {
    white-space: nowrap;
    border: 1px solid #e5e7eb;
    background: #fff;
    padding: 10px 14px;
    border-radius: 999px;
    font-weight: 800;
}
.webCats button.active {
    background: #111;
    color: #fff;
}
.webProductGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 12px;
}
.webProductCard {
    border: 1px solid #e5e7eb;
    background: #fff;
    border-radius: 18px;
    padding: 0;
    overflow: hidden;
    text-align: left;
}
.webProductImage {
    height: 145px;
    background: linear-gradient(135deg, #ffe3c7, #f6a30a);
    background-size: cover;
    background-position: center 34%;
}
.webProductBody {
    padding: 14px;
    display: grid;
    gap: 7px;
}
.webProductBody p {
    margin: 0;
    color: #6b7280;
    min-height: 38px;
    font-size: 14px;
}
.webProductBody strong {
    color: #00789d;
}
.webCart {
    position: sticky;
    top: 86px;
    height: max-content;
    padding: 18px;
    display: grid;
    gap: 12px;
}
.webCart h2,
.webCart h3 {
    margin: 0;
}
.webProfileHead {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}
.webProfileState {
    font-size: 11px;
    font-weight: 900;
    padding: 5px 8px;
    border-radius: 999px;
    background: #eef6f9;
    color: #005f7d;
}
.webSaveProfile {
    width: 100%;
    text-align: left;
    padding: 4px 0;
    font-weight: 900;
}
.webCartLine {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid #e5e7eb;
}
.webCartLine small {
    display: block;
    margin-top: 6px;
}
.webCartLine button {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid #ddd;
    background: #fff;
}
.webChoice {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
}
.webChoice button {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 12px;
    background: #fff;
    font-weight: 900;
}
.webChoice button.active {
    background: #111;
    color: #fff;
}
.webLocationBox {
    display: grid;
    gap: 9px;
}
.webMap {
    height: 260px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    overflow: hidden;
}
.webBankTransferCard {
    display: grid;
    gap: 12px;
    margin: 12px 0;
    padding: 16px;
    border: 1px solid rgba(0,120,157,.18);
    border-radius: 16px;
    background: linear-gradient(145deg,#f4fbfd,#fff8eb);
}
.webBankTransferHead { display:flex; justify-content:space-between; align-items:end; gap:12px; }
.webBankTransferHead span { font-size:10px; font-weight:900; letter-spacing:.9px; color:#00789d; }
.webBankTransferHead b { text-align:right; }
.webBankTransferRows { display:grid; gap:8px; }
.webBankTransferRows div { display:flex; justify-content:space-between; gap:14px; padding-top:8px; border-top:1px dashed rgba(0,0,0,.12); }
.webBankTransferRows span { color:#6b7280; font-size:12px; }
.webBankTransferRows b { text-align:right; overflow-wrap:anywhere; }
.webBankAdminToggle { display:flex; align-items:center; gap:9px; margin:12px 0; font-weight:800; }
.webTotal {
    background: #fff7df;
    border-radius: 14px;
    padding: 12px;
    display: grid;
    gap: 5px;
}
.webTotalRow {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}
.webWhatsapp {
    width: 100%;
    border: 0;
    border-radius: 14px;
    padding: 16px;
    background: #25D366;
    color: #102417;
    font-weight: 950;
    font-size: 16px;
}
.webPendingBanner {
    max-width: 1180px;
    margin: 14px auto 0;
    padding: 0 18px;
}
.webOrderingBanner {
    max-width: 1144px;
    margin: 10px auto 0;
    padding: 11px 14px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 12px;
    font-weight: 850;
}
.webOrderingBanner.open { background: #e8f7ee; color: #176b3a; }
.webOrderingBanner.closed { background: #fff0cf; color: #7a4e00; }
.webOrderingBanner span { font-weight: 700; }
.webClosedCheckout {
    display: grid;
    gap: 4px;
    padding: 12px;
    border-radius: 12px;
    background: #fff0cf;
    color: #7a4e00;
    margin: 10px 0;
}
.webClosedCheckout span { font-size: 12px; line-height: 1.4; }
.webPendingInner {
    padding: 14px;
    border-radius: 14px;
    background: #eef6f9;
    border: 1px solid #b8dbe7;
}
.webForgotPrompt {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #b8dbe7;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.webForgotPrompt > div {
    display: grid;
    gap: 3px;
}
.webForgotPrompt span,
.webForgottenMode span {
    font-size: 12px;
    line-height: 1.35;
}
.webForgottenMode {
    display: grid;
    gap: 4px;
    padding: 12px;
    margin-bottom: 12px;
    border-radius: 12px;
    background: #eef6f9;
    border: 1px solid #b8dbe7;
}
.webTransferPending {
    border-color: #f6a30a;
    background: #fffaf0;
}
@media (max-width: 620px) {
    .webForgotPrompt {
        align-items: stretch;
        flex-direction: column;
    }
    .webForgotPrompt button {
        width: 100%;
    }
}
.webStaffCard {
    padding: 18px;
    margin-top: 14px;
}
.webOrderingEmergency {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin: 12px 0;
    padding: 13px 14px;
    border-radius: 14px;
}
.webOrderingEmergency > div { display: grid; gap: 4px; }
.webOrderingEmergency span { font-size: 12px; line-height: 1.35; }
.webOrderingEmergency.on { background: #e8f7ee; color: #176b3a; }
.webOrderingEmergency.off { background: #fff0cf; color: #7a4e00; }
.webOrderingEmergency button { white-space: nowrap; }
.webDeliverySetupState {
    display: grid;
    gap: 4px;
    margin: 12px 0;
    padding: 13px 14px;
    border-radius: 14px;
}
.webDeliverySetupState.ready {
    background: #e8f7ee;
    color: #176b3a;
}
.webDeliverySetupState.needs {
    background: #fff3d5;
    color: #7a4b00;
}
.webDeliverySetupState span {
    font-size: 13px;
}
.webStoreMap {
    width: 100%;
    height: 310px;
    margin: 12px 0 6px;
    border: 1px solid #d1d5db;
    border-radius: 16px;
    overflow: hidden;
}
.webStoreMapHelp {
    margin-bottom: 14px;
    color: #6b7280;
    font-size: 13px;
}
.webDeliveryUnavailable {
    display: grid;
    gap: 3px;
    padding: 10px 12px;
    border-radius: 12px;
    background: #fff3d5;
    color: #7a4b00;
    font-size: 12px;
}
.webDeliveryUnavailable span {
    color: #7a4b00;
}
.webStaffConfig {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    align-items: end;
}
.webStaffConfig label {
    font-size: 12px;
    color: #6b7280;
    font-weight: 900;
}
.webStaffConfig input {
    margin-top: 5px;
}
.webHoursHead { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.webHoursHead h2,.webHoursHead p { margin: 0; }
.webHoursState { padding: 7px 9px; border-radius: 999px; font-size: 10px; font-weight: 950; white-space: nowrap; }
.webHoursState.open { background: #e8f7ee; color: #176b3a; }
.webHoursState.closed { background: #fff0cf; color: #7a4e00; }
.webHoursGrid { display: grid; gap: 7px; margin: 14px 0; }
.webHoursRow { display: grid; grid-template-columns: minmax(105px,1fr) 110px minmax(120px,.8fr) minmax(120px,.8fr); align-items: end; gap: 8px; padding: 9px; border: 1px solid rgba(0,120,157,.16); border-radius: 12px; background: #fff; }
.webHoursRow > b { align-self: center; color: #00789d; }
.webHoursRow label { display: grid; gap: 4px; font-size: 10px; font-weight: 900; color: #6b7280; }
.webHoursRow input[type="time"] { margin: 0; }
.webHoursClosed { display: flex !important; align-items: center; gap: 6px !important; align-self: center; }
.webHoursClosed input { width: auto; margin: 0; }
.webCatalogManager {
    overflow: hidden;
}
.webCatalogTitle {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}
.webCatalogTitle h2,
.webCatalogTitle p {
    margin: 0;
}
.webCatalogTitleActions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.webCatalogCreate {
    margin: 16px 0 18px;
    padding: 16px;
    border: 1px solid rgba(0,120,157,.2);
    border-radius: 16px;
    background: linear-gradient(145deg,#f6fbfc,#fff8ed);
}
.webCatalogCreate.hide { display: none; }
.webCatalogCreateHead {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}
.webCatalogCreateHead h3,
.webCatalogCreateHead p { margin: 0; }
.webCatalogCreateGrid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 12px;
}
.webCatalogCreateGrid label {
    display: grid;
    gap: 6px;
    font-size: 12px;
    font-weight: 800;
}
.webCatalogCreateGrid select {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fff;
}
.webCatalogCreateDescription {
    grid-column: 1 / -1;
}
.webCatalogCreateDescription textarea {
    min-height: 88px;
}
.webCatalogCreatePhoto span {
    color: #6b7280;
    font-size: 11px;
    font-weight: 600;
}
@media (max-width: 680px) {
    .webCatalogTitle { width: 100%; align-items: stretch; flex-direction: column; }
    .webCatalogTitle > div:first-child { min-width: 0; }
    .webCatalogTitleActions { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; gap: 8px; }
    .webCatalogTitleActions .pill { width: 100%; min-width: 0; display: grid; place-items: center; text-align: center; }
    .webCatalogTitleActions .primary,
    .webCatalogTitleActions .blue { width: 100%; min-width: 0; padding-left: 8px; padding-right: 8px; white-space: normal; line-height: 1.05; }
    .webCatalogCreateGrid { grid-template-columns: 1fr; }
    .webCatalogCreateDescription { grid-column: auto; }
}
.webCatalogGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 12px;
    margin-top: 14px;
}
.webCatalogCard {
    display: grid;
    gap: 9px;
    padding: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    background: #fff;
}
.webCatalogPhoto {
    height: 170px;
    border-radius: 13px;
    background: linear-gradient(135deg, #ffe3c7, #f6a30a);
    background-size: cover;
    background-position: center 34%;
}
.catalogQuickAvailability {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 12px;
    border: 1px solid #e6ddd2;
    border-radius: 12px;
    background: #fffaf5;
}
.catalogQuickAvailability > div { display: grid; gap: 2px; }
.catalogQuickAvailability b { font-size: 12px; color: #00789d; }
.catalogQuickAvailability small { color: #6b7280; font-size: 11px; }
.catalogAvailabilitySwitch { position: relative; width: 52px; height: 30px; flex: 0 0 auto; }
.catalogAvailabilitySwitch input { position: absolute; opacity: 0; pointer-events: none; }
.catalogAvailabilitySwitch span { display: block; width: 52px; height: 30px; border-radius: 999px; background: #d1d5db; cursor: pointer; transition: .18s ease; }
.catalogAvailabilitySwitch span::after { content: ''; position: absolute; top: 4px; left: 4px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.18); transition: .18s ease; }
.catalogAvailabilitySwitch input:checked + span { background: #00789d; }
.catalogAvailabilitySwitch input:checked + span::after { transform: translateX(22px); }
.catalogAvailabilitySwitch input:disabled + span { opacity: .55; cursor: wait; }
.webCatalogUpload {
    display: block;
    padding: 10px;
    border: 1px dashed #00789d;
    border-radius: 11px;
    color: #006b8b;
    font-size: 12px;
    font-weight: 900;
    text-align: center;
    cursor: pointer;
}
.webCatalogUpload input {
    display: none;
}
.webCatalogCard > label {
    display: grid;
    gap: 5px;
    color: #6b7280;
    font-size: 12px;
    font-weight: 800;
}
.webCatalogCard select {
    width: 100%;
    padding: 12px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    background: #fff;
}
.webCatalogCard textarea {
    min-height: 82px;
}
.webCatalogChecks {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}
.webCatalogChecks label {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #171717;
    font-size: 13px;
    font-weight: 800;
}
.webCatalogChecks input {
    width: auto;
}
.webModifierManager {
    margin-top: 18px;
}
.webModifierGroups {
    display: grid;
    gap: 14px;
    margin-top: 14px;
}
.webModifierGroup {
    padding: 14px;
    border: 1px solid #e6ddd2;
    border-radius: 16px;
    background: #fffaf5;
}
.webModifierGroupHead {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}
.webModifierGroupHead h3 {
    margin: 0;
    color: #00789d;
}
.webModifierGroupHead small {
    color: #6b7280;
}
.webModifierGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(230px,1fr));
    gap: 10px;
}
.webModifierRow {
    display: grid;
    gap: 8px;
    padding: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #fff;
}
.webModifierRow label {
    display: grid;
    gap: 5px;
    color: #6b7280;
    font-size: 12px;
    font-weight: 800;
}
.webModifierStatus {
    width: max-content;
    padding: 5px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 950;
}
.webModifierStatus.draft {
    background: #fff3d5;
    color: #7a4e00;
}
.webModifierStatus.live {
    background: #e8f7ee;
    color: #176b3a;
}
.webModifierToggle {
    display: flex !important;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 8px;
    color: #171717 !important;
}
.webModifierToggle input {
    width: auto;
}
.webRequestCard {
    border: 1px solid #e5e7eb;
    border-radius: 15px;
    padding: 14px;
    margin-top: 10px;
    background: #fff;
}
.webRequestTop {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}
.webRequestActions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
}
@media (max-width: 900px) {
    .webOrderLayout {
        grid-template-columns: 1fr;
    }
    .webCart {
        position: static;
    }
    .webStaffConfig {
        grid-template-columns: 1fr 1fr;
    }
    .webHoursRow { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 520px) {
    .webProductGrid {
        grid-template-columns: 1fr 1fr;
    }
    .webProductImage {
        height: 110px;
    }
    .webProductBody {
        padding: 11px;
    }
    .webStaffConfig {
        grid-template-columns: 1fr;
    }
    .webOrderingBanner { margin-left: 14px; margin-right: 14px; flex-direction: column; align-items: flex-start; }
    .webHoursHead { flex-direction: column; }
    .webHoursRow { grid-template-columns: 1fr; }
    .webOrderingEmergency { flex-direction: column; align-items: stretch; }
    .webOrderingEmergency button { width: 100%; }
}