/* ================================================
   Hostease New theme surface
   ================================================ */

:root {
    --he-bg: #f8f8f6;
    --he-bg-light: #f4f4f1;
    --he-card-bg: #ffffff;
    --he-fg: #1f1f20;
    --he-fg-muted: #4a4a4c;
    --he-primary: #1db954;
    --he-primary-accessible: #0f7a39;
    --he-primary-hover: #149a47;
    --he-primary-fg: #ffffff;
    --he-primary-muted: rgba(29, 185, 84, 0.10);
    --he-border: rgba(31, 31, 30, 0.15);
    --he-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.05), 0 10px 28px rgba(0, 0, 0, 0.08);
    --he-sidebar-link: #54657d;
    --he-sidebar-link-hover: #1db954;
    --he-sidebar-link-hover-bg: rgba(29, 185, 84, 0.10);
    --he-sidebar-link-active: #1db954;
    --he-sidebar-link-active-bg: rgba(29, 185, 84, 0.12);
    --he-dashboard-action-bg: #f7f9fc;
    --he-dashboard-action-border: #dbe4ee;
    --he-dashboard-action-color: #3f5169;
    --he-dashboard-action-hover-bg: #eef3f8;
    --he-dashboard-action-hover-border: #c8d4e2;
    --he-dashboard-action-hover-color: #24354b;
    --he-sidebar-submenu-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 8px 18px rgba(23, 43, 77, 0.05);
}

html[data-theme="dark"],
body[data-theme="dark"],
body.theme-dark {
    --he-bg: #1e1e1d;
    --he-bg-light: #262624;
    --he-card-bg: #2a2a28;
    --he-fg: #f1f1f2;
    --he-fg-muted: #a1a1aa;
    --he-primary: #22c55e;
    --he-primary-accessible: #22c55e;
    --he-primary-hover: #16a34a;
    --he-primary-muted: rgba(34, 197, 94, 0.16);
    --he-border: rgba(255, 255, 255, 0.15);
    --he-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.24), 0 10px 28px rgba(0, 0, 0, 0.30);
    --he-sidebar-link: #a1a1aa;
    --he-sidebar-link-hover: #22c55e;
    --he-sidebar-link-hover-bg: rgba(34, 197, 94, 0.16);
    --he-sidebar-link-active: #22c55e;
    --he-sidebar-link-active-bg: rgba(34, 197, 94, 0.18);
    --he-dashboard-action-bg: rgba(255, 255, 255, 0.08);
    --he-dashboard-action-border: rgba(255, 255, 255, 0.18);
    --he-dashboard-action-color: #f1f1f2;
    --he-dashboard-action-hover-bg: rgba(34, 197, 94, 0.16);
    --he-dashboard-action-hover-border: #22c55e;
    --he-dashboard-action-hover-color: #22c55e;
    --he-sidebar-submenu-shadow: none;
}

body {
    background-color: var(--he-bg);
    color: var(--he-fg);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.topbar .language-menu > .language-menu-trigger.text-muted {
    color: var(--he-fg-muted) !important;
}

body[data-theme="dark"] .topbar,
body.theme-dark .topbar,
body[data-theme="dark"] .navbar,
body.theme-dark .navbar {
    background-color: var(--he-bg);
    border-bottom-color: var(--he-border);
}

body[data-theme="dark"] .card,
body.theme-dark .card,
body[data-theme="dark"] .panel,
body.theme-dark .panel {
    background-color: var(--he-card-bg);
    border-color: var(--he-border);
    color: var(--he-fg);
}

body[data-theme="dark"] .card-header,
body.theme-dark .card-header,
body[data-theme="dark"] .panel-heading,
body.theme-dark .panel-heading {
    background-color: var(--he-bg-light);
    border-bottom-color: var(--he-border);
    color: var(--he-fg);
}

body[data-theme="dark"] .list-group-item,
body.theme-dark .list-group-item,
body[data-theme="dark"] .card-footer,
body.theme-dark .card-footer {
    background-color: var(--he-card-bg);
    border-color: var(--he-border);
    color: var(--he-fg);
}

body[data-theme="dark"] .client-dashboard__panels .dashboard-panel .card-header,
body.theme-dark .client-dashboard__panels .dashboard-panel .card-header {
    background-color: var(--he-bg-light);
    border-bottom-color: var(--he-border);
    color: var(--he-fg);
}

body[data-theme="dark"] .client-dashboard__panels .dashboard-panel .card-header .card-title,
body.theme-dark .client-dashboard__panels .dashboard-panel .card-header .card-title {
    color: var(--he-fg);
}

body[data-theme="dark"] .client-dashboard__panels .dashboard-panel .card-footer,
body.theme-dark .client-dashboard__panels .dashboard-panel .card-footer,
body[data-theme="dark"] .client-dashboard__panels .dashboard-panel .list-group-item,
body.theme-dark .client-dashboard__panels .dashboard-panel .list-group-item {
    background-color: var(--he-card-bg);
    border-color: var(--he-border);
    color: var(--he-fg);
}

body[data-theme="dark"] .alert,
body.theme-dark .alert {
    background-color: var(--he-bg-light);
    border-color: var(--he-border);
    color: var(--he-fg);
}

body[data-theme="dark"] .alert .btn,
body.theme-dark .alert .btn {
    border-color: var(--he-dashboard-action-border);
    background-color: var(--he-dashboard-action-bg);
    color: var(--he-dashboard-action-color);
}

body[data-theme="dark"] .left-sidebar,
body.theme-dark .left-sidebar,
body[data-theme="dark"] .sidebar,
body.theme-dark .sidebar {
    background-color: var(--he-bg);
    border-right-color: var(--he-border);
}

.he-dashboard-hero-main {
    padding: 0;
    margin: 0;
}

.he-dashboard-hero-card {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
    padding: 1.75rem;
    border: 1px solid var(--he-border);
    border-radius: 0.875rem;
    background-color: var(--he-card-bg);
    box-shadow: var(--he-shadow-card);
}

.he-dashboard-hero-copy,
.he-dashboard-hero-stats {
    min-width: 0;
}

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

.he-dashboard-stat-card {
    display: flex;
    flex-direction: column;
    min-height: 130px;
    padding: 1rem;
    border: 1px solid var(--he-border);
    border-radius: 0.75rem;
    background-color: var(--he-card-bg);
    color: var(--he-fg);
    text-decoration: none;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.he-dashboard-stat-card:hover,
.he-dashboard-stat-card:focus {
    border-color: var(--he-primary);
    background-color: var(--he-primary-muted);
    color: var(--he-fg);
    text-decoration: none;
}

.he-dashboard-stat-label {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin: 0 0 0.375rem;
    font-size: 0.875rem;
    color: var(--he-fg-muted);
}

.he-dashboard-stat-value {
    font-size: 1.25rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--he-fg);
}

.he-dashboard-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.875rem;
    border-radius: 999px;
    background-color: var(--he-primary-muted);
    color: var(--he-primary);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.he-dashboard-title {
    margin: 1rem 0 0.5rem;
    color: var(--he-fg);
    font-size: 2.25rem;
    line-height: 1.15;
    font-weight: 800;
}

.he-dashboard-lead {
    margin: 0 0 1.25rem;
    color: var(--he-fg-muted);
    font-size: 1rem;
    line-height: 1.6;
}

.he-dashboard-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.he-dashboard-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    height: 2.5rem;
    padding: 0 0.875rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.he-dashboard-action:hover,
.he-dashboard-action:focus {
    text-decoration: none;
}

.he-dashboard-action-primary {
    border: 1px solid var(--he-primary);
    background-color: var(--he-primary);
    color: var(--he-primary-fg);
}

.he-dashboard-action-primary:hover,
.he-dashboard-action-primary:focus {
    border-color: var(--he-primary-hover);
    background-color: var(--he-primary-hover);
    color: var(--he-primary-fg);
}

.he-dashboard-action-outline {
    border: 1px solid var(--he-border);
    background-color: transparent;
    color: var(--he-fg);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.he-dashboard-action-outline:hover,
.he-dashboard-action-outline:focus {
    border-color: var(--he-primary);
    background-color: var(--he-primary-muted);
    color: var(--he-primary);
}

@media (max-width: 1199px) {
    .he-dashboard-hero-card {
        grid-template-columns: 1fr;
    }
}

/* align18: active cart/store pages use one page surface and token colors */
body.page-products #order-standard_cart,
body.page-configureproductdomain #order-standard_cart,
body.page-configureproduct #order-standard_cart,
body.page-viewcart #order-standard_cart {
    max-width: 1280px;
    margin: 12px auto 28px;
    padding: 16px;
    border: 1px solid var(--he-border);
    border-radius: 10px;
    background: var(--he-card-bg);
    box-shadow: var(--he-shadow-card);
    color: var(--he-fg);
}

body.page-products #order-standard_cart .cart-body,
body.page-configureproductdomain #order-standard_cart .cart-body,
body.page-configureproduct #order-standard_cart .cart-body,
body.page-viewcart #order-standard_cart .cart-body,
body.page-viewcart #order-standard_cart .secondary-cart-body,
body.page-viewcart #order-standard_cart .secondary-cart-sidebar {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

body.page-products #order-standard_cart .cart-sidebar,
body.page-configureproductdomain #order-standard_cart .cart-sidebar,
body.page-configureproduct #order-standard_cart .cart-sidebar,
body.page-viewcart #order-standard_cart .cart-sidebar {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

body.page-products #order-standard_cart .products .product,
body.page-products #order-standard_cart .product,
body.page-configureproductdomain #order-standard_cart .domain-selection-options .option,
body.page-configureproductdomain #order-standard_cart .product-info,
body.page-configureproduct #order-standard_cart .product-info,
body.page-configureproduct #order-standard_cart .field-container,
body.page-viewcart #order-standard_cart .view-cart-items,
body.page-viewcart #order-standard_cart .view-cart-items .item,
body.page-viewcart #order-standard_cart .panel.card.card-sidebar,
body.page-viewcart #order-standard_cart .order-summary,
body.page-viewcart #order-standard_cart #orderSummary,
body.page-viewcart #order-standard_cart .account,
body.page-viewcart #order-standard_cart .account.active {
    border: 1px solid var(--he-border-soft);
    border-radius: 10px;
    background: var(--he-card-bg);
    color: var(--he-fg);
    box-shadow: none;
}

body.page-products #order-standard_cart .product-desc,
body.page-products #order-standard_cart .products .product-desc,
body.page-products #order-standard_cart .products .product footer,
body.page-viewcart #order-standard_cart .summary-container,
body.page-viewcart #order-standard_cart .summary-totals {
    border-color: var(--he-border-soft);
    background: transparent;
    color: var(--he-fg);
    box-shadow: none;
}

body.page-products #order-standard_cart .products-header,
body.page-products #order-standard_cart .products .product header,
body.page-configureproductdomain #order-standard_cart .sub-heading span,
body.page-configureproductdomain #order-standard_cart .primary-bg-color,
body.page-configureproduct #order-standard_cart .sub-heading span,
body.page-configureproduct #order-standard_cart .primary-bg-color,
body.page-viewcart #order-standard_cart .view-cart-items-header,
body.page-viewcart #order-standard_cart .primary-bg-color {
    border: 1px solid var(--he-border-soft);
    background: var(--he-bg-light);
    color: var(--he-fg-strong);
    box-shadow: none;
}

body.page-products #order-standard_cart h1,
body.page-products #order-standard_cart h2,
body.page-products #order-standard_cart h3,
body.page-products #order-standard_cart h4,
body.page-products #order-standard_cart h5,
body.page-products #order-standard_cart .product-title,
body.page-products #order-standard_cart .product-name,
body.page-configureproductdomain #order-standard_cart h1,
body.page-configureproductdomain #order-standard_cart h2,
body.page-configureproductdomain #order-standard_cart h3,
body.page-configureproductdomain #order-standard_cart h4,
body.page-configureproductdomain #order-standard_cart h5,
body.page-configureproductdomain #order-standard_cart .product-title,
body.page-configureproduct #order-standard_cart h1,
body.page-configureproduct #order-standard_cart h2,
body.page-configureproduct #order-standard_cart h3,
body.page-configureproduct #order-standard_cart h4,
body.page-configureproduct #order-standard_cart h5,
body.page-configureproduct #order-standard_cart .product-title,
body.page-viewcart #order-standard_cart h1,
body.page-viewcart #order-standard_cart h2,
body.page-viewcart #order-standard_cart h3,
body.page-viewcart #order-standard_cart h4,
body.page-viewcart #order-standard_cart h5,
body.page-viewcart #order-standard_cart .product-title,
body.page-viewcart #order-standard_cart .account-title {
    color: var(--he-fg-strong);
}

body.page-products #order-standard_cart p,
body.page-products #order-standard_cart li,
body.page-products #order-standard_cart .product-desc,
body.page-products #order-standard_cart .pricing,
body.page-configureproductdomain #order-standard_cart p,
body.page-configureproductdomain #order-standard_cart li,
body.page-configureproductdomain #order-standard_cart label,
body.page-configureproductdomain #order-standard_cart .help-block,
body.page-configureproductdomain #order-standard_cart .field-help-text,
body.page-configureproduct #order-standard_cart p,
body.page-configureproduct #order-standard_cart li,
body.page-configureproduct #order-standard_cart label,
body.page-configureproduct #order-standard_cart .help-block,
body.page-configureproduct #order-standard_cart .field-help-text,
body.page-viewcart #order-standard_cart p,
body.page-viewcart #order-standard_cart li,
body.page-viewcart #order-standard_cart label,
body.page-viewcart #order-standard_cart .summary-totals,
body.page-viewcart #order-standard_cart .account-body,
body.page-viewcart #order-standard_cart .account .address {
    color: var(--he-fg-muted);
}

body.page-products #order-standard_cart .form-control,
body.page-products #order-standard_cart .custom-select,
body.page-products #order-standard_cart select,
body.page-configureproductdomain #order-standard_cart .form-control,
body.page-configureproductdomain #order-standard_cart .custom-select,
body.page-configureproductdomain #order-standard_cart select,
body.page-configureproductdomain #order-standard_cart .field,
body.page-configureproduct #order-standard_cart .form-control,
body.page-configureproduct #order-standard_cart .custom-select,
body.page-configureproduct #order-standard_cart select,
body.page-configureproduct #order-standard_cart .field,
body.page-viewcart #order-standard_cart .form-control,
body.page-viewcart #order-standard_cart .custom-select,
body.page-viewcart #order-standard_cart select {
    border: 1px solid var(--he-border);
    background: var(--he-card-bg);
    color: var(--he-fg);
    box-shadow: none;
}

body.page-products #order-standard_cart .btn-default,
body.page-configureproductdomain #order-standard_cart .btn-default,
body.page-configureproduct #order-standard_cart .btn-default,
body.page-viewcart #order-standard_cart .btn-default {
    border: 1px solid var(--he-dashboard-action-border);
    background: var(--he-dashboard-action-bg);
    color: var(--he-dashboard-action-color);
    box-shadow: none;
}

body.page-products #order-standard_cart .btn-default:hover,
body.page-configureproductdomain #order-standard_cart .btn-default:hover,
body.page-configureproduct #order-standard_cart .btn-default:hover,
body.page-viewcart #order-standard_cart .btn-default:hover {
    border-color: var(--he-dashboard-action-hover-border);
    background: var(--he-dashboard-action-hover-bg);
    color: var(--he-dashboard-action-hover-color);
}

body.page-viewcart #order-standard_cart .account.active {
    border-color: var(--he-primary);
    background: var(--he-primary-muted);
}

/* align19: ticket detail page tokenized and de-nested */
.ticket-view-page .view-ticket,
.ticket-view-page #ticketReplyContainer {
    overflow: hidden;
    border: 1px solid var(--he-border);
    border-radius: 10px;
    background: var(--he-card-bg);
    color: var(--he-fg);
    box-shadow: var(--he-shadow-card);
}

.ticket-view-page .view-ticket > .card-body:first-child,
.ticket-view-page #ticketReplyContainer .card-body {
    border-bottom: 1px solid var(--he-border-soft);
    background: transparent;
}

.ticket-view-page .view-ticket > .card-body + .card-body {
    border: 0;
    background: transparent;
    box-shadow: none;
}

.ticket-view-page .card-title,
.ticket-title-main,
.ticket-info-section .info-value,
.ticket-reply .posted-by-name,
.ticket-view-page .view-ticket p.mb-3 strong,
.ticket-view-page #ticketReplyContainer .card-title {
    color: var(--he-fg-strong);
}

.ticket-title-eyebrow,
.ticket-view-page .view-ticket p.mb-3,
.ticket-info-section .info-label,
.ticket-reply .posted-by,
.ticket-reply .attachments {
    color: var(--he-fg-muted);
}

.ticket-info-section .ticket-info-item,
.ticket-reply,
.ticket-reply.staff,
.ticket-reply .attachment-list li a {
    border: 1px solid var(--he-border-soft);
    background: var(--he-card-bg);
    color: var(--he-fg);
    box-shadow: none;
}

.ticket-info-section .ticket-info-item:hover,
.ticket-reply .attachment-list li a:hover {
    border-color: var(--he-border);
    background: var(--he-bg-light);
    box-shadow: none;
}

.ticket-reply .posted-by,
.ticket-reply.staff .posted-by {
    border-bottom: 1px solid var(--he-border-soft);
    background: var(--he-bg-light);
    color: var(--he-fg-muted);
}

.ticket-reply .message,
.ticket-reply .message.p-3,
.ticket-reply div.message,
.card-body .ticket-reply .message,
.ticket-reply.markdown-content .message {
    background: transparent;
    color: var(--he-fg);
}

.ticket-view-page .form-control,
.ticket-view-page textarea.form-control,
.ticket-view-page .custom-file-label {
    border: 1px solid var(--he-border);
    background: var(--he-card-bg);
    color: var(--he-fg);
    box-shadow: none;
}

.ticket-view-page .form-control:focus,
.ticket-view-page textarea.form-control:focus {
    border-color: var(--he-primary);
    background: var(--he-card-bg);
    color: var(--he-fg);
    box-shadow: 0 0 0 0.18rem var(--he-primary-muted);
}

/* align20: public homepage, login fallback and affiliates spacing */
.page-homepage .public-homepage__hero-main,
.page-homepage .public-homepage__hero-panel,
.page-homepage .public-homepage__section,
.page-homepage .public-homepage__domain-panel,
.page-homepage .public-homepage__product-card,
.page-homepage .public-homepage__ops-card,
.page-homepage .public-homepage__metric {
    border-color: var(--he-border);
    background: var(--he-card-bg);
    color: var(--he-fg);
    box-shadow: var(--he-shadow-card);
}

.page-homepage .public-homepage__metric,
.page-homepage .public-homepage__product-card,
.page-homepage .public-homepage__ops-card {
    box-shadow: none;
}

.page-homepage .public-homepage__title,
.page-homepage .public-homepage__section-title,
.page-homepage .public-homepage__product-name,
.page-homepage .public-homepage__ops-card strong,
.page-homepage .public-homepage__metric strong {
    color: var(--he-fg-strong);
}

.page-homepage .public-homepage__lead,
.page-homepage .public-homepage__product-desc,
.page-homepage .public-homepage__ops-card span,
.page-homepage .public-homepage__domain-copy p,
.page-homepage .public-homepage__metric span {
    color: var(--he-fg-muted);
}

.page-homepage .public-homepage__eyebrow,
.page-homepage .public-homepage__section-label,
.page-homepage .public-homepage__product-icon,
.page-homepage .public-homepage__ops-card i {
    background: var(--he-primary-muted);
    color: var(--he-primary-accessible);
}

.page-homepage .public-homepage__product-link {
    color: var(--he-primary-accessible);
}

.page-homepage .public-homepage__domain-input,
.page-login .form-control,
.page-login .custom-login-card .input-group-text {
    border-color: var(--he-border);
    background: var(--he-card-bg);
    color: var(--he-fg);
}

.page-login .custom-login-card,
.page-login .login-card {
    border: 1px solid var(--he-border);
    border-radius: 10px;
    background: var(--he-card-bg);
    color: var(--he-fg);
    box-shadow: var(--he-shadow-card);
}

.page-login .custom-login-card .card-footer,
.page-login .login-card .card-footer,
.page-login .bg-white {
    border-color: var(--he-border-soft);
    background: var(--he-card-bg) !important;
    color: var(--he-fg);
}

.page-affiliates .affiliate-hero-section,
.page-affiliates .card,
.page-affiliates .stat-card,
.page-affiliates .section-container {
    border: 1px solid var(--he-border);
    border-radius: 10px;
    background: var(--he-card-bg);
    color: var(--he-fg);
    box-shadow: var(--he-shadow-card);
}

.page-affiliates .section-container {
    padding: 16px;
}

.page-affiliates .section-container .table-container {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.page-affiliates .card.border-0,
.page-affiliates .stat-card,
.page-affiliates .affiliate-hero-section {
    border-color: var(--he-border) !important;
}

.page-affiliates #referralLink,
.page-affiliates .code-block,
.page-affiliates .bg-primary-light,
.page-affiliates .bg-light {
    border: 1px solid var(--he-border-soft);
    background: var(--he-bg-light) !important;
    color: var(--he-fg);
}

.page-affiliates .code-block pre,
.page-affiliates .code-block code,
.page-affiliates .stat-card__label,
.page-affiliates .small {
    color: var(--he-fg-muted);
}

@media (max-width: 767.98px) {
    body.page-products #order-standard_cart,
    body.page-configureproductdomain #order-standard_cart,
    body.page-configureproduct #order-standard_cart,
    body.page-viewcart #order-standard_cart {
        margin: 8px 0 24px;
        padding: 12px;
    }

    .page-affiliates .section-container {
        padding: 12px;
    }
}

@media (max-width: 640px) {
    .he-dashboard-hero-card {
        padding: 1.25rem;
    }

    .he-dashboard-stats-grid,
    .he-dashboard-actions {
        grid-template-columns: 1fr;
    }

    .he-dashboard-actions {
        display: grid;
    }

    .he-dashboard-title {
        font-size: 1.875rem;
    }
}


/* ================================================
   Hostease dashboard alignment layer
   Inspired by the target dashboard system: warm surfaces,
   low contrast navigation, compact shell, and light cards.
   ================================================ */

:root {
    --he-bg: #faf9f5;
    --he-bg-light: #f1f0ea;
    --he-card-bg: #faf9f5;
    --he-card-subtle: #fdfcf8;
    --he-fg: #3a362d;
    --he-fg-strong: #171717;
    --he-fg-muted: #625b53;
    --he-border: rgba(145, 137, 120, 0.34);
    --he-border-soft: rgba(145, 137, 120, 0.22);
    --he-primary: #4fbd62;
    --he-primary-hover: #43a755;
    --he-primary-muted: rgba(79, 189, 98, 0.10);
    --he-shadow-card: 0 1px 2px rgba(58, 54, 45, 0.08), 0 10px 28px rgba(58, 54, 45, 0.05);
    --he-shell-sidebar-width: 256px;
    --he-shell-topbar-height: 48px;
    --he-sidebar-link-width: 218px;
    --he-sidebar-link: #3f3c36;
    --he-sidebar-link-hover: #292720;
    --he-sidebar-link-hover-bg: #eeece5;
    --he-sidebar-link-active: #292720;
    --he-sidebar-link-active-bg: #e9e7df;
    --he-dashboard-action-bg: transparent;
    --he-dashboard-action-border: var(--he-border);
    --he-dashboard-action-color: var(--he-fg);
    --he-dashboard-action-hover-bg: #eeece5;
    --he-dashboard-action-hover-border: rgba(98, 92, 80, 0.34);
    --he-dashboard-action-hover-color: var(--he-fg-strong);
}

html[data-theme="dark"],
body[data-theme="dark"],
body.theme-dark {
    --he-bg: #1d1d1b;
    --he-bg-light: #272622;
    --he-card-bg: #24231f;
    --he-card-subtle: #292824;
    --he-fg: #ece9df;
    --he-fg-strong: #fbfaf4;
    --he-fg-muted: #aaa59a;
    --he-border: rgba(236, 233, 223, 0.16);
    --he-border-soft: rgba(236, 233, 223, 0.10);
    --he-primary: #57d36b;
    --he-primary-hover: #4ac05d;
    --he-primary-muted: rgba(87, 211, 107, 0.14);
    --he-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.22), 0 10px 28px rgba(0, 0, 0, 0.26);
    --he-sidebar-link: #c8c3b8;
    --he-sidebar-link-hover: #fbfaf4;
    --he-sidebar-link-hover-bg: rgba(255, 255, 255, 0.07);
    --he-sidebar-link-active: #fbfaf4;
    --he-sidebar-link-active-bg: rgba(255, 255, 255, 0.10);
    --he-dashboard-action-bg: transparent;
    --he-dashboard-action-border: var(--he-border);
    --he-dashboard-action-color: var(--he-fg);
    --he-dashboard-action-hover-bg: rgba(255, 255, 255, 0.07);
    --he-dashboard-action-hover-border: rgba(255, 255, 255, 0.24);
    --he-dashboard-action-hover-color: var(--he-fg-strong);
}

body,
body .page-wrapper,
body #main-wrapper,
body .client-primary-content {
    background-color: var(--he-bg);
    color: var(--he-fg);
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-weight: 400;
}

.fix-header .topbar,
.topbar,
header.topbar.is_stuck {
    min-height: var(--he-shell-topbar-height);
    height: var(--he-shell-topbar-height);
    background: var(--he-bg);
    border-bottom: 1px solid var(--he-border-soft);
    box-shadow: none;
    color: var(--he-fg);
}

.topbar .top-navbar {
    min-height: var(--he-shell-topbar-height);
    height: var(--he-shell-topbar-height);
    padding-right: 18px;
}

.topbar .top-navbar .navbar-header {
    width: var(--he-shell-sidebar-width);
    min-height: var(--he-shell-topbar-height);
    line-height: var(--he-shell-topbar-height);
    background: var(--he-bg);
    border-right: 1px solid var(--he-border-soft);
}

.topbar .top-navbar .navbar-header .navbar-brand,
.topbar .top-navbar .navbar-header .navbar-brand b {
    line-height: var(--he-shell-topbar-height);
}

.topbar .top-navbar .navbar-nav > .nav-item > .nav-link,
.topbar .navbar-nav .nav-link,
.navbar-dark .navbar-nav .nav-link,
.topbar .navbar-nav .nav-link small,
.topbar .navbar-nav .nav-link span,
.topbar .navbar-nav .nav-link i {
    color: var(--he-fg);
}

.topbar .top-navbar .navbar-nav > .nav-item > .nav-link {
    line-height: var(--he-shell-topbar-height);
}

.he-theme-toggle,
.topbar .navbar-nav .nav-link {
    border-radius: 6px;
}

.he-theme-toggle:hover,
.topbar .navbar-nav .nav-link:hover {
    background-color: var(--he-sidebar-link-hover-bg);
    color: var(--he-sidebar-link-hover);
}

.left-sidebar,
.fix-header .left-sidebar {
    top: var(--he-shell-topbar-height);
    width: var(--he-shell-sidebar-width);
    height: calc(100vh - var(--he-shell-topbar-height));
    background-color: var(--he-bg);
    border-right: 1px solid var(--he-border-soft);
}

.scroll-sidebar {
    background-color: var(--he-bg);
}

.page-wrapper {
    margin-left: var(--he-shell-sidebar-width);
    padding-top: var(--he-shell-topbar-height);
}

.client-dashboard.container-fluid,
.container-fluid .client-dashboard,
.client-dashboard {
    padding: 18px 24px 28px;
}

.he-dashboard-hero-card {
    grid-template-columns: minmax(0, 1fr) 420px;
    gap: 20px;
    min-height: 226px;
    padding: 24px;
    border-color: var(--he-border);
    border-radius: 10px;
    background-color: var(--he-card-bg);
    box-shadow: var(--he-shadow-card);
}

.he-dashboard-hero-copy {
    display: flex;
    min-height: 178px;
    flex-direction: column;
    justify-content: center;
}

.he-dashboard-eyebrow {
    align-self: flex-start;
    padding: 0 10px;
    height: 28px;
    border-radius: 999px;
    background-color: color-mix(in srgb, var(--he-primary) 10%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--he-primary) 18%, transparent);
    color: var(--he-fg-muted);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

.he-dashboard-kicker-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.he-dashboard-date {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--he-fg-muted) 8%, transparent);
    color: var(--he-fg-muted);
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
}

.he-dashboard-date i {
    font-size: 12px;
    color: color-mix(in srgb, var(--he-primary) 62%, var(--he-fg-muted));
}

.he-dashboard-title {
    margin: 14px 0 8px;
    color: var(--he-fg-strong);
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 30px;
    line-height: 1.18;
    font-weight: 750;
    letter-spacing: -0.025em;
}

.he-dashboard-lead {
    max-width: 620px;
    margin-bottom: 18px;
    color: var(--he-fg-muted);
    font-size: 15px;
    line-height: 1.7;
}

.he-dashboard-actions {
    gap: 8px;
}

.he-dashboard-action {
    height: 40px;
    border-radius: 6px;
    padding: 0 14px;
    font-size: 14px;
    font-weight: 500;
}

.he-dashboard-action-primary {
    border-color: var(--he-primary);
    background-color: var(--he-primary);
    color: #ffffff;
}

.he-dashboard-action-outline {
    border-color: var(--he-border);
    background-color: transparent;
    color: var(--he-fg);
    box-shadow: 0 1px 2px rgba(58, 54, 45, 0.05);
}

.he-dashboard-stats-grid {
    gap: 12px;
}

.he-dashboard-stat-card {
    min-height: 84px;
    padding: 14px;
    border-color: var(--he-border);
    border-radius: 8px;
    background-color: var(--he-card-subtle);
}

.he-dashboard-stat-label {
    margin-bottom: 8px;
    color: var(--he-fg-muted);
    font-size: 14px;
    font-weight: 400;
}

.he-dashboard-stat-value {
    color: var(--he-fg-strong);
    font-size: 22px;
    line-height: 1.1;
    font-weight: 650;
}

.sidebar-nav > ul > li > a,
.sidebar-nav ul li ul li a,
.sidebar-nav #sidebarnav li a {
    color: var(--he-sidebar-link);
    border-radius: 8px;
    font-weight: 500;
}

.sidebar-nav ul li a.active,
.sidebar-nav ul li a:hover,
.sidebar-nav > ul > li.active > a,
.sidebar-nav ul li ul li a.active,
.sidebar-nav ul li ul li a:hover,
.sidebar-nav #sidebarnav li a:hover,
.sidebar-nav #sidebarnav li a.active,
.sidebar-nav ul li ul li.active > a,
.sidebar-nav ul li ul li.active > a.active,
.sidebar-nav #sidebarnav li.active > a {
    background-color: var(--he-sidebar-link-active-bg);
    color: var(--he-sidebar-link-active);
}

.sidebar-nav > ul > li > ul {
    background: transparent;
    border-left-color: var(--he-border-soft);
    box-shadow: none;
}

.client-dashboard__panels {
    margin-top: 16px;
}

.client-dashboard__panel-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    align-items: start;
    margin: 0;
}

.client-dashboard__panel-grid .dashboard-panel-column {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 18px;
}

.client-dashboard__panel-grid .dashboard-panel-slot {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
}

.client-dashboard__panels .dashboard-panel {
    overflow: hidden;
    border: 1px solid var(--he-border);
    border-radius: 10px;
    background-color: var(--he-card-bg);
    box-shadow: var(--he-shadow-card);
    color: var(--he-fg);
}

.client-dashboard__panels .dashboard-panel .card-header {
    min-height: 58px;
    padding: 16px 18px 8px;
    border-bottom: 0;
    background: transparent;
    color: var(--he-fg-strong);
}

.client-dashboard__panels .dashboard-panel .card-title {
    color: var(--he-fg-strong);
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 20px;
    line-height: 1.35;
    font-weight: 650;
    letter-spacing: -0.015em;
}

.client-dashboard__panels .dashboard-panel .card-body,
.client-dashboard__panels .dashboard-panel .list-group-item,
.client-dashboard__panels .dashboard-panel .card-footer {
    background-color: var(--he-card-bg);
    border-color: transparent;
    color: var(--he-fg);
}

.client-dashboard__panels .dashboard-panel .card-body {
    padding: 8px 18px 18px;
}

.client-dashboard__panels .dashboard-panel .list-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 4px 14px 16px;
    border: 0;
    background: transparent;
}

.client-dashboard__panels .dashboard-panel .list-group-item {
    margin: 0;
    padding: 10px 12px;
    border: 0 !important;
    border-radius: 8px;
    background: transparent;
    box-shadow: none;
}

.client-dashboard__panels .dashboard-panel .list-group-item + .list-group-item {
    border-top: 0;
}

.client-dashboard__panels .dashboard-panel .card-footer {
    padding: 0 18px 16px;
    border-top: 0;
}

.client-dashboard__panels .dashboard-panel .card-footer:empty {
    display: none;
}

.client-dashboard__panels .dashboard-panel .card-header .card-header-action,
.client-dashboard__panels .dashboard-panel .card-header .btn.btn-default,
.client-dashboard__panels .dashboard-panel .card-header .btn.bg-color-gold,
.client-dashboard__panels .dashboard-panel .card-header .btn.bg-color-blue,
.client-dashboard__panels .dashboard-panel .card-header .btn.bg-color-asbestos,
.client-dashboard__panels .dashboard-panel .card-header .btn.bg-color-red,
.client-dashboard__panels .dashboard-panel .card-header .btn.bg-color-teal,
.client-dashboard__panels .dashboard-panel .card-header .btn.bg-color-emerald {
    min-height: 32px;
    padding: 0 11px;
    border: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--he-fg-muted) 9%, transparent);
    color: var(--he-dashboard-action-color);
    box-shadow: none;
    font-size: 12px;
    font-weight: 500;
}

.client-dashboard__panels .dashboard-panel .card-header .card-header-action:hover,
.client-dashboard__panels .dashboard-panel .card-header .btn.btn-default:hover,
.client-dashboard__panels .dashboard-panel .card-header .btn.bg-color-gold:hover,
.client-dashboard__panels .dashboard-panel .card-header .btn.bg-color-blue:hover,
.client-dashboard__panels .dashboard-panel .card-header .btn.bg-color-asbestos:hover,
.client-dashboard__panels .dashboard-panel .card-header .btn.bg-color-red:hover,
.client-dashboard__panels .dashboard-panel .card-header .btn.bg-color-teal:hover,
.client-dashboard__panels .dashboard-panel .card-header .btn.bg-color-emerald:hover {
    background: color-mix(in srgb, var(--he-primary) 13%, var(--he-card-bg));
    color: var(--he-dashboard-action-hover-color);
}

@media (max-width: 1199px) {
    .he-dashboard-hero-card {
        grid-template-columns: 1fr;
    }

    .he-dashboard-hero-copy {
        min-height: 0;
    }
}

@media (max-width: 1023px) {
    .page-wrapper {
        margin-left: 60px;
    }
}

@media (max-width: 640px) {
    .client-dashboard.container-fluid,
    .client-dashboard {
        padding: 14px;
    }

    .he-dashboard-hero-card {
        padding: 20px;
    }

    .he-dashboard-title {
        font-size: 26px;
    }

    .client-dashboard__panel-grid {
        grid-template-columns: 1fr;
    }

    .he-dashboard-date {
        white-space: normal;
    }
}

/* align2: compact shell root fixes */
.topbar .navbar-brand .dark-logo {
    max-width: 142px;
    max-height: 34px;
    object-fit: contain;
}

.topbar .navbar-brand {
    padding-left: 20px;
    padding-right: 20px;
}

.client-dashboard.container-fluid,
.client-dashboard {
    padding-top: 12px;
}

.he-dashboard-hero-card {
    margin-top: 0;
}

/* align3: dashboard shell and typography refinement */
.page-clientareahome .client-primary-content {
    padding: 0;
}

.page-clientareahome .client-dashboard.container-fluid,
.page-clientareahome .client-dashboard {
    padding: 12px 24px 28px;
}

.sidebar-nav > ul > li > a,
.sidebar-nav ul li ul li a,
.sidebar-nav #sidebarnav li a {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.01em;
}

.sidebar-nav ul li ul li a,
.sidebar-nav #sidebarnav li ul li a {
    color: var(--he-fg-muted);
    font-weight: 400;
}

.sidebar-nav > ul > li.active > a,
.sidebar-nav #sidebarnav li.active > a {
    font-weight: 500;
}

.client-dashboard__panels .dashboard-panel .card-title {
    font-size: 18px;
    font-weight: 620;
}

.client-dashboard__panels .dashboard-panel .card-title i,
.client-dashboard__panels .dashboard-panel .card-header i {
    opacity: 0.9;
}

.client-dashboard__panels .dashboard-panel .card-body,
.client-dashboard__panels .dashboard-panel .list-group-item,
.client-dashboard__panels .dashboard-panel .card-footer {
    font-size: 15px;
    line-height: 1.65;
}

.client-dashboard__panels .dashboard-panel .list-group-item-action:hover {
    background-color: var(--he-sidebar-link-hover-bg);
    color: var(--he-sidebar-link-hover);
}

.he-dashboard-title {
    font-weight: 720;
}

.he-dashboard-lead,
.he-dashboard-stat-label {
    font-weight: 400;
}

body[data-theme="dark"] input,
body.theme-dark input,
body[data-theme="dark"] .form-control,
body.theme-dark .form-control,
body[data-theme="dark"] .input-group .form-control,
body.theme-dark .input-group .form-control {
    background-color: var(--he-card-subtle);
    border-color: var(--he-border);
    color: var(--he-fg);
}

/* align4: compact verification strip */
.page-clientareahome .email-verification {
    margin: 0;
    padding: 6px 24px;
    min-height: 42px;
    background-color: color-mix(in srgb, var(--he-card-bg) 88%, var(--he-bg-light));
    border-bottom: 1px solid var(--he-border-soft);
    color: var(--he-fg-muted);
    font-size: 14px;
    font-weight: 400;
}

.page-clientareahome .email-verification .container {
    max-width: none;
    padding: 0;
}

.page-clientareahome .email-verification .row {
    align-items: center;
    min-height: 30px;
}

.page-clientareahome .email-verification i.fa-exclamation-triangle,
.page-clientareahome .email-verification .fas.fa-exclamation-triangle {
    margin-right: 8px;
    color: var(--he-fg-muted);
    font-size: 16px;
}

.page-clientareahome .email-verification .text {
    color: var(--he-fg-muted);
}

.page-clientareahome .email-verification .btn.close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    width: 30px;
    min-height: 30px;
    padding: 0;
    border: 0;
    color: var(--he-fg-muted);
    opacity: 0.8;
}

.page-clientareahome .email-verification .btn-resend-verify-email {
    min-height: 32px;
    height: 32px;
    border: 1px solid var(--he-dashboard-action-border);
    border-radius: 6px;
    background: var(--he-dashboard-action-bg);
    color: var(--he-dashboard-action-color);
    box-shadow: 0 1px 2px rgba(58, 54, 45, 0.05);
    font-size: 13px;
    font-weight: 500;
}

.page-clientareahome .email-verification .btn-resend-verify-email:hover {
    border-color: var(--he-dashboard-action-hover-border);
    background: var(--he-dashboard-action-hover-bg);
    color: var(--he-dashboard-action-hover-color);
}

/* align5: dark surface fixes, topbar controls, menus, products page */
body .footer,
footer.footer {
    background-color: var(--he-bg);
    border-top: 1px solid var(--he-border-soft);
    color: var(--he-fg-muted);
}

.topbar .top-navbar .navbar-nav > .nav-item > .nav-link,
.topbar .navbar-nav.my-lg-0 > .nav-item > .nav-link,
.topbar .navbar-nav.my-lg-0 > .nav-item.user-menu > .nav-link,
.topbar .navbar-nav.my-lg-0 > .nav-item.language-menu > .nav-link,
.topbar a[title="Cart"],
.topbar .he-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    height: 36px;
    padding: 0 10px;
    line-height: 1;
    color: var(--he-fg);
}

.topbar a[title="Cart"],
.topbar .he-theme-toggle {
    min-width: 36px;
    border-radius: 6px;
}

.topbar a[title="Cart"]:hover,
.topbar .he-theme-toggle:hover,
.topbar .navbar-nav.my-lg-0 > .nav-item > .nav-link:hover {
    background-color: var(--he-sidebar-link-hover-bg);
    color: var(--he-sidebar-link-hover);
}

.topbar a[title="Cart"] .badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    margin-left: 4px;
    padding: 0 5px;
    border-radius: 999px;
    font-size: 11px;
    line-height: 1;
}

.topbar .user-menu > .nav-link .btn-circle.btn-lg,
.topbar .user-avatar-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border: 1px solid var(--he-dashboard-action-border);
    border-radius: 8px;
    background: var(--he-dashboard-action-bg);
    color: var(--he-dashboard-action-color);
}

.topbar .user-menu > .dropdown-menu,
.topbar .language-menu > .dropdown-menu,
.topbar .dropdown-menu {
    border-color: var(--he-border);
    background: var(--he-card-bg);
    color: var(--he-fg);
    box-shadow: var(--he-shadow-card);
}

.topbar .user-menu.show > .dropdown-menu,
.topbar .user-menu > .dropdown-menu.show,
.topbar .language-menu.show > .dropdown-menu,
.topbar .language-menu > .dropdown-menu.show {
    display: block !important;
    min-width: 180px;
    margin-top: 8px;
    padding: 6px;
    border: 1px solid var(--he-border);
    border-radius: 8px;
    background: var(--he-card-bg) !important;
    color: var(--he-fg) !important;
    box-shadow: var(--he-shadow-card);
    z-index: 1050;
}

.topbar ul.dropdown-user li a,
.topbar ul.dropdown-user li .dropdown-item1,
.topbar .language-menu .language-menu-item,
.topbar .dropdown-menu a {
    display: block;
    min-height: 34px;
    padding: 8px 10px;
    border-radius: 6px;
    color: var(--he-fg);
    line-height: 18px;
    text-decoration: none;
    white-space: nowrap;
}

.topbar ul.dropdown-user li a:hover,
.topbar ul.dropdown-user li .dropdown-item1:hover,
.topbar .language-menu .language-menu-item:hover,
.topbar .dropdown-menu a:hover {
    background-color: var(--he-sidebar-link-hover-bg);
    color: var(--he-sidebar-link-hover);
}

.page-clientareahome .email-verification .btn-resend-verify-email,
.email-verification .btn-resend-verify-email {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    min-height: 32px;
    padding: 0 12px;
    line-height: 1;
    white-space: nowrap;
}

.page-clientareahome .email-verification .row {
    align-items: center;
}

body[data-theme="dark"] .left-sidebar,
body.theme-dark .left-sidebar,
body[data-theme="dark"] .scroll-sidebar,
body.theme-dark .scroll-sidebar {
    border-right-color: var(--he-border-soft);
}

body[data-theme="dark"] .sidebar-nav > ul > li > ul,
body.theme-dark .sidebar-nav > ul > li > ul {
    border-left-color: transparent;
}

body[data-theme="dark"] .sidebar-nav > ul > li,
body.theme-dark .sidebar-nav > ul > li {
    border-color: var(--he-border-soft);
}

.page-products .client-primary-content,
.page-clientareaproducts .client-primary-content,
body.page-products,
body.page-clientareaproducts {
    background-color: var(--he-bg);
    color: var(--he-fg);
}

.page-products .table-container,
.page-clientareaproducts .table-container,
.page-products .dataTables_wrapper,
.page-clientareaproducts .dataTables_wrapper {
    border: 1px solid var(--he-border);
    border-radius: 10px;
    background-color: var(--he-card-bg);
    box-shadow: var(--he-shadow-card);
    color: var(--he-fg);
}

.page-products table.table-list,
.page-clientareaproducts table.table-list,
.page-products .table,
.page-clientareaproducts .table {
    color: var(--he-fg);
    background-color: var(--he-card-bg);
}

.page-products table.table-list thead th,
.page-clientareaproducts table.table-list thead th,
.page-products table.table-list tbody td,
.page-clientareaproducts table.table-list tbody td {
    border-color: var(--he-border-soft);
    background-color: var(--he-card-bg);
    color: var(--he-fg);
}

.page-products table.table-list tbody tr:hover td,
.page-clientareaproducts table.table-list tbody tr:hover td {
    background-color: var(--he-sidebar-link-hover-bg);
}

.page-products .text-muted,
.page-clientareaproducts .text-muted,
.page-products small,
.page-clientareaproducts small {
    color: var(--he-fg-muted);
}

.status-tabs {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 36px;
    padding: 4px;
    border-radius: 8px;
    background: var(--he-bg-light);
    color: var(--he-fg-muted);
}

.status-tab {
    min-height: 28px;
    padding: 4px 12px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--he-fg-muted);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    box-shadow: none;
    transform: none;
}

.status-tab:hover:not(.active) {
    background-color: var(--he-sidebar-link-hover-bg);
    color: var(--he-sidebar-link-hover);
    transform: none;
}

.status-tab.active {
    background: var(--he-card-bg);
    color: var(--he-fg-strong);
    box-shadow: 0 1px 3px rgba(58, 54, 45, 0.08), 0 1px 2px rgba(58, 54, 45, 0.05);
}

.status-tab .count-badge,
.status-tab.active .count-badge {
    background: transparent;
    color: inherit;
}

.page-products .btn,
.page-clientareaproducts .btn,
.page-products .btn-hero,
.page-clientareaproducts .btn-hero {
    min-height: 32px;
    border-radius: 6px;
    border-color: var(--he-dashboard-action-border);
    background: var(--he-dashboard-action-bg);
    color: var(--he-dashboard-action-color);
    box-shadow: 0 1px 2px rgba(58, 54, 45, 0.05);
    font-weight: 500;
}

.page-products .btn:hover,
.page-clientareaproducts .btn:hover,
.page-products .btn-hero:hover,
.page-clientareaproducts .btn-hero:hover {
    border-color: var(--he-dashboard-action-hover-border);
    background: var(--he-dashboard-action-hover-bg);
    color: var(--he-dashboard-action-hover-color);
}

/* align6: clientarea product/list pages cleanup */
.email-verification {
    margin: 0;
    padding: 6px 24px;
    min-height: 42px;
    background-color: color-mix(in srgb, var(--he-card-bg) 88%, var(--he-bg-light));
    border-bottom: 1px solid var(--he-border-soft);
    color: var(--he-fg-muted);
    font-size: 14px;
    font-weight: 400;
}

.email-verification .container {
    max-width: none;
    padding: 0;
}

.email-verification .row {
    align-items: center;
    min-height: 30px;
}

.email-verification i.fa-exclamation-triangle,
.email-verification .fas.fa-exclamation-triangle,
.email-verification .text {
    color: var(--he-fg-muted);
}

.email-verification .btn.close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    width: 30px;
    min-height: 30px;
    padding: 0;
    border: 0;
    color: var(--he-fg-muted);
    opacity: 0.8;
}

.clientarea-shell {
    padding: 12px 24px 28px;
    background-color: var(--he-bg);
}

.page-clientareaproducts .clientarea-shell,
.page-products .clientarea-shell {
    padding: 12px 24px 28px;
}

.page-clientareaproducts .primary-content,
.page-products .primary-content,
.page-clientareaproducts .client-primary-content,
.page-products .client-primary-content {
    background-color: var(--he-bg);
}

.page-clientareaproducts .primary-content .table-container,
.page-products .primary-content .table-container,
.page-clientareaproducts .table-container,
.page-products .table-container {
    padding: 12px;
    border: 1px solid var(--he-border);
    border-radius: 10px;
    background: var(--he-card-bg);
    box-shadow: var(--he-shadow-card);
}

.page-clientareaproducts .dataTables_wrapper,
.page-products .dataTables_wrapper {
    gap: 12px;
    padding-top: 0;
    color: var(--he-fg);
}

.page-clientareaproducts .table-toolbar,
.page-products .table-toolbar {
    padding: 12px;
    border: 1px solid var(--he-border-soft);
    border-radius: 10px;
    background: var(--he-bg-light);
}

.page-clientareaproducts .toolbar-search-input,
.page-products .toolbar-search-input,
.page-clientareaproducts .dataTables_filter input,
.page-products .dataTables_filter input,
.page-clientareaproducts select,
.page-products select,
.page-clientareaproducts .form-control,
.page-products .form-control {
    min-height: 36px;
    border: 1px solid var(--he-border);
    border-radius: 6px;
    background: var(--he-card-bg);
    color: var(--he-fg);
    box-shadow: none;
}

.page-clientareaproducts table.table-list,
.page-products table.table-list,
.page-clientareaproducts .dataTables_wrapper table.table-list,
.page-products .dataTables_wrapper table.table-list {
    overflow: hidden;
    border: 1px solid var(--he-border-soft);
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 8px;
    background: var(--he-card-bg);
}

.page-clientareaproducts table.table-list thead th,
.page-products table.table-list thead th,
.page-clientareaproducts .dataTables_wrapper table.table-list thead th,
.page-products .dataTables_wrapper table.table-list thead th,
.page-clientareaproducts .dataTables_wrapper table.table-list thead th.sorting,
.page-products .dataTables_wrapper table.table-list thead th.sorting,
.page-clientareaproducts .dataTables_wrapper table.table-list thead th.sorting_asc,
.page-products .dataTables_wrapper table.table-list thead th.sorting_asc,
.page-clientareaproducts .dataTables_wrapper table.table-list thead th.sorting_desc,
.page-products .dataTables_wrapper table.table-list thead th.sorting_desc {
    background: var(--he-bg-light);
    background-color: var(--he-bg-light);
    color: var(--he-fg-muted);
    border-color: var(--he-border-soft);
    font-size: 13px;
    font-weight: 500;
}

.page-clientareaproducts table.table-list tbody td,
.page-products table.table-list tbody td,
.page-clientareaproducts .dataTables_wrapper table.table-list tbody td,
.page-products .dataTables_wrapper table.table-list tbody td {
    background: var(--he-card-bg);
    color: var(--he-fg);
    border-color: var(--he-border-soft);
    font-size: 14px;
    vertical-align: middle;
}

.page-clientareaproducts .dataTables_wrapper .dataTables_info,
.page-products .dataTables_wrapper .dataTables_info,
.page-clientareaproducts .dataTables_wrapper .dataTables_length,
.page-products .dataTables_wrapper .dataTables_length,
.page-clientareaproducts .dataTables_wrapper .dataTables_paginate,
.page-products .dataTables_wrapper .dataTables_paginate {
    color: var(--he-fg-muted);
}

.page-clientareaproducts .page-link,
.page-products .page-link,
.page-clientareaproducts .pagination > li > a,
.page-products .pagination > li > a,
.page-clientareaproducts .pagination > li > span,
.page-products .pagination > li > span {
    border: 1px solid var(--he-border);
    border-radius: 6px;
    background: var(--he-dashboard-action-bg);
    color: var(--he-dashboard-action-color);
}

.page-clientareaproducts .page-item.active .page-link,
.page-products .page-item.active .page-link,
.page-clientareaproducts .pagination .active > a,
.page-products .pagination .active > a {
    border-color: var(--he-primary);
    background: var(--he-primary);
    color: var(--he-primary-fg);
}

.page-clientareaproducts .page-item.disabled .page-link,
.page-products .page-item.disabled .page-link {
    opacity: 0.55;
}

/* align7: pagination specificity for product/list pages */
.page-clientareaproducts .page-item .page-link,
.page-products .page-item .page-link,
.page-clientareaproducts .page-item.disabled .page-link,
.page-products .page-item.disabled .page-link,
.page-clientareaproducts .paging_simple_numbers .pagination .paginate_button a,
.page-products .paging_simple_numbers .pagination .paginate_button a {
    border: 1px solid var(--he-border);
    border-radius: 6px;
    background: var(--he-dashboard-action-bg);
    color: var(--he-dashboard-action-color);
    padding: 4px 10px;
    line-height: 1.2;
}

.page-clientareaproducts .page-item:not(.disabled) .page-link:hover,
.page-products .page-item:not(.disabled) .page-link:hover,
.page-clientareaproducts .paging_simple_numbers .pagination .paginate_button:not(.disabled) a:hover,
.page-products .paging_simple_numbers .pagination .paginate_button:not(.disabled) a:hover {
    border-color: var(--he-dashboard-action-hover-border);
    background: var(--he-dashboard-action-hover-bg);
    color: var(--he-dashboard-action-hover-color);
}

.page-clientareaproducts .page-item.active .page-link,
.page-products .page-item.active .page-link,
.page-clientareaproducts .paging_simple_numbers .pagination .paginate_button.active a,
.page-products .paging_simple_numbers .pagination .paginate_button.active a {
    border-color: var(--he-primary);
    background: var(--he-primary);
    color: var(--he-primary-fg);
}

/* align8: shared dark surfaces for short pages, tables, cart/store, affiliates */
html,
body,
#main-wrapper,
.page-wrapper {
    min-height: 100%;
    background-color: var(--he-bg);
}

.page-wrapper {
    min-height: 100vh;
}

body.theme-dark,
html[data-theme="dark"] {
    background-color: var(--he-bg);
}

body.theme-dark .page-wrapper::after {
    content: "";
    display: block;
    min-height: 1px;
    background: var(--he-bg);
}

/* Global client-area table/list normalization (hao.ai activity style) */
body.theme-dark .primary-content .table-container,
body.theme-dark .client-primary-content .table-container,
body.theme-dark .section-container,
body.theme-dark .dataTables_wrapper,
body.theme-dark table.table-list {
    color: var(--he-fg);
}

body.theme-dark .primary-content .table-container,
body.theme-dark .client-primary-content .table-container,
body.theme-dark .section-container .table-container {
    border: 1px solid var(--he-border);
    border-radius: 10px;
    background: var(--he-card-bg);
    box-shadow: var(--he-shadow-card);
}

body.theme-dark .dataTables_wrapper table.table-list,
body.theme-dark table.table-list {
    overflow: hidden;
    border: 1px solid var(--he-border-soft);
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 8px;
    background: var(--he-card-bg);
}

body.theme-dark table.table-list thead th,
body.theme-dark .dataTables_wrapper table.table-list thead th,
body.theme-dark .dataTables_wrapper table.table-list thead th.sorting,
body.theme-dark .dataTables_wrapper table.table-list thead th.sorting_asc,
body.theme-dark .dataTables_wrapper table.table-list thead th.sorting_desc,
body.theme-dark .dataTables_wrapper table.table-list thead th.sorting_disabled {
    background: var(--he-bg-light);
    background-color: var(--he-bg-light);
    color: var(--he-fg-muted);
    border-color: var(--he-border-soft);
    font-size: 13px;
    font-weight: 500;
}

body.theme-dark table.table-list tbody td,
body.theme-dark .dataTables_wrapper table.table-list tbody td,
body.theme-dark table.table-list tbody td.dataTables_empty,
body.theme-dark .dataTables_wrapper table.table-list tbody td.dataTables_empty {
    background: var(--he-card-bg);
    color: var(--he-fg);
    border-color: var(--he-border-soft);
}

body.theme-dark table.table-list tbody tr:hover td,
body.theme-dark .dataTables_wrapper table.table-list tbody tr:hover td {
    background: var(--he-sidebar-link-hover-bg);
}

body.theme-dark .dataTables_filter input,
body.theme-dark .dataTables_length select,
body.theme-dark .primary-content .form-control,
body.theme-dark .client-primary-content .form-control,
body.theme-dark .bg-light,
body.theme-dark input.bg-light {
    border: 1px solid var(--he-border);
    background: var(--he-card-bg);
    color: var(--he-fg);
}

body.theme-dark .dataTables_info,
body.theme-dark .dataTables_length,
body.theme-dark .dataTables_paginate,
body.theme-dark .text-muted,
body.theme-dark small.text-muted {
    color: var(--he-fg-muted);
}

body.theme-dark .page-item .page-link,
body.theme-dark .page-item.disabled .page-link,
body.theme-dark .paging_simple_numbers .pagination .paginate_button a,
body.theme-dark .pagination > li > a,
body.theme-dark .pagination > li > span {
    border: 1px solid var(--he-border);
    border-radius: 6px;
    background: var(--he-dashboard-action-bg);
    color: var(--he-dashboard-action-color);
}

body.theme-dark .page-item.active .page-link,
body.theme-dark .pagination .active > a {
    border-color: var(--he-primary);
    background: var(--he-primary);
    color: var(--he-primary-fg);
}

/* Store/cart pages */
body.theme-dark .store-shell,
body.theme-dark .store-primary-content,
body.theme-dark #order-standard_cart {
    background: var(--he-bg);
    color: var(--he-fg);
}

body.theme-dark #order-standard_cart {
    border: 1px solid var(--he-border);
    border-radius: 10px;
    background: var(--he-card-bg);
    box-shadow: var(--he-shadow-card);
}

body.theme-dark #order-standard_cart .cart-sidebar,
body.theme-dark #order-standard_cart .secondary-cart-sidebar,
body.theme-dark #order-standard_cart .cart-body,
body.theme-dark #order-standard_cart .secondary-cart-body,
body.theme-dark #order-standard_cart .panel.card.card-sidebar,
body.theme-dark #order-standard_cart .order-summary,
body.theme-dark #order-standard_cart .products .product,
body.theme-dark #order-standard_cart .product,
body.theme-dark #order-standard_cart .product-desc,
body.theme-dark #order-standard_cart .cart-sidebar .list-group-item {
    border-color: var(--he-border);
    background: var(--he-card-bg);
    color: var(--he-fg);
    box-shadow: none;
}

body.theme-dark #order-standard_cart .view-cart-items-header,
body.theme-dark #order-standard_cart .products-header,
body.theme-dark #order-standard_cart .summary-container,
body.theme-dark #order-standard_cart .summary-totals {
    border-color: var(--he-border-soft);
    background: var(--he-bg-light);
    color: var(--he-fg-muted);
}

body.theme-dark #order-standard_cart .product-title,
body.theme-dark #order-standard_cart .product-name,
body.theme-dark #order-standard_cart h1,
body.theme-dark #order-standard_cart h2,
body.theme-dark #order-standard_cart h3,
body.theme-dark #order-standard_cart h4,
body.theme-dark #order-standard_cart h5 {
    color: var(--he-fg-strong);
}

body.theme-dark #order-standard_cart .product-desc,
body.theme-dark #order-standard_cart .product-desc li,
body.theme-dark #order-standard_cart p,
body.theme-dark #order-standard_cart .price,
body.theme-dark #order-standard_cart .pricing {
    color: var(--he-fg);
}

/* Affiliate page */
body.theme-dark.page-affiliates .card,
body.theme-dark.page-affiliates .stat-card,
body.theme-dark.page-affiliates .section-container,
body.theme-dark.page-affiliates .affiliate-hero-section {
    border: 1px solid var(--he-border);
    border-radius: 10px;
    background: var(--he-card-bg);
    color: var(--he-fg);
    box-shadow: var(--he-shadow-card);
}

body.theme-dark.page-affiliates .stat-card__value,
body.theme-dark.page-affiliates h1,
body.theme-dark.page-affiliates h2,
body.theme-dark.page-affiliates h3,
body.theme-dark.page-affiliates h4,
body.theme-dark.page-affiliates h5 {
    color: var(--he-fg-strong);
}

body.theme-dark.page-affiliates .stat-card__label,
body.theme-dark.page-affiliates .small,
body.theme-dark.page-affiliates .code-block pre,
body.theme-dark.page-affiliates .code-block code {
    color: var(--he-fg-muted);
}

/* align9: product card root variables and affiliate readonly inputs */
body.theme-dark #order-standard_cart .products .product.clearfix,
body.theme-dark #order-standard_cart .products .product-desc,
body.theme-dark #order-standard_cart .products .product.clearfix footer {
    background: var(--he-card-bg);
    color: var(--he-fg);
    border-color: var(--he-border);
}

body.theme-dark #order-standard_cart .products .product.clearfix header {
    background: var(--he-bg-light);
    color: var(--he-fg-strong);
    border-bottom: 1px solid var(--he-border-soft);
}

body.theme-dark #order-standard_cart .products .product.clearfix header span {
    color: var(--he-fg-strong);
}

body.theme-dark #order-standard_cart .products .product-pricing,
body.theme-dark #order-standard_cart .products .product-desc,
body.theme-dark #order-standard_cart .products .product-desc li {
    color: var(--he-fg-muted);
}

body.theme-dark.page-affiliates input.form-control.bg-light,
body.theme-dark.page-affiliates input.form-control.bg-light.border-0,
body.theme-dark.page-affiliates #referralLink.form-control.bg-light {
    background-color: var(--he-card-bg);
    border: 1px solid var(--he-border);
    color: var(--he-fg);
}

/* align10: standard cart configuration/view/checkout dark surfaces */
body.theme-dark #order-standard_cart .domain-selection-options .option,
body.theme-dark #order-standard_cart .option,
body.theme-dark #order-standard_cart .product-info,
body.theme-dark #order-standard_cart .view-cart-items,
body.theme-dark #order-standard_cart .view-cart-items .item,
body.theme-dark #order-standard_cart .tab-content,
body.theme-dark #order-standard_cart .account,
body.theme-dark #order-standard_cart .account.active,
body.theme-dark #order-standard_cart .account.border-bottom,
body.theme-dark #order-standard_cart #orderSummary,
body.theme-dark #order-standard_cart .order-summary,
body.theme-dark #order-standard_cart .summary-container,
body.theme-dark #order-standard_cart .summary-totals {
    border-color: var(--he-border);
    background: var(--he-card-bg);
    color: var(--he-fg);
    box-shadow: var(--he-shadow-card);
}

body.theme-dark #order-standard_cart .domain-selection-options .option,
body.theme-dark #order-standard_cart .option,
body.theme-dark #order-standard_cart .account,
body.theme-dark #order-standard_cart .view-cart-items .item {
    border-radius: 8px;
    box-shadow: none;
}

body.theme-dark #order-standard_cart .option:hover,
body.theme-dark #order-standard_cart .account:hover,
body.theme-dark #order-standard_cart .account.active {
    background: var(--he-bg-light);
}

body.theme-dark #order-standard_cart .primary-bg-color,
body.theme-dark #order-standard_cart span.primary-bg-color,
body.theme-dark #order-standard_cart .sub-heading span,
body.theme-dark #order-standard_cart .sub-heading-border span {
    background: var(--he-bg-light);
    color: var(--he-fg-strong);
    border: 1px solid var(--he-border-soft);
    border-radius: 999px;
    padding: 2px 10px;
}

body.theme-dark #order-standard_cart input.form-control,
body.theme-dark #order-standard_cart select.form-control,
body.theme-dark #order-standard_cart textarea.form-control,
body.theme-dark #order-standard_cart .field,
body.theme-dark #order-standard_cart .form-control,
body.theme-dark #order-standard_cart .custom-select,
body.theme-dark #order-standard_cart select {
    border: 1px solid var(--he-border);
    background: var(--he-card-bg);
    color: var(--he-fg);
    box-shadow: none;
}

body.theme-dark #order-standard_cart input.form-control::placeholder,
body.theme-dark #order-standard_cart textarea.form-control::placeholder {
    color: var(--he-fg-muted);
}

body.theme-dark #order-standard_cart .nav-tabs,
body.theme-dark #order-standard_cart .nav-tabs .nav-link {
    border-color: var(--he-border-soft);
}

body.theme-dark #order-standard_cart .nav-tabs .nav-link,
body.theme-dark #order-standard_cart .nav-link {
    background: transparent;
    color: var(--he-fg-muted);
}

body.theme-dark #order-standard_cart .nav-tabs .nav-link.active,
body.theme-dark #order-standard_cart .nav-link.active {
    border-color: var(--he-border);
    background: var(--he-bg-light);
    color: var(--he-fg-strong);
}

body.theme-dark #order-standard_cart .btn-default,
body.theme-dark #order-standard_cart .btn.btn-default,
body.theme-dark #order-standard_cart button.btn-default,
body.theme-dark #order-standard_cart .btn-block.btn-default {
    border: 1px solid var(--he-dashboard-action-border);
    background: var(--he-dashboard-action-bg);
    color: var(--he-dashboard-action-color);
    box-shadow: none;
}

body.theme-dark #order-standard_cart .btn-default:hover,
body.theme-dark #order-standard_cart .btn.btn-default:hover,
body.theme-dark #order-standard_cart button.btn-default:hover,
body.theme-dark #order-standard_cart .btn-block.btn-default:hover {
    border-color: var(--he-dashboard-action-hover-border);
    background: var(--he-dashboard-action-hover-bg);
    color: var(--he-dashboard-action-hover-color);
}

body.theme-dark #order-standard_cart label,
body.theme-dark #order-standard_cart p,
body.theme-dark #order-standard_cart li,
body.theme-dark #order-standard_cart .help-block,
body.theme-dark #order-standard_cart .field-help-text,
body.theme-dark #order-standard_cart .prepend-icon .field-icon,
body.theme-dark #order-standard_cart .order-summary .summary-totals,
body.theme-dark #order-standard_cart .order-summary .summary-totals span,
body.theme-dark #order-standard_cart .order-summary .summary-container,
body.theme-dark #order-standard_cart .account-body,
body.theme-dark #order-standard_cart .account .address {
    color: var(--he-fg-muted);
}

body.theme-dark #order-standard_cart h1,
body.theme-dark #order-standard_cart h2,
body.theme-dark #order-standard_cart h3,
body.theme-dark #order-standard_cart h4,
body.theme-dark #order-standard_cart h5,
body.theme-dark #order-standard_cart .product-title,
body.theme-dark #order-standard_cart .product-info .product-title,
body.theme-dark #order-standard_cart .order-summary h2,
body.theme-dark #order-standard_cart .order-summary h3,
body.theme-dark #order-standard_cart .account-title {
    color: var(--he-fg-strong);
}

/* align12: cart checkout account active specificity fix */
body.theme-dark #order-standard_cart .account-select-container div.account,
body.theme-dark #order-standard_cart .account-select-container div.account.active,
body.theme-dark #order-standard_cart .account-select-container div.account.border-bottom {
    background: var(--he-card-bg);
    border-color: var(--he-border);
    color: var(--he-fg);
}

body.theme-dark #order-standard_cart .account-select-container div.account.active {
    background: var(--he-primary-muted);
    border-color: var(--he-primary);
}

/* align13: Bootstrap .bg-white handled by JS inline style for injected elements */
body.theme-dark .he-bg-white-override,
body.theme-dark .bg-white.he-bg-white-override {
    background-color: var(--he-card-bg);
}

/* align14: unify clientarea table-container padding across products/invoices/etc */
.page-clientareaproducts .table-container,
.page-clientareainvoices .table-container,
.page-supportticketslist .table-container,
.page-affiliates .table-container,
.page-managessl .table-container {
    padding: 16px;
}

/* align15: fix status-tab dark mode variable resolution + hao.ai polish */
body.theme-dark .status-tabs,
body[data-theme="dark"] .status-tabs {
    background: var(--he-bg-light);
    color: var(--he-fg-muted);
}

body.theme-dark .status-tab,
body[data-theme="dark"] .status-tab {
    color: var(--he-fg-muted);
    background: transparent;
}

body.theme-dark .status-tab:hover:not(.active),
body[data-theme="dark"] .status-tab:hover:not(.active) {
    background: var(--he-sidebar-link-hover-bg);
    color: var(--he-sidebar-link-hover);
}

body.theme-dark .status-tab.active,
body[data-theme="dark"] .status-tab.active {
    background: var(--he-card-bg);
    color: var(--he-fg-strong);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18), 0 1px 2px rgba(0, 0, 0, 0.12);
}

body.theme-dark .status-tab .count-badge,
body[data-theme="dark"] .status-tab .count-badge,
body.theme-dark .status-tab.active .count-badge,
body[data-theme="dark"] .status-tab.active .count-badge {
    color: inherit;
    opacity: 0.75;
    font-weight: 400;
}

/* align16: hao.ai-style three-layer segmented status tabs */
.table-toolbar {
    display: grid;
    grid-template-columns: minmax(0, max-content) minmax(220px, 260px);
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px;
    border-radius: 20px;
    border: 0;
    background: color-mix(in srgb, var(--he-card-bg) 82%, var(--he-fg-strong) 18%);
    box-shadow: none;
}

.status-tabs {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    flex-wrap: nowrap;
    width: auto;
    max-width: 100%;
    min-width: max-content;
    height: auto;
    min-height: 0;
    padding: 8px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--he-bg) 88%, var(--he-fg-strong) 12%);
    color: var(--he-fg-muted);
    overflow-x: auto;
    scrollbar-width: none;
}

.status-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-height: 40px;
    padding: 0 16px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--he-fg-muted);
    font-size: 15px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: -0.01em;
    box-shadow: none;
    transform: none;
    transition: color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease;
    white-space: nowrap;
}

.status-tab:hover:not(.active) {
    background: color-mix(in srgb, var(--he-card-bg) 48%, transparent);
    color: var(--he-fg);
    transform: none;
}

.status-tab.active {
    background: color-mix(in srgb, var(--he-card-bg) 86%, var(--he-fg-strong) 14%);
    color: var(--he-fg-strong);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 8px 20px rgba(0, 0, 0, 0.08);
}

.status-tab .count-badge,
.status-tab.active .count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 5px;
    background: transparent;
    color: inherit;
    opacity: 0.72;
    font-weight: 500;
}

.table-toolbar .toolbar-search {
    width: 260px;
    min-width: 220px;
}

.table-toolbar .toolbar-search-input {
    min-height: 44px;
    border-radius: 12px;
    background: var(--he-card-bg);
    border-color: var(--he-border-soft);
    color: var(--he-fg);
}

body.theme-dark .table-toolbar,
body[data-theme="dark"] .table-toolbar {
    background: #242421;
}

body.theme-dark .status-tabs,
body[data-theme="dark"] .status-tabs {
    background: #171713;
    color: var(--he-fg-muted);
}

body.theme-dark .status-tab,
body[data-theme="dark"] .status-tab {
    background: transparent;
    color: #b7b2a8;
}

body.theme-dark .status-tab:hover:not(.active),
body[data-theme="dark"] .status-tab:hover:not(.active) {
    background: rgba(250, 249, 245, 0.05);
    color: #d8d3c8;
}

body.theme-dark .status-tab.active,
body[data-theme="dark"] .status-tab.active {
    background: #272722;
    color: #f4f0e8;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22), 0 10px 24px rgba(0, 0, 0, 0.16);
}

@media (max-width: 767.98px) {
    .table-toolbar {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        padding: 14px;
        border-radius: 16px;
    }

    .status-tabs {
        width: 100%;
        min-width: 0;
        justify-content: flex-start;
    }

    .table-toolbar .toolbar-search {
        width: 100%;
        min-width: 0;
    }
}

/* align17: flatten client-area list pages to one visible surface */
.page-clientareaproducts .table-container,
.page-products .table-container,
.page-clientareadomains .table-container,
.page-clientareainvoices .table-container,
.page-supportticketslist .table-container,
.page-managessl .table-container,
.page-affiliates .table-container,
.ticket-list-page .table-container {
    padding: 16px;
    border: 1px solid var(--he-border);
    border-radius: 10px;
    background: var(--he-card-bg);
    box-shadow: var(--he-shadow-card);
    color: var(--he-fg);
}

.page-clientareaproducts .dataTables_wrapper,
.page-products .dataTables_wrapper,
.page-clientareadomains .dataTables_wrapper,
.page-clientareainvoices .dataTables_wrapper,
.page-supportticketslist .dataTables_wrapper,
.page-managessl .dataTables_wrapper,
.page-affiliates .dataTables_wrapper,
.ticket-list-page .dataTables_wrapper,
.page-clientareaproducts .listtable,
.page-products .listtable,
.page-clientareadomains .listtable,
.page-clientareainvoices .listtable,
.page-supportticketslist .listtable,
.page-managessl .listtable,
.page-affiliates .listtable,
.ticket-list-page .listtable {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--he-fg);
}

.page-clientareaproducts .dataTables_wrapper,
.page-products .dataTables_wrapper,
.page-clientareadomains .dataTables_wrapper,
.page-clientareainvoices .dataTables_wrapper,
.page-supportticketslist .dataTables_wrapper,
.page-managessl .dataTables_wrapper,
.page-affiliates .dataTables_wrapper,
.ticket-list-page .dataTables_wrapper {
    gap: 14px;
}

.page-clientareaproducts .table-toolbar,
.page-products .table-toolbar,
.page-clientareadomains .table-toolbar,
.page-clientareainvoices .table-toolbar,
.page-supportticketslist .table-toolbar,
.page-managessl .table-toolbar,
.page-affiliates .table-toolbar,
.ticket-list-page .table-toolbar {
    padding: 12px;
    border: 0;
    border-radius: 12px;
    background: var(--he-bg-light);
    box-shadow: none;
}

.page-clientareaproducts .status-tabs,
.page-products .status-tabs,
.page-clientareadomains .status-tabs,
.page-clientareainvoices .status-tabs,
.page-supportticketslist .status-tabs,
.page-managessl .status-tabs,
.page-affiliates .status-tabs,
.ticket-list-page .status-tabs {
    padding: 4px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--he-bg) 86%, var(--he-fg-strong) 14%);
}

.page-clientareaproducts .status-tab,
.page-products .status-tab,
.page-clientareadomains .status-tab,
.page-clientareainvoices .status-tab,
.page-supportticketslist .status-tab,
.page-managessl .status-tab,
.page-affiliates .status-tab,
.ticket-list-page .status-tab {
    min-height: 34px;
    padding: 0 12px;
    border-radius: 8px;
    font-size: 14px;
}

.page-clientareaproducts table.table-list,
.page-products table.table-list,
.page-clientareadomains table.table-list,
.page-clientareainvoices table.table-list,
.page-supportticketslist table.table-list,
.page-managessl table.table-list,
.page-affiliates table.table-list,
.ticket-list-page table.table-list {
    overflow: hidden;
    border: 1px solid var(--he-border-soft);
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 8px;
    background: var(--he-card-bg);
    color: var(--he-fg);
}

.page-clientareaproducts table.table-list thead th,
.page-products table.table-list thead th,
.page-clientareadomains table.table-list thead th,
.page-clientareainvoices table.table-list thead th,
.page-supportticketslist table.table-list thead th,
.page-managessl table.table-list thead th,
.page-affiliates table.table-list thead th,
.ticket-list-page table.table-list thead th {
    border-color: var(--he-border-soft);
    background: var(--he-bg-light);
    color: var(--he-fg-muted);
}

.page-clientareaproducts table.table-list tbody td,
.page-products table.table-list tbody td,
.page-clientareadomains table.table-list tbody td,
.page-clientareainvoices table.table-list tbody td,
.page-supportticketslist table.table-list tbody td,
.page-managessl table.table-list tbody td,
.page-affiliates table.table-list tbody td,
.ticket-list-page table.table-list tbody td {
    border-color: var(--he-border-soft);
    background: var(--he-card-bg);
    color: var(--he-fg);
}

.page-clientareaproducts table.table-list tbody tr:hover > td,
.page-products table.table-list tbody tr:hover > td,
.page-clientareadomains table.table-list tbody tr:hover > td,
.page-clientareainvoices table.table-list tbody tr:hover > td,
.page-supportticketslist table.table-list tbody tr:hover > td,
.page-managessl table.table-list tbody tr:hover > td,
.page-affiliates table.table-list tbody tr:hover > td,
.ticket-list-page table.table-list tbody tr:hover > td {
    background: var(--he-sidebar-link-hover-bg);
}

body.theme-dark.page-clientareaproducts .table-toolbar,
body.theme-dark.page-products .table-toolbar,
body.theme-dark.page-clientareadomains .table-toolbar,
body.theme-dark.page-clientareainvoices .table-toolbar,
body.theme-dark.page-supportticketslist .table-toolbar,
body.theme-dark.page-managessl .table-toolbar,
body.theme-dark.page-affiliates .table-toolbar,
body.theme-dark .ticket-list-page .table-toolbar,
html[data-theme="dark"] .page-clientareaproducts .table-toolbar,
html[data-theme="dark"] .page-products .table-toolbar,
html[data-theme="dark"] .page-clientareadomains .table-toolbar,
html[data-theme="dark"] .page-clientareainvoices .table-toolbar,
html[data-theme="dark"] .page-supportticketslist .table-toolbar,
html[data-theme="dark"] .page-managessl .table-toolbar,
html[data-theme="dark"] .page-affiliates .table-toolbar,
html[data-theme="dark"] .ticket-list-page .table-toolbar {
    background: var(--he-bg-light);
}

body.theme-dark.page-clientareaproducts .status-tabs,
body.theme-dark.page-products .status-tabs,
body.theme-dark.page-clientareadomains .status-tabs,
body.theme-dark.page-clientareainvoices .status-tabs,
body.theme-dark.page-supportticketslist .status-tabs,
body.theme-dark.page-managessl .status-tabs,
body.theme-dark.page-affiliates .status-tabs,
body.theme-dark .ticket-list-page .status-tabs,
html[data-theme="dark"] .page-clientareaproducts .status-tabs,
html[data-theme="dark"] .page-products .status-tabs,
html[data-theme="dark"] .page-clientareadomains .status-tabs,
html[data-theme="dark"] .page-clientareainvoices .status-tabs,
html[data-theme="dark"] .page-supportticketslist .status-tabs,
html[data-theme="dark"] .page-managessl .status-tabs,
html[data-theme="dark"] .page-affiliates .status-tabs,
html[data-theme="dark"] .ticket-list-page .status-tabs {
    background: color-mix(in srgb, var(--he-bg) 88%, #000 12%);
}

@media (max-width: 767.98px) {
    .page-clientareaproducts .table-container,
    .page-products .table-container,
    .page-clientareadomains .table-container,
    .page-clientareainvoices .table-container,
    .page-supportticketslist .table-container,
    .page-managessl .table-container,
    .page-affiliates .table-container,
    .ticket-list-page .table-container {
        padding: 12px;
    }

    .page-clientareaproducts .dataTables_wrapper,
    .page-products .dataTables_wrapper,
    .page-clientareadomains .dataTables_wrapper,
    .page-clientareainvoices .dataTables_wrapper,
    .page-supportticketslist .dataTables_wrapper,
    .page-managessl .dataTables_wrapper,
    .page-affiliates .dataTables_wrapper,
    .ticket-list-page .dataTables_wrapper {
        gap: 12px;
    }

    .services-list-table tbody tr,
    .invoice-list-table tbody tr,
    .domain-list-table tbody tr,
    .ticket-list-table tbody tr,
    #tableDomainsList.is-mobile-card-table tbody tr,
    #tableTicketsList.is-mobile-card-table tbody tr {
        border: 1px solid var(--he-border-soft) !important;
        border-radius: 10px !important;
        background: var(--he-card-bg) !important;
        box-shadow: none !important;
    }

    .services-list-table tbody tr:hover,
    .services-list-table tbody tr:active,
    .invoice-list-table tbody tr:hover,
    .invoice-list-table tbody tr:active,
    .domain-list-table tbody tr:hover,
    .domain-list-table tbody tr:active,
    .ticket-list-table tbody tr:hover,
    .ticket-list-table tbody tr:active,
    #tableDomainsList.is-mobile-card-table tbody tr:hover,
    #tableTicketsList.is-mobile-card-table tbody tr:hover {
        background: var(--he-sidebar-link-hover-bg) !important;
    }

    .services-list-table tbody td::before,
    .invoice-list-table tbody td::before,
    .domain-list-table tbody td::before,
    .ticket-list-table tbody td::before,
    #tableDomainsList.is-mobile-card-table tbody td::before,
    #tableTicketsList.is-mobile-card-table tbody td::before {
        color: var(--he-fg-muted) !important;
    }

    .services-list-table tbody td:nth-child(2) strong,
    .invoice-list-table tbody td:first-child strong,
    .domain-list-table tbody td:first-child strong,
    .ticket-list-table .ticket-subject,
    #tableDomainsList.is-mobile-card-table tbody td:first-child strong,
    #tableTicketsList.is-mobile-card-table .ticket-subject {
        color: var(--he-fg-strong) !important;
    }

    .ticket-list-table .ticket-number,
    #tableTicketsList.is-mobile-card-table .ticket-number {
        color: var(--he-fg-muted) !important;
    }
}

/* align21: override legacy cart rebuild !important shell */
body.page-products #order-standard_cart,
body.page-configureproductdomain #order-standard_cart,
body.page-configureproduct #order-standard_cart,
body.page-viewcart #order-standard_cart {
    max-width: 1280px !important;
    margin: 12px auto 28px !important;
    padding: 16px !important;
    border: 1px solid var(--he-border) !important;
    border-radius: 10px !important;
    background: var(--he-card-bg) !important;
    box-shadow: var(--he-shadow-card) !important;
    color: var(--he-fg) !important;
}

body.theme-dark.page-products #order-standard_cart,
body.theme-dark.page-configureproductdomain #order-standard_cart,
body.theme-dark.page-configureproduct #order-standard_cart,
body.theme-dark.page-viewcart #order-standard_cart,
html[data-theme="dark"] body.page-products #order-standard_cart,
html[data-theme="dark"] body.page-configureproductdomain #order-standard_cart,
html[data-theme="dark"] body.page-configureproduct #order-standard_cart,
html[data-theme="dark"] body.page-viewcart #order-standard_cart {
    background: var(--he-card-bg) !important;
    color: var(--he-fg) !important;
}

@media (max-width: 767.98px) {
    body.page-products #order-standard_cart,
    body.page-configureproductdomain #order-standard_cart,
    body.page-configureproduct #order-standard_cart,
    body.page-viewcart #order-standard_cart {
        margin: 8px 0 24px !important;
        padding: 12px !important;
    }
}

/* align22: dark mode overrides for legacy !important product/sidebar skins */
body.theme-dark .scroll-sidebar,
body.theme-dark .left-sidebar .scroll-sidebar,
html[data-theme="dark"] body .scroll-sidebar,
html[data-theme="dark"] body .left-sidebar .scroll-sidebar {
    background-color: var(--he-bg) !important;
    color: var(--he-fg) !important;
}

body.theme-dark #order-standard_cart .products .product.clearfix,
body.theme-dark #order-standard_cart .products .product,
body.theme-dark #order-standard_cart .products .product-desc,
body.theme-dark #order-standard_cart .products .product.clearfix footer,
body.theme-dark #order-standard_cart .products .product footer,
html[data-theme="dark"] body #order-standard_cart .products .product.clearfix,
html[data-theme="dark"] body #order-standard_cart .products .product,
html[data-theme="dark"] body #order-standard_cart .products .product-desc,
html[data-theme="dark"] body #order-standard_cart .products .product.clearfix footer,
html[data-theme="dark"] body #order-standard_cart .products .product footer {
    border-color: var(--he-border-soft) !important;
    background: var(--he-card-bg) !important;
    color: var(--he-fg) !important;
    box-shadow: none !important;
}

body.theme-dark #order-standard_cart .products .product.clearfix header,
body.theme-dark #order-standard_cart .products .product header,
html[data-theme="dark"] body #order-standard_cart .products .product.clearfix header,
html[data-theme="dark"] body #order-standard_cart .products .product header {
    border-bottom-color: var(--he-border-soft) !important;
    background: var(--he-bg-light) !important;
    color: var(--he-fg-strong) !important;
}

body.theme-dark #order-standard_cart .products .product.clearfix header span,
body.theme-dark #order-standard_cart .products .product header span,
body.theme-dark #order-standard_cart .products .product-pricing,
body.theme-dark #order-standard_cart .products .product-pricing *,
html[data-theme="dark"] body #order-standard_cart .products .product.clearfix header span,
html[data-theme="dark"] body #order-standard_cart .products .product header span,
html[data-theme="dark"] body #order-standard_cart .products .product-pricing,
html[data-theme="dark"] body #order-standard_cart .products .product-pricing * {
    color: var(--he-fg-strong) !important;
}

body.theme-dark.page-products .font-size-36,
body.theme-dark.page-products .store-primary-content h1,
body.theme-dark.page-configureproductdomain .font-size-36,
body.theme-dark.page-configureproduct .font-size-36,
body.theme-dark.page-viewcart .font-size-36,
html[data-theme="dark"] body.page-products .font-size-36,
html[data-theme="dark"] body.page-products .store-primary-content h1,
html[data-theme="dark"] body.page-configureproductdomain .font-size-36,
html[data-theme="dark"] body.page-configureproduct .font-size-36,
html[data-theme="dark"] body.page-viewcart .font-size-36 {
    color: var(--he-fg-strong) !important;
}

body.theme-dark.page-products .store-primary-content p,
body.theme-dark.page-products #order-standard_cart > p,
body.theme-dark.page-configureproductdomain #order-standard_cart > p,
body.theme-dark.page-configureproduct #order-standard_cart > p,
body.theme-dark.page-viewcart #order-standard_cart > p,
html[data-theme="dark"] body.page-products .store-primary-content p,
html[data-theme="dark"] body.page-products #order-standard_cart > p,
html[data-theme="dark"] body.page-configureproductdomain #order-standard_cart > p,
html[data-theme="dark"] body.page-configureproduct #order-standard_cart > p,
html[data-theme="dark"] body.page-viewcart #order-standard_cart > p {
    color: var(--he-fg-muted) !important;
}

/* align23: readable standard_cart product cards after custom.css is restored */
body.page-products #order-standard_cart .products {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px !important;
    margin: 20px 0 10px !important;
    padding: 0 !important;
}

body.page-products #order-standard_cart .products::before,
body.page-products #order-standard_cart .products::after {
    display: none !important;
    content: none !important;
}

body.page-products #order-standard_cart .products .product,
body.page-products #order-standard_cart .products .product.clearfix {
    display: flex !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 360px !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    border: 1px solid var(--he-border-soft) !important;
    border-radius: 10px !important;
    background: var(--he-card-bg) !important;
    color: var(--he-fg) !important;
    box-shadow: none !important;
}

body.page-products #order-standard_cart .products .product header,
body.page-products #order-standard_cart .products .product.clearfix header {
    margin: 0 !important;
    padding: 15px 16px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--he-border-soft) !important;
    border-radius: 10px 10px 0 0 !important;
    background: var(--he-bg-light) !important;
    color: var(--he-fg-strong) !important;
}

body.page-products #order-standard_cart .products .product header span,
body.page-products #order-standard_cart .products .product.clearfix header span,
body.page-products #order-standard_cart .products .product header .qty,
body.page-products #order-standard_cart .products .product.clearfix header .qty {
    color: var(--he-fg-strong) !important;
    text-shadow: none !important;
}

body.page-products #order-standard_cart .products .product div.product-desc,
body.page-products #order-standard_cart .products .product.clearfix div.product-desc {
    float: none !important;
    width: 100% !important;
    flex: 1 1 auto !important;
    padding: 14px 16px !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--he-fg) !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
}

body.page-products #order-standard_cart .products .product footer,
body.page-products #order-standard_cart .products .product.clearfix footer {
    float: none !important;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 14px !important;
    margin: 0 !important;
    padding: 16px !important;
    border-top: 1px solid var(--he-border-soft) !important;
    background: transparent !important;
    color: var(--he-fg) !important;
    text-align: left !important;
}

body.page-products #order-standard_cart .products .product .product-pricing,
body.page-products #order-standard_cart .products .product .product-pricing * {
    color: var(--he-fg) !important;
}

body.page-products #order-standard_cart .products .product .product-pricing .price {
    color: var(--he-primary) !important;
}

body.page-products #order-standard_cart .products .product footer .btn,
body.page-products #order-standard_cart .products .product.clearfix footer .btn {
    min-height: 44px !important;
    padding: 0 18px !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: var(--he-primary) !important;
    color: var(--he-primary-fg) !important;
    box-shadow: none !important;
    white-space: nowrap !important;
}

body.page-products #order-standard_cart .products .product footer .btn:hover,
body.page-products #order-standard_cart .products .product.clearfix footer .btn:hover {
    background: var(--he-primary-hover) !important;
    color: var(--he-primary-fg) !important;
}

@media (max-width: 991.98px) {
    body.page-products #order-standard_cart .products {
        grid-template-columns: 1fr !important;
    }

    body.page-products #order-standard_cart .products .product footer,
    body.page-products #order-standard_cart .products .product.clearfix footer {
        grid-template-columns: 1fr !important;
    }
}

/* align24: standard_cart nests products inside .row > .col-md-6 */
body.page-products #order-standard_cart .products {
    display: block !important;
}

body.page-products #order-standard_cart .products > .row,
body.page-products #order-standard_cart .products .row.row-eq-height {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px !important;
    margin: 20px 0 10px !important;
    padding: 0 !important;
    width: 100% !important;
}

body.page-products #order-standard_cart .products > .row::before,
body.page-products #order-standard_cart .products > .row::after,
body.page-products #order-standard_cart .products .row.row-eq-height::before,
body.page-products #order-standard_cart .products .row.row-eq-height::after {
    display: none !important;
    content: none !important;
}

body.page-products #order-standard_cart .products > .row > [class*="col-"],
body.page-products #order-standard_cart .products .row.row-eq-height > [class*="col-"] {
    float: none !important;
    width: 100% !important;
    max-width: none !important;
    flex: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

@media (max-width: 991.98px) {
    body.page-products #order-standard_cart .products > .row,
    body.page-products #order-standard_cart .products .row.row-eq-height {
        grid-template-columns: 1fr !important;
    }
}

/* align25: hosteasenew preview polish for service details, invoices, and product grids */
#order-standard_cart .products {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;
    margin: 20px 0 10px !important;
    padding: 0 !important;
}

#order-standard_cart .products > .row,
#order-standard_cart .products .row.row-eq-height {
    display: contents !important;
}

#order-standard_cart .products > .row::before,
#order-standard_cart .products > .row::after,
#order-standard_cart .products .row.row-eq-height::before,
#order-standard_cart .products .row.row-eq-height::after {
    display: none !important;
    content: none !important;
}

#order-standard_cart .products > .row > [class*="col-"],
#order-standard_cart .products .row.row-eq-height > [class*="col-"] {
    float: none !important;
    width: 100% !important;
    max-width: none !important;
    flex: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

#order-standard_cart .products .product,
#order-standard_cart .products .product.clearfix {
    min-height: 330px !important;
}

@media (max-width: 1199.98px) {
    #order-standard_cart .products {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 767.98px) {
    #order-standard_cart .products {
        grid-template-columns: 1fr !important;
    }
}

body.page-clientareaproductdetails .clientarea-shell {
    max-width: 1280px;
    margin: 0 auto;
}

body.page-clientareaproductdetails .client-primary-content {
    padding-top: 18px;
}

body.page-clientareaproductdetails .product-dashboard-header .card,
body.page-clientareaproductdetails .product-details-tabs .card,
body.page-clientareaproductdetails .card {
    border: 1px solid var(--he-border-soft) !important;
    border-radius: 10px !important;
    background: var(--he-card-bg) !important;
    color: var(--he-fg) !important;
    box-shadow: var(--he-shadow-card) !important;
    overflow: hidden;
}

body.page-clientareaproductdetails .product-dashboard-header .card-header,
body.page-clientareaproductdetails .product-details-tabs .card-header,
body.page-clientareaproductdetails .card-header,
body.page-clientareaproductdetails .bg-white,
body.page-clientareaproductdetails .bg-light {
    border-color: var(--he-border-soft) !important;
    background: var(--he-bg-light) !important;
    color: var(--he-fg-strong) !important;
}

body.page-clientareaproductdetails .product-details-tabs {
    padding-left: 0 !important;
}

body.page-clientareaproductdetails .product-details-tabs > .nav-tabs,
body.page-clientareaproductdetails .nav-tabs.responsive-tabs-sm {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 16px !important;
    padding: 6px !important;
    border: 1px solid var(--he-border-soft) !important;
    border-radius: 10px !important;
    background: var(--he-card-bg) !important;
}

body.page-clientareaproductdetails .product-details-tabs .nav-item {
    margin: 0 !important;
}

body.page-clientareaproductdetails .product-details-tabs .nav-link {
    min-height: 40px;
    margin: 0 !important;
    padding: 0 14px !important;
    border: 1px solid transparent !important;
    border-radius: 6px !important;
    background: transparent !important;
    color: var(--he-sidebar-link) !important;
    font-weight: 700 !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

body.page-clientareaproductdetails .product-details-tabs .nav-link:hover {
    border-color: var(--he-border-soft) !important;
    background: var(--he-sidebar-link-hover-bg) !important;
    color: var(--he-primary) !important;
}

body.page-clientareaproductdetails .product-details-tabs .nav-link.active {
    border-color: var(--he-primary) !important;
    background: var(--he-primary) !important;
    color: var(--he-primary-fg) !important;
}

body.page-clientareaproductdetails .product-details-tabs .card-body,
body.page-clientareaproductdetails .product-dashboard-header .card-body {
    padding: 18px !important;
}

body.page-clientareaproductdetails .product-details .row.mb-2,
body.page-clientareaproductdetails .connection-info-row,
body.page-clientareaproductdetails .service-status-row,
body.page-clientareaproductdetails .additional-info-row {
    border-bottom: 1px solid var(--he-border-soft) !important;
    color: var(--he-fg) !important;
}

body.page-clientareaproductdetails .product-details .row.mb-2:last-child,
body.page-clientareaproductdetails .connection-info-row:last-child,
body.page-clientareaproductdetails .service-status-row:last-child,
body.page-clientareaproductdetails .additional-info-row:last-child {
    border-bottom: 0 !important;
}

body.page-clientareaproductdetails .text-muted,
body.page-clientareaproductdetails .connection-info-label,
body.page-clientareaproductdetails .service-status-label,
body.page-clientareaproductdetails .additional-info-label {
    color: var(--he-fg-muted) !important;
}

body.page-clientareaproductdetails .font-weight-bold,
body.page-clientareaproductdetails .connection-info-value,
body.page-clientareaproductdetails .additional-info-value,
body.page-clientareaproductdetails .text-monospace,
body.page-clientareaproductdetails .card-title,
body.page-clientareaproductdetails h3,
body.page-clientareaproductdetails h4,
body.page-clientareaproductdetails h5,
body.page-clientareaproductdetails h6 {
    color: var(--he-fg-strong) !important;
}

body.page-clientareaproductdetails .progress {
    height: 8px !important;
    border-radius: 999px;
    background: var(--he-bg-light) !important;
    box-shadow: inset 0 0 0 1px var(--he-border-soft);
}

body.page-clientareaproductdetails .module-actions-container .list-group-item,
body.page-clientareaproductdetails .module-client-area,
body.page-clientareaproductdetails .ssl-module-actions,
body.page-clientareaproductdetails .border.rounded {
    border-color: var(--he-border-soft) !important;
    background: var(--he-card-bg) !important;
    color: var(--he-fg) !important;
}

body.viewinvoice {
    min-height: 100vh;
    background: var(--he-bg) !important;
    color: var(--he-fg) !important;
}

body.viewinvoice .invoice-container {
    width: min(1040px, calc(100% - 32px)) !important;
    max-width: none !important;
    padding: 26px 34px !important;
    border: 1px solid var(--he-border-soft) !important;
    border-radius: 10px !important;
    background: var(--he-card-bg) !important;
    color: var(--he-fg) !important;
    box-shadow: var(--he-shadow-card) !important;
}

body.viewinvoice .invoice-header {
    border-bottom-color: var(--he-border-soft) !important;
}

body.viewinvoice .invoice-header h2,
body.viewinvoice .invoice-header h3,
body.viewinvoice .invoice-container h1,
body.viewinvoice .invoice-container h2,
body.viewinvoice .invoice-container h3,
body.viewinvoice .invoice-container h4,
body.viewinvoice .invoice-container strong,
body.viewinvoice .invoice-container .total-row {
    color: var(--he-fg-strong) !important;
}

body.viewinvoice .invoice-col address,
body.viewinvoice .invoice-col span.small-text,
body.viewinvoice .small-text,
body.viewinvoice .text-muted,
body.viewinvoice .invoice-container .table tbody td {
    color: var(--he-fg-muted) !important;
}

body.viewinvoice .invoice-container .card {
    border: 1px solid var(--he-border-soft) !important;
    border-radius: 10px !important;
    background: var(--he-card-bg) !important;
    color: var(--he-fg) !important;
    box-shadow: none !important;
    overflow: hidden;
}

body.viewinvoice .invoice-container .card-header,
body.viewinvoice .invoice-container .table thead td,
body.viewinvoice .invoice-container tr.total-row-container {
    border-color: var(--he-border-soft) !important;
    background: var(--he-bg-light) !important;
    color: var(--he-fg-muted) !important;
}

body.viewinvoice .invoice-container .table tbody td {
    border-top-color: var(--he-border-soft) !important;
}

body.viewinvoice .invoice-container .total-row {
    border-top-color: var(--he-primary) !important;
}

body.viewinvoice .payment-btn-container .btn,
body.viewinvoice .payment-btn-container button,
body.viewinvoice .payment-btn-container input[type="submit"],
body.viewinvoice .invoice-action-btn,
body.viewinvoice .invoice-back-btn {
    border: 1px solid var(--he-border-soft) !important;
    border-radius: 6px !important;
    background: var(--he-bg-light) !important;
    color: var(--he-fg-strong) !important;
    box-shadow: none !important;
}

body.viewinvoice .payment-btn-container .btn-primary,
body.viewinvoice .payment-btn-container .btn-success,
body.viewinvoice .payment-btn-container button[type="submit"],
body.viewinvoice .payment-btn-container input[type="submit"],
body.viewinvoice .invoice-action-btn--download {
    border-color: var(--he-primary) !important;
    background: var(--he-primary) !important;
    color: var(--he-primary-fg) !important;
}

body.viewinvoice .invoice-action-btn:hover,
body.viewinvoice .invoice-back-btn:hover {
    transform: none !important;
    border-color: var(--he-primary) !important;
    color: var(--he-primary) !important;
}

body.viewinvoice .invoice-status span {
    border-radius: 6px !important;
    box-shadow: none !important;
}

body.viewinvoice .form-control,
body.viewinvoice select.form-control {
    border-color: var(--he-border-soft) !important;
    background: var(--he-card-bg) !important;
    color: var(--he-fg) !important;
}

@media (max-width: 767.98px) {
    body.viewinvoice {
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }

    body.viewinvoice .invoice-container {
        width: calc(100% - 20px) !important;
        padding: 18px !important;
    }
}

/* align26: beat earlier page-products cart overrides with the final 3-column layout */
body.page-products #order-standard_cart .products,
body.page-addons #order-standard_cart .products,
body #order-standard_cart .products {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;
    margin: 20px 0 10px !important;
    padding: 0 !important;
}

body.page-products #order-standard_cart .products > .row,
body.page-products #order-standard_cart .products .row.row-eq-height,
body.page-addons #order-standard_cart .products > .row,
body.page-addons #order-standard_cart .products .row.row-eq-height,
body #order-standard_cart .products > .row,
body #order-standard_cart .products .row.row-eq-height {
    display: contents !important;
}

body.page-products #order-standard_cart .products > .row > [class*="col-"],
body.page-products #order-standard_cart .products .row.row-eq-height > [class*="col-"],
body.page-addons #order-standard_cart .products > .row > [class*="col-"],
body.page-addons #order-standard_cart .products .row.row-eq-height > [class*="col-"],
body #order-standard_cart .products > .row > [class*="col-"],
body #order-standard_cart .products .row.row-eq-height > [class*="col-"] {
    float: none !important;
    width: 100% !important;
    max-width: none !important;
    flex: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

@media (max-width: 1199.98px) {
    body.page-products #order-standard_cart .products,
    body.page-addons #order-standard_cart .products,
    body #order-standard_cart .products {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 767.98px) {
    body.page-products #order-standard_cart .products,
    body.page-addons #order-standard_cart .products,
    body #order-standard_cart .products {
        grid-template-columns: 1fr !important;
    }
}

/* align27: preview refinements for collapsible navigation and compact page sections */
.topbar .navbar-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    width: var(--he-shell-sidebar-width) !important;
    min-width: var(--he-shell-sidebar-width) !important;
    padding: 0 12px !important;
    transition: width 0.2s ease, min-width 0.2s ease;
}

.topbar .navbar-header .navbar-brand {
    display: inline-flex !important;
    align-items: center !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    padding-right: 0 !important;
}

.topbar .navbar-header .navbar-brand span {
    min-width: 0;
    transition: width 0.2s ease, opacity 0.2s ease;
}

.topbar .navbar-header .he-sidebar-toggle {
    flex: 0 0 32px;
}

.left-sidebar .he-sidebar-tools {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-height: 44px;
    padding: 7px 10px 4px;
    background: var(--he-bg);
}

.he-sidebar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--he-border-soft);
    border-radius: 8px;
    background: var(--he-card-bg);
    color: var(--he-sidebar-link);
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.he-sidebar-toggle:hover,
.he-sidebar-toggle:focus {
    border-color: var(--he-border);
    background: var(--he-sidebar-link-hover-bg);
    color: var(--he-sidebar-link-hover);
}

.he-sidebar-toggle i {
    font-size: 18px;
    line-height: 1;
}

body.he-sidebar-collapsed {
    --he-shell-sidebar-width: 72px;
    --he-sidebar-link-width: 48px;
}

body.he-sidebar-collapsed .navbar-header .navbar-brand span {
    width: 0;
    opacity: 0;
    overflow: hidden;
}

body.he-sidebar-collapsed .topbar .navbar-header {
    justify-content: center !important;
    padding: 0 !important;
}

body.he-sidebar-collapsed .topbar .navbar-header .navbar-brand {
    display: none !important;
}

body.he-sidebar-collapsed .topbar .navbar-header .he-sidebar-toggle {
    margin: 0 auto;
}

body.he-sidebar-collapsed .left-sidebar .he-sidebar-tools {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}

body.he-sidebar-collapsed .sidebar-nav #sidebarnav {
    padding-left: 0;
    padding-right: 0;
}

body.he-sidebar-collapsed .sidebar-nav #sidebarnav > li > a {
    justify-content: center;
    width: 48px;
    min-height: 42px;
    margin: 4px auto;
    padding: 0 !important;
}

body.he-sidebar-collapsed .sidebar-nav #sidebarnav > li > a i {
    width: auto;
    margin: 0 !important;
    font-size: 18px;
    line-height: 1;
    display: block;
}

body.he-sidebar-collapsed .sidebar-nav #sidebarnav > li > a .hide-menu,
body.he-sidebar-collapsed .sidebar-nav #sidebarnav > li > a::after,
body.he-sidebar-collapsed .sidebar-nav #sidebarnav > li > ul,
body.he-sidebar-collapsed .sidebar-nav #sidebarnav .nav-devider {
    display: none !important;
}

body.he-sidebar-collapsed .sidebar-nav #sidebarnav > li > a.has-arrow {
    pointer-events: auto;
}

@media (max-width: 767.98px) {
    .topbar .navbar-header {
        width: auto !important;
        min-width: 0 !important;
        padding: 0 10px !important;
        gap: 4px !important;
    }

    .left-sidebar .he-sidebar-tools,
    .topbar .navbar-header .he-sidebar-toggle {
        display: none;
    }
}

body.page-clientareaproductdetails .product-dashboard-header > .row {
    display: grid !important;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr) !important;
    gap: 16px !important;
    align-items: stretch !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.page-clientareaproductdetails .product-dashboard-header > .row > [class*="col-"] {
    display: flex !important;
    width: auto !important;
    max-width: none !important;
    flex: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body.page-clientareaproductdetails .product-dashboard-header > .row > [class*="col-"] > .card,
body.page-clientareaproductdetails .product-dashboard-header > .row > [class*="col-"] > .row {
    min-height: 118px !important;
}

body.page-clientareaproductdetails .product-dashboard-header .row.h-100,
body.page-clientareaproductdetails .product-dashboard-header .row.w-100 {
    width: 100% !important;
}

@media (max-width: 991.98px) {
    body.page-clientareaproductdetails .product-dashboard-header > .row {
        grid-template-columns: 1fr !important;
    }
}

.page-affiliates .affiliate-hero-section {
    margin-bottom: 18px !important;
    padding: 8px 4px 10px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.page-affiliates .affiliate-hero-section h1 {
    margin-bottom: 4px !important;
}

.page-affiliates .affiliate-hero-section p {
    margin-bottom: 0 !important;
    color: var(--he-fg-muted) !important;
}

.ticket-info-section .row {
    margin: -4px !important;
}

.ticket-info-section .row > [class*="col-"] {
    padding: 4px !important;
}

.ticket-info-section .ticket-info-item {
    min-height: 58px !important;
    gap: 10px !important;
    padding: 9px 12px !important;
    border-radius: 8px !important;
    border-color: var(--he-border-soft) !important;
    background: var(--he-bg-light) !important;
    box-shadow: none !important;
}

.ticket-info-section .ticket-info-item:hover {
    transform: none !important;
    border-color: var(--he-border) !important;
    background: var(--he-bg-light) !important;
    box-shadow: none !important;
}

.ticket-info-section .ticket-info-item i {
    width: 16px !important;
    font-size: 15px !important;
}

.ticket-info-section .info-content {
    gap: 2px !important;
}

.ticket-info-section .info-label {
    font-size: 11px !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.ticket-info-section .info-value {
    font-size: 13px !important;
    line-height: 1.25 !important;
}

.ticket-info-section .info-value .label {
    padding: 4px 8px !important;
    font-size: 11px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

/* align28: view cart layout polish for hosteasenew */
body.page-viewcart #order-standard_cart > .row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
    margin: 0 !important;
}

body.page-viewcart #order-standard_cart .cart-sidebar {
    display: none !important;
    width: 0 !important;
    float: none !important;
    padding: 0 !important;
}

body.page-viewcart #order-standard_cart .cart-body {
    width: 100% !important;
    float: none !important;
    min-width: 0 !important;
}

body.page-viewcart #order-standard_cart .cart-body > .row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 360px !important;
    gap: 18px !important;
    margin: 0 !important;
    width: 100% !important;
    align-items: start !important;
}

body.page-viewcart #order-standard_cart .secondary-cart-body,
body.page-viewcart #order-standard_cart .secondary-cart-sidebar {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    float: none !important;
    flex: none !important;
    padding: 0 !important;
}

body.page-viewcart #order-standard_cart .header-lined {
    margin: 0 0 16px !important;
    padding: 0 !important;
    border: 0 !important;
}

body.page-viewcart #order-standard_cart .header-lined h1 {
    margin: 0 !important;
    color: var(--he-fg-strong) !important;
    font-size: 24px !important;
    line-height: 1.25 !important;
    font-weight: 680 !important;
}

body.page-viewcart #order-standard_cart .view-cart-items-header {
    margin: 0 0 10px !important;
    padding: 10px 14px !important;
    border: 1px solid var(--he-border-soft) !important;
    border-radius: 8px !important;
    background: var(--he-bg-light) !important;
    color: var(--he-fg-muted) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

body.page-viewcart #order-standard_cart .view-cart-items {
    display: grid !important;
    gap: 10px !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

body.page-viewcart #order-standard_cart .view-cart-items .item {
    margin: 0 !important;
    padding: 14px !important;
    border: 1px solid var(--he-border-soft) !important;
    border-radius: 10px !important;
    background: var(--he-card-bg) !important;
    color: var(--he-fg) !important;
    box-shadow: none !important;
}

body.page-viewcart #order-standard_cart .view-cart-items .item:nth-child(even) {
    background: var(--he-card-bg) !important;
}

body.page-viewcart #order-standard_cart .view-cart-items .item > .row {
    align-items: center !important;
}

body.page-viewcart #order-standard_cart .view-cart-items .item-title {
    color: var(--he-fg-strong) !important;
    font-size: 15px !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
}

body.page-viewcart #order-standard_cart .view-cart-items .item-group,
body.page-viewcart #order-standard_cart .view-cart-items small,
body.page-viewcart #order-standard_cart .view-cart-items .cycle {
    color: var(--he-fg-muted) !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
}

body.page-viewcart #order-standard_cart .view-cart-items .item-domain {
    display: inline-flex !important;
    width: auto !important;
    margin-top: 6px !important;
    padding: 3px 8px !important;
    border-radius: 999px !important;
    background: var(--he-primary-muted) !important;
    color: var(--he-primary) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}

body.page-viewcart #order-standard_cart .view-cart-items .item-price {
    color: var(--he-fg-strong) !important;
    text-align: right !important;
}

body.page-viewcart #order-standard_cart .view-cart-items .item-price > span:first-child,
body.page-viewcart #order-standard_cart .view-cart-items .item-price span[name$="Price"] {
    color: var(--he-fg-strong) !important;
    font-size: 17px !important;
    line-height: 1.2 !important;
    font-weight: 750 !important;
}

body.page-viewcart #order-standard_cart .view-cart-items .btn-link {
    color: var(--he-primary) !important;
    box-shadow: none !important;
}

body.page-viewcart #order-standard_cart .btn-remove-from-cart {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    height: 30px !important;
    padding: 0 !important;
    border: 1px solid var(--he-border-soft) !important;
    border-radius: 8px !important;
    color: var(--he-fg-muted) !important;
}

body.page-viewcart #order-standard_cart .btn-remove-from-cart:hover {
    border-color: rgba(239, 83, 80, 0.35) !important;
    background: rgba(239, 83, 80, 0.08) !important;
    color: #ef5350 !important;
}

body.page-viewcart #order-standard_cart .empty-cart {
    margin: 0 0 18px !important;
    text-align: right !important;
}

body.page-viewcart #order-standard_cart .empty-cart .btn {
    min-height: 34px !important;
    padding: 0 12px !important;
    border: 1px solid var(--he-border-soft) !important;
    border-radius: 8px !important;
    background: var(--he-bg-light) !important;
    color: var(--he-fg-muted) !important;
}

body.page-viewcart #order-standard_cart .view-cart-tabs {
    margin: 0 !important;
    border: 1px solid var(--he-border-soft) !important;
    border-radius: 10px !important;
    background: var(--he-card-bg) !important;
    overflow: hidden !important;
}

body.page-viewcart #order-standard_cart .view-cart-tabs .nav-tabs {
    gap: 8px !important;
    margin: 0 !important;
    padding: 10px !important;
    border-bottom: 1px solid var(--he-border-soft) !important;
    background: var(--he-bg-light) !important;
    font-size: 13px !important;
}

body.page-viewcart #order-standard_cart .view-cart-tabs .nav-tabs > li > a,
body.page-viewcart #order-standard_cart .view-cart-tabs .nav-tabs .nav-link {
    min-height: 34px !important;
    padding: 0 12px !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--he-fg-muted) !important;
    display: inline-flex !important;
    align-items: center !important;
}

body.page-viewcart #order-standard_cart .view-cart-tabs .nav-tabs > li.active > a,
body.page-viewcart #order-standard_cart .view-cart-tabs .nav-tabs .nav-link.active {
    border-color: var(--he-primary) !important;
    background: var(--he-primary-muted) !important;
    color: var(--he-primary) !important;
}

body.page-viewcart #order-standard_cart .view-cart-tabs .tab-content {
    padding: 14px !important;
    background: transparent !important;
}

body.page-viewcart #order-standard_cart .view-cart-promotion-code,
body.page-viewcart #order-standard_cart .view-cart-gateway-checkout {
    border: 1px solid var(--he-border-soft) !important;
    border-radius: 8px !important;
    background: var(--he-bg-light) !important;
    color: var(--he-fg) !important;
    box-shadow: none !important;
}

body.page-viewcart #order-standard_cart .order-summary,
body.page-viewcart #order-standard_cart #orderSummary {
    position: sticky !important;
    top: calc(var(--he-shell-topbar-height) + 18px) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid var(--he-border-soft) !important;
    border-radius: 10px !important;
    background: var(--he-card-bg) !important;
    color: var(--he-fg) !important;
    overflow: hidden !important;
}

body.page-viewcart #order-standard_cart .order-summary h2 {
    margin: 0 !important;
    padding: 14px 16px !important;
    border-bottom: 1px solid var(--he-border-soft) !important;
    background: var(--he-bg-light) !important;
    color: var(--he-fg-strong) !important;
    text-align: left !important;
    font-size: 18px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
}

body.page-viewcart #order-standard_cart .summary-container {
    padding: 16px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    font-size: 13px !important;
}

body.page-viewcart #order-standard_cart .order-summary .subtotal,
body.page-viewcart #order-standard_cart .order-summary .bordered-totals,
body.page-viewcart #order-standard_cart .order-summary .recurring-totals {
    margin: 0 !important;
    padding: 10px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--he-border-soft) !important;
}

body.page-viewcart #order-standard_cart .order-summary .total-due-today {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 4px !important;
    margin: 14px 0 !important;
    padding: 14px !important;
    border: 1px solid var(--he-border-soft) !important;
    border-radius: 10px !important;
    background: var(--he-primary-muted) !important;
}

body.page-viewcart #order-standard_cart .order-summary .total-due-today,
body.page-viewcart #order-standard_cart .order-summary .total-due-today span,
body.page-viewcart #order-standard_cart .order-summary .total-due-today div,
body.page-viewcart #order-standard_cart .order-summary .total-due-today small {
    color: var(--he-fg-strong) !important;
}

body.page-viewcart #order-standard_cart .order-summary .total-due-today .amt,
body.page-viewcart #order-standard_cart .order-summary #totalDueToday {
    color: var(--he-primary) !important;
    font-size: 28px !important;
    line-height: 1 !important;
    font-weight: 780 !important;
}

body.page-viewcart #order-standard_cart .order-summary .total-due-today .lbl,
body.page-viewcart #order-standard_cart .order-summary .total-due-today span:last-child,
body.page-viewcart #order-standard_cart .order-summary .total-due-today small {
    color: var(--he-fg-muted) !important;
    font-weight: 650 !important;
}

body.theme-dark.page-viewcart #order-standard_cart .order-summary .total-due-today,
html[data-theme="dark"] body.page-viewcart #order-standard_cart .order-summary .total-due-today {
    border-color: rgba(87, 211, 107, 0.26) !important;
    background: rgba(87, 211, 107, 0.12) !important;
}

body.theme-dark.page-viewcart #order-standard_cart .order-summary .total-due-today .amt,
body.theme-dark.page-viewcart #order-standard_cart .order-summary #totalDueToday,
html[data-theme="dark"] body.page-viewcart #order-standard_cart .order-summary .total-due-today .amt,
html[data-theme="dark"] body.page-viewcart #order-standard_cart .order-summary #totalDueToday {
    color: var(--he-primary) !important;
}

body.theme-dark.page-viewcart #order-standard_cart .order-summary .total-due-today,
body.theme-dark.page-viewcart #order-standard_cart .order-summary .total-due-today span,
body.theme-dark.page-viewcart #order-standard_cart .order-summary .total-due-today div,
body.theme-dark.page-viewcart #order-standard_cart .order-summary .total-due-today small,
html[data-theme="dark"] body.page-viewcart #order-standard_cart .order-summary .total-due-today,
html[data-theme="dark"] body.page-viewcart #order-standard_cart .order-summary .total-due-today span,
html[data-theme="dark"] body.page-viewcart #order-standard_cart .order-summary .total-due-today div,
html[data-theme="dark"] body.page-viewcart #order-standard_cart .order-summary .total-due-today small {
    color: var(--he-fg-strong) !important;
}

body.theme-dark.page-viewcart #order-standard_cart .order-summary .total-due-today .lbl,
body.theme-dark.page-viewcart #order-standard_cart .order-summary .total-due-today span:last-child,
body.theme-dark.page-viewcart #order-standard_cart .order-summary .total-due-today small,
html[data-theme="dark"] body.page-viewcart #order-standard_cart .order-summary .total-due-today .lbl,
html[data-theme="dark"] body.page-viewcart #order-standard_cart .order-summary .total-due-today span:last-child,
html[data-theme="dark"] body.page-viewcart #order-standard_cart .order-summary .total-due-today small {
    color: var(--he-fg-muted) !important;
}

body.page-viewcart #order-standard_cart .order-summary .btn-checkout {
    width: 100% !important;
    min-height: 46px !important;
    margin-top: 4px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: var(--he-primary) !important;
    color: var(--he-primary-fg) !important;
    box-shadow: none !important;
}

body.page-viewcart #order-standard_cart .order-summary .btn-continue-shopping {
    display: inline-flex !important;
    margin-top: 10px !important;
    color: var(--he-fg-muted) !important;
}

@media (max-width: 1199.98px) {
    body.page-viewcart #order-standard_cart > .row,
    body.page-viewcart #order-standard_cart .cart-body > .row {
        grid-template-columns: 1fr !important;
    }

    body.page-viewcart #order-standard_cart .order-summary,
    body.page-viewcart #order-standard_cart #orderSummary {
        position: static !important;
    }
}

@media (max-width: 767.98px) {
    body.page-viewcart #order-standard_cart .view-cart-items-header {
        display: none !important;
    }

    body.page-viewcart #order-standard_cart .view-cart-items .item {
        padding: 12px !important;
    }

    body.page-viewcart #order-standard_cart .view-cart-items .item-price {
        margin-top: 10px !important;
        text-align: left !important;
    }
}

/* align29: make the logo-side collapse control visible and center collapsed nav icons */
.topbar .navbar-header .he-sidebar-toggle {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 4 !important;
    width: 36px !important;
    height: 36px !important;
    flex: 0 0 36px !important;
    margin-left: 8px !important;
    border-color: var(--he-border-soft) !important;
    background: var(--he-bg-light) !important;
    color: var(--he-fg-muted) !important;
}

.topbar .navbar-header .he-sidebar-toggle i {
    display: block !important;
    color: inherit !important;
    font-size: 20px !important;
    line-height: 1 !important;
}

.topbar .navbar-header .he-sidebar-toggle:hover,
.topbar .navbar-header .he-sidebar-toggle:focus {
    border-color: var(--he-border-soft) !important;
    background: var(--he-bg-light) !important;
    color: var(--he-fg-muted) !important;
    box-shadow: none !important;
}

body.he-sidebar-collapsed .topbar .navbar-header .he-sidebar-toggle {
    width: 36px !important;
    height: 36px !important;
    flex-basis: 36px !important;
    margin: 0 auto !important;
}

body.he-sidebar-collapsed .scroll-sidebar,
body.he-sidebar-collapsed .sidebar-nav,
body.he-sidebar-collapsed .sidebar-nav #sidebarnav {
    width: 72px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body.he-sidebar-collapsed .sidebar-nav #sidebarnav > li {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 72px !important;
    padding: 0 !important;
    margin: 0 !important;
}

body.he-sidebar-collapsed .sidebar-nav #sidebarnav > li > a {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 48px !important;
    max-width: 48px !important;
    min-width: 48px !important;
    height: 42px !important;
    min-height: 42px !important;
    margin: 4px 0 !important;
    padding: 0 !important;
    text-align: center !important;
}

body.he-sidebar-collapsed .sidebar-nav #sidebarnav > li > a i {
    display: block !important;
    width: 20px !important;
    min-width: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    line-height: 1 !important;
}

/* align30: login page shell, neutral collapse button, collapsed Login, and mobile nav fixes */
body.is-logged-out .left-sidebar,
body.is-logged-out .sidebar-overlay,
body.is-logged-out .sidebar-backdrop,
body.is-logged-out .he-sidebar-toggle,
body.is-logged-out .mobile-sidebartoggler {
    display: none !important;
}

body.is-logged-out .page-wrapper {
    margin-left: 0 !important;
}

body.is-logged-out .topbar .top-navbar .navbar-header,
body.is-logged-out .topbar .navbar-header {
    width: auto !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    padding: 0 16px !important;
    border-right: 0 !important;
    background: transparent !important;
}

body.is-logged-out .topbar .navbar-header .navbar-brand {
    display: inline-flex !important;
    max-width: 168px !important;
    width: auto !important;
    min-height: var(--he-shell-topbar-height) !important;
    height: var(--he-shell-topbar-height) !important;
    opacity: 1 !important;
    overflow: visible !important;
}

body.is-logged-out .topbar .navbar-header .navbar-brand span {
    display: inline-flex !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    opacity: 1 !important;
    overflow: visible !important;
}

body.is-logged-out .topbar .navbar-header .navbar-brand img {
    max-width: 150px !important;
    width: auto !important;
    max-height: 34px !important;
    height: auto !important;
    opacity: 1 !important;
}

body.page-login .left-sidebar,
body.page-login .sidebar-overlay,
body.page-login .sidebar-backdrop {
    display: none !important;
}

body.page-login .page-wrapper {
    min-height: calc(100vh - var(--he-shell-topbar-height)) !important;
    margin-left: 0 !important;
    padding-top: var(--he-shell-topbar-height) !important;
    background: var(--he-bg) !important;
}

body.page-login .clientarea-shell {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: calc(100vh - var(--he-shell-topbar-height)) !important;
    padding: 32px 16px !important;
}

body.page-login .clientarea-shell > .row {
    justify-content: center !important;
    width: 100% !important;
    margin: 0 !important;
}

body.page-login .primary-content {
    width: 100% !important;
    max-width: 540px !important;
    padding: 0 !important;
}

body.page-login .login-page {
    width: 100% !important;
    padding: 0 !important;
}

body.page-login .login-page__inner {
    width: 100% !important;
    max-width: 540px !important;
}

body.page-login .custom-login-card,
body.page-login .login-card {
    margin: 0 !important;
    border-color: var(--he-border-soft) !important;
    border-radius: 10px !important;
    background: var(--he-card-bg) !important;
    box-shadow: var(--he-shadow-card) !important;
}

body.page-login .login-card .card-header {
    padding: 16px 20px !important;
    border-bottom: 1px solid var(--he-border-soft) !important;
    background: var(--he-bg-light) !important;
}

body.page-login .login-card .card-header h4,
body.page-login .login-card .card-header .text-white {
    color: var(--he-fg-strong) !important;
}

body.page-login .login-card .card-body {
    padding: 24px !important;
}

body.page-login .login-card .card-footer {
    border-top: 1px solid var(--he-border-soft) !important;
}

body.page-login .login-actions {
    gap: 14px 20px !important;
}

body.page-login .footer {
    display: none !important;
}

body a:focus:not(:focus-visible),
body button:focus:not(:focus-visible),
body .btn:focus:not(:focus-visible),
body .nav-link:focus:not(:focus-visible),
body .dropdown-toggle:focus:not(:focus-visible),
body .he-theme-toggle:focus:not(:focus-visible),
body .he-sidebar-toggle:focus:not(:focus-visible),
body .mobile-sidebartoggler:focus:not(:focus-visible),
body .user-avatar-btn:focus:not(:focus-visible),
body [role="button"]:focus:not(:focus-visible) {
    outline: 0 !important;
    box-shadow: none !important;
}

body .btn:active:focus,
body .btn.active:focus,
body .nav-link:active:focus,
body .dropdown-toggle:active:focus,
body .he-theme-toggle:active:focus,
body .he-sidebar-toggle:active:focus,
body .mobile-sidebartoggler:active:focus,
body .user-avatar-btn:active:focus {
    outline: 0 !important;
    box-shadow: none !important;
}

body a:focus-visible,
body button:focus-visible,
body .btn:focus-visible,
body .nav-link:focus-visible,
body [role="button"]:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--he-primary) 38%, transparent) !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
}

body.he-sidebar-collapsed .left-sidebar .user-profile {
    padding: 8px 0 !important;
}

body.he-sidebar-collapsed .left-sidebar .user-profile .login-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    height: 42px !important;
    margin: 4px auto !important;
    padding: 0 !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--he-sidebar-link) !important;
    box-shadow: none !important;
    font-size: 0 !important;
    overflow: hidden !important;
}

body.he-sidebar-collapsed .left-sidebar .user-profile .login-btn i {
    display: block !important;
    width: 20px !important;
    min-width: 20px !important;
    margin: 0 !important;
    color: inherit !important;
    font-size: 18px !important;
    line-height: 1 !important;
    text-align: center !important;
}

body.he-sidebar-collapsed .left-sidebar .user-profile .login-btn:hover,
body.he-sidebar-collapsed .left-sidebar .user-profile .login-btn:focus {
    border-color: var(--he-border-soft) !important;
    background: var(--he-sidebar-link-hover-bg) !important;
    color: var(--he-sidebar-link-hover) !important;
}

@media (max-width: 767.98px) {
    .topbar .navbar-header {
        display: flex !important;
        align-items: center !important;
        width: auto !important;
        min-width: 0 !important;
        flex: 0 0 auto !important;
        border-right: 0 !important;
        background: transparent !important;
    }

    .topbar .navbar-header .mobile-sidebartoggler,
    .topbar .navbar-header #mobileSidebarToggle {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 40px !important;
        height: 40px !important;
        padding: 0 !important;
        border: 1px solid var(--he-border-soft) !important;
        border-radius: 8px !important;
        background: var(--he-bg-light) !important;
        color: var(--he-fg-muted) !important;
        box-shadow: none !important;
    }

    .topbar .navbar-header .mobile-sidebartoggler:hover,
    .topbar .navbar-header .mobile-sidebartoggler:focus,
    .topbar .navbar-header #mobileSidebarToggle:hover,
    .topbar .navbar-header #mobileSidebarToggle:focus {
        background: var(--he-bg-light) !important;
        color: var(--he-fg-muted) !important;
        box-shadow: none !important;
    }

    .topbar .navbar-header .navbar-brand {
        display: inline-flex !important;
        min-width: 0 !important;
        max-width: 150px !important;
        margin-left: 8px !important;
    }

    .topbar .navbar-header .navbar-brand span {
        display: inline-flex !important;
        min-width: 0 !important;
    }

    .topbar .navbar-header .navbar-brand img {
        max-width: 132px !important;
        height: auto !important;
    }

    .topbar .top-navbar {
        padding-right: 8px !important;
    }

    .topbar .top-navbar .navbar-collapse {
        min-width: 0 !important;
        justify-content: flex-end !important;
    }

    body.is-logged-out .topbar .navbar-header {
        padding: 0 10px !important;
    }

    body.is-logged-out .page-wrapper {
        padding-top: var(--he-shell-topbar-height) !important;
    }

    .sidebar-overlay,
    .sidebar-backdrop {
        position: fixed !important;
        inset: var(--he-shell-topbar-height) 0 0 !important;
        background: rgba(15, 23, 42, 0.38) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: opacity 0.24s ease, visibility 0.24s ease !important;
        z-index: 1040 !important;
    }

    body.show-sidebar .sidebar-overlay,
    body.show-sidebar .sidebar-backdrop {
        opacity: 1 !important;
        visibility: visible !important;
    }

    body.page-login .clientarea-shell {
        align-items: flex-start !important;
        padding: 22px 12px !important;
    }

    body.page-login .login-card .card-body {
        padding: 20px 16px !important;
    }
}

/* align31: public homepage actions, captcha layout, dark controls, and products table polish */
.page-homepage .btn.btn-hero,
.page-homepage .public-homepage__section-action,
.page-clientareaproducts .services-list-table__action-cell .btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 42px !important;
    padding: 0 16px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

.page-homepage .btn.btn-primary.btn-hero {
    border-color: var(--he-primary-accessible) !important;
    background: var(--he-primary-accessible) !important;
    color: var(--he-primary-fg) !important;
}

.page-homepage .btn.btn-primary.btn-hero:hover,
.page-homepage .btn.btn-primary.btn-hero:focus {
    border-color: var(--he-primary-hover) !important;
    background: var(--he-primary-hover) !important;
    color: var(--he-primary-fg) !important;
}

.page-homepage .btn.btn-outline-primary.btn-hero,
.page-homepage .public-homepage__section-action {
    border-color: var(--he-border-soft) !important;
    background: var(--he-bg-light) !important;
    color: var(--he-fg) !important;
}

.page-homepage .btn.btn-outline-primary.btn-hero:hover,
.page-homepage .btn.btn-outline-primary.btn-hero:focus,
.page-homepage .public-homepage__section-action:hover,
.page-homepage .public-homepage__section-action:focus {
    border-color: var(--he-border) !important;
    background: var(--he-bg-light) !important;
    color: var(--he-fg-strong) !important;
}

.page-homepage .public-homepage__domain-form > .text-center {
    order: 2 !important;
    flex: 1 1 100% !important;
    width: 100% !important;
    margin: 2px 0 2px !important;
    text-align: left !important;
}

.page-homepage .public-homepage__domain-input {
    order: 1 !important;
}

.page-homepage #btnDomainSearch {
    order: 3 !important;
}

.page-homepage #btnDomainSearch + .btn {
    order: 4 !important;
}

.page-homepage .domainchecker-homepage-captcha {
    width: min(100%, 560px) !important;
    margin-left: auto !important;
}

.page-homepage .domainchecker-homepage-captcha #default-captcha-domainchecker {
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
}

.page-homepage .domainchecker-homepage-captcha #default-captcha-domainchecker > p {
    margin: 0 0 8px !important;
    color: var(--he-fg-muted) !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    font-weight: 650 !important;
}

.page-homepage .domainchecker-homepage-captcha .row {
    display: grid !important;
    grid-template-columns: auto minmax(180px, 1fr) !important;
    gap: 12px !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 10px !important;
    border: 1px solid var(--he-border-soft) !important;
    border-radius: 10px !important;
    background: var(--he-bg-light) !important;
}

.page-homepage .domainchecker-homepage-captcha .row > [class*="col-"] {
    width: auto !important;
    max-width: none !important;
    flex: none !important;
    padding: 0 !important;
    text-align: left !important;
}

.page-homepage .domainchecker-homepage-captcha #inputCaptchaImage {
    display: block !important;
    max-width: 118px !important;
    height: 42px !important;
    border-radius: 8px !important;
}

.page-homepage .domainchecker-homepage-captcha #inputCaptcha {
    min-height: 42px !important;
    border-color: var(--he-border) !important;
    background: var(--he-card-bg) !important;
    color: var(--he-fg) !important;
}

.page-login .btn-reveal-pw,
.page-login .input-group-append .btn-reveal-pw,
body.theme-dark .page-login .btn-reveal-pw,
html[data-theme="dark"] body.page-login .btn-reveal-pw {
    border-color: var(--he-border) !important;
    background: var(--he-bg-light) !important;
    color: var(--he-fg-muted) !important;
    box-shadow: none !important;
}

.page-login .btn-reveal-pw:hover,
.page-login .btn-reveal-pw:focus,
body.theme-dark .page-login .btn-reveal-pw:hover,
body.theme-dark .page-login .btn-reveal-pw:focus,
html[data-theme="dark"] body.page-login .btn-reveal-pw:hover,
html[data-theme="dark"] body.page-login .btn-reveal-pw:focus {
    border-color: var(--he-border) !important;
    background: var(--he-bg-light) !important;
    color: var(--he-fg-strong) !important;
}

.sidebar-nav .dropdown-divider,
.topbar .dropdown-divider {
    border-top: 1px solid var(--he-border-soft) !important;
    background: transparent !important;
    opacity: 1 !important;
}

body.theme-dark .sidebar-nav .dropdown-divider,
body.theme-dark .topbar .dropdown-divider,
html[data-theme="dark"] body .sidebar-nav .dropdown-divider,
html[data-theme="dark"] body .topbar .dropdown-divider {
    border-top-color: var(--he-border-soft) !important;
    background: transparent !important;
}

.page-clientareaproducts .primary-content,
.page-clientareaproducts .client-primary-content {
    padding-top: 0 !important;
}

.page-clientareaproducts .services-list-table-container {
    padding: 16px !important;
    border: 1px solid var(--he-border-soft) !important;
    border-radius: 10px !important;
    background: var(--he-card-bg) !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.page-clientareaproducts .dataTables_wrapper {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    background: transparent !important;
}

.page-clientareaproducts .table-toolbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 320px) !important;
    gap: 12px !important;
    align-items: center !important;
    margin: 0 0 14px !important;
    padding: 10px !important;
    border: 1px solid var(--he-border-soft) !important;
    border-radius: 10px !important;
    background: var(--he-bg-light) !important;
    box-shadow: none !important;
}

.page-clientareaproducts .status-tabs {
    width: auto !important;
    max-width: 100% !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
}

.page-clientareaproducts .status-tab {
    min-height: 34px !important;
    border-radius: 8px !important;
}

.page-clientareaproducts .toolbar-search-input,
.page-clientareaproducts .dataTables_filter input {
    min-height: 36px !important;
    border-color: var(--he-border-soft) !important;
    border-radius: 8px !important;
    background: var(--he-card-bg) !important;
    color: var(--he-fg) !important;
}

.page-clientareaproducts table.services-list-table,
.page-clientareaproducts #tableServicesList {
    width: 100% !important;
    margin: 0 !important;
    border: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 8px !important;
    background: transparent !important;
    overflow: visible !important;
}

.page-clientareaproducts table.services-list-table thead th,
.page-clientareaproducts #tableServicesList thead th {
    padding: 10px 14px !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--he-fg-muted) !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
}

.page-clientareaproducts table.services-list-table tbody tr,
.page-clientareaproducts #tableServicesList tbody tr {
    background: transparent !important;
}

.page-clientareaproducts table.services-list-table tbody td,
.page-clientareaproducts #tableServicesList tbody td {
    padding: 14px !important;
    border-top: 1px solid var(--he-border-soft) !important;
    border-bottom: 1px solid var(--he-border-soft) !important;
    background: var(--he-bg-light) !important;
    color: var(--he-fg) !important;
    vertical-align: middle !important;
}

.page-clientareaproducts table.services-list-table tbody td:first-child,
.page-clientareaproducts #tableServicesList tbody td:first-child {
    border-left: 1px solid var(--he-border-soft) !important;
    border-radius: 10px 0 0 10px !important;
}

.page-clientareaproducts table.services-list-table tbody td:last-child,
.page-clientareaproducts #tableServicesList tbody td:last-child {
    border-right: 1px solid var(--he-border-soft) !important;
    border-radius: 0 10px 10px 0 !important;
}

.page-clientareaproducts table.services-list-table tbody tr:hover td,
.page-clientareaproducts #tableServicesList tbody tr:hover td {
    border-color: var(--he-border) !important;
    background: var(--he-card-bg) !important;
}

.page-clientareaproducts .services-list-table td strong,
.page-clientareaproducts .services-list-table__primary {
    color: var(--he-fg-strong) !important;
    font-weight: 750 !important;
}

.page-clientareaproducts .services-list-table small,
.page-clientareaproducts .services-list-table__secondary,
.page-clientareaproducts .dataTables_info,
.page-clientareaproducts .dataTables_length {
    color: var(--he-fg-muted) !important;
}

.page-clientareaproducts .services-list-table__action-cell .btn {
    min-height: 34px !important;
    padding: 0 12px !important;
    border-color: var(--he-border-soft) !important;
    background: var(--he-card-bg) !important;
    color: var(--he-fg) !important;
}

.page-clientareaproducts .services-list-table__action-cell .btn:hover,
.page-clientareaproducts .services-list-table__action-cell .btn:focus {
    border-color: var(--he-border) !important;
    background: var(--he-bg-light) !important;
    color: var(--he-fg-strong) !important;
}

@media (max-width: 767.98px) {
    .page-homepage .domainchecker-homepage-captcha {
        margin-left: 0 !important;
    }

    .page-homepage .domainchecker-homepage-captcha .row {
        grid-template-columns: 1fr !important;
    }

    .page-homepage .domainchecker-homepage-captcha #inputCaptchaImage {
        max-width: 132px !important;
    }

    .page-clientareaproducts .table-toolbar {
        grid-template-columns: 1fr !important;
    }
}

/* align32: product detail page and DataTables pagination */
body.page-clientareaproductdetails .clientarea-shell {
    width: 100% !important;
    max-width: none !important;
    padding: 12px 24px 28px !important;
}

body.page-clientareaproductdetails .primary-content,
body.page-clientareaproductdetails .client-primary-content {
    width: 100% !important;
    max-width: none !important;
    padding: 12px 0 0 !important;
}

body.page-clientareaproductdetails .product-dashboard-header,
body.page-clientareaproductdetails .product-details-tabs,
body.page-clientareaproductdetails .tab-content.product-details-tabs {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.page-clientareaproductdetails .product-dashboard-header > .row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
    align-items: stretch !important;
    width: 100% !important;
    margin: 0 !important;
}

body.page-clientareaproductdetails .product-dashboard-header > .row > [class*="col-"] {
    display: flex !important;
    width: auto !important;
    max-width: none !important;
    flex: none !important;
    padding: 0 !important;
}

body.page-clientareaproductdetails .product-dashboard-header > .row > [class*="col-"] > .row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
    width: 100% !important;
    min-height: 150px !important;
    margin: 0 !important;
}

body.page-clientareaproductdetails .product-dashboard-header > .row > [class*="col-"] > .row > [class*="col-"] {
    display: flex !important;
    width: auto !important;
    max-width: none !important;
    flex: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

body.page-clientareaproductdetails .product-dashboard-header .card,
body.page-clientareaproductdetails .product-dashboard-header > .row > [class*="col-"] > .card,
body.page-clientareaproductdetails .product-dashboard-header > .row > [class*="col-"] > .row > [class*="col-"] > .card {
    width: 100% !important;
    min-height: 150px !important;
}

body.page-clientareaproductdetails .product-details-tabs > .nav-tabs,
body.page-clientareaproductdetails .nav-tabs.responsive-tabs-sm {
    border-color: var(--he-border-soft) !important;
    background: var(--he-card-bg) !important;
    box-shadow: var(--he-shadow-card) !important;
}

body.page-clientareaproductdetails .tab-content.product-details-tabs,
body.page-clientareaproductdetails .tab-pane {
    background: transparent !important;
}

body.page-clientareaproductdetails .module-actions-container .list-group-item {
    border: 1px solid var(--he-border-soft) !important;
    background: var(--he-bg-light) !important;
    color: var(--he-fg) !important;
}

body.page-clientareaproductdetails .module-actions-container .list-group-item:hover,
body.page-clientareaproductdetails .module-actions-container .list-group-item:focus {
    border-color: var(--he-border) !important;
    background: var(--he-card-bg) !important;
    color: var(--he-fg-strong) !important;
}

body.page-clientareaproductdetails .btn,
body.page-clientareaproductdetails .btn-default,
body.page-clientareaproductdetails .btn-primary,
body.page-clientareaproductdetails .btn-success {
    border-radius: 8px !important;
    box-shadow: none !important;
}

.page-clientareaproducts .dataTables_paginate .pagination,
.page-products .dataTables_paginate .pagination,
body.theme-dark .dataTables_paginate .pagination {
    display: inline-flex !important;
    flex-wrap: wrap;
    gap: 6px;
    margin: 12px 0 0 !important;
}

.page-clientareaproducts .dataTables_wrapper .dataTables_paginate .paginate_button,
.page-products .dataTables_wrapper .dataTables_paginate .paginate_button,
body.theme-dark .dataTables_wrapper .dataTables_paginate .paginate_button {
    margin: 0 !important;
}

.page-clientareaproducts .dataTables_wrapper .dataTables_paginate .paginate_button .page-link,
.page-products .dataTables_wrapper .dataTables_paginate .paginate_button .page-link,
body.theme-dark .dataTables_wrapper .dataTables_paginate .paginate_button .page-link,
body.theme-dark .dataTables_wrapper .dataTables_paginate .pagination > li > a,
body.theme-dark .dataTables_wrapper .dataTables_paginate .pagination > li > span {
    min-width: 34px !important;
    min-height: 34px !important;
    padding: 0 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid var(--he-border-soft) !important;
    border-radius: 8px !important;
    background: var(--he-bg-light) !important;
    color: var(--he-fg-muted) !important;
    line-height: 1 !important;
    box-shadow: none !important;
}

.page-clientareaproducts .dataTables_wrapper .dataTables_paginate .paginate_button:not(.disabled):not(.active) .page-link:hover,
.page-products .dataTables_wrapper .dataTables_paginate .paginate_button:not(.disabled):not(.active) .page-link:hover,
body.theme-dark .dataTables_wrapper .dataTables_paginate .paginate_button:not(.disabled):not(.active) .page-link:hover,
.page-clientareaproducts .dataTables_wrapper .dataTables_paginate .paginate_button:not(.disabled):not(.active) .page-link:focus,
.page-products .dataTables_wrapper .dataTables_paginate .paginate_button:not(.disabled):not(.active) .page-link:focus,
body.theme-dark .dataTables_wrapper .dataTables_paginate .paginate_button:not(.disabled):not(.active) .page-link:focus {
    border-color: var(--he-border) !important;
    background: var(--he-card-bg) !important;
    color: var(--he-fg-strong) !important;
}

.page-clientareaproducts .dataTables_wrapper .dataTables_paginate .paginate_button.active .page-link,
.page-products .dataTables_wrapper .dataTables_paginate .paginate_button.active .page-link,
body.theme-dark .dataTables_wrapper .dataTables_paginate .paginate_button.active .page-link {
    border-color: var(--he-primary) !important;
    background: rgba(52, 168, 83, 0.16) !important;
    color: var(--he-primary) !important;
}

.page-clientareaproducts .dataTables_wrapper .dataTables_paginate .paginate_button.disabled .page-link,
.page-products .dataTables_wrapper .dataTables_paginate .paginate_button.disabled .page-link,
body.theme-dark .dataTables_wrapper .dataTables_paginate .paginate_button.disabled .page-link {
    opacity: 0.62 !important;
    cursor: default !important;
    border-color: var(--he-border-soft) !important;
    background: var(--he-bg-light) !important;
    color: var(--he-fg-muted) !important;
}

@media (max-width: 991.98px) {
    body.page-clientareaproductdetails .product-dashboard-header > .row {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 767.98px) {
    body.page-clientareaproductdetails .clientarea-shell {
        padding: 10px 12px 22px !important;
    }

    body.page-clientareaproductdetails .product-dashboard-header > .row > [class*="col-"] > .row {
        grid-template-columns: 1fr !important;
    }
}

/* align33: rebuild product details rhythm and theme MarketConnect promotions */
body.page-clientareaproductdetails .product-dashboard-header {
    margin-bottom: 18px !important;
}

body.page-clientareaproductdetails .product-dashboard-header > .row {
    grid-template-columns: minmax(0, 1.62fr) minmax(300px, 0.88fr) !important;
    gap: 16px !important;
}

body.page-clientareaproductdetails .product-dashboard-header > .row > [class*="col-"] > .row {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
    gap: 16px !important;
    align-items: stretch !important;
    min-height: 0 !important;
    width: 100% !important;
}

body.page-clientareaproductdetails .product-dashboard-header > .row > [class*="col-"] > .row > [class*="col-"] {
    width: auto !important;
    max-width: none !important;
}

body.page-clientareaproductdetails .product-dashboard-header .card,
body.page-clientareaproductdetails .product-dashboard-header > .row > [class*="col-"] > .card,
body.page-clientareaproductdetails .product-dashboard-header > .row > [class*="col-"] > .row > [class*="col-"] > .card {
    min-height: 136px !important;
}

body.page-clientareaproductdetails .product-dashboard-header .card-body {
    padding: 18px !important;
}

body.page-clientareaproductdetails .product-dashboard-header .card-body.d-flex {
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 14px !important;
}

body.page-clientareaproductdetails .product-dashboard-header .card-body > .row.w-100 {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
    width: 100% !important;
    margin: 0 !important;
}

body.page-clientareaproductdetails .product-dashboard-header .card-body > .row.w-100 > [class*="col-"] {
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
}

body.page-clientareaproductdetails .product-dashboard-header .card-body > .row.w-100 .d-flex {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
}

body.page-clientareaproductdetails .product-dashboard-header .progress {
    width: 100% !important;
    height: 7px !important;
}

body.page-clientareaproductdetails .product-dashboard-header .text-right.mt-1 {
    width: 100% !important;
    margin-top: 0 !important;
    text-align: right !important;
}

body.page-clientareaproductdetails .product-dashboard-header .border-primary,
body.page-clientareaproductdetails .product-dashboard-header .border-info {
    border-color: var(--he-border-soft) !important;
}

body.page-clientareaproductdetails #btn-custom-sso-login {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    min-height: 100% !important;
    color: var(--he-fg-strong) !important;
}

body.page-clientareaproductdetails #btn-custom-sso-login .card-title {
    margin: 0 !important;
    color: var(--he-fg-strong) !important;
    font-size: 18px !important;
    font-weight: 750 !important;
}

body.page-clientareaproductdetails #btn-custom-sso-login .btn {
    width: min(260px, 100%) !important;
    min-height: 38px !important;
    margin-top: 0 !important;
}

body.page-clientareaproductdetails #promotions-slider {
    margin: 16px 0 0 !important;
}

body.page-clientareaproductdetails #promotions-slider .carousel-inner {
    border-radius: 10px !important;
    overflow: hidden !important;
}

body.page-clientareaproductdetails #promotions-slider .promo-banner,
body.page-clientareaproductdetails #promotions-slider .promo-banner-rounded {
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 1px solid var(--he-border-soft) !important;
    border-radius: 10px !important;
    background: var(--he-card-bg) !important;
    color: var(--he-fg) !important;
    box-shadow: var(--he-shadow-card) !important;
}

body.page-clientareaproductdetails #promotions-slider .promo-banner .card-body {
    display: grid !important;
    grid-template-columns: 132px minmax(0, 1fr) !important;
    gap: 18px !important;
    align-items: center !important;
    min-height: 0 !important;
    padding: 18px 20px !important;
}

body.page-clientareaproductdetails #promotions-slider .promo-banner .icon-left {
    float: none !important;
    width: 100% !important;
    min-height: 92px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid var(--he-border-soft) !important;
    border-radius: 8px !important;
    background: var(--he-bg-light) !important;
}

body.page-clientareaproductdetails #promotions-slider .promo-banner .icon-left img {
    max-width: 88px !important;
    max-height: 58px !important;
    width: auto !important;
    height: auto !important;
}

body.page-clientareaproductdetails #promotions-slider .promo-banner .content {
    width: 100% !important;
    min-height: 0 !important;
    color: var(--he-fg) !important;
}

body.page-clientareaproductdetails #promotions-slider .promo-banner h3,
body.page-clientareaproductdetails #promotions-slider .promo-banner h4 {
    margin: 0 !important;
    color: var(--he-fg-strong) !important;
}

body.page-clientareaproductdetails #promotions-slider .promo-banner h3 {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
    gap: 8px !important;
    font-size: 18px !important;
    line-height: 1.25 !important;
}

body.page-clientareaproductdetails #promotions-slider .promo-banner h3 small {
    font-size: 13px !important;
    font-weight: 600 !important;
}

body.page-clientareaproductdetails #promotions-slider .promo-banner h3 small a {
    color: var(--he-primary) !important;
}

body.page-clientareaproductdetails #promotions-slider .promo-banner h4 {
    margin-top: 4px !important;
    color: var(--he-fg-muted) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

body.page-clientareaproductdetails #promotions-slider .promo-banner ul {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px 18px !important;
    margin: 14px 0 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

body.page-clientareaproductdetails #promotions-slider .promo-banner li,
body.page-clientareaproductdetails #promotions-slider .promo-banner li.left,
body.page-clientareaproductdetails #promotions-slider .promo-banner li.right {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    color: var(--he-fg) !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
}

body.page-clientareaproductdetails #promotions-slider .promo-banner li i {
    color: var(--he-primary) !important;
    margin-right: 6px !important;
}

body.page-clientareaproductdetails #promotions-slider .promo-banner form {
    margin: 14px 0 0 !important;
}

body.page-clientareaproductdetails #promotions-slider .promo-banner .btn,
body.page-clientareaproductdetails #promotions-slider .promo-banner .btn-success {
    min-height: 36px !important;
    padding: 0 14px !important;
    border: 1px solid var(--he-border-soft) !important;
    border-radius: 8px !important;
    background: var(--he-bg-light) !important;
    color: var(--he-fg-strong) !important;
    font-weight: 750 !important;
    box-shadow: none !important;
}

body.page-clientareaproductdetails #promotions-slider .promo-banner .btn:hover,
body.page-clientareaproductdetails #promotions-slider .promo-banner .btn:focus {
    border-color: var(--he-primary) !important;
    background: var(--he-primary-muted) !important;
    color: var(--he-primary) !important;
}

@media (max-width: 991.98px) {
    body.page-clientareaproductdetails .product-dashboard-header > .row {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 767.98px) {
    body.page-clientareaproductdetails .product-dashboard-header .card-body > .row.w-100,
    body.page-clientareaproductdetails #promotions-slider .promo-banner .card-body,
    body.page-clientareaproductdetails #promotions-slider .promo-banner ul {
        grid-template-columns: 1fr !important;
    }
}

/* align34: compact service header and use the overview card's full width */
body.page-clientareaproductdetails .product-dashboard-header .card,
body.page-clientareaproductdetails .product-dashboard-header .h-100 {
    height: 146px !important;
    min-height: 146px !important;
}

body.page-clientareaproductdetails .product-dashboard-header .card-body {
    min-height: 0 !important;
    padding: 16px 18px !important;
}

body.page-clientareaproductdetails .product-dashboard-header .card-body > .row.w-100 {
    align-items: center !important;
}

body.page-clientareaproductdetails .product-dashboard-header .card-body > .row.w-100 .mb-1 {
    margin-bottom: 8px !important;
}

body.page-clientareaproductdetails #tabOverview > .card > .card-body {
    padding: 18px !important;
}

body.page-clientareaproductdetails #tabOverview .product-details > .row {
    margin: 0 !important;
}

body.page-clientareaproductdetails #tabOverview .product-details > .row > .col-md-6:first-child {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 24px !important;
    width: 100% !important;
    max-width: none !important;
    flex: 0 0 100% !important;
    padding: 0 !important;
}

body.page-clientareaproductdetails #tabOverview .product-details > .row > .col-md-6:first-child > .row.mb-2 {
    display: grid !important;
    grid-template-columns: minmax(130px, 0.62fr) minmax(0, 1fr) !important;
    align-items: center !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 10px 0 !important;
    border-bottom: 1px solid var(--he-border-soft) !important;
}

body.page-clientareaproductdetails #tabOverview .product-details > .row > .col-md-6:first-child > .row.mb-2 > [class*="col-"] {
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
}

body.page-clientareaproductdetails #tabOverview .product-details > .row > .col-md-6:first-child > .row.mb-2 .text-muted {
    color: var(--he-fg-muted) !important;
    font-size: 14px !important;
}

body.page-clientareaproductdetails #tabOverview .product-details > .row > .col-md-6:first-child > .row.mb-2 .font-weight-bold {
    color: var(--he-fg-strong) !important;
    font-size: 15px !important;
    text-align: left !important;
}

@media (max-width: 991.98px) {
    body.page-clientareaproductdetails #tabOverview .product-details > .row > .col-md-6:first-child {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 767.98px) {
    body.page-clientareaproductdetails .product-dashboard-header .card,
    body.page-clientareaproductdetails .product-dashboard-header .h-100 {
        height: auto !important;
        min-height: 132px !important;
    }

    body.page-clientareaproductdetails #tabOverview .product-details > .row > .col-md-6:first-child > .row.mb-2 {
        grid-template-columns: 1fr !important;
        gap: 4px !important;
    }
}

/* align35: neutralize legacy MarketConnect banner offsets */
body.page-clientareaproductdetails #promotions-slider .carousel-item {
    transition: none !important;
}

body.page-clientareaproductdetails #promotions-slider .carousel-item:not(.active) {
    display: none !important;
}

body.page-clientareaproductdetails #promotions-slider .carousel-item.active {
    display: block !important;
    transform: none !important;
}

body.page-clientareaproductdetails #promotions-slider .promo-banner .content {
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

/* align36: restricted hosting service state */
body.page-clientareaproductdetails .he-service-restricted {
    position: relative;
    min-height: min(620px, calc(100vh - 160px));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 16px;
}

body.page-clientareaproductdetails .he-service-restricted__scrim {
    position: absolute;
    inset: 0;
    border: 1px solid var(--he-border-soft);
    border-radius: 12px;
    background:
        linear-gradient(135deg, rgba(52, 168, 83, 0.08), transparent 42%),
        var(--he-card-bg);
    opacity: 0.84;
    box-shadow: var(--he-shadow-card);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

body.page-clientareaproductdetails .he-service-restricted__panel {
    position: relative;
    z-index: 1;
    width: min(760px, 100%);
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 22px;
    align-items: start;
    padding: 30px;
    border: 1px solid var(--he-border-soft);
    border-radius: 12px;
    background: color-mix(in srgb, var(--he-card-bg) 88%, transparent);
    color: var(--he-fg);
    box-shadow: var(--he-shadow-card);
}

body.page-clientareaproductdetails .he-service-restricted__icon {
    width: 72px;
    height: 72px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--he-border-soft);
    border-radius: 12px;
    background: var(--he-primary-muted);
    color: var(--he-primary);
    font-size: 28px;
}

body.page-clientareaproductdetails .he-service-restricted__status {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border: 1px solid var(--he-border-soft);
    border-radius: 999px;
    background: var(--he-bg-light);
    color: var(--he-fg-muted);
    font-size: 13px;
    font-weight: 750;
}

body.page-clientareaproductdetails .he-service-restricted h2 {
    margin: 14px 0 8px;
    color: var(--he-fg-strong);
    font-size: 28px;
    line-height: 1.2;
    font-weight: 800;
}

body.page-clientareaproductdetails .he-service-restricted p {
    max-width: 560px;
    margin: 0;
    color: var(--he-fg-muted);
    font-size: 15px;
    line-height: 1.7;
}

body.page-clientareaproductdetails .he-service-restricted dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 18px;
    margin: 22px 0 24px;
}

body.page-clientareaproductdetails .he-service-restricted dl > div {
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid var(--he-border-soft);
    border-radius: 8px;
    background: var(--he-bg-light);
}

body.page-clientareaproductdetails .he-service-restricted dt {
    margin: 0 0 5px;
    color: var(--he-fg-muted);
    font-size: 12px;
    font-weight: 700;
}

body.page-clientareaproductdetails .he-service-restricted dd {
    margin: 0;
    color: var(--he-fg-strong);
    font-size: 14px;
    font-weight: 750;
    word-break: break-word;
}

body.page-clientareaproductdetails .he-service-restricted__back {
    min-height: 40px;
    padding: 0 16px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

@media (max-width: 767.98px) {
    body.page-clientareaproductdetails .he-service-restricted {
        min-height: auto;
        padding: 20px 0;
    }

    body.page-clientareaproductdetails .he-service-restricted__panel {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 22px;
    }

    body.page-clientareaproductdetails .he-service-restricted dl {
        grid-template-columns: 1fr;
    }
}

/* align37: remove the outer standard cart frame */
body.page-products #order-standard_cart,
body.page-addons #order-standard_cart,
body.page-configureproductdomain #order-standard_cart,
body.page-configureproduct #order-standard_cart,
body.page-domainregister #order-standard_cart,
body.page-domain-renewals #order-standard_cart,
body.page-viewcart #order-standard_cart,
body[class*="page-"] #order-standard_cart {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.page-products #order-standard_cart,
body.page-addons #order-standard_cart,
body.page-configureproductdomain #order-standard_cart,
body.page-configureproduct #order-standard_cart,
body.page-domainregister #order-standard_cart,
body.page-domain-renewals #order-standard_cart,
body.page-viewcart #order-standard_cart {
    padding: 0 !important;
}

body.theme-dark #order-standard_cart,
html[data-theme="dark"] body #order-standard_cart {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* align38: service action layout, moving status tabs, and pagination focus */
body.page-clientareaproductdetails #tabOverview .product-details > .row:has(> .col-md-6:nth-child(2)) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 0.82fr) !important;
    gap: 22px !important;
    align-items: start !important;
    margin: 0 !important;
}

body.page-clientareaproductdetails #tabOverview .product-details > .row:has(> .col-md-6:nth-child(2)) > .col-md-6 {
    width: auto !important;
    max-width: none !important;
    flex: none !important;
    padding: 0 !important;
}

body.page-clientareaproductdetails #tabOverview .product-details > .row:has(> .col-md-6:nth-child(2)) > .col-md-6:first-child {
    display: block !important;
}

body.page-clientareaproductdetails #tabOverview .product-details > .row:has(> .col-md-6:nth-child(2)) > .col-md-6:first-child > .row.mb-2 {
    display: grid !important;
    grid-template-columns: minmax(130px, 0.62fr) minmax(0, 1fr) !important;
    align-items: center !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 10px 0 !important;
    border-bottom: 1px solid var(--he-border-soft) !important;
}

body.page-clientareaproductdetails #tabOverview .product-details > .row:has(> .col-md-6:nth-child(2)) > .col-md-6:first-child > .row.mb-2 > [class*="col-"] {
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
}

body.page-clientareaproductdetails #tabOverview .product-details > .row:has(> .col-md-6:nth-child(2)) > .col-md-6:nth-child(2) > .bg-light {
    min-height: 100% !important;
    padding: 18px !important;
    border: 1px solid var(--he-border-soft) !important;
    border-radius: 10px !important;
    background: var(--he-bg-light) !important;
    color: var(--he-fg) !important;
}

body.page-clientareaproductdetails #tabOverview .product-details > .row:has(> .col-md-6:nth-child(2)) .ssl-module-actions .btn,
body.page-clientareaproductdetails #tabOverview .product-details > .row:has(> .col-md-6:nth-child(2)) .module-client-area .btn,
body.page-clientareaproductdetails #tabOverview .product-details > .row:has(> .col-md-6:nth-child(2)) .module-client-area input[type="submit"],
body.page-clientareaproductdetails #tabOverview .product-details > .row:has(> .col-md-6:nth-child(2)) .module-client-area button {
    min-height: 38px !important;
    border-color: var(--he-border-soft) !important;
    border-radius: 8px !important;
    background: var(--he-card-bg) !important;
    color: var(--he-fg-strong) !important;
    box-shadow: none !important;
}

body.page-clientareaproductdetails #tabOverview .product-details > .row:has(> .col-md-6:nth-child(2)) .module-client-area img {
    max-width: min(100%, 320px) !important;
    height: auto !important;
}

.status-tabs {
    position: relative !important;
    isolation: isolate;
    --status-tab-x: 4px;
    --status-tab-w: 0px;
}

.status-tabs-indicator {
    position: absolute;
    z-index: 0;
    top: 4px;
    bottom: 4px;
    left: var(--status-tab-x);
    width: var(--status-tab-w);
    border-radius: 8px;
    background: color-mix(in srgb, var(--he-card-bg) 88%, var(--he-fg-strong) 12%);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 8px 20px rgba(0, 0, 0, 0.08);
    pointer-events: none;
    transition: left 0.2s ease, width 0.2s ease, background-color 0.16s ease, box-shadow 0.16s ease;
}

.status-tab {
    position: relative;
    z-index: 1;
}

.status-tab.active {
    background: transparent !important;
    box-shadow: none !important;
}

.status-tab:focus,
.status-tab:focus-visible,
.status-tab:active {
    outline: 0 !important;
    box-shadow: none !important;
}

body.theme-dark .status-tabs-indicator,
html[data-theme="dark"] body .status-tabs-indicator {
    background: color-mix(in srgb, var(--he-card-bg) 90%, var(--he-primary) 10%);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.24), 0 8px 20px rgba(0, 0, 0, 0.2);
}

.dataTables_wrapper .dataTables_paginate .paginate_button,
.dataTables_wrapper .dataTables_paginate .page-link,
.pagination .page-link,
.pagination > li > a,
.pagination > li > span {
    outline: 0 !important;
    box-shadow: none !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:focus,
.dataTables_wrapper .dataTables_paginate .paginate_button:active,
.dataTables_wrapper .dataTables_paginate .page-link:focus,
.dataTables_wrapper .dataTables_paginate .page-link:active,
.pagination .page-link:focus,
.pagination .page-link:active,
.pagination > li > a:focus,
.pagination > li > a:active {
    outline: 0 !important;
    box-shadow: none !important;
    border-color: var(--he-border-soft) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.active .page-link:focus,
.dataTables_wrapper .dataTables_paginate .paginate_button.active .page-link:active,
.pagination .page-item.active .page-link:focus,
.pagination .page-item.active .page-link:active {
    border-color: var(--he-primary) !important;
}

@media (max-width: 991.98px) {
    body.page-clientareaproductdetails #tabOverview .product-details > .row:has(> .col-md-6:nth-child(2)) {
        grid-template-columns: 1fr !important;
    }
}

/* align39: keep product-list pagination soft, without visible borders. */
.page-clientareaproducts .dataTables_wrapper .dataTables_paginate,
.page-products .dataTables_wrapper .dataTables_paginate,
.page-clientareaproducts .dataTables_wrapper .dataTables_paginate .pagination,
.page-products .dataTables_wrapper .dataTables_paginate .pagination {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

.page-clientareaproducts .dataTables_wrapper .dataTables_paginate .paginate_button,
.page-products .dataTables_wrapper .dataTables_paginate .paginate_button,
.page-clientareaproducts .dataTables_wrapper .dataTables_paginate .page-item,
.page-products .dataTables_wrapper .dataTables_paginate .page-item {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

.page-clientareaproducts .dataTables_wrapper .dataTables_paginate .paginate_button .page-link,
.page-products .dataTables_wrapper .dataTables_paginate .paginate_button .page-link,
.page-clientareaproducts .dataTables_wrapper .dataTables_paginate .pagination > li > a,
.page-products .dataTables_wrapper .dataTables_paginate .pagination > li > a,
.page-clientareaproducts .dataTables_wrapper .dataTables_paginate .pagination > li > span,
.page-products .dataTables_wrapper .dataTables_paginate .pagination > li > span {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

.page-clientareaproducts .dataTables_wrapper .dataTables_paginate .paginate_button:not(.disabled):not(.active) .page-link:hover,
.page-products .dataTables_wrapper .dataTables_paginate .paginate_button:not(.disabled):not(.active) .page-link:hover,
.page-clientareaproducts .dataTables_wrapper .dataTables_paginate .paginate_button:not(.disabled):not(.active) .page-link:focus,
.page-products .dataTables_wrapper .dataTables_paginate .paginate_button:not(.disabled):not(.active) .page-link:focus,
.page-clientareaproducts .dataTables_wrapper .dataTables_paginate .paginate_button.active .page-link,
.page-products .dataTables_wrapper .dataTables_paginate .paginate_button.active .page-link,
.page-clientareaproducts .dataTables_wrapper .dataTables_paginate .paginate_button.disabled .page-link,
.page-products .dataTables_wrapper .dataTables_paginate .paginate_button.disabled .page-link {
    border-color: transparent !important;
    box-shadow: none !important;
}

/* align40: flatten the products list outer frame; keep only internal controls visible. */
.page-clientareaproducts .services-list-table-container,
.page-clientareaproducts .primary-content .services-list-table-container {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* align41: shared client-area list frame, toolbar, pagination, and ticket hero. */
:is(.page-clientareaproducts, .page-clientareadomains, .page-managessl, .page-clientareainvoices, .page-supportticketslist) .table-container,
:is(.page-clientareaproducts, .page-clientareadomains, .page-managessl, .page-clientareainvoices, .page-supportticketslist) .primary-content .table-container {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

:is(.page-clientareaproducts, .page-clientareadomains, .page-managessl, .page-clientareainvoices, .page-supportticketslist) .dataTables_wrapper,
:is(.page-clientareaproducts, .page-clientareadomains, .page-managessl, .page-clientareainvoices, .page-supportticketslist) .listtable {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

:is(.page-clientareaproducts, .page-clientareadomains, .page-clientareainvoices, .page-supportticketslist) .table-toolbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 320px) !important;
    gap: 12px !important;
    align-items: center !important;
    margin: 0 0 14px !important;
    padding: 10px !important;
    border: 1px solid var(--he-border-soft) !important;
    border-radius: 10px !important;
    background: var(--he-bg-light) !important;
    box-shadow: none !important;
}

:is(.page-clientareaproducts, .page-clientareadomains, .page-managessl, .page-clientareainvoices, .page-supportticketslist) .dataTables_wrapper .dataTables_paginate {
    display: flex !important;
    justify-content: flex-end !important;
    width: 100% !important;
    padding: 12px 0 0 !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

:is(.page-clientareaproducts, .page-clientareadomains, .page-managessl, .page-clientareainvoices, .page-supportticketslist) .dataTables_wrapper .dataTables_paginate .pagination {
    display: inline-flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

:is(.page-clientareaproducts, .page-clientareadomains, .page-managessl, .page-clientareainvoices, .page-supportticketslist) .dataTables_wrapper .dataTables_paginate .paginate_button,
:is(.page-clientareaproducts, .page-clientareadomains, .page-managessl, .page-clientareainvoices, .page-supportticketslist) .dataTables_wrapper .dataTables_paginate .page-item {
    margin: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

:is(.page-clientareaproducts, .page-clientareadomains, .page-managessl, .page-clientareainvoices, .page-supportticketslist) .dataTables_wrapper .dataTables_paginate .page-link,
:is(.page-clientareaproducts, .page-clientareadomains, .page-managessl, .page-clientareainvoices, .page-supportticketslist) .dataTables_wrapper .dataTables_paginate .pagination > li > a,
:is(.page-clientareaproducts, .page-clientareadomains, .page-managessl, .page-clientareainvoices, .page-supportticketslist) .dataTables_wrapper .dataTables_paginate .pagination > li > span {
    min-width: 34px !important;
    min-height: 34px !important;
    padding: 0 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 8px !important;
    outline: 0 !important;
    background: var(--he-bg-light) !important;
    color: var(--he-fg-muted) !important;
    line-height: 1 !important;
    box-shadow: none !important;
}

:is(.page-clientareaproducts, .page-clientareadomains, .page-managessl, .page-clientareainvoices, .page-supportticketslist) .dataTables_wrapper .dataTables_paginate .paginate_button:not(.disabled):not(.active) .page-link:hover,
:is(.page-clientareaproducts, .page-clientareadomains, .page-managessl, .page-clientareainvoices, .page-supportticketslist) .dataTables_wrapper .dataTables_paginate .paginate_button:not(.disabled):not(.active) .page-link:focus {
    background: var(--he-card-bg) !important;
    color: var(--he-fg-strong) !important;
}

:is(.page-clientareaproducts, .page-clientareadomains, .page-managessl, .page-clientareainvoices, .page-supportticketslist) .dataTables_wrapper .dataTables_paginate .paginate_button.active .page-link {
    background: rgba(52, 168, 83, 0.16) !important;
    color: var(--he-primary) !important;
}

:is(.page-clientareaproducts, .page-clientareadomains, .page-managessl, .page-clientareainvoices, .page-supportticketslist) .dataTables_wrapper .dataTables_paginate .paginate_button.disabled .page-link {
    opacity: 0.62 !important;
    cursor: default !important;
    background: var(--he-bg-light) !important;
    color: var(--he-fg-muted) !important;
}

.page-supportticketslist .ticket-page__hero {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    margin: 0 0 20px !important;
    padding: 16px 18px !important;
    border: 1px solid var(--he-border-soft) !important;
    border-radius: 10px !important;
    background: var(--he-bg-light) !important;
    box-shadow: none !important;
}

.page-supportticketslist .ticket-page__eyebrow {
    margin: 0 0 4px !important;
    color: var(--he-fg-muted) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.page-supportticketslist .ticket-page__title {
    margin: 0 !important;
    color: var(--he-fg-strong) !important;
    font-size: 20px !important;
    font-weight: 650 !important;
    line-height: 1.3 !important;
}

.page-supportticketslist .ticket-page__desc {
    margin: 6px 0 0 !important;
    color: var(--he-fg-muted) !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}

.page-supportticketslist .ticket-page__cta {
    flex: 0 0 auto !important;
    min-height: 36px !important;
    padding: 0 14px !important;
    border-color: var(--he-dashboard-action-border) !important;
    border-radius: 8px !important;
    background: var(--he-dashboard-action-bg) !important;
    color: var(--he-dashboard-action-color) !important;
    box-shadow: none !important;
}

.page-supportticketslist .ticket-page__cta:hover,
.page-supportticketslist .ticket-page__cta:focus {
    border-color: var(--he-dashboard-action-hover-border) !important;
    background: var(--he-dashboard-action-hover-bg) !important;
    color: var(--he-dashboard-action-hover-color) !important;
    box-shadow: none !important;
}

@media (max-width: 767.98px) {
    :is(.page-clientareaproducts, .page-clientareadomains, .page-clientareainvoices, .page-supportticketslist) .table-toolbar {
        grid-template-columns: 1fr !important;
    }

    :is(.page-clientareaproducts, .page-clientareadomains, .page-managessl, .page-clientareainvoices, .page-supportticketslist) .dataTables_wrapper .dataTables_paginate {
        justify-content: flex-start !important;
    }

    :is(.page-clientareaproducts, .page-clientareadomains, .page-managessl, .page-clientareainvoices, .page-supportticketslist) .dataTables_wrapper .dataTables_paginate .pagination {
        justify-content: flex-start !important;
    }

    .page-supportticketslist .ticket-page__hero {
        align-items: stretch !important;
        flex-direction: column !important;
    }

    .page-supportticketslist .ticket-page__cta {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* align42: shared low-contrast status pills for client-area lists. */
.label.status,
span.label.status {
    --he-status-bg: color-mix(in srgb, var(--he-bg-light) 88%, var(--he-fg-muted) 12%);
    --he-status-fg: var(--he-fg-muted);
    --he-status-border: color-mix(in srgb, var(--he-border-soft) 82%, var(--he-fg-muted) 18%);
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 24px !important;
    padding: 0 10px !important;
    border: 1px solid var(--he-status-border) !important;
    border-radius: 999px !important;
    background: var(--he-status-bg) !important;
    color: var(--he-status-fg) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-shadow: none !important;
    box-shadow: none !important;
    white-space: nowrap !important;
}

.label.status-active,
.label.status-paid,
.label.status-completed {
    --he-status-bg: color-mix(in srgb, var(--he-primary) 13%, var(--he-card-bg));
    --he-status-fg: color-mix(in srgb, var(--he-primary) 68%, var(--he-fg-strong));
    --he-status-border: color-mix(in srgb, var(--he-primary) 22%, var(--he-border-soft));
    border-color: var(--he-status-border) !important;
    background: var(--he-status-bg) !important;
    color: var(--he-status-fg) !important;
}

.label.status-pending,
.label.status-open,
.label.status-customer-reply,
.label.status-custom {
    --he-status-bg: color-mix(in srgb, #2f80ed 12%, var(--he-card-bg));
    --he-status-fg: color-mix(in srgb, #2f80ed 62%, var(--he-fg-strong));
    --he-status-border: color-mix(in srgb, #2f80ed 22%, var(--he-border-soft));
    border-color: var(--he-status-border) !important;
    background: var(--he-status-bg) !important;
    color: var(--he-status-fg) !important;
}

.label.status-unpaid,
.label.status-suspended,
.label.status-expired {
    --he-status-bg: color-mix(in srgb, #d45454 11%, var(--he-card-bg));
    --he-status-fg: color-mix(in srgb, #c24545 66%, var(--he-fg-strong));
    --he-status-border: color-mix(in srgb, #d45454 22%, var(--he-border-soft));
    border-color: var(--he-status-border) !important;
    background: var(--he-status-bg) !important;
    color: var(--he-status-fg) !important;
}

.label.status-refunded,
.label.status-answered {
    --he-status-bg: color-mix(in srgb, #b98224 12%, var(--he-card-bg));
    --he-status-fg: color-mix(in srgb, #9b6d1f 68%, var(--he-fg-strong));
    --he-status-border: color-mix(in srgb, #b98224 22%, var(--he-border-soft));
    border-color: var(--he-status-border) !important;
    background: var(--he-status-bg) !important;
    color: var(--he-status-fg) !important;
}

.label.status-cancelled,
.label.status-canceled,
.label.status-terminated,
.label.status-closed,
.label.status-transferred-away {
    --he-status-bg: color-mix(in srgb, var(--he-fg-muted) 10%, var(--he-card-bg));
    --he-status-fg: var(--he-fg-muted);
    --he-status-border: color-mix(in srgb, var(--he-fg-muted) 18%, var(--he-border-soft));
    border-color: var(--he-status-border) !important;
    background: var(--he-status-bg) !important;
    color: var(--he-status-fg) !important;
}

body.theme-dark .label.status,
html[data-theme="dark"] body .label.status {
    --he-status-bg: color-mix(in srgb, var(--he-bg-light) 78%, var(--he-fg-muted) 22%);
    --he-status-fg: var(--he-fg);
    --he-status-border: color-mix(in srgb, var(--he-border-soft) 70%, var(--he-fg-muted) 30%);
}

body.theme-dark .label.status-active,
body.theme-dark .label.status-paid,
body.theme-dark .label.status-completed,
html[data-theme="dark"] body .label.status-active,
html[data-theme="dark"] body .label.status-paid,
html[data-theme="dark"] body .label.status-completed {
    --he-status-bg: color-mix(in srgb, var(--he-primary) 18%, var(--he-card-bg));
    --he-status-fg: color-mix(in srgb, var(--he-primary) 72%, var(--he-fg-strong));
    --he-status-border: color-mix(in srgb, var(--he-primary) 34%, var(--he-border-soft));
    border-color: var(--he-status-border) !important;
    background: var(--he-status-bg) !important;
    color: var(--he-status-fg) !important;
}

body.theme-dark .label.status-pending,
body.theme-dark .label.status-open,
body.theme-dark .label.status-customer-reply,
body.theme-dark .label.status-custom,
html[data-theme="dark"] body .label.status-pending,
html[data-theme="dark"] body .label.status-open,
html[data-theme="dark"] body .label.status-customer-reply,
html[data-theme="dark"] body .label.status-custom {
    --he-status-bg: color-mix(in srgb, #5da2ff 18%, var(--he-card-bg));
    --he-status-fg: color-mix(in srgb, #7bb5ff 76%, var(--he-fg-strong));
    --he-status-border: color-mix(in srgb, #5da2ff 34%, var(--he-border-soft));
    border-color: var(--he-status-border) !important;
    background: var(--he-status-bg) !important;
    color: var(--he-status-fg) !important;
}

body.theme-dark .label.status-unpaid,
body.theme-dark .label.status-suspended,
body.theme-dark .label.status-expired,
html[data-theme="dark"] body .label.status-unpaid,
html[data-theme="dark"] body .label.status-suspended,
html[data-theme="dark"] body .label.status-expired {
    --he-status-bg: color-mix(in srgb, #ff7474 16%, var(--he-card-bg));
    --he-status-fg: color-mix(in srgb, #ff8a8a 76%, var(--he-fg-strong));
    --he-status-border: color-mix(in srgb, #ff7474 32%, var(--he-border-soft));
    border-color: var(--he-status-border) !important;
    background: var(--he-status-bg) !important;
    color: var(--he-status-fg) !important;
}

body.theme-dark .label.status-refunded,
body.theme-dark .label.status-answered,
html[data-theme="dark"] body .label.status-refunded,
html[data-theme="dark"] body .label.status-answered {
    --he-status-bg: color-mix(in srgb, #d5a349 17%, var(--he-card-bg));
    --he-status-fg: color-mix(in srgb, #e5b45b 74%, var(--he-fg-strong));
    --he-status-border: color-mix(in srgb, #d5a349 32%, var(--he-border-soft));
    border-color: var(--he-status-border) !important;
    background: var(--he-status-bg) !important;
    color: var(--he-status-fg) !important;
}

/* align43: raise status-palette specificity above span.label.status defaults. */
.label.status.status-active,
.label.status.status-paid,
.label.status.status-completed {
    border-color: color-mix(in srgb, var(--he-primary) 22%, var(--he-border-soft)) !important;
    background: color-mix(in srgb, var(--he-primary) 13%, var(--he-card-bg)) !important;
    color: color-mix(in srgb, var(--he-primary) 68%, var(--he-fg-strong)) !important;
}

.label.status.status-pending,
.label.status.status-open,
.label.status.status-customer-reply,
.label.status.status-custom {
    border-color: color-mix(in srgb, #2f80ed 22%, var(--he-border-soft)) !important;
    background: color-mix(in srgb, #2f80ed 12%, var(--he-card-bg)) !important;
    color: color-mix(in srgb, #2f80ed 62%, var(--he-fg-strong)) !important;
}

.label.status.status-unpaid,
.label.status.status-suspended,
.label.status.status-expired {
    border-color: color-mix(in srgb, #d45454 22%, var(--he-border-soft)) !important;
    background: color-mix(in srgb, #d45454 11%, var(--he-card-bg)) !important;
    color: color-mix(in srgb, #c24545 66%, var(--he-fg-strong)) !important;
}

.label.status.status-refunded,
.label.status.status-answered {
    border-color: color-mix(in srgb, #b98224 22%, var(--he-border-soft)) !important;
    background: color-mix(in srgb, #b98224 12%, var(--he-card-bg)) !important;
    color: color-mix(in srgb, #9b6d1f 68%, var(--he-fg-strong)) !important;
}

.label.status.status-cancelled,
.label.status.status-canceled,
.label.status.status-terminated,
.label.status.status-closed,
.label.status.status-transferred-away {
    border-color: color-mix(in srgb, var(--he-fg-muted) 18%, var(--he-border-soft)) !important;
    background: color-mix(in srgb, var(--he-fg-muted) 10%, var(--he-card-bg)) !important;
    color: var(--he-fg-muted) !important;
}

body.theme-dark .label.status.status-active,
body.theme-dark .label.status.status-paid,
body.theme-dark .label.status.status-completed,
html[data-theme="dark"] body .label.status.status-active,
html[data-theme="dark"] body .label.status.status-paid,
html[data-theme="dark"] body .label.status.status-completed {
    border-color: color-mix(in srgb, var(--he-primary) 34%, var(--he-border-soft)) !important;
    background: color-mix(in srgb, var(--he-primary) 18%, var(--he-card-bg)) !important;
    color: color-mix(in srgb, var(--he-primary) 72%, var(--he-fg-strong)) !important;
}

body.theme-dark .label.status.status-pending,
body.theme-dark .label.status.status-open,
body.theme-dark .label.status.status-customer-reply,
body.theme-dark .label.status.status-custom,
html[data-theme="dark"] body .label.status.status-pending,
html[data-theme="dark"] body .label.status.status-open,
html[data-theme="dark"] body .label.status.status-customer-reply,
html[data-theme="dark"] body .label.status.status-custom {
    border-color: color-mix(in srgb, #5da2ff 34%, var(--he-border-soft)) !important;
    background: color-mix(in srgb, #5da2ff 18%, var(--he-card-bg)) !important;
    color: color-mix(in srgb, #7bb5ff 76%, var(--he-fg-strong)) !important;
}

body.theme-dark .label.status.status-unpaid,
body.theme-dark .label.status.status-suspended,
body.theme-dark .label.status.status-expired,
html[data-theme="dark"] body .label.status.status-unpaid,
html[data-theme="dark"] body .label.status.status-suspended,
html[data-theme="dark"] body .label.status.status-expired {
    border-color: color-mix(in srgb, #ff7474 32%, var(--he-border-soft)) !important;
    background: color-mix(in srgb, #ff7474 16%, var(--he-card-bg)) !important;
    color: color-mix(in srgb, #ff8a8a 76%, var(--he-fg-strong)) !important;
}

body.theme-dark .label.status.status-refunded,
body.theme-dark .label.status.status-answered,
html[data-theme="dark"] body .label.status.status-refunded,
html[data-theme="dark"] body .label.status.status-answered {
    border-color: color-mix(in srgb, #d5a349 32%, var(--he-border-soft)) !important;
    background: color-mix(in srgb, #d5a349 17%, var(--he-card-bg)) !important;
    color: color-mix(in srgb, #e5b45b 74%, var(--he-fg-strong)) !important;
}

/* align44: bring legacy WHMCS/Bootstrap labels into the same quiet status language. */
.label.label-default,
.label.label-primary,
.label.label-info,
.label.label-success,
.label.label-warning,
.label.label-danger,
.ticket-info-section .label[class*="ticket-status-"] {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 0 10px;
    border: 1px solid color-mix(in srgb, var(--he-fg-muted) 18%, var(--he-border-soft)) !important;
    border-radius: 999px;
    background: color-mix(in srgb, var(--he-fg-muted) 10%, var(--he-card-bg)) !important;
    color: var(--he-fg-muted) !important;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    text-shadow: none;
    box-shadow: none;
    white-space: nowrap;
}

.label.label-primary,
.label.label-info,
.ticket-info-section .label[class*="ticket-status-"] {
    border-color: color-mix(in srgb, #2f80ed 22%, var(--he-border-soft)) !important;
    background: color-mix(in srgb, #2f80ed 12%, var(--he-card-bg)) !important;
    color: color-mix(in srgb, #2f80ed 62%, var(--he-fg-strong)) !important;
}

.label.label-success {
    border-color: color-mix(in srgb, var(--he-primary) 22%, var(--he-border-soft)) !important;
    background: color-mix(in srgb, var(--he-primary) 13%, var(--he-card-bg)) !important;
    color: color-mix(in srgb, var(--he-primary) 68%, var(--he-fg-strong)) !important;
}

.label.label-warning {
    border-color: color-mix(in srgb, #b98224 22%, var(--he-border-soft)) !important;
    background: color-mix(in srgb, #b98224 12%, var(--he-card-bg)) !important;
    color: color-mix(in srgb, #9b6d1f 68%, var(--he-fg-strong)) !important;
}

.label.label-danger {
    border-color: color-mix(in srgb, #d45454 22%, var(--he-border-soft)) !important;
    background: color-mix(in srgb, #d45454 11%, var(--he-card-bg)) !important;
    color: color-mix(in srgb, #c24545 66%, var(--he-fg-strong)) !important;
}

body.theme-dark .label.label-default,
body.theme-dark .label.label-primary,
body.theme-dark .label.label-info,
body.theme-dark .label.label-success,
body.theme-dark .label.label-warning,
body.theme-dark .label.label-danger,
body.theme-dark .ticket-info-section .label[class*="ticket-status-"],
html[data-theme="dark"] body .label.label-default,
html[data-theme="dark"] body .label.label-primary,
html[data-theme="dark"] body .label.label-info,
html[data-theme="dark"] body .label.label-success,
html[data-theme="dark"] body .label.label-warning,
html[data-theme="dark"] body .label.label-danger,
html[data-theme="dark"] body .ticket-info-section .label[class*="ticket-status-"] {
    border-color: color-mix(in srgb, var(--he-border-soft) 70%, var(--he-fg-muted) 30%) !important;
    background: color-mix(in srgb, var(--he-bg-light) 78%, var(--he-fg-muted) 22%) !important;
    color: var(--he-fg) !important;
}

body.theme-dark .label.label-primary,
body.theme-dark .label.label-info,
body.theme-dark .ticket-info-section .label[class*="ticket-status-"],
html[data-theme="dark"] body .label.label-primary,
html[data-theme="dark"] body .label.label-info,
html[data-theme="dark"] body .ticket-info-section .label[class*="ticket-status-"] {
    border-color: color-mix(in srgb, #5da2ff 34%, var(--he-border-soft)) !important;
    background: color-mix(in srgb, #5da2ff 18%, var(--he-card-bg)) !important;
    color: color-mix(in srgb, #7bb5ff 76%, var(--he-fg-strong)) !important;
}

body.theme-dark .label.label-success,
html[data-theme="dark"] body .label.label-success {
    border-color: color-mix(in srgb, var(--he-primary) 34%, var(--he-border-soft)) !important;
    background: color-mix(in srgb, var(--he-primary) 18%, var(--he-card-bg)) !important;
    color: color-mix(in srgb, var(--he-primary) 72%, var(--he-fg-strong)) !important;
}

body.theme-dark .label.label-warning,
html[data-theme="dark"] body .label.label-warning {
    border-color: color-mix(in srgb, #d5a349 32%, var(--he-border-soft)) !important;
    background: color-mix(in srgb, #d5a349 17%, var(--he-card-bg)) !important;
    color: color-mix(in srgb, #e5b45b 74%, var(--he-fg-strong)) !important;
}

body.theme-dark .label.label-danger,
html[data-theme="dark"] body .label.label-danger {
    border-color: color-mix(in srgb, #ff7474 32%, var(--he-border-soft)) !important;
    background: color-mix(in srgb, #ff7474 16%, var(--he-card-bg)) !important;
    color: color-mix(in srgb, #ff8a8a 76%, var(--he-fg-strong)) !important;
}

/* align45: responsive dashboard flow, backup panel cleanup, and mobile chrome polish. */
.client-dashboard__panel-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
    align-items: start !important;
}

.client-dashboard__panel-grid[data-balanced="true"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.client-dashboard__panel-grid .dashboard-panel-column {
    display: flex !important;
    min-width: 0;
    flex-direction: column;
    gap: 18px;
}

.client-dashboard__panel-grid > .dashboard-panel-slot {
    min-width: 0;
}

.client-dashboard__panels .dashboard-panel--backup .card-body {
    padding: 10px 18px 18px;
}

.client-dashboard__panels .dashboard-panel--backup .panel-mc-sso,
.client-dashboard__panels .dashboard-panel--backup .panel-mc-sso .row,
.client-dashboard__panels .dashboard-panel--backup .panel-mc-sso [class*="col-"] {
    min-width: 0;
}

.client-dashboard__panels .dashboard-panel--backup .panel-mc-sso .row {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    margin: 0;
}

.client-dashboard__panels .dashboard-panel--backup .panel-mc-sso [class*="col-"] {
    width: auto;
    max-width: none;
    flex: none;
    padding: 0;
}

.client-dashboard__panels .dashboard-panel--backup .panel-mc-sso .text-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.client-dashboard__panels .dashboard-panel--backup .panel-mc-sso img {
    width: 64px;
    max-width: 64px;
    height: auto;
    opacity: 0.88;
}

.client-dashboard__panels .dashboard-panel--backup .panel-mc-sso form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    margin: 0;
    color: transparent;
    font-size: 0;
}

.client-dashboard__panels .dashboard-panel--backup .panel-mc-sso form::before {
    content: "选择域名";
    grid-column: 1 / -1;
    color: var(--he-fg-muted);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
}

.client-dashboard__panels .dashboard-panel--backup .panel-mc-sso input[type="hidden"] {
    display: none;
}

.client-dashboard__panels .dashboard-panel--backup .panel-mc-sso select.form-control {
    min-width: 0;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--he-border-soft);
    border-radius: 8px;
    background-color: var(--he-card-subtle);
    color: var(--he-fg-strong);
    font-size: 13px;
    box-shadow: none;
}

.client-dashboard__panels .dashboard-panel--backup .panel-mc-sso .btn-service-sso,
.client-dashboard__panels .dashboard-panel--backup .panel-mc-sso .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 72px;
    height: 38px;
    padding: 0 14px;
    border: 1px solid var(--he-border-soft);
    border-radius: 999px;
    background: var(--he-bg-light);
    color: var(--he-fg-strong);
    font-size: 13px;
    font-weight: 650;
    box-shadow: none;
}

.client-dashboard__panels .dashboard-panel--backup .panel-mc-sso .btn:hover,
.client-dashboard__panels .dashboard-panel--backup .panel-mc-sso .btn:focus {
    border-color: rgba(98, 92, 80, 0.34);
    background: var(--he-sidebar-link-hover-bg);
    color: var(--he-sidebar-link-hover);
    box-shadow: none;
}

.client-dashboard__panels .dashboard-panel--backup .panel-mc-sso .login-feedback {
    grid-column: 1 / -1;
    color: var(--he-fg-muted);
    font-size: 12px;
}

.client-dashboard__panels .dashboard-panel--backup .panel-mc-sso small {
    display: inline-flex;
    margin-top: 10px;
    color: var(--he-fg-muted);
    font-size: 12px;
    opacity: 0.78;
}

/* align46: tighten CodeGuard backup panel after visual review. */
.client-dashboard__panels .dashboard-panel--backup .card-body {
    padding: 6px 18px 18px !important;
}

.client-dashboard__panels .dashboard-panel--backup .panel-mc-sso {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

.client-dashboard__panels .dashboard-panel--backup .panel-mc-sso .row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}

.client-dashboard__panels .dashboard-panel--backup .panel-mc-sso .text-center {
    display: none !important;
}

.client-dashboard__panels .dashboard-panel--backup .panel-mc-sso img {
    width: 44px !important;
    max-width: 44px !important;
    height: auto !important;
    border-radius: 6px !important;
    opacity: 0.82 !important;
}

.client-dashboard__panels .dashboard-panel--backup .panel-mc-sso form {
    display: flex !important;
    width: 100% !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: transparent !important;
    font-size: 0 !important;
}

.client-dashboard__panels .dashboard-panel--backup .panel-mc-sso form::before {
    flex: 0 0 100% !important;
    margin: 0 0 2px !important;
    color: var(--he-fg-muted) !important;
    font-size: 12px !important;
    font-weight: 650 !important;
    letter-spacing: 0 !important;
}

.client-dashboard__panels .dashboard-panel--backup .panel-mc-sso select.form-control {
    flex: 1 1 0 !important;
    width: 100% !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    padding: 0 10px !important;
    border-radius: 7px !important;
    font-size: 13px !important;
}

.client-dashboard__panels .dashboard-panel--backup .panel-mc-sso .btn-service-sso,
.client-dashboard__panels .dashboard-panel--backup .panel-mc-sso .btn {
    flex: 0 0 76px !important;
    width: 76px !important;
    min-width: 76px !important;
    max-width: 76px !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    padding: 0 10px !important;
    border-radius: 7px !important;
    font-size: 13px !important;
}

.client-dashboard__panels .dashboard-panel--backup .panel-mc-sso .login-feedback {
    flex: 0 0 100% !important;
}

.client-dashboard__panels .dashboard-panel--backup .panel-mc-sso small {
    display: block !important;
    margin: 8px 0 0 !important;
    color: var(--he-fg-muted) !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
    text-align: left !important;
    opacity: 0.72 !important;
}

.topbar .navbar-header .he-sidebar-toggle,
#heSidebarToggle {
    display: none !important;
}

.topbar .navbar-header .mobile-sidebartoggler,
.topbar .navbar-header #mobileSidebarToggle {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: color-mix(in srgb, var(--he-fg-muted) 8%, transparent) !important;
    color: var(--he-fg-muted) !important;
    box-shadow: none !important;
}

.topbar .navbar-header .mobile-sidebartoggler i,
.topbar .navbar-header #mobileSidebarToggle i {
    font-size: 17px !important;
    line-height: 1 !important;
}

@media (max-width: 767.98px) {
    .topbar .navbar-header {
        flex: 0 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        padding: 0 8px !important;
        gap: 4px !important;
    }

    .topbar .navbar-header .navbar-brand {
        max-width: 132px !important;
        margin-left: 6px !important;
    }

    .topbar .navbar-header .navbar-brand img {
        max-width: 118px !important;
    }

    .topbar .navbar-collapse {
        display: flex !important;
        min-width: 0 !important;
        flex: 1 1 auto !important;
        justify-content: flex-end !important;
    }

    .topbar .navbar-nav.mr-auto {
        display: none !important;
    }

    .topbar .navbar-nav.my-lg-0 {
        display: flex !important;
        width: auto !important;
        min-width: 0 !important;
        margin-left: auto !important;
        align-items: center !important;
        gap: 4px !important;
    }

    .topbar .language-menu,
    .topbar .navbar-nav.my-lg-0 > .nav-item.d-flex.flex-column {
        display: none !important;
    }

    .topbar .navbar-nav.my-lg-0 .nav-link,
    .topbar .navbar-nav.my-lg-0 .he-theme-toggle {
        width: 34px !important;
        height: 34px !important;
        padding: 0 !important;
        border-radius: 999px !important;
    }

    .topbar .user-avatar-btn {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        padding: 0 !important;
        line-height: 32px !important;
    }

    .page-wrapper {
        margin-left: 0 !important;
    }

    .clientarea-shell,
    .client-dashboard.container-fluid,
    .client-dashboard {
        padding: 12px !important;
    }

    .he-dashboard-hero-card {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        min-height: 0 !important;
        padding: 16px !important;
        border-radius: 8px !important;
        box-shadow: 0 1px 2px rgba(58, 54, 45, 0.05) !important;
    }

    .he-dashboard-kicker-row {
        gap: 6px !important;
    }

    .he-dashboard-title {
        margin-top: 12px !important;
        font-size: 22px !important;
        line-height: 1.24 !important;
    }

    .he-dashboard-lead {
        margin-bottom: 14px !important;
        font-size: 14px !important;
        line-height: 1.55 !important;
    }

    .he-dashboard-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .he-dashboard-action {
        width: 100% !important;
        justify-content: center !important;
    }

    .he-dashboard-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .he-dashboard-stat-card {
        min-height: 74px !important;
        padding: 12px !important;
    }

    .client-dashboard__panel-grid,
    .client-dashboard__panel-grid[data-balanced="true"] {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .client-dashboard__panel-grid .dashboard-panel-column {
        gap: 12px !important;
    }

    .client-dashboard__panels .dashboard-panel {
        border-radius: 8px !important;
        box-shadow: 0 1px 2px rgba(58, 54, 45, 0.05) !important;
    }

    .client-dashboard__panels .dashboard-panel .card-header {
        min-height: 0 !important;
        padding: 14px 14px 6px !important;
    }

    .client-dashboard__panels .dashboard-panel .card-title {
        font-size: 16px !important;
    }

    .client-dashboard__panels .dashboard-panel .card-body {
        padding: 8px 14px 14px !important;
    }

    .client-dashboard__panels .dashboard-panel .list-group {
        padding: 4px 10px 12px !important;
    }

    .client-dashboard__panels .dashboard-panel--backup .panel-mc-sso .row {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .client-dashboard__panels .dashboard-panel--backup .panel-mc-sso .text-center {
        display: none !important;
    }

    .client-dashboard__panels .dashboard-panel--backup .panel-mc-sso form {
        display: flex !important;
        gap: 7px !important;
    }

    .client-dashboard__panels .dashboard-panel--backup .panel-mc-sso select.form-control {
        flex-basis: 100% !important;
    }

    .client-dashboard__panels .dashboard-panel--backup .panel-mc-sso .btn {
        flex-basis: 100% !important;
        width: 100% !important;
        max-width: none !important;
    }

    .client-dashboard__panels .dashboard-panel--backup .panel-mc-sso small {
        margin-left: 0 !important;
        text-align: center !important;
    }

    .dataTables_wrapper .dataTables_paginate,
    .dataTables_wrapper .dataTables_info {
        width: 100% !important;
        text-align: center !important;
    }

    .dataTables_wrapper .dataTables_paginate .pagination,
    .pagination {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 6px !important;
        margin: 12px 0 0 !important;
    }

    .pagination .page-item,
    .dataTables_wrapper .dataTables_paginate .paginate_button {
        margin: 0 !important;
    }

    .pagination .page-link,
    .pagination > li > a,
    .pagination > li > span,
    .dataTables_wrapper .dataTables_paginate .paginate_button .page-link {
        min-width: 36px !important;
        min-height: 36px !important;
        padding: 0 12px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: 0 !important;
        border-radius: 999px !important;
        background: color-mix(in srgb, var(--he-fg-muted) 8%, transparent) !important;
        color: var(--he-fg-muted) !important;
        box-shadow: none !important;
        outline: 0 !important;
    }

    .pagination .page-link:hover,
    .pagination .page-link:focus,
    .pagination .page-link:active,
    .pagination > li > a:hover,
    .pagination > li > a:focus,
    .pagination > li > a:active,
    .dataTables_wrapper .dataTables_paginate .paginate_button:not(.disabled) .page-link:hover,
    .dataTables_wrapper .dataTables_paginate .paginate_button:not(.disabled) .page-link:focus,
    .dataTables_wrapper .dataTables_paginate .paginate_button:not(.disabled) .page-link:active {
        background: color-mix(in srgb, var(--he-primary) 13%, var(--he-card-bg)) !important;
        color: var(--he-primary) !important;
        box-shadow: none !important;
        outline: 0 !important;
    }

    .pagination .page-item.active .page-link,
    .pagination .active > a,
    .dataTables_wrapper .dataTables_paginate .paginate_button.active .page-link {
        background: color-mix(in srgb, var(--he-primary) 18%, var(--he-card-bg)) !important;
        color: var(--he-primary) !important;
        font-weight: 700 !important;
    }

    .pagination .page-item.disabled .page-link,
    .pagination .disabled > a,
    .pagination .disabled > span,
    .dataTables_wrapper .dataTables_paginate .paginate_button.disabled .page-link {
        opacity: 0.5 !important;
        background: color-mix(in srgb, var(--he-fg-muted) 6%, transparent) !important;
        color: var(--he-fg-muted) !important;
    }
}

/* align47: mobile service cards and stable pagination states. */
@media (max-width: 767.98px) {
    .page-clientareaproducts .services-list-table-container,
    .page-clientareaproducts .table-container,
    .page-clientareaproducts .dataTables_wrapper {
        overflow: visible !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .page-clientareaproducts #tableServicesList,
    .page-clientareaproducts #tableServicesList thead,
    .page-clientareaproducts #tableServicesList tbody,
    .page-clientareaproducts #tableServicesList tr,
    .page-clientareaproducts #tableServicesList td {
        display: block !important;
        width: 100% !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .page-clientareaproducts #tableServicesList {
        border-collapse: separate !important;
        border-spacing: 0 !important;
    }

    .page-clientareaproducts #tableServicesList thead {
        display: none !important;
    }

    .page-clientareaproducts #tableServicesList tbody {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .page-clientareaproducts #tableServicesList tr {
        position: relative !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        border: 1px solid var(--he-border-soft) !important;
        border-radius: 10px !important;
        background: var(--he-card-bg) !important;
        box-shadow: 0 1px 2px rgba(58, 54, 45, 0.05) !important;
    }

    .page-clientareaproducts #tableServicesList td {
        min-height: 0 !important;
        padding: 10px 14px !important;
        text-align: left !important;
        box-sizing: border-box !important;
    }

    .page-clientareaproducts #tableServicesList .services-list-table__ssl-cell {
        display: none !important;
    }

    .page-clientareaproducts #tableServicesList td[data-label]::before {
        display: block !important;
        margin: 0 0 5px !important;
        color: var(--he-fg-muted) !important;
        font-size: 12px !important;
        font-weight: 650 !important;
        line-height: 1.25 !important;
        letter-spacing: 0 !important;
        content: attr(data-label) !important;
    }

    .page-clientareaproducts #tableServicesList td[data-label="SSL"]::before,
    .page-clientareaproducts #tableServicesList .services-list-table__action-cell::before {
        content: none !important;
        display: none !important;
    }

    .page-clientareaproducts #tableServicesList td:nth-child(2) {
        padding-top: 18px !important;
        padding-bottom: 14px !important;
    }

    .page-clientareaproducts #tableServicesList td:nth-child(2) strong {
        display: block !important;
        color: var(--he-fg-strong) !important;
        font-size: 16px !important;
        font-weight: 760 !important;
        line-height: 1.35 !important;
    }

    .page-clientareaproducts #tableServicesList td:nth-child(2) small {
        display: block !important;
        margin-top: 6px !important;
        color: var(--he-fg-muted) !important;
        font-size: 13px !important;
        line-height: 1.35 !important;
    }

    .page-clientareaproducts #tableServicesList td:nth-child(3),
    .page-clientareaproducts #tableServicesList td:nth-child(4),
    .page-clientareaproducts #tableServicesList td:nth-child(5) {
        display: grid !important;
        grid-template-columns: minmax(86px, 32%) minmax(0, 1fr) !important;
        column-gap: 10px !important;
        row-gap: 3px !important;
        align-items: center !important;
        padding-top: 9px !important;
        padding-bottom: 9px !important;
        border-top: 1px solid var(--he-border-soft) !important;
        background: color-mix(in srgb, var(--he-bg-light) 70%, transparent) !important;
    }

    .page-clientareaproducts #tableServicesList td:nth-child(3)::before,
    .page-clientareaproducts #tableServicesList td:nth-child(4)::before,
    .page-clientareaproducts #tableServicesList td:nth-child(5)::before {
        margin: 0 !important;
    }

    .page-clientareaproducts #tableServicesList .services-list-table__primary {
        grid-column: 2 !important;
        min-width: 0 !important;
        color: var(--he-fg-strong) !important;
        font-size: 15px !important;
        font-weight: 720 !important;
        line-height: 1.25 !important;
    }

    .page-clientareaproducts #tableServicesList .services-list-table__secondary {
        display: block !important;
        grid-column: 2 !important;
        margin: 2px 0 0 !important;
        color: var(--he-fg-muted) !important;
        font-size: 12px !important;
        line-height: 1.25 !important;
    }

    .page-clientareaproducts #tableServicesList .label.status {
        grid-column: 2 !important;
        justify-self: stretch !important;
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 30px !important;
        padding: 0 12px !important;
        border-radius: 999px !important;
    }

    .page-clientareaproducts #tableServicesList .services-list-table__action-cell {
        padding: 14px !important;
        border-top: 1px solid var(--he-border-soft) !important;
        background: color-mix(in srgb, var(--he-bg-light) 78%, transparent) !important;
    }

    .page-clientareaproducts #tableServicesList .services-list-table__action-cell .btn {
        width: 100% !important;
        min-height: 38px !important;
        border-color: var(--he-border-soft) !important;
        border-radius: 8px !important;
        background: var(--he-card-bg) !important;
        color: var(--he-fg-strong) !important;
        box-shadow: none !important;
    }

    .page-clientareaproducts .dataTables_wrapper .dataTables_paginate {
        justify-content: center !important;
        overflow: visible !important;
        padding-top: 16px !important;
    }

    .page-clientareaproducts .dataTables_wrapper .dataTables_paginate .pagination {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        gap: 6px !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding: 0 2px 2px !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .page-clientareaproducts .dataTables_wrapper .dataTables_paginate .pagination::-webkit-scrollbar {
        display: none;
    }

    .page-clientareaproducts .dataTables_wrapper .dataTables_paginate .paginate_button,
    .page-clientareaproducts .pagination .page-item {
        flex: 0 0 auto !important;
    }

    .page-clientareaproducts .dataTables_wrapper .dataTables_paginate .page-link,
    .page-clientareaproducts .pagination .page-link,
    .page-clientareaproducts .pagination > li > a,
    .page-clientareaproducts .pagination > li > span {
        min-width: 36px !important;
        min-height: 36px !important;
        height: 36px !important;
        padding: 0 10px !important;
        border-radius: 9px !important;
        white-space: nowrap !important;
        font-size: 14px !important;
    }

    .page-clientareaproducts .dataTables_wrapper .dataTables_paginate .paginate_button.previous .page-link,
    .page-clientareaproducts .dataTables_wrapper .dataTables_paginate .paginate_button.next .page-link {
        min-width: 68px !important;
        padding: 0 10px !important;
    }

    .page-clientareaproducts .dataTables_wrapper .dataTables_paginate .paginate_button:not(.active) .page-link,
    .page-clientareaproducts .pagination .page-item:not(.active) .page-link,
    .page-clientareaproducts .pagination > li:not(.active) > a {
        opacity: 1 !important;
        background: var(--he-bg-light) !important;
        color: var(--he-fg-muted) !important;
        box-shadow: none !important;
    }

    .page-clientareaproducts .dataTables_wrapper .dataTables_paginate .paginate_button:not(.active):not(.disabled) .page-link:hover,
    .page-clientareaproducts .dataTables_wrapper .dataTables_paginate .paginate_button:not(.active):not(.disabled) .page-link:focus,
    .page-clientareaproducts .dataTables_wrapper .dataTables_paginate .paginate_button:not(.active):not(.disabled) .page-link:active,
    .page-clientareaproducts .pagination .page-item:not(.active):not(.disabled) .page-link:hover,
    .page-clientareaproducts .pagination .page-item:not(.active):not(.disabled) .page-link:focus,
    .page-clientareaproducts .pagination .page-item:not(.active):not(.disabled) .page-link:active {
        opacity: 1 !important;
        background: var(--he-bg-light) !important;
        color: var(--he-fg-strong) !important;
        outline: 0 !important;
        box-shadow: none !important;
    }

    .page-clientareaproducts .dataTables_wrapper .dataTables_paginate .paginate_button.active .page-link,
    .page-clientareaproducts .pagination .page-item.active .page-link {
        opacity: 1 !important;
        background: var(--he-primary-muted) !important;
        color: var(--he-primary) !important;
        font-weight: 720 !important;
        box-shadow: none !important;
    }
}

/* align48: simplify mobile service cards by removing inner divider clutter. */
@media (max-width: 767.98px) {
    .page-clientareaproducts #tableServicesList tbody {
        gap: 14px !important;
    }

    .page-clientareaproducts #tableServicesList tr {
        gap: 10px !important;
        padding: 16px 14px !important;
        border-color: var(--he-border-soft) !important;
        border-radius: 10px !important;
        background: var(--he-card-bg) !important;
        box-shadow: 0 1px 2px rgba(58, 54, 45, 0.05) !important;
    }

    .page-clientareaproducts #tableServicesList td {
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }

    .page-clientareaproducts #tableServicesList td:nth-child(2) {
        padding: 0 0 2px !important;
    }

    .page-clientareaproducts #tableServicesList td:nth-child(3),
    .page-clientareaproducts #tableServicesList td:nth-child(4),
    .page-clientareaproducts #tableServicesList td:nth-child(5) {
        grid-template-columns: minmax(78px, 30%) minmax(0, 1fr) !important;
        min-height: 28px !important;
        padding: 0 !important;
        border-top: 0 !important;
        background: transparent !important;
    }

    .page-clientareaproducts #tableServicesList td[data-label]::before {
        color: var(--he-fg-muted) !important;
        font-size: 11px !important;
        font-weight: 650 !important;
        text-transform: uppercase !important;
    }

    .page-clientareaproducts #tableServicesList .services-list-table__primary {
        font-size: 14px !important;
        font-weight: 700 !important;
    }

    .page-clientareaproducts #tableServicesList .services-list-table__secondary {
        margin-top: 1px !important;
        font-size: 12px !important;
    }

    .page-clientareaproducts #tableServicesList .label.status {
        justify-self: start !important;
        width: auto !important;
        min-width: 120px !important;
        max-width: 100% !important;
        min-height: 28px !important;
        padding: 0 14px !important;
    }

    .page-clientareaproducts #tableServicesList .services-list-table__action-cell {
        padding: 4px 0 0 !important;
        border-top: 0 !important;
        background: transparent !important;
    }

    .page-clientareaproducts #tableServicesList .services-list-table__action-cell .btn {
        min-height: 36px !important;
        background: var(--he-bg-light) !important;
    }
}

/* align49: stronger mobile cleanup for product cards after legacy table rules. */
@media (max-width: 767.98px) {
    .page-clientareaproducts table#tableServicesList.dataTable tbody tr,
    .page-clientareaproducts table#tableServicesList tbody tr {
        overflow: hidden !important;
        gap: 10px !important;
        padding: 16px 14px !important;
        border: 1px solid var(--he-border-soft) !important;
        border-radius: 10px !important;
        background-color: var(--he-card-bg) !important;
    }

    .page-clientareaproducts table#tableServicesList.dataTable tbody tr > td,
    .page-clientareaproducts table#tableServicesList tbody tr > td {
        padding: 0 !important;
        border-top: 0 !important;
        border-right: 0 !important;
        border-bottom: 0 !important;
        border-left: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .page-clientareaproducts table#tableServicesList tbody tr > td:nth-child(2) {
        padding-bottom: 2px !important;
    }

    .page-clientareaproducts table#tableServicesList tbody tr > td:nth-child(3),
    .page-clientareaproducts table#tableServicesList tbody tr > td:nth-child(4),
    .page-clientareaproducts table#tableServicesList tbody tr > td:nth-child(5) {
        grid-template-columns: minmax(78px, 30%) minmax(0, 1fr) !important;
        min-height: 28px !important;
        align-items: center !important;
        column-gap: 10px !important;
        row-gap: 2px !important;
    }

    .page-clientareaproducts table#tableServicesList tbody tr > td[data-label]::before {
        margin: 0 !important;
        line-height: 1.25 !important;
    }

    .page-clientareaproducts table#tableServicesList tbody .services-list-table__action-cell {
        padding-top: 4px !important;
    }

    .page-clientareaproducts table#tableServicesList tbody .services-list-table__action-cell .btn {
        min-height: 36px !important;
        border-color: var(--he-border-soft) !important;
        background-color: var(--he-bg-light) !important;
    }
}

/* align50: compact mobile client lists and cart/store spacing. */
@media (max-width: 767.98px) {
    :is(.page-clientareaproducts, .page-clientareadomains, .page-clientareainvoices, .page-supportticketslist) .table-toolbar {
        gap: 8px !important;
        margin-bottom: 10px !important;
        padding: 8px !important;
        border-radius: 9px !important;
    }

    :is(.page-clientareaproducts, .page-clientareadomains, .page-clientareainvoices, .page-supportticketslist) .status-tabs {
        gap: 4px !important;
        padding: 3px !important;
    }

    :is(.page-clientareaproducts, .page-clientareadomains, .page-clientareainvoices, .page-supportticketslist) .status-tab {
        min-height: 30px !important;
        padding: 0 9px !important;
        font-size: 12px !important;
    }

    :is(.page-clientareaproducts, .page-clientareadomains, .page-clientareainvoices, .page-supportticketslist) .dataTables_filter input {
        min-height: 34px !important;
        font-size: 13px !important;
    }

    :is(.page-clientareaproducts, .page-clientareadomains, .page-clientareainvoices, .page-supportticketslist) table.table-list tbody {
        gap: 10px !important;
    }

    :is(.page-clientareaproducts, .page-clientareadomains, .page-clientareainvoices, .page-supportticketslist) table.table-list tbody tr,
    #tableDomainsList.is-mobile-card-table tbody tr,
    #tableTicketsList.is-mobile-card-table tbody tr {
        margin-bottom: 10px !important;
        padding: 14px !important;
        border-radius: 10px !important;
        box-shadow: 0 1px 2px rgba(58, 54, 45, 0.05) !important;
    }

    :is(.page-clientareaproducts, .page-clientareadomains, .page-clientareainvoices, .page-supportticketslist) table.table-list tbody tr > td,
    #tableDomainsList.is-mobile-card-table tbody tr > td,
    #tableTicketsList.is-mobile-card-table tbody tr > td {
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    :is(.page-clientareadomains, .page-clientareainvoices, .page-supportticketslist) table.table-list tbody tr > td + td,
    #tableDomainsList.is-mobile-card-table tbody tr > td + td,
    #tableTicketsList.is-mobile-card-table tbody tr > td + td {
        margin-top: 8px !important;
    }

    :is(.page-clientareaproducts, .page-clientareadomains, .page-clientareainvoices, .page-supportticketslist) table.table-list tbody td[data-label]::before,
    #tableDomainsList.is-mobile-card-table tbody td[data-label]::before,
    #tableTicketsList.is-mobile-card-table tbody td[data-label]::before {
        flex: 0 0 74px !important;
        max-width: 74px !important;
        margin: 0 !important;
        color: var(--he-fg-muted) !important;
        font-size: 11px !important;
        font-weight: 650 !important;
        line-height: 1.25 !important;
        letter-spacing: 0 !important;
        text-transform: none !important;
    }

    .page-clientareaproducts .services-list-table__action-cell,
    .page-clientareadomains .domain-list-table__action-cell,
    #tableDomainsList.is-mobile-card-table .domain-list-table__action-cell {
        display: none !important;
    }

    .page-clientareaproducts table#tableServicesList tbody tr,
    .page-clientareadomains table#tableDomainsList tbody tr,
    #tableDomainsList.is-mobile-card-table tbody tr {
        cursor: pointer !important;
    }

    .page-clientareadomains table#tableDomainsList tbody tr > td:first-child,
    #tableDomainsList.is-mobile-card-table tbody tr > td:first-child,
    .page-supportticketslist table#tableTicketsList tbody tr > td:nth-child(2),
    #tableTicketsList.is-mobile-card-table tbody tr > td:nth-child(2) {
        display: block !important;
        padding: 0 !important;
    }

    .page-clientareadomains table#tableDomainsList tbody tr > td:first-child::before,
    #tableDomainsList.is-mobile-card-table tbody tr > td:first-child::before,
    .page-supportticketslist table#tableTicketsList tbody tr > td:nth-child(2)::before,
    #tableTicketsList.is-mobile-card-table tbody tr > td:nth-child(2)::before {
        margin-bottom: 4px !important;
        max-width: none !important;
    }

    .page-clientareadomains table#tableDomainsList tbody tr > td:not(:first-child),
    #tableDomainsList.is-mobile-card-table tbody tr > td:not(:first-child),
    .page-clientareainvoices table#tableInvoicesList tbody tr > td:not(:first-child),
    .page-supportticketslist table#tableTicketsList tbody tr > td:not(:nth-child(2)),
    #tableTicketsList.is-mobile-card-table tbody tr > td:not(:nth-child(2)) {
        display: grid !important;
        grid-template-columns: minmax(74px, 28%) minmax(0, 1fr) !important;
        align-items: center !important;
        column-gap: 10px !important;
        row-gap: 2px !important;
        min-height: 24px !important;
    }

    .page-clientareainvoices table#tableInvoicesList tbody tr > td:first-child {
        display: block !important;
        padding-bottom: 2px !important;
    }

    .page-clientareainvoices table#tableInvoicesList tbody tr > td:first-child::before {
        display: block !important;
        max-width: none !important;
        margin-bottom: 4px !important;
    }

    .page-clientareainvoices table#tableInvoicesList .label.status,
    .page-clientareadomains table#tableDomainsList .label.status,
    #tableDomainsList.is-mobile-card-table .label.status,
    .page-supportticketslist table#tableTicketsList .label.status,
    #tableTicketsList.is-mobile-card-table .label.status {
        justify-self: start !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 24px !important;
        padding: 0 10px !important;
        font-size: 11px !important;
        line-height: 24px !important;
        white-space: nowrap !important;
    }

    .page-clientareadomains table#tableDomainsList tbody td:nth-child(4) i,
    #tableDomainsList.is-mobile-card-table tbody td:nth-child(4) i {
        font-size: 14px !important;
    }

    .page-supportticketslist .ticket-page__hero {
        gap: 10px !important;
        margin-bottom: 12px !important;
        padding: 12px !important;
        border-radius: 10px !important;
    }

    .page-supportticketslist .ticket-page__eyebrow {
        margin-bottom: 2px !important;
        font-size: 11px !important;
    }

    .page-supportticketslist .ticket-page__title {
        font-size: 18px !important;
    }

    .page-supportticketslist .ticket-page__desc {
        margin-top: 3px !important;
        font-size: 12px !important;
        line-height: 1.4 !important;
    }

    .page-supportticketslist .ticket-page__cta {
        width: auto !important;
        min-height: 32px !important;
        align-self: flex-start !important;
        padding: 0 12px !important;
        font-size: 12px !important;
    }

    body .store-shell {
        padding-right: max(14px, env(safe-area-inset-right)) !important;
        padding-left: max(14px, env(safe-area-inset-left)) !important;
    }

    body .store-primary-content {
        padding: 0 !important;
    }

    body #order-standard_cart {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto 18px !important;
        padding: 0 !important;
        overflow-x: hidden !important;
    }

    body #order-standard_cart > .row,
    body #order-standard_cart .cart-body > .row,
    body #order-standard_cart .products > .row,
    body #order-standard_cart .products .row.row-eq-height {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    body #order-standard_cart .cart-sidebar,
    body #order-standard_cart .cart-body,
    body #order-standard_cart .secondary-cart-body,
    body #order-standard_cart .secondary-cart-sidebar {
        width: 100% !important;
        max-width: 100% !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    body #order-standard_cart .cart-body,
    body #order-standard_cart .secondary-cart-body {
        padding: 14px !important;
        border-radius: 10px !important;
    }

    body #order-standard_cart .products {
        padding: 12px 0 !important;
    }

    body #order-standard_cart .products > .row > [class*="col-"],
    body #order-standard_cart .products .row.row-eq-height > [class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
        margin-bottom: 12px !important;
    }

    body #order-standard_cart .products .product,
    body #order-standard_cart .products .product.clearfix,
    body #order-standard_cart .view-cart-items .item,
    body #order-standard_cart .order-summary,
    body #order-standard_cart #orderSummary,
    body #order-standard_cart .view-cart-promotion-code,
    body #order-standard_cart .view-cart-gateway-checkout,
    body #order-standard_cart .already-registered,
    body #order-standard_cart .sub-heading {
        border-radius: 10px !important;
    }

    body #order-standard_cart .header-lined {
        margin-bottom: 12px !important;
    }

    body #order-standard_cart .header-lined h1,
    body #order-standard_cart h1.font-size-36 {
        font-size: 22px !important;
        line-height: 1.25 !important;
    }

    body #order-standard_cart .products .product.clearfix header,
    body #order-standard_cart .products .product.clearfix .product-desc,
    body #order-standard_cart .products .product.clearfix footer {
        padding: 12px !important;
    }

    body #order-standard_cart .view-cart-items-header {
        padding: 10px 12px !important;
        border-radius: 9px !important;
    }

    body #order-standard_cart .view-cart-items .item {
        padding: 12px !important;
    }
}

/* align51: final mobile action hiding and cart card surfaces. */
@media (max-width: 767.98px) {
    .page-clientareaproducts table#tableServicesList tbody tr > td.services-list-table__action-cell,
    .page-clientareaproducts table#tableServicesList.dataTable tbody tr > td.services-list-table__action-cell,
    .page-clientareadomains table#tableDomainsList tbody tr > td.domain-list-table__action-cell,
    .page-clientareadomains table#tableDomainsList.dataTable tbody tr > td.domain-list-table__action-cell,
    #tableDomainsList.is-mobile-card-table tbody tr > td.domain-list-table__action-cell {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    .page-clientareaproducts table#tableServicesList .label.status {
        justify-self: start !important;
        width: auto !important;
        min-width: 0 !important;
        min-height: 24px !important;
        padding: 0 10px !important;
        font-size: 11px !important;
        line-height: 24px !important;
    }

    :is(.page-clientareaproducts, .page-clientareadomains, .page-clientareainvoices, .page-supportticketslist) .client-primary-content,
    :is(.page-clientareaproducts, .page-clientareadomains, .page-clientareainvoices, .page-supportticketslist) .primary-content {
        overflow-x: hidden !important;
    }

    :is(.page-configureproductdomain, .page-configureproduct, .page-viewcart) #order-standard_cart .cart-body,
    :is(.page-configureproductdomain, .page-configureproduct, .page-viewcart) #order-standard_cart .secondary-cart-body,
    :is(.page-configureproductdomain, .page-configureproduct, .page-viewcart) #order-standard_cart .secondary-cart-sidebar {
        border: 1px solid var(--he-border-soft) !important;
        background: var(--he-card-bg) !important;
        box-shadow: 0 1px 2px rgba(58, 54, 45, 0.05) !important;
    }

    :is(.page-configureproductdomain, .page-configureproduct) #order-standard_cart .product-info,
    :is(.page-configureproductdomain, .page-configureproduct) #order-standard_cart .field-container,
    :is(.page-configureproductdomain, .page-configureproduct) #order-standard_cart .domain-selection-options .option,
    :is(.page-configureproductdomain, .page-configureproduct) #order-standard_cart .sub-heading,
    .page-viewcart #order-standard_cart .view-cart-items .item,
    .page-viewcart #order-standard_cart .view-cart-promotion-code,
    .page-viewcart #order-standard_cart .view-cart-gateway-checkout,
    .page-viewcart #order-standard_cart .order-summary,
    .page-viewcart #order-standard_cart #orderSummary {
        border: 1px solid var(--he-border-soft) !important;
        border-radius: 10px !important;
        background: var(--he-card-bg) !important;
        box-shadow: none !important;
    }

    :is(.page-configureproductdomain, .page-configureproduct) #order-standard_cart .product-info,
    :is(.page-configureproductdomain, .page-configureproduct) #order-standard_cart .field-container,
    :is(.page-configureproductdomain, .page-configureproduct) #order-standard_cart .domain-selection-options .option {
        padding: 12px !important;
    }

    :is(.page-configureproductdomain, .page-configureproduct) #order-standard_cart .sub-heading {
        margin: 14px 0 10px !important;
        padding: 10px 12px !important;
    }

    :is(.page-configureproductdomain, .page-configureproduct, .page-viewcart) #order-standard_cart .btn,
    :is(.page-configureproductdomain, .page-configureproduct, .page-viewcart) #order-standard_cart .form-control,
    :is(.page-configureproductdomain, .page-configureproduct, .page-viewcart) #order-standard_cart select,
    :is(.page-configureproductdomain, .page-configureproduct, .page-viewcart) #order-standard_cart .custom-select {
        min-height: 36px !important;
        border-radius: 9px !important;
    }
}

/* align52: denser dashboard rows and balanced mobile service cards. */
.client-dashboard__panels .dashboard-panel .list-group {
    gap: 6px !important;
    padding: 8px 10px 12px !important;
}

.client-dashboard__panels .dashboard-panel .list-group-item[data-he-compact-ready="true"],
.client-dashboard__panels .dashboard-panel .list-group-item.list-group-item-action[data-he-compact-ready="true"] {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
        "title status"
        "domain meta" !important;
    gap: 5px 10px !important;
    align-items: center !important;
    min-height: 0 !important;
    padding: 10px 12px !important;
    border: 1px solid var(--he-border-soft) !important;
    border-radius: 9px !important;
    background: color-mix(in srgb, var(--he-card-bg) 88%, var(--he-bg-light)) !important;
    box-shadow: none !important;
    line-height: 1.35 !important;
}

.client-dashboard__panels .dashboard-panel .he-dashboard-list-title {
    grid-area: title;
    min-width: 0;
    color: var(--he-fg-strong);
    font-size: 13px;
    font-weight: 720;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.client-dashboard__panels .dashboard-panel .he-dashboard-list-status {
    grid-area: status;
    justify-self: end;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 22px !important;
    margin: 0 !important;
    padding: 0 9px !important;
    float: none !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 22px !important;
    white-space: nowrap !important;
}

.client-dashboard__panels .dashboard-panel .he-dashboard-list-domain,
.client-dashboard__panels .dashboard-panel .he-dashboard-list-meta {
    min-width: 0;
    color: var(--he-fg-muted);
    font-size: 12px;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.client-dashboard__panels .dashboard-panel .he-dashboard-list-domain {
    grid-area: domain;
}

.client-dashboard__panels .dashboard-panel .he-dashboard-list-meta {
    grid-area: meta;
    justify-self: end;
    max-width: 220px;
}

@media (max-width: 767.98px) {
    .client-dashboard__panels .dashboard-panel .list-group {
        gap: 6px !important;
        padding: 6px 10px 10px !important;
    }

    .client-dashboard__panels .dashboard-panel .list-group-item[data-he-compact-ready="true"],
    .client-dashboard__panels .dashboard-panel .list-group-item.list-group-item-action[data-he-compact-ready="true"] {
        grid-template-columns: minmax(0, 1fr) auto !important;
        padding: 10px 12px !important;
        border-radius: 9px !important;
    }

    .client-dashboard__panels .dashboard-panel .he-dashboard-list-title {
        font-size: 13px !important;
    }

    .client-dashboard__panels .dashboard-panel .he-dashboard-list-domain,
    .client-dashboard__panels .dashboard-panel .he-dashboard-list-meta {
        font-size: 11px !important;
    }

    .page-clientareaproducts table#tableServicesList.dataTable tbody tr,
    .page-clientareaproducts table#tableServicesList tbody tr {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(116px, 0.7fr) !important;
        grid-template-areas:
            "service status"
            "price due" !important;
        gap: 8px 12px !important;
        padding: 12px 14px !important;
    }

    .page-clientareaproducts table#tableServicesList tbody tr > td {
        width: auto !important;
        min-width: 0 !important;
    }

    .page-clientareaproducts table#tableServicesList tbody tr > td:nth-child(2) {
        grid-area: service !important;
        align-self: start !important;
        padding: 0 !important;
    }

    .page-clientareaproducts table#tableServicesList tbody tr > td:nth-child(3) {
        grid-area: price !important;
    }

    .page-clientareaproducts table#tableServicesList tbody tr > td:nth-child(4) {
        grid-area: due !important;
    }

    .page-clientareaproducts table#tableServicesList tbody tr > td:nth-child(5) {
        grid-area: status !important;
        align-self: start !important;
        justify-self: end !important;
        display: block !important;
        min-height: 0 !important;
    }

    .page-clientareaproducts table#tableServicesList tbody tr > td:nth-child(3),
    .page-clientareaproducts table#tableServicesList tbody tr > td:nth-child(4) {
        display: block !important;
        min-height: 0 !important;
        padding: 7px 10px !important;
        border: 1px solid var(--he-border-soft) !important;
        border-radius: 8px !important;
        background: color-mix(in srgb, var(--he-bg-light) 76%, transparent) !important;
    }

    .page-clientareaproducts table#tableServicesList tbody tr > td:nth-child(5)::before {
        display: none !important;
        content: none !important;
    }

    .page-clientareaproducts table#tableServicesList tbody td[data-label]::before {
        display: block !important;
        margin: 0 0 3px !important;
        max-width: none !important;
        color: var(--he-fg-muted) !important;
        font-size: 10px !important;
        font-weight: 650 !important;
        line-height: 1.2 !important;
    }

    .page-clientareaproducts table#tableServicesList tbody tr > td:nth-child(2)::before {
        display: none !important;
        content: none !important;
    }

    .page-clientareaproducts table#tableServicesList tbody tr > td:nth-child(2) br {
        display: none !important;
    }

    .page-clientareaproducts table#tableServicesList tbody tr > td:nth-child(2) strong {
        display: block !important;
        max-width: 100% !important;
        color: var(--he-fg-strong) !important;
        font-size: 15px !important;
        font-weight: 760 !important;
        line-height: 1.3 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .page-clientareaproducts table#tableServicesList tbody tr > td:nth-child(2) small {
        display: block !important;
        margin-top: 5px !important;
        color: var(--he-fg-muted) !important;
        font-size: 12px !important;
        line-height: 1.3 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .page-clientareaproducts table#tableServicesList .services-list-table__primary {
        display: block !important;
        color: var(--he-fg-strong) !important;
        font-size: 13px !important;
        font-weight: 720 !important;
        line-height: 1.25 !important;
    }

    .page-clientareaproducts table#tableServicesList .services-list-table__secondary {
        display: block !important;
        margin-top: 2px !important;
        color: var(--he-fg-muted) !important;
        font-size: 11px !important;
        line-height: 1.25 !important;
    }
}

/* align53: compact mobile cards for related lists, product details, and cart summaries. */
@media (max-width: 767.98px) {
    .page-clientareainvoices table#tableInvoicesList tbody tr,
    .page-clientareadomains table#tableDomainsList tbody tr,
    #tableDomainsList.is-mobile-card-table tbody tr,
    .page-supportticketslist table#tableTicketsList tbody tr,
    #tableTicketsList.is-mobile-card-table tbody tr {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(116px, 0.7fr) !important;
        gap: 8px 12px !important;
        padding: 12px 14px !important;
        border: 1px solid var(--he-border-soft) !important;
        border-radius: 10px !important;
        background: var(--he-card-bg) !important;
        box-shadow: 0 1px 2px rgba(58, 54, 45, 0.05) !important;
        overflow: hidden !important;
    }

    .page-clientareainvoices table#tableInvoicesList tbody tr {
        grid-template-areas:
            "invoice status"
            "created due"
            "total total" !important;
    }

    .page-clientareadomains table#tableDomainsList tbody tr,
    #tableDomainsList.is-mobile-card-table tbody tr {
        grid-template-areas:
            "domain status"
            "due renew" !important;
    }

    .page-supportticketslist table#tableTicketsList tbody tr,
    #tableTicketsList.is-mobile-card-table tbody tr {
        grid-template-areas:
            "subject status"
            "dept updated" !important;
    }

    .page-clientareainvoices table#tableInvoicesList tbody tr > td,
    .page-clientareadomains table#tableDomainsList tbody tr > td,
    #tableDomainsList.is-mobile-card-table tbody tr > td,
    .page-supportticketslist table#tableTicketsList tbody tr > td,
    #tableTicketsList.is-mobile-card-table tbody tr > td {
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .page-clientareainvoices table#tableInvoicesList tbody tr > td:nth-child(1) { grid-area: invoice !important; }
    .page-clientareainvoices table#tableInvoicesList tbody tr > td:nth-child(2) { grid-area: created !important; }
    .page-clientareainvoices table#tableInvoicesList tbody tr > td:nth-child(3) { grid-area: due !important; }
    .page-clientareainvoices table#tableInvoicesList tbody tr > td:nth-child(4) { grid-area: total !important; }
    .page-clientareainvoices table#tableInvoicesList tbody tr > td:nth-child(5) { grid-area: status !important; }

    .page-clientareadomains table#tableDomainsList tbody tr > td:nth-child(1),
    #tableDomainsList.is-mobile-card-table tbody tr > td:nth-child(1) { grid-area: domain !important; }
    .page-clientareadomains table#tableDomainsList tbody tr > td:nth-child(2),
    #tableDomainsList.is-mobile-card-table tbody tr > td:nth-child(2) { grid-area: due !important; }
    .page-clientareadomains table#tableDomainsList tbody tr > td:nth-child(3),
    #tableDomainsList.is-mobile-card-table tbody tr > td:nth-child(3) { grid-area: status !important; }
    .page-clientareadomains table#tableDomainsList tbody tr > td:nth-child(4),
    #tableDomainsList.is-mobile-card-table tbody tr > td:nth-child(4) { grid-area: renew !important; }

    .page-supportticketslist table#tableTicketsList tbody tr > td:nth-child(1),
    #tableTicketsList.is-mobile-card-table tbody tr > td:nth-child(1) { grid-area: dept !important; }
    .page-supportticketslist table#tableTicketsList tbody tr > td:nth-child(2),
    #tableTicketsList.is-mobile-card-table tbody tr > td:nth-child(2) { grid-area: subject !important; }
    .page-supportticketslist table#tableTicketsList tbody tr > td:nth-child(3),
    #tableTicketsList.is-mobile-card-table tbody tr > td:nth-child(3) { grid-area: status !important; }
    .page-supportticketslist table#tableTicketsList tbody tr > td:nth-child(4),
    #tableTicketsList.is-mobile-card-table tbody tr > td:nth-child(4) { grid-area: updated !important; }

    .page-clientareainvoices table#tableInvoicesList tbody tr > td:nth-child(2),
    .page-clientareainvoices table#tableInvoicesList tbody tr > td:nth-child(3),
    .page-clientareainvoices table#tableInvoicesList tbody tr > td:nth-child(4),
    .page-clientareadomains table#tableDomainsList tbody tr > td:nth-child(2),
    #tableDomainsList.is-mobile-card-table tbody tr > td:nth-child(2),
    .page-clientareadomains table#tableDomainsList tbody tr > td:nth-child(4),
    #tableDomainsList.is-mobile-card-table tbody tr > td:nth-child(4),
    .page-supportticketslist table#tableTicketsList tbody tr > td:nth-child(1),
    #tableTicketsList.is-mobile-card-table tbody tr > td:nth-child(1),
    .page-supportticketslist table#tableTicketsList tbody tr > td:nth-child(4),
    #tableTicketsList.is-mobile-card-table tbody tr > td:nth-child(4) {
        display: block !important;
        min-height: 0 !important;
        padding: 7px 10px !important;
        border: 1px solid var(--he-border-soft) !important;
        border-radius: 8px !important;
        background: color-mix(in srgb, var(--he-bg-light) 76%, transparent) !important;
    }

    .page-clientareainvoices table#tableInvoicesList tbody tr > td:nth-child(1),
    .page-clientareadomains table#tableDomainsList tbody tr > td:nth-child(1),
    #tableDomainsList.is-mobile-card-table tbody tr > td:nth-child(1),
    .page-supportticketslist table#tableTicketsList tbody tr > td:nth-child(2),
    #tableTicketsList.is-mobile-card-table tbody tr > td:nth-child(2) {
        display: block !important;
        align-self: start !important;
        padding: 0 !important;
    }

    .page-clientareainvoices table#tableInvoicesList tbody tr > td:nth-child(5),
    .page-clientareadomains table#tableDomainsList tbody tr > td:nth-child(3),
    #tableDomainsList.is-mobile-card-table tbody tr > td:nth-child(3),
    .page-supportticketslist table#tableTicketsList tbody tr > td:nth-child(3),
    #tableTicketsList.is-mobile-card-table tbody tr > td:nth-child(3) {
        display: block !important;
        align-self: start !important;
        justify-self: end !important;
        min-height: 0 !important;
        text-align: right !important;
    }

    .page-clientareainvoices table#tableInvoicesList tbody tr > td:nth-child(1)::before,
    .page-clientareainvoices table#tableInvoicesList tbody tr > td:nth-child(5)::before,
    .page-clientareadomains table#tableDomainsList tbody tr > td:nth-child(1)::before,
    #tableDomainsList.is-mobile-card-table tbody tr > td:nth-child(1)::before,
    .page-clientareadomains table#tableDomainsList tbody tr > td:nth-child(3)::before,
    #tableDomainsList.is-mobile-card-table tbody tr > td:nth-child(3)::before,
    .page-supportticketslist table#tableTicketsList tbody tr > td:nth-child(2)::before,
    #tableTicketsList.is-mobile-card-table tbody tr > td:nth-child(2)::before,
    .page-supportticketslist table#tableTicketsList tbody tr > td:nth-child(3)::before,
    #tableTicketsList.is-mobile-card-table tbody tr > td:nth-child(3)::before {
        display: none !important;
        content: none !important;
    }

    .page-clientareainvoices table#tableInvoicesList tbody td[data-label]::before,
    .page-clientareadomains table#tableDomainsList tbody td[data-label]::before,
    #tableDomainsList.is-mobile-card-table tbody td[data-label]::before,
    .page-supportticketslist table#tableTicketsList tbody td[data-label]::before,
    #tableTicketsList.is-mobile-card-table tbody td[data-label]::before {
        display: block !important;
        max-width: none !important;
        margin: 0 0 3px !important;
        color: var(--he-fg-muted) !important;
        font-size: 10px !important;
        font-weight: 650 !important;
        line-height: 1.2 !important;
        letter-spacing: 0 !important;
        text-transform: none !important;
    }

    .page-clientareainvoices table#tableInvoicesList tbody tr > td:nth-child(1) strong,
    .page-clientareadomains table#tableDomainsList tbody tr > td:nth-child(1) strong,
    #tableDomainsList.is-mobile-card-table tbody tr > td:nth-child(1) strong,
    .page-supportticketslist table#tableTicketsList .ticket-subject,
    #tableTicketsList.is-mobile-card-table .ticket-subject {
        display: block !important;
        max-width: 100% !important;
        color: var(--he-fg-strong) !important;
        font-size: 15px !important;
        font-weight: 760 !important;
        line-height: 1.3 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .page-supportticketslist table#tableTicketsList .ticket-number,
    #tableTicketsList.is-mobile-card-table .ticket-number {
        display: block !important;
        margin: 0 0 4px !important;
        color: var(--he-fg-muted) !important;
        font-size: 11px !important;
        line-height: 1.25 !important;
    }

    .page-clientareainvoices table#tableInvoicesList .invoice-list-table__primary,
    .page-clientareadomains table#tableDomainsList .domain-list-table__primary,
    #tableDomainsList.is-mobile-card-table .domain-list-table__primary,
    .page-supportticketslist table#tableTicketsList .ticket-list-table__primary,
    #tableTicketsList.is-mobile-card-table .ticket-list-table__primary {
        display: block !important;
        color: var(--he-fg-strong) !important;
        font-size: 13px !important;
        font-weight: 720 !important;
        line-height: 1.25 !important;
    }

    .page-clientareadomains table#tableDomainsList tbody td:nth-child(4) i,
    #tableDomainsList.is-mobile-card-table tbody td:nth-child(4) i {
        color: var(--he-primary) !important;
        font-size: 14px !important;
    }

    body.page-clientareaproductdetails .clientarea-shell {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 10px 14px 22px !important;
        overflow-x: hidden !important;
    }

    body.page-clientareaproductdetails .clientarea-shell > .row,
    body.page-clientareaproductdetails .primary-content > .row,
    body.page-clientareaproductdetails .product-dashboard-header > .row,
    body.page-clientareaproductdetails .product-dashboard-header .row,
    body.page-clientareaproductdetails .product-details-tabs .row,
    body.page-clientareaproductdetails .tab-pane .row {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    body.page-clientareaproductdetails .primary-content,
    body.page-clientareaproductdetails .client-primary-content {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        overflow-x: hidden !important;
    }

    body.page-clientareaproductdetails .product-dashboard-header,
    body.page-clientareaproductdetails .product-details-tabs,
    body.page-clientareaproductdetails .tab-content.product-details-tabs {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    body.page-clientareaproductdetails .product-dashboard-header > .row,
    body.page-clientareaproductdetails .product-dashboard-header > .row > [class*="col-"] > .row {
        gap: 10px !important;
    }

    body.page-clientareaproductdetails .product-dashboard-header .card-body,
    body.page-clientareaproductdetails #tabOverview > .card > .card-body,
    body.page-clientareaproductdetails .product-details-tabs .card-body {
        padding: 12px !important;
    }

    body.page-configureproduct #order-standard_cart .sidebar-collapsed,
    body.page-configureproductdomain #order-standard_cart .sidebar-collapsed,
    body.page-products #order-standard_cart .sidebar-collapsed,
    body.page-viewcart #order-standard_cart .sidebar-collapsed {
        display: grid !important;
        gap: 8px !important;
        margin: 0 0 12px !important;
    }

    body #order-standard_cart .sidebar-collapsed .panel,
    body #order-standard_cart .sidebar-collapsed .card {
        margin: 0 !important;
        border: 1px solid var(--he-border-soft) !important;
        border-radius: 10px !important;
        background: var(--he-card-bg) !important;
        box-shadow: none !important;
        overflow: hidden !important;
    }

    body #order-standard_cart .sidebar-collapsed .panel-heading,
    body #order-standard_cart .sidebar-collapsed .card-header {
        min-height: 0 !important;
        padding: 9px 12px !important;
        border-bottom: 1px solid var(--he-border-soft) !important;
        background: var(--he-bg-light) !important;
    }

    body #order-standard_cart .sidebar-collapsed .panel-title {
        margin: 0 !important;
        color: var(--he-fg-strong) !important;
        font-size: 13px !important;
        font-weight: 720 !important;
        line-height: 1.25 !important;
    }

    body #order-standard_cart .sidebar-collapsed .panel-body,
    body #order-standard_cart .sidebar-collapsed .card-body {
        padding: 10px 12px !important;
    }

    body #order-standard_cart .sidebar-collapsed select.form-control,
    body #order-standard_cart .sidebar-collapsed .custom-select {
        min-height: 36px !important;
        border-radius: 9px !important;
        font-size: 13px !important;
    }

    :is(.page-configureproduct, .page-configureproductdomain) #order-standard_cart .secondary-cart-sidebar,
    :is(.page-configureproduct, .page-configureproductdomain) #order-standard_cart #orderSummary,
    :is(.page-configureproduct, .page-configureproductdomain) #order-standard_cart .order-summary {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    :is(.page-configureproduct, .page-configureproductdomain) #order-standard_cart .order-summary {
        padding: 0 !important;
        border: 1px solid var(--he-border-soft) !important;
        border-radius: 10px !important;
        background: var(--he-card-bg) !important;
        color: var(--he-fg) !important;
        box-shadow: none !important;
        overflow: hidden !important;
    }

    :is(.page-configureproduct, .page-configureproductdomain) #order-standard_cart .order-summary h2 {
        margin: 0 !important;
        padding: 11px 12px !important;
        border-bottom: 1px solid var(--he-border-soft) !important;
        background: var(--he-bg-light) !important;
        color: var(--he-fg-strong) !important;
        font-size: 16px !important;
        font-weight: 760 !important;
        line-height: 1.25 !important;
        text-align: left !important;
    }

    :is(.page-configureproduct, .page-configureproductdomain) #order-standard_cart .order-summary .summary-container {
        display: grid !important;
        gap: 7px !important;
        padding: 12px !important;
        border: 0 !important;
        background: transparent !important;
        font-size: 12px !important;
    }

    :is(.page-configureproduct, .page-configureproductdomain) #order-standard_cart .order-summary .product-name {
        display: block !important;
        color: var(--he-fg-strong) !important;
        font-size: 14px !important;
        font-weight: 760 !important;
        line-height: 1.3 !important;
        word-break: break-word !important;
    }

    :is(.page-configureproduct, .page-configureproductdomain) #order-standard_cart .order-summary .product-group {
        display: inline-flex !important;
        width: fit-content !important;
        max-width: 100% !important;
        margin: 0 0 4px !important;
        padding: 3px 8px !important;
        border: 1px solid var(--he-border-soft) !important;
        border-radius: 999px !important;
        background: var(--he-bg-light) !important;
        color: var(--he-fg-muted) !important;
        font-size: 11px !important;
        font-weight: 650 !important;
        line-height: 1.2 !important;
    }

    :is(.page-configureproduct, .page-configureproductdomain) #order-standard_cart .order-summary .clearfix {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 8px !important;
        align-items: start !important;
        min-height: 0 !important;
        padding: 7px 0 !important;
        border-bottom: 1px solid var(--he-border-soft) !important;
        color: var(--he-fg) !important;
        font-size: 12px !important;
        line-height: 1.35 !important;
    }

    :is(.page-configureproduct, .page-configureproductdomain) #order-standard_cart .order-summary .clearfix::before,
    :is(.page-configureproduct, .page-configureproductdomain) #order-standard_cart .order-summary .clearfix::after {
        display: none !important;
        content: none !important;
    }

    :is(.page-configureproduct, .page-configureproductdomain) #order-standard_cart .order-summary .pull-left,
    :is(.page-configureproduct, .page-configureproductdomain) #order-standard_cart .order-summary .float-left,
    :is(.page-configureproduct, .page-configureproductdomain) #order-standard_cart .order-summary .pull-right,
    :is(.page-configureproduct, .page-configureproductdomain) #order-standard_cart .order-summary .float-right {
        float: none !important;
        min-width: 0 !important;
        max-width: 100% !important;
        color: inherit !important;
        text-align: left !important;
        word-break: break-word !important;
    }

    :is(.page-configureproduct, .page-configureproductdomain) #order-standard_cart .order-summary .pull-right,
    :is(.page-configureproduct, .page-configureproductdomain) #order-standard_cart .order-summary .float-right {
        justify-self: end !important;
        color: var(--he-fg-strong) !important;
        font-weight: 720 !important;
        white-space: nowrap !important;
        text-align: right !important;
    }

    :is(.page-configureproduct, .page-configureproductdomain) #order-standard_cart .order-summary .summary-totals {
        margin: 2px 0 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }

    :is(.page-configureproduct, .page-configureproductdomain) #order-standard_cart .order-summary .total-due-today {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-areas: "label amount" !important;
        gap: 8px !important;
        align-items: center !important;
        margin: 8px 0 0 !important;
        padding: 12px !important;
        border: 1px solid color-mix(in srgb, var(--he-primary) 36%, var(--he-border-soft)) !important;
        border-radius: 9px !important;
        background: var(--he-primary-muted) !important;
        color: var(--he-fg-strong) !important;
    }

    :is(.page-configureproduct, .page-configureproductdomain) #order-standard_cart .order-summary .total-due-today .amt {
        grid-area: amount !important;
        color: var(--he-primary) !important;
        font-size: 18px !important;
        font-weight: 800 !important;
        line-height: 1 !important;
        text-align: right !important;
        white-space: nowrap !important;
    }

    :is(.page-configureproduct, .page-configureproductdomain) #order-standard_cart .order-summary .total-due-today span:not(.amt) {
        grid-area: label !important;
        color: var(--he-fg-muted) !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        text-align: left !important;
    }

    :is(.page-configureproduct, .page-configureproductdomain) #order-standard_cart #btnCompleteProductConfig {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        width: 100% !important;
        min-height: 42px !important;
        margin-top: 10px !important;
        padding: 0 14px !important;
        border: 1px solid var(--he-primary) !important;
        border-radius: 9px !important;
        background: var(--he-primary) !important;
        color: var(--he-primary-fg) !important;
        font-size: 14px !important;
        font-weight: 760 !important;
        box-shadow: none !important;
    }
}

/* align55: final mobile overrides after cart and list compaction. */
@media (max-width: 767.98px) {
    :is(.page-clientareaproducts, .page-clientareadomains, .page-managessl, .page-clientareainvoices, .page-supportticketslist) .dataTables_wrapper .dataTables_paginate {
        justify-content: flex-start !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }

    :is(.page-clientareaproducts, .page-clientareadomains, .page-managessl, .page-clientareainvoices, .page-supportticketslist) .dataTables_wrapper .dataTables_paginate::-webkit-scrollbar {
        display: none !important;
    }

    :is(.page-clientareaproducts, .page-clientareadomains, .page-managessl, .page-clientareainvoices, .page-supportticketslist) .dataTables_wrapper .dataTables_paginate .pagination {
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        width: max-content !important;
        max-width: none !important;
        min-width: 0 !important;
        white-space: nowrap !important;
    }

    :is(.page-clientareaproducts, .page-clientareadomains, .page-managessl, .page-clientareainvoices, .page-supportticketslist) .dataTables_wrapper .dataTables_paginate .paginate_button,
    :is(.page-clientareaproducts, .page-clientareadomains, .page-managessl, .page-clientareainvoices, .page-supportticketslist) .dataTables_wrapper .dataTables_paginate .page-item {
        flex: 0 0 auto !important;
    }

    :is(.page-clientareaproducts, .page-clientareadomains, .page-managessl, .page-clientareainvoices, .page-supportticketslist) .dataTables_wrapper .dataTables_paginate .page-link,
    :is(.page-clientareaproducts, .page-clientareadomains, .page-managessl, .page-clientareainvoices, .page-supportticketslist) .dataTables_wrapper .dataTables_paginate .pagination > li > a,
    :is(.page-clientareaproducts, .page-clientareadomains, .page-managessl, .page-clientareainvoices, .page-supportticketslist) .dataTables_wrapper .dataTables_paginate .pagination > li > span {
        min-width: 36px !important;
        min-height: 38px !important;
        padding: 0 10px !important;
        font-size: 13px !important;
        white-space: nowrap !important;
    }

    :is(.page-clientareaproducts, .page-clientareadomains, .page-managessl, .page-clientareainvoices, .page-supportticketslist) .dataTables_wrapper .dataTables_paginate .paginate_button.previous .page-link,
    :is(.page-clientareaproducts, .page-clientareadomains, .page-managessl, .page-clientareainvoices, .page-supportticketslist) .dataTables_wrapper .dataTables_paginate .paginate_button.next .page-link {
        min-width: 58px !important;
    }

    :is(.page-configureproduct, .page-configureproductdomain) #order-standard_cart #producttotal > .order-summary {
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    :is(.page-configureproduct, .page-configureproductdomain) #order-standard_cart #producttotal .product-name {
        border-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    :is(.page-configureproduct, .page-configureproductdomain) #order-standard_cart .order-summary .total-due-today,
    :is(.page-configureproduct, .page-configureproductdomain) #order-standard_cart #producttotal .total-due-today {
        border-color: color-mix(in srgb, var(--he-primary) 36%, var(--he-border-soft)) !important;
        background: var(--he-primary-muted) !important;
        color: var(--he-fg-strong) !important;
        box-shadow: none !important;
    }

    :is(.page-configureproduct, .page-configureproductdomain) #order-standard_cart .order-summary .total-due-today .amt,
    :is(.page-configureproduct, .page-configureproductdomain) #order-standard_cart #producttotal .total-due-today .amt {
        color: var(--he-primary) !important;
    }

    :is(.page-configureproduct, .page-configureproductdomain) #order-standard_cart #btnCompleteProductConfig,
    :is(.page-configureproduct, .page-configureproductdomain) #order-standard_cart .btn.btn-primary.btn-lg#btnCompleteProductConfig {
        border-color: var(--he-primary) !important;
        background: var(--he-primary) !important;
        color: var(--he-primary-fg) !important;
    }

    :is(.page-configureproduct, .page-configureproductdomain) #order-standard_cart #btnCompleteProductConfig:hover,
    :is(.page-configureproduct, .page-configureproductdomain) #order-standard_cart #btnCompleteProductConfig:focus {
        border-color: var(--he-primary-hover) !important;
        background: var(--he-primary-hover) !important;
        color: var(--he-primary-fg) !important;
    }
}

/* align56: cart configuration flow keeps the green theme on every viewport. */
:is(.page-configureproduct, .page-configureproductdomain) #order-standard_cart #producttotal .product-name {
    border-bottom-color: var(--he-primary) !important;
}

:is(.page-configureproduct, .page-configureproductdomain) #order-standard_cart .order-summary .total-due-today,
:is(.page-configureproduct, .page-configureproductdomain) #order-standard_cart #producttotal .total-due-today {
    border-color: color-mix(in srgb, var(--he-primary) 36%, var(--he-border-soft)) !important;
    background: var(--he-primary) !important;
    color: var(--he-primary-fg) !important;
    box-shadow: none !important;
}

:is(.page-configureproduct, .page-configureproductdomain) #order-standard_cart .order-summary .total-due-today .amt,
:is(.page-configureproduct, .page-configureproductdomain) #order-standard_cart #producttotal .total-due-today .amt {
    color: var(--he-primary-fg) !important;
}

:is(.page-configureproduct, .page-configureproductdomain) #order-standard_cart #btnCompleteProductConfig,
:is(.page-configureproduct, .page-configureproductdomain) #order-standard_cart .btn.btn-primary.btn-lg#btnCompleteProductConfig {
    border-color: var(--he-primary) !important;
    background: var(--he-primary) !important;
    color: var(--he-primary-fg) !important;
    box-shadow: none !important;
}

:is(.page-configureproduct, .page-configureproductdomain) #order-standard_cart #btnCompleteProductConfig:hover,
:is(.page-configureproduct, .page-configureproductdomain) #order-standard_cart #btnCompleteProductConfig:focus {
    border-color: var(--he-primary-hover) !important;
    background: var(--he-primary-hover) !important;
    color: var(--he-primary-fg) !important;
}

/* align57: ticket list desktop column balance; subject is the primary column. */
@media (min-width: 768px) {
    .page-supportticketslist table#tableTicketsList {
        width: 100% !important;
        table-layout: fixed !important;
    }

    .page-supportticketslist table#tableTicketsList thead th:nth-child(1),
    .page-supportticketslist table#tableTicketsList tbody td:nth-child(1) {
        width: 16% !important;
        white-space: nowrap !important;
    }

    .page-supportticketslist table#tableTicketsList thead th:nth-child(2),
    .page-supportticketslist table#tableTicketsList tbody td:nth-child(2) {
        width: 52% !important;
    }

    .page-supportticketslist table#tableTicketsList thead th:nth-child(3),
    .page-supportticketslist table#tableTicketsList tbody td:nth-child(3) {
        width: 12% !important;
        text-align: center !important;
    }

    .page-supportticketslist table#tableTicketsList thead th:nth-child(4),
    .page-supportticketslist table#tableTicketsList tbody td:nth-child(4) {
        width: 20% !important;
        text-align: right !important;
        white-space: nowrap !important;
    }

    .page-supportticketslist table#tableTicketsList .ticket-list-table__subject-link,
    .page-supportticketslist table#tableTicketsList .ticket-subject {
        display: block !important;
        max-width: 100% !important;
        overflow-wrap: break-word !important;
        word-break: normal !important;
    }

    .page-supportticketslist table#tableTicketsList .label.status {
        width: auto !important;
        min-width: 58px !important;
        max-width: 100% !important;
        justify-content: center !important;
        white-space: nowrap !important;
    }

    .page-supportticketslist table#tableTicketsList .ticket-list-table__primary {
        display: inline-block !important;
        width: auto !important;
        white-space: nowrap !important;
    }
}

/* align58: restore desktop sidebar collapse control and left-align the logo. */
@media (min-width: 768px) {
    body.is-logged-in .topbar .navbar-header {
        justify-content: flex-start !important;
        gap: 10px !important;
        padding: 0 12px 0 14px !important;
    }

    body.is-logged-in .topbar .navbar-header .navbar-brand {
        flex: 0 1 auto !important;
        width: auto !important;
        max-width: calc(100% - 48px) !important;
        margin: 0 auto 0 0 !important;
        padding: 0 !important;
        justify-content: flex-start !important;
    }

    body.is-logged-in .topbar .navbar-header .navbar-brand span {
        display: inline-flex !important;
        align-items: center !important;
        min-width: 0 !important;
    }

    body.is-logged-in .topbar .navbar-header .navbar-brand img {
        display: block !important;
        max-width: 142px !important;
        height: auto !important;
    }

    body.is-logged-in .topbar .navbar-header .he-sidebar-toggle,
    body.is-logged-in .topbar .navbar-header #heSidebarToggle {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 36px !important;
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 10px !important;
        background: var(--he-bg-light) !important;
        color: var(--he-fg-muted) !important;
        box-shadow: none !important;
    }

    body.is-logged-in .topbar .navbar-header .he-sidebar-toggle:hover,
    body.is-logged-in .topbar .navbar-header .he-sidebar-toggle:focus {
        background: color-mix(in srgb, var(--he-fg-muted) 10%, var(--he-bg-light)) !important;
        color: var(--he-fg) !important;
        box-shadow: none !important;
    }

    .he-sidebar-toggle-icon {
        position: relative !important;
        display: inline-block !important;
        width: 18px !important;
        height: 18px !important;
        border: 2px solid currentColor !important;
        border-radius: 4px !important;
        color: inherit !important;
        box-sizing: border-box !important;
    }

    .he-sidebar-toggle-icon::before {
        content: "" !important;
        position: absolute !important;
        top: 2px !important;
        bottom: 2px !important;
        left: 6px !important;
        width: 2px !important;
        border-radius: 2px !important;
        background: currentColor !important;
    }

    .he-sidebar-toggle-icon span {
        display: none !important;
    }

    body.he-sidebar-collapsed .topbar .navbar-header {
        justify-content: center !important;
        padding: 0 !important;
    }

    body.he-sidebar-collapsed .topbar .navbar-header .navbar-brand {
        display: none !important;
    }

body.he-sidebar-collapsed .topbar .navbar-header .he-sidebar-toggle,
    body.he-sidebar-collapsed .topbar .navbar-header #heSidebarToggle {
        margin: 0 auto !important;
    }
}

/* align59: keep login primary action on the HostEase green theme instead of legacy blue. */
body.page-login .login-action-btn,
body.page-login .login-action-btn.btn,
body.page-login .login-action-btn.btn-primary,
body.page-login button#login.btn-primary {
    border-color: var(--he-primary) !important;
    background: var(--he-primary) !important;
    color: var(--he-primary-fg, #ffffff) !important;
    box-shadow: 0 8px 18px color-mix(in srgb, var(--he-primary) 20%, transparent) !important;
}

body.page-login .login-action-btn:hover,
body.page-login .login-action-btn:focus,
body.page-login .login-action-btn.btn-primary:hover,
body.page-login .login-action-btn.btn-primary:focus,
body.page-login button#login.btn-primary:hover,
body.page-login button#login.btn-primary:focus {
    border-color: var(--he-primary-hover) !important;
    background: var(--he-primary-hover) !important;
    color: var(--he-primary-fg, #ffffff) !important;
    box-shadow: 0 10px 22px color-mix(in srgb, var(--he-primary-hover) 24%, transparent) !important;
}

/* align60: desktop cart/store routes follow the same gutter as client pages. */
@media (min-width: 768px) {
    body[class*="page-"] .store-shell {
        width: 100% !important;
        max-width: none !important;
        margin-right: auto !important;
        margin-left: auto !important;
        padding: 12px 24px 28px !important;
    }

    body[class*="page-"] .store-shell > .row {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    body[class*="page-"] .store-primary-content {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    body[class*="page-"] .store-primary-content #order-standard_cart {
        width: 100% !important;
        max-width: 1280px !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }
}

/* align61: ticket detail mobile actions and reply form controls. */
.ticket-view-page .ticket-actions {
    display: inline-flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: center !important;
}

.ticket-view-page .ticket-actions .btn,
.ticket-view-page #ticketReplyContainer .form-group.text-center .btn,
.ticket-view-page #ticketReplyContainer input[type="submit"].btn,
.ticket-view-page #ticketReplyContainer input[type="reset"].btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 36px !important;
    padding: 0 14px !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

.ticket-view-page .ticket-actions .btn-default,
.ticket-view-page #ticketReplyContainer input[type="reset"].btn-default {
    border: 1px solid var(--he-dashboard-action-border) !important;
    background: var(--he-dashboard-action-bg) !important;
    color: var(--he-dashboard-action-color) !important;
}

.ticket-view-page .ticket-actions .btn-default:hover,
.ticket-view-page .ticket-actions .btn-default:focus,
.ticket-view-page #ticketReplyContainer input[type="reset"].btn-default:hover,
.ticket-view-page #ticketReplyContainer input[type="reset"].btn-default:focus {
    border-color: var(--he-dashboard-action-hover-border) !important;
    background: var(--he-dashboard-action-hover-bg) !important;
    color: var(--he-dashboard-action-hover-color) !important;
}

.ticket-view-page .ticket-actions .btn-danger,
.ticket-view-page .ticket-actions .btn-danger[disabled] {
    border: 1px solid color-mix(in srgb, #d45454 24%, var(--he-border-soft)) !important;
    background: color-mix(in srgb, #d45454 10%, var(--he-card-bg)) !important;
    color: color-mix(in srgb, #c24545 68%, var(--he-fg-strong)) !important;
    opacity: 1 !important;
}

.ticket-view-page #ticketReplyContainer .attachment-group {
    display: flex !important;
    align-items: stretch !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
    padding: 4px !important;
    border: 1px solid var(--he-border-soft) !important;
    border-radius: 10px !important;
    background: var(--he-bg-light) !important;
    box-shadow: none !important;
}

.ticket-view-page #ticketReplyContainer .attachment-group .custom-file {
    min-width: 0 !important;
    height: 38px !important;
    flex: 1 1 auto !important;
}

.ticket-view-page #ticketReplyContainer .attachment-group .custom-file-label {
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 12px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: var(--he-card-bg) !important;
    color: var(--he-fg-muted) !important;
    line-height: 38px !important;
    box-shadow: none !important;
}

.ticket-view-page #ticketReplyContainer .attachment-group .custom-file-label::after {
    display: none !important;
}

.ticket-view-page #ticketReplyContainer .attachment-group .input-group-append {
    margin-left: 0 !important;
}

.ticket-view-page #ticketReplyContainer .attachment-group .input-group-append .btn,
.ticket-view-page #ticketReplyContainer #btnTicketAttachmentsAdd {
    min-height: 38px !important;
    padding: 0 12px !important;
    border: 1px solid var(--he-dashboard-action-border) !important;
    border-radius: 8px !important;
    background: var(--he-dashboard-action-bg) !important;
    color: var(--he-dashboard-action-color) !important;
    box-shadow: none !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
}

.ticket-view-page #ticketReplyContainer #btnTicketAttachmentsAdd:hover,
.ticket-view-page #ticketReplyContainer #btnTicketAttachmentsAdd:focus {
    border-color: var(--he-dashboard-action-hover-border) !important;
    background: var(--he-dashboard-action-hover-bg) !important;
    color: var(--he-dashboard-action-hover-color) !important;
}

.ticket-view-page #ticketReplyContainer .form-group.text-center {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    justify-content: flex-start !important;
    margin-top: 18px !important;
    text-align: left !important;
}

.ticket-view-page #ticketReplyContainer input[type="submit"].btn-primary {
    border: 1px solid var(--he-primary) !important;
    background: var(--he-primary) !important;
    color: var(--he-primary-fg) !important;
}

.ticket-view-page #ticketReplyContainer input[type="submit"].btn-primary:hover,
.ticket-view-page #ticketReplyContainer input[type="submit"].btn-primary:focus {
    border-color: var(--he-primary-hover) !important;
    background: var(--he-primary-hover) !important;
    color: var(--he-primary-fg) !important;
}

@media (max-width: 767.98px) {
    .ticket-view-page .card-title {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        align-items: stretch !important;
    }

    .ticket-view-page .ticket-actions {
        float: none !important;
        width: 100% !important;
        margin-top: 0 !important;
        flex-wrap: nowrap !important;
    }

    .ticket-view-page .ticket-actions .btn {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        padding-right: 10px !important;
        padding-left: 10px !important;
    }

    .ticket-view-page #ticketReplyContainer .attachment-group {
        gap: 6px !important;
    }

    .ticket-view-page #ticketReplyContainer #btnTicketAttachmentsAdd {
        padding-right: 10px !important;
        padding-left: 10px !important;
    }

    .ticket-view-page #ticketReplyContainer .form-group.text-center {
        flex-wrap: nowrap !important;
    }

    .ticket-view-page #ticketReplyContainer .form-group.text-center .btn {
        flex: 1 1 0 !important;
        min-width: 0 !important;
    }
}

/* align62: homepage domain captcha and actions share one compact row. */
.page-homepage .public-homepage__domain-form {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 240px) !important;
    gap: 12px !important;
    align-items: stretch !important;
    justify-content: stretch !important;
}

.page-homepage .public-homepage__domain-input {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
}

.page-homepage .public-homepage__domain-form > .text-center {
    grid-column: 1 !important;
    grid-row: 2 / span 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    align-self: stretch !important;
    text-align: left !important;
}

.page-homepage .domainchecker-homepage-captcha {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
}

.page-homepage .domainchecker-homepage-captcha #default-captcha-domainchecker {
    height: 100% !important;
}

.page-homepage .domainchecker-homepage-captcha .row {
    height: 100% !important;
    min-height: 96px !important;
}

.page-homepage #btnDomainSearch,
.page-homepage #btnDomainSearch + .btn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 0 14px !important;
}

.page-homepage #btnDomainSearch {
    grid-column: 2 !important;
    grid-row: 2 !important;
}

.page-homepage #btnDomainSearch + .btn {
    grid-column: 2 !important;
    grid-row: 3 !important;
}

@media (max-width: 767.98px) {
    .page-homepage .public-homepage__domain-form {
        grid-template-columns: 1fr !important;
    }

    .page-homepage .public-homepage__domain-input,
    .page-homepage .public-homepage__domain-form > .text-center,
    .page-homepage #btnDomainSearch,
    .page-homepage #btnDomainSearch + .btn {
        grid-column: 1 !important;
        grid-row: auto !important;
    }

    .page-homepage .domainchecker-homepage-captcha .row {
        min-height: 0 !important;
    }
}

/* align63: tighter homepage actions and shared email verification strip. */
.page-homepage #btnDomainSearch,
.page-homepage #btnDomainSearch + .btn {
    min-height: 42px !important;
    height: 42px !important;
    padding: 0 12px !important;
}

.page-homepage .domainchecker-homepage-captcha .row {
    min-height: 84px !important;
}

.page-clientareahome .email-verification,
.page-clientareaproducts .email-verification,
body .email-verification {
    width: 100% !important;
    max-width: 1280px !important;
    min-height: 0 !important;
    margin: 12px auto 14px !important;
    padding: 0 24px !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--he-fg) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}

.page-clientareahome .email-verification .container,
.page-clientareaproducts .email-verification .container,
body .email-verification .container {
    width: 100% !important;
    max-width: none !important;
    padding: 10px 12px !important;
    border: 1px solid color-mix(in srgb, #d7a642 35%, var(--he-border)) !important;
    border-radius: 10px !important;
    background: color-mix(in srgb, #d7a642 8%, var(--he-card-bg)) !important;
    box-shadow: none !important;
}

.page-clientareahome .email-verification .row,
.page-clientareaproducts .email-verification .row,
body .email-verification .row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto 32px !important;
    gap: 10px !important;
    align-items: center !important;
    min-height: 0 !important;
    margin: 0 !important;
}

.page-clientareahome .email-verification .row > [class*="col-"],
.page-clientareaproducts .email-verification .row > [class*="col-"],
body .email-verification .row > [class*="col-"] {
    width: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    padding: 0 !important;
}

.page-clientareahome .email-verification .row > .col-10,
.page-clientareaproducts .email-verification .row > .col-10,
body .email-verification .row > .col-10 {
    grid-column: 1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.page-clientareahome .email-verification .row > .col-12,
.page-clientareaproducts .email-verification .row > .col-12,
body .email-verification .row > .col-12 {
    grid-column: 2 !important;
}

.page-clientareahome .email-verification .row > .col-2,
.page-clientareaproducts .email-verification .row > .col-2,
body .email-verification .row > .col-2 {
    grid-column: 3 !important;
    justify-self: end !important;
}

.page-clientareahome .email-verification i.fa-exclamation-triangle,
.page-clientareahome .email-verification .fas.fa-exclamation-triangle,
.page-clientareaproducts .email-verification i.fa-exclamation-triangle,
.page-clientareaproducts .email-verification .fas.fa-exclamation-triangle,
body .email-verification i.fa-exclamation-triangle,
body .email-verification .fas.fa-exclamation-triangle {
    flex: 0 0 auto !important;
    margin: 0 !important;
    color: #b98224 !important;
    font-size: 15px !important;
}

.page-clientareahome .email-verification .text,
.page-clientareaproducts .email-verification .text,
body .email-verification .text {
    color: var(--he-fg) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
}

.page-clientareahome .email-verification .btn-resend-verify-email,
.page-clientareaproducts .email-verification .btn-resend-verify-email,
body .email-verification .btn-resend-verify-email {
    width: auto !important;
    min-width: 0 !important;
    min-height: 32px !important;
    height: 32px !important;
    padding: 0 12px !important;
    border: 1px solid var(--he-dashboard-action-border) !important;
    border-radius: 8px !important;
    background: var(--he-dashboard-action-bg) !important;
    color: var(--he-dashboard-action-color) !important;
    box-shadow: none !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

.page-clientareahome .email-verification .btn-resend-verify-email:hover,
.page-clientareaproducts .email-verification .btn-resend-verify-email:hover,
body .email-verification .btn-resend-verify-email:hover {
    border-color: var(--he-dashboard-action-hover-border) !important;
    background: var(--he-dashboard-action-hover-bg) !important;
    color: var(--he-dashboard-action-hover-color) !important;
}

.page-clientareahome .email-verification .btn.close,
.page-clientareaproducts .email-verification .btn.close,
body .email-verification .btn.close {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--he-fg-muted) !important;
    box-shadow: none !important;
    opacity: 1 !important;
    line-height: 1 !important;
}

@media (max-width: 767.98px) {
    .page-clientareahome .email-verification,
    .page-clientareaproducts .email-verification,
    body .email-verification {
        margin: 10px auto 12px !important;
        padding: 0 12px !important;
    }

    .page-clientareahome .email-verification .container,
    .page-clientareaproducts .email-verification .container,
    body .email-verification .container {
        padding: 10px !important;
    }

    .page-clientareahome .email-verification .row,
    .page-clientareaproducts .email-verification .row,
    body .email-verification .row {
        grid-template-columns: minmax(0, 1fr) 30px !important;
        gap: 8px !important;
    }

    .page-clientareahome .email-verification .row > .col-10,
    .page-clientareaproducts .email-verification .row > .col-10,
    body .email-verification .row > .col-10 {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    .page-clientareahome .email-verification .row > .col-2,
    .page-clientareaproducts .email-verification .row > .col-2,
    body .email-verification .row > .col-2 {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }

    .page-clientareahome .email-verification .row > .col-12,
    .page-clientareaproducts .email-verification .row > .col-12,
    body .email-verification .row > .col-12 {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
    }

    .page-clientareahome .email-verification .btn-resend-verify-email,
    .page-clientareaproducts .email-verification .btn-resend-verify-email,
    body .email-verification .btn-resend-verify-email {
        width: 100% !important;
    }
}

/* align64: keep desktop email verification content on one baseline. */
@media (min-width: 768px) {
    .page-clientareahome .email-verification .row,
    .page-clientareaproducts .email-verification .row,
    body .email-verification .row {
        grid-template-columns: minmax(0, 1fr) max-content 30px !important;
        grid-auto-flow: column !important;
    }

    .page-clientareahome .email-verification .row > .col-10,
    .page-clientareaproducts .email-verification .row > .col-10,
    body .email-verification .row > .col-10,
    .page-clientareahome .email-verification .row > .col-12,
    .page-clientareaproducts .email-verification .row > .col-12,
    body .email-verification .row > .col-12,
    .page-clientareahome .email-verification .row > .col-2,
    .page-clientareaproducts .email-verification .row > .col-2,
    body .email-verification .row > .col-2 {
        grid-row: 1 !important;
        order: 0 !important;
        align-self: center !important;
    }

    .page-clientareahome .email-verification .row > .col-10,
    .page-clientareaproducts .email-verification .row > .col-10,
    body .email-verification .row > .col-10 {
        grid-column: 1 !important;
    }

    .page-clientareahome .email-verification .row > .col-12,
    .page-clientareaproducts .email-verification .row > .col-12,
    body .email-verification .row > .col-12 {
        grid-column: 2 !important;
        justify-self: end !important;
    }

    .page-clientareahome .email-verification .row > .col-2,
    .page-clientareaproducts .email-verification .row > .col-2,
    body .email-verification .row > .col-2 {
        grid-column: 3 !important;
        justify-self: end !important;
    }
}

/* align65: compact homepage captcha structure after removing extra wrappers. */
.page-homepage .public-homepage__domain-form > .domainchecker-homepage-captcha {
    grid-column: 1 !important;
    grid-row: 2 / span 2 !important;
    align-self: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.page-homepage .domainchecker-homepage-captcha,
.page-homepage .domainchecker-homepage-captcha #default-captcha-domainchecker {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
}

.page-homepage .domainchecker-homepage-captcha #default-captcha-domainchecker > p {
    width: 100% !important;
    margin: 0 0 5px !important;
    color: var(--he-fg-muted) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.page-homepage .domainchecker-homepage-captcha .homepage-captcha-row,
.page-homepage .domainchecker-homepage-captcha .row {
    display: grid !important;
    grid-template-columns: 116px minmax(150px, 1fr) !important;
    gap: 8px !important;
    align-items: center !important;
    min-height: 48px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 6px !important;
    border: 1px solid var(--he-border-soft) !important;
    border-radius: 10px !important;
    background: var(--he-bg-light) !important;
}

.page-homepage .domainchecker-homepage-captcha .row > [class*="col-"] {
    width: auto !important;
    max-width: none !important;
    flex: none !important;
    padding: 0 !important;
}

.page-homepage .domainchecker-homepage-captcha #inputCaptchaImage {
    display: block !important;
    width: 116px !important;
    max-width: 116px !important;
    height: 34px !important;
    object-fit: contain !important;
    border-radius: 8px !important;
}

.page-homepage .domainchecker-homepage-captcha #inputCaptcha {
    width: 100% !important;
    max-width: none !important;
    min-height: 36px !important;
    height: 36px !important;
    padding: 0 10px !important;
    border-color: var(--he-border) !important;
    background: var(--he-card-bg) !important;
    color: var(--he-fg) !important;
}

.page-homepage #btnDomainSearch,
.page-homepage #btnDomainSearch + .btn {
    min-height: 40px !important;
    height: 40px !important;
}

@media (max-width: 767.98px) {
    .page-homepage .public-homepage__domain-form > .domainchecker-homepage-captcha {
        grid-column: 1 !important;
        grid-row: auto !important;
    }

    .page-homepage .domainchecker-homepage-captcha #default-captcha-domainchecker > p {
        white-space: normal !important;
    }

    .page-homepage .domainchecker-homepage-captcha .homepage-captcha-row,
    .page-homepage .domainchecker-homepage-captcha .row {
        grid-template-columns: 112px minmax(0, 1fr) !important;
    }

    .page-homepage .domainchecker-homepage-captcha #inputCaptchaImage {
        width: 112px !important;
        max-width: 112px !important;
    }
}

/* align67: lower homepage captcha/action stack height. */
.page-homepage .public-homepage__domain-form {
    gap: 8px 12px !important;
}

.page-homepage .domainchecker-homepage-captcha .homepage-captcha-row,
.page-homepage .domainchecker-homepage-captcha .row {
    grid-template-columns: 112px minmax(150px, 1fr) !important;
    min-height: 44px !important;
    padding: 5px !important;
}

.page-homepage .domainchecker-homepage-captcha #inputCaptchaImage {
    width: 112px !important;
    max-width: 112px !important;
    height: 32px !important;
}

.page-homepage .domainchecker-homepage-captcha #inputCaptcha {
    min-height: 34px !important;
    height: 34px !important;
}

.page-homepage #btnDomainSearch,
.page-homepage #btnDomainSearch + .btn {
    min-height: 36px !important;
    height: 36px !important;
}

/* align68: balanced domain forms and compact invoice summary. */
.page-homepage .domainchecker-homepage-captcha #default-captcha-domainchecker > p {
    margin-bottom: 8px !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
}

.page-homepage #btnDomainSearch,
.page-homepage #btnDomainSearch + .btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: stretch !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 12px !important;
}

.page-clientareahome .client-dashboard__panels .dashboard-panel .card-body form[action="domainchecker.php"] .input-group {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px !important;
    align-items: stretch !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.page-clientareahome .client-dashboard__panels .dashboard-panel .card-body form[action="domainchecker.php"] .form-control {
    width: 100% !important;
    min-width: 0 !important;
    height: 38px !important;
    min-height: 38px !important;
    border-radius: 8px !important;
}

.page-clientareahome .client-dashboard__panels .dashboard-panel .card-body form[action="domainchecker.php"] .input-group-btn,
.page-clientareahome .client-dashboard__panels .dashboard-panel .card-body form[action="domainchecker.php"] .input-group-append {
    display: inline-flex !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: auto !important;
    margin: 0 !important;
}

.page-clientareahome .client-dashboard__panels .dashboard-panel .card-body form[action="domainchecker.php"] .btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 38px !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
}

body.viewinvoice .invoice-container .card .table {
    margin-bottom: 0 !important;
}

body.viewinvoice .invoice-container .card .table thead td,
body.viewinvoice .invoice-container .card .table tbody td {
    padding: 10px 14px !important;
    vertical-align: middle !important;
}

body.viewinvoice .invoice-summary-panel {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 360px) !important;
    gap: 16px !important;
    align-items: start !important;
    padding: 12px 14px !important;
    border-top: 1px solid var(--he-border-soft) !important;
    background: color-mix(in srgb, var(--he-bg-light) 70%, transparent) !important;
}

body.viewinvoice .invoice-summary-title {
    color: var(--he-fg-muted) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
}

body.viewinvoice .invoice-summary-list {
    overflow: hidden !important;
    border: 1px solid var(--he-border-soft) !important;
    border-radius: 10px !important;
    background: var(--he-card-bg) !important;
}

body.viewinvoice .invoice-summary-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    min-height: 34px !important;
    padding: 7px 10px !important;
    border-bottom: 1px solid var(--he-border-soft) !important;
    color: var(--he-fg-muted) !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
}

body.viewinvoice .invoice-summary-row:last-child {
    border-bottom: 0 !important;
}

body.viewinvoice .invoice-summary-row strong {
    color: var(--he-fg-strong) !important;
    font-size: 13px !important;
    font-weight: 720 !important;
    white-space: nowrap !important;
}

body.viewinvoice .invoice-summary-row--total {
    min-height: 40px !important;
    background: var(--he-primary-muted) !important;
    color: var(--he-fg-strong) !important;
}

body.viewinvoice .invoice-summary-row--total strong {
    color: var(--he-primary) !important;
    font-size: 16px !important;
}

body.viewinvoice .transactions-container .table tbody tr:last-child td {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    background: var(--he-bg-light) !important;
}

@media (max-width: 767.98px) {
    .page-clientareahome .client-dashboard__panels .dashboard-panel .card-body form[action="domainchecker.php"] .input-group {
        grid-template-columns: 1fr !important;
    }

    .page-clientareahome .client-dashboard__panels .dashboard-panel .card-body form[action="domainchecker.php"] .input-group-btn,
    .page-clientareahome .client-dashboard__panels .dashboard-panel .card-body form[action="domainchecker.php"] .input-group-append {
        width: 100% !important;
    }

    .page-clientareahome .client-dashboard__panels .dashboard-panel .card-body form[action="domainchecker.php"] .btn {
        flex: 1 1 0 !important;
        min-width: 0 !important;
    }

    body.viewinvoice .invoice-summary-panel {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        padding: 10px !important;
    }
}

/* invoice69: tighter invoice paper, lighter sections, and denser billing metadata. */
body.viewinvoice .invoice-container {
    width: min(940px, calc(100% - 32px)) !important;
    padding: 24px 28px !important;
}

body.viewinvoice .invoice-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 18px !important;
    align-items: start !important;
    margin-bottom: 18px !important;
    padding-bottom: 18px !important;
}

body.viewinvoice .invoice-header .invoice-col {
    width: auto !important;
    max-width: none !important;
    flex: initial !important;
    padding: 0 !important;
}

body.viewinvoice .invoice-header h3 {
    margin: 0 !important;
    font-size: clamp(24px, 3.2vw, 34px) !important;
    line-height: 1.12 !important;
}

body.viewinvoice .invoice-status {
    display: flex !important;
    justify-content: flex-end !important;
    margin: 0 !important;
}

body.viewinvoice .invoice-status span {
    min-width: 86px !important;
    height: 34px !important;
    padding: 0 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

body.viewinvoice .invoice-party-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1.05fr) minmax(260px, 0.95fr) !important;
    gap: 10px 16px !important;
    margin: 0 0 18px !important;
}

body.viewinvoice .invoice-party-card {
    min-width: 0 !important;
    padding: 14px 16px !important;
    border: 1px solid var(--he-border-soft) !important;
    border-radius: 10px !important;
    background: color-mix(in srgb, var(--he-bg-light) 72%, transparent) !important;
}

body.viewinvoice .invoice-party-card--compact {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    min-height: 58px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

body.viewinvoice .invoice-party-card--right {
    text-align: right !important;
}

body.viewinvoice .invoice-party-label {
    display: block !important;
    margin-bottom: 8px !important;
    color: var(--he-fg-strong) !important;
    font-size: 12px !important;
    font-weight: 760 !important;
    letter-spacing: 0 !important;
}

body.viewinvoice .invoice-party-value {
    color: var(--he-fg-muted) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
}

body.viewinvoice .invoice-party-card address {
    margin: 0 !important;
    line-height: 1.55 !important;
}

body.viewinvoice .invoice-party-card--compact .invoice-party-label {
    margin-bottom: 0 !important;
}

body.viewinvoice .invoice-party-card [data-role="paymethod-info"] {
    display: block !important;
    color: var(--he-fg-muted) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
}

body.viewinvoice .invoice-section {
    overflow: hidden !important;
    margin-bottom: 14px !important;
    border: 1px solid var(--he-border-soft) !important;
    border-radius: 10px !important;
    background: var(--he-card-bg) !important;
}

body.viewinvoice .invoice-section-heading {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 44px !important;
    padding: 0 16px !important;
    border-bottom: 1px solid var(--he-border-soft) !important;
    background: var(--he-card-bg) !important;
}

body.viewinvoice .invoice-section-heading h3 {
    margin: 0 !important;
    color: var(--he-fg-strong) !important;
    font-size: 15px !important;
    font-weight: 760 !important;
    line-height: 1.2 !important;
}

body.viewinvoice .invoice-section .table {
    margin: 0 !important;
}

body.viewinvoice .invoice-section .table thead td {
    padding: 9px 16px !important;
    border-top: 0 !important;
    border-bottom: 1px solid var(--he-border-soft) !important;
    background: color-mix(in srgb, var(--he-bg-light) 58%, transparent) !important;
    color: var(--he-fg-muted) !important;
    font-size: 12px !important;
}

body.viewinvoice .invoice-section .table tbody td {
    padding: 11px 16px !important;
}

body.viewinvoice .invoice-summary-panel {
    grid-template-columns: minmax(0, 1fr) minmax(240px, 320px) !important;
    padding: 10px 16px 14px !important;
    background: transparent !important;
}

body.viewinvoice .transactions-container {
    overflow: hidden !important;
    margin-top: 10px !important;
    border: 1px solid var(--he-border-soft) !important;
    border-radius: 10px !important;
    background: var(--he-card-bg) !important;
}

body.viewinvoice .transactions-container .table {
    margin: 0 !important;
}

body.viewinvoice .transactions-container .table thead td,
body.viewinvoice .transactions-container .table tbody td {
    padding: 9px 12px !important;
}

@media (max-width: 767.98px) {
    body.viewinvoice .invoice-container {
        width: calc(100% - 20px) !important;
        padding: 16px !important;
    }

    body.viewinvoice .invoice-header {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin-bottom: 14px !important;
        padding-bottom: 14px !important;
    }

    body.viewinvoice .invoice-status {
        justify-content: flex-start !important;
    }

    body.viewinvoice .invoice-party-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    body.viewinvoice .invoice-party-card,
    body.viewinvoice .invoice-party-card--right {
        text-align: left !important;
    }

    body.viewinvoice .invoice-party-card--compact {
        align-items: flex-start !important;
        flex-direction: column !important;
        min-height: 0 !important;
    }

    body.viewinvoice .invoice-summary-panel {
        grid-template-columns: 1fr !important;
        padding: 10px !important;
    }
}

/* invoice70: remove legacy invoice header air and keep the invoice page compact. */
body.viewinvoice .invoice-header {
    padding-top: 0 !important;
    min-height: 0 !important;
}

body.viewinvoice .invoice-header p {
    margin: 0 0 8px !important;
    line-height: 1 !important;
}

body.viewinvoice .invoice-header img {
    width: auto !important;
    max-width: 150px !important;
    max-height: 38px !important;
    margin: 0 !important;
}

body.viewinvoice .invoice-header h3 {
    max-width: 100% !important;
}

body.viewinvoice .invoice-party-grid,
body.viewinvoice .invoice-items-section,
body.viewinvoice .transactions-container,
body.viewinvoice .invoice-toolbar {
    width: min(100%, 884px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

body.viewinvoice .invoice-party-card {
    box-shadow: none !important;
}

body.viewinvoice .invoice-summary-title {
    align-self: center !important;
}

@media (max-width: 767.98px) {
    body.viewinvoice .invoice-header img {
        max-width: 132px !important;
        max-height: 34px !important;
    }
}

/* invoice71: combine invoice meta into one right-side box and flatten totals. */
body.viewinvoice .invoice-party-grid {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 320px) !important;
    align-items: stretch !important;
}

body.viewinvoice .invoice-meta-card {
    display: grid !important;
    grid-template-rows: repeat(3, minmax(0, auto)) !important;
    gap: 0 !important;
    padding: 0 !important;
}

body.viewinvoice .invoice-meta-row {
    display: grid !important;
    grid-template-columns: minmax(70px, auto) minmax(0, 1fr) !important;
    gap: 16px !important;
    align-items: center !important;
    min-height: 54px !important;
    padding: 11px 14px !important;
    border-bottom: 1px solid var(--he-border-soft) !important;
}

body.viewinvoice .invoice-meta-row:last-child {
    border-bottom: 0 !important;
}

body.viewinvoice .invoice-meta-row .invoice-party-label {
    margin: 0 !important;
}

body.viewinvoice .invoice-meta-row address,
body.viewinvoice .invoice-meta-row [data-role="paymethod-info"],
body.viewinvoice .invoice-meta-row .invoice-party-value {
    margin: 0 !important;
    color: var(--he-fg-muted) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    text-align: right !important;
}

body.viewinvoice .invoice-summary-list {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}

body.viewinvoice .invoice-summary-row {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body.viewinvoice .invoice-summary-row:first-child {
    padding-top: 0 !important;
}

body.viewinvoice .invoice-summary-row:last-child {
    padding-bottom: 0 !important;
}

body.viewinvoice .invoice-summary-row--total {
    margin-top: 2px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    border-radius: 0 !important;
}

@media (max-width: 767.98px) {
    body.viewinvoice .invoice-party-grid {
        grid-template-columns: 1fr !important;
    }

    body.viewinvoice .invoice-meta-row {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
        min-height: 0 !important;
    }

    body.viewinvoice .invoice-meta-row address,
    body.viewinvoice .invoice-meta-row [data-role="paymethod-info"],
    body.viewinvoice .invoice-meta-row .invoice-party-value {
        text-align: left !important;
    }
}

/* invoice72: align every invoice amount to one right edge. */
body.viewinvoice .invoice-items-section .invoice-amount-heading,
body.viewinvoice .invoice-items-section .invoice-amount-cell,
body.viewinvoice .invoice-items-section .table thead td:last-child,
body.viewinvoice .invoice-items-section .table tbody td:last-child {
    width: 180px !important;
    min-width: 180px !important;
    max-width: 180px !important;
    padding-right: 32px !important;
    text-align: right !important;
    white-space: nowrap !important;
    font-variant-numeric: tabular-nums !important;
}

body.viewinvoice .invoice-summary-panel {
    grid-template-columns: minmax(0, 1fr) 320px !important;
}

body.viewinvoice .invoice-summary-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(132px, auto) !important;
    align-items: center !important;
    column-gap: 18px !important;
}

body.viewinvoice .invoice-summary-row strong {
    justify-self: end !important;
    min-width: 132px !important;
    text-align: right !important;
    font-variant-numeric: tabular-nums !important;
}

body.viewinvoice .invoice-summary-row--total strong {
    min-width: 148px !important;
}

@media (max-width: 767.98px) {
    body.viewinvoice .invoice-items-section .invoice-amount-heading,
    body.viewinvoice .invoice-items-section .invoice-amount-cell,
    body.viewinvoice .invoice-items-section .table thead td:last-child,
    body.viewinvoice .invoice-items-section .table tbody td:last-child {
        width: 126px !important;
        min-width: 126px !important;
        max-width: 126px !important;
        padding-right: 14px !important;
    }

    body.viewinvoice .invoice-summary-panel {
        grid-template-columns: 1fr !important;
    }

    body.viewinvoice .invoice-summary-row strong,
    body.viewinvoice .invoice-summary-row--total strong {
        min-width: 128px !important;
    }
}

/* invoice73: align visible amount text with the flattened summary rows. */
body.viewinvoice .invoice-items-section .invoice-amount-heading,
body.viewinvoice .invoice-items-section .invoice-amount-cell,
body.viewinvoice .invoice-items-section .table thead td:last-child,
body.viewinvoice .invoice-items-section .table tbody td:last-child {
    padding-right: 16px !important;
}

body.viewinvoice .invoice-summary-row--total {
    padding-right: 0 !important;
}

body.viewinvoice .invoice-summary-row--total strong {
    padding-right: 0 !important;
}

/* invoice74: final high-specificity amount alignment guard. */
html body.viewinvoice .invoice-items-section table.table thead tr > td.invoice-amount-heading,
html body.viewinvoice .invoice-items-section table.table tbody tr > td.invoice-amount-cell {
    padding-right: 16px !important;
    text-align: right !important;
    font-variant-numeric: tabular-nums !important;
}

html body.viewinvoice .invoice-items-section .invoice-summary-panel .invoice-summary-list > .invoice-summary-row > strong {
    justify-self: end !important;
    min-width: 132px !important;
    text-align: right !important;
    font-variant-numeric: tabular-nums !important;
}

html body.viewinvoice .invoice-items-section .invoice-summary-panel .invoice-summary-list > .invoice-summary-row.invoice-summary-row--total {
    padding-right: 0 !important;
}

html body.viewinvoice .invoice-items-section .invoice-summary-panel .invoice-summary-list > .invoice-summary-row.invoice-summary-row--total > strong {
    min-width: 132px !important;
    padding-right: 0 !important;
}

/* invoice75: keep unpaid invoice gateway controls inside the right meta box. */
html body.viewinvoice .invoice-meta-card .invoice-meta-row [data-role="paymethod-info"] {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

html body.viewinvoice .invoice-meta-card .invoice-meta-row [data-role="paymethod-info"] form {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
}

html body.viewinvoice .invoice-meta-card .invoice-meta-row [data-role="paymethod-info"] select.form-control,
html body.viewinvoice .invoice-meta-card .invoice-meta-row [data-role="paymethod-info"] select {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 34px !important;
    padding: 0 28px 0 10px !important;
    border-radius: 8px !important;
    text-align: left !important;
    text-overflow: ellipsis !important;
}

/* invoice76: use inner spacing for invoice header and summary rows. */
html body.viewinvoice .invoice-header {
    box-sizing: border-box !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
}

html body.viewinvoice .invoice-header .invoice-col:first-child {
    min-width: 0 !important;
}

html body.viewinvoice .invoice-header .invoice-col:last-child {
    min-width: 0 !important;
    align-items: flex-end !important;
}

html body.viewinvoice .invoice-header .invoice-date-due {
    margin-top: 8px !important;
    text-align: right !important;
    white-space: nowrap !important;
}

html body.viewinvoice .invoice-header .payment-btn-container {
    width: auto !important;
    max-width: 260px !important;
    margin-top: 8px !important;
}

html body.viewinvoice .invoice-header .payment-btn-container .hantepay-container {
    justify-content: flex-end !important;
}

html body.viewinvoice .invoice-header .payment-btn-container #hantepay_pay {
    min-height: 34px !important;
    padding: 0 12px !important;
    border: 1px solid var(--he-primary) !important;
    border-radius: 8px !important;
    background: var(--he-primary) !important;
    color: var(--he-primary-fg) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    box-shadow: none !important;
}

html body.viewinvoice .invoice-header .payment-btn-container #hantepay_pay:hover,
html body.viewinvoice .invoice-header .payment-btn-container #hantepay_pay:active {
    border-color: var(--he-primary) !important;
    background: var(--he-primary) !important;
    color: var(--he-primary-fg) !important;
}

html body.viewinvoice .invoice-items-section .invoice-summary-panel {
    padding-right: 0 !important;
}

html body.viewinvoice .invoice-items-section .invoice-summary-panel .invoice-summary-list > .invoice-summary-row {
    box-sizing: border-box !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
}

html body.viewinvoice .invoice-items-section .invoice-summary-panel .invoice-summary-list > .invoice-summary-row.invoice-summary-row--total {
    padding-left: 16px !important;
    padding-right: 16px !important;
}

html body.viewinvoice .invoice-items-section .invoice-summary-panel .invoice-summary-list > .invoice-summary-row > span {
    min-width: 0 !important;
}

@media (max-width: 767.98px) {
    html body.viewinvoice .invoice-header {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    html body.viewinvoice .invoice-header .invoice-col:last-child {
        align-items: flex-start !important;
    }

    html body.viewinvoice .invoice-header .invoice-date-due {
        text-align: left !important;
        white-space: normal !important;
    }

    html body.viewinvoice .invoice-header .payment-btn-container {
        width: 100% !important;
        max-width: 100% !important;
    }

    html body.viewinvoice .invoice-header .payment-btn-container .hantepay-container {
        justify-content: flex-start !important;
    }
}

/* invoice77: polish Hantepay button and let the total row meet the section edge. */
html body.viewinvoice .invoice-header .payment-btn-container #hantepay_pay {
    gap: 7px !important;
    width: auto !important;
    min-width: 112px !important;
    max-width: 180px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 14px !important;
    border: 1px solid #1677ff !important;
    border-radius: 8px !important;
    background: #1677ff !important;
    color: #fff !important;
    font-size: 0 !important;
    font-weight: 720 !important;
}

html body.viewinvoice .invoice-header .payment-btn-container #hantepay_pay img {
    display: block !important;
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    flex: 0 0 16px !important;
    object-fit: contain !important;
}

html body.viewinvoice .invoice-header .payment-btn-container #hantepay_pay::after {
    content: "\652F\4ED8\5B9D\652F\4ED8";
    font-size: 13px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

html body.viewinvoice .invoice-items-section .invoice-summary-panel {
    padding-bottom: 0 !important;
}

html body.viewinvoice .invoice-items-section .invoice-summary-panel .invoice-summary-list > .invoice-summary-row.invoice-summary-row--total {
    margin-bottom: 0 !important;
}

/* focus79: remove browser click focus rings across theme controls. */
body :where(
    .btn,
    button,
    [role="button"],
    input,
    select,
    textarea,
    .form-control,
    .page-link,
    .status-tab,
    .he-sidebar-toggle,
    #hantepay_pay
):focus,
body :where(
    .btn,
    button,
    [role="button"],
    input,
    select,
    textarea,
    .form-control,
    .page-link,
    .status-tab,
    .he-sidebar-toggle,
    #hantepay_pay
):focus-visible,
body :where(
    .btn,
    button,
    [role="button"],
    input,
    select,
    textarea,
    .form-control,
    .page-link,
    .status-tab,
    .he-sidebar-toggle,
    #hantepay_pay
):active {
    outline: 0 !important;
    box-shadow: none !important;
}

body :where(select.form-control, .form-control):focus {
    border-color: var(--he-border-soft) !important;
}

/* align80: HostEase-style sidebar panel icon, replacing font icon fallbacks. */
body.is-logged-in .topbar .navbar-header .he-sidebar-toggle,
body.is-logged-in .topbar .navbar-header #heSidebarToggle {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    flex: 0 0 32px !important;
    border: 0 !important;
    border-radius: 9px !important;
    background: color-mix(in srgb, var(--he-accent) 8%, var(--he-bg-light)) !important;
    color: var(--he-fg-muted) !important;
    box-shadow: none !important;
}

body.is-logged-in .topbar .navbar-header .he-sidebar-toggle:hover,
body.is-logged-in .topbar .navbar-header .he-sidebar-toggle:focus {
    background: color-mix(in srgb, var(--he-accent) 14%, var(--he-bg-light)) !important;
    color: var(--he-fg) !important;
    box-shadow: none !important;
}

.he-sidebar-toggle .he-sidebar-toggle-icon {
    position: relative !important;
    display: block !important;
    width: 17px !important;
    height: 17px !important;
    border: 2px solid currentColor !important;
    border-radius: 4px !important;
    color: inherit !important;
    box-sizing: border-box !important;
}

.he-sidebar-toggle .he-sidebar-toggle-icon::before {
    content: "" !important;
    position: absolute !important;
    top: 2px !important;
    bottom: 2px !important;
    left: 5px !important;
    width: 2px !important;
    border-radius: 2px !important;
    background: currentColor !important;
}

.he-sidebar-toggle .he-sidebar-toggle-icon::after {
    content: "" !important;
    position: absolute !important;
    top: 2px !important;
    bottom: 2px !important;
    left: 2px !important;
    width: 2px !important;
    border-radius: 2px !important;
    background: currentColor !important;
    opacity: 0.18 !important;
}

.he-sidebar-toggle .he-sidebar-toggle-icon span,
.he-sidebar-toggle i {
    display: none !important;
}

/* login82: neutralize Bootstrap checkbox offset so remember-me stays inside the mobile login card. */
body.page-login .login-actions {
    align-items: center !important;
}

body.page-login .login-remember {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 36px !important;
    margin: 0 !important;
    padding-left: 2px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}

body.page-login .login-remember .form-check-input,
body.page-login .login-remember input[type="checkbox"] {
    position: static !important;
    flex: 0 0 auto !important;
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    transform: none !important;
}

@media (max-width: 575.98px) {
    body.page-login .login-actions {
        gap: 12px !important;
    }

    body.page-login .login-remember {
        width: 100% !important;
        justify-content: flex-start !important;
        padding-left: 2px !important;
    }
}