:root {
    --blue: #28731f;
    --green: #28731f;
    --ink: #111711;
    --muted: #647067;
    --page: #f6faf5;
    --brand-green: #28731f;
    --brand-green-dark: #1c5b20;
    --brand-green-soft: #e4f0e1;
    --brand-border: #dce7d9;
    --brand-shadow: 0 14px 38px rgba(16, 44, 20, .07);
}

.portal-auth,
.portal-shop,
.customer-portal {
    color: var(--ink);
    font-family: "DM Sans", Quicksand, Arial, sans-serif;
    background: var(--page);
}

.portal-container {
    width: min(100% - 48px, 1240px);
    max-width: 1240px;
}

.portal-header {
    position: relative;
    z-index: 30;
    height: 82px;
    background: rgba(255,255,255,.97);
    border-bottom: 1px solid var(--brand-border);
    box-shadow: 0 4px 18px rgba(16, 44, 20, .035);
}

.portal-header-inner {
    padding: 0 4px;
}

.portal-brand {
    display: inline-flex;
    align-items: center;
    color: var(--ink);
    text-decoration: none;
    line-height: 1;
}

.portal-brand img {
    display: block;
    width: auto;
    height: 48px;
    max-width: 180px;
    object-fit: contain;
}

.portal-brand-cluster {
    display: flex;
    align-items: center;
    gap: 22px;
    min-width: 0;
}

.portal-workspace-context {
    display: grid;
    gap: 2px;
    border-left: 1px solid var(--brand-border);
    padding-left: 20px;
    min-width: 0;
}

.portal-workspace-context span,
.portal-eyebrow,
.auth-eyebrow {
    color: var(--brand-green);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .15em;
    line-height: 1.4;
}

.portal-workspace-context strong {
    overflow: hidden;
    max-width: 260px;
    color: #233126;
    font-size: 14px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.portal-header-actions {
    gap: 16px;
}

.notification-bell {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    color: #3e4b40;
    background: #f4f8f2;
    border: 1px solid var(--brand-border);
    border-radius: 13px;
    transition: background .16s ease, color .16s ease, transform .16s ease;
}

.notification-bell:hover {
    color: var(--brand-green);
    background: var(--brand-green-soft);
    transform: translateY(-1px);
}

.account-avatar {
    width: 44px;
    height: 44px;
    border: 3px solid #fff;
    background: var(--brand-green);
    box-shadow: 0 0 0 1px var(--brand-border);
    font-family: "DM Sans", Arial, sans-serif;
    font-size: 15px;
    line-height: 38px;
}

.account-dropdown {
    border: 1px solid var(--brand-border);
    border-radius: 16px;
    box-shadow: 0 18px 48px rgba(16, 44, 20, .14);
}

.customer-nav {
    position: relative;
    z-index: 20;
    background: #fff;
    border-bottom: 1px solid var(--brand-border);
    box-shadow: 0 5px 18px rgba(16, 44, 20, .025);
}

.customer-nav > .portal-container {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 4px;
    min-height: 58px;
}

.customer-nav a {
    position: relative;
    padding: 18px 15px 16px;
    color: #5e695f;
    border-bottom: 3px solid transparent;
    font-size: 13px;
    font-weight: 600;
    transition: color .16s ease, background .16s ease;
}

.customer-nav a:hover {
    color: var(--brand-green);
}

.customer-nav a.active {
    color: var(--brand-green-dark);
    border-color: var(--brand-green);
    font-weight: 700;
}

.customer-nav a.customer-nav-order {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    margin-left: auto;
    padding: 9px 16px;
    color: #fff;
    border: 0;
    border-radius: 10px;
    background: var(--brand-green);
    box-shadow: 0 5px 12px rgba(40, 115, 31, .15);
}

.customer-nav a.customer-nav-order:hover {
    color: #fff;
    background: var(--brand-green-dark);
}

.customer-main {
    width: min(100% - 48px, 1240px);
    max-width: 1240px;
    padding: 38px 0 72px;
}

.customer-portal {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--page);
}

.portal-card {
    margin-bottom: 18px;
    padding: 28px;
    background: #fff;
    border: 1px solid var(--brand-border);
    border-radius: 18px;
    box-shadow: 0 7px 24px rgba(16, 44, 20, .045);
}

.portal-card h1,
.portal-card h2 {
    color: #121912;
    font-size: 25px;
    font-weight: 700;
    letter-spacing: -.025em;
    line-height: 1.25;
    margin: 0 0 18px;
}

.dashboard-intro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin: 0 0 20px;
    padding: 27px 30px;
    border: 1px solid #d2e3cf;
    border-radius: 20px;
    background: linear-gradient(115deg, #e4f0e1 0%, #f5faf3 74%, #fff 100%);
}

.dashboard-intro h1 {
    margin: 6px 0 4px;
    color: #0e1f14;
    font-size: clamp(25px, 3vw, 34px);
    font-weight: 700;
    letter-spacing: -.04em;
    line-height: 1.12;
}

.dashboard-intro p {
    margin: 0;
    color: #5d6a5d;
    font-size: 14px;
}

.dashboard-intro .portal-button {
    flex-shrink: 0;
}

.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    padding: 14px;
}

.dashboard-stat {
    min-height: 125px;
    padding: 17px 18px;
    color: #667267;
    border: 1px solid #e5ede2;
    border-radius: 14px;
    background: linear-gradient(180deg, #fbfdfb 0%, #f3f8f1 100%);
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.dashboard-stat:hover {
    border-color: #c7ddc2;
    box-shadow: 0 8px 18px rgba(16, 44, 20, .06);
    transform: translateY(-2px);
}

.dashboard-stat a {
    color: inherit;
    text-decoration: none;
    border-bottom: 0;
}

.dashboard-stat a:hover {
    color: var(--brand-green);
}

.dashboard-stat small {
    display: block;
    margin-top: 6px;
    color: #879187;
    font-size: 11px;
    font-weight: 500;
}

.dashboard-stat strong {
    display: block;
    margin-top: 13px;
    color: #101810;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -.03em;
}

.dashboard-empty {
    justify-content: flex-start;
    min-height: 210px;
    border-color: #d8e8d4;
    background: linear-gradient(115deg, #f2f8f0, #fff 72%);
}

.dashboard-empty > svg {
    flex: 0 0 auto;
    color: var(--brand-green);
    padding: 18px;
    border-radius: 22px;
    background: var(--brand-green-soft);
}

.dashboard-empty h1 {
    margin-bottom: 8px;
}

.dashboard-empty p {
    color: #657064;
    font-size: 15px;
    line-height: 1.6;
}

.portal-page-heading h1 {
    margin: 0;
}

.portal-button {
    min-height: 44px;
    padding: 10px 17px;
    border-radius: 10px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    transition: background .16s ease, box-shadow .16s ease, transform .16s ease;
}

.portal-button:hover {
    transform: translateY(-1px);
}

.portal-button.green,
.auth-submit {
    color: #fff;
    background: var(--brand-green);
    box-shadow: 0 5px 12px rgba(40, 115, 31, .16);
}

.portal-button.green:hover,
.auth-submit:hover {
    background: var(--brand-green-dark);
    box-shadow: 0 8px 18px rgba(40, 115, 31, .22);
}

.portal-button.dark {
    color: #fff;
    background: #000;
}

.portal-button.dark:hover {
    background: #1c261d;
}

.portal-button.outline {
    color: #172018;
    border-color: #cfdace;
    background: #fff;
}

.portal-button.outline:hover {
    color: var(--brand-green-dark);
    border-color: #9abb92;
    background: #f6faf4;
}

.portal-button.pale {
    color: #435047;
    background: #eef5eb;
}

.portal-card a:not(.portal-button),
.account-content a:not(.portal-button) {
    color: var(--brand-green-dark);
}

.portal-record {
    padding: 17px 14px;
    border-bottom-color: #e8eee6;
    border-radius: 10px;
    transition: background .16s ease;
}

a.portal-record:hover {
    background: #f7fbf5;
}

.portal-record strong {
    color: #1b241c;
    font-weight: 700;
}

.portal-record small {
    color: #758075;
}

.portal-table-heading {
    color: #617061;
    border-radius: 9px;
    background: #f1f7ef;
}

.portal-tabs {
    border-bottom-color: #e1e9de;
}

.portal-tabs a.active {
    color: var(--brand-green-dark);
    border-color: var(--brand-green);
}

.portal-filter-row select,
.shop-search,
.portal-field input,
.portal-field select,
.portal-field textarea {
    border-color: #d4ded1;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 44, 20, .025);
}

.portal-field label {
    color: #3b493c;
    font-family: "DM Sans", Quicksand, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .015em;
    text-transform: none;
}

.portal-field input,
.portal-field select {
    height: 48px;
}

.portal-field textarea {
    min-height: 108px;
}

.portal-field input:focus,
.portal-field select:focus,
.portal-field textarea:focus,
.portal-filter-row select:focus,
.shop-search:focus {
    border-color: var(--brand-green);
    box-shadow: 0 0 0 4px rgba(40, 115, 31, .12);
}

.portal-field input::placeholder,
.portal-field textarea::placeholder,
.shop-search::placeholder {
    color: #929b92;
}

.portal-status {
    padding: 5px 10px;
    color: #354436;
    border: 1px solid #dfe8dc;
    border-radius: 999px;
    background: #f1f6ef;
    font-size: 12px;
    font-weight: 700;
}

.portal-notice {
    color: #28382b;
    border: 1px solid #d4e5d0;
    border-left: 4px solid var(--brand-green);
    border-radius: 12px;
    background: #f0f7ee;
}

.portal-notice.success {
    color: #1c5b20;
    border-color: #c9e2c4;
    background: #eff8ed;
}

.portal-notice.info {
    color: #334238;
    border-color: #d8e5d5;
    background: #f5f9f3;
}

.portal-notice.warning {
    color: #80530b;
    border-color: #edd9ae;
    background: #fff9eb;
}

.portal-errors {
    color: #9d263b;
    border: 1px solid #f0cdd3;
    border-left: 4px solid #c8354d;
    border-radius: 12px;
    background: #fff5f6;
}

.account-navigation a.active,
.product-navigation a.active {
    color: #fff;
    background: var(--brand-green);
    box-shadow: 0 4px 10px rgba(40, 115, 31, .15);
}

.account-navigation a,
.product-navigation a {
    border-radius: 9px;
    transition: color .15s ease, background .15s ease;
}

.account-navigation a:not(.active):hover,
.product-navigation a:not(.active):hover {
    color: var(--brand-green-dark);
    background: #f2f8f0;
}

.account-identity {
    border-radius: 18px;
}

.identity-cover {
    background: linear-gradient(120deg, #28731f, #4a8f3d);
}

.identity-avatar {
    background: #102418;
}

.account-subnav {
    border-left-color: #d8e5d5;
}

.account-subnav > a.selected {
    color: var(--brand-green-dark);
    border-left-color: var(--brand-green);
}

.shop-progress {
    height: 62px;
    color: #354436;
    border-bottom: 1px solid #d4e3d0;
    background: #e7f2e4;
}

.shop-progress li {
    color: #849383;
}

.shop-progress li.current {
    color: var(--brand-green-dark);
}

.shop-progress li.current > a,
.shop-progress li.current > span {
    color: #fff;
    border-radius: 999px;
    background: var(--brand-green);
    box-shadow: 0 4px 10px rgba(40, 115, 31, .16);
}

.shop-progress li + li:before {
    background: #a7c49f;
}

.basket-count {
    color: #213224;
    text-decoration: none;
}

.product-image,
.product-card .product-image {
    overflow: hidden;
    border: 1px solid #e0e9dc;
    border-radius: 15px;
    background: #f2f7f0;
}

.product-card h3 {
    color: #111711;
    font-weight: 700;
}

.product-card,
.domain-offer {
    overflow: hidden;
    border: 1px solid var(--brand-border);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 6px 20px rgba(16, 44, 20, .045);
}

.product-card {
    padding: 14px;
}

.product-description,
.detail-description {
    color: #677267;
}

.billing-term .term-box {
    border-color: #d8e3d5;
    border-radius: 13px;
    background: #fff;
}

.billing-term input:checked + .term-box {
    border-color: var(--brand-green);
    background: #f1f8ef;
    box-shadow: 0 0 0 2px rgba(40, 115, 31, .12);
}

.billing-term input:checked + .term-box:after {
    background: var(--brand-green);
}

.portal-dialog {
    border-radius: 18px;
}

.portal-dialog header {
    background: var(--brand-green);
}

.portal-footer {
    display: flex;
    min-height: 76px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 16px 24px;
    color: #fff;
    border-top: 0;
    background: #0e1f14;
    text-align: center;
    font-size: 12px;
}

.portal-footer p {
    margin: 0;
}

.portal-auth {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(ellipse at 8% 16%, rgba(228, 240, 225, .8), transparent 42%),
        linear-gradient(180deg, #f7faf5, #eff6ed);
}

.portal-auth .portal-header {
    height: 78px;
}

.auth-back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #344236;
    border: 1px solid #d9e5d6;
    border-radius: 999px;
    background: #fff;
    padding: 10px 15px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.auth-back-link:hover {
    color: var(--brand-green);
    border-color: #a8c89f;
    background: #f9fcf8;
}

.auth-main {
    width: min(560px, calc(100% - 32px));
    margin: 0 auto;
    padding: 44px 0 38px;
    flex: 1;
}

.auth-panel {
    padding: clamp(24px, 5vw, 42px);
    border: 1px solid #dbe6d8;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 22px 60px rgba(21, 51, 24, .1);
}

.auth-heading {
    margin-bottom: 26px;
    text-align: left;
}

.auth-heading h1 {
    margin: 7px 0 8px;
    color: #101710;
    font-size: clamp(27px, 5vw, 34px);
    font-weight: 700;
    letter-spacing: -.04em;
    line-height: 1.15;
}

.auth-heading p {
    max-width: 430px;
    margin: 0;
    color: #647067;
    font-size: 14px;
    line-height: 1.6;
}

.auth-form {
    gap: 16px;
}

.auth-name-row {
    gap: 12px;
}

.auth-submit {
    width: 100%;
    min-height: 50px;
    height: auto;
    margin: 6px 0 0;
    border-radius: 11px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
}

.auth-login .auth-submit {
    margin-top: 4px;
}

.auth-terms,
.auth-legal {
    color: #657066;
    font-size: 13px;
    line-height: 1.65;
}

.auth-terms a,
.auth-legal a,
.auth-forgot a,
.portal-notice a {
    color: var(--brand-green-dark);
    font-weight: 700;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.auth-assist {
    margin: 20px 0 0;
    color: #657066;
    font-size: 13px;
    text-align: center;
}

.auth-assist a {
    color: var(--brand-green-dark);
    font-weight: 700;
}

.portal-auth .portal-notice {
    margin: 0 0 18px;
    padding: 12px 15px;
}

.auth-login .auth-forgot {
    margin-top: 2px;
}

.portal-guest-shell {
    background:
        radial-gradient(ellipse at 14% 5%, rgba(228, 240, 225, .8), transparent 36%),
        #f6faf5;
}

.portal-guest-header {
    border-bottom: 1px solid var(--brand-border);
    background: rgba(255,255,255,.96);
    box-shadow: 0 4px 18px rgba(16, 44, 20, .04);
}

.portal-guest-nav {
    display: flex;
    align-items: center;
    gap: 22px;
    color: #3e4b40;
    font-size: 13px;
    font-weight: 600;
}

.portal-guest-nav a {
    color: inherit;
    text-decoration: none;
}

.portal-guest-nav a:hover {
    color: var(--brand-green);
}

.portal-guest-nav .guest-create-account {
    padding: 11px 16px;
    color: #fff;
    border-radius: 10px;
    background: var(--brand-green);
}

.portal-guest-nav .guest-create-account:hover {
    color: #fff;
    background: var(--brand-green-dark);
}

.portal-guest-message {
    margin-bottom: 22px;
    padding: 15px 18px;
    border: 1px solid var(--brand-border);
    border-radius: 13px;
    font-size: 14px;
}

.portal-guest-success {
    color: #234b25;
    border-color: #cde2c8;
    background: #eff8ed;
}

.portal-guest-error {
    color: #8c2638;
    border-color: #edcbd1;
    background: #fff4f5;
}

.portal-guest-message ul {
    margin: 7px 0 0;
    padding-left: 20px;
}

.security-brand {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    color: #586359;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.security-brand img {
    width: 132px;
    height: auto;
}

.security-brand span {
    padding-left: 16px;
    border-left: 1px solid var(--brand-border);
}

.portal-guest-shell :is(input,select,textarea):focus,
.staff-portal :is(input,select,textarea):focus {
    border-color: var(--brand-green);
    box-shadow: 0 0 0 4px rgba(40, 115, 31, .12);
}

.portal-guest-shell .habp-surface,
.staff-portal .habp-surface {
    border-color: var(--brand-border);
    border-radius: 18px;
    box-shadow: var(--brand-shadow);
}

.staff-portal {
    --habp-primary: #28731f;
    --habp-primary-hover: #1c5b20;
    --habp-background: #f4f8f2;
    --habp-surface-subtle: #f0f6ee;
    --habp-text: #111711;
    --habp-border: #dce7d9;
    --habp-sidebar: #102418;
    --habp-sidebar-raised: #173120;
    --habp-sidebar-border: #24432d;
    color: #111711;
    font-family: "DM Sans", Inter, ui-sans-serif, system-ui, sans-serif;
    background: #f4f8f2;
}

.staff-portal :is(button,a,input,select,textarea):focus-visible {
    outline-color: rgba(40, 115, 31, .48);
}

.staff-portal #habp-sidebar {
    background: #102418;
    border-color: #24432d;
    box-shadow: 12px 0 34px rgba(12, 31, 16, .09);
}

.staff-brand-area {
    padding: 16px 15px;
    border-bottom: 1px solid #24432d;
}

.staff-brand-panel {
    display: flex;
    min-height: 75px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
    padding: 10px 14px;
    border: 1px solid rgba(255,255,255,.65);
    border-radius: 13px;
    background: #fff;
    text-decoration: none;
}

.staff-brand-panel img {
    display: block;
    width: 124px;
    height: auto;
    object-fit: contain;
}

.staff-brand-panel span {
    color: #5f6b60;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .14em;
}

.staff-topline-label {
    color: #3d4a3f;
    font-size: 13px;
    font-weight: 700;
}

.staff-environment-badge {
    display: inline-flex;
    margin-left: 11px;
    padding: 5px 9px;
    color: #49604b;
    border: 1px solid #dce7d9;
    border-radius: 999px;
    background: #f3f8f1;
    font-size: 11px;
    font-weight: 700;
}

.staff-portal [data-habp-sidebar] nav {
    padding: 14px 12px;
}

.staff-portal [data-habp-sidebar] nav summary {
    color: #d4e2d5;
    letter-spacing: .01em;
}

.staff-portal [data-habp-sidebar] nav a {
    min-height: 42px;
    border-radius: 10px;
}

.staff-portal [data-habp-sidebar] nav a[aria-current="page"] {
    color: #fff;
    border: 1px solid rgba(145, 197, 135, .18);
    background: rgba(40, 115, 31, .34);
}

.staff-portal [data-habp-sidebar] nav a:not([aria-current="page"]):hover,
.staff-portal [data-habp-sidebar] nav summary:hover {
    color: #fff;
    background: rgba(255,255,255,.07);
}

.staff-portal header.sticky {
    border-color: var(--brand-border);
    background: rgba(255,255,255,.94);
    box-shadow: 0 3px 14px rgba(16, 44, 20, .04);
}

.staff-portal main#main-content {
    background: #f4f8f2;
}

.staff-portal .habp-surface {
    border-radius: 16px;
    border-color: var(--brand-border);
    box-shadow: 0 7px 24px rgba(16, 44, 20, .045);
}

.staff-portal .bg-indigo-50 {
    background-color: #eef5eb;
}

.staff-portal .bg-indigo-100 {
    background-color: #e4f0e1;
}

.staff-portal .border-indigo-200 {
    border-color: #cfe0ca;
}

.staff-portal .text-indigo-950 {
    color: #18351c;
}

.staff-portal .text-indigo-700,
.staff-portal .text-indigo-600 {
    color: var(--brand-green-dark);
}

.staff-portal .bg-indigo-600,
.staff-portal .bg-indigo-500 {
    background-color: var(--brand-green);
}

.staff-portal .hover\:bg-indigo-700:hover,
.staff-portal .hover\:bg-indigo-800:hover {
    background-color: var(--brand-green-dark);
}

.staff-portal .text-green-100 {
    color: #edf7eb;
}

.staff-portal .bg-green-500\/20 {
    background-color: rgba(40, 115, 31, .28);
}

.staff-portal .bg-green-600 {
    background-color: var(--brand-green);
}

.staff-portal .hover\:bg-green-700:hover {
    background-color: var(--brand-green-dark);
}

.staff-portal .ring-green-400\/25 {
    --tw-ring-color: rgba(145, 197, 135, .28);
}

.staff-portal .text-green-700 {
    color: var(--brand-green-dark);
}

.staff-portal .border-green-600 {
    border-color: var(--brand-green);
}

.staff-portal :is(input,select,textarea) {
    border-color: #d4ded1;
    border-radius: 9px;
}

.staff-portal input[type=checkbox],
.staff-portal input[type=radio] {
    accent-color: var(--brand-green);
}

.staff-portal input:focus,
.staff-portal select:focus,
.staff-portal textarea:focus {
    border-color: var(--brand-green);
    outline: 2px solid rgba(40, 115, 31, .18);
    outline-offset: 1px;
}

@media (max-width: 850px) {
    .portal-container,
    .customer-main {
        width: calc(100% - 32px);
        max-width: none;
    }

    .dashboard-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .customer-nav > .portal-container {
        width: max-content;
        min-width: 100%;
        padding: 0 16px;
    }

    .customer-nav {
        overflow-x: auto;
    }

    .customer-nav a {
        padding-left: 12px;
        padding-right: 12px;
        font-size: 12px;
    }

    .customer-nav a.customer-nav-order {
        margin-left: 8px;
    }

    .account-workspace {
        grid-template-columns: minmax(220px, 30%) minmax(0, 1fr);
    }
}

@media (max-width: 600px) {
    .portal-header {
        height: 70px;
    }

    .portal-header-inner {
        padding: 0;
    }

    .portal-brand img {
        height: 41px;
        max-width: 145px;
    }

    .portal-brand-cluster {
        gap: 0;
    }

    .portal-workspace-context {
        display: none;
    }

    .portal-header-actions {
        gap: 10px;
    }

    .portal-header-actions .account-avatar {
        width: 40px;
        height: 40px;
        line-height: 34px;
    }

    .customer-nav > .portal-container {
        margin: 0;
    }

    .customer-nav a {
        padding-top: 14px;
        padding-bottom: 12px;
    }

    .customer-nav a.customer-nav-order {
        min-height: 34px;
    }

    .customer-main {
        padding: 26px 0 46px;
    }

    .portal-card {
        padding: 22px;
        border-radius: 15px;
    }

    .dashboard-intro {
        flex-direction: column;
        align-items: flex-start;
        padding: 22px;
        border-radius: 16px;
    }

    .dashboard-intro .portal-button {
        width: 100%;
        justify-content: center;
    }

    .dashboard-stats {
        gap: 9px;
        padding: 10px;
    }

    .dashboard-stat {
        min-height: 112px;
        padding: 14px;
    }

    .dashboard-stat strong {
        font-size: 24px;
    }

    .dashboard-empty {
        align-items: flex-start;
        gap: 18px;
        padding: 24px;
    }

    .dashboard-empty > svg {
        width: 86px;
        height: 86px;
    }

    .products-workspace,
    .basket-layout,
    .product-detail {
        grid-template-columns: 1fr;
    }

    .account-workspace {
        grid-template-columns: 1fr;
    }

    .account-identity {
        display: none;
    }

    .account-navigation {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        padding: 12px;
    }

    .account-navigation a {
        padding: 8px 10px;
        font-size: 12px;
    }

    .account-workspace > aside > .support-pin {
        display: none;
    }

    .auth-main {
        width: calc(100% - 28px);
        padding-top: 28px;
    }

    .auth-panel {
        padding: 24px 20px;
        border-radius: 17px;
    }

    .auth-name-row {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .auth-back-link {
        padding: 8px 11px;
        font-size: 12px;
    }

    .portal-auth .portal-header-inner {
        width: calc(100% - 28px);
    }

    .portal-footer {
        min-height: 68px;
        padding: 14px 18px;
    }

    .security-brand {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .security-brand span {
        padding: 0;
        border: 0;
    }

    .portal-guest-nav {
        gap: 10px;
        font-size: 11px;
    }

    .portal-guest-nav .guest-create-account {
        padding: 9px 11px;
    }
}

/* Keep the public Elementor and marketing buttons on the same JaraWeb palette. */
.marketing-support-shortcut {
    background: #28731f !important;
    color: #fff !important;
}

.password-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 66px;
    color: var(--brand-green) !important;
    border-radius: 8px;
}

.password-field input { padding-right: 76px !important; }
.password-toggle-label { font-size: 11px; font-weight: 700; }
.password-toggle svg { width: 19px; height: 19px; flex: 0 0 auto; }

.password-toggle:hover {
    background: var(--brand-green-soft) !important;
}

.password-toggle:focus-visible {
    outline: 2px solid var(--brand-green) !important;
    outline-offset: 1px;
}

.elementor-button,
.elementskit-btn:not(.ekit-accordion--toggler) {
    color: #fff !important;
    background-color: #28731f !important;
}

.elementor-button:hover,
.elementskit-btn:not(.ekit-accordion--toggler):hover {
    background-color: #1c5b20 !important;
}

.ekit-template-content-footer {
    color: #fff !important;
    background: #28731f !important;
}

.ekit-template-content-footer .elementor-element {
    background-color: transparent !important;
}

.ekit-template-content-footer p,
.ekit-template-content-footer a,
.ekit-template-content-footer h5,
.ekit-template-content-footer span {
    color: #fff !important;
}

.ekit-template-content-footer svg {
    fill: currentColor;
}

.ekit-template-content-footer .elementor-divider-separator {
    border-color: #ffffff50 !important;
}

.ekit-template-content-footer img {
    filter: brightness(0) invert(1);
}

.support-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.support-chat-card { min-width: 0; }
.support-chat-start { max-width: 620px; margin: 48px auto 34px; text-align: center; }
.support-chat-start h2 { margin: 14px 0 8px; color: #162117; font-size: 25px; font-weight: 700; }
.support-chat-start p { margin: 0 auto 24px; max-width: 540px; color: #68746a; line-height: 1.7; }
.support-chat-icon { display: inline-grid; width: 58px; height: 58px; place-items: center; border-radius: 18px; color: #28731f; background: #e4f0e1; font-size: 28px; font-weight: 700; }
.support-chat-topline, .admin-chat-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 0; border-bottom: 1px solid #dce7d9; }
.support-chat-topline > div { color: #536055; font-size: 13px; }
.support-chat-status, .support-chat-queue-status { display: inline-flex; align-items: center; width: fit-content; border-radius: 999px; padding: 6px 11px; color: #235d20; background: #e8f3e5; font-size: 12px; font-weight: 700; white-space: nowrap; }
.support-chat-status[data-state="waiting"], .support-chat-queue-status[data-state="waiting"] { color: #805500; background: #fff4d8; }
.support-chat-status[data-state="closed"] { color: #5f685f; background: #eef1ed; }
.support-chat-window { display: grid; grid-template-rows: minmax(280px, 48vh) auto; overflow: hidden; margin-top: 18px; border: 1px solid #dce7d9; border-radius: 16px; background: #f8fbf7; }
.support-chat-log { overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding: 20px; scroll-behavior: smooth; }
.support-chat-message { width: fit-content; max-width: min(82%, 680px); padding: 11px 14px; border: 1px solid #e0e9dd; border-radius: 14px; background: #fff; box-shadow: 0 4px 14px rgba(16,44,20,.035); }
.support-chat-message.from-customer { align-self: flex-end; border-color: #cfe3ca; background: #edf6ea; }
.support-chat-message-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; margin-bottom: 5px; color: #4a594b; font-size: 11px; }
.support-chat-message-meta time { color: #778178; font-size: 10px; }
.support-chat-message p { margin: 0; color: #172018; font-size: 14px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.support-chat-compose { display: grid; gap: 10px; padding: 14px; border-top: 1px solid #dce7d9; background: #fff; }
.support-chat-compose textarea { width: 100%; min-height: 78px; resize: vertical; border: 1px solid #d6e0d3; border-radius: 10px; padding: 11px 13px; color: #172018; outline: none; }
.support-chat-compose textarea:focus { border-color: #28731f; box-shadow: 0 0 0 3px rgba(40,115,31,.12); }
.support-chat-compose-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.support-chat-compose-footer small, .support-chat-actions > span { color: #778178; font-size: 11px; }
.support-chat-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 14px; }
.support-chat-assignment { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.support-chat-assignment label { color: #435345; font-size: 12px; font-weight: 700; }
.support-chat-assignment select { min-width: 210px; min-height: 40px; border: 1px solid #d6e0d3; border-radius: 9px; padding: 8px 10px; color: #172018; background: #fff; }
.support-chat-empty { margin: auto; padding: 20px; color: #758077; font-size: 13px; text-align: center; }
.support-chat-close { border: 0; padding: 5px 0; color: #5d6b5f; background: transparent; font-size: 12px; font-weight: 700; text-decoration: underline; }
.admin-chat-layout { display: grid; grid-template-columns: minmax(230px, 310px) minmax(0, 1fr); gap: 18px; margin-top: 24px; }
.admin-chat-queue { align-self: start; overflow: hidden; padding: 8px; }
.support-chat-back { display: block; padding: 10px; color: #28731f; font-size: 13px; font-weight: 700; }
.support-chat-queue-row { display: flex; align-items: center; gap: 12px; padding: 15px 12px; border-bottom: 1px solid #edf1eb; color: inherit; text-decoration: none; }
.support-chat-queue-row:last-child { border-bottom: 0; }
.support-chat-queue-row:hover { background: #f6faf5; }
.support-chat-queue-main, .support-chat-queue-meta { display: grid; min-width: 0; gap: 3px; }
.support-chat-queue-main { flex: 1; }
.support-chat-queue-main strong { overflow: hidden; color: #1d2a1e; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.support-chat-queue-main small, .support-chat-queue-meta small { color: #778178; font-size: 10px; }
.support-chat-queue-meta { color: #536055; text-align: right; font-size: 11px; }
.support-chat-queue-row.compact { align-items: flex-start; padding: 12px 8px; }
.support-chat-queue-row.compact .support-chat-queue-status { font-size: 10px; padding: 4px 7px; }
.admin-chat-panel { min-width: 0; padding: 20px; }
.admin-chat-panel-head > div { display: grid; gap: 3px; }
.admin-chat-panel-head strong { color: #19251a; }
.admin-chat-panel-head small { color: #758077; font-size: 12px; }
.staff-account-lookup { position: relative; }
.staff-account-results { position: absolute; z-index: 20; top: calc(100% - 20px); right: 0; left: 0; overflow: hidden; max-height: 290px; overflow-y: auto; border: 1px solid #d6e0d3; border-radius: 0 0 12px 12px; background: #fff; box-shadow: 0 14px 30px rgba(20,40,20,.12); }
.staff-account-result { display: grid; width: 100%; gap: 3px; padding: 11px 13px; border: 0; border-bottom: 1px solid #edf1eb; color: #1d2a1e; background: #fff; text-align: left; }
.staff-account-result:hover, .staff-account-result:focus-visible { background: #f1f7ef; }
.staff-account-result small { color: #778178; font-size: 11px; }
.staff-account-empty { margin: 0; padding: 12px; color: #68746a; font-size: 13px; }
.staff-account-selected { margin-top: 9px; color: #536055; font-size: 12px; }
.staff-account-selected[hidden] { display: none; }
.staff-account-selected strong { color: #235d20; }
.staff-account-selected button { margin-left: 8px; border: 0; color: #28731f; background: transparent; font-weight: 700; text-decoration: underline; }
.staff-primary-button { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; border: 0; border-radius: 10px; padding: 9px 16px; color: #fff; background: #28731f; font-size: 13px; font-weight: 700; text-decoration: none; transition: background .16s ease, transform .16s ease; }
.staff-primary-button:hover { color: #fff; background: #1c5b20; transform: translateY(-1px); }
.staff-primary-button:disabled { cursor: not-allowed; opacity: .55; transform: none; }

/* Public and signed-in JaraWeb support chat */
.jara-live-chat { --jara-green: #28731f; --jara-ink: #152018; --jara-muted: #69776a; position: fixed; right: 24px; bottom: 24px; z-index: 100000; font-family: inherit; }
.jara-live-chat-launch { display: inline-flex; align-items: center; gap: 10px; min-height: 54px; border: 0; border-radius: 999px; padding: 8px 19px 8px 10px; color: #fff; background: #28731f; box-shadow: 0 12px 32px rgba(16, 50, 19, .25); font-size: 14px; font-weight: 750; cursor: pointer; transition: transform .18s ease, background .18s ease, box-shadow .18s ease; }
.jara-live-chat-launch:hover { transform: translateY(-2px); background: #1d5c18; box-shadow: 0 16px 36px rgba(16, 50, 19, .32); }
.jara-live-chat-launch:focus-visible, .jara-live-chat-panel button:focus-visible, .jara-live-chat-panel a:focus-visible { outline: 3px solid #95ce87; outline-offset: 3px; }
.jara-live-chat-launch-icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; color: #28731f; background: #fff; }
.jara-live-chat-launch-icon svg { width: 22px; height: 22px; }
.jara-live-chat-panel { position: absolute; right: 0; bottom: 68px; display: flex; flex-direction: column; width: min(390px, calc(100vw - 32px)); max-height: min(670px, calc(100vh - 110px)); overflow: hidden; border: 1px solid #dfe8db; border-radius: 20px; background: #fff; box-shadow: 0 24px 70px rgba(15, 35, 18, .22); }
.jara-live-chat-panel[hidden], .jara-live-chat-conversation[hidden], .jara-live-chat-feedback[hidden], .jara-live-chat-error[hidden] { display: none !important; }
.jara-live-chat-header { display: flex; align-items: center; gap: 11px; flex: 0 0 auto; padding: 16px; color: #fff; background: #143516; }
.jara-live-chat-brand-mark { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid rgba(255,255,255,.35); border-radius: 14px; color: #173b17; background: #d9edd4; font-size: 19px; font-weight: 800; }
.jara-live-chat-header > div { display: grid; min-width: 0; gap: 3px; flex: 1; }
.jara-live-chat-header strong { font-size: 14px; }
.jara-live-chat-header small { color: #d0dfce; font-size: 11px; line-height: 1.35; }
.jara-live-chat-minimize { width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.25); border-radius: 10px; color: #fff; background: transparent; font-size: 22px; line-height: 1; cursor: pointer; }
.jara-live-chat-body { min-height: 0; overflow-y: auto; padding: 18px; }
.jara-live-chat-intro { margin: 0 0 17px; }
.jara-live-chat-eyebrow { color: #28731f; font-size: 10px; font-weight: 800; letter-spacing: .13em; }
.jara-live-chat-intro h2 { margin: 6px 0; color: #152018; font-size: 21px; line-height: 1.2; }
.jara-live-chat-intro p { margin: 0; color: #69776a; font-size: 12px; line-height: 1.5; }
.jara-live-chat-signin { margin-top: 6px !important; }
.jara-live-chat-signin a { color: #235e20; font-weight: 750; }
.jara-live-chat-start { display: grid; gap: 12px; }
.jara-live-chat-start > label:not(.jara-live-chat-privacy) { display: grid; gap: 6px; color: #28382a; font-size: 12px; font-weight: 700; }
.jara-live-chat-start input:not([type="checkbox"]), .jara-live-chat-start textarea, .jara-live-chat-reply textarea { width: 100%; min-width: 0; border: 1px solid #d7e1d4; border-radius: 10px; padding: 10px 12px; color: #152018; background: #fff; font: inherit; font-size: 13px; line-height: 1.4; outline: none; }
.jara-live-chat-start input:not([type="checkbox"]):focus, .jara-live-chat-start textarea:focus, .jara-live-chat-reply textarea:focus { border-color: #28731f; box-shadow: 0 0 0 3px rgba(40,115,31,.12); }
.jara-live-chat-start textarea { min-height: 82px; resize: vertical; }
.jara-live-chat-hint { margin: -6px 0 0; color: #6a786c; font-size: 11px; line-height: 1.45; }
.jara-live-chat-privacy { display: flex; align-items: flex-start; gap: 8px; color: #5c6a5d; font-size: 11px; line-height: 1.45; }
.jara-live-chat-privacy input { flex: 0 0 auto; margin: 2px 0 0; accent-color: #28731f; }
.jara-live-chat-privacy a { color: #235e20; font-weight: 750; }
.jara-live-chat-trap { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; }
.jara-live-chat-primary, .jara-live-chat-reply button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 43px; border: 0; border-radius: 10px; padding: 10px 14px; color: #fff; background: #28731f; font-size: 13px; font-weight: 750; cursor: pointer; }
.jara-live-chat-primary:hover, .jara-live-chat-reply button:hover { background: #1d5c18; }
.jara-live-chat-primary:disabled, .jara-live-chat-reply button:disabled { cursor: wait; opacity: .65; }
.jara-live-chat-safety { color: #788479; font-size: 10px; text-align: center; }
.jara-live-chat-error, .jara-live-chat-feedback { margin: 10px 0 0; border: 1px solid #f0caca; border-radius: 9px; padding: 9px 10px; color: #8c2828; background: #fff6f6; font-size: 12px; line-height: 1.45; }
.jara-live-chat-feedback { border-color: #d6e7d2; color: #255d20; background: #f3faf1; }
.jara-live-chat-chat-meta { display: flex; align-items: center; justify-content: space-between; gap: 9px; margin-bottom: 12px; color: #758077; font-size: 10px; }
.jara-live-chat-chat-meta strong { color: #253528; }
.jara-live-chat-status { border-radius: 999px; padding: 5px 8px; color: #235d20; background: #e8f3e5; font-size: 10px; font-weight: 750; white-space: nowrap; }
.jara-live-chat-status[data-state="waiting"] { color: #805500; background: #fff4d8; }
.jara-live-chat-status[data-state="closed"] { color: #5f685f; background: #eef1ed; }
.jara-live-chat-log { display: flex; flex-direction: column; gap: 9px; min-height: 175px; max-height: 330px; overflow-y: auto; border: 1px solid #e3ebe0; border-radius: 13px; padding: 12px; background: #f8fbf7; }
.jara-live-chat-empty { margin: auto; color: #748076; font-size: 12px; text-align: center; }
.jara-live-chat-message { width: fit-content; max-width: 89%; border: 1px solid #e0e9dd; border-radius: 12px 12px 12px 3px; padding: 9px 11px; background: #fff; box-shadow: 0 3px 10px rgba(16,44,20,.035); }
.jara-live-chat-message.from-customer { align-self: flex-end; border-color: #cfe3ca; border-radius: 12px 12px 3px 12px; background: #edf6ea; }
.jara-live-chat-message-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; margin-bottom: 4px; color: #435345; font-size: 10px; }
.jara-live-chat-message-meta time { color: #778178; font-size: 9px; }
.jara-live-chat-message p { margin: 0; color: #172018; font-size: 12px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.jara-live-chat-reply { display: grid; gap: 8px; margin-top: 10px; }
.jara-live-chat-reply textarea { min-height: 62px; resize: vertical; }
.jara-live-chat-reply > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.jara-live-chat-reply small { color: #778178; font-size: 10px; }
.jara-live-chat-reply button { min-height: 36px; border-radius: 9px; padding: 7px 13px; font-size: 12px; }
.jara-live-chat-end { margin-top: 10px; border: 0; padding: 3px 0; color: #69776a; background: transparent; font-size: 11px; text-decoration: underline; cursor: pointer; }
.jara-live-chat-end:hover { color: #1c5b20; }
.staff-portal .admin-chat-layout { grid-template-columns: minmax(250px, 320px) minmax(0, 1fr); align-items: start; gap: 20px; margin-top: 22px; }
.staff-portal .admin-chat-queue, .staff-portal .admin-chat-panel { border: 1px solid #e2e9e1; border-radius: 16px; background: #fff; box-shadow: 0 10px 32px rgba(24,44,25,.055); }
.staff-portal .admin-chat-queue { max-height: min(72vh, 760px); overflow-y: auto; padding: 8px; }
.staff-portal .admin-chat-panel { padding: 20px; }
.staff-portal .admin-chat-panel-head { min-height: 54px; padding: 4px 0 15px; }
.staff-portal .admin-chat-panel-head strong { font-size: 15px; }
.admin-chat-origin { color: #28731f !important; font-weight: 700; }
.staff-portal .support-chat-window { grid-template-rows: minmax(320px, 52vh) auto; margin-top: 16px; }
.staff-portal .support-chat-log { gap: 14px; padding: 22px; }
.staff-portal .support-chat-message { max-width: min(78%, 700px); padding: 12px 15px; }
.staff-portal .support-chat-message p { font-size: 13px; }
.staff-portal .support-chat-compose { padding: 16px; }
.staff-portal .support-chat-compose textarea { min-height: 88px; }
.staff-portal .support-chat-actions { align-items: flex-start; flex-wrap: wrap; }

@media (max-width: 760px) {
    .admin-chat-layout { grid-template-columns: 1fr; }
    .admin-chat-queue { max-height: 250px; overflow-y: auto; }
    .admin-chat-panel { padding: 14px; }
    .support-chat-window { grid-template-rows: minmax(260px, 48vh) auto; }
    .support-chat-log { padding: 13px; }
    .support-chat-message { max-width: 94%; }
    .support-chat-compose-footer, .support-chat-actions { align-items: flex-start; flex-direction: column; }
    .support-chat-topline { align-items: flex-start; flex-direction: column; }
    .jara-live-chat { right: 14px; bottom: 14px; }
    .jara-live-chat-launch { min-height: 50px; padding-right: 15px; }
    .jara-live-chat-panel { right: 0; bottom: 62px; width: min(390px, calc(100vw - 28px)); max-height: calc(100vh - 92px); }
    .jara-live-chat-log { max-height: min(42vh, 310px); }
    .staff-portal .admin-chat-layout { grid-template-columns: 1fr; }
    .staff-portal .admin-chat-queue { max-height: 235px; }
    .staff-portal .admin-chat-panel { padding: 14px; }
    .staff-portal .support-chat-window { grid-template-rows: minmax(250px, 43vh) auto; }
    .staff-portal .support-chat-message { max-width: 93%; }
}

@media (prefers-reduced-motion: reduce) {
    .jara-live-chat-launch { transition: none; }
}