/* ====================================================================
   Customer Portal : Phase 1 (Auth + Orders)
   Visual model: ezCater (left sidebar with lucide icons + roomy main).
   Palette: Winfield palette #231F20 / #825D2D.
   ==================================================================== */

:root {
    --account-bg: #f1f1e3;
    --account-card-bg: #fffcf4;
    --account-border: #e3e0cf;
    --account-border-strong: #cfcbb8;
    --account-text: #231f20;
    --account-text-soft: #6e6862;
    --account-text-muted: #9b948d;
    --account-primary: #231f20;
    --account-accent: #825d2d;
    --account-error: #510707;
    --account-success: #3d5a3d;
    --account-radius: 16px;
    --account-radius-lg: 16px;
    --account-shadow-soft: 0 1px 2px rgba(35, 31, 32, 0.04), 0 1px 3px rgba(35, 31, 32, 0.05);
}

.route-login,
.route-login-verify,
.route-account,
.route-account-orders,
[class*="route-account-orders-"],
.route-account-addresses,
.route-account-payment-methods,
.route-account-team,
.route-account-settings {
    background: var(--account-bg);
}

/* -------- Buttons (scoped helpers : coexist with the storefront btn) -------- */
.account-shell .btn,
.account-auth .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-weight: 600;
    font-size: 15px;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, transform 0.05s ease;
}
.account-shell .btn-primary,
.account-auth .btn-primary {
    background: var(--account-primary);
    color: #fff8ed;
}
.account-shell .btn-primary:hover,
.account-auth .btn-primary:hover {
    background: #3a3435;
}
.account-shell .btn-primary:active,
.account-auth .btn-primary:active {
    transform: translateY(1px);
}
.account-shell .btn-ghost {
    background: transparent;
    color: var(--account-primary);
    border-color: var(--account-border-strong);
}
.account-shell .btn-ghost:hover {
    background: rgba(35, 31, 32, 0.05);
}
.account-shell .btn-block,
.account-auth .btn-block {
    width: 100%;
}

/* ----------------------------- Auth (login / verify) ---------------------------- */
.account-auth {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 16px;
}
.account-auth-card {
    width: 100%;
    max-width: 440px;
    background: var(--account-card-bg);
    border-radius: var(--account-radius-lg);
    padding: 40px 32px;
    box-shadow: 0 6px 24px rgba(35, 31, 32, 0.06);
    border: 1px solid var(--account-border);
}
.account-auth-header {
    text-align: center;
    margin-bottom: 28px;
}
.account-auth-header h1 {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 6px;
    color: var(--account-text);
}
.account-auth-header p {
    font-size: 14px;
    color: var(--account-text-soft);
    margin: 0;
    line-height: 1.5;
}
.account-form {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.account-form label {
    font-size: 13px;
    font-weight: 500;
    color: var(--account-text-soft);
    margin-top: 14px;
}
.account-form input[type="email"],
.account-form input[type="text"],
.account-form input[type="tel"] {
    width: 100%;
    border: 1px solid var(--account-border-strong);
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 15px;
    color: var(--account-text);
    background: #fffcf4;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.account-form input:focus {
    outline: none;
    border-color: var(--account-primary);
    box-shadow: 0 0 0 3px rgba(130, 93, 45, 0.35);
}
.account-otp-input {
    text-align: center;
    font-size: 28px !important;
    letter-spacing: 12px;
    font-family: 'SF Mono', 'Courier New', monospace;
    padding: 16px 14px !important;
}
.account-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 0 4px;
    font-size: 14px;
    color: var(--account-text-soft);
}
.account-checkbox input {
    width: 18px;
    height: 18px;
    accent-color: var(--account-primary);
}
.account-form .btn-primary {
    margin-top: 18px;
}
.account-auth-footer {
    text-align: center;
    margin-top: 24px;
    font-size: 13px;
    color: var(--account-text-muted);
}
.account-auth-footer a {
    color: var(--account-primary);
    font-weight: 500;
    text-decoration: underline;
}
.account-auth-help {
    margin-top: 10px;
}
.account-alert {
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 14px;
    margin-bottom: 14px;
}
.account-alert.is-error {
    background: #f3e3e1;
    color: var(--account-error);
    border: 1px solid #e0c4bf;
}
.account-alert.is-success {
    background: #e6ecdf;
    color: var(--account-success);
    border: 1px solid #c2cfb6;
}
.account-alert.is-info {
    background: #f0e8d9;
    color: #623216;
    border: 1px solid #ddd0b4;
}

/* ----------------------------- Account shell ---------------------------- */
/* ezCater goes wide. We follow with 1320px so the storefront max-content
   line still feels familiar, but the portal stops being cramped. */
.account-shell {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 36px;
    max-width: 1320px;
    margin: 0 auto;
    padding: 28px 24px 96px;
}
.account-sidebar {
    background: var(--account-card-bg);
    border-radius: var(--account-radius);
    padding: 22px 14px;
    border: 1px solid var(--account-border);
    align-self: start;
    position: sticky;
    top: 16px;
    box-shadow: var(--account-shadow-soft);
}
.account-sidebar-user {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 6px 18px;
    border-bottom: 1px solid var(--account-border);
}
.account-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--account-primary);
    color: #fff8ed;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 15px;
    flex-shrink: 0;
}
.account-user-meta {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.account-user-meta strong {
    color: var(--account-text);
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.account-user-meta span {
    color: var(--account-text-soft);
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.account-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 14px;
}
.account-nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 14px;
    color: var(--account-text);
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}
.account-nav a:hover {
    background: rgba(35, 31, 32, 0.06);
}
.account-nav a.is-active {
    background: rgba(130, 93, 45, 0.12);
    color: var(--account-primary);
    font-weight: 600;
}
.account-nav-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: currentColor;
    stroke-width: 1.75;
}
.account-nav-label {
    flex: 1;
    min-width: 0;
}
.account-nav-soon {
    color: var(--account-text-muted) !important;
    pointer-events: none;
    opacity: 0.75;
}
.account-soon-tag {
    background: #f7f4e8;
    color: var(--account-text-muted);
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}
.account-nav-logout {
    margin-top: 8px;
    padding-top: 12px !important;
    border-top: 1px solid var(--account-border);
    color: var(--account-text-soft) !important;
}

/* ----------------------------- Main content ---------------------------- */
.account-main {
    min-width: 0;
}
.account-page-header {
    margin-bottom: 28px;
}
.account-page-header h1 {
    font-size: 26px;
    font-weight: 700;
    margin: 0 0 6px;
    color: var(--account-text);
    letter-spacing: -0.01em;
}
.account-page-header p {
    color: var(--account-text-soft);
    margin: 0;
    font-size: 14px;
}
.account-order-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.account-breadcrumb {
    margin-bottom: 12px;
}
.account-breadcrumb a {
    color: var(--account-text-soft);
    font-size: 13px;
    text-decoration: none;
}
.account-breadcrumb a:hover {
    color: var(--account-primary);
}

.account-card {
    background: var(--account-card-bg);
    border-radius: var(--account-radius);
    border: 1px solid var(--account-border);
    padding: 24px;
    margin-bottom: 20px;
    box-shadow: var(--account-shadow-soft);
}
.account-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}
.account-card-head h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--account-text);
}
.account-link {
    color: var(--account-primary);
    font-size: 13px;
    text-decoration: none;
    font-weight: 500;
}
.account-link:hover {
    text-decoration: underline;
}
.account-empty {
    text-align: center;
    padding: 56px 24px;
}
.account-empty-illo {
    font-size: 56px;
    line-height: 1;
    margin-bottom: 14px;
}
.account-empty h2 {
    font-size: 18px;
    margin: 0 0 6px;
    color: var(--account-text);
}
.account-empty p {
    color: var(--account-text-soft);
    margin: 0 0 18px;
}

/* Dashboard reorder block */
.account-reorder-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px;
    background: rgba(130, 93, 45, 0.06);
    border-radius: 16px;
    border: 1px solid rgba(130, 93, 45, 0.18);
    flex-wrap: wrap;
}
.account-reorder-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.account-reorder-meta strong {
    font-size: 15px;
    color: var(--account-text);
}
.account-reorder-meta span {
    font-size: 13px;
    color: var(--account-text-soft);
}
.account-reorder-total {
    font-weight: 600;
    color: var(--account-primary);
}
.account-reorder-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* Stats grid */
.account-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
}
.account-stat {
    background: var(--account-card-bg);
    border-radius: var(--account-radius);
    border: 1px solid var(--account-border);
    padding: 20px;
    box-shadow: var(--account-shadow-soft);
}
.account-stat-label {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--account-text-muted);
    margin-bottom: 6px;
}
.account-stat-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--account-text);
}

/* Tabs */
/* ── Receipts list ─────────────────────────────────────────────────── */
.account-receipts-header-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.account-receipts-expense {
    flex-shrink: 0;
    margin-top: 4px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.account-receipts-custom-form {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
    padding: 14px 16px;
    border: 1px solid var(--account-border);
    border-radius: 10px;
    background: #f7f4e8;
    margin-bottom: 14px;
}
.account-receipts-custom-form label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: var(--account-text-muted);
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}
.account-receipts-custom-form input[type="date"] {
    appearance: none;
    border: 1px solid var(--account-border);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 14px;
    background: #fffcf4;
    color: var(--account-text);
    min-width: 160px;
}
.account-receipts-custom-clear {
    align-self: center;
    margin-left: 4px;
    color: var(--account-text-muted);
    text-decoration: none;
    font-size: 13px;
}
.account-receipts-custom-clear:hover { color: var(--account-primary); text-decoration: underline; }

.account-receipts-summary {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 22px;
    margin-top: 18px;
}
.account-receipts-total {
    font-size: 28px;
    font-weight: 700;
    color: var(--account-text);
    line-height: 1.1;
}
.account-receipts-total-label {
    font-size: 12px;
    letter-spacing: 0.5px;
    color: var(--account-text-muted);
    margin-top: 2px;
}
.account-receipts-table-wrap {
    overflow-x: auto;
}
.account-receipts-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.account-receipts-table th,
.account-receipts-table td {
    padding: 12px 10px;
    text-align: left;
    border-bottom: 1px solid var(--account-border);
    vertical-align: middle;
}
.account-receipts-table th {
    font-size: 12px;
    color: var(--account-text-muted);
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}
.account-receipts-table a.account-receipts-row-link {
    color: var(--account-primary);
    text-decoration: none;
    font-weight: 600;
}
.account-receipts-table a.account-receipts-row-link:hover { text-decoration: underline; }
.account-receipts-pdf-link,
.account-receipts-reorder-btn {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 4px 2px;
    color: var(--account-text-muted);
    text-decoration: none;
    font-size: 0;
    line-height: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.account-receipts-pdf-link i,
.account-receipts-reorder-btn i {
    width: 18px;
    height: 18px;
    stroke-width: 1.6;
}
.account-receipts-pdf-link:hover,
.account-receipts-reorder-btn:hover {
    color: var(--account-primary);
}
.account-receipts-pdf-link span,
.account-receipts-reorder-btn span {
    /* Keep label for screen readers only : icon-only visually. */
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}


.account-tabs { display: flex; }
.account-tabs {
    display: flex;
    gap: 8px;
    border-bottom: 1px solid var(--account-border);
    margin-bottom: 22px;
    overflow-x: auto;
}
.account-tabs a {
    padding: 14px 4px;
    margin-right: 22px;
    color: var(--account-text-soft);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.account-tabs a:hover {
    color: var(--account-text);
}
.account-tabs a.is-active {
    color: var(--account-primary);
    border-bottom-color: var(--account-accent);
    font-weight: 600;
}
.account-tab-count {
    background: var(--account-border);
    color: var(--account-text-soft);
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    margin-left: 6px;
}

/* Orders list */
.account-orders {
    list-style: none;
    padding: 0;
    margin: 0;
    background: var(--account-card-bg);
    border-radius: var(--account-radius);
    border: 1px solid var(--account-border);
    overflow: hidden;
    box-shadow: var(--account-shadow-soft);
}
.account-order-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 170px 100px 20px;
    align-items: center;
    gap: 16px;
    padding: 18px 22px;
    color: var(--account-text);
    text-decoration: none;
    border-bottom: 1px solid var(--account-border);
    transition: background 0.15s ease;
}
.account-orders li:last-child .account-order-row {
    border-bottom: 0;
}
.account-order-row:hover {
    background: rgba(35, 31, 32, 0.03);
}
.account-order-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.account-order-meta strong {
    font-size: 14px;
    font-weight: 600;
}
.account-order-date {
    font-size: 12px;
    color: var(--account-text-muted);
}
.account-order-items {
    font-size: 12px;
    color: var(--account-text-soft);
}
.account-order-total {
    text-align: right;
    font-weight: 600;
    color: var(--account-text);
}
.account-order-chevron {
    color: var(--account-text-muted);
    font-size: 22px;
    line-height: 1;
}

/* Order detail */
.account-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 20px;
}
.account-order-items-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.account-order-items-list li {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    border-bottom: 1px dashed var(--account-border);
    padding-bottom: 12px;
}
.account-order-items-list li:last-child {
    border-bottom: 0;
}
.account-order-items-list em {
    display: block;
    font-style: normal;
    color: var(--account-text-muted);
    font-size: 13px;
    margin-top: 4px;
}
.account-order-item-mods-list {
    list-style: none;
    padding: 0;
    margin: 4px 0 0;
    color: var(--account-text-muted);
    font-size: 13px;
    line-height: 1.5;
}
.account-order-item-mods-list li {
    padding: 0;
    border: 0;
    display: list-item;
}
.account-detail-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px 24px;
    margin: 0;
}
.account-detail-meta > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.account-detail-meta dt {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--account-text-muted);
    font-weight: 600;
}
.account-detail-meta dd {
    margin: 0;
    color: var(--account-text);
    font-size: 14px;
    line-height: 1.5;
}
.account-detail-meta dd small {
    color: var(--account-text-soft);
    font-size: 13px;
}
.account-detail-meta dd a {
    color: var(--account-primary);
}

/* ----------- Orders list : view toggle + pending pill + calendar ----------- */
.account-orders-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}
.account-view-toggle {
    display: inline-flex;
    background: var(--account-card-bg);
    border: 1px solid var(--account-border);
    border-radius: 999px;
    padding: 4px;
    box-shadow: var(--account-shadow-soft);
}
.account-view-toggle a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 999px;
    color: var(--account-text-soft);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}
.account-view-toggle a:hover {
    color: var(--account-primary);
}
.account-view-toggle a.is-active {
    background: var(--account-primary);
    color: #fff8ed;
}
.account-view-toggle i[data-lucide] {
    width: 14px;
    height: 14px;
}
.status-pill.account-pending-pill {
    background: #f0e8d9;
    color: #623216;
    border: 1px solid #ddd0b4;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-weight: 600;
}
.status-pill.account-pending-pill-mini {
    background: #f0e8d9;
    color: #623216;
    border: 1px solid #ddd0b4;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    line-height: 1;
    white-space: nowrap;
    flex-shrink: 0;
}
.status-pill.account-pending-pill-mini i[data-lucide],
.status-pill.account-pending-pill-mini svg {
    width: 11px;
    height: 11px;
    flex-shrink: 0;
}
.account-order-status {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 6px;
}
.account-order-status .status-pill {
    white-space: nowrap;
}
@media (max-width: 600px) {
    .account-pending-pill-text {
        display: none;
    }
}

.account-calendar {
    background: var(--account-card-bg);
    border: 1px solid var(--account-border);
    border-radius: var(--account-radius);
    box-shadow: var(--account-shadow-soft);
    padding: 18px 20px;
}
.account-calendar-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}
.account-calendar-range {
    color: var(--account-text);
    font-size: 16px;
    font-weight: 600;
}
.account-calendar-nav-btns {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.account-calendar-nav-btns .account-icon-btn {
    width: 32px;
    height: 32px;
    background: transparent;
}
.account-cal-today {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 12px;
    margin-left: 4px;
    border: 1px solid var(--account-border-strong);
    border-radius: 999px;
    background: transparent;
    color: var(--account-text);
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    transition: border-color 0.15s ease;
}
.account-cal-today:hover {
    border-color: var(--account-primary);
}
.account-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
}
.account-calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 8px;
}
.account-calendar-weekday {
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--account-text-muted);
    padding: 6px 0;
}
.account-calendar-day {
    border: 1px solid var(--account-border);
    border-radius: 10px;
    padding: 10px;
    min-height: 120px;
    background: transparent;
    display: flex;
    flex-direction: column;
}
.account-calendar-day-month {
    min-height: 92px;
    padding: 6px 7px;
}
.account-calendar-day.is-today {
    border-color: var(--account-accent);
    background: rgba(130, 93, 45, 0.05);
}
.account-calendar-day.is-empty {
    background: transparent;
}
.account-calendar-day.is-out-of-month {
    background: transparent;
    border-color: transparent;
    opacity: 0.45;
}
.account-calendar-day.is-out-of-month .account-cal-day-num {
    color: var(--account-text-muted);
    font-weight: 500;
}
.account-calendar-day header {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 8px;
}
.account-calendar-day-month header {
    margin-bottom: 4px;
}
.account-cal-day-num {
    font-size: 18px;
    font-weight: 700;
    color: var(--account-text);
}
.account-calendar-day-month .account-cal-day-num {
    font-size: 13px;
}
.account-cal-day-wday {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--account-text-muted);
}
.account-calendar-day ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.account-calendar-day-month ul {
    gap: 3px;
}
.account-calendar-day a {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px 8px;
    background: #fffcf4;
    border: 1px solid var(--account-border);
    border-radius: 8px;
    text-decoration: none;
    color: var(--account-text);
    font-size: 12px;
    line-height: 1.3;
}
.account-calendar-day-month a {
    padding: 3px 6px;
    gap: 2px;
    font-size: 11px;
}
.account-calendar-day a:hover {
    border-color: var(--account-primary);
}
.account-cal-time {
    color: var(--account-text-muted);
    font-size: 11px;
}
.account-calendar-day-month .account-cal-time {
    font-size: 10px;
}
.account-calendar-day .status-pill {
    font-size: 10px;
    padding: 1px 6px;
    align-self: flex-start;
}
.account-calendar-day-month .status-pill {
    font-size: 9px;
    padding: 0 5px;
}

@media (max-width: 720px) {
    .account-calendar {
        padding: 0;
    }
    .account-calendar-grid,
    .account-calendar-weekdays {
        gap: 3px;
    }
    .account-calendar-day-month {
        min-height: 58px;
        padding: 4px;
        border-radius: 6px;
    }
    .account-calendar-day-month .account-cal-day-num {
        font-size: 11px;
    }
    .account-calendar-day-month a {
        padding: 2px 4px;
        font-size: 10px;
    }
    .account-calendar-day-month .account-cal-time {
        display: none;
    }
    .account-calendar-day-month .status-pill {
        display: none;
    }
    .account-calendar-weekday {
        font-size: 9px;
        padding: 4px 0;
    }
}

/* ----------- Order edit (customer-driven change request) ----------- */
.account-edit-items {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.account-edit-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border: 1px solid var(--account-border);
    border-radius: 16px;
    background: #fffcf4;
    transition: opacity 0.15s ease;
}
.account-edit-item.is-new {
    border-color: rgba(130, 93, 45, 0.4);
    background: rgba(130, 93, 45, 0.05);
}
.account-edit-item-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.account-edit-item-main strong {
    color: var(--account-text);
    font-size: 14px;
}
.account-edit-item-meta {
    color: var(--account-text-muted);
    font-size: 12px;
}
.account-edit-qty {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--account-border-strong);
    border-radius: 10px;
    overflow: hidden;
    background: #fffcf4;
}
.account-qty-btn {
    background: transparent;
    border: 0;
    width: 32px;
    height: 36px;
    font-size: 18px;
    cursor: pointer;
    color: var(--account-text);
}
.account-qty-btn:hover {
    background: rgba(35, 31, 32, 0.06);
}
.account-edit-qty-input {
    width: 48px;
    height: 36px;
    text-align: center;
    border: 0;
    font-size: 14px;
    color: var(--account-text);
    background: transparent;
    -moz-appearance: textfield;
}
.account-edit-qty-input::-webkit-outer-spin-button,
.account-edit-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.account-edit-item-total {
    min-width: 70px;
    text-align: right;
    font-weight: 600;
    color: var(--account-text);
}
.account-edit-summary {
    margin-top: 18px;
    background: rgba(35, 31, 32, 0.04);
    border-radius: 16px;
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.account-edit-summary > div {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: var(--account-text-soft);
}
.account-edit-summary > div strong {
    color: var(--account-text);
}
.account-add-from-menu {
    margin-top: 16px;
    border-top: 1px dashed var(--account-border);
    padding-top: 10px;
}
.account-add-menu-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 8px;
}
.account-add-menu-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--account-border);
    border-radius: 10px;
    background: #fffcf4;
    cursor: pointer;
    text-align: left;
    font-size: 14px;
    color: var(--account-text);
    transition: border-color 0.15s ease, background 0.15s ease;
}
.account-add-menu-item:hover {
    border-color: var(--account-primary);
    background: rgba(35, 31, 32, 0.03);
}
.account-add-menu-item strong {
    color: var(--account-primary);
}

@media (max-width: 700px) {
    .account-edit-item {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "main main"
            "qty total"
            "rem rem";
    }
    .account-edit-item-main  { grid-area: main; }
    .account-edit-qty        { grid-area: qty; }
    .account-edit-item-total { grid-area: total; }
    .account-edit-item .account-icon-btn { grid-area: rem; justify-self: end; }
}
.account-summary dl {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.account-summary dl > div {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: var(--account-text-soft);
}
.account-summary dl > div.is-total {
    padding-top: 12px;
    border-top: 1px solid var(--account-border);
    color: var(--account-text);
    font-size: 16px;
}
.account-summary dt {
    font-weight: 500;
}
.account-summary dd {
    margin: 0;
}
.account-order-notes {
    margin-top: 18px;
    border-top: 1px solid var(--account-border);
    padding-top: 14px;
}
.account-order-notes h3 {
    margin: 0 0 6px;
    font-size: 14px;
    color: var(--account-text);
}
.account-order-notes p {
    margin: 0;
    color: var(--account-text-soft);
    font-size: 14px;
}
.account-summary-actions {
    margin-top: 20px;
    border-top: 1px solid var(--account-border);
    display: grid;
    gap: 20px;
    padding-top: 20px;
}
.account-order-action-group h3 {
    margin: 0 0 9px;
    font-size: 12px;
    font-weight: 500;
    color: var(--account-text-soft);
}
.account-order-action-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.account-order-action-row form {
    display: flex;
    margin: 0;
}
.account-shell .account-order-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
    min-height: 36px;
    padding: 7px 12px;
    border: 1px solid var(--account-border);
    border-radius: 7px;
    background: transparent;
    color: var(--account-text);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}
.account-shell .account-order-action:hover {
    border-color: var(--account-text-soft);
    background: rgba(35, 31, 32, 0.03);
}
.account-shell .account-order-action:focus-visible {
    outline: 2px solid var(--account-primary);
    outline-offset: 3px;
}
.account-shell .account-order-action.is-destructive {
    color: #a23535;
}
.account-shell .account-order-action:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: transparent;
    border-color: var(--account-border);
}
.account-order-action-note {
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--account-text-soft);
}

/* Toolbar (page-level actions, e.g. "+ Add address") */
.account-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 18px;
}
.account-toolbar .btn i[data-lucide] {
    width: 16px;
    height: 16px;
}

.account-shell .btn-small {
    padding: 8px 14px;
    font-size: 13px;
}

.account-inline-form {
    display: inline-block;
    margin: 0;
}

/* Address list */
.account-address-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
}
.account-address-row {
    background: var(--account-card-bg);
    border: 1px solid var(--account-border);
    border-radius: var(--account-radius);
    box-shadow: var(--account-shadow-soft);
    padding: 20px 22px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.account-address-main {
    min-width: 0;
    flex: 1 1 360px;
}
.account-address-name {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}
.account-address-name strong {
    color: var(--account-text);
    font-size: 15px;
    font-weight: 600;
}
.account-default-tag {
    color: var(--account-accent, #825d2d);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.account-address-street {
    margin: 0 0 4px;
    color: var(--account-text);
    font-size: 14px;
}
.account-address-meta {
    margin: 2px 0 0;
    color: var(--account-text-muted);
    font-size: 13px;
}
.account-address-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.account-icon-btn {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--account-border-strong);
    background: #fffcf4;
    color: var(--account-text-soft);
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.account-icon-btn:hover {
    color: var(--account-primary);
    border-color: var(--account-primary);
    background: rgba(35, 31, 32, 0.04);
}
.account-icon-btn.is-danger {
    color: #510707;
    border-color: rgba(81, 7, 7, 0.35);
}
.account-icon-btn.is-danger:hover {
    background: #f3e3e1;
    border-color: #510707;
}
.account-icon-btn i[data-lucide] {
    width: 16px;
    height: 16px;
}

/* Two/three-column form helpers */
.account-form-grid-2 {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 14px;
}
.account-form-grid-3 {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
}
.account-form-row textarea {
    width: 100%;
    border: 1px solid var(--account-border-strong);
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 14px;
    font-family: inherit;
    color: var(--account-text);
    background: #fffcf4;
    resize: vertical;
    min-height: 80px;
}
.account-form-row textarea:focus,
.account-form-row input:focus {
    outline: none;
    border-color: var(--account-primary);
    box-shadow: 0 0 0 3px rgba(130, 93, 45, 0.35);
}
.account-form-row input.has-error,
.account-form-row textarea.has-error {
    border-color: var(--account-error);
}
.account-field-error {
    color: var(--account-error);
    font-size: 12px;
    margin-top: 4px;
    display: block;
}
.account-required {
    color: var(--account-error);
}
.account-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 6px;
}

/* Saved cards list (in /account/payment-methods and at /checkout) */
.account-cards-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.account-card-row {
    background: var(--account-card-bg);
    border: 1px solid var(--account-border);
    border-radius: 16px;
    padding: 14px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.account-card-main {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.account-card-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--account-text);
    font-size: 14px;
}
.account-card-brand i[data-lucide] {
    width: 18px;
    height: 18px;
    color: var(--account-primary);
}
.account-card-number {
    font-family: 'SF Mono', 'Courier New', monospace;
    font-size: 15px;
    color: var(--account-text);
    letter-spacing: 0.5px;
}
.account-card-meta {
    font-size: 12px;
    color: var(--account-text-muted);
}
.account-card-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Saved-cards picker at /checkout */
.account-saved-cards-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 6px;
}
.account-saved-card-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--account-border);
    border-radius: 16px;
    background: #fffcf4;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.account-saved-card-option:hover {
    border-color: var(--account-primary);
}
.account-saved-card-option.is-selected {
    border-color: var(--account-primary);
    background: rgba(130, 93, 45, 0.05);
}
.account-saved-card-option input[type="radio"] {
    accent-color: var(--account-primary);
    width: 18px;
    height: 18px;
}
.account-saved-card-option span {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.account-saved-card-option strong {
    color: var(--account-text);
    font-size: 14px;
}
.account-saved-card-option small {
    color: var(--account-text-muted);
    font-size: 12px;
}

/* Pre-checkout login banner (storefront /checkout) */
.account-checkout-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    background: rgba(130, 93, 45, 0.08);
    border: 1px solid rgba(130, 93, 45, 0.22);
    border-radius: 16px;
    padding: 14px 18px;
    margin: 0 0 22px;
    flex-wrap: wrap;
    color: var(--account-text);
}
.account-checkout-banner-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}
.account-checkout-banner-meta i[data-lucide] {
    width: 18px;
    height: 18px;
    color: var(--account-primary);
}
.account-checkout-banner .btn {
    padding: 8px 16px;
    font-size: 14px;
}
/* Endereco salvo e uma lista de linhas, nao cartoes: a caixa roubava a
   atencao dos campos de endereco de verdade.
   Revisado em 2026-09-04: eram linhas lado a lado que embrulhavam, entao
   duas etiquetas curtas ficavam grudadas e o endereco de uma passava perto
   do titulo da outra. Agora cada endereco ocupa uma linha inteira, com o
   titulo em cima e o endereco embaixo, pequeno e apagado. O selecionado se
   distingue so pelo peso do titulo: o sublinhado bronze anterior chamava
   mais atencao que o proprio formulario. */
.account-saved-addresses {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 18px;
    max-width: 420px;
}
.account-saved-address {
    border: none;
    border-radius: 0;
    padding: 0;
    background: none;
    cursor: pointer;
    text-align: left;
    display: block;
    width: 100%;
    transition: opacity 0.15s ease;
}
.account-saved-address:hover { opacity: 0.72; }
.account-saved-address strong {
    display: block;
    color: var(--account-text);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    margin-bottom: 2px;
}
.account-saved-address.is-selected strong { font-weight: 700; }
.account-saved-address span {
    display: block;
    color: var(--account-text-soft);
    font-size: 12.5px;
    line-height: 1.4;
    opacity: 0.7;
}

/* Settings form */
.account-form-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.account-form-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.account-form-row label {
    font-size: 13px;
    font-weight: 500;
    color: var(--account-text-soft);
}
.account-form-fieldset {
    border: 1px solid var(--account-border);
    border-radius: 10px;
    padding: 16px 18px;
    margin: 0;
}
.account-form-fieldset legend {
    padding: 0 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--account-text);
}
.account-form-actions {
    display: flex;
    justify-content: flex-end;
}

/* ---------- Tablet ---------- */
@media (max-width: 1080px) {
    .account-shell {
        grid-template-columns: 220px minmax(0, 1fr);
        gap: 24px;
        padding: 24px 20px 72px;
    }
}

/* ---------- Mobile ---------- */
@media (max-width: 800px) {
    .account-shell {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
        padding: 16px 14px 64px;
    }
    .account-sidebar {
        position: relative;
        top: auto;
        padding: 16px 12px;
    }
    .account-sidebar-user {
        padding-bottom: 14px;
    }
    .account-nav {
        margin-top: 10px;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 4px;
    }
    .account-nav a {
        flex: 1 1 calc(50% - 4px);
        padding: 10px;
        font-size: 13px;
    }
    .account-nav-logout {
        flex: 1 1 100%;
        margin-top: 6px;
    }
    .account-soon-tag {
        display: none;
    }
    .account-detail-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .account-stats {
        grid-template-columns: minmax(0, 1fr);
    }
    .account-order-row {
        grid-template-columns: minmax(0, 1fr) 90px 16px;
        padding: 14px 16px;
        gap: 12px;
    }
    .account-order-status {
        grid-row: 2;
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
    .account-order-total {
        font-size: 14px;
    }
    .account-page-header h1 {
        font-size: 22px;
    }
    .account-address-row {
        flex-direction: column;
        align-items: stretch;
    }
    .account-address-actions {
        justify-content: flex-end;
    }
    .account-form-grid-2,
    .account-form-grid-3 {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ── Save cart (modal + inline card) ───────────────────────────── */
.save-cart-modal[hidden] { display: none !important; }
body.save-cart-modal-open { overflow: hidden; }
.save-cart-modal {
    position: fixed;
    inset: 0;
    z-index: 1400;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.save-cart-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(35, 31, 32, 0.45);
}
.save-cart-modal-dialog {
    position: relative;
    width: min(100%, 440px);
    background: #fffcf4;
    border-radius: 16px;
    padding: 24px 22px 22px;
    box-shadow: 0 24px 60px rgba(35, 31, 32, 0.18);
}
.save-cart-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    border: 0;
    background: transparent;
    font-size: 24px;
    line-height: 1;
    color: #6e6862;
    cursor: pointer;
}
/* Two actions on one line: the one that goes somewhere is filled, the one
   that just closes is a bordered pill, the same pair used across the site. */
.save-cart-modal-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.save-cart-modal-actions .btn { flex: 1 1 150px; min-height: 46px; padding: 12px 16px;
    font-size: 14.5px; border-radius: 999px; }
.save-cart-modal-actions .btn-quiet { background: transparent; border: 1px solid #231f20; color: #231f20; }
.save-cart-modal-actions .btn-quiet:hover { background: rgba(35, 31, 32, .06); }
.save-cart-modal-head { margin-bottom: 18px; }
.save-cart-modal-head h2 {
    margin: 0 0 8px;
    font-size: 22px;
}
.save-cart-modal-head p {
    margin: 0;
    color: #6e6862;
    font-size: 14px;
    line-height: 1.5;
}
.save-cart-modal-icon {
    width: 42px;
    height: 42px;
    border-radius: 16px;
    background: #e6ecdf;
    color: #231f20;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}
.save-cart-modal-icon.is-success {
    background: #e6ecdf;
    color: #3d5a3d;
}
.save-cart-form label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin: 0 0 6px;
}
.save-cart-form input[type="email"],
.save-cart-form input[type="text"] {
    width: 100%;
    margin-bottom: 14px;
}
.save-cart-optional {
    font-weight: 400;
    color: #9b948d;
}
.save-cart-consent,
.save-cart-signed-in {
    font-size: 12px;
    color: #6e6862;
    line-height: 1.5;
    margin: 0 0 14px;
}
.save-cart-error {
    color: #510707;
    font-size: 13px;
    margin: 0 0 12px;
}
.save-cart-card,
.checkout-support-card {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 16px;
    border: 1px solid rgba(35, 31, 32, 0.08);
    border-radius: 16px;
    background: #f7f4e8;
    margin: 16px 0;
}
.save-cart-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 16px;
    background: #e6ecdf;
    color: #231f20;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.save-cart-card-body h3 {
    margin: 0 0 6px;
    font-size: 16px;
}
.save-cart-card-body p {
    margin: 0 0 12px;
    color: #6e6862;
    font-size: 13px;
    line-height: 1.45;
}
.side-cart-save-link {
    display: block;
    width: 100%;
    margin-top: 10px;
    border: 0;
    background: transparent;
    color: #231f20;
    font-size: 13px;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}
.saved-carts-list {
    display: grid;
    gap: 14px;
}
.saved-cart-card-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 12px;
}
.saved-cart-card-head h2 {
    margin: 0 0 4px;
    font-size: 18px;
}
.saved-cart-total {
    font-size: 18px;
    white-space: nowrap;
}
.saved-cart-items {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}
.saved-cart-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.saved-cart-preview-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    padding: 12px 0;
    border-top: 1px solid rgba(35, 31, 32, 0.06);
}
.saved-cart-preview-row:first-of-type { border-top: 0; padding-top: 0; }
.saved-cart-preview-row span {
    display: block;
    color: #6e6862;
    font-size: 13px;
    margin-top: 2px;
}

/* ── Order page tabs ──────────────────────────────────────────────────────
   The page used to stack four cards; on a phone the tracking someone came
   to see sat below two screens of items. Tabs put it first. */
.wsc-otabs {
    display: flex;
    gap: 4px;
    margin: 0 0 16px;
    overflow-x: auto;
    /* Sem isto o container tambem rola na VERTICAL: `overflow-x: auto` deixa
       o eixo Y em auto, e a aba tinha `margin-bottom: -3px` pra cobrir a
       borda da nav, sobrando 3px de conteudo pra rolar. No celular isso vira
       uma tremida: encostar o dedo pra trocar de aba mexia a barra inteira.
       A linha de baixo agora e uma sombra interna, entao nenhuma aba precisa
       de margem negativa e nao ha nada transbordando. */
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    box-shadow: inset 0 -1px 0 var(--account-border, #e3e0cf);
}
.wsc-otabs::-webkit-scrollbar { display: none; }
.wsc-otab {
    flex: none;
    border: 0;
    background: none;
    padding: 10px 14px;
    font: inherit;
    font-size: 14px;
    /* Aba inativa e texto normal: em negrito as quatro competiam entre si e
       nenhuma parecia a selecionada. */
    font-weight: 400;
    color: var(--account-text-muted, #9b948d);
    cursor: pointer;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    /* Sem o realce cinza do toque no iOS e sem esperar o segundo toque. */
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.wsc-otab.is-active {
    color: var(--account-text, #231f20);
    border-bottom-color: var(--account-accent, #825d2d);
    font-weight: 500;
}
.wsc-opanel { display: none; }
.wsc-opanel.is-active { display: block; }
.wsc-accordion-heading { display: none; }
.account-cal-day-label { display: none; }
.account-calendar-empty { padding: 16px; color: var(--account-text-muted, #9b948d); }
@media (max-width: 640px) {
    /* Phone calendar: days stacked, a divider between them, nothing boxed. */
    .account-calendar { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
    .account-calendar-weekdays { display: none; }
    .account-calendar-grid-month { display: block; min-width: 0; }
    .account-calendar-day-month.is-empty, .account-calendar-day-month.is-out-of-month { display: none; }
    .account-calendar-day-month { min-height: 0; padding: 14px 0; border: 0; border-top: 1px solid var(--account-border, #e3e0cf); border-radius: 0; background: transparent; }
    .account-calendar-day-month.is-today { border-color: var(--account-border, #e3e0cf); background: transparent; }
    .account-calendar-day-month.is-today .account-cal-day-label { color: var(--account-accent, #825d2d); }
    .account-calendar-day-month header { justify-content: flex-start; margin-bottom: 10px; }
    .account-calendar-day-month .account-cal-day-num { display: none; }
    .account-cal-day-label { display: inline; font-size: 14px; font-weight: 600; }
    .account-calendar-day-month ul { gap: 14px; }
    .account-calendar-day-month a { padding: 0; border: 0; border-radius: 0; background: transparent; display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; font-size: 14px; }
    .account-calendar-day-month a:hover { border-color: transparent; }
    .account-calendar-day-month a strong { font-size: 15px; }
    .account-calendar-day-month .account-cal-time { display: block; font-size: 13px; }
    .account-calendar-day-month .account-cal-date { display: none; }
    .account-calendar-day-month .status-pill { display: inline-flex; max-width: none; justify-self: start; font-size: 11px; padding: 2px 8px; }
    .account-calendar-nav { margin-bottom: 4px; }
    .account-calendar-range { font-size: 16px; }
    .wsc-otabs { display: none; }
    .wsc-accordion-heading { display: block; margin: 0; font-size: 15px; }
    .wsc-accordion-heading button {
        display: flex; align-items: center; justify-content: space-between; gap: 16px;
        width: 100%; min-height: 48px; padding: 14px 2px; border: 0;
        border-bottom: 1px solid var(--account-border, #e3e0cf);
        color: var(--account-text, #231f20); background: transparent;
        font: inherit; font-weight: 500; text-align: left; cursor: pointer;
    }
    .wsc-accordion-heading button .wsc-accordion-chevron { flex: 0 0 auto; width: 18px; height: 18px; color: var(--account-muted, #6f6a61); transition: transform .18s ease; }
    .wsc-accordion-heading button[aria-expanded="true"] .wsc-accordion-chevron { transform: rotate(180deg); }
    .wsc-accordion-heading button:focus-visible { outline: 2px solid var(--account-accent, #825d2d); outline-offset: 2px; }
    .wsc-opanel { padding-top: 12px; }
    .wsc-opanel > .account-card > h2:first-child { display: none; }
}
/* Inside a panel the card is the panel, so it never starts pushed down. */
.wsc-opanel > .account-card,
.wsc-opanel > .account-card.account-summary { margin-top: 0; }

/* The change windows are part of the summary, not a card of their own: the
   nested card was a box inside a box with double padding. */
.wsc-changewin {
    margin: 16px 0 0;
    padding: 14px 0 0;
    border-top: 1px solid var(--account-border, #e3e0cf);
    font-size: 13px;
    line-height: 1.7;
}
.wsc-changewin > div { margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; }

/* The edit trail closes the item list instead of hanging off the heading. */
.wsc-items-edited {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--account-border, #e3e0cf);
    text-align: left;
}
.wsc-items-edited .wsc-edited-toggle { margin-left: 0 !important; }

/* Order page finder: type what you want to do and only that section stays. */
.wsc-order-find { margin: 0 0 12px; }
.wsc-order-find-input { width: 100%; min-height: 40px; padding: 9px 12px; border: 1px solid var(--account-border, #e3e0cf); border-radius: 8px; background: transparent; font: inherit; font-size: 14px; color: var(--account-text, #231f20); -webkit-appearance: none; appearance: none; }
.wsc-order-find-input::placeholder { color: var(--account-text-muted, #9b948d); }
.wsc-order-find-input:focus { outline: 2px solid var(--account-accent, #825d2d); outline-offset: 2px; }
.wsc-order-find-hint { margin: 6px 0 0; font-size: 12px; line-height: 1.5; color: var(--account-text-soft, #6f6a61); }
/* The layout rules above set display on these; [hidden] must still win. */
.wsc-otab[hidden], .wsc-accordion-heading[hidden] { display: none !important; }

/* Orders page tools: the home's pill Filter (border only) next to the view toggle. */
.account-orders-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.account-status-filter { position: relative; }
.account-status-filter .cat-filter-btn { height: 36px; padding: 0 14px; border: 1px solid var(--account-border-strong, #cfc9b8); border-radius: 999px; background: transparent; color: var(--account-text, #231f20); font-size: 13px; font-weight: 500; gap: 8px; box-shadow: none; }
.account-status-filter .cat-filter-btn:hover, .account-status-filter .cat-filter-btn[aria-expanded="true"] { border-color: var(--account-primary, #231f20); }
.account-status-filter .cat-filter-btn svg { width: 15px; height: 15px; }
.account-filter-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 140; min-width: 220px; padding: 8px; background: #fffcf4; border: 1px solid var(--account-border, #e3e0cf); border-radius: 12px; box-shadow: 0 12px 32px rgba(35, 31, 32, 0.12); }
.account-filter-panel[hidden] { display: none !important; }
.account-filter-panel h4 { margin: 4px 8px 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--account-text-muted, #9b948d); }
.account-filter-option { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 10px; border-radius: 8px; font-size: 14px; color: var(--account-text, #231f20); text-decoration: none; }
.account-filter-option:hover { background: rgba(35, 31, 32, 0.04); }
.account-filter-option.is-active { font-weight: 600; }
@media (max-width: 640px) {
    .account-orders-tools { width: 100%; justify-content: space-between; }
    .account-filter-panel { right: auto; left: 0; }
}
/* Actions that live inside a panel (Add items, Edit event details). */
.account-panel-actions { margin-top: 14px; }

/* Orders calendar day view. */
.account-calendar-day-focus {
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}
.account-calendar-day-focus ul { gap: 0; }
.account-calendar-day-focus li + li { border-top: 1px solid var(--account-border, #e3e0cf); }
.account-calendar-day-focus a {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 5px 16px;
    padding: 14px 2px;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-size: 14px;
}
.account-calendar-day-focus a strong { font-size: 15px; }
.account-calendar-day-focus .account-cal-time { font-size: 13px; }
.account-calendar-day-focus .account-cal-date { color: var(--account-text-soft, #6e6862); }
.account-calendar-day-focus .status-pill { justify-self: start; }
.account-calendar-day-view .account-calendar-empty { margin: 0; padding: 24px 2px 8px; }

/* Customer event change form. */
.account-event-edit { gap: 14px; }
.account-event-card { display: grid; gap: 18px; }
.account-event-card-head { display: grid; gap: 4px; }
.account-event-card-head h2 { margin: 0; color: #231f20; font-size: 18px; font-weight: 600; }
.account-event-card-head p { margin: 0; max-width: 62ch; color: #6e6862; font-size: 13px; line-height: 1.5; }
.account-event-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}
.account-event-grid.is-two-column { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.account-event-address-row {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 14px;
}
.account-event-contact-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.account-event-edit .account-form-row label { color: #231f20; font-weight: 600; }
.account-event-edit .account-form-row label span,
.account-event-setup legend span { color: #6e6862; font-weight: 400; }
.account-event-edit .account-form-row input,
.account-event-edit .account-form-row select,
.account-event-edit .account-form-row textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #e3e0cf;
    border-radius: 8px;
    background: #fff8ed;
    color: #231f20;
    font: inherit;
    font-size: 14px;
}
.account-event-edit .account-form-row input,
.account-event-edit .account-form-row select { min-height: 44px; padding: 10px 12px; }
.account-event-edit .account-form-row textarea { min-height: 88px; padding: 12px; resize: vertical; }
.account-event-edit .account-form-row input:focus,
.account-event-edit .account-form-row select:focus,
.account-event-edit .account-form-row textarea:focus {
    outline: 2px solid #825d2d;
    outline-offset: 2px;
    box-shadow: none;
}
.account-event-edit .account-form-row input[readonly] { background: #f1f1e3; cursor: not-allowed; }
.account-event-hint { margin: 0; color: #6e6862; font-size: 12px; line-height: 1.5; }
.account-event-address-search { position: relative; }
.account-event-address-results[hidden],
.account-event-address-confirm[hidden],
.account-event-manual-row[hidden],
.account-event-zip-status[hidden] { display: none !important; }
.account-event-address-results {
    position: absolute;
    z-index: 30;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    padding: 6px;
    border: 1px solid #e3e0cf;
    border-radius: 12px;
    background: #fff8ed;
    box-shadow: 0 14px 32px rgba(35, 31, 32, 0.12);
}
.account-event-address-results ul { list-style: none; margin: 0; padding: 0; }
.account-event-address-results li { display: grid; gap: 2px; padding: 9px 10px; border-radius: 8px; cursor: pointer; }
.account-event-address-results li:hover,
.account-event-address-results li.is-active { background: #f1f1e3; }
.account-event-address-results li strong { color: #231f20; font-size: 13px; }
.account-event-address-results li span { color: #6e6862; font-size: 12px; }
.account-event-address-confirm {
    display: grid;
    gap: 3px;
    padding: 12px 14px;
    border: 1px solid #e3e0cf;
    border-radius: 8px;
    background: #f1f1e3;
    color: #231f20;
    font-size: 13px;
}
.account-event-address-confirm strong { font-size: 12px; }
.account-event-manual-link {
    justify-self: start;
    padding: 0;
    border: 0;
    background: transparent;
    color: #825d2d;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.account-event-manual-link:focus-visible { outline: 2px solid #825d2d; outline-offset: 3px; }
.account-event-manual-row {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(90px, 1fr) minmax(110px, 1fr);
    gap: 14px;
}
.account-event-zip-status { display: block; color: #6e6862; font-size: 12px; }
.account-event-zip-status.is-valid { color: #3d5a3d; }
.account-event-zip-status.is-error { color: #510707; }
.account-event-setup { margin: 0; padding: 0; border: 0; }
.account-event-setup legend { margin-bottom: 4px; color: #231f20; font-size: 13px; font-weight: 600; }
.account-event-setup > div { display: flex; gap: 8px; margin-top: 10px; }
.account-event-setup label { cursor: pointer; }
.account-event-setup input { position: absolute; opacity: 0; pointer-events: none; }
.account-event-setup label span {
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    padding: 0 14px;
    border: 1px solid #e3e0cf;
    border-radius: 999px;
    color: #231f20;
    font-size: 13px;
}
.account-event-setup input:checked + span { border-color: #231f20; background: #231f20; color: #fff8ed; }
.account-event-setup input:focus-visible + span { outline: 2px solid #825d2d; outline-offset: 2px; }
.account-event-actions { gap: 8px; }

@media (max-width: 700px) {
    .account-event-grid,
    .account-event-grid.is-two-column,
    .account-event-address-row,
    .account-event-contact-grid,
    .account-event-manual-row { grid-template-columns: minmax(0, 1fr); }
    .account-event-card { padding: 18px 16px; }
    .account-calendar-day-view .account-calendar-nav { align-items: flex-start; }
    .account-calendar-day-view .account-calendar-nav-btns { flex-wrap: wrap; justify-content: flex-end; }
}