/* Shared Octo Crav header/footer styles. Edit this file to update every page. */
:root{--oc-bg:#fffdf8;--oc-surface:#fff;--oc-text:#24342f;--oc-muted:#66756f;--oc-line:#e5ebe7;--oc-teal:#187b68;--oc-orange:#e95b2a}
.topbar{position:sticky;top:0;z-index:1000;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px max(4vw,18px);background:rgba(255,253,248,.96);color:var(--oc-text);border-bottom:1px solid var(--oc-line);box-shadow:0 4px 22px rgba(25,55,44,.05);backdrop-filter:blur(12px)}
.topbar .brand{display:inline-flex;align-items:center;flex-shrink:0}
.brand-logo{display:block;width:auto;max-width:170px;max-height:54px;object-fit:contain}
.topbar nav{display:flex;align-items:center;gap:clamp(10px,1.7vw,24px)}
.topbar nav a{color:var(--oc-text);text-decoration:none;font-size:13px;font-weight:650;white-space:nowrap}
.topbar nav a:hover{color:var(--oc-teal)}
.mobile-menu-toggle{display:none;background:transparent;color:var(--oc-text);border:1px solid var(--oc-line);border-radius:8px;padding:8px 11px;font-size:20px;cursor:pointer}
.customer-account{display:flex;align-items:center;flex-shrink:0}
.customer-account-link{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 13px;color:var(--oc-teal);background:#fff;border:1px solid #dce7e0;border-radius:10px;text-decoration:none;font-weight:700;white-space:nowrap}
.customer-user-icon{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;font-size:24px;line-height:1}
.customer-account-link:hover{background:#eaf6f2}
.table-ribbon{padding:10px 16px;text-align:center;background:#e5f4ed;color:#176451;font-weight:700;font-size:13px}
.site-footer,footer.site-footer{background:#f0f6f2;color:var(--oc-text);border-top:1px solid var(--oc-line);padding:28px max(5vw,22px)}
.site-footer-main{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:25px;flex-wrap:wrap}
.footer-logo{max-height:48px}
.footer-links{display:flex;flex-wrap:wrap;gap:16px}
.footer-links a{color:var(--oc-text);text-decoration:none;font-size:13px;opacity:.8}
.footer-links a:hover{color:var(--oc-teal);opacity:1}
@media(max-width:900px){.topbar{position:relative;flex-wrap:wrap}.mobile-menu-toggle{display:block;margin-left:auto}.topbar nav{display:none;width:100%;flex-direction:column;align-items:stretch;padding:12px 0;order:3}.topbar nav.is-open{display:flex}.topbar nav a{text-align:left;width:100%;padding:8px 0}.customer-account{order:2}}
@media(max-width:600px){.topbar{gap:10px;padding:10px 16px}.brand-logo{max-width:135px;max-height:46px}.customer-account-link{padding:7px 9px;gap:5px}.customer-account-text{font-size:12px}.customer-user-icon{width:22px;font-size:21px}.site-footer-main{align-items:flex-start;flex-direction:column;gap:16px}.footer-links{gap:13px}}

/* Header: Logo left, navigation right */
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Navigation on the right */
.topbar nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-left: auto;
    margin-right: 20px;
    gap: 22px;
}

/* Account button at the far right */
.topbar .customer-account {
    margin-left: 0;
    flex-shrink: 0;
}

/* Remove previous centering rules */
.topbar nav {
    position: static;
    transform: none;
    left: auto;
}

@media (max-width: 900px) {
    .topbar {
        flex-wrap: wrap;
    }

    .topbar nav {
        display: none;
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        order: 4;
        margin: 0;
    }

    .topbar nav.is-open {
        display: flex;
    }
}
/* Octo Crav customer login page styles. Edit this file to update login page design. */
:root {
            --oc-green: #187b68;
            --oc-orange: #ef5b2a;
            --oc-ink: #1d302a;
            --oc-muted: #68766f;
            --oc-line: #e2eae5;
            --oc-cream: #fffaf3;
        }
        * { box-sizing: border-box; }
        body {
            margin: 0;
            min-height: 100vh;
            background: var(--oc-cream);
            color: var(--oc-ink);
            font-family: Arial, sans-serif;
        }
        .login-main {
            display: grid;
            place-items: center;
            min-height: calc(100vh - 180px);
            padding: 55px 18px 70px;
            background:
                radial-gradient(circle at 10% 15%, #e8f5ed 0, transparent 30%),
                radial-gradient(circle at 90% 85%, #ffeadf 0, transparent 30%),
                var(--oc-cream);
        }
        .login-layout {
            display: grid;
            grid-template-columns: 1fr 1fr;
            width: 100%;
            max-width: 900px;
            overflow: hidden;
            background: #fff;
            border: 1px solid var(--oc-line);
            border-radius: 24px;
            box-shadow: 0 20px 65px rgba(28,57,43,.09);
        }
        .login-welcome {
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 42px;
            background: linear-gradient(145deg, #e4f3e9, #f5f9f0);
        }
        .login-kicker {
            margin: 0 0 15px;
            color: var(--oc-green);
            font-size: 11px;
            font-weight: 900;
            letter-spacing: 2px;
        }
        .login-welcome h1 {
            margin: 0 0 16px;
            font-size: clamp(32px, 4vw, 45px);
            line-height: 1.1;
            letter-spacing: -1.5px;
        }
        .login-welcome h1 em { color: var(--oc-green); font-style: normal; }
        .login-welcome p { color: #627269; font-size: 15px; line-height: 1.8; }
        .login-food-art { margin-top: 24px; font-size: 65px; }
        .login-form-panel { padding: 42px; }
        .login-form-panel h2 { margin: 0 0 9px; font-size: 29px; letter-spacing: -.8px; }
        .login-subtitle { margin: 0 0 27px; color: var(--oc-muted); font-size: 14px; line-height: 1.6; }
        .ca-form { display: grid; gap: 18px; }
        .ca-form label { display: grid; gap: 8px; font-size: 13px; font-weight: 800; }
        .ca-form input {
            width: 100%;
            min-height: 49px;
            padding: 13px 14px;
            border: 1px solid #dce7e0;
            border-radius: 10px;
            background: #fff;
            color: var(--oc-ink);
            font: inherit;
            outline: none;
        }
        .ca-form input:focus { border-color: #69b49e; box-shadow: 0 0 0 3px rgba(24,123,104,.09); }
        .ca-btn {
            min-height: 50px;
            border: 0;
            border-radius: 10px;
            background: var(--oc-orange);
            color: #fff;
            font-size: 15px;
            font-weight: 800;
            cursor: pointer;
            transition: .2s ease;
        }
        .ca-btn:hover { background: #d94b20; transform: translateY(-1px); }
        .ca-error { padding: 12px; border-radius: 9px; background: #fff0ef; color: #a12622; font-size: 13px; line-height: 1.5; }
        .ca-links { margin: 22px 0 0; color: var(--oc-muted); font-size: 13px; line-height: 1.9; }
        .ca-links a { color: var(--oc-green); font-weight: 800; text-decoration: none; }
        @media (max-width: 760px) {
            .login-main { min-height: auto; padding: 30px 15px 45px; }
            .login-layout { max-width: 480px; grid-template-columns: 1fr; border-radius: 20px; }
            .login-welcome { padding: 25px 25px 20px; }
            .login-welcome h1 { font-size: 31px; }
            .login-welcome p { margin-bottom: 0; font-size: 13px; }
            .login-food-art { display: none; }
            .login-form-panel { padding: 28px 25px 30px; }
        }
        @media (max-width: 380px) {
            .login-form-panel, .login-welcome { padding-left: 20px; padding-right: 20px; }
        }

/* Main desktop navigation */
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.topbar #mainNav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 26px;
    flex: 1;
}

.topbar #mainNav a {
    color: #172D26;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: color .2s ease;
}

.topbar #mainNav a:hover {
    color: #F15A24;
}

.mobile-menu-toggle {
    display: none;
}

/* Mobile navigation */
@media (max-width: 768px) {
    .topbar {
        position: relative;
        flex-wrap: wrap;
        gap: 12px;
    }

    .mobile-menu-toggle {
        display: block;
        margin-left: auto;
        border: 0;
        background: transparent;
        color: #172D26;
        font-size: 27px;
        cursor: pointer;
    }

    .topbar #mainNav {
        display: none;
        flex: 0 0 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        order: 5;
        width: 100%;
        padding: 8px 0;
        border-top: 1px solid #E5EBE5;
    }

    .topbar #mainNav.is-open {
        display: flex;
    }

    .topbar #mainNav a {
        padding: 13px 8px;
        border-bottom: 1px solid #E5EBE5;
    }
}