/* ==========================================================
   Right Grocery Store (RGS) — "Fresh Greens" light theme
   ----------------------------------------------------------
   Soft off-white/pale-green background + white cards with
   gentle shadows + deep green accents for buttons/active
   states + warm gold reserved for money/budget highlights.
   NOTE: Google Fonts are loaded via <link rel="preconnect"> +
   <link rel="stylesheet"> in the <head> (see includes/admin_header.php
   and includes/employee_header.php) instead of @import here, since
   @import blocks the whole page's first render until it resolves.
   Type: Poppins (display/headings) + Inter (body/UI) +
   JetBrains Mono (money, order codes).
   ========================================================== */


:root {
    --bg:            #F4F9F3;
    --bg-deep:       #EAF3E8;
    --sidebar-bg:    #FFFFFF;
    --topbar-bg:     rgba(255,255,255,0.9);
    --card:          #FFFFFF;
    --card-2:        #F2F8F1;
    --green:         #1F7A4D;
    --green-hover:   #17603B;
    --gold:          #C6821F;
    --gold-soft:     rgba(198,130,31,0.12);
    --text:          #1B2A20;
    --text-muted:    #74897C;
    --border:        #E4EEE1;
    --success:       #2D8659;
    --success-soft:  rgba(45,134,89,0.12);
    --warn:          #C6821F;
    --warn-soft:     rgba(198,130,31,0.12);
    --danger:        #D6493D;
    --danger-soft:   rgba(214,73,61,0.10);
    --info:          #2E7CC0;
    --info-soft:     rgba(46,124,192,0.10);

    --font-display: 'Poppins', sans-serif;
    --font-body: 'Inter', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --shadow-sm: 0 1px 3px rgba(27,42,32,0.06);
    --shadow-md: 0 10px 26px rgba(27,42,32,0.08);
    --shadow-lg: 0 24px 54px rgba(27,42,32,0.14);
    --sidebar-w: 252px;
}

* { box-sizing: border-box; }
html, body {
    margin: 0; padding: 0;
    font-family: var(--font-body);
    background: linear-gradient(180deg, var(--bg), var(--bg-deep) 600px);
    background-attachment: fixed;
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    font-size: 15px;
}
h1, h2, h3, h4, .display {
    font-family: var(--font-display);
    color: var(--text);
    margin: 0 0 4px;
    letter-spacing: -0.01em;
    font-weight: 600;
}
a { color: var(--green-hover); text-decoration: none; }
a:hover { text-decoration: underline; }
.mono { font-family: var(--font-mono); font-weight: 500; }
img { max-width: 100%; }
:focus-visible { outline: 2px solid var(--green-hover); outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* Thin, unobtrusive scrollbars everywhere (esp. the sidebar) */
* { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
*::-webkit-scrollbar-thumb:hover { background: var(--green); }

.brand-mark-img { display: block; border-radius: 10px; box-shadow: 0 3px 10px rgba(22,131,79,0.35); }

/* ---------------- Layout shells ---------------- */
.app-shell { display: flex; min-height: 100vh; }
.sidebar {
    width: var(--sidebar-w);
    background: var(--sidebar-bg);
    color: var(--text);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 40;
    transition: transform 0.25s ease;
    border-right: 1px solid var(--border);
    box-shadow: 2px 0 14px rgba(27,42,32,0.04);
}
.sidebar-brand {
    padding: 22px 20px 18px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.02rem;
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: 12px;
}
.sidebar-nav { padding: 16px 12px; overflow-y: auto; flex: 1; }
.sidebar-section-label {
    font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.11em;
    color: var(--text-muted); opacity: .6; margin: 22px 12px 8px;
    font-weight: 700;
    display: flex; align-items: center; gap: 8px;
}
.sidebar-section-label:first-of-type { margin-top: 12px; }
.sidebar-section-label::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.sidebar-nav a {
    display: flex; align-items: center; gap: 12px;
    padding: 9px 12px; border-radius: var(--radius-md);
    color: var(--text-muted);
    font-size: 0.87rem; font-weight: 500;
    margin-bottom: 3px;
    position: relative;
    transition: background .16s ease, color .16s ease;
}
.sidebar-nav .nav-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 9px;
    background: rgba(27,42,32,0.045); font-size: 0.95rem; flex-shrink: 0;
    transition: background .16s ease;
}
.sidebar-nav a:hover { background: var(--card); color: var(--text); text-decoration: none; }
.sidebar-nav a:hover .nav-icon { background: rgba(32,168,102,0.18); }
.sidebar-nav a.active {
    background: var(--green);
    color: #fff; font-weight: 600;
}
.sidebar-nav a.active .nav-icon { background: rgba(255,255,255,0.16); }
.sidebar-foot { padding: 15px 18px; border-top: 1px solid var(--border); font-size: 0.81rem; }
.sidebar-foot .who { color: var(--text); font-weight: 700; font-family: var(--font-display); }
.sidebar-foot a { color: var(--text-muted); }

/* ---------------- Sidebar budget meter + mini-cart (employee) ---------------- */
.sidebar-block { padding: 4px 12px 14px; }
.sb-budget-figure { font-family: var(--font-display); font-size: 1.28rem; font-weight: 700; color: var(--gold); }
.sb-budget-figure span { display: block; font-size: 0.68rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; margin-top: 1px; }
.sb-budget-figure.over { color: var(--danger); }
.sb-budget-bar { height: 7px; border-radius: 999px; background: var(--border); overflow: hidden; margin: 9px 0 6px; }
.sb-budget-fill { height: 100%; background: var(--gold); border-radius: 999px; transition: width .3s ease; }
.sb-budget-fill.over { background: var(--danger); }
.sb-budget-sub { display: flex; justify-content: space-between; font-size: 0.71rem; color: var(--text-muted); }
.sb-budget-locked { font-size: 0.78rem; color: var(--danger); font-weight: 600; line-height: 1.5; }
.sb-budget-locked span { font-weight: 500; opacity: .8; font-size: 0.71rem; }
.sb-cart-count { background: var(--green); color: #fff; font-size: 0.62rem; padding: 1px 7px; border-radius: 999px; margin-left: 4px; }
.sb-cart-empty { font-size: 0.78rem; color: var(--text-muted); padding: 6px 0 10px; }
.sb-cart-list { max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.sb-cart-item { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 7px 9px; }
.sb-cart-item-name { font-size: 0.78rem; font-weight: 600; color: var(--text); line-height: 1.3; }
.sb-cart-item-meta { font-size: 0.7rem; color: var(--text-muted); margin-top: 2px; }
.sb-cart-item-remove { background: none; border: none; color: var(--text-muted); font-size: 1rem; cursor: pointer; line-height: 1; padding: 2px 4px; flex-shrink: 0; }
.sb-cart-item-remove:hover { color: var(--danger); }
.sb-cart-charges { font-size: 0.74rem; color: var(--text-muted); border-top: 1px dashed var(--border); padding-top: 8px; }
.sb-cart-charges > div { display: flex; justify-content: space-between; padding: 2px 0; }

/* ---------------- "Already in cart" tick on product cards ---------------- */
.product-card { position: relative; }
.product-card.in-cart { border-color: var(--green-hover); }
.in-cart-badge {
    position: absolute; top: 10px; right: 10px; z-index: 2;
    background: var(--green-hover); color: #fff; font-size: 0.68rem; font-weight: 700;
    padding: 3px 9px 3px 7px; border-radius: 999px; display: flex; align-items: center; gap: 4px;
    box-shadow: var(--shadow-sm);
}

.main { margin-left: var(--sidebar-w); flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* ---------------- "Complete My Order" filler picker ---------------- */
.filler-picker { display: flex; flex-direction: column; gap: 8px; }
.filler-option { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--card-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 14px; }
.filler-option span { font-weight: 600; font-size: 0.88rem; }

/* ---------------- Product package cards (redesigned, less cramped) ---------------- */
.package-row-card { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card); padding: 16px 18px; margin-bottom: 14px; }
.pkg-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.pkg-card-badge { font-weight: 700; font-size: 0.85rem; color: var(--gold); }
.pkg-card-top .remove-package-row { background: none; border: none; color: var(--danger); font-size: 0.78rem; font-weight: 600; cursor: pointer; padding: 4px 8px; }
.pkg-card-top .remove-package-row:hover { text-decoration: underline; }
.suggest-check { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--text); margin: 10px 0 2px; cursor: pointer; }
.suggest-check input { width: 17px; height: 17px; accent-color: var(--green-hover); }
.pkg-advanced { margin-top: 12px; border-top: 1px dashed var(--border); padding-top: 10px; }
.pkg-advanced summary { cursor: pointer; font-size: 0.78rem; font-weight: 600; color: var(--text-muted); list-style: none; }
.pkg-advanced summary::-webkit-details-marker { display: none; }
.pkg-advanced summary::before { content: '▸ '; }
.pkg-advanced[open] summary::before { content: '▾ '; }
.pkg-advanced .form-grid { margin-top: 10px; }
.topbar {
    background: var(--topbar-bg); backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border);
    padding: 16px 28px;
    display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: 0; z-index: 30;
}
.topbar .menu-btn { display: none; }
.topbar h1 { font-size: 1.16rem; }
.content { padding: 26px 28px 60px; }

/* Employee top nav */
.emp-nav {
    background: var(--sidebar-bg);
    padding: 0 24px;
    display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: 0; z-index: 30;
    border-bottom: 1px solid var(--border);
}
.emp-nav-brand { color: var(--text); font-family: var(--font-display); font-weight: 700; padding: 14px 0; display: flex; align-items: center; gap: 9px; }
.emp-nav-links { display: flex; gap: 2px; }
.emp-nav-links a { color: var(--text-muted); padding: 17px 13px; font-size: 0.87rem; font-weight: 600; border-bottom: 2px solid transparent; transition: color .15s ease, border-color .15s ease; }
.emp-nav-links a:hover { text-decoration: none; color: var(--text); }
.emp-nav-links a.active { color: var(--text); border-bottom-color: var(--green-hover); }
.emp-nav-right { display: flex; align-items: center; gap: 16px; }
.emp-cart-badge { position: relative; color: var(--text); font-size: 1.25rem; transition: transform .15s ease; }
.emp-cart-badge:hover { transform: scale(1.08); }
.emp-cart-count {
    position: absolute; top: -7px; right: -11px; background: var(--gold);
    color: #241a06; font-size: 0.65rem; font-weight: 700; border-radius: 10px; padding: 2px 6px;
}
.emp-content { max-width: 1180px; margin: 0 auto; padding: 28px 20px 60px; }

/* ---------------- Cards / stats ---------------- */
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.card-pad { padding: 22px 24px; }
.card-header { padding: 18px 24px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.card-header h2, .card-header h3 { margin: 0; font-size: 1.04rem; }

.stat-grid { display: grid; gap: clamp(8px, 1.2vw, 16px); grid-template-columns: repeat(6, minmax(0, 1fr)); margin-bottom: 22px; }
@media (max-width: 760px) { .stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 460px) { .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.stat-card { position: relative; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 14px; min-width: 0; container-type: inline-size; box-shadow: var(--shadow-sm); overflow: hidden; }
.stat-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--green); }
.stat-card .label { font-size: clamp(.58rem, 6.4cqw, .73rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.stat-card .value { font-family: var(--font-display); font-size: clamp(.8rem, 11.5cqw, 1.7rem); white-space: nowrap; font-weight: 700; margin-top: 7px; color: var(--text); }
.stat-card .value.gold { color: var(--gold); }
.stat-card .value.leaf { color: var(--green-hover); }
.stat-card .value.danger { color: var(--danger); }
.stat-card .sub { font-size: 0.78rem; color: var(--text-muted); margin-top: 3px; }

/* ---------------- Signature: split ribbon ---------------- */
.split-bar { height: 14px; border-radius: 999px; overflow: hidden; display: flex; position: relative; background: var(--border); margin: 12px 0 10px; width: 100%; }
.split-bar .seg-company { background: var(--gold); height: 100%; position: relative; overflow: hidden; }
.split-bar .seg-employee { background: var(--green); height: 100%; position: relative; overflow: hidden; }
.split-bar .seg-company::after, .split-bar .seg-employee::after {
    content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
    animation: shimmer-sweep 2.8s ease-in-out infinite;
}
@keyframes shimmer-sweep { 0% { left: -60%; } 100% { left: 130%; } }
.split-legend { display: flex; gap: 20px; font-size: 0.81rem; color: var(--text-muted); flex-wrap: wrap; font-weight: 500; }
.split-legend .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 7px; }
.split-legend .dot.company { background: var(--gold); }
.split-legend .dot.employee { background: var(--green); }

/* ---------------- Buttons (rounded, not pill-heavy) ---------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 18px; border-radius: var(--radius-md); font-size: 0.87rem; font-weight: 600; border: 1px solid transparent; cursor: pointer; font-family: var(--font-body); transition: all .16s ease; line-height: 1.3; position: relative; overflow: hidden; }
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--green); color: #fff; }
.btn-primary:hover { background: var(--green-hover); }
.btn-gold { background: var(--gold); color: #241a06; }
.btn-gold:hover { filter: brightness(1.08); }
.btn-outline { background: var(--card-2); border-color: var(--border); color: var(--text); }
.btn-outline:hover { background: var(--border); border-color: var(--green-hover); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { filter: brightness(1.1); }
.btn-sm { padding: 6px 13px; font-size: 0.78rem; border-radius: var(--radius-sm); }
.btn-block { width: 100%; }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.btn-icon { padding: 8px 10px; border-radius: var(--radius-sm); }
@keyframes btn-ripple-anim { to { transform: scale(2.6); opacity: 0; } }
.btn-ripple {
    position: absolute; border-radius: 50%; background: rgba(255,255,255,0.35);
    transform: scale(0); animation: btn-ripple-anim .55s ease-out forwards; pointer-events: none;
}

/* ---------------- Forms ---------------- */
label { display: block; font-size: 0.81rem; font-weight: 700; margin-bottom: 6px; color: var(--text); }
.form-row { margin-bottom: 17px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 17px; }
input:not([type]), input[type=text], input[type=password], input[type=number], input[type=search],
input[type=email], input[type=date], input[type=tel], input[type=url], input[type=time], select, textarea {
    width: 100%; padding: 11px 14px; border: 1px solid var(--border);
    border-radius: var(--radius-md); font-size: 0.9rem; font-family: var(--font-body);
    background: var(--card-2); color: var(--text);
    transition: border-color .15s ease, box-shadow .15s ease;
}
input::placeholder, textarea::placeholder { color: var(--text-muted); opacity: 0.6; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--green-hover); box-shadow: 0 0 0 3px rgba(32,168,102,0.18); }
select option { background: var(--card-2); color: var(--text); }
.help-text { font-size: 0.77rem; color: var(--text-muted); margin-top: 5px; }
fieldset { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px 20px; margin: 0 0 20px; }
legend { font-weight: 700; font-size: 0.85rem; padding: 0 8px; color: var(--green-hover); font-family: var(--font-display); }

/* ---- Password field with show/hide toggle ---- */
.password-field { position: relative; display: flex; }
.password-field input { padding-right: 42px; }
.pw-toggle {
    position: absolute; right: 4px; top: 4px; bottom: 4px; width: 34px;
    border: none; background: transparent; cursor: pointer; font-size: 1rem;
    border-radius: var(--radius-sm); color: var(--text-muted); opacity: 0.8;
    transition: opacity .15s ease, background .15s ease;
}
.pw-toggle:hover { opacity: 1; background: var(--border); }

/* ---- Unified filter bar: search + dropdowns + button, one pill container ---- */
.filter-bar {
    display: flex; align-items: stretch; gap: 0; background: var(--card-2); border: 1px solid var(--border);
    border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); flex-wrap: nowrap;
}
.filter-bar .search-wrap { flex: 1; min-width: 140px; position: relative; }
.filter-bar input[type=search] { border: none; border-radius: 0; padding: 12px 14px 12px 42px; background: transparent; box-shadow: none !important; }
.filter-bar select { border: none; border-radius: 0; border-left: 1px solid var(--border); background: var(--card-2); padding: 12px 34px 12px 16px; font-size: 0.85rem; font-weight: 500; max-width: 190px; }
.filter-bar .btn { border-radius: 0; margin: 0; }
@media (max-width: 760px) {
    .filter-bar { flex-wrap: wrap; border-radius: var(--radius-lg); }
    .filter-bar select, .filter-bar input[type=search] { border-left: none; border-top: 1px solid var(--border); }
    .filter-bar .search-wrap input { border-top: none; }
}

.search-wrap { position: relative; }
.search-wrap input[type=search] { padding-left: 40px; }
.search-wrap::before {
    content: ''; position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
    width: 16px; height: 16px; pointer-events: none; background: var(--text-muted);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ---------------- Package rows (product add/edit) ---------------- */
.package-row { background: var(--card-2); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px 16px; margin-bottom: 10px; }

/* ---------------- Tables ---------------- */
.table-wrap { overflow-x: auto; border-radius: var(--radius-md); }
table { width: 100%; border-collapse: collapse; font-size: 0.87rem; }
thead th { text-align: left; padding: 12px 16px; background: var(--card-2); color: var(--text-muted); font-weight: 700; font-size: 0.72rem; text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid var(--border); white-space: nowrap; }
tbody td { padding: 13px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; }
tbody tr { transition: background .12s ease; }
tbody tr:hover { background: rgba(27,42,32,0.025); }
tbody tr:last-child td { border-bottom: none; }

/* ---------------- Actions layout: primary row + separated danger zone ---------------- */
.actions-grid { display: flex; flex-direction: column; gap: 8px; min-width: 200px; }
.actions-grid .actions-row { display: flex; gap: 6px; flex-wrap: wrap; }
.actions-grid .actions-row > a, .actions-grid .actions-row > form { flex: 1; min-width: 78px; }
.actions-grid .actions-row .btn { width: 100%; }
.actions-grid .actions-danger { border-top: 1px dashed var(--border); padding-top: 8px; margin-top: 2px; }
.actions-grid .actions-danger form, .actions-grid .actions-danger .btn { width: 100%; display: block; }

/* ---------------- Badges (dark bg + colored text) ---------------- */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; letter-spacing: .01em; }
.badge-active, .badge-Received { background: var(--success-soft); color: var(--success); }
.badge-inactive, .badge-Cancelled { background: var(--danger-soft); color: var(--danger); }
.badge-Ordered { background: var(--warn-soft); color: var(--warn); }
.badge-Booked { background: var(--info-soft); color: var(--info); }
.badge-Ready { background: var(--gold-soft); color: var(--gold); }
.badge-low { background: var(--danger-soft); color: var(--danger); }
.badge-select { padding: 4px 8px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; border: 1px solid var(--border); background: var(--card); }

/* ---------------- Alerts / flash ---------------- */
.alert { padding: 13px 18px; border-radius: var(--radius-md); font-size: 0.87rem; margin-bottom: 15px; border: 1px solid transparent; font-weight: 500; }
.alert-success { background: var(--success-soft); color: var(--success); border-color: rgba(63,190,124,0.3); }
.alert-error { background: var(--danger-soft); color: var(--danger); border-color: rgba(224,104,94,0.3); }
.alert-warn { background: var(--warn-soft); color: var(--warn); border-color: rgba(217,164,65,0.3); }
.alert-info { background: var(--info-soft); color: var(--info); border-color: rgba(89,166,224,0.3); }
.alert-persistent { position: sticky; top: 0; z-index: 5; }

/* ---------------- Login pages ---------------- */
.auth-wrap {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background:
        radial-gradient(circle at 15% 15%, rgba(22,131,79,0.25), transparent 45%),
        radial-gradient(circle at 85% 85%, rgba(217,164,65,0.12), transparent 45%),
        var(--bg-deep);
    padding: 20px;
}
.auth-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); width: 100%; max-width: 460px; padding: 38px 34px; }
.auth-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.auth-brand .name { font-family: var(--font-display); font-weight: 700; font-size: 1.12rem; line-height: 1.2; color: var(--text); }
.auth-brand .sub { font-size: 0.78rem; color: var(--text-muted); }
.auth-switch { text-align: center; margin-top: 18px; font-size: 0.85rem; color: var(--text-muted); }
.auth-demo { background: var(--card-2); border-radius: var(--radius-md); padding: 11px 14px; font-size: 0.77rem; margin-top: 20px; color: var(--text-muted); border: 1px dashed var(--border); }

/* ---------------- Shop / product grid ---------------- */
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(226px, 1fr)); gap: 18px; }
.product-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.product-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--green); }
.product-card .thumb { height: 148px; background: var(--card-2); display: flex; align-items: center; justify-content: center; font-size: 2.2rem; color: var(--green-hover); }
.product-card .body { padding: 15px 17px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
/* The form (package select, qty stepper, price, button) grows to fill any
   leftover vertical space in the card, and the button itself is pushed to
   the very bottom via margin-top:auto. This keeps "Add to Cart" buttons
   lined up in a straight row across the grid even when a neighbouring card
   has an extra line (e.g. "Max X per order") or a longer product name that
   wraps to two lines — the natural height differences are absorbed above
   the button instead of shifting it up or down. */
.js-cart-form { display: flex; flex-direction: column; flex: 1; }
.js-cart-form .js-add-btn { margin-top: auto; }
.product-card .name { font-weight: 600; font-size: 0.96rem; font-family: var(--font-display); color: var(--text); }
.product-card .cat { font-size: 0.7rem; color: var(--green-hover); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.product-card .price { font-family: var(--font-mono); font-weight: 700; color: var(--green-hover); font-size: 1.04rem; margin-top: auto; }
.pkg-select { background: var(--bg); border-color: var(--border); font-size: 0.85rem; }
.qty-stepper { display: flex; align-items: center; gap: 9px; margin-top: 4px; }
.qty-stepper button { width: 32px; height: 32px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--card-2); cursor: pointer; font-weight: 700; font-size: 1.05rem; transition: all .15s ease; color: var(--green-hover); }
.qty-stepper button:hover { background: var(--green); border-color: var(--green); color: #fff; }
.qty-stepper button[disabled] { opacity: 0.4; cursor: not-allowed; }
.qty-stepper input { width: 58px; text-align: center; padding: 7px; font-weight: 600; background: var(--bg); }

/* ---- Locked shop grid: dim & disable interaction cues on product cards ---- */
.shop-locked .product-card { opacity: 0.55; filter: grayscale(45%); }
.shop-locked .product-card:hover { transform: none; box-shadow: var(--shadow-sm); border-color: var(--border); }

/* ---------------- Cart / checkout summary ---------------- */
.summary-row { display: flex; justify-content: space-between; padding: 9px 0; font-size: 0.9rem; }
.summary-row.total { font-weight: 700; font-size: 1.15rem; border-top: 1px dashed var(--border); margin-top: 8px; padding-top: 14px; font-family: var(--font-display); }
.summary-row .neg { color: var(--gold); font-weight: 600; }

/* ---------------- Utility ---------------- */
.flex { display: flex; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; }
.mt-8{margin-top:8px;} .mt-16{margin-top:16px;} .mt-24{margin-top:24px;}
.mb-0{margin-bottom:0;} .mb-8{margin-bottom:8px;} .mb-16{margin-bottom:16px;}
.text-muted { color: var(--text-muted); }
.text-danger { color: var(--danger); font-weight: 700; }
.text-sm { font-size: 0.82rem; }
.text-right{text-align:right;}
.empty-state { text-align: center; padding: 56px 20px; color: var(--text-muted); }
.empty-state .icon { font-size: 2.6rem; margin-bottom: 12px; }
.pagination { display: flex; gap: 7px; margin-top: 20px; flex-wrap: wrap; }
.pagination a, .pagination span { padding: 7px 14px; border: 1px solid var(--border); border-radius: var(--radius-md); font-size: 0.82rem; font-weight: 600; transition: all .15s ease; color: var(--text-muted); }
.pagination a:hover { border-color: var(--green-hover); color: var(--text); text-decoration: none; }
.pagination a.active { background: var(--green); color: #fff; border-color: transparent; }

/* ---------------- Discount meter (employee nav) ---------------- */
.discount-meter { display: flex; align-items: center; gap: 9px; background: var(--card-2); border: 1px solid var(--border); padding: 7px 14px; border-radius: 999px; color: var(--text); font-size: 0.78rem; }
.discount-meter-locked { background: rgba(224,104,94,0.1); border-color: rgba(224,104,94,0.3); }
.discount-meter .dm-bar { width: 46px; height: 6px; border-radius: 999px; background: var(--border); overflow: hidden; }
.discount-meter .dm-bar-fill { height: 100%; background: var(--gold); border-radius: 999px; transition: width .3s ease; }
.discount-meter .dm-text b { font-family: var(--font-mono); color: var(--gold); }
.discount-meter .dm-sub { opacity: 0.75; font-size: 0.72rem; display: block; }
@media (max-width: 760px) {
    .discount-meter .dm-sub { display: none; }
    .discount-meter { padding: 6px 10px; }
}

/* ---------------- Discount card (shop page) ---------------- */
.discount-card { background: var(--card); border: 1px solid var(--green); border-radius: var(--radius-lg); padding: 18px 22px; margin-bottom: 16px; display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.discount-card .dc-label { font-size: 0.74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); font-weight: 700; }
.discount-card .dc-value { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; margin-top: 3px; color: var(--gold); }
.discount-card .dc-bar { flex: 1; min-width: 160px; }
.discount-card .split-bar { margin: 6px 0 4px; background: var(--border); }
.discount-card .split-legend { color: var(--text-muted); }

.live-price-display { font-size: 0.88rem; color: var(--green-hover); font-weight: 700; font-family: var(--font-mono); }

/* ---------------- Motion & polish ---------------- */
@keyframes float-slow { 0%, 100% { transform: translateY(0) translateX(0); } 50% { transform: translateY(-14px) translateX(6px); } }
@keyframes float-slower { 0%, 100% { transform: translateY(0) translateX(0); } 50% { transform: translateY(12px) translateX(-8px); } }
@keyframes pulse-badge { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
@keyframes fade-in-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes alert-slide-in { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } }

.card, .stat-card { transition: transform .2s ease, box-shadow .2s ease; }
.stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.card:hover { box-shadow: var(--shadow-md); }
.emp-cart-count { animation: pulse-badge 1.8s ease-in-out infinite; }
.alert { animation: alert-slide-in .3s ease; }

.product-grid .product-card { animation: fade-in-up .35s ease backwards; }
.product-grid .product-card:nth-child(1) { animation-delay: .02s; }
.product-grid .product-card:nth-child(2) { animation-delay: .06s; }
.product-grid .product-card:nth-child(3) { animation-delay: .10s; }
.product-grid .product-card:nth-child(4) { animation-delay: .14s; }
.product-grid .product-card:nth-child(5) { animation-delay: .18s; }
.product-grid .product-card:nth-child(6) { animation-delay: .22s; }

/* ---------------- Category pills row ---------------- */
.category-pills { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.category-pill {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 16px; border-radius: 999px; background: var(--card);
    border: 1px solid var(--border); color: var(--text); font-size: 0.83rem; font-weight: 600;
    box-shadow: var(--shadow-sm); transition: all .15s ease; white-space: nowrap;
}
.category-pill:hover { border-color: var(--green); text-decoration: none; color: var(--text); }
.category-pill.active { background: var(--green); border-color: var(--green); color: #fff; }

/* ---------------- Category badge colors (cycled by category name) ---------------- */
.cat-badge-0 { color: #C6821F; }
.cat-badge-1 { color: #2E7CC0; }
.cat-badge-2 { color: #B08A2E; }
.cat-badge-3 { color: #D6493D; }
.cat-badge-4 { color: #7B4FC2; }
.cat-badge-5 { color: #2D8659; }
.cat-badge-6 { color: #C24F8A; }
.cat-badge-7 { color: #3C9AA6; }

/* ---------------- Greeting box (topbar) ---------------- */
.greeting-box {
    display: flex; align-items: center; gap: 10px;
    background: var(--card); border: 1px solid var(--border); border-radius: 999px;
    padding: 7px 16px 7px 10px; box-shadow: var(--shadow-sm);
}
.greeting-box .sun-icon {
    width: 32px; height: 32px; border-radius: 50%; background: var(--warn-soft);
    display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0;
}
.greeting-box .greet-text { font-size: 0.68rem; color: var(--text-muted); font-weight: 600; line-height: 1.3; }
.greeting-box .greet-name { font-size: 0.86rem; font-weight: 700; color: var(--text); line-height: 1.3; }

/* ---------------- Footer ribbon banner ---------------- */
.footer-ribbon {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
    background: var(--card-2); border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: 16px 24px; margin-top: 24px; font-weight: 600; font-size: 0.88rem; color: var(--text);
}
.footer-ribbon .tagline-script { font-family: 'Georgia', serif; font-style: italic; color: var(--green-hover); font-size: 1rem; }

/* ---------------- Decorative leaf flourish (matches the original reference design) ---------------- */
.leaf-deco { position: relative; text-align: right; padding: 4px 8px 0 0; }
.leaf-deco .script { font-family: 'Georgia', serif; font-style: italic; color: var(--green-hover); font-size: 1.05rem; line-height: 1.3; opacity: 0.85; }
.leaf-deco .leaves { font-size: 1.3rem; opacity: 0.55; letter-spacing: -6px; }
@media (max-width: 900px) { .leaf-deco { display: none; } }

.page-footer { display: flex; justify-content: space-between; align-items: center; padding: 22px 4px 4px; margin-top: 20px; border-top: 1px solid var(--border); font-size: 0.78rem; color: var(--text-muted); }
.page-footer a { color: var(--green-hover); font-weight: 600; }
.stat-grid .stat-card { animation: fade-in-up .35s ease backwards; }

.auth-wrap { position: relative; overflow: hidden; }
.auth-card { position: relative; z-index: 1; animation: fade-in-up .4s ease; }

/* ---------------- Sticky top zone (topbar + mobile budget bar as one unit) ----------------
   Both used to be sticky independently at top:0, which made the budget bar
   stack UNDER the topbar and disappear while scrolling. Wrapping them in one
   sticky container keeps both pinned together, in the right order, always. */
.emp-sticky-head { position: sticky; top: 0; z-index: 30; background: var(--topbar-bg); }
.emp-sticky-head .topbar,
.emp-sticky-head .mobile-budget-bar { position: static; }

/* Dark overlay behind the mobile sidebar — tap it to close the menu. */
.sidebar-overlay {
    display: none;
    position: fixed; inset: 0; background: rgba(15,26,19,0.45);
    z-index: 39;
}
@media (max-width: 900px) {
    .sidebar-overlay.open { display: block; }
}

/* ---------------- Mobile sticky budget bar (employee, hidden on desktop) ---------------- */
.mobile-budget-bar {
    display: none;
    align-items: center; justify-content: center; gap: 8px;
    background: var(--card); border-bottom: 1px solid var(--border);
    padding: 8px 14px; font-size: 0.82rem; font-weight: 600; color: var(--text);
}
.mobile-budget-bar .mbb-figure { font-family: var(--font-mono); font-weight: 700; color: var(--gold); }
.mobile-budget-bar .mbb-figure.over { color: var(--danger); }
.mobile-budget-bar .mbb-label { color: var(--text-muted); font-weight: 500; font-size: 0.78rem; }
.mobile-budget-bar .mbb-shop-link {
    margin-right: auto; display: inline-flex; align-items: center; gap: 4px;
    color: var(--green-hover); font-weight: 700; font-size: 0.8rem;
    background: rgba(32,168,102,0.1); padding: 4px 10px; border-radius: 999px;
}
.mobile-budget-bar .mbb-shop-link:hover { text-decoration: none; background: rgba(32,168,102,0.18); }

/* ---------------- Budget-locked product cards (shop grid) ---------------- */
.product-card.budget-locked { opacity: 0.5; filter: grayscale(35%); }
.budget-locked-badge {
    position: absolute; top: 10px; right: 10px; z-index: 2;
    background: var(--danger); color: #fff; font-size: 0.66rem; font-weight: 700;
    padding: 3px 9px; border-radius: 999px; box-shadow: var(--shadow-sm);
}

/* ---------------- Toast notifications (fixed, always visible regardless of scroll) ---------------- */
.toast-stack {
    position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
    z-index: 999; display: flex; flex-direction: column; gap: 8px;
    width: min(92vw, 420px); pointer-events: none;
}
.toast {
    pointer-events: auto;
    background: var(--card); border: 1px solid var(--border); border-left: 4px solid var(--info);
    border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
    padding: 12px 16px; font-size: 0.87rem; font-weight: 500; color: var(--text);
    display: flex; align-items: flex-start; gap: 10px;
    animation: alert-slide-in .25s ease;
}
.toast.toast-success { border-left-color: var(--success); }
.toast.toast-error { border-left-color: var(--danger); }
.toast.toast-warn { border-left-color: var(--warn); }
.toast .toast-close { margin-left: auto; background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: 1rem; line-height: 1; padding: 0 0 0 8px; }

/* ---------------- Cart page grid (items table + order summary) ---------------- */
.cart-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; align-items: start; }

/* ---------------- Checkout page grid (order items + summary) ---------------- */
.checkout-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 17px; align-items: start; }

/* ---------------- Page shell for smaller single-card pages (profile, change password) ---------------- */
.page-shell { max-width: 1180px; }

/* ---------------- Responsive ---------------- */
@media (max-width: 900px) {
    .sidebar { transform: translateX(-100%); }
    .sidebar.open { transform: translateX(0); }
    .main { margin-left: 0; }
    .topbar .menu-btn { display: inline-flex; }
    .emp-nav { flex-wrap: wrap; }
    .emp-nav-links { order: 3; width: 100%; overflow-x: auto; border-top: 1px solid var(--border); }
    .mobile-budget-bar { display: flex; }

    /* Topbar on mobile: Menu button pinned in its own corner (not jammed
       against the page title), title in the middle, cart/greeting in the
       far corner — three clearly separated zones instead of everything
       fighting for the same cramped space. */
    .topbar { padding: 12px 14px; gap: 10px; }
    .topbar .menu-btn { flex-shrink: 0; padding: 8px 12px; font-size: 0.8rem; }
    .topbar h1 { font-size: 1.05rem; }
    .topbar > div:first-of-type { min-width: 0; flex: 1; }
    .topbar > div:first-of-type .text-muted.text-sm { display: none; }
    .topbar .greeting-box { flex-shrink: 0; }
}
@media (max-width: 640px) {
    .content, .emp-content { padding: 14px 12px 50px; }
    .auth-card { padding: 28px 24px; }
    thead { display: none; }
    table, tbody, tr, td { display: block; width: 100%; }
    tbody tr { border: 1px solid var(--border); border-radius: var(--radius-md); margin-bottom: 11px; padding: 9px 0; background: var(--card); }
    tbody td { border-bottom: none; display: flex; justify-content: space-between; gap: 10px; padding: 9px 16px; }
    tbody td::before { content: attr(data-label); font-weight: 700; color: var(--text-muted); font-size: 0.74rem; text-transform: uppercase; }

    /* Cart: stack to one column, items above the order summary */
    .cart-grid { grid-template-columns: 1fr; gap: 14px; }
    .cart-grid > *:first-child { order: 1; }
    .cart-grid > *:nth-child(2) { order: 2; }

    /* Checkout: stack to one column, but Summary/Grand Total on top so the
       person immediately sees what they're confirming, items list below. */
    .checkout-grid { grid-template-columns: 1fr; gap: 14px; }
    .checkout-grid > *:first-child { order: 2; }
    .checkout-grid > *:nth-child(2) { order: 1; }

    /* Shop grid: 2 columns instead of 1 cramped column */
    .product-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .product-card .thumb { height: 96px; font-size: 1.5rem; }
    .product-card .body { padding: 10px 11px; gap: 5px; }
    .product-card .name { font-size: 0.8rem; line-height: 1.25; }
    .product-card .price { font-size: 0.86rem; }
    .product-card .help-text { font-size: 0.66rem; }
    .qty-stepper button { width: 26px; height: 26px; font-size: 0.9rem; }
    .qty-stepper input { width: 40px; padding: 5px; font-size: 0.82rem; }
    .live-price-display { font-size: 0.76rem; }
    .btn-block.mt-8 { padding: 8px 10px; font-size: 0.78rem; }
    .category-pills { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; margin: 0 -12px 16px; padding-left: 12px; padding-right: 12px; }
    .category-pill { flex-shrink: 0; }

    /* Standalone form pages (profile, change password) fill the width cleanly */
    .form-grid[style*="1.3fr"], .form-grid[style*="1fr 1fr"] { grid-template-columns: 1fr !important; }
}


/* RGS banner */
.rgs-banner{background:#e8f5e9;border-bottom:1px solid #c8e6c9;text-align:center}
.rgs-banner a{color:inherit;text-decoration:none;display:block}
.rgs-banner img{display:block;width:100%;max-height:220px;object-fit:cover}
.rgs-banner-text{padding:10px 16px;font-weight:600;color:#1b5e20}

.stat-card .sub { font-size: clamp(.6rem, 6.2cqw, .78rem); line-height: 1.25; }

/* ===== Shop tabs + Mart storefront ===== */
.shop-tabs { display:inline-flex; background:#fff; border:1px solid var(--border); border-radius:999px; padding:4px; margin-bottom:14px; box-shadow:var(--shadow-sm); }
.shop-tab { border:0; background:transparent; padding:9px 22px; border-radius:999px; font-weight:700; font-size:.9rem; cursor:pointer; color:var(--text-muted); font-family:var(--font-body); }
.shop-tab.active { background:var(--green); color:#fff; }
.mart-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:18px; }
.mart-card { display:block; background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; text-decoration:none; color:inherit; transition:transform .18s, box-shadow .18s; }
.mart-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); }
.mart-img { position:relative; aspect-ratio:4/5; background:var(--bg-deep); overflow:hidden; }
.mart-img img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:opacity .25s; }
.mart-img .m2 { opacity:0; }
.mart-card:hover .m2 { opacity:1; }
.mart-ph { display:flex; align-items:center; justify-content:center; width:100%; height:100%; font-size:3rem; }
.mart-body { padding:12px 14px 14px; }
.mart-cat { font-size:.68rem; text-transform:uppercase; letter-spacing:.07em; color:var(--text-muted); font-weight:700; }
.mart-name { font-weight:600; margin:3px 0 4px; line-height:1.3; }
.mart-price { font-family:var(--font-mono, monospace); font-weight:700; color:var(--green); font-size:.92rem; }
.mart-dots { display:flex; gap:5px; margin-top:8px; }
.mart-dots i { width:14px; height:14px; border-radius:50%; border:1px solid rgba(0,0,0,.18); display:inline-block; }
.back-link { display:inline-block; margin-bottom:14px; color:var(--green); font-weight:600; text-decoration:none; }
.pdp { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:32px; align-items:start; }
@media (max-width:820px){ .pdp { grid-template-columns:1fr; gap:18px; } }
.pdp-main { aspect-ratio:4/5; background:var(--bg-deep); border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--border); max-height:72vh; }
.pdp-main img { width:100%; height:100%; object-fit:cover; display:block; }
.pdp-thumbs { display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }
.pdp-th { width:68px; height:84px; padding:0; border:2px solid transparent; border-radius:10px; overflow:hidden; cursor:pointer; background:#fff; }
.pdp-th img { width:100%; height:100%; object-fit:cover; display:block; }
.pdp-th.active { border-color:var(--green); }
.pdp-title { font-family:var(--font-display); font-size:1.7rem; margin:4px 0 8px; line-height:1.2; }
.pdp-price { font-family:var(--font-mono, monospace); font-size:1.5rem; font-weight:700; color:var(--green); margin-bottom:18px; }
.pdp-opt { margin-bottom:18px; }
.pdp-opt-label { font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); margin-bottom:8px; }
.pdp-opt-label b { color:var(--text); text-transform:none; letter-spacing:0; margin-left:4px; }
.pdp-swatches { display:flex; gap:10px; flex-wrap:wrap; }
.swatch { width:34px; height:34px; border-radius:50%; background:var(--c); border:2px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.25); cursor:pointer; padding:0; }
.swatch.active { box-shadow:0 0 0 2px var(--green); }
.pdp-sizes { display:flex; gap:8px; flex-wrap:wrap; }
.size-btn { min-width:48px; padding:9px 14px; border:1px solid var(--border); background:#fff; border-radius:10px; font-weight:700; cursor:pointer; font-family:var(--font-body); }
.size-btn.active { background:var(--text); color:#fff; border-color:var(--text); }
.size-btn:disabled { opacity:.35; text-decoration:line-through; cursor:not-allowed; }
.pdp-buy { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-top:6px; }
.pdp-buy .btn { flex:1 1 200px; padding:13px 20px; }
.pdp-desc { margin-top:22px; padding-top:16px; border-top:1px solid var(--border); color:var(--text-muted); line-height:1.6; }
.pdp .pdp-buy { display:flex !important; flex-direction:row !important; flex:none !important; align-items:center; gap:12px; flex-wrap:wrap; }
.pdp .pdp-buy .qty-stepper { flex:none; width:auto; margin:0; }
.pdp .pdp-buy .btn { align-self:center; height:auto; flex:1 1 180px; margin:0; }

/* Mart product page v3: photos on top, details below */
.pdp{display:block !important;max-width:900px;margin:0 auto}
.pdp-gallery{margin-bottom:22px}
.pdp-main{position:relative;aspect-ratio:4/3 !important;max-height:70vh;background:var(--bg-deep)}
.pdp-main img{object-fit:contain !important;background:#fff}
.pdp-nav{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border:0;border-radius:50%;background:rgba(255,255,255,.9);box-shadow:0 2px 8px rgba(0,0,0,.25);font-size:1.8rem;line-height:1;cursor:pointer;color:#222}
.pdp-nav.prev{left:10px}.pdp-nav.next{right:10px}
.pdp-play{position:absolute;right:10px;bottom:10px;width:36px;height:36px;border:0;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;cursor:pointer;font-size:.95rem}
.pdp-count{position:absolute;left:10px;bottom:10px;background:rgba(0,0,0,.6);color:#fff;border-radius:12px;padding:3px 10px;font-size:.78rem}
.pdp-thumbs{overflow-x:auto;flex-wrap:nowrap !important}
.pdp-th{flex:none}

.swatch.chip{width:auto !important;height:auto !important;border-radius:999px !important;padding:9px 16px;background:#fff !important;color:var(--text);border:1.5px solid var(--border) !important;font-weight:600;font-size:.9rem;box-shadow:none !important;cursor:pointer}
.swatch.chip.active{background:var(--green) !important;color:#fff !important;border-color:var(--green) !important}

a.stat-card{display:block;color:inherit;text-decoration:none;cursor:pointer}
a.stat-card:hover{border-color:var(--green)}
a.stat-card:focus-visible{outline:2px solid var(--green);outline-offset:2px}

/* site footer */
.site-footer{margin-top:28px;padding:26px 4px 8px;border-top:1px solid var(--border);color:var(--text-muted);font-size:.86rem}
.sf-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:26px 34px}
.sf-name{font-family:var(--font-display);font-weight:700;font-size:1.1rem;color:var(--text);margin-bottom:6px}
.sf-h{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text);margin-bottom:8px}
.site-footer p{margin:0 0 5px;line-height:1.5}.sf-muted{opacity:.8}
.site-footer a{color:var(--green-hover);text-decoration:none;font-weight:600}.site-footer a:hover{text-decoration:underline}
.sf-soc{display:flex;gap:10px;margin-top:12px}
.sf-soc a{width:36px;height:36px;border-radius:50%;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;background:#fff;transition:transform .15s,box-shadow .15s}
.sf-soc a:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm);text-decoration:none}
.sf-bottom{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:20px;padding-top:14px;border-top:1px solid var(--border);font-size:.78rem}
.sf-compact{padding-top:18px}
@media (max-width:760px){.sf-grid{grid-template-columns:1fr 1fr}.sf-brand{grid-column:1/-1}}
@media (max-width:480px){.sf-grid{grid-template-columns:1fr}}

/* v2.8 responsive + polish */
.login-hero{text-align:center;margin-bottom:20px;padding:22px 16px;border-radius:var(--radius-lg);background:linear-gradient(135deg,#e9f5ec,#f6f1de);box-shadow:var(--shadow-sm)}
.login-hero img{border-radius:16px;box-shadow:var(--shadow-md);background:#fff;padding:6px}
.login-hero-name{font-family:var(--font-display);font-weight:700;font-size:1.35rem;margin-top:10px;color:var(--text)}
.login-hero-tag{font-family:Georgia,serif;font-style:italic;color:var(--green-hover);margin-top:2px}
body > .site-footer{max-width:1100px;margin:0 auto;padding:22px 20px 26px}
.topbar h1{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar > div:nth-child(2){min-width:0;flex:1 1 auto}
@media (max-width:640px){
  .filter-bar{flex-direction:column;align-items:stretch}
  .filter-bar .search-wrap{min-width:0;width:100%}
  .filter-bar select{max-width:none;width:100%;border-left:0;border-top:1px solid var(--border)}
  .topbar h1{font-size:1.05rem !important;max-width:46vw}
}
@media (max-width:1100px){
  .orders-table th:nth-child(4),.orders-table td:nth-child(4){display:none}
}
@media (max-width:640px){
  .topbar{gap:8px}
  .topbar > div:nth-of-type(1){min-width:0 !important;flex:1 1 0 !important}
  .topbar h1{max-width:none !important}
  .topbar .greeting-box{flex-shrink:1 !important;min-width:0;max-width:38vw;overflow:hidden;padding-left:8px;padding-right:10px}
  .topbar .greeting-box .greet-text{display:none !important}
  .topbar .greeting-box .greet-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

/* v2.8 polish */
.site-footer{padding-left:20px;padding-right:20px}
.btn-primary{background:linear-gradient(180deg,var(--green),var(--green-hover));box-shadow:0 2px 6px rgba(31,122,77,.28);transition:transform .15s,box-shadow .15s,filter .15s}
.btn-primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 14px rgba(31,122,77,.32);filter:brightness(1.04)}
.btn-primary:active:not(:disabled){transform:translateY(0)}
.card{border-radius:18px}
.sidebar nav a.active,.sidebar a.active{box-shadow:0 4px 12px rgba(31,122,77,.28)}
.stat-card .value{letter-spacing:-.01em}
.auth-card{backdrop-filter:blur(6px)}
:focus-visible{outline:2px solid var(--green);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}}

/* extras on a Mart product */
.pdp-addons{margin:14px 0}
.addon-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--border,#e3e8e4);border-radius:12px;margin-top:8px;cursor:pointer;background:#fff}
.addon-row span{flex:1;min-width:0;overflow-wrap:anywhere}
.addon-row b{white-space:nowrap;color:var(--primary,#1f7a4d)}
.addon-row input{width:20px;height:20px;accent-color:var(--primary,#1f7a4d);flex:none}
.addon-row:has(input:checked){border-color:var(--primary,#1f7a4d);background:rgba(31,122,77,.06)}
.addon-edit-row{display:grid;grid-template-columns:1fr 130px auto;gap:8px;align-items:center;margin-bottom:8px}
@media(max-width:520px){.addon-edit-row{grid-template-columns:1fr 100px auto}}

/* home delivery (employee) + delivery addresses (admin) */
.addr-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:18px;align-items:start}
@media(max-width:900px){.addr-grid{grid-template-columns:1fr}}
.addr-map{height:380px;border-radius:14px;overflow:hidden;border:1px solid var(--border,#e3e8e4);margin:10px 0 6px;z-index:0}
@media(max-width:600px){.addr-map{height:300px}}
.addr-search{display:flex;gap:8px;flex-wrap:wrap}
.addr-search input{flex:1 1 200px;min-width:0}
.addr-interest{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1px solid var(--border,#e3e8e4);border-radius:12px;cursor:pointer;margin-top:6px;background:rgba(31,122,77,.05)}
.addr-interest input{width:22px;height:22px;flex:none;margin-top:2px;accent-color:var(--primary,#1f7a4d)}
.addr-interest small{display:block;color:var(--muted,#6b7a72);margin-top:2px}
.addr-stats{display:flex;gap:12px;flex-wrap:wrap;margin:12px 0}
.addr-stats div{flex:1 1 160px;padding:12px 16px;border-radius:14px;background:rgba(31,122,77,.07)}
.addr-stats b{display:block;font-size:1.6rem;line-height:1.1}
.addr-stats span{font-size:.85rem;color:var(--muted,#6b7a72)}
.area-chips{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 14px}
.area-chip{padding:7px 12px;border-radius:999px;background:#fff;border:1px solid var(--border,#e3e8e4);text-decoration:none;color:inherit;font-size:.9rem}
.area-chip b{background:var(--primary,#1f7a4d);color:#fff;border-radius:999px;padding:1px 8px;margin-left:4px;font-size:.8rem}
.area-chip small{color:var(--muted,#6b7a72)}
.area-group{margin-top:18px}
.area-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;padding:8px 2px;border-bottom:2px solid var(--primary,#1f7a4d);margin-bottom:6px}
.area-head h4{margin:0;font-size:1.05rem}
.area-head span{color:var(--muted,#6b7a72);font-size:.85rem}
.addr-note{background:#fff;border:1px solid var(--border,#e3e8e4);border-left:4px solid var(--primary,#1f7a4d);border-radius:12px;padding:12px 16px;margin-bottom:16px;color:var(--text,#1c2b23);line-height:1.5}
.addr-lock{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:10px 14px;border-radius:12px;margin:0 0 12px;background:rgba(31,122,77,.07)}
.addr-lock.off{background:rgba(214,69,65,.09)}
.addr-text{font-size:1.05rem;margin:4px 0}