/* ── Variables ─────────────────────────────────────────────────────────────── */
:root {
    color-scheme: light;
    --font: 'Inter', "Segoe UI", system-ui, -apple-system, sans-serif;
    --ink: #111827;
    --ink-body: #1f2937;
    --muted: #6b7280;
    --muted-soft: #9ca3af;
    --line: #e5e7eb;
    --line-light: #f3f4f6;
    --paper: #f8f9fa;
    --card: #ffffff;
    --black: #111827;
    --cream: #fdf8ef;
    --orange: #c05621;
    --brand: #1d4ed8;
    --brand-mid: #408dfb;
    --brand-dark: #1e3a8a;
    --brand-bg: #eff6ff;
    --brand-light: #bfdbfe;
    --blue: #1d4ed8;
    --amber: #f1b334;
    --red: #b42318;
    --shadow-xs: none;
    --shadow-sm: none;
    --shadow: none;
    --shadow-md: none;
    --shadow-lg: none;
    --shadow-xl: none;
    --radius-sm: 8px;
    --radius: 12px;
    --radius-md: 16px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --t: 160ms ease;
    --t-md: 240ms ease;

    /* Admin console theme (THEME_PLAN.md) — admin-scoped, customer site untouched */
    --admin-navy: #1a2332;
    --admin-navy-hover: #26334a;
    --admin-navy-border: #0f1722;
    --admin-blue: #408dfb;
    --admin-blue-hover: #1d4ed8;
    --admin-blue-soft: #eff6ff;
    --admin-success: #0369a1;
    --admin-success-soft: #f0f9ff;
    --admin-badge-gray: #9ca3af;
    --admin-table-head-bg: #f4f5f7;
    --admin-table-head-ink: #6b7280;
    --admin-row-hover: #eff6ff;
    --admin-sidebar-bg: #ffffff;
    --admin-sidebar-border: #e5e7eb;
    --admin-sidebar-ink: #374151;
    --admin-sidebar-muted: #6b7280;
    --admin-sidebar-hover: #f3f4f6;
}

/* ── Reset & Base ──────────────────────────────────────────────────────────── */
*,
::before,
::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    margin: 0;
    color: var(--ink-body);
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.6;
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font: inherit;
    cursor: pointer;
}

input,
select,
textarea {
    font-family: inherit;
    font-size: inherit;
    font-weight: 400;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ── Accessibility ─────────────────────────────────────────────────────────── */
.skip-link {
    position: absolute;
    top: -100%;
    left: 16px;
    z-index: 200;
    padding: 10px 18px;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    color: #fff;
    background: var(--brand);
    font-weight: 700;
    font-size: 0.875rem;
    transition: top 180ms ease;
}

.skip-link:focus {
    top: 0;
}

:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

/* ── Scrollbar ─────────────────────────────────────────────────────────────── */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--line-light);
}

::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

::placeholder {
    color: var(--muted-soft);
}

/* ── App shell ─────────────────────────────────────────────────────────────── */
.app-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ── Topbar ────────────────────────────────────────────────────────────────── */
.topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 20px;
    align-items: center;
    min-height: 68px;
    padding: 0 max(20px, calc((100vw - 1240px) / 2));
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
    transition: box-shadow var(--t);
}

.topbar.has-shadow {
    box-shadow: none;
}

/* ── Brand ─────────────────────────────────────────────────────────────────── */
.brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    min-width: max-content;
    font-weight: 900;
    letter-spacing: -0.03em;
    color: var(--ink);
}

.brand-mark {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    color: #fff;
    background: var(--black);
    font-size: 0.85rem;
    font-weight: 900;
    flex-shrink: 0;
    overflow: hidden;
}

.brand-mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* An uploaded logo is artwork, not an avatar. The 40px tile with its dark background and rounded
   corners suited the initials it used to hold but crops and boxes in a real logo, so the tile drops
   away and the image is free to take its natural aspect ratio up to a sensible ceiling. The initials
   are gone now (they were one store's, hardcoded), so the templates only ever emit .brand-mark
   alongside .brand-mark-logo — the bare-tile rules below are what that variant builds on.
   Issue #100/#101. */
.brand-mark-logo {
    width: auto;
    min-width: 40px;
    max-width: 170px;
    height: 40px;
    background: none;
    border-radius: 0;
    overflow: visible;
    place-items: center start;
}

.brand-mark-logo img {
    width: auto;
    max-width: 100%;
    height: 100%;
    object-fit: contain;
}

/* header_logo_only hides the company name and the Admin Console / Buyer Portal label, so the logo is
   the only thing left in the slot — give it the room those two were using rather than leaving it in a
   small square. */
.brand-mark-logo-only {
    max-width: 300px;
    height: 46px;
}

/* The per-area background colours exist for the initials tile; they would show as a slab behind a
   transparent logo. */
.site-admin .brand-mark-logo,
.site-customer .brand-mark-logo {
    background: none;
    border-radius: 0;
}

.brand-copy {
    line-height: 1.2;
}

.brand-copy small {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 0.67rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* ── Navigation ────────────────────────────────────────────────────────────── */
.nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    flex-wrap: wrap;
}

.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.nav a,
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 38px;
    padding: 0 14px;
    border: 1.5px solid transparent;
    border-radius: 999px;
    color: var(--muted);
    background: transparent;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
    transition: background var(--t), color var(--t), border-color var(--t), transform var(--t), box-shadow var(--t);
}

.site-admin .button {
    min-height: 32px;
    padding: 0 12px;
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    font-weight: 500;
}

.nav a:hover,
.button:hover {
    color: var(--ink);
    background: var(--line-light);
}

.nav a.is-current,
.nav a.active {
    color: #fff;
    background: var(--black);
}

.button.primary,
.nav-cta {
    color: #fff !important;
    background: var(--brand) !important;
    border-color: var(--brand) !important;
}

.button.primary:hover,
.nav-cta:hover {
    background: var(--brand-dark) !important;
    border-color: var(--brand-dark) !important;
    transform: translateY(-1px);
    box-shadow: none;
}

.site-admin .button.primary {
    background: var(--admin-blue) !important;
    border-color: var(--admin-blue) !important;
}

.site-admin .button.primary:hover {
    background: var(--admin-blue-hover) !important;
    border-color: var(--admin-blue-hover) !important;
    box-shadow: none;
}

.site-admin .button.outline:hover {
    border-color: var(--admin-blue-soft);
    color: var(--admin-blue-hover);
    background: var(--admin-blue-soft);
}

.site-admin .button.info:hover {
    color: var(--admin-blue-hover);
}

.site-admin .button.back-button::before {
    color: var(--admin-blue-hover);
    background: var(--admin-blue-soft);
}

.site-admin .button.back-button:hover {
    color: var(--admin-blue-hover);
    border-color: var(--admin-blue-soft);
    background: var(--admin-blue-soft);
}

.site-admin .button.back-button:hover::before {
    color: #fff;
    background: var(--admin-blue);
}

.button.outline {
    border-color: var(--line);
    color: var(--ink-body);
}

.button.outline:hover {
    border-color: var(--brand-light);
    color: var(--brand);
    background: var(--brand-bg);
    transform: translateY(-1px);
    box-shadow: none;
}

.button.danger {
    background: #b91c1c !important;
    color: white !important;
}

.button.danger:hover {
    background: #991b1b !important;
    box-shadow: none !important;
}

.button.danger-soft {
    color: #991b1b;
    background: #fff1f2;
    border-color: rgba(185, 28, 28, 0.18);
}

.button.danger-soft:hover {
    color: #7f1d1d;
    background: #ffe4e6;
    border-color: rgba(185, 28, 28, 0.28);
    transform: translateY(-1px);
    box-shadow: none;
}

.button.info {
    color: var(--ink);
    background: #f1f5f9;
    border-color: #e2e8f0;
    padding: 0 22px;
    box-shadow: none;
}

.button.info:hover {
    color: var(--brand-dark);
    background: #e2e8f0;
    border-color: #cbd5e1;
    transform: translateY(-1px);
    box-shadow: none;
}

.button.back-button {
    min-width: 92px;
    color: var(--ink);
    border-color: #d8dee8;
    background: #fff;
    box-shadow: none;
}

.button.back-button::before {
    content: '\2039';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    color: var(--brand-dark);
    background: var(--brand-bg);
    font-size: 1.15rem;
    line-height: 1;
    font-weight: 900;
    margin-right: 8px;
    padding-bottom: 2px;
    padding-right: 1px;
}

.button.back-button:hover {
    color: var(--brand-dark);
    border-color: var(--brand-light);
    background: var(--brand-bg);
    transform: translateY(-1px);
    box-shadow: none;
}

.button.back-button:hover::before {
    color: #fff;
    background: var(--brand);
}

.nav-toggle {
    display: none;
}

.sidebar-collapse-toggle {
    display: none;
}

.content-frame {
    flex: 1;
    width: min(1240px, calc(100% - 40px));
    margin: 0 auto;
    padding: 32px 0 80px;
}

/* Universal block stack — every direct child gets breathing room from the one above it */
/* .content-frame>*+* {
    margin-top: 22px;
} */

/* Overlay must never inherit this margin */
.content-frame>.admin-overlay {
    margin-top: 0 !important;
}


/* ── Footer ────────────────────────────────────────────────────────────────── */
.site-footer {
    margin-top: auto;
    padding: 14px max(20px, calc((100vw - 1240px) / 2));
    border-top: 1px solid var(--line);
    background: #fff;
    color: var(--muted);
    font-size: 0.82rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.site-footer a {
    color: var(--brand-dark);
    font-weight: 600;
}

.site-footer a:hover {
    text-decoration: underline;
}

.footer-links {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}

/* ── Typography ────────────────────────────────────────────────────────────── */
h1 {
    max-width: 820px;
    margin: 0;
    color: var(--ink);
    font-size: clamp(1.25rem, 2.2vw, 1.65rem);
    line-height: 1.15;
    letter-spacing: -0.03em;
    font-weight: 700;
}

h2 {
    margin: 0 0 8px;
    color: var(--ink);
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    line-height: 1.2;
    letter-spacing: -0.02em;
    font-weight: 700;
}

h3 {
    margin: 0 0 6px;
    color: var(--ink);
    font-size: 0.92rem;
    font-weight: 700;
}

p {
    margin: 0;
    color: var(--muted);
    line-height: 1.65;
}

.lead {
    max-width: 640px;
    font-size: 0.9rem;
    color: var(--muted);
    line-height: 1.65;
}

.eyebrow {
    margin: 0 0 10px;
    color: var(--orange);
    font-size: 0.67rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.metric {
    color: var(--brand-dark);
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
}

/* Hero sections get larger, heavier headings */
.market-copy h1,
.auth-visual h1,
.admin-titlebar h1 {
    font-size: clamp(1.5rem, 3.2vw, 2.6rem);
    font-weight: 900;
    line-height: 1.0;
    letter-spacing: -0.05em;
}

.sku {
    margin: 0 0 6px;
    color: var(--blue);
    font-size: 0.71rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* ── Admin layout ──────────────────────────────────────────────────────────── */
.site-admin {
    background: #eef1f6;
}

.site-admin .content-frame {
    background: #fff;
}

.site-admin .panel-title-row .eyebrow,
.site-admin .panel-title-row .lead,
.site-admin .admin-titlebar .eyebrow,
.site-admin .admin-titlebar .lead {
    display: none !important;
}

.site-admin .panel-title-row h1,
.site-admin .admin-titlebar h1 {
    font-size: 1.05rem;
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    line-height: 1.15;
    margin: 0;
}

.site-admin .panel.compact-panel {
    padding: 0 !important;
}

/* Zoho-style flat page title bar — no card border/shadow, minimal padding.
   Applies to every admin list/detail page-title hero built on .panel.compact-panel,
   EXCEPT the two genuine content cards that happen to reuse the same base class
   (audit-history-panel, import-progress-card) — those keep their card look. */
.site-admin .panel.compact-panel:not(.audit-history-panel):not(.import-progress-card) {
    padding: 10px 20px 14px !important;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.panel.audit-history-panel {
    border-radius: var(--radius-md);
    overflow: hidden;
}

.site-admin .topbar {
    background: rgba(15, 23, 42, 0.98);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 0;
    overflow: hidden;
}

.site-admin .brand,
.site-admin .nav a {
    color: #e5e7eb;
}

.site-admin .brand-mark {
    color: #111827;
    background: #fff;
    border-radius: 12px;
}

.site-admin .brand-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.site-admin .brand-copy small {
    color: #94a3b8;
    margin-top: 4px;
}

.site-admin .nav a:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.09);
}

.site-admin .nav a.is-current {
    color: #111827;
    background: #fff;
}

/* Admin content-header (slim user-menu bar below topbar) */
.admin-content-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 8px max(20px, calc((100vw - 1240px) / 2));
    background: #fff;
    border-bottom: 1px solid var(--line-light);
    min-height: 48px;
}

/* ── Admin User Menu ──────────────────────────────────────────────────────── */
.user-menu {
    position: relative;
}

/* Quick-create ("+") menu, left of the user menu */
.quick-create-toggle {
    padding: 8px;
    border-radius: 50%;
    line-height: 0;
}

.quick-create-menu .user-menu-dropdown {
    min-width: 150px;
}

.user-menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px 5px 5px;
    background: var(--brand-bg);
    border: 1.5px solid var(--brand-light);
    border-radius: 999px;
    color: var(--brand-dark);
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 700;
    transition: background var(--t), border-color var(--t);
}

.site-admin .user-menu-toggle {
    border-radius: var(--radius-sm);
}

.user-menu-toggle:hover {
    background: var(--brand-light);
    border-color: var(--brand);
}

.user-menu-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 800;
    flex-shrink: 0;
}

.user-menu-caret {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
    color: #93c5fd;
    transition: transform 0.3s ease;
}

.user-menu-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 170px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: none;
    padding: 6px;
    display: none;
    z-index: 500;
}

.user-menu.is-open .user-menu-dropdown {
    display: block;
}

.user-menu-dropdown a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink);
    transition: background var(--t);
}

.user-menu-dropdown a:hover {
    background: var(--brand-bg);
    color: var(--brand-dark);
}

.user-menu-item-icon {
    font-size: 0.7rem;
    color: var(--muted);
}

/* ── Admin board (dashboard banner) ───────────────────────────────────────── */
.admin-board {
    overflow: hidden;
    border-radius: 0;
    background: #fff;
    border: 1.5px solid var(--line);
    box-shadow: none;
}

.admin-titlebar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px;
    align-items: end;
    padding: clamp(20px, 3vw, 28px);
}

.admin-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.kpi-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--line-light);
}

.kpi-tile {
    padding: 20px 24px;
    border-right: 1px solid var(--line-light);
    background: #fff;
    transition: background var(--t);
}

.kpi-tile:last-child {
    border-right: 0;
}

.kpi-tile:hover {
    background: #f8fafc;
}

.import-result-notes {
    margin: 0;
    padding-left: 18px;
}

.import-result-notes li + li {
    margin-top: 4px;
}

.kpi-tile span {
    display: block;
    color: #64748b;
    font-size: 0.71rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.kpi-tile strong {
    display: block;
    margin-bottom: 6px;
    color: #1e293b;
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
}

.kpi-tile small {
    color: #64748b;
    font-size: 0.82rem;
    line-height: 1.5;
}

/* ── Module list ───────────────────────────────────────────────────────────── */
.module-list {
    display: flex;
    flex-direction: column;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-md);
    background: #fff;
    box-shadow: none;
    overflow: hidden;
}

.module-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 22px;
    border-bottom: 1px solid var(--line-light);
    transition: background var(--t);
}

.module-row:last-child {
    border-bottom: 0;
}

.module-row:hover {
    background: #f8fafc;
}

.module-row h2 {
    margin: 0 0 3px;
    font-size: 0.92rem;
}

.module-row p {
    margin: 0;
    font-size: 0.82rem;
    color: var(--muted);
}

.module-arrow {
    color: var(--brand);
    font-weight: 700;
    font-size: 0.85rem;
    flex-shrink: 0;
}

/* ── Customer marketplace layout ────────────────────────────────────────────── */
.site-customer {
    background: var(--cream);
}

.site-customer .brand-mark {
    background: var(--brand);
    border-radius: 12px;
}

.site-customer .topbar {
    background: rgba(255, 255, 255, 0.96);
}

/* Customer header: keep logo + menu + profile on one row (desktop) */
.site-customer .topbar .brand { grid-column: 1; grid-row: 1; }
.site-customer .topbar .nav { grid-column: 2; grid-row: 1; justify-content: center; }
.site-customer .topbar .customer-user-menu { grid-column: 3; grid-row: 1; }

/* Restore original brand stacking */
.site-customer .brand-copy { white-space: normal; }
.site-customer .brand-copy small { display: block; margin-top: 2px; }

/* Ensure brand + nav + user-menu align on one row in customer topbar */
.site-customer .topbar {
    grid-template-columns: auto 1fr auto;
}

.site-customer .topbar .nav-toggle,
.site-customer .topbar .nav {
    grid-column: 2;
}

.site-customer .topbar .customer-user-menu {
    grid-column: 3;
}

@media (min-width: 981px) { 
    .site-customer .nav { 
        flex-wrap: nowrap; 
        justify-content: center; 
        overflow: visible; 
    } 
 
    .site-customer .nav a,
    .site-customer .nav .nav-dropdown-toggle {
        font-weight: 500;
        padding-inline: 12px;
    }
} 

/* Customer nav dropdown (catalog categories) */
.site-customer .nav-dropdown {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.site-customer .nav-dropdown::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 12px;
}

.site-customer .nav-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    padding: 0 14px;
    border: 1.5px solid transparent;
    border-radius: 999px;
    color: var(--muted);
    background: transparent;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 700;
    white-space: nowrap;
    transition: background var(--t), color var(--t), border-color var(--t), transform var(--t), box-shadow var(--t);
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.site-customer .nav-dropdown-toggle:hover {
    color: var(--ink);
    background: var(--line-light);
}

.site-customer .nav-dropdown.is-current .nav-dropdown-toggle {
    color: #fff;
    background: var(--black);
}

.site-customer .nav-dropdown-menu {  
    position: absolute;  
    top: calc(100% + 12px);  
    left: 0;  
    transform: none;  
    width: 286px;  
    min-width: 286px;  
    overflow: visible;  
    padding: 10px;  
    border-radius: 10px; 
    background: #fff; 
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: none;
    display: none;
    z-index: 100; 
    animation: dropdownReveal 0.24s cubic-bezier(0.16, 1, 0.3, 1);  
}  
 
/* Keep dropdown inside viewport when near edges */ 
.site-customer .nav-dropdown:last-child .nav-dropdown-menu { right: 0; left: auto; transform: none; }
 
@keyframes dropdownReveal { 
    from { 
        opacity: 0; 
        transform: translateY(8px); 
    } 
 
    to { 
        opacity: 1; 
        transform: translateY(0); 
    } 
} 

.site-customer .nav-dropdown:hover .nav-dropdown-menu,
.site-customer .nav-dropdown:focus-within .nav-dropdown-menu {
    display: grid;
    gap: 2px;
}

.site-customer .nav-dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 52px;
    padding: 14px 16px;
    border-radius: 8px;
    color: var(--ink-body);
    background: transparent;
    font-size: 0.98rem;
    font-weight: 500;
    transition: all var(--t);
}

/* Explicitly override global .nav a.is-current styles for dropdown items */
.site-customer .nav-dropdown-menu .nav-dropdown-item.is-current,
.site-customer .nav-dropdown-menu .nav-dropdown-item.active {
    background: transparent;
    color: var(--ink-body);
    font-weight: 500;
}

.site-customer .nav-dropdown-menu .nav-dropdown-item:hover {
    background: var(--brand-bg);
    color: var(--brand-dark);
}

.site-customer .nav-dropdown-item span {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.site-customer .nav-dropdown-item small { 
    display: none; 
    align-items: center; 
    justify-content: center; 
    min-width: 22px; 
    height: 20px; 
    padding: 0 6px; 
    border-radius: 6px; 
    background: var(--line-light); 
    color: var(--muted); 
    font-weight: 700; 
    font-size: 0.75rem; 
    transition: all var(--t); 
} 

.site-customer .nav-category-tree-item {
    position: relative;
}

.site-customer .nav-category-tree-link {
    position: relative;
}

.site-customer .nav-category-tree-item.has-children > .nav-category-tree-link {
    padding-right: 42px;
}

.site-customer .nav-category-tree-item.has-children > .nav-category-tree-link::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 18px;
    width: 8px;
    height: 8px;
    border-top: 1.5px solid #94a3b8;
    border-right: 1.5px solid #94a3b8;
    transform: translateY(-50%) rotate(45deg);
}

.site-customer .nav-category-tree-children {
    position: absolute;
    top: -8px;
    left: calc(100% + 6px);
    display: none;
    width: 238px;
    overflow: visible;
    padding: 8px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: none;
    z-index: 120;
}

.site-customer .nav-category-tree-item.opens-left > .nav-category-tree-children {
    left: auto;
    right: calc(100% + 6px);
}

.site-customer .nav-category-tree-item:hover > .nav-category-tree-children,
.site-customer .nav-category-tree-item:focus-within > .nav-category-tree-children {
    display: grid;
    gap: 2px;
}

/* Customer topbar user-menu */
.site-customer .customer-user-menu {
    justify-self: end;
    margin-left: auto;
}

.site-customer .customer-user-menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 38px;
    padding: 5px 14px 5px 8px;
    border: 1.5px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--ink);
    box-shadow: none;
    transition: background var(--t), border-color var(--t), color var(--t), transform var(--t), box-shadow var(--t);
}

.site-customer .customer-user-menu-toggle:hover {
    border-color: var(--brand-light);
    background: var(--brand-bg);
    color: var(--brand-dark);
    transform: translateY(-1px);
    box-shadow: none;
}

.site-customer .customer-user-menu-icon {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: var(--brand);
    color: #fff;
    flex-shrink: 0;
}

.site-customer .customer-user-menu-label {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 800;
    font-size: 0.84rem;
}

.site-customer .customer-user-menu-dropdown { 
    min-width: 190px; 
    border-radius: 14px; 
    padding: 8px; 
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: none;
} 
 
.site-customer .customer-user-menu-dropdown a { 
    border-radius: 10px !important; 
    font-weight: 800 !important; 
    color: var(--ink) !important;
    background: transparent !important;
    padding: 10px 12px !important;
} 

.site-customer .customer-user-menu-dropdown .user-menu-link {
    display: flex;
    align-items: center;
    gap: 10px;
}

.site-customer .customer-user-menu-dropdown .user-menu-link::before {
    content: "";
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    background: currentColor;
    opacity: 0.9;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}

.site-customer .customer-user-menu-dropdown .user-menu-link--profile::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/><circle cx='12' cy='7' r='4'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/><circle cx='12' cy='7' r='4'/></svg>");
}

.site-customer .customer-user-menu-dropdown .user-menu-link--login::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4'/><path d='M10 17l5-5-5-5'/><path d='M15 12H3'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4'/><path d='M10 17l5-5-5-5'/><path d='M15 12H3'/></svg>");
}

.site-customer .customer-user-menu-dropdown .user-menu-link--register::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><path d='M19 8v6'/><path d='M22 11h-6'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><path d='M19 8v6'/><path d='M22 11h-6'/></svg>");
}

.site-customer .customer-user-menu--guest .user-menu-link--login {
    background: #eff6ff !important;
    color: var(--brand-dark) !important;
}

.site-customer .customer-user-menu--guest .user-menu-link--register {
    background: #fff1f2 !important;
    color: #991b1b !important;
}

.site-customer .customer-user-menu-dropdown .user-menu-link--users::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><path d='M23 21v-2a4 4 0 0 0-3-3.87'/><path d='M16 3.13a4 4 0 0 1 0 7.75'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><path d='M23 21v-2a4 4 0 0 0-3-3.87'/><path d='M16 3.13a4 4 0 0 1 0 7.75'/></svg>");
}

.site-customer .customer-user-menu-dropdown .user-menu-link--company::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M3 21h18'/><path d='M5 21V7l8-4 6 4v14'/><path d='M9 9v.01'/><path d='M9 12v.01'/><path d='M9 15v.01'/><path d='M13 9v.01'/><path d='M13 12v.01'/><path d='M13 15v.01'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M3 21h18'/><path d='M5 21V7l8-4 6 4v14'/><path d='M9 9v.01'/><path d='M9 12v.01'/><path d='M9 15v.01'/><path d='M13 9v.01'/><path d='M13 12v.01'/><path d='M13 15v.01'/></svg>");
}

.site-customer .customer-user-menu-dropdown .user-menu-link--logout::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/><path d='M16 17l5-5-5-5'/><path d='M21 12H9'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/><path d='M16 17l5-5-5-5'/><path d='M21 12H9'/></svg>");
}
 
.site-customer .customer-user-menu-dropdown a:hover { 
    background: var(--brand-bg) !important; 
    color: var(--brand-dark) !important;
} 

.site-customer .customer-user-menu-dropdown a + a {
    margin-top: 2px;
}

.site-customer .customer-user-menu-dropdown a:last-child {
    margin-top: 6px;
    background: #fff1f2 !important;
    color: #991b1b !important;
    font-weight: 900 !important;
}

.site-customer .customer-user-menu-dropdown a:last-child:hover {
    background: #ffe4e6 !important;
    color: #7f1d1d !important;
}

/* ── Hero ──────────────────────────────────────────────────────────────────── */
.market-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 310px;
    gap: 0;
    overflow: hidden;
    border-radius: var(--radius-xl);
    background: #fff;
    box-shadow: none;
    border: 1.5px solid var(--line);
}

.market-copy {
    padding: clamp(32px, 6vw, 72px);
    background:
        radial-gradient(circle at 88% 14%, rgba(29, 78, 216, 0.11), transparent 20rem),
        radial-gradient(circle at 10% 82%, rgba(192, 86, 33, 0.06), transparent 16rem),
        linear-gradient(150deg, #fff 55%, #fdf8ef 100%);
}

.market-feature {
    display: grid;
    align-content: end;
    min-height: 380px;
    padding: 32px;
    color: #fff;
    background:
        linear-gradient(175deg, rgba(29, 78, 216, 0.18) 0%, rgba(17, 24, 39, 0.88) 100%),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0 2px, transparent 2px 22px),
        linear-gradient(135deg, #0c4a6e 0%, #1d4ed8 100%);
    position: relative;
    overflow: hidden;
}

.market-feature::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 60% 80%, rgba(255, 255, 255, 0.08), transparent 60%);
}

.market-feature>* {
    position: relative;
    z-index: 1;
}

.market-feature strong {
    display: block;
    font-size: 1.25rem;
    line-height: 1.15;
    letter-spacing: -0.025em;
    margin-top: 6px;
    font-weight: 800;
}

.feature-label {
    display: inline-flex;
    align-items: center;
    width: max-content;
    margin-bottom: 12px;
    padding: 5px 12px;
    border-radius: 999px;
    color: #1e3a8a;
    background: var(--brand-light);
    font-weight: 800;
    font-size: 0.71rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.hero-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 28px;
}

/* ── Category row ──────────────────────────────────────────────────────────── */
.category-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.site-customer .market-hero {
    margin-bottom: 18px;
}

.site-customer .category-row {
    margin-top: 18px;
    margin-bottom: 28px;
}

.site-customer .section-header {
    margin-top: 6px;
    margin-bottom: 18px;
}

.site-customer .product-grid.product-grid-market {
    margin-top: 6px;
}

.category-pill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px;
    border-radius: var(--radius-md);
    background: #fff;
    box-shadow: none;
    border: 1.5px solid var(--line);
    transition: border-color var(--t), box-shadow var(--t-md), transform var(--t-md);
}

.category-pill:hover {
    border-color: var(--brand-light);
    box-shadow: none;
    transform: translateY(-2px);
}

.category-pill span {
    font-weight: 700;
    color: var(--ink);
    font-size: 0.85rem;
}

.category-pill strong {
    color: var(--orange);
    font-size: 1.1rem;
    font-weight: 900;
    letter-spacing: -0.03em;
}

/* ── Catalog heading ───────────────────────────────────────────────────────── */
.catalog-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    padding: 28px 30px;
    border-radius: var(--radius-lg);
    background: #fff;
    box-shadow: none;
    border: 1.5px solid var(--line);
}

.customer-catalog-heading .catalog-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.customer-catalog-heading .catalog-search {
    min-width: min(380px, 68vw);
}

.catalog-warehouse-select-wrap {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: none;
    white-space: nowrap;
}

.catalog-warehouse-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--ink-muted);
}

.catalog-warehouse-select {
    min-width: 168px;
    height: 38px;
    border-radius: 10px;
    padding: 0 12px;
    font-weight: 700;
}

.catalog-view-toggle {
    display: inline-flex;
    gap: 6px;
    padding: 4px;
    border-radius: 999px;
    background: var(--line-light);
    border: 1px solid var(--line);
}

.catalog-view-toggle .button {
    min-height: 34px;
    width: 40px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.catalog-heading>div {
    flex: 1;
}

.marketplace-layout {
    display: grid;
    grid-template-columns: 255px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

/* ── Filter panel ──────────────────────────────────────────────────────────── */
.filter-panel {
    position: sticky;
    top: 86px;
    padding: 18px;
    border-radius: var(--radius-md);
    background: #fff;
    box-shadow: none;
    border: 1.5px solid var(--line);
}

.filter-panel>h2 {
    font-size: 0.71rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted-soft);
    margin: 0 0 8px 10px;
}

.filter-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 10px;
    border-radius: var(--radius-sm);
    border: 1.5px solid transparent;
    margin: 2px 0;
    transition: background var(--t), border-color var(--t);
}

.filter-link:hover {
    background: var(--line-light);
}

.filter-link.active {
    background: var(--brand-bg);
    border-color: var(--brand-light);
}

.filter-link span {
    font-weight: 600;
    color: var(--ink-body);
    font-size: 0.9rem;
}

.filter-link.active span {
    color: var(--brand-dark);
}

.filter-link strong {
    color: var(--brand);
    font-size: 0.82rem;
    font-weight: 700;
}

.category-tree-children {
    margin-left: 8px;
    padding-left: 8px;
    border-left: 1px solid var(--line-light);
}

.catalog-filter-block {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--line-light);
}

.catalog-filter-block > h2 {
    font-size: 0.71rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted-soft);
    margin: 0 0 8px 10px;
}

.catalog-filter-field {
    margin: 10px 0;
    padding: 10px;
    border-radius: var(--radius-sm);
    background: var(--line-light);
    border: 1px solid var(--line);
}

.catalog-filter-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ink-body);
    margin: 0 0 6px;
}

.catalog-filter-price {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.catalog-filter-block .button.full-width {
    margin-top: 10px;
    min-height: 38px;
}

.catalog-filter-block .form-control {
    background-color: #fff;
}

/* ── Product grid ──────────────────────────────────────────────────────────── */
.product-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.product-grid-market {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.product-card,
.market-product {
    overflow: hidden;
    border-radius: var(--radius-md);
    background: #fff;
    box-shadow: none;
    border: 1.5px solid var(--line);
    transition: box-shadow var(--t-md), transform var(--t-md), border-color var(--t);
}

.market-product:hover {
    transform: translateY(-4px);
    box-shadow: none;
    border-color: var(--brand-light);
}

.product-media {
    display: grid;
    place-items: center;
    min-height: 160px;
    color: rgba(255, 255, 255, 0.92);
    background: linear-gradient(140deg, #1d4ed8 0%, #1e3a8a 100%);
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: -0.07em;
    position: relative;
    overflow: hidden;
}

.product-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.04) 0 2px, transparent 2px 22px);
}

.product-media span {
    position: relative;
    z-index: 1;
}

.product-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    z-index: 1;
}

.product-body {
    padding: 18px 20px 20px;
}

.product-body h2 {
    margin: 0 0 4px;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.3;
}

.product-body>p {
    font-size: 0.78rem;
    margin: 0;
    color: var(--muted);
}

.product-body strong {
    color: var(--brand-dark);
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

/* Product card footer: price + cart button */
.product-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--line-light);
}

.btn-cart {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 0 13px;
    border: none;
    border-radius: 999px;
    color: #fff;
    background: var(--brand);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--t), transform var(--t), box-shadow var(--t);
}

.btn-cart:hover {
    background: var(--brand-dark);
    transform: translateY(-1px);
    box-shadow: none;
}

.btn-cart:active {
    transform: scale(0.96);
}

.btn-cart.is-added {
    background: #0369a1;
    pointer-events: none;
}

/* ── Cart page ───────────────────────────────────────────────────────────── */
.nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    margin-left: 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    color: #fff;
    background: var(--brand);
    box-shadow: none;
    vertical-align: middle;
}

.nav-icon-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.nav-icon-link .nav-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    margin-left: 0;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    font-size: 0.72rem;
    line-height: 1;
    border: 2px solid #fff;
    box-shadow: none;
}

.customer-cart-heading .cart-heading-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.cart-layout {
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 18px;
}

.cart-table-card {
    overflow: hidden;
}

.cart-table-wrap {
    width: 100%;
    overflow: auto;
}

.cart-table {
    width: 100%;
    min-width: 760px;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
}

.cart-table th,
.cart-table td {
    padding: 16px 18px;
    border-bottom: 1px solid var(--line-light);
    vertical-align: middle;
}

.cart-table thead th {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    background: #fff;
}

.cart-table tbody tr:last-child td {
    border-bottom: 0;
}

.cart-table th:nth-child(2),
.cart-table td:nth-child(2),
.cart-table th:nth-child(4),
.cart-table td:nth-child(4) {
    text-align: right;
    white-space: nowrap;
}

.cart-table th:nth-child(3),
.cart-table td:nth-child(3) {
    text-align: center;
}

.cart-table th:nth-child(5),
.cart-table td:nth-child(5) {
    text-align: right;
    white-space: nowrap;
}

.cart-table .cart-col-product {
    width: 34%;
}

.cart-table .cart-col-price {
    width: 16%;
}

.cart-table .cart-col-qty {
    width: 20%;
}

.cart-table .cart-col-total {
    width: 14%;
}

.cart-table .cart-col-actions {
    width: 16%;
}

.cart-empty {
    margin: 16px 18px 0 18px;
}

.cart-product {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.cart-product-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.cart-qty {
    width: 72px;
    min-height: 40px;
    padding-inline: 8px;
    text-align: center;
}

.cart-qty-control {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}

.cart-qty-btn {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1.5px solid var(--line);
    background: #fff;
    color: var(--ink);
    box-shadow: none;
    transition: border-color var(--t), box-shadow var(--t), transform var(--t), background var(--t);
}

.cart-qty-btn:hover {
    border-color: rgba(29, 78, 216, 0.35);
    box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.1);
}

.cart-qty-btn:active {
    transform: scale(0.97);
}

.cart-actions {
    display: flex;
    justify-content: flex-end;
    text-align: right;
    white-space: nowrap;
}

.cart-remove {
    width: 100%;
    max-width: 156px;
    min-height: 42px;
    padding: 0 16px;
    justify-content: center;
    color: #991b1b;
}

.cart-product-name {
    font-weight: 700;
    color: var(--ink);
    line-height: 1.35;
}

.cart-product-sku {
    margin-top: 0;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--muted);
    line-height: 1.2;
}

.cart-money {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.cart-price-tbd {
    color: var(--muted);
    font-style: italic;
}

.cart-summary {
    position: sticky;
    top: 86px;
}

.cart-summary-body {
    padding: 18px 20px;
    display: grid;
    gap: 10px;
}

.cart-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-weight: 700;
}

.cart-summary-row span {
    color: var(--muted);
    font-weight: 700;
}

.cart-summary-row.total {
    padding-top: 10px;
    border-top: 1px solid var(--line);
}

.cart-summary-actions {
    display: grid;
    gap: 10px;
}

.button.is-disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
    transform: none !important;
    box-shadow: none !important;
}

/* ── Checkout page ───────────────────────────────────────────────────────── */
.checkout-layout {
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 18px;
}

.checkout-heading-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.checkout-grid {
    padding: 18px 20px 20px 20px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.checkout-panel {
    border: 1.5px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    padding: 16px;
    box-shadow: none;
}

.checkout-panel h3 {
    margin: 0 0 12px 0;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
}

.checkout-panel .form-row {
    margin-bottom: 12px;
}

.checkout-panel .form-row.two {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.checkout-info-card {
    margin-top: 6px;
}

.checkout-summary {
    position: sticky;
    top: 86px;
}

.checkout-summary-card {
    padding: 20px 20px;
    border-color: var(--brand-light);
    background: linear-gradient(180deg, rgba(29, 78, 216, 0.06), rgba(255, 255, 255, 0.0) 42%), #fff;
    box-shadow: none;
}

.checkout-summary-card .card-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    margin: 0 0 14px 0;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(29, 78, 216, 0.14);
}

.checkout-summary-card .card-header h2 {
    margin: 0;
}

.checkout-summary-card .card-header .muted {
    margin: 0;
    font-weight: 800;
}

.checkout-summary-card .js-checkout-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 7px;
    margin-right: 6px;
    border-radius: 999px;
    background: var(--brand);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 900;
    vertical-align: middle;
}

.checkout-items {
    padding: 14px 20px 0 20px;
    display: grid;
    gap: 10px;
}

.checkout-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 12px 14px 12px 24px;
    border-radius: 12px;
    background: var(--brand-bg);
    border: 1px solid rgba(29, 78, 216, 0.18);
    box-shadow: none;
    position: relative;
}

.checkout-item::before {
    content: '';
    position: absolute;
    left: 14px;
    top: 10px;
    bottom: 10px;
    width: 3px;
    border-radius: 999px;
    background: var(--brand);
    opacity: 0.55;
}

.checkout-item-name {
    font-weight: 800;
    color: var(--ink);
    line-height: 1.2;
}

.checkout-item-meta {
    margin-top: 4px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--muted);
}

.checkout-item-total {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.checkout-summary-card .cart-summary-body {
    padding: 14px 20px 18px 20px;
}

.checkout-summary-card .cart-summary-row.total strong {
    color: var(--brand-dark);
}

@media (max-width: 980px) {
    .cart-layout {
        grid-template-columns: 1fr;
    }

    .cart-summary {
        position: static;
    }

    .checkout-layout {
        grid-template-columns: 1fr;
    }

    .checkout-summary {
        position: static;
    }

    .checkout-grid {
        grid-template-columns: 1fr;
    }
}

/* List view: keep footer horizontal */
.catalog-products.is-list-view .product-footer {
    margin-top: 10px;
}

/* Product availability badges (used in home + catalog) */
.product-avail {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.71rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-top: 8px;
}

.product-avail::before {
    content: '●';
    font-size: 0.55rem;
}

.product-avail.avail-in-stock {
    color: #0369a1;
}

.product-avail.avail-company {
    color: var(--orange);
}

.product-avail.avail-low {
    color: #92400e;
}

.product-avail.avail-out-stock {
    color: #dc2626;
}

/* Product section header */
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.section-header h2 {
    margin: 0;
}

.product-count-label {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 600;
}

.product-count {
    font-weight: 700;
    color: var(--ink-body);
}

/* ── List view ─────────────────────────────────────────────────────────────── */
.catalog-products.is-list-view {
    grid-template-columns: 1fr;
}

.catalog-products.is-list-view .market-product {
    display: grid;
    grid-template-columns: 156px minmax(0, 1fr);
}

.catalog-products.is-list-view .product-media {
    min-height: 120px;
}

/* ── Shared layout ─────────────────────────────────────────────────────────── */
.hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 18px;
    margin-bottom: 18px;
}

.panel {
    padding: clamp(26px, 4vw, 46px);
    border: 1.5px solid var(--line);
    border-radius: var(--radius-md);
    background: #fff;
    box-shadow: none;
}

.site-admin .admin-create-form-panel {
    border-radius: 0;
}

.site-admin .admin-flat-panel {
    border-radius: 0;
}

/* .data-table (Bundle Management, Custom Fields, Company Payment Methods) has no table-layout
   of its own, so a long value in the first column just grows the column instead of truncating.
   Only Company Payment Methods' first column wraps its value in a link, so this only affects
   that one in practice. */
.site-admin .data-table td:first-child a {
    display: block;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Internal content rhythm for panels and hero copy blocks */
.panel>h1,
.panel>h2,
.market-copy>h1,
.auth-card-solo>h2,
.auth-card>h2 {
    margin-bottom: 10px;
}

.panel>p,
.market-copy>p,
.auth-card-solo>p,
.auth-card>p {
    margin-top: 6px;
}

.panel>p+p,
.auth-card-solo>p+p,
.auth-card>p+p {
    margin-top: 14px;
}

.panel>h1+p,
.panel>h1+.lead {
    margin-top: 8px;
}

/* Button row inside panels */
.panel>p:has(.button),
.panel>.panel-actions {
    margin-top: 20px;
}

/* admin-titlebar internal spacing */
.admin-titlebar h1 {
    margin-bottom: 10px;
}

.admin-titlebar .lead {
    margin-top: 8px;
}

.card {
    padding: 26px 28px;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-md);
    background: #fff;
    box-shadow: none;
}

.card>h2 {
    margin-bottom: 12px;
}

.card>p+p {
    margin-top: 8px;
}

.card>h2+p,
.card>h2+.detail-list {
    margin-top: 12px;
}

.grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

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

.stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

/* ── Badges ────────────────────────────────────────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 22px;
    padding: 0 9px;
    border-radius: 999px;
    color: var(--brand-dark);
    background: var(--brand-bg);
    font-size: 0.71rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.badge.warn {
    color: #92400e;
    background: #fffbeb;
}

.badge.danger {
    color: var(--red);
    background: #fff1f2;
}

.badge.success {
    color: #0369a1;
    background: #dbeafe;
}

.badge.info {
    color: var(--blue);
    background: #eff6ff;
}

/* Admin console: badges stay in the blue family, no teal/green. */
.site-admin .badge {
    color: var(--admin-blue-hover);
    background: var(--admin-blue-soft);
}

.site-admin .badge.success {
    color: var(--admin-success);
    background: var(--admin-success-soft);
}

/* Alerts */
.alert {
    padding: 12px 14px;
    border-radius: var(--radius-md);
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink);
    font-size: 0.9rem;
}

.alert.error {
    border-color: rgba(239, 68, 68, 0.35);
    background: #fef2f2;
    color: #991b1b;
}

.alert.success {
    border-color: rgba(3, 105, 161, 0.35);
    background: #eff6ff;
    color: #0369a1;
}

.flash {
    padding: 12px 14px;
    border-radius: var(--radius-md);
    border: 1px solid var(--line);
    font-size: 0.9rem;
    margin-bottom: 16px;
}

.flash-error {
    border-color: rgba(239, 68, 68, 0.35);
    background: #fef2f2;
    color: #991b1b;
}

.flash-success {
    border-color: rgba(3, 105, 161, 0.35);
    background: #eff6ff;
    color: #0369a1;
}

.alert.warn {
    border-color: rgba(245, 158, 11, 0.35);
    background: #fffbeb;
    color: #92400e;
}

/* Cart Hold countdown banner (CartHoldBundle) — shown on catalog/cart/checkout pages
   whenever the current session has an active hold. */
.cart-hold-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 14px 20px;
    margin-bottom: 16px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(245, 158, 11, 0.35);
    background: #fffbeb;
    color: #92400e;
}

.cart-hold-banner-text {
    margin: 0;
    font-size: 0.92rem;
}

.cart-hold-banner-text .js-cart-hold-countdown {
    color: var(--orange);
}

.cart-hold-banner-action {
    flex-shrink: 0;
    white-space: nowrap;
}

/* ── Tables ────────────────────────────────────────────────────────────────── */
.table-card {
    position: relative;
    overflow: hidden;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-md);
    background: #fff;
    box-shadow: none;
}

.site-admin .table-card {
    border-radius: 0;
}

.table-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--line);
    background: #f9fafb;
}

.table-header h2 {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 700;
}

.table-tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.table-search {
    width: min(260px, 100%);
    min-height: 36px;
    border: 1.5px solid var(--line);
    border-radius: 999px;
    padding: 0 14px;
    font-size: 0.85rem;
    background: #fff;
    outline: none;
    transition: border-color var(--t), box-shadow var(--t);
}

.table-search:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.1);
}

input[type="search"]::-webkit-search-cancel-button {
    cursor: pointer;
}

.table-count {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    padding: 10px 9px;
    border-bottom: 1px solid var(--line-light);
    text-align: left;
    vertical-align: middle;
}

/* Admin tables: consistent heading style (match pricing grid look) */
.table-card table thead > tr:not(.filter-row):not(.column-groups) > th {
    color: #475467;
    background: #fbfcfe;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0;
    /*text-transform: uppercase;*/
    text-transform: capitalize;
    white-space: nowrap;
}

/* Product detail grid: allow multi-line column headers */
.product-admin-grid table.wide-product-table thead > tr:not(.filter-row):not(.column-groups) > th {
    white-space: normal;
    overflow: visible;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: auto;
    line-height: 1.15;
}

/* Zoho-style table header band (admin only — customer .table-card keeps its own look) */
.site-admin .table-card table thead > tr:not(.filter-row):not(.column-groups) > th {
    color: var(--admin-table-head-ink);
    background: var(--admin-table-head-bg);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.site-admin tbody tr:hover,
.site-admin tbody tr.is-row-focus,
.site-admin tbody tr:hover td,
.site-admin tbody tr.is-row-focus td {
    background: var(--admin-row-hover) !important;
}

/* Resizable admin table columns: thin drag strip on each header cell's trailing edge.
   The cell only needs position: relative while it actually has a handle in it. */
.site-admin th:has(> .col-resize-handle) {
    position: relative;
}

.site-admin .col-resize-handle {
    position: absolute;
    top: 0;
    right: -6px;
    bottom: 0;
    width: 12px;
    cursor: col-resize;
    z-index: 4;
    touch-action: none;
}

.site-admin .col-resize-handle:hover,
body.is-resizing-column .col-resize-handle {
    background: var(--brand-light);
}

.site-admin .col-resize-handle::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    transform: translateX(-50%);
}

.site-admin .col-resize-handle:hover::after,
body.is-resizing-column .col-resize-handle::after {
    background: var(--brand);
}

body.is-resizing-column,
body.is-resizing-column * {
    cursor: col-resize !important;
    user-select: none !important;
}

/* Sort indicators (all tables) */
thead th.is-sortable {
    position: relative;
    padding-right: 10px;
    cursor: pointer;
    user-select: none;
}

thead th.is-sortable > a {
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

thead th.is-sortable::after {
    content: '';
    position: static;
    display: inline-block;
    margin-left: 6px;
    width: 12px;
    height: 12px;
    transform: translateY(1px);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23334155' stroke-width='2.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 11px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    vertical-align: middle;
}

thead th.is-sorted-asc::after,
thead th.is-sorted-desc::after {
    opacity: 1;
}

thead th.is-sorted-desc::after {
    transform: translateY(1px) rotate(180deg);
}

th {
    color: var(--muted);
    background: #f9fafb;
    font-size: 0.69rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    white-space: nowrap;
}

.site-admin th {
    font-weight: 500;
}

tbody tr {
    transition: background var(--t);
}

tbody tr:hover,
tbody tr.is-row-focus {
    background: var(--brand-bg);
}

tr:last-child td {
    border-bottom: 0;
}

.table-action {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 32px !important;
    padding: 0 18px !important;
    border-radius: 999px !important;
    color: #fff !important;
    background: #1d4ed8 !important;
    font-size: 0.84rem !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    border: none !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    box-shadow: none !important;
}

.table-action:hover {
    background: #1e3a8a !important;
    transform: translateY(-1px) !important;
    box-shadow: none !important;
    color: #fff !important;
}

.table-action.danger {
    background: #b91c1c !important;
}

.table-action.danger:hover {
    background: #991b1b !important;
    box-shadow: none !important;
}

.table-action.info {
    background: #2563eb !important;
}

.table-action.info:hover {
    background: #1e40af !important;
    box-shadow: none !important;
}

.site-admin .table-action {
    border-radius: var(--radius-sm) !important;
}

.site-admin .table-action:not(.danger):not(.info) {
    background: var(--admin-blue) !important;
}

.site-admin .table-action:not(.danger):not(.info):hover {
    background: var(--admin-blue-hover) !important;
    box-shadow: none !important;
}

/* .link-button ships with no styling of its own outside .address-card-actions — used bare for
   Activate/Deactivate toggles on a few admin pages (Bundle Management, Company Payment Methods).
   Give it the same look as .table-action so these read as real theme buttons, not plain text. */
.site-admin .link-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 18px;
    border-radius: var(--radius-sm);
    border: none;
    color: #fff;
    background: var(--admin-blue);
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: none;
}

.site-admin .link-button:hover {
    background: var(--admin-blue-hover);
    transform: translateY(-1px);
    box-shadow: none;
}

.site-admin .link-button.danger {
    background: #b91c1c;
}

.site-admin .link-button.danger:hover {
    background: #991b1b;
    box-shadow: none;
}

/* Delete button — two-step inline confirm */
.btn-delete {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 28px;
    padding: 0 11px;
    border: none;
    border-radius: 999px;
    color: var(--red);
    background: #fff1f2;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--t), color var(--t);
}

.btn-delete:hover {
    background: #fecdd3;
}

.btn-delete.is-confirming {
    color: #fff;
    background: var(--red);
}

.btn-delete-cancel {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border: none;
    border-radius: 999px;
    color: var(--muted);
    background: var(--line-light);
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    margin-left: 4px;
    transition: background var(--t);
}

.btn-delete-cancel:hover {
    background: var(--line);
}

.row-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.sort-handle-column,
.sort-handle-cell {
    width: 48px;
    min-width: 48px;
    text-align: center;
}

.drag-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 9px;
    color: #334155;
    background: transparent;
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1;
    cursor: grab;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.drag-handle:hover {
    color: #1d4ed8;
    background: rgba(29, 78, 216, 0.1);
    transform: translateY(-1px);
}

.drag-handle:active {
    cursor: grabbing;
}

.js-sortable-row.is-dragging {
    opacity: 0.65;
    outline: 2px dashed rgba(29, 78, 216, 0.45);
    outline-offset: -4px;
}

.shipping-zone-admin-grid th:last-child,
.shipping-zone-admin-grid td:last-child {
    min-width: 180px;
}

.shipping-zone-admin-grid .row-actions {
    flex-wrap: nowrap;
    justify-content: flex-start;
    white-space: nowrap;
}

.shipping-zone-admin-grid .table-action {
    padding-inline: 14px !important;
}

/* ── User manager table ────────────────────────────────────────────────── */
.user-manager-table {
    min-width: 1300px;
    table-layout: fixed;
}

.user-manager-table th,
.user-manager-table td {
    padding: 10px 12px;
    font-size: 0.82rem;
    border-right: 1px solid var(--line-light);
}

.user-manager-table th:last-child,
.user-manager-table td:last-child {
    border-right: 0;
}

.user-manager-table th:nth-child(1),
.user-manager-table td:nth-child(1) {
    width: 180px;
}

.user-manager-table th:nth-child(2),
.user-manager-table td:nth-child(2) {
    width: 120px;
}

.user-manager-table th:nth-child(3),
.user-manager-table td:nth-child(3) {
    width: 120px;
}

.user-manager-table th:nth-child(4),
.user-manager-table td:nth-child(4) {
    width: 220px;
}

.user-manager-table th:nth-child(5),
.user-manager-table td:nth-child(5) {
    width: 120px;
    text-align: center;
}

.user-manager-table th:nth-child(6),
.user-manager-table td:nth-child(6) {
    width: 140px;
}

.user-manager-table th:nth-child(7),
.user-manager-table td:nth-child(7) {
    width: 130px;
}

.user-manager-table th:nth-child(8),
.user-manager-table td:nth-child(8) {
    width: 100px;
    text-align: center;
}

/* Order detail: show full batch values (can contain multiple entries) */
.order-products-table th:nth-child(8),
.order-products-table td:nth-child(8) {
    width: 220px;
    text-align: left;
}

.order-products-table td.order-batch-cell {
    white-space: normal;
    word-break: break-word;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.25;
}

.user-manager-table th:nth-child(9),
.user-manager-table td:nth-child(9) {
    width: 60px;
    text-align: center;
}

.user-manager-table th:nth-child(10),
.user-manager-table td:nth-child(10) {
    width: 80px;
}

.user-manager-table .filter-row th {
    padding: 8px 10px;
    background: #fff;
    vertical-align: middle;
}

.user-manager-table .filter-row input,
.user-manager-table .filter-row select {
    width: 100%;
    min-height: 34px;
    padding: 6px 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.78rem;
}

.user-manager-table .filter-row select {
    padding-right: 28px !important;
    background-size: 12px;
}

.user-manager-table td a,
.order-list-table td a {
    color: var(--brand);
    font-weight: 700;
}

.user-manager-table td a:hover,
.order-list-table td a:hover {
    color: var(--brand-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ── Order Detail Redesign ────────────────────────────────────────────────── */
.order-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--line-light);
}

.order-detail-header h1 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 800;
    color: #475569;
    text-transform: uppercase;
}

.breadcrumbs {
    display: flex;
    gap: 8px;
    font-size: 0.82rem;
    color: #64748b;
}

.breadcrumbs a {
    color: #64748b;
}

.breadcrumbs a:hover {
    color: var(--brand);
}

.order-detail-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.detail-tabs {
    display: flex;
    gap: 30px;
    align-items: center;
    font-size: 0.92rem;
    font-weight: 600;
    color: #64748b;
}

/* When used as a direct child of .content-frame (e.g. Settings' category tabs), align its text
   with the hero title and table content above/below it — both are inset ~20px, but this nav has
   no padding of its own and otherwise sits flush with the sidebar edge. */
.site-admin .content-frame > .detail-tabs {
    padding-left: 20px;
}

.detail-tabs a {
    color: #64748b;
    display: inline-flex;
    align-items: center;
    padding: 10px 0 14px;
    border-bottom: 2px solid transparent;
    transition: color var(--t);
}

.detail-tabs a:hover,
.detail-tabs a.is-active {
    color: var(--brand-dark);
}

.detail-tabs a.is-active {
    border-bottom-color: var(--brand);
    font-weight: 800;
}

.customer-order-card .filter-row .quote-filter-select {
    width: 100%;
    min-width: 152px;
    height: 42px;
    border: 1.5px solid #cbd5e1;
    border-radius: 8px;
    background-color: #fff;
    color: #111827;
    font-weight: 600;
    padding: 0 40px 0 12px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280' stroke-width='2.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
}

.customer-order-card .filter-row .quote-filter-select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.12);
    outline: none;
}

.detail-tabs span {
    color: var(--line);
}

.order-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    margin-bottom: 30px;
}

.site-admin .order-detail-grid {
    padding: 20px;
}

/* Order/Estimate detail pages: the Message and Activity Log cards (order/estimate detail.html.twig)
   and the Change History panel (_audit_history_panel.html.twig) all render flush with
   .content-frame's bare edges, unlike the hero title, tab nav, and the Order Info/Billing/Shipping
   grid above them — all of which carry the page's standard 20px inset. Match it here too. */
.site-admin .detail-page-card {
    margin-left: 20px;
    margin-right: 20px;
}

/* Detail-page cards (Order/Estimate/Company detail views — not list/index pages) keep the
   rounded-corner "card" look; .site-admin .table-card's list-page default is border-radius: 0,
   so these need a selector matching both classes at once to win regardless of file order. */
.site-admin .table-card.detail-page-card,
.site-admin .table-card.company-detail-card {
    border-radius: var(--radius-md);
}

.panel.audit-history-panel {
    margin-left: 20px;
    margin-right: 20px;
}

/* ── Customer Orders (Buyer Portal) ─────────────────────────────────────── */
.site-customer .customer-order-card {
    margin-top: 14px;
}

.site-customer .customer-order-nav {
    margin-bottom: 0;
    padding: 14px 22px;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg, #ffffff, #f9fafb);
}

.site-customer .customer-order-warehouse {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #64748b;
    font-size: 0.9rem;
    font-weight: 600;
}

.site-customer .warehouse-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.site-customer .customer-order-warehouse-select {
    width: 90px;
    height: 34px;
    padding: 6px 30px 6px 10px;
    font-size: 0.9rem;
    opacity: 1;
    cursor: pointer;
}

.site-customer .customer-order-warehouse-select:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.site-customer .customer-order-warehouse-select option {
    cursor: pointer;
}

.site-customer .customer-order-table-wrap {
    border-top: 0;
}

.site-customer .customer-order-table {
    width: 100%;
    min-width: 0;
    table-layout: auto;
}

.site-customer .customer-order-table th,
.site-customer .customer-order-table td {
    padding-left: 14px;
    padding-right: 14px;
}

.site-customer .customer-order-table th {
    font-size: 0.72rem;
    letter-spacing: 0.1em;
}

.site-customer .customer-order-table th,
.site-customer .customer-order-table td {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
    vertical-align: top;
}

.site-customer .customer-order-table td {
    padding-top: 12px;
    padding-bottom: 12px;
}

.site-customer .customer-order-table thead th.is-sortable::after {
    opacity: 0;
}

.site-customer .customer-order-table thead th.is-sorted-asc::after,
.site-customer .customer-order-table thead th.is-sorted-desc::after {
    opacity: 1;
}

.site-customer .customer-order-products {
    display: grid;
    gap: 6px;
}

.site-customer .customer-order-product-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.site-customer .customer-order-product-name {
    font-weight: 600;
    color: #0f172a;
}

.site-customer .customer-order-product-qty {
    font-weight: 800;
    color: #64748b;
    white-space: nowrap;
}

.site-customer .customer-order-delivery-date {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 6px 10px;
    border: 1px solid #dbeafe;
    border-radius: 999px;
    color: #1e3a8a;
    background: #eff6ff;
    font-size: 0.84rem;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
}

.site-customer .customer-order-actions {
    white-space: nowrap;
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    justify-content: center;
    align-items: center;
    min-height: 100%;
}

.site-customer .customer-order-table td.customer-order-actions {
    vertical-align: middle;
    text-align: center;
    line-height: 1.25;
    padding-top: 12px;
    padding-bottom: 12px;
}

.site-customer .customer-order-actions .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
}

.site-customer .customer-order-actions .button + .button {
    margin-left: 0;
}

.site-customer .customer-order-reorder {
    border-color: #0369a1;
    color: #0369a1;
}

.site-customer .customer-order-reorder:hover {
    background: #eff6ff;
}

.site-customer .customer-order-reorder .reorder-icon {
    display: inline-block;
    transform: translateY(-1px);
    font-weight: 900;
    margin-right: 6px;
}

.site-customer .customer-order-detail-grid {
    grid-template-columns: 2fr 1fr;
}

.site-customer .customer-order-totals {
    margin-top: 14px;
    border-top: 1px solid var(--line-light);
    padding-top: 12px;
    display: grid;
    gap: 8px;
}

.site-customer .customer-order-totals > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    color: #475569;
    font-weight: 600;
}

.site-customer .customer-order-totals > div.is-total {
    padding-top: 10px;
    border-top: 1px dashed var(--line-light);
    color: #0f172a;
    font-weight: 800;
}

@media (max-width: 900px) {
    .site-customer .customer-order-detail-grid { grid-template-columns: 1fr; }
    .site-customer .customer-order-nav { flex-direction: column; align-items: flex-start; gap: 10px; }
    .site-customer .customer-order-warehouse { width: 100%; justify-content: flex-start; }
}

.site-customer .customer-view-order-head {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 18px;
    margin: 4px 0 18px;
}

.site-customer .customer-view-order-head__main {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

.site-customer .customer-view-order-head__title h1 {
    margin: 0;
    color: #000;
    font-size: 1rem;
    font-weight: 900;
    text-transform: uppercase;
}

.site-customer .customer-view-order-head__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.site-customer .customer-view-order-head__actions .button {
    min-height: 38px;
    padding: 0 16px;
    border-radius: 6px;
    font-size: 0.84rem;
    font-weight: 700;
}

.site-customer .customer-invoice-btn {
    background: #4b5563;
    border-color: #4b5563;
    color: #fff;
}

.site-customer .customer-invoice-btn:hover {
    background: #374151;
    border-color: #374151;
    color: #fff;
}

.site-customer .customer-view-order-head__crumbs {
    display: inline-flex;
    align-items: center;
    justify-self: end;
    gap: 10px;
    color: #64748b;
    font-size: 0.78rem;
}

.site-customer .customer-view-order-head__crumbs a {
    color: #475569;
    text-decoration: none;
}

.site-customer .customer-view-order-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.95fr);
    gap: 18px;
    align-items: start;
}

.site-customer .customer-view-order-column {
    display: grid;
    gap: 18px;
    align-content: start;
    min-width: 0;
}

.site-customer .customer-view-order-card {
    border: 1px solid #e5eaf0;
    border-radius: 4px;
    background: #fff;
    box-shadow: none;
    overflow: hidden;
}

.site-customer .customer-view-order-card--wide {
    min-width: 0;
}

.site-customer .customer-view-order-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid #e8edf2;
}

.site-customer .customer-view-order-card__head h2 {
    margin: 0;
    color: #64748b;
    font-size: 0.98rem;
    font-weight: 500;
}

.site-customer .customer-view-order-card__meta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #94a3b8;
    font-size: 0.74rem;
}

.site-customer .customer-view-order-info,
.site-customer .customer-view-order-address {
    padding: 14px 18px 18px;
}

.site-customer .customer-view-order-info > div,
.site-customer .customer-view-order-address > div {
    display: grid;
    grid-template-columns: 168px 1fr;
    gap: 14px;
    margin-bottom: 8px;
    line-height: 1.45;
}

.site-customer .customer-view-order-info > div:last-child,
.site-customer .customer-view-order-address > div:last-child {
    margin-bottom: 0;
}

.site-customer .customer-view-order-info label,
.site-customer .customer-view-order-address label {
    color: #000;
    font-size: 0.86rem;
    font-weight: 800;
}

.site-customer .customer-view-order-info span,
.site-customer .customer-view-order-address span {
    color: #0f172a;
    font-size: 0.86rem;
}

.site-customer .customer-view-order-items {
    padding: 12px 20px 0;
}

.site-customer .customer-view-order-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 52px 94px 144px;
    gap: 14px;
    align-items: center;
    padding: 18px 12px;
    border-bottom: 0;
}

.site-customer .customer-view-order-item:nth-child(odd) {
    background: #fafafa;
}

.site-customer .customer-view-order-item__name,
.site-customer .customer-view-order-item__qty,
.site-customer .customer-view-order-item__total {
    color: #0f172a;
    font-size: 0.95rem;
    line-height: 1.35;
}

.site-customer .customer-view-order-item__qty,
.site-customer .customer-view-order-item__total {
    text-align: right;
}

.site-customer .customer-view-order-line-reorder {
    justify-self: end;
    width: 128px;
    height: 42px;
    min-height: 42px;
    padding: 0 14px;
    border-color: #93c5fd !important;
    border-radius: 7px;
    background: #fafffe !important;
    color: var(--brand-dark) !important;
    font-size: 0.82rem;
    font-weight: 800;
    box-shadow: none;
}

.site-customer .customer-view-order-line-reorder:hover {
    background: #eff6ff !important;
    color: #0369a1 !important;
    transform: none;
    box-shadow: none;
}

.site-customer .customer-view-order-line-reorder .reorder-icon {
    margin-right: 2px;
    font-weight: 900;
}

.site-customer .customer-view-order-summary {
    padding: 0 18px;
}

.site-customer .customer-view-order-totals-row {
    display: flex;
    justify-content: flex-end;
    margin: 18px 0;
}

.site-customer .customer-view-order-totals-col {
    display: grid;
    gap: 14px;
    width: 100%;
    max-width: 380px;
}

.site-customer .customer-view-order-summary--boxed {
    width: 100%;
    border: 1px solid #e5eaf0;
    border-radius: 4px;
    background: #fff;
    box-shadow: none;
    padding: 20px 24px;
}

.site-customer .customer-view-order-summary > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 0;
    border-bottom: 1px solid #e8edf2;
    font-size: 0.88rem;
}

.site-customer .customer-view-order-summary > div span {
    color: #64748b;
    font-weight: 600;
}

.site-customer .customer-view-order-summary > div strong {
    color: #334155;
    font-weight: 700;
}

.site-customer .customer-view-order-summary > div.is-total {
    padding: 14px 0 4px;
    font-size: 1.05rem;
    border-bottom: 0;
}

.site-customer .customer-view-order-summary > div.is-total span {
    color: var(--ink, #0f172a);
    font-weight: 800;
}

.site-customer .customer-view-order-summary > div.is-total strong {
    color: var(--brand-dark, #1d4ed8);
    font-weight: 800;
}

.site-customer .customer-view-order-note {
    margin: 8px 18px 18px;
    padding: 12px 14px;
    border: 1px solid #f0d7aa;
    border-radius: 4px;
    background: #fff7e8;
    color: #c77a12;
    font-size: 0.84rem;
    line-height: 1.5;
}

.site-customer .customer-view-order-note--boxed {
    margin: 0;
}

.site-customer .customer-view-order-foot {
    padding: 10px 18px 18px;
}

.site-customer .customer-view-order-tax-btn {
    min-height: 36px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 700;
}

.site-customer .customer-tax-modal[hidden] {
    display: none !important;
}

.site-customer .customer-tax-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
}

.site-customer .customer-tax-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
}

.site-customer .customer-tax-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(900px, calc(100vw - 36px));
    margin: 48px auto;
    border-radius: 10px;
    background: #fff;
    box-shadow: none;
    overflow: hidden;
}

.site-customer .customer-tax-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 22px;
    border-bottom: 1px solid #e5eaf0;
}

.site-customer .customer-tax-modal__head h2 {
    margin: 0;
    color: #475569;
    font-size: 1rem;
    font-weight: 800;
}

.site-customer .customer-tax-modal__close {
    border: 0;
    background: transparent;
    color: #64748b;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
}

.site-customer .customer-tax-modal__body {
    padding: 0 22px 18px;
}

.site-customer .customer-tax-table {
    width: 100%;
    border-collapse: collapse;
}

.site-customer .customer-tax-table th,
.site-customer .customer-tax-table td {
    padding: 14px 10px;
    border-bottom: 1px solid #e5eaf0;
    color: #374151;
    font-size: 0.9rem;
}

.site-customer .customer-tax-table th {
    color: #6b7280;
    font-size: 0.84rem;
    font-weight: 800;
    text-align: left;
}

.site-customer .customer-tax-table th:not(:first-child),
.site-customer .customer-tax-table td:not(:first-child) {
    text-align: right;
}

.site-customer .customer-tax-table tfoot td {
    font-size: 0.95rem;
    font-weight: 900;
    color: #111827;
    border-bottom: 0;
    padding-top: 16px;
}

.site-customer .customer-tax-modal__foot {
    display: flex;
    justify-content: flex-end;
    padding-top: 18px;
}

.customer-reorder-modal[hidden] {
    display: none !important;
}

.customer-reorder-modal {
    position: fixed;
    inset: 0;
    z-index: 1250;
}

.customer-reorder-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
}

.customer-reorder-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(560px, calc(100vw - 36px));
    margin: 42px auto;
    padding: 26px 22px 20px;
    border-radius: 6px;
    background: #fff;
    box-shadow: none;
}

.customer-reorder-modal__close {
    position: absolute;
    top: 10px;
    right: 14px;
    border: 0;
    background: transparent;
    color: #6b7280;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
}

.customer-reorder-modal__title {
    margin: 0 0 14px;
    color: #0f172a;
    font-size: 1.02rem;
    font-weight: 800;
}

.customer-reorder-modal__body {
    margin: 0;
    color: #374151;
    font-size: 0.95rem;
    line-height: 1.6;
}

.customer-reorder-modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 26px;
}

.customer-reorder-modal__actions .button {
    min-width: 58px;
    min-height: 32px;
    border-radius: var(--radius-sm);
}

.email-change-modal[hidden] {
    display: none !important;
}

.email-change-modal {
    position: fixed;
    inset: 0;
    z-index: 1250;
}

.email-change-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
}

.email-change-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(560px, calc(100vw - 36px));
    margin: 42px auto;
    padding: 26px 22px 20px;
    border-radius: 6px;
    background: #fff;
    box-shadow: none;
}

.email-change-modal__close {
    position: absolute;
    top: 10px;
    right: 14px;
    border: 0;
    background: transparent;
    color: #6b7280;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
}

.email-change-modal__title {
    margin: 0 0 14px;
    color: #0f172a;
    font-size: 1.02rem;
    font-weight: 800;
}

.email-change-modal__body {
    margin: 0;
    color: #374151;
    font-size: 0.95rem;
    line-height: 1.6;
}

.email-change-modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 26px;
}

.email-change-modal__actions .button {
    min-width: 58px;
    min-height: 32px;
    border-radius: var(--radius-sm);
}

.checkout-delivery-modal[hidden] {
    display: none !important;
}

.checkout-delivery-modal {
    position: fixed;
    inset: 0;
    z-index: 1300;
}

.checkout-delivery-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(17, 24, 39, 0.5);
}

.checkout-delivery-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(625px, calc(100vw - 34px));
    margin: 22px auto;
    padding: 26px 26px 25px;
    border-radius: 6px;
    background: #fff;
    box-shadow: none;
}

.checkout-delivery-modal__close {
    position: absolute;
    top: 23px;
    right: 24px;
    border: 0;
    background: transparent;
    color: #737373;
    font-size: 2rem;
    line-height: 1;
}

.checkout-delivery-modal__dialog h2 {
    margin: 0 42px 22px 0;
    color: #424952;
    font-size: 1.33rem;
    font-weight: 800;
    line-height: 1.2;
}

.checkout-delivery-modal__dialog p {
    margin: 0 0 22px;
    color: #252a31;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.35;
}

.checkout-delivery-modal__actions {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
}

.checkout-delivery-modal__actions .button.primary {
    justify-content: flex-start;
    min-height: 38px;
    padding: 0 18px;
    border-color: #41508d !important;
    border-radius: 4px;
    background: #41508d !important;
    color: #fff !important;
    box-shadow: none;
    font-size: 0.99rem;
    font-weight: 800;
}

@media (max-width: 640px) {
    .checkout-delivery-modal__dialog {
        margin-top: 14px;
        padding: 22px 18px;
    }

    .checkout-delivery-modal__actions .button.primary {
        width: 100%;
        min-height: 42px;
        white-space: normal;
    }
}

.site-customer .customer-view-order-empty {
    padding: 10px 0 16px;
    color: #64748b;
    font-size: 0.86rem;
}

@media (max-width: 1100px) {
    .site-customer .customer-view-order-head {
        grid-template-columns: 1fr;
        justify-items: start;
    }

    .site-customer .customer-view-order-head__main {
        flex-direction: column;
        align-items: flex-start;
    }

    .site-customer .customer-view-order-head__crumbs {
        justify-self: start;
    }

    .site-customer .customer-view-order-grid {
        grid-template-columns: 1fr;
    }

    .site-customer .customer-view-order-info-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .site-customer .customer-view-order-head__actions {
        flex-wrap: wrap;
    }

    .site-customer .customer-view-order-info > div,
    .site-customer .customer-view-order-address > div {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .site-customer .customer-view-order-item {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .site-customer .customer-view-order-item__qty,
    .site-customer .customer-view-order-item__total {
        text-align: left;
    }
}

/* ── Customer Contact (Buyer Portal) ───────────────────────────────────── */
.site-customer .customer-faq-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 360px);
    gap: 22px;
    align-items: stretch;
    margin-bottom: 24px;
    padding: 28px;
    border: 1px solid #dbeafe;
    border-radius: 24px;
    background:
        radial-gradient(circle at top left, rgba(3, 105, 161, 0.16), transparent 32%),
        linear-gradient(135deg, #eff6ff 0%, #ffffff 45%, #eff6ff 100%);
    box-shadow: none;
}

.site-customer .customer-faq-kicker {
    display: inline-flex;
    align-items: center;
    margin-bottom: 12px;
    padding: 6px 10px;
    border-radius: 999px;
    color: #1d4ed8;
    background: rgba(29, 78, 216, 0.1);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.site-customer .customer-faq-hero h1 {
    margin: 0;
    color: #0f172a;
    font-size: clamp(2rem, 3.5vw, 3.1rem);
    line-height: 1.02;
}

.site-customer .customer-faq-hero p {
    max-width: 680px;
    margin: 14px 0 0;
    color: #475569;
}

.site-customer .customer-faq-hero-card {
    display: grid;
    align-content: start;
    gap: 10px;
    padding: 22px;
    border: 1px solid rgba(29, 78, 216, 0.14);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: none;
}

.site-customer .customer-faq-hero-card strong {
    color: #0f172a;
    font-size: 1.1rem;
}

.site-customer .customer-faq-hero-card p {
    margin: 0;
}

.site-customer .customer-faq-cta {
    width: fit-content;
    min-height: 42px;
    padding: 0 20px;
    border-radius: 999px;
}

.site-customer .customer-faq-shell {
    display: grid;
    gap: 28px;
}

.site-customer .customer-faq-section {
    padding: 22px;
    border: 1px solid #e5edf2;
    border-radius: 22px;
    background: #fff;
    box-shadow: none;
}

.site-customer .customer-faq-section-head {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    margin-bottom: 16px;
}

.site-customer .customer-faq-section-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(135deg, #1d4ed8, #0369a1);
    font-size: 1.3rem;
    font-weight: 900;
}

.site-customer .customer-faq-section-head h2 {
    margin: 0;
    color: #0f172a;
    font-size: clamp(1.35rem, 2vw, 1.95rem);
    font-weight: 900;
}

.site-customer .customer-faq-section-head p {
    margin: 6px 0 0;
    color: #64748b;
}

.site-customer .customer-faq-item {
    overflow: hidden;
    border: 1px solid #e6edf2;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%);
}

.site-customer .customer-faq-item + .customer-faq-item {
    margin-top: 12px;
}

.site-customer .customer-faq-item summary {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    padding: 18px 20px;
    cursor: pointer;
    list-style: none;
    color: #0f172a;
    font-size: 1rem;
    font-weight: 800;
}

.site-customer .customer-faq-item summary::-webkit-details-marker {
    display: none;
}

.site-customer .customer-faq-toggle {
    position: relative;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background: linear-gradient(135deg, #0369a1, #0369a1);
    box-shadow: none;
}

.site-customer .customer-faq-toggle::before,
.site-customer .customer-faq-toggle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 2px;
    border-radius: 999px;
    background: #fff;
    transform: translate(-50%, -50%);
}

.site-customer .customer-faq-toggle::after {
    width: 2px;
    height: 12px;
}

.site-customer .customer-faq-item[open] .customer-faq-toggle::after {
    display: none;
}

.site-customer .customer-faq-answer {
    padding: 0 20px 20px 58px;
    color: #475569;
}

.site-customer .customer-faq-answer p {
    margin: 0;
    color: inherit;
    font-size: 0.98rem;
    line-height: 1.75;
}

.site-customer .customer-faq-answer p + p {
    margin-top: 12px;
}

.site-customer .customer-faq-answer strong {
    color: #334155;
}

.site-customer .customer-faq-table-wrap {
    margin-top: 18px;
    overflow-x: auto;
    border: 1px solid #dbe4ea;
    border-radius: 16px;
    background: #fff;
}

.site-customer .customer-faq-table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
}

.site-customer .customer-faq-table th,
.site-customer .customer-faq-table td {
    padding: 14px 18px;
    border-bottom: 1px solid #e6edf2;
    border-right: 1px solid #e6edf2;
    text-align: left;
    vertical-align: top;
    font-size: 0.95rem;
    line-height: 1.5;
}

.site-customer .customer-faq-table th:last-child,
.site-customer .customer-faq-table td:last-child {
    border-right: 0;
}

.site-customer .customer-faq-table thead th {
    color: #334155;
    background: #f8fafc;
    font-weight: 800;
}

.site-customer .customer-faq-table tbody tr:last-child td {
    border-bottom: 0;
}

.site-customer .customer-contact-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 22px;
    align-items: start;
    margin-top: 14px;
}

.site-customer .customer-contact-intro {
    margin-top: 0;
    margin-bottom: 14px;
    color: var(--ink-body);
}

.site-customer .customer-contact-card {
    padding: 18px;
    border: 1px solid var(--line-light);
    border-radius: var(--radius-md);
}

.site-customer .customer-contact-card + .customer-contact-card {
    margin-top: 14px;
}

.site-customer .customer-contact-card-title {
    margin: 0 0 10px 0;
    font-size: 0.98rem;
    font-weight: 900;
    color: #0f172a;
}

.site-customer .customer-contact-list {
    list-style: none;
    padding: 0;
    margin: 12px 0 0 0;
    display: grid;
    gap: 10px;
    color: #334155;
    font-weight: 600;
    font-size: 0.92rem;
}

.site-customer .customer-contact-list li {
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: 10px;
    align-items: start;
}

.site-customer .customer-contact-ico {
    line-height: 1.2;
    opacity: 0.85;
}

.site-customer .customer-contact-form-card {
    padding: 18px;
    border: 1px solid var(--line-light);
    border-radius: var(--radius-md);
    position: sticky;
    top: 86px;
}

.site-customer .customer-contact-form-head h2 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 900;
    color: #0f172a;
}

.site-customer .customer-contact-form-head p {
    margin: 4px 0 0 0;
}

.site-customer .customer-contact-form {
    margin-top: 14px;
    display: grid;
    gap: 12px;
}

.site-customer .customer-contact-form .form-row label {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font-weight: 800;
    font-size: 0.78rem;
    color: #334155;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
}

.req {
    display: contents;
    color: #dc2626;
    font-weight: 900;
}

.field-error {
    display: inline-block;
    margin-top: 6px;
    color: #991b1b;
    font-weight: 800;
}

.site-customer .customer-contact-submit {
    height: 36px;
    padding: 0 18px;
    border-radius: 999px;
}

@media (max-width: 980px) { 
    .site-customer .customer-faq-hero {
        grid-template-columns: 1fr;
        padding: 22px;
    }

    .site-customer .customer-faq-section {
        padding: 18px;
    }

    .site-customer .customer-faq-item summary {
        padding: 16px;
        font-size: 0.95rem;
    }

    .site-customer .customer-faq-answer {
        padding: 0 16px 16px 16px;
    }

    .site-customer .customer-contact-grid { grid-template-columns: 1fr; } 
    .site-customer .customer-contact-form-card { position: static; } 
} 

/* ── Customer Company Users (Buyer Portal) ─────────────────────────────── */
.site-customer .customer-company-users-toolbar {
    background: #fff;
}

.site-customer .ccu-search-form {
    display: grid;
    grid-template-columns: minmax(240px, 520px) 140px;
    gap: 12px;
    align-items: center;
}

.site-customer .ccu-search-wrap {
    position: relative;
}

.site-customer .ccu-search-ico {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #64748b;
}

.site-customer .ccu-search-input {
    padding-left: 38px;
    border-radius: 10px;
    height: 42px;
}

.site-customer .ccu-search-btn {
    height: 42px;
    border-radius: 10px;
}

.site-customer .customer-company-users-actions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.site-customer .ccu-edit-company {
    background: #f59e0b !important;
    border-color: #f59e0b !important;
    color: #fff !important;
}

.site-customer .ccu-edit-company:hover {
    background: #d97706 !important;
    border-color: #d97706 !important;
    transform: translateY(-1px);
}

.site-customer .ccu-add-staff {
    background: #2563eb !important;
    border-color: #2563eb !important;
    color: #fff !important;
}

.site-customer .ccu-add-staff:hover {
    background: #1d4ed8 !important;
    border-color: #1d4ed8 !important;
    transform: translateY(-1px);
}

.site-customer .ccu-row-actions {
    overflow: visible;
    white-space: normal;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.site-customer .ccu-inline-form {
    display: inline;
}

.site-customer .ccu-reset-btn {
    background: #f59e0b !important;
    border-color: #f59e0b !important;
    color: #fff !important;
}

.site-customer .ccu-reset-btn:hover {
    background: #d97706 !important;
    border-color: #d97706 !important;
    transform: translateY(-1px);
}

.site-customer .ccu-edit-btn {
    background: #1d4ed8 !important;
    border-color: #1d4ed8 !important;
    color: #fff !important;
}

.site-customer .ccu-edit-btn:hover {
    background: #1e3a8a !important;
    border-color: #1e3a8a !important;
    transform: translateY(-1px);
}

.site-customer .ccu-delete-btn {
    background: #fff !important;
    border-color: #fecaca !important;
    color: #b91c1c !important;
    min-height: 34px;
}

.site-customer .ccu-delete-btn:hover {
    background: #fef2f2 !important;
    border-color: #fca5a5 !important;
    color: #991b1b !important;
    transform: translateY(-1px);
}

.site-customer .ccu-row-actions .button,
.site-customer .ccu-row-actions form {
    display: inline-flex;
    vertical-align: middle;
}

.site-customer .ccu-row-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.site-customer .ccu-row-actions .button + .button,
.site-customer .ccu-row-actions form + .button,
.site-customer .ccu-row-actions .button + form {
    margin-left: 0;
}

.site-customer .customer-company-users-table {
    width: 100%;
    min-width: 0;
    table-layout: auto;
}

.site-customer .customer-company-users-table th,
.site-customer .customer-company-users-table td {
    overflow-wrap: anywhere;
    white-space: normal;
}

@media (max-width: 900px) {
    .site-customer .ccu-search-form { grid-template-columns: 1fr; }
    .site-customer .customer-company-users-actions { width: 100%; justify-content: flex-start; }
    .site-customer .customer-profile-grid,
    .site-customer .customer-profile-form-grid { grid-template-columns: 1fr; }
    .site-customer .customer-profile-actions { justify-content: flex-start; flex-wrap: wrap; }
}

/* ── Customer Company Profile (Buyer Portal) ───────────────────────────── */
.site-customer .customer-company-profile-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.site-customer .customer-company-profile-right {
    display: grid;
    gap: 18px;
    align-content: start;
}

.site-customer .customer-company-profile-card .table-header {
    background: #fff;
}

.site-customer .customer-company-profile-body {
    padding: 18px 20px;
}

/* Label beside its field rather than stacked above it, mirroring the admin order form's
   .order-field-row — same 170px label column, same type, same control height. Halves the
   vertical space each field costs. */
.site-customer .customer-company-profile-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
}

.site-customer .customer-company-profile-form .profile-field-row {
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    margin-bottom: 0;
    color: #000;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: normal;
}

.site-customer .customer-company-profile-form .profile-field-row > span {
    line-height: 1.3;
}

.site-customer .customer-company-profile-form input.form-control,
.site-customer .customer-company-profile-form select.form-control {
    width: 100%;
    height: auto;
    min-height: 32px;
    padding: 5px 8px;
    border: 1.5px solid #d1d5db;
    border-radius: 5px;
    font-weight: 400;
}

/* The bordered box is the grouping — no heading, per issue #159. */
.site-customer .customer-company-profile-body .custom-fields-section {
    margin-top: 16px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: #fbfbfd;
}

.site-customer .customer-company-profile-body .custom-fields-section > *:last-child {
    margin-bottom: 0;
}

/* CustomFieldRenderer emits bare <label>text<input></label> and is shared with the admin
   screens, so the row layout is applied from here rather than by changing the generator.
   Its checkbox variant puts the text *after* two inputs, so those opt out of the grid. */
.site-customer .customer-company-profile-body .custom-fields-section label {
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    margin-bottom: 8px;
    color: #000;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: normal;
}

.site-customer .customer-company-profile-body .custom-fields-section label:has(input[type="checkbox"]) {
    display: flex;
    gap: 8px;
    align-items: center;
}

.site-customer .customer-company-profile-body .custom-fields-section label:last-child {
    margin-bottom: 0;
}

.site-customer .customer-company-profile-body .custom-fields-section input,
.site-customer .customer-company-profile-body .custom-fields-section select,
.site-customer .customer-company-profile-body .custom-fields-section textarea {
    width: 100%;
    min-height: 32px;
    padding: 5px 8px;
    border: 1.5px solid #d1d5db;
    border-radius: 5px;
    font-weight: 400;
}

.site-customer .customer-company-profile-body .custom-fields-section input[type="checkbox"] {
    width: auto;
    min-height: 0;
}

.site-customer .customer-company-profile-actions {
    display: flex;
    justify-content: flex-end;
}

.site-customer .customer-company-profile-actions .button {
    min-height: 36px;
    padding: 0 18px;
    border-radius: 10px;
}

.site-customer .customer-company-warehouses {
    display: grid;
    gap: 10px;
    padding-top: 2px;
}

.site-customer .customer-company-warehouses .check-row {
    font-weight: 700;
    color: #334155;
}

.site-customer .customer-profile-form-shell {
    display: grid;
    gap: 22px;
}

.site-customer .customer-profile-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}

.site-customer .customer-profile-panel {
    overflow: hidden;
    border: 1px solid #e4eceb;
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfefd 100%);
    box-shadow: none;
}

.site-customer .customer-profile-panel .table-header {
    min-height: 64px;
    padding: 18px 20px;
    border-bottom: 1px solid #e7efee;
    background: transparent;
}

.site-customer .customer-profile-panel .table-header h2 {
    margin: 0;
    color: #274565;
    font-size: 1.15rem;
    font-weight: 800;
}

.site-customer .customer-profile-panel-body {
    padding: 20px;
}

.site-customer .customer-profile-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.site-customer .customer-profile-form-grid label {
    display: grid;
    gap: 10px;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #475569;
}

.site-customer .customer-profile-form-grid .span-2 {
    grid-column: 1 / -1;
}

.site-customer .customer-profile-form-grid .form-control {
    height: 42px;
    min-height: 42px;
    border-radius: 8px;
    padding: 0 14px;
    color: #16324f;
    font-size: 0.9rem;
    border: 1px solid #cfdfe2;
    background: #fff;
    box-sizing: border-box;
    line-height: 1.2;
}

.site-customer .customer-profile-form-grid select.form-control {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 42px;
    background-image: linear-gradient(45deg, transparent 50%, #8aa0b6 50%), linear-gradient(135deg, #8aa0b6 50%, transparent 50%);
    background-position: calc(100% - 18px) calc(50% - 3px), calc(100% - 12px) calc(50% - 3px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
}

.site-customer .customer-profile-static-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    padding-top: 2px;
    color: #16324f;
    font-size: 0.95rem;
}

.site-customer .customer-profile-static-row span {
    color: #0f172a;
    font-weight: 500;
}

.site-customer .customer-profile-static-row strong {
    color: #16324f;
    font-weight: 800;
}

.site-customer .customer-profile-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.site-customer .customer-profile-actions .button {
    min-height: 40px;
    padding: 0 18px;
    border-radius: 8px;
}

.site-customer .customer-company-shipping {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}

.site-customer .customer-company-shipping-head h2 {
    margin: 0 0 14px 0;
    font-size: 0.86rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink);
}

.site-customer .customer-company-address-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 10px 0;
}

.site-customer .customer-company-address-badge {
    display: inline-flex;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--brand-bg);
    color: var(--brand);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.site-customer .customer-company-address-badge--billing {
    background: #fef3c7;
    color: #92400e;
}

/* Customer add/edit shipping address page */
.site-customer .customer-company-address-form-card .table-header {
    background: #fff;
}

.site-customer .customer-company-address-form-card {
    width: 50%;
    max-width: 720px;
    min-width: 520px;
}

.site-customer .customer-company-address-body {
    padding: 18px 20px;
}

.site-customer .customer-company-address-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
}

.site-customer .customer-company-address-form label {
    font-weight: 800;
    color: #0f172a;
}

.site-customer .customer-company-address-form label .form-control {
    margin-top: 6px;
}

.site-customer .customer-company-address-form .form-control {
    border-radius: 10px;
}

.site-customer .customer-company-address-form textarea.form-control {
    min-height: 90px;
    resize: vertical;
}

.site-customer .customer-company-address-form .field-error {
    display: inline-block;
    margin-top: 6px;
    color: #991b1b;
    font-weight: 800;
}

.site-customer .customer-company-address-form .customer-company-address-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 4px;
}

.breadcrumbs .breadcrumb-sep {
    padding: 0 8px;
    color: var(--muted);
    font-weight: 900;
}

@media (max-width: 760px) {
    .site-customer .customer-company-address-form { grid-template-columns: 1fr; }
}

@media (max-width: 980px) {
    .site-customer .customer-company-address-form-card { width: 100%; min-width: 0; }
}

@media (max-width: 980px) {
    .site-customer .customer-company-profile-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
    .site-customer .customer-company-profile-form { grid-template-columns: 1fr; }

    /* A 170px label column leaves too little room for the control on a phone — stack instead. */
    .site-customer .customer-company-profile-form .profile-field-row,
    .site-customer .customer-company-profile-body .custom-fields-section label {
        grid-template-columns: minmax(0, 1fr);
        gap: 4px;
    }
}

/* ── Customer Create Company User ───────────────────────────────────────── */
.site-customer .customer-company-user-create-card .table-header {
    background: #fff;
}

.site-customer .customer-company-user-create-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
}

.site-customer .customer-company-user-create-actions {
    display: flex;
    justify-content: flex-start;
    gap: 12px;
    margin-top: 10px;
}

.site-customer .customer-company-user-create-actions .button {
    min-height: 40px;
    padding: 0 18px;
    border-radius: 10px;
}

.site-customer .ccu-create-btn {
    background: var(--brand) !important;
    border-color: var(--brand) !important;
    color: #fff !important;
}

.site-customer .ccu-create-btn:hover {
    background: var(--brand-dark) !important;
    border-color: var(--brand-dark) !important;
    transform: translateY(-1px);
}

@media (max-width: 760px) {
    .site-customer .customer-company-user-create-form { grid-template-columns: 1fr; }
    .site-customer .customer-company-user-create-actions { flex-direction: column; align-items: stretch; }
}
   
.detail-panel {  
    background: #fff;  
    border: 1px solid var(--line-light);  
    border-radius: var(--radius-md);
    padding: 20px;
    box-shadow: none;
}

.detail-panel h2 {
    margin: 0 0 18px 0;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line-light);
    font-size: 1rem;
    font-weight: 700;
    color: #475569;
}

.detail-row {
    display: flex;
    margin-bottom: 12px;
    font-size: 0.88rem;
    line-height: 1.5;
}

.detail-row label {
    flex: 0 0 140px;
    margin: 0;
    font-weight: 400;
    color: #334155;
    display: block;
}

.detail-row strong {
    flex: 1;
    color: #475569;
    font-weight: 500;
}

.detail-row .badge {
    align-self: flex-start;
}

/* Admin order detail Order Info/Billing Detail/Shipping Detail cards: tighter row spacing than the shared default. */
.order-detail-panel .detail-row {
    margin-bottom: 4px;
    font-size: 0.75rem;
    line-height: 1.2;
}

.order-detail-panel .detail-row label {
    flex-basis: 168px;
    white-space: nowrap;
}

.btn-pdf {
    background: var(--brand);
    color: #fff;
    padding: 6px 14px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Override row-action-toggle circle shape for PDF button */
.btn-pdf.row-action-toggle {
    width: auto !important;
    height: auto !important;
    min-height: 36px !important;
    padding: 6px 16px !important;
    border-radius: 6px !important;
}

.btn-pdf.row-action-toggle::after {
    margin-left: 10px;
    margin-top: -4px;
    /* Align chevron */
}

.btn-back {
    background: #e2e8f0;
    color: #475569;
    padding: 6px 14px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.85rem;
}

/* ── Row Action Dropdown (Fixed) ─────────────────────────────────────────── */
.row-action-fixed-drop {
    position: fixed;
    z-index: 1100;
    background: #fff;
    border: 1.5px solid var(--line-light);
    border-radius: var(--radius-md);
    box-shadow: none;
    display: none;
    flex-direction: column;
    padding: 8px 0;
    min-width: 160px;
    width: max-content;
}

.row-action-fixed-drop.is-open {
    display: flex;
}

.row-action-fixed-drop a,
.row-action-fixed-drop button {
    display: block;
    padding: 10px 22px;
    border: 0;
    background: transparent;
    text-align: left;
    color: var(--ink);
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--t);
    white-space: nowrap;
}

.row-action-fixed-drop a:hover,
.row-action-fixed-drop button:hover {
    background: var(--brand-bg);
    color: var(--brand-dark);
}

.row-action-fixed-drop a.danger,
.row-action-fixed-drop button.danger {
    color: #b91c1c;
}

.row-action-fixed-drop a.danger:hover,
.row-action-fixed-drop button.danger:hover {
    color: #b91c1c;
}


/* ── Forms ─────────────────────────────────────────────────────────────────── */
.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

label {
    display: grid;
    gap: 5px;
    color: #374151;
    font-size: 0.875rem;
    font-weight: 600;
}

input:not([type="checkbox"]),
select,
textarea {
    width: 100%;
    min-height: 38px;
    border: 1.5px solid #d1d5db;
    border-radius: var(--radius-sm);
    padding: 7px 11px;
    color: var(--ink);
    background: #fff;
    outline: none;
    transition: border-color var(--t), box-shadow var(--t);
    font-size: 0.9rem;
}

input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--brand);
    outline: none;
    border: 0;
}

/* Admin forms: compact, Zoho-style rows — label to the left of its field on one
   line instead of stacked, since the admin console has plenty of horizontal
   space. Excludes label variants that already define their own layout
   (checkbox/radio rows, file upload, rich text, order/filter field rows, etc.) */
.site-admin .form-grid:not(.address-form-grid):not(.product-form-grid) {
    grid-template-columns: 1fr;
    gap: 8px;
}

.site-admin .form-grid:not(.address-form-grid):not(.product-form-grid) > label:not(.check-row):not(.radio-choice):not(.file-upload-label):not(.note-modal-field):not(.rich-text-field) {
    grid-template-columns: 170px minmax(0, 1fr);
    column-gap: 16px;
    row-gap: 4px;
    align-items: center;
    font-weight: 500;
    font-size: 0.8125rem;
}

.site-admin .form-grid:not(.address-form-grid):not(.product-form-grid) > label:not(.check-row):not(.radio-choice):not(.file-upload-label):not(.note-modal-field):not(.rich-text-field) small,
.site-admin .form-grid:not(.address-form-grid):not(.product-form-grid) > label:not(.check-row):not(.radio-choice):not(.file-upload-label):not(.note-modal-field):not(.rich-text-field) textarea {
    grid-column: 1 / -1;
}

.site-admin input:not([type="checkbox"]),
.site-admin select,
.site-admin textarea {
    min-height: 34px;
    padding: 6px 10px;
    font-size: 0.85rem;
}

select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280' stroke-width='2.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px;
    padding-right: 40px !important;
    cursor: pointer;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.12);
}

.site-admin input:focus,
.site-admin select:focus,
.site-admin textarea:focus {
    border-color: var(--admin-blue);
    box-shadow: 0 0 0 3px rgba(64, 141, 251, 0.16);
}

.site-admin input[type="checkbox"] {
    accent-color: var(--admin-blue);
}

input:hover:not(:focus),
select:hover:not(:focus),
textarea:hover:not(:focus) {
    border-color: #9ca3af;
}

textarea {
    min-height: 92px;
    resize: vertical;
}

.span-2 {
    grid-column: 1 / -1;
}

.form-grid .section-label {
    margin-top: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid #e5e7eb;
    color: var(--ink);
    font-size: 0.95rem;
    font-weight: 700;
}

.form-grid .section-label:first-child {
    margin-top: 0;
}

.span-2-cols {
    grid-column: 1 / span 2;
}

.col-3 {
    grid-column: 3;
}

@media (max-width: 980px) {
    .span-2-cols,
    .col-3 {
        grid-column: 1 / -1;
    }
}

.check-row {
    display: flex;
    grid-template-columns: none;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.check-row input {
    width: auto;
    min-height: auto;
}

.check-row > small {
    flex-basis: 100%;
    margin-left: 28px;
}

/* ── Notifications ────────────────────────────────────────────────────────── */
.admin-notification {
    position: fixed;
    top: 25px;
    right: 25px;
    z-index: 2000;
    padding: 14px 28px;
    border-radius: 12px;
    background: #fff;
    box-shadow: none;
    font-weight: 700;
    font-size: 0.92rem;
    transform: translateX(130%);
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border-left: 5px solid var(--admin-blue);
}

.admin-notification.is-visible {
    transform: translateX(0);
}

.admin-notification.success {
    border-left-color: var(--admin-success);
    color: #0c4a6e;
}

.admin-notification.error {
    border-left-color: #ef4444;
    color: #7f1d1d;
}

/* ── Modals ────────────────────────────────────────────────────────────────── */
.admin-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(4px);
    z-index: 3000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.admin-modal-overlay.is-visible {
    display: flex;
}

.admin-modal {
    background: #fff;
    width: 100%;
    max-width: 540px;
    border-radius: 12px;
    box-shadow: none;
    padding: 32px;
    position: relative;
    animation: modal-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.admin-modal-x {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--muted);
    font-size: 22px;
    line-height: 1;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background var(--t), color var(--t), border-color var(--t);
}

.admin-modal-x:hover {
    background: var(--admin-blue-soft);
    color: var(--admin-blue-hover);
    border-color: var(--admin-blue-soft);
}

.user-status-badge-button {
    border: 0;
    cursor: pointer;
    font: inherit;
    text-align: center;
}

.user-status-badge-button:focus-visible {
    outline: 2px solid var(--admin-blue);
    outline-offset: 2px;
}

.admin-modal-question {
    margin: 0;
    color: var(--ink-body);
    font-size: 0.95rem;
    line-height: 1.5;
}

.admin-modal-footer-split {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 26px;
}

@keyframes modal-in {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.admin-modal-header h2 {
    margin: 0 0 24px 0;
    font-size: 1.25rem;
    font-weight: 800;
    color: #1e293b;
}

/* ── Audit log detail modal ───────────────────────────────────────────────── */
.audit-detail-modal {
    max-width: 720px;
    max-height: 85vh;
    overflow-y: auto;
}

.audit-detail-meta {
    margin: -14px 0 4px;
    font-size: 0.82rem;
    color: var(--muted);
}

.audit-detail-summary {
    margin: 0 0 18px;
    font-size: 0.95rem;
    color: var(--ink-body);
}

.audit-detail-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.audit-detail-table th,
.audit-detail-table td {
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
    word-break: break-word;
}

.audit-detail-table th {
    color: var(--muted);
    font-weight: 500;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.audit-detail-table td.audit-detail-before {
    color: #b91c1c;
}

.audit-detail-table td.audit-detail-after {
    color: #0369a1;
}

/* ── Auth screens ──────────────────────────────────────────────────────────── */
.auth-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 410px;
    gap: 0;
    overflow: hidden;
    border-radius: var(--radius-xl);
    background: #fff;
    box-shadow: none;
    border: 1.5px solid var(--line);
}

.auth-visual {
    display: grid;
    align-content: center;
    min-height: 520px;
    padding: clamp(32px, 6vw, 70px);
    color: #fff;
    background:
        radial-gradient(ellipse at 20% 85%, rgba(29, 78, 216, 0.45), transparent 55%),
        radial-gradient(ellipse at 80% 20%, rgba(12, 74, 110, 0.55), transparent 55%),
        linear-gradient(145deg, #0f172a 0%, #1e3a5f 50%, #1d4ed8 100%);
}

.auth-visual h1,
.auth-visual .eyebrow {
    color: #fff;
}

.auth-visual p {
    color: rgba(255, 255, 255, 0.72);
}

.auth-visual .eyebrow {
    color: var(--brand-light);
}

.auth-card {
    padding: clamp(28px, 4vw, 44px);
    align-self: center;
}

.auth-card h2 {
    margin-bottom: 6px;
}

.auth-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Centered standalone login card */
.auth-center {
    display: grid;
    place-items: center;
    min-height: 60vh;
    padding: 20px 0 40px;
}

.auth-card-solo {
    width: min(460px, 100%);
    padding: clamp(28px, 5vw, 48px);
    border-radius: var(--radius-xl);
    background: #fff;
    box-shadow: none;
    border: 1.5px solid var(--line);
}

.auth-card-solo h2 {
    margin-bottom: 8px;
}

.auth-card-solo>p {
    margin-top: 8px;
}

.auth-foot {
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
    font-size: 0.875rem;
    color: var(--muted);
}

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

.auth-center--top {
    align-items: start;
    min-height: auto;
    padding: 36px 16px 60px;
}

.auth-card-solo.registration-card {
    width: min(860px, 100%);
}

.registration-card {
    padding: clamp(22px, 4vw, 36px);
    border-radius: var(--radius-lg);
    background: #fff;
    box-shadow: none;
    border: 1.5px solid var(--line);
}

.registration-card h2,
.registration-card .reg-section-title {
    padding-top: 20px;
    margin-top: 4px;
    border-top: 1px solid var(--line);
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.01em;
}

.registration-card h2:first-child,
.registration-card .reg-section-title:first-child {
    padding-top: 0;
    margin-top: 0;
    border-top: 0;
}

.site-customer .registration-card .form-grid {
    align-items: start;
    row-gap: 14px;
}

.site-customer .registration-card .form-grid > label {
    align-self: start;
    align-content: start;
    min-width: 0;
}

.site-customer .registration-card .form-grid > label > input,
.site-customer .registration-card .form-grid > label > select,
.site-customer .registration-card .form-grid > label > textarea,
.site-customer .registration-card .form-grid > label > .customer-password-field {
    width: 100%;
}

.site-customer .registration-card .form-grid > label > .error-message,
.site-customer .registration-card .form-grid > label > #password_match_msg {
    margin-top: 2px;
    line-height: 1.35;
}

.site-customer .registration-card .customer-password-field {
    position: relative;
    width: 100%;
}

.site-customer .registration-card .customer-password-field input {
    padding-right: 40px;
}

.site-customer .registration-card .customer-password-toggle {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border: 0;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
}

.site-customer .registration-card .customer-password-toggle:hover {
    color: var(--brand);
}

.site-customer .registration-card .customer-register-check-row {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: start;
    column-gap: 12px;
    row-gap: 0;
    margin: 0;
}

.site-customer .registration-card .customer-register-check-row--billing {
    margin-bottom: 0.5rem;
}

.site-customer .registration-card .customer-register-check-row--terms {
    grid-template-columns: 18px auto minmax(0, 1fr);
    margin-top: 1rem;
}

.site-customer .registration-card .customer-register-check-row input[type="checkbox"] {
    margin: 2px 0 0;
    justify-self: start;
}

.site-customer .registration-card .customer-register-check-text {
    display: block;
    min-width: 0;
    line-height: 1.6;
    font-weight: 600;
    color: var(--ink);
}

.site-customer .registration-card .customer-register-check-text a {
    display: inline;
    margin: 0;
    white-space: normal;
    color: var(--brand);
    text-decoration: underline;
}

.site-customer .registration-card .customer-register-check-text a:hover {
    color: var(--ink);
}

/* ── Company detail ────────────────────────────────────────────────────────── */
.company-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 0.65fr);
    gap: 16px;
}

.detail-list {
    display: grid;
    gap: 0;
    margin: 0;
}

.detail-list div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 13px 0;
    border-bottom: 1px solid var(--line-light);
}

.detail-list div:last-child {
    border-bottom: 0;
}

.detail-list dt {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 700;
}

.detail-list dd {
    margin: 0;
    font-weight: 700;
    text-align: right;
}

.company-detail-titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    box-shadow: none;
}

.company-detail-titlebar h1 {
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    letter-spacing: -0.02em;
}

.company-detail-actions,
.company-action-links {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.company-action-links {
    padding: 2px 0;
    gap: 6px;
}

.company-action-links .button {
    min-height: 32px;
    padding: 0 12px;
    font-size: 0.8125rem;
    border: 1.5px solid var(--line);
    color: var(--ink-body);
    background: #fff;
}

.company-action-links .button:hover {
    border-color: var(--brand);
    color: var(--brand-dark);
    background: var(--brand-bg);
}

.company-action-links .button.is-current {
    border-color: var(--brand);
    color: var(--brand-dark);
    background: var(--brand-bg);
    font-weight: 700;
}

.site-admin .company-action-links .button:hover {
    border-color: var(--admin-blue);
    color: var(--admin-blue-hover);
    background: var(--admin-blue-soft);
}

.site-admin .company-action-links .button.is-current {
    border-color: var(--admin-blue);
    color: var(--admin-blue-hover);
    background: var(--admin-blue-soft);
}

.mini-action {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1.5px solid var(--brand);
    border-radius: 999px;
    color: #FFF;
    background: var(--brand);
    cursor: pointer;
    text-decoration: none;
    box-shadow: none;
    transition: background var(--t), border-color var(--t), transform var(--t), box-shadow var(--t);
}

.mini-action[hidden] {
    display: none;
}

.mini-action:hover {
    border-color: var(--brand-dark);
    background: var(--brand-dark);
    transform: translateY(-1px);
    box-shadow: none;
}

.site-admin .mini-action:not(.danger) {
    border-color: var(--admin-blue);
    background: var(--admin-blue);
}

.site-admin .mini-action:not(.danger):hover {
    border-color: var(--admin-blue-hover);
    background: var(--admin-blue-hover);
}

.mini-action.danger {
    border-color: #ff1f2d;
    background: #ff1f2d;
}

.mini-action.danger:hover {
    border-color: #e11d48;
    background: #e11d48;
}

.button-compact {
    min-height: 30px;
    padding: 0 10px;
    font-size: 0.72rem;
}

.company-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(340px, 1fr);
    gap: 18px;
    padding: 20px;
}

.company-detail-main,
.company-detail-side {
    display: grid;
    align-content: start;
    gap: 18px;
}

.company-detail-card {
    overflow: hidden;
}

.company-detail-card .table-header {
    background: #fff;
}

.company-detail-card .table-header p {
    margin-top: 4px;
    font-size: 0.78rem;
}

.company-card-action {
    margin-left: auto;
    width: auto;
    align-self: flex-start;
    flex: 0 0 auto;
}

.company-detail-card th,
.company-detail-card td {
    padding: 9px 12px;
    font-size: 0.78rem;
}

.company-detail-card tbody tr:nth-child(odd) td,
.company-po-table tbody tr:nth-child(odd) td,
.company-address-table tbody tr:nth-child(odd) td {
    background: #f1f3f5;
}

.company-po-table th:nth-child(1),
.company-po-table td:nth-child(1) {
    width: 245px;
}

.company-po-table th:nth-child(2),
.company-po-table td:nth-child(2) {
    width: 90px;
}

.company-po-table th:nth-child(3),
.company-po-table td:nth-child(3) {
    width: 110px;
}

.company-po-table td[data-label="Amount"],
.company-po-table th:nth-child(5) {
    text-align: right;
}

.card-footer-actions {
    display: flex;
    justify-content: flex-end;
    padding: 12px 16px;
}

/* ── Purchase-orders card footer bar ──────────────────────────────────────── */
.card-footer-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-top: 1px solid var(--line-light);
    gap: 12px;
    flex-wrap: wrap;
}
.card-footer-left {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 13px;
    color: var(--text-muted, #64748b);
}
.card-footer-left label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}
.card-footer-left select {
    padding: 3px 8px;
    border: 1px solid var(--line-light);
    border-radius: 4px;
    font-size: 13px;
}
.po-showing { white-space: nowrap; }
.card-footer-right {
    display: flex;
    align-items: center;
    gap: 8px;
}
.card-footer-right .button {
    height: 30px;
    padding: 0 14px;
    font-size: 12px;
}

/* ── PO search form in table-header ──────────────────────────────────────── */
.po-search-form {
    display: flex;
    align-items: center;
    gap: 8px;
}
.po-search-input {
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--line-light);
    border-radius: 6px;
    font-size: 13px;
    width: 200px;
}
.po-search-form .button {
    height: 34px;
    padding: 0 16px;
    font-size: 13px;
}

.company-address-table {
    min-width: 1260px;
    table-layout: fixed;
}

.company-address-table th,
.company-address-table td {
    border-right: 1px solid var(--line-light);
    vertical-align: top;
}

.company-address-table th {
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap;
}

.company-address-table th:last-child,
.company-address-table td:last-child {
    border-right: 0;
}

.company-address-table th:nth-child(1),
.company-address-table td:nth-child(1) {
    width: 125px;
}

.company-address-table th:nth-child(2),
.company-address-table td:nth-child(2) {
    width: 140px;
}

.company-address-table th:nth-child(3),
.company-address-table td:nth-child(3) {
    width: 190px;
}

.company-address-table th:nth-child(4),
.company-address-table td:nth-child(4) {
    width: 190px;
}

.company-address-table th:nth-child(5),
.company-address-table td:nth-child(5) {
    width: 120px;
}

.company-address-table th:nth-child(6),
.company-address-table td:nth-child(6) {
    width: 140px;
}

.company-address-table th:nth-child(7),
.company-address-table td:nth-child(7) {
    width: 260px;
    white-space: normal;
    line-height: 1.45;
}

.company-address-table th:nth-child(8),
.company-address-table td:nth-child(8),
.company-address-table th:nth-child(9),
.company-address-table td:nth-child(9) {
    width: 185px;
    text-align: center;
}

.company-address-table th:nth-child(8),
.company-address-table th:nth-child(9) {
    white-space: normal;
    line-height: 1.25;
}

.company-summary-card {
    padding: 0;
    overflow: hidden;
}

.company-summary-card h2 {
    padding: 18px 20px;
    border-bottom: 1px solid var(--line);
}

.company-summary-body {
    padding: 20px;
}

.company-summary-body h3 {
    margin-bottom: 10px;
    font-size: 1rem;
}

.company-summary-body p {
    color: var(--ink-body);
    font-size: 0.82rem;
    line-height: 1.5;
}

/* Company index grid */
.company-admin-grid .table-header {
    align-items: center;
    gap: 14px;
}

.company-admin-grid {
    width: 100%;
}

.company-admin-grid .wide-table-wrap {
    max-width: 100%;
    overflow-x: auto;
}

.company-admin-grid .table-tools {
    flex: 1 1 auto;
    justify-content: flex-end;
    flex-wrap: wrap;
    min-width: 0;
}

.company-admin-grid .table-search {
    width: min(320px, 100%);
}

.company-admin-grid .button {
    flex: 0 0 auto;
}

.company-admin-grid .company-count {
    margin-right: 6px;
}

.company-table {
    min-width: 1540px;
    table-layout: fixed;
}

.company-table th,
.company-table td {
    padding: 10px 9px;
    border-right: 1px solid var(--line-light);
    font-size: 0.78rem;
}

.company-table th {
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap;
}

.company-table th:last-child,
.company-table td:last-child {
    border-right: 0;
}

.company-table th:nth-child(1),
.company-table td:nth-child(1) {
    width: 215px;
}

.company-table th:nth-child(2),
.company-table td:nth-child(2) {
    width: 220px;
}

.company-table th:nth-child(3),
.company-table td:nth-child(3) {
    width: 190px;
}

.company-table th:nth-child(4),
.company-table td:nth-child(4) {
    width: 220px;
}

.company-table th:nth-child(5),
.company-table td:nth-child(5) {
    width: 150px;
}

.company-table th:nth-child(6),
.company-table td:nth-child(6) {
    width: 210px;
}

.company-table th:nth-child(7),
.company-table td:nth-child(7) {
    width: 92px;
}

.company-table th:nth-child(8),
.company-table td:nth-child(8) {
    width: 70px;
}

.company-table th:nth-child(9),
.company-table td:nth-child(9) {
    width: 210px;
}

.company-table .filter-row th {
    padding: 8px 9px;
    background: #fff;
}

.company-table .filter-row input,
.company-table .filter-row select {
    min-height: 34px;
    padding: 6px 30px 6px 9px;
    border-width: 1px;
    border-radius: 5px;
    font-size: 0.78rem;
}

.company-table tbody tr:nth-child(even) td {
    background: #f6f7f9;
}

.company-table tbody tr:hover td {
    background: var(--brand-bg);
}

.company-table td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.company-table td[data-label="Actions"] {
    overflow: visible;
    text-overflow: clip;
}

.company-table td[data-label="Actions"] .action-group {
    gap: 10px;
    flex-wrap: nowrap;
}

/* User manager */
.user-admin-grid .table-header {
    align-items: center;
    gap: 14px;
}

.user-admin-grid .table-tools {
    flex: 1 1 auto;
    justify-content: flex-end;
}

.user-admin-grid .wide-table-wrap {
    overflow-x: auto;
}

.user-manager-table {
    min-width: 1500px;
    table-layout: fixed;
}

.user-manager-table th,
.user-manager-table td {
    padding: 10px 9px;
    border-right: 1px solid var(--line-light);
    font-size: 0.78rem;
}

.user-manager-table th:last-child,
.user-manager-table td:last-child {
    border-right: 0;
}

.user-manager-table .filter-row th {
    padding: 8px 9px;
    background: #fff;
}

.user-manager-table .filter-row input,
.user-manager-table .filter-row select {
    width: 100%;
    min-height: 34px;
    padding: 6px 30px 6px 9px;
    border: 1px solid #d1d5db;
    border-radius: 5px;
    font-size: 0.78rem;
}

.user-manager-table tbody tr:nth-child(even) td {
    background: #f6f7f9;
}

.user-manager-table tbody tr:hover td {
    background: var(--brand-bg);
}

.user-manager-table td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Order detail products table: batch can contain multiple entries; show full value on multiple lines. */
.user-manager-table.order-products-table th:nth-child(8),
.user-manager-table.order-products-table td:nth-child(8) {
    width: 240px !important;
    text-align: left;
}

.user-manager-table.order-products-table td.order-batch-cell {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: break-word;
    line-height: 1.25;
}

/* Order detail products table: wrap long product names onto multiple lines instead of truncating. */
.user-manager-table.order-products-table td.order-product-name-cell {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: break-word;
    line-height: 1.25;
}

.user-manager-table td[data-label="Actions"] {
    overflow: visible;
    text-overflow: clip;
    text-align: center;
    padding-top: 6px;
    padding-bottom: 6px;
}

.user-form-card {
    padding: 0;
    overflow: visible;
}

.user-form-card .admin-record-grid {
    padding: 26px;
    align-items: start;
    gap: 18px 24px;
}

.user-form-section {
    padding: 18px 20px;
    border: 1px solid var(--line-light);
    border-radius: 14px;
    background: #f8fafc;
}

.user-form-section h2 {
    margin: 0 0 4px;
}

.user-form-section p {
    font-size: 0.86rem;
}

.user-form-card label {
    color: var(--ink);
    font-size: 0.82rem;
    font-weight: 800;
}

.user-form-card input,
.user-form-card select {
    min-height: 34px;
}

.user-form-card .company-email-fieldset {
    margin: 2px 0 4px;
    background: #fff;
}

.row-action-menu {
    position: relative;
    display: inline-flex;
    justify-content: center;
    line-height: 0;
}

.row-action-toggle {
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    min-width: 0 !important;
    border: none;
    border-radius: 50% !important;
    color: #fff;
    background: var(--admin-blue);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
}

.row-action-toggle:hover {
    background: var(--admin-blue-hover);
    transform: scale(1.05);
}

.row-action-toggle::after {
    content: '';
    display: block;
    width: 7px;
    height: 7px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: translateY(-2px) rotate(45deg);
}

.row-action-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 20;
    display: none;
    min-width: 190px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: #fff;
    box-shadow: none;
}

.row-action-menu.is-open .row-action-dropdown {
    display: grid;
}

.row-action-dropdown a,
.row-action-dropdown button {
    display: flex;
    align-items: center;
    min-height: 36px;
    width: 100%;
    padding: 0 12px;
    border: 0;
    border-radius: 6px;
    color: var(--ink-body);
    background: transparent;
    font: inherit;
    font-size: 0.88rem;
    text-align: left;
    cursor: pointer;
}

.row-action-dropdown a:hover,
.row-action-dropdown button:hover {
    color: var(--admin-blue-hover);
    background: var(--admin-blue-soft);
}

.row-action-dropdown a.danger,
.row-action-dropdown button.danger {
    color: #b91c1c;
}

.row-action-dropdown a.danger:hover,
.row-action-dropdown button.danger:hover {
    color: #b91c1c;
}

.row-action-divider {
    display: block;
    height: 1px;
    margin: 6px 6px;
    background: var(--line);
    border-radius: 999px;
}

/* Labeled variant of .row-action-toggle (Number1 Product API Manager's
   "Load Endpoint" button) — the base rule forces a 32px icon-only circle,
   which doesn't fit a text label. Same open/close JS, just not the kebab shape. */
.load-endpoint-toggle {
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    padding: 6px 14px !important;
    border-radius: var(--radius-sm) !important;
    gap: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
}

.load-endpoint-toggle::after {
    width: 6px;
    height: 6px;
    margin-left: 2px;
    transform: translateY(-2px) rotate(45deg);
}

.company-table td[data-label="Company Name"] a {
    color: var(--ink);
    font-weight: 700;
}

.company-table td[data-label="Company Name"] a:hover {
    color: var(--brand-dark);
    text-decoration: underline;
}

@media (max-width: 900px) {
    .company-detail-layout {
        grid-template-columns: 1fr;
    }

    .company-detail-titlebar {
        align-items: flex-start;
        flex-direction: column;
    }

    .company-admin-grid .table-header {
        align-items: stretch;
        flex-direction: column;
    }

    .company-admin-grid .table-tools {
        justify-content: flex-start;
    }

    .company-admin-grid .table-search {
        flex: 1 1 260px;
        width: auto;
    }
}

@media (max-width: 560px) {
    .company-admin-grid .table-tools {
        align-items: stretch;
        flex-direction: column;
    }

    .company-admin-grid .table-search,
    .company-admin-grid .button {
        width: 100%;
    }

    .company-admin-grid .company-count {
        margin-right: 0;
    }
}

/* ── Catalog controls ──────────────────────────────────────────────────────── */
.catalog-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.catalog-search {
    width: min(300px, 100%);
    min-height: 40px;
    border: 1.5px solid #d1d5db;
    border-radius: 999px;
    padding: 0 16px;
    font-size: 0.875rem;
    outline: none;
    background: #fff;
    transition: border-color var(--t), box-shadow var(--t);
}

.catalog-search:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.1);
}

.view-toggle.active {
    color: #fff;
    background: var(--black);
    border-color: var(--black);
}

.filter-link.active {
    color: var(--brand-dark);
}

/* ── Pagination ────────────────────────────────────────────────────────────── */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 32px;
    flex-wrap: wrap;
}

.page-link {
    display: grid;
    place-items: center;
    min-width: 36px;
    white-space: nowrap;
    height: 36px;
    padding: 0 6px;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-sm);
    color: var(--muted);
    font-size: 0.875rem;
    font-weight: 600;
    transition: background var(--t), color var(--t), border-color var(--t);
}

.page-link[aria-label="First page"],
.page-link[aria-label="Last page"] {
    min-width: 52px;
    padding: 0 10px;
}

.page-link:hover {
    color: var(--ink);
    border-color: var(--brand-light);
    background: var(--brand-bg);
}

.page-link.active {
    color: #fff;
    background: var(--brand);
    border-color: var(--brand);
}

.page-link.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.page-ellipsis {
    color: var(--muted-soft);
    font-size: 0.875rem;
    padding: 0 2px;
}

/* ── Toast ─────────────────────────────────────────────────────────────────── */
.toast {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 60;
    max-width: min(360px, calc(100% - 32px));
    padding: 13px 18px;
    border-radius: var(--radius);
    color: #fff;
    background: var(--black);
    box-shadow: none;
    opacity: 0;
    transform: translateY(14px);
    pointer-events: none;
    transition: opacity 200ms ease, transform 200ms ease;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.5;
}

.toast.is-visible {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.toast.is-success {
    background: var(--brand);
}

.toast.is-error {
    background: var(--red);
}

/* ── Delete Confirmation Modal ─────────────────────────────────────────────── */
.delete-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(17, 24, 39, 0.45);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t-md), visibility var(--t-md);
}

.delete-modal-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

.delete-modal {
    background: var(--card);
    border-radius: var(--radius-md);
    box-shadow: none;
    border: 1px solid var(--line);
    padding: 32px 28px 24px;
    max-width: 420px;
    width: 100%;
    text-align: center;
    transform: scale(0.94) translateY(10px);
    transition: transform var(--t-md);
}

.delete-modal-overlay.is-open .delete-modal {
    transform: scale(1) translateY(0);
}

.delete-modal-icon {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #fff1f2;
    color: var(--red);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    flex-shrink: 0;
}

.delete-modal-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 8px;
}

.delete-modal-body {
    font-size: 0.875rem;
    color: var(--muted);
    margin: 0 0 26px;
    line-height: 1.6;
}

.delete-modal-body strong {
    color: var(--ink-body);
    font-weight: 600;
}

.delete-modal-actions {
    display: flex;
    gap: 10px;
}

.delete-modal-actions .button {
    flex: 1;
    justify-content: center;
}

.delete-modal-confirm {
    background: var(--red) !important;
    border-color: var(--red) !important;
    color: #fff !important;
}

.delete-modal-confirm:hover {
    background: #9b1c1c !important;
    border-color: #9b1c1c !important;
    color: #fff !important;
}

/* ── Scroll reveal ─────────────────────────────────────────────────────────── */
.reveal {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 380ms ease, transform 380ms ease;
}

.reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* ══════════════════════════════════════════════════════════════════════════════
   ADMIN SIDEBAR (desktop ≥ 981px)
   ══════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 981px) {
    /* The sidebar used to be a sticky CSS-grid column: its "stuck" range is capped by its own
       grid row's height, which is set by whichever column is tallest — usually .content-frame.
       On any page shorter than roughly 2x the viewport (most detail/document views, as opposed
       to the internally-scrolling list pages), the sidebar ran out of sticky travel before the
       page's real bottom and silently stopped following the scroll, leaving a blank gap in the
       left column for the remainder of the page. Fixed positioning has no such ceiling — it's
       always exactly the viewport, regardless of how tall the main content grows. */
    .site-admin .app-shell {
        /* Explicitly block, not the base rule's flex — with the sidebar now out of flow via
           position:fixed, .content-frame and .site-footer just need to stack normally. Falling
           through to display:flex here would reactivate .content-frame's base `flex: 1` (used
           by the customer site's genuinely-flex app-shell), whose flex-basis:0% makes the flex
           container's own auto height fall back to the content's full intrinsic height instead
           of respecting .content-frame:has(> .table-card)'s explicit height:100vh below. */
        display: block;
        min-height: 100vh;
    }

    .site-admin .topbar {
        position: fixed;
        top: 0;
        left: 0;
        width: 218px;
        z-index: 55;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        height: 100vh;
        gap: 0;
        padding: 0;
        border: 0;
        border-right: 1px solid var(--admin-sidebar-border);
        background: var(--admin-sidebar-bg);
        box-shadow: none;
        transition: width 220ms ease;
    }

    .site-admin .brand {
        flex: 0 0 auto;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        padding: 12px 14px;
        background: var(--admin-navy);
        color: #e5e7eb;
        transition: padding 220ms ease;
    }

    .site-admin .brand-mark {
        width: 34px;
        height: 34px;
        border-radius: 10px;
    }

    .site-admin .nav-toggle {
        display: none;
    }

    .site-admin .nav {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        justify-content: flex-start;
        width: 100%;
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
        scrollbar-width: thin;
        scrollbar-color: var(--admin-sidebar-border) transparent;
        gap: 1px;
        padding: 8px 8px;
        transition: padding 220ms ease;
    }

    .site-admin .nav::-webkit-scrollbar {
        width: 8px;
    }

    .site-admin .nav::-webkit-scrollbar-thumb {
        background: var(--admin-sidebar-border);
        border-radius: 999px;
    }

    .site-admin .nav a {
        justify-content: flex-start;
        gap: 5px;
        min-height: 32px;
        padding: 5px 10px;
        border-radius: 8px;
        color: #181c2e;
        background: transparent;
        border: 1.5px solid transparent;
        font-size: 0.8rem;
        font-weight: 500;
        white-space: normal;
        text-align: left;
    }

    .site-admin .nav a .nav-icon {
        display: grid;
        place-items: center;
        width: 18px;
        height: 18px;
        color: inherit;
        background: transparent;
        flex-shrink: 0;
        transition: all var(--t);
    }

    .site-admin .nav a:hover {
        color: var(--admin-sidebar-ink);
        background: var(--admin-sidebar-hover);
    }

    .site-admin .nav a.is-current {
        color: #fff;
        background: var(--admin-blue);
        border-color: var(--admin-blue);
    }

    .site-admin .nav a.is-current .nav-icon {
        color: inherit;
        background: transparent;
    }

    .site-admin .sidebar-footer {
        flex: 0 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        padding: 3px;
        border: 0;
        border-top: 1px solid var(--admin-sidebar-border);
        background: #ededf7;
        color: var(--admin-sidebar-muted);
        cursor: pointer;
        font: inherit;
        text-align: left;
        transition: background var(--t), color var(--t), padding 220ms ease, justify-content 220ms ease;
    }

    .site-admin .sidebar-footer:hover {
        background: #ededf7;
        color: var(--admin-sidebar-ink);
    }

    .site-admin .sidebar-collapse-icon {
        display: flex;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        border-radius: 6px;
        color: inherit;
    }

    .site-admin .sidebar-collapse-toggle svg {
        transition: transform var(--t);
    }

    /* Collapsed state */
    body.admin-sidebar-collapsed.site-admin .topbar {
        width: 76px;
    }

    body.admin-sidebar-collapsed.site-admin .content-frame {
        margin-left: 76px;
    }

    body.admin-sidebar-collapsed.site-admin .site-footer {
        margin-left: 76px;
    }

    body.admin-sidebar-collapsed.site-admin .brand {
        padding: 16px 8px;
    }

    body.admin-sidebar-collapsed.site-admin .nav {
        padding: 10px 6px;
    }

    body.admin-sidebar-collapsed.site-admin .nav-sub-section,
    body.admin-sidebar-collapsed.site-admin .nav-group-title::after {
        display: none;
    }

    .site-admin .brand-copy,
    .site-admin .nav-label {
        opacity: 1;
        max-width: 220px;
        overflow: hidden;
        transition: opacity 220ms ease, max-width 220ms ease;
    }

    .site-admin .nav-label {
        display: inline-block;
        vertical-align: middle;
    }

    body.admin-sidebar-collapsed.site-admin .brand-copy {
        opacity: 0;
    }
    body.admin-sidebar-collapsed.site-admin .nav-label {
        opacity: 0;
        max-width: 0;
    }

    body.admin-sidebar-collapsed.site-admin .nav-sub-list {
        max-height: 0 !important;
        opacity: 0 !important;
    }

    body.admin-sidebar-collapsed.site-admin .nav a,
    body.admin-sidebar-collapsed.site-admin .nav-group-title {
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
        gap: 0;
    }

    body.admin-sidebar-collapsed.site-admin .nav a .nav-icon,
    body.admin-sidebar-collapsed.site-admin .nav-group-title .nav-icon {
        margin-right: 0;
    }

    body.admin-sidebar-collapsed.site-admin .sidebar-footer {
        justify-content: center;
        padding: 10px 8px;
    }

    body.admin-sidebar-collapsed.site-admin .sidebar-collapse-toggle svg {
        transform: rotate(180deg);
    }

    .site-admin .content-frame {
        width: auto;
        max-width: none;
        margin: 0 0 0 218px;
        padding: 0 0 80px;
        transition: margin-left 220ms ease;
    }

    .admin-content-header {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin: 0;
        padding: 12px 24px;
        border-bottom: 1px solid var(--line);
        position: sticky;
        top: 0;
        z-index: 40;
        background: var(--paper);
    }

    .site-admin .site-footer {
        margin: 0 0 0 218px;
        padding: 20px 28px;
        justify-content: center;
        text-align: center;
        transition: margin-left 220ms ease;
    }
}

/* ══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE: tablet 980px
   ══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 980px) { 
    .topbar { 
        grid-template-columns: 1fr auto; 
        padding: 12px 18px; 
        min-height: 60px; 
    } 

    .site-customer .topbar {
        grid-template-columns: 1fr auto;
        row-gap: 10px;
    }

    .site-customer .topbar .customer-user-menu {
        grid-column: 1 / -1;
        justify-self: end;
    }

    .nav-toggle {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-height: 38px;
        border: 1.5px solid var(--line);
        border-radius: 999px;
        padding: 0 13px 0 11px;
        color: var(--ink);
        background: #fff;
        cursor: pointer;
        font-size: 0.82rem;
        font-weight: 700;
        transition: background var(--t), border-color var(--t);
    }

    .nav-toggle:hover {
        background: var(--line-light);
    }

    .nav-toggle-bars {
        display: flex;
        flex-direction: column;
        gap: 4px;
        width: 16px;
        flex-shrink: 0;
    }

    .nav-toggle-bars span {
        display: block;
        width: 100%;
        height: 2px;
        border-radius: 2px;
        background: currentColor;
        transition: transform 200ms ease, opacity 200ms ease;
    }

    body.nav-open .nav-toggle-bars span:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
    }

    body.nav-open .nav-toggle-bars span:nth-child(2) {
        opacity: 0;
        transform: scaleX(0);
    }

    body.nav-open .nav-toggle-bars span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
    }

    .site-admin .nav-toggle {
        color: #e2e8f0;
        border-color: rgba(255, 255, 255, 0.18);
        background: rgba(255, 255, 255, 0.08);
    }

    .nav {
        display: none;
        grid-column: 1 / -1;
        justify-content: flex-start;
        width: 100%;
        padding: 12px 0 10px;
        border-top: 1px solid var(--line);
        gap: 4px;
    }

    body.nav-open .nav {
        display: flex;
        flex-wrap: wrap;
    }

    .admin-titlebar,
    .market-hero,
    .hero,
    .marketplace-layout {
        grid-template-columns: 1fr;
    }

    .market-feature {
        min-height: 240px;
    }

    .kpi-strip,
    .category-row,
    .product-grid,
    .product-grid-market {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    .filter-panel {
        position: static;
    }

    /* Admin mobile nav */
    .site-admin .topbar {
        background: var(--admin-navy);
        border: 0;
    }

    .site-admin .nav {
        border-top-color: rgba(255, 255, 255, 0.08);
    }

    body.nav-open .site-admin .nav {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .site-admin .nav a {
        justify-content: flex-start;
        color: #cbd5e1;
    }

    .site-admin .nav a .nav-icon {
        display: grid;
        place-items: center;
        width: 22px;
        height: 22px;
        margin-right: 8px;
        border-radius: 6px;
        background: rgba(255, 255, 255, 0.08);
        flex-shrink: 0;
    }
}

/* ══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE: mobile 760px
   ══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
    .content-frame {
        width: min(100% - 22px, 1240px);
        padding-top: 20px;
        padding-bottom: 60px;
    }

    .admin-titlebar,
    .market-copy {
        padding: 22px 20px;
    }

    .admin-actions,
    .hero-actions {
        align-items: stretch;
        flex-direction: column;
        gap: 8px;
    }

    .kpi-strip,
    .category-row,
    .product-grid,
    .product-grid-market,
    .grid,
    .stats,
    .grid.two,
    .form-grid {
        grid-template-columns: 1fr;
    }

    h1 {
        font-size: clamp(1.1rem, 6vw, 1.4rem);
    }

    .market-copy h1,
    .auth-visual h1,
    .admin-titlebar h1 {
        font-size: clamp(1.3rem, 7vw, 1.9rem);
    }

    .module-row {
        padding: 14px 18px;
    }

    .module-arrow {
        display: none;
    }

    .table-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    .table-tools,
    .table-search {
        width: 100%;
        max-width: 100%;
    }

    table,
    thead,
    tbody,
    th,
    td,
    tr {
        display: block;
    }

    thead {
        display: none;
    }

    tr {
        padding: 14px 16px;
        border-bottom: 1px solid var(--line);
    }

    tr:last-child {
        border-bottom: 0;
    }

    td {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 14px;
        padding: 8px 0;
        border: 0;
        font-size: 0.9rem;
    }

    td::before {
        content: attr(data-label);
        color: var(--muted);
        font-size: 0.67rem;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        text-align: left;
        flex-shrink: 0;
        padding-top: 3px;
    }

    .auth-shell {
        grid-template-columns: 1fr;
    }

    .auth-visual {
        min-height: 256px;
        padding: 26px 22px;
    }

    .company-detail-grid {
        grid-template-columns: 1fr;
    }

    .catalog-heading {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        padding: 20px;
    }

    .catalog-controls {
        justify-content: stretch;
    }

    .catalog-controls .button,
    .catalog-search {
        flex: 1 1 100%;
    }

    .catalog-products.is-list-view .market-product {
        grid-template-columns: 1fr;
    }

    .site-footer {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 10px;
    }
}

/* ══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE: small mobile 480px
   ══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    .topbar {
        padding: 10px 14px;
    }

    .market-hero,
    .registration-card {
        border-radius: var(--radius-lg);
    }

    body.nav-open .site-admin .nav {
        grid-template-columns: 1fr;
    }

    .pagination {
        gap: 4px;
    }

    .page-link {
        min-width: 32px;
        height: 32px;
        font-size: 0.82rem;
    }
}

/* Delete/action controls */
.action-group,
.card-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.card-actions {
    margin-top: 18px;
}


/* Centered login page */
.auth-center {
    min-height: calc(100vh - 180px);
    display: grid;
    place-items: center;
    padding: 28px 0;
}

.auth-center .auth-card {
    width: min(100%, 480px);
    border-radius: 22px;
    background: #fff;
    box-shadow: none;
}

.auth-center .auth-card h1 {
    font-size: clamp(2rem, 6vw, 3.2rem);
}

/* Final action spacing polish */
.header-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.action-group {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    flex-wrap: nowrap;
}


@media (max-width: 760px) {
    .header-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .action-group {
        gap: 8px;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

}

/* Final table header toolbar alignment */
.table-card .table-header {
    display: flex;
    align-items: center;
    /*justify-content: flex-start;*/
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding: 18px 22px;
}

.table-card .table-header h2 {
    margin: 0;
    min-width: 170px;
    flex: 0 0 auto;
}

.table-card .table-header>.badge,
.table-card .table-header>.button,
.table-card .table-header>.header-actions {
    flex: 0 0 auto;
}

.table-card .table-tools {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex: 0 1 auto;
    flex-wrap: nowrap;
}

.table-card .table-count {
    white-space: nowrap;
    min-width: max-content;
    color: var(--muted);
}

.table-card .table-search {
    width: 280px;
    max-width: 100%;
}

@media (max-width: 900px) {
    .table-card .table-header h2 {
        min-width: 0;
    }

    .table-card .table-tools {
        width: 100%;
        margin-left: 0;
        justify-content: space-between;
    }

    .table-card .table-search {
        width: min(360px, 100%);
    }
}

@media (max-width: 560px) {
    .table-card .table-header {
        align-items: stretch;
        flex-direction: column;
    }

    .table-card .table-header>.badge,
    .table-card .table-header>.button,
    .table-card .table-header>.header-actions,
    .table-card .table-tools,
    .table-card .table-search {
        width: 100%;
    }

    .table-card .table-tools {
        align-items: stretch;
        flex-direction: column;
        gap: 8px;
    }

    .table-card .table-header>.button.company-card-action {
        width: auto;
        align-self: flex-start;
        height: 38px;
        min-height: 38px;
        border-radius: 999px;
    }
}

/* ── Pagination & Footer ────────────────────────────────────────────────── */
.table-footer {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 24px;
    padding: 16px 22px;
    border-top: 1px solid var(--line-light);
    background: #fcfcfd;
}

.table-count {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 500;
}

.per-page-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 500;
    white-space: nowrap;
}

.per-page-select {
    min-height: 32px;
    padding: 2px 32px 2px 10px !important;
    border: 1.5px solid #d1d5db;
    border-radius: 6px;
    background-color: #fff;
    background-position: right 10px center;
    background-size: 13px;
    font-size: 0.82rem;
    color: var(--ink);
    cursor: pointer;
}

.table-card.is-loading .wide-table-wrap {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.table-card.is-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 30px;
    margin: -15px 0 0 -15px;
    border: 3px solid var(--brand-bg);
    border-top-color: var(--brand);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    z-index: 10;
}

.site-customer .table-card {
    position: relative;
}

.site-customer .table-card.is-loading::before {
    content: "Loading...";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, calc(-50% + 34px));
    padding: 6px 12px;
    border-radius: 999px;
    color: #1d4ed8;
    background: rgba(255, 255, 255, 0.92);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    z-index: 11;
}

.site-customer .table-card.is-loading .table-pagination,
.site-customer .table-card.is-loading .detail-tabs,
.site-customer .table-card.is-loading .customer-order-warehouse,
.site-customer .table-card.is-loading .customer-company-users-actions {
    pointer-events: none;
    opacity: 0.55;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.table-pagination {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    white-space: nowrap;
    height: 34px;
    padding: 0 8px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    color: #344054;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all var(--t);
    cursor: pointer;
}

.page-btn:first-child,
.page-btn:last-child {
    min-width: 50px;
    padding: 0 10px;
}

.page-btn:hover:not(:disabled) {
    background: #f9fafb;
    border-color: #d0d5dd;
    color: #1d2939;
    transform: translateY(-1px);
    box-shadow: none;
}

.page-btn.is-active {
    background: #1d4ed8;
    border-color: #1d4ed8;
    color: #fff;
}

.site-admin .page-btn.is-active {
    background: var(--admin-blue);
    border-color: var(--admin-blue);
}

.page-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: #f2f4f7;
}

.page-ellipsis {
    color: var(--muted);
    font-weight: 500;
    padding: 0 4px;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 600px) {
    .table-footer {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }

    .table-pagination {
        justify-content: center;
    }
}

/* Product detail: separated core/pricing/inventory grid */
.product-admin-grid {
    overflow: hidden;
}

.wide-table-wrap {
    width: 100%;
    overflow-x: auto;
    border-top: 1px solid var(--line-light);
}

/* Zoho-style scroll region (admin only): the filter bar + table share ONE scroll area that
   exactly fills the remaining viewport height. Filter bar scrolls away first; the table's own
   header then sticks to the top of this region. The page title bar above stays fixed. Filter
   bar is visually flattened (see .order-filter-section below) so it flows with the title bar
   with no seam, even though it scrolls independently of it. */
/* .table-card is also used on detail/document pages (order/estimate/company detail) as a plain
   boxed-panel wrapper with no .table-scroll-region inside — those must NOT get the exact-fit
   100vh clamp below, or their real (much taller) content silently overflows past the clamped
   box while .site-footer ends up positioned right after it, well before the visual content
   actually ends. Only match when a direct-child .table-card genuinely uses the scroll-region
   model. */
.site-admin .content-frame:has(> .table-card .table-scroll-region) {
    display: flex;
    flex-direction: column;
    /* Leave room for the site footer so the page itself doesn't scroll — only the table's own
       scroll-region does. 3rem approximates the slim single-line footer. Issue #120.6. */
    height: calc(100vh - 3rem);
    padding-bottom: 0;
    box-sizing: border-box;
}

.site-admin .admin-content-header,
.site-admin .order-list-hero,
.site-admin .panel.compact-panel {
    flex: 0 0 auto;
}

.site-admin .table-card:has(.table-scroll-region) {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* On most list pages the whole table-header/table-scroll-region/table-footer trio sits inside
   a <form> (for the GET filter fields), so the form — not table-scroll-region — is the direct
   child of .table-card above. Without this, the form stays display:block and never gets a real
   height from the flex chain, so .table-scroll-region never actually clips/scrolls — the excess
   rows just overflow past .table-card's own overflow:hidden and disappear with no scrollbar. */
.site-admin .table-card > form:has(.table-scroll-region) {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.site-admin .table-card > form:has(.table-scroll-region) > .table-header {
    flex: 0 0 auto;
}

.site-admin .table-scroll-region {
    flex: 1 1 auto;
    min-height: 220px;
    overflow: auto;
}

.site-admin .table-footer {
    flex: 0 0 auto;
    padding-left: 20px;
    padding-right: 20px;
}

/* wide-table-wrap must NOT scroll on its own where a .table-scroll-region wraps it — if it did
   (even just horizontally), its overflow-x would implicitly force overflow-y to auto too (CSS
   spec quirk), making IT the sticky context instead of .table-scroll-region above. The filter
   bar stays pinned to the left edge via sticky so it doesn't slide away on horizontal scroll. */
.site-admin .table-scroll-region .wide-table-wrap {
    overflow-x: visible;
    overflow-y: visible;
}

.site-admin .order-filter-section {
    position: sticky;
    left: 0;
    z-index: 2;
}

.site-admin .wide-table-wrap thead {
    position: sticky;
    top: 0;
    z-index: 3;
}

.wide-product-table {
    min-width: 1200px;
    table-layout: fixed;
}

.wide-product-table th,
.wide-product-table td {
    padding: 2px;
    font-size: 0.74rem;
    line-height: 1.25;
    border-right: 1px solid var(--line-light);
    /* Let a narrowed column wrap its text (including long unbroken values like SKUs) instead of
       forcing a minimum width, so columns can be dragged much smaller. Issue #120.3. */
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.wide-product-table .filter-row th {
    padding: 2px;
    background: #fbfcfe;
}

.wide-product-table .filter-row input,
.wide-product-table .filter-row select {
    width: 100%;
    min-height: 28px;
    padding: 2px 4px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.74rem;
    background: #fff;
}

.wide-product-table .filter-row select {
    padding-right: 24px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280' stroke-width='2.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
    background-size: 14px;
}

.wide-product-table .filter-row input:focus,
.wide-product-table .filter-row select:focus {
    outline: 2px solid rgba(29, 78, 216, 0.14);
    outline-offset: 1px;
    border-color: var(--brand);
}

.wide-product-table .filter-row .filter-actions {
    display: grid;
    gap: 4px;
    min-width: 84px;
}

.wide-product-table .filter-row .filter-actions .button {
    width: 100%;
    min-height: 28px;
    padding: 4px 8px;
}

.wide-product-table th:last-child,
.wide-product-table td:last-child {
    border-right: 0;
}

.wide-product-table .column-groups th {
    position: sticky;
    top: 0;
    z-index: 2;
    color: #fff;
    background: #172033;
    text-align: center;
    letter-spacing: 0.11em;
}

.wide-product-table thead tr:nth-child(2) th {
    color: #344054;
    background: #eef2f7;
    vertical-align: bottom;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: auto;
}

.wide-product-table tbody td {
    vertical-align: top;
    background: #fff;
}

.wide-product-table tbody tr:nth-child(even) td {
    background: #fbfcfe;
}

.wide-product-table .product-name-cell {
    width: 180px;
    white-space: normal;
}

.product-admin-grid .table-tools {
    min-width: 360px;
}

@media (max-width: 760px) {
    .wide-table-wrap {
        overflow-x: visible;
    }

    .wide-product-table {
        min-width: 0;
        table-layout: auto;
    }

    .wide-product-table .column-groups {
        display: none;
    }
}

/* Product grid theme alignment */
.product-admin-grid {
    border: 1.5px solid var(--line);
    border-radius: var(--radius-md);
    background: #fff;
    box-shadow: none;
}

.product-admin-grid .table-header {
    background: linear-gradient(180deg, #ffffff, #f9fafb);
    border-bottom: 1px solid var(--line);
}

.product-admin-grid .header-actions .badge {
    border: 1px solid #bfdbfe;
    background: var(--admin-blue-soft);
}

.product-admin-grid .header-actions .badge.warn {
    border-color: #fed7aa;
    background: #fff7ed;
}

.product-admin-grid .header-actions .badge.invent {
    border: 1px solid #66c3e0;
    border-color: #66c3e0;
    background: #ecfeff;
    color: #155e75;
}

.product-admin-grid .wide-table-wrap {
    border-top: 0;
    background:
        linear-gradient(90deg, rgba(248, 250, 252, 0.98), rgba(248, 250, 252, 0)) left / 22px 100% no-repeat,
        linear-gradient(270deg, rgba(248, 250, 252, 0.98), rgba(248, 250, 252, 0)) right / 22px 100% no-repeat,
        #fff;
    overflow-x: hidden;
}

.product-admin-grid .wide-product-table {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
}

.product-admin-grid .wide-product-table th,
.product-admin-grid .wide-product-table td {
    overflow-wrap: normal;
    word-break: normal;
}

.product-admin-grid .wide-product-table th,
.product-admin-grid .wide-product-table td { font-size: 0.7rem; }

.product-admin-grid .wide-product-table thead th {
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: auto;
    line-height: 1.1;
    vertical-align: middle;
    overflow: visible;
}

.product-admin-grid .wide-product-table tbody td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.product-admin-grid .wide-product-table tbody td.product-name-cell,
.product-admin-grid .wide-product-table tbody td[data-label="Category"],
.product-admin-grid .wide-product-table tbody td[data-label="Private"],
.product-admin-grid .wide-product-table tbody td[data-label="Price list"] {
    white-space: normal;
    overflow: hidden;
    text-overflow: clip;
    overflow-wrap: anywhere;
}

/* Free-text columns (paragraph-length values) — truncate to one line with an ellipsis, same
   treatment as Company's Billing Address column, instead of letting table-layout:auto grow the
   column to fit the full unwrapped text. */
.product-admin-grid .wide-product-table tbody td[data-label="Remarks"] {
    max-width: 160px;
}

.product-admin-grid .wide-product-table tbody td[data-label="Short description"] {
    max-width: 200px;
}

.product-admin-grid .wide-product-table tbody td[data-label="Long description"] {
    max-width: 240px;
}

.product-admin-grid .wide-product-table tbody td[data-label="Remarks"],
.product-admin-grid .wide-product-table tbody td[data-label="Short description"],
.product-admin-grid .wide-product-table tbody td[data-label="Long description"] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.product-admin-grid .wide-product-table tbody td[data-label="Remarks"] .td-clamp,
.product-admin-grid .wide-product-table tbody td[data-label="Short description"] .td-clamp,
.product-admin-grid .wide-product-table tbody td[data-label="Long description"] .td-clamp {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-admin-grid .wide-product-table tbody td[data-label="Cost price"],
.product-admin-grid .wide-product-table tbody td[data-label="Original price"],
.product-admin-grid .wide-product-table tbody td[data-label="Sale price"],
.product-admin-grid .wide-product-table tbody td[data-label="Deposit"] {
    white-space: normal;
    overflow: hidden;
    text-overflow: clip;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 1200px) {
    .product-admin-grid .wide-table-wrap { overflow-x: auto; }
    .product-admin-grid .wide-product-table { table-layout: auto; width: max-content; min-width: 100%; }
}

.product-admin-grid .table-thumb {
    width: 22px;
    height: 22px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--line);
    background: #fff;
    display: block;
    margin: 0 auto;
}

.product-admin-grid .table-thumb-empty {
    width: 22px;
    height: 22px;
    border-radius: 4px;
    border: 1px dashed var(--line);
    background: var(--paper);
    margin: 0 auto;
}

.product-admin-grid .wide-product-table {
    border-collapse: separate;
    border-spacing: 0;
}

.product-admin-grid .wide-product-table .column-groups th {
    position: static;
    padding: 6px 8px;
    color: var(--brand-dark);
    background: var(--brand-bg);
    border-right: 1px solid #eff6ff;
    border-bottom: 1px solid #bfdbfe;
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: none;
}

.product-admin-grid .wide-product-table .column-groups th:nth-child(2) {
    color: #9a4a08;
    background: #fff7ed;
    border-right-color: #fed7aa;
    border-bottom-color: #fed7aa;
}

.product-admin-grid .wide-product-table .column-groups th:nth-child(3) {
    color: #155e75;
    background: #ecfeff;
    border-right-color: #a5f3fc;
    border-bottom-color: #a5f3fc;
}

.product-admin-grid .wide-product-table .column-groups th:nth-child(4) {
    color: #344054;
    background: #f2f4f7;
    border-bottom-color: var(--line);
}

.product-admin-grid .wide-product-table thead tr:nth-child(2) th {
    display: table-cell;
    padding: 1px 2px;
    color: #1f2937;
    background: #fbfcfe;
    border-right: 1px solid var(--line-light);
    border-bottom: 1px solid var(--line);
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    text-align: center;
    line-height: 1.1;
    vertical-align: middle;
    white-space: normal;
    overflow: visible;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: auto;
    min-width: 0;
    min-height: 0;
}

.product-admin-grid .wide-product-table thead {
    display: table-header-group;
}

.product-admin-grid .wide-product-table thead tr {
    display: table-row;
}

.product-admin-grid .wide-product-table thead tr:nth-child(2) th:first-child {
    min-width: 44px;
}

.product-admin-grid .wide-product-table thead tr:nth-child(2) th.is-sortable {
    position: relative;
    /*padding-right: 8px;*/
}

.product-admin-grid .wide-product-table thead tr:nth-child(2) th .th-label {
    display: block;
}

.product-admin-grid .wide-product-table thead tr:nth-child(2) th.is-sortable::after {
    position: static;
    display: inline-block;
    margin-left: 6px;
    top: auto;
    right: auto;
    opacity: 0;
    transform: translateY(1px);
    transition: opacity 0.15s ease;
    vertical-align: middle;
}

.product-admin-grid .wide-product-table thead tr:nth-child(2) th.is-sorted-asc::after,
.product-admin-grid .wide-product-table thead tr:nth-child(2) th.is-sorted-desc::after {
    opacity: 1;
}

.product-admin-grid .wide-product-table thead tr:nth-child(2) th.is-sorted-desc::after {
    transform: translateY(1px) rotate(180deg);
}

.product-admin-grid .wide-product-table th,
.product-admin-grid .wide-product-table td {
    border-right: 1px solid var(--line-light);
}

.product-admin-grid .wide-product-table tbody td {
    padding: 2px;
    color: var(--ink-body);
    background: #fff;
    border-bottom: 1px solid var(--line-light);
    font-size: 0.76rem;
    line-height: 1.15;
    vertical-align: middle;
}

.product-admin-grid .wide-product-table td[data-label="Private"] .privacy-badge {
    border: 1px solid transparent;
}

.product-admin-grid .wide-product-table td[data-label="Private"] .privacy-badge.privacy-private {
    border-color: #fecaca;
    background: #fff5f5;
    color: #991b1b;
}

.product-admin-grid .wide-product-table td[data-label="Private"] .privacy-badge.privacy-public {
    border-color: #bfdbfe;
    background: var(--brand-bg);
    color: var(--brand-dark);
}

.product-admin-grid .wide-product-table td[data-label="Private"] .privacy-companies {
    margin-top: 2px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    overflow: visible;
    max-width: 100%;
}

.product-admin-grid .wide-product-table td[data-label="Private"] .privacy-chip {
    display: inline-flex;
    align-items: center;
    min-height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.75);
    color: #475467;
    font-size: 0.68rem;
    font-weight: 650;
    line-height: 1;
    white-space: nowrap;
}

.product-admin-grid .wide-product-table tbody td[data-label="Private"] {
    overflow: visible;
    text-overflow: clip;
}

.product-admin-grid .wide-product-table tbody tr:nth-child(even) td {
    background: #fcfcfd;
}

.product-admin-grid .wide-product-table tbody tr:hover td,
.product-admin-grid .wide-product-table tbody tr.is-row-focus td {
    background: var(--brand-bg);
}

.product-admin-grid .wide-product-table .product-name-cell {
    color: var(--ink);
    font-weight: 750;
}

.product-admin-grid .wide-product-table td:first-child,
.product-admin-grid .wide-product-table th:first-child {
    border-left: 0;
}

.product-admin-grid .wide-product-table td:last-child,
.product-admin-grid .wide-product-table th:last-child {
    position: static;
    right: auto;
    z-index: auto;
    background: inherit;
    box-shadow: none;
    width: auto;
    min-width: 0;
    padding-right: 6px;
}

.product-admin-grid .wide-product-table thead th:last-child {
    background: #fbfcfe;
}

.product-admin-grid .wide-product-table .column-groups th:last-child {
    background: #f2f4f7;
}

.product-admin-grid .action-group {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
}

.product-admin-grid .action-group .table-action {
    min-width: 0;
    min-height: 24px;
    padding: 0 8px !important;
    border-radius: 7px;
    font-size: 0.72rem !important;
}

.product-admin-grid .wide-product-table td:last-child .action-group {
    justify-content: center;
    align-items: center;
}

.product-admin-grid .wide-product-table td:last-child {
    white-space: nowrap;
    min-width: 76px;
}

@media (max-width: 760px) {

    .product-admin-grid .wide-product-table td:last-child,
    .product-admin-grid .wide-product-table th:last-child {
        position: static;
        box-shadow: none;
    }
}

/* Product grid width/overflow correction */
.product-admin-grid .wide-table-wrap {
    overflow-y: visible;
    padding-bottom: 0;
}

.product-admin-grid .wide-product-table {
    table-layout: auto;
    width: max-content;
    min-width: 100%;
}

.product-admin-grid .wide-product-table th,
.product-admin-grid .wide-product-table td {
    box-sizing: border-box;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
}

.product-admin-grid .wide-product-table .product-name-cell,
.product-admin-grid .wide-product-table td[data-label="Remarks"],
.product-admin-grid .wide-product-table td[data-label="Short description"],
.product-admin-grid .wide-product-table td[data-label="Long description"] {
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.25;
}

.product-admin-grid .wide-product-table td[data-label="Remarks"],
.product-admin-grid .wide-product-table td[data-label="Short description"],
.product-admin-grid .wide-product-table td[data-label="Long description"] {
    /* clamp via inner wrapper to avoid tall rows */
}

.product-admin-grid .wide-product-table td[data-label="Remarks"] .td-clamp,
.product-admin-grid .wide-product-table td[data-label="Short description"] .td-clamp,
.product-admin-grid .wide-product-table td[data-label="Long description"] .td-clamp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    max-width: 100%;
}

.product-admin-grid .wide-product-table td:not(.product-name-cell):not([data-label="Remarks"]):not([data-label="Short description"]):not([data-label="Long description"]) {
    white-space: nowrap;
}

@media (max-width: 1200px) {
    .product-admin-grid .wide-table-wrap { overflow-x: auto; }
}

.product-admin-grid .action-group {
    justify-content: center;
    flex-wrap: nowrap;
    gap: 8px;
}

.product-admin-grid .action-group .table-action {
    min-width: 70px;
}

@media (max-width: 760px) {
    .product-admin-grid .wide-product-table {
        width: 100%;
        min-width: 0;
    }

    .product-admin-grid .wide-product-table td:nth-child(23),
    .product-admin-grid .wide-product-table th:nth-child(23) {
        position: static;
        box-shadow: none;
    }
}



/* Admin product submenu */
.site-admin .nav-group {
    display: grid;
    gap: 1px;
}

.site-admin .nav-group-title {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 30px;
    padding: 5px 10px;
    border-radius: 8px;
    color: #181c2e;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
    white-space: normal;
    text-align: left;
}

.site-admin .nav-group-title .nav-icon {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    color: inherit;
    background: transparent;
    transition: all 0.2s ease;
}

.site-admin .nav a.nav-sub {
    min-height: 26px;
    padding: 4px 12px 4px 32px;
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.5;
    text-align: left;
    color: #181c2e;
}

/* Product price overview matrix */
.price-matrix-grid {
    margin-top: 18px;
    overflow: hidden;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-md);
    background: #fff;
}

.price-matrix-grid .table-header {
    align-items: center;
    gap: 18px;
    background: linear-gradient(180deg, #ffffff, #f9fafb);
    border-bottom: 1px solid var(--line);
}

.price-matrix-grid .header-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.price-matrix-grid .wide-table-wrap {
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 6px;
    background: #fff;
}

.price-matrix-grid .table-thumb {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--line);
    background: #fff;
    display: block;
    margin: 0 auto;
}

.price-matrix-grid .table-thumb-empty {
    width: 44px;
    height: 44px;
    border-radius: 4px;
    border: 1px dashed var(--line);
    background: var(--paper);
    margin: 0 auto;
}

.wide-price-table {
    width: max-content;
    min-width: 100%;
    table-layout: auto;
    border-collapse: separate;
    border-spacing: 0;
}

/* Estimate create/edit form's line table. .wide-price-table's default sizing (width: max-content
   + table-layout: auto) lets 14 columns of form controls each grow to their widest content, so
   the table ran far past the card and the right-hand columns (Original Price onwards) fell off
   the end of the horizontal scroll. Switch to the same strategy order's line table uses — fixed
   layout, an explicit min-width, and a percentage width per column off the <colgroup> — so every
   column gets a predictable share and the wrap's overflow-x kicks in at a known point.

   The pixel values are NOT order's: estimate's Batch cell is a single plain text input rather
   than order's label + date pair (which needs a 220px fixed column), so estimate needs ~100px
   less total width for the same 14 columns. */
.wide-price-table.estimate-line-table {
    width: 100%;
    min-width: 1400px;
    table-layout: fixed;
}

/* Comfortable spacing compared to the dense 2px cells .wide-price-table uses for the bulk
   pricing/inventory grids, but tighter than it was — 10px/12px of padding on 14 columns is most
   of what pushed the table past the card in the first place. */
.wide-price-table.estimate-line-table th,
.wide-price-table.estimate-line-table td {
    padding: 6px 6px;
    font-size: 0.78rem;
    white-space: normal;
    word-break: normal;
}

/* Headers have to wrap: "Original Price"/"Tax Code" don't fit their column on one line, and a
   nowrap header would silently widen the whole column under table-layout: fixed. */
.wide-price-table.estimate-line-table thead th {
    color: #000;
    background: #f8fafc;
    font-size: 0.7rem;
    letter-spacing: 0.13em;
    line-height: 1.25;
    text-transform: uppercase;
    text-align: center;
    vertical-align: bottom;
}

/* Product names are long (brand + model + size) and the searchable-select panel derives its
   width from the trigger's, so the Name column gets the largest share — same reasoning as
   .order-col-name, but the split is tuned to this table's own column set. */
.estimate-col-name { width: 28%; }
.estimate-col-location { width: 11%; }
.estimate-col-sku { width: 8%; }
.estimate-col-qty { width: 5%; }
.estimate-col-weight { width: 6%; }
.estimate-col-unit { width: 5%; }
.estimate-col-tax { width: 6%; }
.estimate-col-tax-amount { width: 6%; }
.estimate-col-cost { width: 6%; }
.estimate-col-original { width: 7%; }
.estimate-col-price { width: 6%; }
.estimate-col-subtotal { width: 6%; }
.estimate-col-actions { width: 94px; }

/* .form-control's own 0.5rem/0.75rem padding is sized for full-width form rows, not for a
   94px-wide table cell — without min-width: 0 these overflow their column once the layout is
   fixed. */
.estimate-line-table .form-control {
    width: 100%;
    min-width: 0;
    min-height: 26px;
    height: 26px;
    padding: 2px 4px;
    font-size: 0.8rem;
    line-height: 1.1;
}

.estimate-line-table select.form-control {
    padding-right: 18px;
}

.estimate-line-table input[type="number"].form-control {
    padding-right: 2px;
}

/* Read-only computed cells (Tax $, Original Price, Subtotal) sit next to 26px-tall inputs, so
   nudge them onto the same baseline and keep their amounts on one line. */
.estimate-line-table .js-estimate-line-tax,
.estimate-line-table .js-estimate-original,
.estimate-line-table .js-estimate-subtotal {
    display: block;
    padding-top: 6px;
    text-align: right;
    white-space: nowrap;
}

/* Actions cell: the product-edit link and the remove button were a 30px .mini-action next to a
   full-size text button, which neither fit the column nor lined up. Match order's
   .order-line-controls treatment — two equal 26px pills, and an explicit svg size, since the
   inline <svg> carries no width/height of its own and .mini-action alone never sized it. */
.estimate-line-controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
}

.estimate-line-controls .mini-action {
    width: 26px;
    min-width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    color: #fff;
    font-weight: 900;
    line-height: 1;
}

.estimate-line-controls .mini-action svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
}

.estimate-line-controls .mini-action.info {
    background: #3b5ba7;
}

/* Same colour order's per-row "add a line below this one" pill uses (.order-line-controls). */
.estimate-line-controls .mini-action.success {
    background: #0369a1;
}

.estimate-line-controls .mini-action.danger {
    background: #ff1f2d;
}

.wide-price-table th,
.wide-price-table td {
    box-sizing: border-box;
    padding: 2px;
    border-right: 1px solid var(--line-light);
    border-bottom: 1px solid var(--line-light);
    color: var(--ink-body);
    font-size: 0.78rem;
    line-height: 1.25;
    text-align: left;
    vertical-align: top;
}

/* Inventory page's system-computed Hold/Pending/Approved/Available cells — read-only,
   distinguished from the editable Starting Inventory cell in the same region group. */
.wide-price-table td.inventory-readonly-cell {
    color: var(--muted);
}

.wide-price-table td.inventory-available-cell {
    color: var(--ink);
}

.wide-price-table td.inventory-available-cell.is-oversold {
    color: var(--red);
}

/* Price matrix header: label + bulk-apply icons (page/all) */
.wide-price-table th.has-dual-icons {
    white-space: nowrap;
}

.wide-price-table th.has-dual-icons,
.wide-price-table th.js-client-sort {
    cursor: pointer;
}

.wide-price-table th.js-client-sort::after,
.wide-price-table th.has-dual-icons::after {
    content: '';
    display: none;
    margin-left: 6px;
    width: 12px;
    height: 12px;
    transform: translateY(1px);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23334155' stroke-width='2.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 11px;
    opacity: 0.6;
    pointer-events: none;
}

.wide-price-table th.js-client-sort[data-sort-dir='asc']::after,
.wide-price-table th.js-client-sort[data-sort-dir='desc']::after,
.wide-price-table th.has-dual-icons[data-sort-dir='asc']::after,
.wide-price-table th.has-dual-icons[data-sort-dir='desc']::after {
    display: inline-block;
}

.wide-price-table th.js-client-sort[data-sort-dir='asc']::after,
.wide-price-table th.has-dual-icons[data-sort-dir='asc']::after {
    transform: translateY(1px);
    opacity: 0.95;
}

.wide-price-table th.js-client-sort[data-sort-dir='desc']::after,
.wide-price-table th.has-dual-icons[data-sort-dir='desc']::after {
    transform: translateY(1px) rotate(180deg);
    opacity: 0.95;
}

.wide-price-table th.has-dual-icons .th-label {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.wide-price-table th.has-dual-icons .th-icons {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    line-height: 1;
    opacity: 0.85;
}

.wide-price-table th.has-dual-icons .th-iconbox {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    background: #fff;
    padding: 0;
    font-size: 12px;
    font-weight: 800;
    color: #111827;
}

.wide-price-table th.has-dual-icons .th-iconbox:hover {
    background: #f8fafc;
    border-color: #94a3b8;
}

/* These icons are decorative; don't steal focus/clicks while editing inputs. */
.wide-price-table th.has-dual-icons .th-icons,
.wide-price-table th.has-dual-icons .th-iconbox {
    cursor: pointer;
    user-select: none;
}

/* Price matrix: dark separator after each price list's last column (Effective),
   including the final visible column. Use a real border to avoid "broken" lines
   across row boundaries / scroll areas. */
.price-matrix-grid .wide-price-table th.price-group-end,
.price-matrix-grid .wide-price-table td.price-group-end {
    box-shadow: none;
    border-right: 2px solid #111827 !important;
}

/* Ensure last column keeps the separator even though the generic table rule removes last-child border-right. */
.price-matrix-grid .wide-price-table th.price-group-end:last-child,
.price-matrix-grid .wide-price-table td.price-group-end:last-child {
    border-right: 2px solid #111827 !important;
}

/* Price matrix filter row (matches other admin tables) */
.wide-price-table .filter-row th {
    padding: 4px;
    background: #fbfcfe;
}

.wide-price-table .filter-row input,
.wide-price-table .filter-row select {
    width: 100%;
    min-height: 32px;
    padding: 4px 6px;
    border: 1.5px solid #d1d5db;
    border-radius: 8px;
    color: var(--ink-body);
    background: #fff;
    font-size: 0.8rem;
}

.wide-price-table .filter-row input:focus,
.wide-price-table .filter-row select:focus {
    outline: 2px solid rgba(29, 78, 216, 0.16);
    outline-offset: 1px;
    border-color: var(--brand);
}

.wide-price-table .price-display {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    min-height: 24px;
    padding: 1px 3px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.wide-price-table .price-display:hover {
    background: var(--brand-bg);
    border-color: var(--brand-light);
}

.wide-price-table .price-input {
    display: none;
    width: 100%;
    min-width: 0;
}

.wide-price-table tr.is-editing .price-input {
    display: block;
}

.wide-price-table tr.is-editing .price-display {
    display: none;
}

.wide-price-table tr.is-editing td {
    background: #f8fafc;
}

.wide-price-table tr.is-editing td {
    padding: 3px 4px;
}

.wide-price-table tr.is-editing .price-input:not([type="hidden"]) {
    min-height: 26px;
    height: 26px;
    padding: 2px 4px;
    border-radius: 6px;
    font-size: 0.8rem;
    line-height: 1.1;
}

.wide-price-table tr.is-editing select.price-input {
    padding-right: 18px;
}

.wide-price-table tr.is-editing input[type="number"].price-input {
    padding-right: 2px;
}

.wide-price-table .price-effective {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 1px 3px;
    color: var(--ink);
}

.wide-price-table .price-subline {
    margin-top: 2px;
    padding: 0 8px 6px;
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--muted);
    white-space: nowrap;
}

.wide-price-table th:last-child,
.wide-price-table td:last-child {
    border-right: 0;
}

.wide-price-table .column-groups th {
    padding: 13px 12px;
    color: var(--brand-dark);
    background: #eff6ff;
    border-bottom: 1px solid #bfdbfe;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-align: center;
    vertical-align: middle;
    line-height: 1.15;
    text-transform: uppercase;
}

.wide-price-table .column-groups th.price-group-title.is-warm {
    color: #9a4a08;
    background: #fff7ed;
    border-bottom-color: #fed7aa;
}

.wide-price-table .column-groups th.price-group-title.is-cool {
    color: #155e75;
    background: #ecfeff;
    border-bottom-color: #a5f3fc;
}

.wide-price-table thead tr:nth-child(2) th,
.wide-price-table .column-groups th[rowspan] {
    color: #475467;
    background: #fbfcfe;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-align: center;
    text-transform: uppercase;
    white-space: normal;
    vertical-align: middle;
    line-height: 1.15;
    padding-top: 13px;
    padding-bottom: 13px;
}

.wide-price-table tbody td {
    background: #fff;
}

.wide-price-table tbody tr:nth-child(even) td {
    background: #fcfcfd;
}

.wide-price-table tbody tr:hover td,
.wide-price-table tbody tr.is-row-focus td {
    background: var(--brand-bg);
}

.wide-price-table .product-name-cell {
    color: var(--ink);
    font-weight: 400;
    white-space: normal;
    overflow-wrap: anywhere;
}

.wide-price-table td[data-label="Default price"] {
    white-space: normal;
}

.wide-price-table td:not(.product-name-cell):not([data-label="Default price"]):not([data-label="Actions"]) {
    white-space: nowrap;
}

/* The nowrap rule directly above was written for the bulk pricing/inventory grids, which use
   .wide-price-table on its own, but its three :not() arguments give it specificity (0,4,1) — enough
   to outrank the `.wide-price-table.estimate-line-table th, td` block at (0,2,1) that asks for
   `white-space: normal`. Estimate's line table carries both classes, so every one of its cells was
   silently forced back to nowrap. Invisible on the editable rows (their cells hold fixed-width form
   controls), but the computed fee rows' label cell is a bare text node, so a long label like
   "BC Environmental Fee" ran past its column into the cells beside it instead of wrapping — which is
   why only estimate showed this and order's .order-lines-table (no .wide-price-table) never did.
   Re-assert the wrap here instead of narrowing the rule above, which the pricing grids still need. */
.wide-price-table.estimate-line-table td {
    white-space: normal !important;
    word-break: normal !important;
}

.wide-price-table .price-type {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 4px 9px;
    border-radius: 999px;
    color: var(--brand-dark);
    background: var(--brand-bg);
    font-weight: 800;
    white-space: nowrap;
}

.wide-price-table td[data-label="Actions"],
.wide-price-table th:last-child {
    text-align: center;
    vertical-align: middle;
}

.wide-price-table td[data-label="Actions"] .action-group {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap !important;
    gap: 10px;
    width: 100%;
}

/* Order list */
.order-filter-section {
    padding: 16px 20px 10px;
    border-bottom: 1px solid var(--line);
    background: #f9fafb;
}

/* Zoho-style: filter bar flattened to flow with the fixed title bar above it, no seam */
.site-admin .order-filter-section {
    padding: 4px 20px 14px;
    background: var(--admin-table-head-bg);
}

.order-filter-fields {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    flex-wrap: wrap;
}

.order-filter-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1 1 170px;
    min-width: 140px;
}

.order-filter-field > span {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--muted);
}

.order-filter-field input {
    width: 100%;
    min-height: 34px;
    padding: 5px 10px;
    border: 1.5px solid #d1d5db;
    border-radius: 7px;
    background: #fff;
    color: var(--ink-body);
    font-size: 0.85rem;
}

.order-filter-field input:focus {
    outline: 2px solid var(--admin-blue-soft);
    outline-offset: 1px;
    border-color: var(--admin-blue);
}

/* Zoho-style: "Filter by:" prefix + each field as ONE unified pill (label + value
   together inside one bordered pill), not a separate label above a separately-boxed
   input. Same inputs, same Search/Reset — just laid out and skinned like Zoho's
   "Filter By:  Status: All Journals ▾  Period: All ▾" bar. */
.site-admin .order-filter-label {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    white-space: nowrap;
    align-self: center;
}

.site-admin .order-filter-fields {
    align-items: center;
    gap: 10px;
}

.site-admin .order-filter-field {
    flex-direction: row;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    min-width: 0;
    padding: 4px 12px;
    border: 1px solid var(--admin-sidebar-border);
    border-radius: var(--radius-sm);
    background: #fff;
    transition: background var(--t), border-color var(--t);
}

.site-admin .order-filter-field:hover {
    background: var(--admin-sidebar-hover);
}

.site-admin .order-filter-field:focus-within {
    background: #fff;
    border-color: var(--admin-blue);
}

.site-admin .order-filter-field > span {
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
    color: var(--ink-body);
    white-space: nowrap;
}

.site-admin .order-filter-field input {
    width: auto;
    min-height: 24px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.site-admin .order-filter-field input:focus {
    outline: none;
}

.batch-field-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.batch-field-group #js-batch-number {
    width: 64px;
    min-width: 0;
    flex-shrink: 0;
    text-align: center;
}

.batch-field-group #js-batch-date {
    flex: 1 1 0;
    min-width: 0;
}

.batch-x-sep {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--muted);
    flex-shrink: 0;
    line-height: 1;
}

.order-filter-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
    padding-bottom: 1px;
}

.order-list-table .filter-row input,
.order-list-table .filter-row select {
    width: 100%;
    min-height: 40px;
    padding: 8px 10px;
    border: 1.5px solid #d1d5db;
    border-radius: 8px;
    color: var(--ink-body);
    background: #fff;
    font-size: 0.85rem;
}

.order-list-table .filter-row input:focus,
.order-list-table .filter-row select:focus {
    outline: 2px solid var(--admin-blue-soft);
    outline-offset: 1px;
    border-color: var(--admin-blue);
}

.order-admin-grid .table-header {
    align-items: center;
    flex-direction: row;
    gap: 14px;
}

.order-admin-grid .table-tools {
    flex: 1 1 auto;
    justify-content: flex-end;
    flex-wrap: wrap;
    min-width: 0;
}

.order-admin-grid .table-search {
    width: min(320px, 100%);
}

.order-status-tabs {
    display: flex;
    gap: 6px;
    margin-top: 10px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
}

.order-status-tabs::-webkit-scrollbar {
    display: none;
}

.order-status-tabs a,
.order-status-tabs button {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 12px;
    border: 1.5px solid transparent;
    border-radius: var(--radius-sm);
    color: #1e3a8a;
    background: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    white-space: nowrap;
    transition: background var(--t), border-color var(--t), color var(--t);
    cursor: pointer;
    appearance: none;
}

.order-status-tabs a:hover,
.order-status-tabs a.is-active,
.order-status-tabs button:hover,
.order-status-tabs button.is-active {
    color: var(--admin-blue);
    border-color: var(--admin-blue);
    background: var(--admin-blue-soft);
}

.order-admin-grid .wide-table-wrap {
    border-top: 1px solid var(--line-light);
    overflow-x: visible;
    box-sizing: border-box;
}

.order-list-table {
    width: 100%;
    min-width: 1090px;
    table-layout: fixed;
}

.order-list-table th,
.order-list-table td {
    padding: 5px 6px;
    border-right: 1px solid var(--line-light);
    font-size: 0.78rem;
}

.order-list-table th {
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap;
}

.order-list-table thead tr:first-child th {
    white-space: normal;
    line-height: 1.1;
    vertical-align: bottom;
}

/* Orders list (admin): columns no longer hide at narrow widths — the wrapper scrolls horizontally instead (see .order-admin-grid .wide-table-wrap above). */
@media (max-width: 1180px) {
    .order-list-table th,
    .order-list-table td {
        font-size: 0.74rem;
        padding: 4px 5px;
    }
}

.order-list-table td {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    word-break: break-word;
    vertical-align: middle;
}

/* Orders list: improve readability when wrapping */
.order-list-table td {
    line-height: 1.25;
}

.order-list-table th:last-child,
.order-list-table td:last-child {
    border-right: 0;
}

/* Zoho-style: table card spans edge-to-edge; only the first/last column carries the
   left/right breathing room, not the whole card (header band + row backgrounds still
   reach the card's edge). Applies to any admin table inside a wide-table-wrap. */
.site-admin .wide-table-wrap th:first-child,
.site-admin .wide-table-wrap td:first-child {
    padding-left: 20px;
}

.site-admin .wide-table-wrap th:last-child,
.site-admin .wide-table-wrap td:last-child {
    padding-right: 20px;
}

/* Product's table has its own sticky pinned last-column treatment with a deliberately
   small fixed padding — more specific, so it keeps winning over the generic rule above. */
.site-admin .product-admin-grid .wide-product-table th:last-child,
.site-admin .product-admin-grid .wide-product-table td:last-child {
    padding-right: 6px;
}

.order-list-table tbody tr:nth-child(even) td {
    background: #f6f7f9;
}

.order-list-table tbody tr:hover td {
    background: var(--brand-bg);
}

.site-admin .order-list-table tbody tr:hover td {
    background: var(--admin-row-hover);
}

.order-list-table .filter-row th {
    padding: 5px 6px;
    background: #fff;
}

.order-list-table .filter-row input,
.order-list-table .filter-row select {
    min-height: 30px;
    padding: 5px 6px;
    border-width: 1px;
    border-radius: 5px;
    font-size: 0.78rem;
}

/* Filter row (any admin table): same background as the column-header row above it (one
   continuous gray band), with each input/select as a clear white field inside it. */
.site-admin .wide-table-wrap .filter-row th {
    background: var(--admin-table-head-bg);
}

.site-admin .wide-table-wrap .filter-row input,
.site-admin .wide-table-wrap .filter-row select {
    border-color: var(--admin-sidebar-border);
    border-radius: 4px;
    background: #fff;
    box-shadow: none;
}

.site-admin .wide-table-wrap .filter-row input:focus,
.site-admin .wide-table-wrap .filter-row select:focus {
    border-color: var(--admin-blue);
    background: #fff;
    box-shadow: none;
}

.order-list-table td[data-label="Actions"] {
    overflow: visible;
    text-overflow: clip;
    text-align: center;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 0;
}

.order-list-table td[data-label="Actions"] .row-action-menu {
    margin: 0 !important;
}

.order-list-table td[data-label="Actions"] .row-action-toggle {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    border-radius: 50% !important;
}

.link-strong {
    color: var(--admin-blue);
    font-weight: 800;
}

.link-strong:hover {
    color: var(--admin-blue-hover);
    text-decoration: underline;
}

.order-status {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 4px 9px;
    border-radius: 7px;
    color: #334155;
    background: #e2e8f0;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: capitalize;
}

.order-status-cancelled,
.order-status-canceled {
    color: #ff5a3d;
    background: #fee2e2;
}

.order-status-completed {
    color: #1d4ed8;
    background: #bfdbfe;
}

.order-status-processing {
    color: #c05621;
    background: #ffedd5;
}

.order-status-pending,
.order-status-draft {
    color: #b45309;
    background: #fef3c7;
}

.order-status-awaiting-payment {
    color: #3730a3;
    background: #e0e7ff;
}

/* Zoho-style: order status as plain text, no pill background (admin only) */
.site-admin .order-status {
    min-height: auto;
    padding: 0;
    border-radius: 0;
    background: transparent;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.site-admin .order-status-draft {
    color: var(--admin-badge-gray);
    background: transparent;
}

.site-admin .order-status-pending {
    color: var(--amber);
    background: transparent;
}

.site-admin .order-status-processing {
    color: var(--admin-blue);
    background: transparent;
}

.site-admin .order-status-completed {
    color: var(--admin-success);
    background: transparent;
}

.site-admin .order-status-cancelled,
.site-admin .order-status-canceled {
    color: var(--red);
    background: transparent;
}

.empty-table-cell {
    padding: 34px 18px !important;
    text-align: center !important;
    background: #fff;
}

.empty-table-cell strong {
    display: block;
    color: var(--ink);
    font-size: 1rem;
}

.empty-table-cell span {
    display: block;
    margin-top: 4px;
    color: var(--muted);
}

.order-create-layout {
    display: grid;
    grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.order-create-summary {
    position: sticky;
    top: 92px;
    padding: 24px;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-md);
    background:
        radial-gradient(circle at 92% 12%, rgba(29, 78, 216, 0.12), transparent 10rem),
        linear-gradient(145deg, #fff 0%, #f8fafc 100%);
    box-shadow: none;
}

.order-create-summary .summary-kicker {
    display: inline-flex;
    margin-bottom: 12px;
    padding: 5px 10px;
    border-radius: 999px;
    color: var(--brand-dark);
    background: var(--brand-bg);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.order-create-summary h2 {
    margin-bottom: 8px;
    font-size: 1.3rem;
}

.order-create-summary p {
    font-size: 0.88rem;
}

.summary-list {
    display: grid;
    gap: 10px;
    margin-top: 20px;
}

.summary-list div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--line-light);
    border-radius: 10px;
    background: #fff;
}

.summary-list span {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.summary-list strong {
    color: var(--ink);
    font-size: 0.84rem;
}

.order-create-card {
    padding: 0;
    overflow: hidden;
}

.order-create-grid {
    padding: 26px;
}

.form-section-title {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 18px;
    border: 1px solid var(--line-light);
    border-radius: 14px;
    background: #f8fafc;
}

.form-section-title>span {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    color: #fff;
    background: var(--brand);
    font-weight: 900;
    flex: 0 0 auto;
}

.form-section-title h2 {
    margin: 0 0 4px;
}

.form-section-title p {
    font-size: 0.84rem;
}

.order-line-placeholder {
    padding: 24px;
    border: 1.5px dashed #bfdbfe;
    border-radius: 14px;
    background: var(--brand-bg);
    text-align: center;
}

.order-line-placeholder strong {
    display: block;
    color: var(--brand-dark);
    font-size: 1rem;
}

.order-line-placeholder p {
    max-width: 560px;
    margin: 6px auto 0;
}

.order-create-shell {
    display: grid;
    gap: 24px;
}

.order-company-card,
.order-workspace-card {
    padding: 22px;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-md);
    background: #fff;
    box-shadow: none;
}

.site-admin .order-company-card,
.site-admin .order-workspace-card {
    border-radius: 0;
}

.order-company-picker {
    display: grid;
    grid-template-columns: 280px minmax(260px, 1fr) minmax(160px, 260px);
    gap: 22px;
    align-items: center;
}

.order-company-picker label {
    color: var(--ink);
    font-size: 0.875rem;
    font-weight: 500;
}

.order-company-select select,
.order-field-row input,
.order-field-row select,
.order-lines-table select,
.order-total-box input {
    width: 100%;
    min-height: 32px;
    padding: 5px 8px;
    border: 1.5px solid #d1d5db;
    border-radius: 5px;
    color: var(--ink-body);
    background-color: #fff;
}

.order-company-select select {
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280' stroke-width='2.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px;
}

.order-company-picker .button.primary {
    border-radius: var(--radius-sm);
}

.order-company-select select:focus,
.order-field-row input:focus,
.order-field-row select:focus,
.order-lines-table select:focus,
.order-total-box input:focus {
    outline: 2px solid rgba(64, 141, 251, 0.2);
    outline-offset: 1px;
    border-color: var(--admin-blue);
}

.order-workspace-card {
    position: relative;
    max-width: 100%;
    overflow: hidden;
}

.form-error-banner {
    margin: 0 0 16px;
    padding: 12px 14px;
    border: 1px solid #fecaca;
    border-radius: 12px;
    color: #991b1b;
    background: #fef2f2;
    font-weight: 800;
}

/* Advisory, not a refusal — the stale-region notice on the quote form says the document can be
   saved exactly as it is, so it must not wear .form-error-banner's red. Amber, and server-rendered
   like the banner above: without JS it is the only thing saying this quote carries a fulfillment
   region its company no longer has. */
.form-warning-banner {
    margin: 0 0 16px;
    padding: 12px 14px;
    border: 1px solid #fde68a;
    border-radius: 12px;
    color: #92400e;
    background: #fffbeb;
    font-weight: 700;
}

/* The order/quote line whose quantity the save had to rewrite: the banner naming it, and the
   quantity cell itself. Server-rendered classes, not script — the save succeeded and redirected,
   so without JS these are the only things that say a typed quantity is not the stored one. */
.line-warning-banner div + div {
    margin-top: 4px;
}

.line-cell-error {
    background: #fef2f2;
}

input.line-input-error,
input.line-input-error:focus {
    border-color: #dc2626;
    color: #991b1b;
    background: #fff1f2;
}

/* The available-stock figure under a line's quantity box (#326). Quiet by default — it is a
   reference number an admin reads while typing, not a message — and amber only once the typed
   quantity has passed it, which is the point at which a non-draft save will be refused. Amber
   rather than the red above because nothing has gone wrong yet: the line is still editable and
   still saveable as a draft. */
.line-stock-hint {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    line-height: 1.3;
    color: #6b7280;
    white-space: nowrap;
}

.line-stock-hint-over {
    color: #b45309;
    font-weight: 600;
}

/* The "quotes hold no stock" notice above the quote line table (#327). Informational, not a
   warning — nothing is wrong with a quote that exceeds stock — so it reads as a note rather than
   borrowing the amber of .line-stock-hint-over or the red of the error banners. */
.quote-stock-notice {
    margin: 8px 0 12px;
    padding: 8px 12px;
    border-left: 3px solid #94a3b8;
    background: #f8fafc;
    color: #334155;
    font-size: 13px;
    line-height: 1.45;
}

.quote-stock-notice p {
    margin: 0 0 8px;
}

.quote-stock-notice ul {
    margin: 0;
    padding-left: 18px;
}

.quote-stock-notice li {
    margin-bottom: 4px;
}

.quote-stock-notice li:last-child {
    margin-bottom: 0;
}

.order-workspace-actions,
.order-bottom-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 18px;
}

.order-workspace-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    align-items: start;
}

.order-form-panel {
    min-width: 0;
    padding-top: 0;
}

.order-form-panel h2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 34px;
    margin-top: 0;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #9ca3af;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

.order-panel-icons {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 6px;
    margin-left: auto;
    color: #1e3a8a;
    font-size: 0.78rem;
    letter-spacing: 0;
}

.order-panel-icon {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    color: #31519a;
    background: transparent;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 900;
    text-decoration: none;
}

.order-panel-icon:hover,
.order-panel-icon:focus {
    color: var(--brand);
    background: var(--brand-bg);
    outline: none;
}

.order-panel-icon svg {
    width: 17px;
    height: 17px;
    fill: currentColor;
}

.order-address-book {
    margin: -2px 0 14px;
    padding: 12px;
    border: 1px solid #bae6fd;
    border-radius: 12px;
    background: #e0f2fe;
}

.order-address-book h3 {
    margin: 0 0 8px;
    color: var(--ink);
    font-size: 1.05rem;
    font-weight: 800;
}

.order-address-book select {
    width: 100%;
    min-height: 36px;
    padding: 7px 34px 7px 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background-color: #fff;
}

.order-address-actions {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}

.order-address-actions .button {
    min-height: 32px;
    padding: 0 12px;
}

.order-field-row {
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    margin-bottom: 8px;
    color: #000;
    font-size: 0.78rem;
    font-weight: 700;
}

.order-field-row.static strong {
    color: #111827;
    font-weight: 700;
}

.order-lines-section {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid #9ca3af;
}

/* Order's lines section has no heading of its own; the estimate form keeps the "Line Items"
   title the page has always had, styled like the workspace panels' headings above it. */
.order-lines-section > h2 {
    margin: 0 0 12px;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.2;
}

.order-line-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.order-lines-section .wide-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    border-top: 1px solid var(--line-light);
}

.order-lines-table {
    width: 100%;
    min-width: 1500px;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
}

.order-lines-table th,
.order-lines-table td {
    padding: 5px 4px;
    font-size: 0.72rem;
    vertical-align: top;
    white-space: normal;
    word-break: normal;
}

.order-lines-table th {
    color: #000;
    background: #f8fafc;
    font-size: 0.7rem;
    letter-spacing: 0.13em;
    line-height: 1.25;
    text-transform: uppercase;
    text-align: center;
}

/* Product names here are long (brand + model + size), and the searchable-select panel derives
   its width from the trigger's, so a cramped Name column truncates both the closed trigger and
   every row of the results list. The table scrolls horizontally via .wide-table-wrap, so the
   extra room comes out of min-width rather than off the other columns. */
.order-col-name {
    width: 24%;
}

.order-col-location {
    width: 13%;
}

.order-col-sku {
    width: 7%;
}

.order-col-qty {
    width: 5%;
}

.order-col-weight {
    width: 6%;
}

.order-col-unit {
    width: 5%;
}

.order-col-tax {
    width: 8%;
}

.order-col-tax-amount {
    width: 6%;
}

.order-col-cost {
    width: 6%;
}

.order-col-original {
    width: 8%;
}

.order-col-price {
    width: 6%;
}

.order-col-subtotal {
    width: 7%;
}

.order-col-batch {
    width: 220px;
}

.order-batch-cell {
    vertical-align: top;
    padding: 10px 6px;
}


.order-batch-row {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 4px;
}

.order-batch-row .js-batch-label {
    width: 80px;
    flex-shrink: 0;
    min-height: 26px;
    height: 26px;
    padding: 2px 4px;
    font-size: 0.8rem;
    line-height: 1.1;
    border: 1px solid var(--line);
    border-radius: 6px;
    background-color: #fff;
    color: var(--ink);
    box-sizing: border-box;
}

.batch-row-x {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--muted);
    flex-shrink: 0;
    line-height: 1;
}

.order-batch-row .js-batch-date {
    flex: 1 1 0;
    min-width: 0;
    min-height: 26px;
    height: 26px;
    padding: 2px 4px;
    font-size: 0.8rem;
    line-height: 1.1;
    border: 1px solid var(--line);
    border-radius: 6px;
    background-color: #fff;
    color: var(--ink);
    box-sizing: border-box;
}

.order-col-actions {
    width: 110px;
}

.order-lines-table td:nth-child(9),
.order-lines-table td:nth-child(11) {
    padding-top: 9px;
    text-align: right;
    white-space: nowrap;
}

.order-lines-table input:not(.js-batch-label):not(.js-batch-date):not(.js-batch-combined),
.order-lines-table select {
    width: 100%;
    min-width: 0;
    min-height: 26px;
    height: 26px;
    padding: 2px 4px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background-color: #fff;
    color: var(--ink);
    font-size: 0.8rem;
    line-height: 1.1;
}

.order-lines-table select {
    cursor: pointer;
    padding-right: 18px;
}

.order-lines-table input[type="number"] {
    padding-right: 2px;
}

.order-lines-empty td {
    padding: 28px !important;
    color: var(--muted);
    text-align: center;
}

.order-lines-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

.order-add-line-bar {
    display: grid;
    grid-template-columns: minmax(220px, 340px) auto;
    gap: 12px;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    margin-top: 56px;
}

.order-add-line-bar select {
    width: 100%;
    min-height: 38px;
    padding: 7px 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background-color: #fff;
    color: var(--ink);
}

.order-line-controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
}

.order-line-controls .mini-action {
    width: 26px;
    min-width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    color: #fff;
    font-weight: 900;
    line-height: 1;
}

.order-line-controls .mini-action svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
}

.order-line-controls .mini-action.success {
    background: #0369a1;
}

.order-line-controls .mini-action.info {
    background: #3b5ba7;
}

.order-line-controls .mini-action.danger {
    background: #ff1f2d;
}

/* An estimate whose pricing/shipping is still TBD shows no totals box at all, so its charge-line
   rows (the only way to give it a shipping amount) sit in this box instead — same footprint, so
   the rows don't jump when the totals box takes over. */
.order-total-box,
.estimate-charge-box {
    display: grid;
    gap: 8px;
    width: min(430px, 100%);
    margin: 28px 0 0 auto;
    color: #000;
    font-size: 0.78rem;
    font-weight: 700;
}

.estimate-charge-box .order-charge-line-row,
.order-total-box div {
    display: grid;
    grid-template-columns: 1fr 120px;
    gap: 12px;
    align-items: center;
}

/* The estimate create page's totals box carries a row that's only shown while some line is still
   priced TBD — the display: grid above would otherwise beat its hidden attribute. */
.order-total-box div[hidden] {
    display: none;
}

.order-total-box span {
    text-align: right;
}

.order-total-box label {
    display: flex;
    gap: 6px;
    align-items: center;
}


.order-charge-line-row > span {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: flex-end;
    font-size: 0.78rem;
    font-weight: 700;
}

.order-charge-line-row .mini-action {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    font-size: 0.65rem;
    padding: 0;
    line-height: 18px;
    background: #b91c1c !important;
    color: #FFF;
    border: 1px solid #b91c1c;
    display: flex;
    justify-content: center;
    align-items: center;
}

.order-charge-line-row .mini-action:hover {
    background: #1e40af !important;
    box-shadow: none !important;
}

.order-charge-line-row .order-charge-label-input {
    width: 110px;
    min-height: 28px;
    padding: 3px 6px;
    border: 1.5px solid #d1d5db;
    border-radius: 5px;
    font-size: 0.78rem;
    background: #fff;
}

/* Narrower than the label input on purpose: the slug is an optional reporting key, not the thing
   the admin is here to type. */
.order-charge-line-row .order-charge-slug-input {
    width: 90px;
    min-height: 28px;
    padding: 3px 6px;
    border: 1.5px solid #d1d5db;
    border-radius: 5px;
    font-size: 0.7rem;
    font-weight: 400;
    color: #64748b;
    background: #fff;
}

/* The tax class and placement a fee row carries in place of a Fee definition — sized like the
   slug input, since they are settings on the row rather than the charge itself. */
.order-charge-line-row .order-charge-select-input {
    min-height: 28px;
    padding: 3px 6px;
    border: 1.5px solid #d1d5db;
    border-radius: 5px;
    font-size: 0.7rem;
    font-weight: 400;
    color: #64748b;
    background: #fff;
}


.order-bottom-actions {
    margin-top: 20px;
    margin-bottom: 0;
}

@media (max-width: 900px) {
    .order-filter-fields {
        flex-direction: column;
        align-items: stretch;
    }

    .order-filter-field {
        min-width: 0;
    }

    .order-create-layout {
        grid-template-columns: 1fr;
    }

    .order-add-line-bar {
        width: 100%;
        grid-template-columns: 1fr;
        margin-top: 18px;
    }

    .order-create-summary {
        position: static;
    }

    .order-workspace-grid,
    .order-company-picker {
        grid-template-columns: 1fr;
    }

    .order-field-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .order-filter-actions {
        width: 100%;
    }
}

@media (max-width: 980px) {
    .site-admin .nav-group {
        display: contents;
    }

    .site-admin .nav-group-title {
        grid-column: 1 / -1;
        min-height: 30px;
        padding: 0;
    }

    .site-admin .nav a.nav-sub {
        margin-left: 0;
        border-left: 0;
    }

    .price-matrix-grid .table-header {
        align-items: flex-start;
    }
}

@media (max-width: 760px) {
    .wide-price-table {
        width: 100%;
        min-width: 0;
    }

    .wide-price-table .column-groups {
        display: none;
    }

    .wide-price-table td[data-label="Actions"] .action-group {
        justify-content: flex-start;
    }
}

/* Collapsible admin product submenu */
.site-admin .nav-group-title {
    width: 100%;
    border: 0;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
}

.site-admin .nav-group-title::after {
    content: 'v';
    margin-left: auto;
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 900;
    transform: rotate(-90deg);
    transition: transform 0.18s ease, color 0.18s ease;
}

.site-admin .nav-group.is-open .nav-group-title {
    color: var(--admin-blue);
    background: transparent;
}

.site-admin .nav-group.is-open .nav-group-title::after {
    color: var(--admin-blue);
    transform: rotate(0deg);
}

.site-admin .nav-sub-list {
    display: block;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-6px);
    transition: max-height 0.5s ease, opacity 0.4s ease, transform 0.4s ease;
}

.site-admin .nav-sub-list > *:not(:last-child) {
    margin-bottom: 2px;
}

.site-admin .nav-group.is-open .nav-sub-list {
    max-height: 100%;
    opacity: 1;
    transform: translateY(0);
}

.site-admin .nav-group .nav-sub {
    display: block;
}

.site-admin .nav-sub.is-current {
    background: var(--admin-blue) !important;
    color: #fff !important;
    font-weight: 700;
    position: relative;
}

.site-admin .nav-sub-section {
    display: block;
    text-align: left;
    padding: 3px 12px 2px 32px;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
    color: var(--admin-badge-gray);
}

@media (max-width: 980px) {
    .site-admin .nav-group {
        display: grid;
        grid-column: 1 / -1;
        gap: 6px;
    }

    .site-admin .nav-group-title {
        padding: 0 12px;
    }
}

/* Cleaner chevron for collapsible admin submenu */
.site-admin .nav-group-title::after {
    content: '';
    width: 8px;
    height: 8px;
    margin-left: auto;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    color: #64748b;
    transform: rotate(45deg);
    transition: transform 0.18s ease, color 0.18s ease;
}

.site-admin .nav-group.is-open .nav-group-title::after {
    transform: rotate(225deg);
}

/* Products price-list administration */
.price-list-admin table th:first-child,
.price-list-admin table td:first-child {
    width: 70px;
}

.price-list-admin table th:nth-child(3),
.price-list-admin table td:nth-child(3) {
    min-width: 320px;
}

.price-list-admin table td:nth-child(3) .companies-cell {
    display: block;
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.price-list-admin .action-group {
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 8px;
}


.badge.danger-soft {
    color: #b42318;
    background: #fee4e2;
}

.compact-panel {
    padding-block: 32px;
}

.compact-panel h1 {
    max-width: 980px;
    font-size: clamp(1.8rem, 4vw, 3.2rem);
}

.form-toolbar {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 24px;
}

.company-manage-header {
    display: flex;
    align-items: center;
    gap: 18px;
}

.company-manage-header .back-button {
    flex: 0 0 auto;
    order: 2;
}

.company-manage-header .company-picker-row {
    flex: 1 1 auto;
    order: 1;
}

.company-picker-row {
    display: flex;
    align-items: center;
    gap: 18px;
}

.company-picker-label {
    margin: 0;
    white-space: nowrap;
    flex: 0 0 auto;
}

.company-picker-row select {
    width: 100%;
    flex: 1 1 520px;
    min-width: 260px;
}

.price-list-manage select {
    min-height: 52px;
}

@media (max-width: 760px) {
    .price-list-admin .action-group {
        flex-wrap: wrap;
    }

    .company-manage-header {
        flex-direction: column;
        align-items: stretch;
    }

    .company-picker-row {
        flex-direction: column;
        align-items: stretch;
    }
}

/* Price-list form page refinement */
.panel.compact-panel {
    padding: 28px 34px !important;
}

.panel.compact-panel h1 {
    max-width: 920px;
    margin-bottom: 8px;
    font-size: clamp(1.55rem, 2.6vw, 2.55rem) !important;
    line-height: 1.08;
    letter-spacing: -0.035em;
}

/* Admin: compact header titles (reference app style) */
.site-admin .compact-panel h1,
.site-admin .panel.compact-panel h1,
.site-admin .panel-title-row h1,
.site-admin .admin-titlebar h1 {
    font-size: 0.92rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    line-height: 1.2 !important;
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.panel.compact-panel .lead {
    max-width: 760px;
    font-size: 1rem;
}

.form-card {
    padding: 28px;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-md);
    background: #fff;
    box-shadow: none;
}

.site-admin .form-card {
    border-radius: 0;
}

.form-card .form-grid {
    align-items: end;
}

.form-card .form-actions {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 28px;
    padding-top: 4px;
}

.form-card .form-actions .button,
.form-toolbar .button {
    width: auto;
}

.company-form-card .company-form-grid {
    align-items: start;
    gap: 16px 24px;
}

.company-form-card label {
    font-size: 0.82rem;
    font-weight: 700;
}

.company-form-card input,
.company-form-card select {
    min-height: 34px;
}

.company-form-card textarea {
    min-height: 96px;
}

.company-email-fieldset {
    display: grid;
    gap: 14px;
    min-height: 86px;
    margin: 0;
    padding: 18px 16px;
    border: 1px solid var(--line-light);
    border-radius: var(--radius-sm);
    background: #fff;
}

.company-email-fieldset legend {
    padding: 0 4px;
    color: var(--ink);
    font-size: 0.78rem;
    font-weight: 800;
}

.radio-choice-group {
    display: inline-flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.radio-choice {
    position: relative;
    display: inline-flex;
    grid-template-columns: none;
    align-items: center;
    gap: 8px;
    min-height: 30px;
    color: var(--ink-body);
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition: color var(--t);
}

.radio-choice:hover {
    color: var(--admin-blue-hover);
}

.radio-choice input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.radio-control {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border: 1.5px solid #98a2b3;
    border-radius: 999px;
    background: #fff;
    transition: border-color var(--t), box-shadow var(--t), background var(--t);
}

.radio-control::after {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--admin-blue);
    transform: scale(0);
    transition: transform var(--t);
}

.radio-choice:has(input:checked) {
    color: var(--ink);
}

.radio-choice:has(input:checked) .radio-control {
    border-color: var(--admin-blue);
    box-shadow: 0 0 0 3px rgba(64, 141, 251, 0.16);
}

.radio-choice:has(input:checked) .radio-control::after {
    transform: scale(1);
}

.radio-choice:has(input:focus-visible) .radio-control {
    outline: 3px solid rgba(64, 141, 251, 0.22);
    outline-offset: 3px;
}

.price-list-manage {
    display: grid;
    gap: 22px;
}

.price-list-manage .form-toolbar {
    margin-bottom: 0;
}

.company-picker-row {
    flex-direction: row !important;
    align-items: center;
}

.company-picker-row .button {
    width: auto;
    min-width: 170px;
    white-space: nowrap;
}

@media (max-width: 760px) {
    .panel.compact-panel {
        padding: 24px !important;
    }

    .panel.compact-panel h1 {
        font-size: clamp(1.35rem, 7vw, 1.85rem) !important;
    }

    .form-card {
        padding: 20px;
    }

    .company-picker-row {
        flex-direction: column !important;
        align-items: stretch;
    }

    .company-picker-row .button {
        width: 100%;
    }
}

/* Product category administration */
.category-admin table th:nth-child(1),
.category-admin table td:nth-child(1) {
    min-width: 260px;
}

.category-admin table th:nth-child(2),
.category-admin table td:nth-child(2) {
    min-width: 220px;
}

.category-admin table th:nth-child(4),
.category-admin table td:nth-child(4) {
    min-width: 210px;
}

.category-admin td[data-label="Status"] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.category-admin .action-group {
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 10px;
}

.status-switch {
    position: relative;
    display: inline-flex;
    width: 42px;
    height: 24px;
    border-radius: 999px;
    background: #d0d5dd;
    box-shadow: none;
    transition: background 0.18s ease;
    flex: 0 0 auto;
}

.status-switch::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    width: 16px;
    height: 16px;
    border-radius: 999px;
    background: #fff;
    box-shadow: none;
    transition: transform 0.18s ease;
}

.status-switch.is-on {
    background: var(--brand);
}

.status-switch.is-on::after {
    transform: translateX(18px);
}

.form-grid small {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 600;
}

@media (max-width: 760px) {
    .category-admin td[data-label="Status"] {
        justify-content: flex-start;
    }

    .category-admin .action-group {
        flex-wrap: wrap;
    }
}

/* Keep category visibility controls readable */
.category-admin table th:nth-child(3),
.category-admin table td:nth-child(3) {
    min-width: 190px;
    width: 190px;
}

.category-admin td[data-label="Status"] {
    white-space: nowrap;
    overflow: visible;
}

.category-admin td[data-label="Status"] .badge {
    flex: 0 0 auto;
    min-width: 70px;
    justify-content: center;
}


/* Header actions for category admin page */
.panel-title-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 24px;
}

.panel-title-row .panel-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 0;
    white-space: nowrap;
}

.panel-title-row .button {
    width: auto;
}

@media (max-width: 900px) {
    .panel-title-row {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .panel-title-row .panel-actions {
        justify-content: flex-start;
        flex-wrap: wrap;
    }
}

/* Editable category visibility switch */
button.status-switch {
    border: 0;
    padding: 0;
    cursor: pointer;
}

button.status-switch:hover {
    filter: brightness(0.96);
}

button.status-switch:focus-visible {
    outline: 3px solid rgba(29, 78, 216, 0.22);
    outline-offset: 3px;
}

/* Product create/edit form helpers */
.product-form-card .product-form-grid {
    align-items: start;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 14px;
}

.product-form-card .product-form-grid .product-form-main {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    align-items: start;
}

.product-form-card .product-form-grid .product-form-side {
    display: grid;
    gap: 14px;
    align-items: start;
    min-width: 0;
}

@media (max-width: 980px) {
    .product-form-card .product-form-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .product-form-card .product-form-grid {
        grid-template-columns: 1fr;
    }
}

.product-image-field {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.product-image-field .field-label {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--ink);
}

/* ── Existing image card ── */
.image-current {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-sm);
    background: #fff;
    transition: border-color var(--t), box-shadow var(--t);
}

.image-current.is-removing {
    opacity: 0.45;
    border-color: var(--red);
    background: #fef2f2;
}

.image-current-thumb {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--line);
    background: var(--paper);
    flex-shrink: 0;
}

.image-current-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.image-current-name {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.image-current-hint {
    font-size: 0.75rem;
    color: var(--muted);
}

.image-remove-btn {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1.5px solid var(--line);
    border-radius: 6px;
    background: #fff;
    color: var(--muted);
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    transition: background var(--t), color var(--t), border-color var(--t);
}

.image-remove-btn:hover {
    background: #fef2f2;
    color: var(--red);
    border-color: #fca5a5;
}

/* ── Drag-and-drop zone ── */
.image-dropzone {
    position: relative;
    border: 2px dashed #d1d5db;
    border-radius: var(--radius-sm);
    background: #fafbfc;
    transition: border-color 0.2s ease, background 0.2s ease;
    cursor: pointer;
}

.image-dropzone:hover,
.image-dropzone.is-dragover {
    border-color: var(--admin-blue);
    background: var(--admin-blue-soft);
}

.image-dropzone.has-current {
    /* Smaller when existing image is present */
}

.image-dropzone-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 28px 20px;
    pointer-events: none;
}

.dropzone-icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 999px;
    background: var(--admin-blue-soft);
    color: var(--admin-blue-hover);
}

.dropzone-label {
    margin: 0;
    font-size: 0.88rem;
    color: var(--ink-body);
}

.dropzone-label strong {
    color: var(--admin-blue-hover);
}

.dropzone-hint {
    margin: 0;
    font-size: 0.75rem;
    color: var(--muted);
}

.dropzone-file-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

/* CSV import upload refinement */
.file-upload-label {
    display: grid;
    gap: 4px;
    margin-bottom: 10px;
    font-size: 0.82rem;
    font-weight: 700;
}

.file-upload-label small {
    font-weight: 500;
    color: var(--muted);
}

.file-new-preview .file-icon {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    border: 1px solid var(--brand-light);
    background: #fff;
    color: var(--brand);
    flex-shrink: 0;
}

.import-inline-help {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.config-advanced-section {
    grid-column: 1 / -1;
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid #e5e7eb;
}

.config-advanced-section summary {
    color: #374151;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
}

.config-advanced-section[open] summary {
    margin-bottom: 10px;
}

/* ── New image preview card ── */
.image-new-preview {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border: 1.5px solid var(--brand-light);
    border-radius: var(--radius-sm);
    background: var(--brand-bg);
}

.image-new-preview[hidden] {
    display: none !important;
}

.image-new-preview img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--brand-light);
    background: #fff;
    flex-shrink: 0;
}

.image-new-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.image-new-name {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.image-new-size {
    font-size: 0.75rem;
    color: var(--brand-dark);
}

/* ── Product image gallery (multi-image admin form) ── */
.image-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 14px;
    margin-bottom: 14px;
}

.image-gallery-item,
.image-new-preview-card {
    position: relative;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    overflow: hidden;
    cursor: grab;
    box-shadow: none;
    transition: border-color var(--t), box-shadow var(--t), transform var(--t);
}

.image-gallery-item:hover,
.image-new-preview-card:hover {
    box-shadow: none;
    transform: translateY(-2px);
}

.image-gallery-item:active,
.image-new-preview-card:active { cursor: grabbing; }

.image-gallery-item.is-dragging,
.image-new-preview-card.is-dragging {
    opacity: 0.45;
    box-shadow: none;
    transform: scale(0.98);
}

.image-gallery-item.is-primary,
.image-new-preview-card.is-primary {
    border-color: var(--brand-mid);
    box-shadow: 0 0 0 3px var(--brand-light), 0 8px 18px rgba(29, 78, 216, 0.12);
}

.image-gallery-item.is-primary:hover,
.image-new-preview-card.is-primary:hover {
    box-shadow: 0 0 0 3px var(--brand-light), 0 12px 24px rgba(29, 78, 216, 0.16);
}

.image-gallery-thumb,
.image-new-preview-card img {
    display: block;
    width: 100%;
    height: 128px;
    object-fit: cover;
    background: var(--paper);
    pointer-events: none;
}

.image-gallery-drag-handle {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--muted);
    box-shadow: none;
    opacity: 0;
    transform: translateY(-2px);
    transition: opacity var(--t), transform var(--t), color var(--t);
}

.image-gallery-item:hover .image-gallery-drag-handle,
.image-gallery-item.is-dragging .image-gallery-drag-handle,
.image-new-preview-card:hover .image-gallery-drag-handle,
.image-new-preview-card.is-dragging .image-gallery-drag-handle {
    opacity: 1;
    transform: translateY(0);
}

.image-gallery-drag-handle:hover { color: var(--ink-body); }

.image-gallery-remove-btn,
.image-new-preview-card .image-remove-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--muted);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: none;
    opacity: 0;
    transform: translateY(-2px);
    transition: opacity var(--t), transform var(--t), background var(--t), color var(--t);
}

.image-gallery-item:hover .image-gallery-remove-btn,
.image-new-preview-card:hover .image-remove-btn {
    opacity: 1;
    transform: translateY(0);
}

.image-gallery-remove-btn:hover,
.image-new-preview-card .image-remove-btn:hover {
    background: #fef2f2;
    color: var(--red);
}

.image-gallery-primary-flag {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 7px;
    background: var(--brand);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.image-gallery-primary-flag svg { flex-shrink: 0; }

.image-gallery-item.is-primary .image-gallery-primary-flag,
.image-new-preview-card.is-primary .image-gallery-primary-flag { display: flex; }

.image-gallery-hint {
    margin: -6px 0 14px;
    font-size: 0.78rem;
    color: var(--muted);
}

.image-new-preview-card {
    border-color: var(--brand-light);
    background: var(--brand-bg);
}

.fee-fields-section { display: flex; flex-direction: column; gap: 14px; }

.inventory-table-fields {
    display: grid; 
    grid-template-columns: minmax(160px, 28%) minmax(220px, 1fr); 
    gap: 12px 18px; 
    align-items: center; 
    margin-top: 4px; 
} 

.inventory-table-fields.has-override {
    grid-template-columns: minmax(160px, 28%) minmax(220px, 1fr) minmax(220px, 1fr);
}

.inventory-heading {
    min-height: 28px;
    padding: 5px 10px;
    color: #344054;
    background: #f9fafb;
    border-bottom: 1px solid var(--line-light);
    font-size: 0.8rem;
    font-weight: 800;
}

.fulfillment-region {
    display: block;
    padding-left: 10px;
    color: #374151;
    font-size: 0.86rem;
    font-weight: 600;
}

.editor-shell {
    display: grid;
    border: 1.5px solid #d1d5db;
    border-radius: var(--radius-sm);
    background: #fff;
    overflow: hidden;
}

.editor-toolbar {
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 34px;
    padding: 6px 12px;
    border-bottom: 1px solid #e5e7eb;
    color: #344054;
    background: #f9fafb;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
}

.editor-shell textarea {
    min-height: 130px;
    border: 0;
    border-radius: 0;
    resize: vertical;
}

.editor-shell textarea:focus {
    box-shadow: none;
}

.rich-text-field+.rich-text-field {
    margin-top: 4px;
}

@media (max-width: 980px) {
    .inventory-table-fields {
        grid-template-columns: 1fr;
    }

    .inventory-heading+.inventory-heading {
        display: none;
    }

    .editor-toolbar {
        gap: 10px;
        flex-wrap: wrap;
    }
}

/* ── Admin user menu ───────────────────────────────────────────────────────── */
.site-admin .user-menu {
    position: relative;
    margin: 0 0 12px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.user-menu-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 48px;
    padding: 0 14px;
    border: 1.5px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.07);
    color: #cbd5e1;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: background var(--t), border-color var(--t), color var(--t);
}

.user-menu-toggle:hover {
    background: rgba(255, 255, 255, 0.13);
    border-color: rgba(255, 255, 255, 0.22);
    color: #f1f5f9;
}

.user-menu.is-open .user-menu-toggle {
    background: rgba(64, 141, 251, 0.25);
    border-color: rgba(64, 141, 251, 0.5);
    color: #f1f5f9;
}

.user-menu-avatar {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--admin-blue) 0%, var(--admin-blue-hover) 100%);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 900;
    letter-spacing: 0;
}

.user-menu-email {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-menu-caret {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-left: 6px;
    color: var(--muted);
    transition: transform 0.3s ease;
}

.user-menu.is-open .user-menu-caret {
    transform: rotate(180deg);
}

.user-menu-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #1e293b;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    box-shadow: none;
    overflow: hidden;
    z-index: 200;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.97);
    transform-origin: top center;
    transition: opacity 0.4s ease, transform 0.4s ease, visibility 0s linear 0.4s;
}

.user-menu.is-open .user-menu-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    transition: opacity 0.4s ease, transform 0.4s ease, visibility 0s linear 0s;
}

.user-menu-dropdown a {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px 16px !important;
    min-height: auto !important;
    border-radius: 0 !important;
    background: transparent !important;
    border: none !important;
    color: #94a3b8 !important;
    font-size: 0.82rem !important;
    font-weight: 500 !important;
    transition: background var(--t), color var(--t) !important;
}

.user-menu-dropdown a+a {
    border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
}

.user-menu-dropdown a:hover {
    background: rgba(255, 255, 255, 0.07) !important;
    color: #e2e8f0 !important;
}

.user-menu-item-icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.08);
    color: #94a3b8;
    transition: color 0.2s ease, background 0.2s ease;
}

.user-menu-dropdown a:hover .user-menu-item-icon {
    background: var(--admin-blue);
    color: #fff;
}

@media (max-width: 980px) {
    .site-admin .user-menu {
        grid-column: 1 / -1;
        order: -1;
        margin: 0;
        padding-bottom: 0;
        border-bottom: none;
    }
}

/* ── Admin content header user menu (light context overrides) ─────────────── */
.admin-content-header .user-menu {
    position: relative;
    margin: 0;
    padding: 0;
    border: none;
    width: auto;
}

.admin-content-header .user-menu-toggle {
    min-height: 34px;
    padding: 0 6px 0 4px;
    border-radius: var(--radius-sm);
    background: transparent;
    border-color: transparent;
    color: var(--admin-sidebar-ink);
    font-size: 0.8rem;
    width: auto;
    gap: 8px;
}

.admin-content-header .user-menu-toggle:hover {
    background: var(--admin-sidebar-hover);
    border-color: transparent;
    color: var(--ink);
}

.admin-content-header .user-menu.is-open .user-menu-toggle {
    background: var(--admin-sidebar-hover);
    border-color: transparent;
}

.admin-content-header .user-menu-avatar {
    width: 26px;
    height: 26px;
    border-radius: 6px;
}

.admin-content-header .user-menu-dropdown {
    left: auto;
    right: 0;
    min-width: 180px;
    background: #fff;
    border: 1.5px solid var(--line);
    box-shadow: none;
    transform-origin: top right;
}

.admin-content-header .user-menu-dropdown a {
    color: var(--ink-body) !important;
}

.admin-content-header .user-menu-dropdown a+a {
    border-top: 1px solid var(--line) !important;
}

.admin-content-header .user-menu-dropdown a:hover {
    background: var(--line-light) !important;
    color: var(--ink) !important;
}

.admin-content-header .user-menu-item-icon {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: #f1f5f9;
    color: var(--muted);
    transition: all 0.2s ease;
}

.admin-content-header .user-menu-dropdown a:hover .user-menu-item-icon {
    background: var(--admin-blue);
    color: #fff;
    transform: scale(1.05);
}

/* ══════════════════════════════════════════════════════════════════════════════
   ADMIN LOGIN PAGE
   ══════════════════════════════════════════════════════════════════════════════ */
.site-admin-login .topbar,
.site-admin-login .site-footer,
.site-admin-login .skip-link {
    display: none !important;
}

.site-admin-login .app-shell {
    display: block;
    min-height: 100vh;
}

.site-admin-login .content-frame {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    min-height: 100vh;
}

/* ── Centered shell ───────────────────────────────────────────────────────── */
.admin-login-shell {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 40px 20px;
    background: linear-gradient(160deg, #0f172a 0%, #111827 65%, #0d1420 100%);
    position: relative;
    overflow: hidden;
}

.admin-login-shell::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(29, 78, 216, 0.15) 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none;
}

.admin-login-shell::after {
    content: '';
    position: absolute;
    bottom: -160px;
    right: -160px;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(29, 78, 216, 0.2) 0%, transparent 70%);
    pointer-events: none;
}

/* ── Card ─────────────────────────────────────────────────────────────────── */
.admin-login-card {
    position: relative;
    z-index: 1;
    width: min(460px, 100%);
    background: #fff;
    border-radius: 20px;
    padding: clamp(32px, 5vw, 48px);
    box-shadow: none;
}

.admin-login-card-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 8px;
}

.admin-login-card-head .brand-mark {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.admin-login-card-head .eyebrow {
    margin-bottom: 2px;
}

.admin-login-card-head h2 {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--ink);
    margin: 0;
    letter-spacing: -0.02em;
}

.admin-login-sub {
    color: var(--muted);
    font-size: 0.875rem;
    margin: 0 0 28px !important;
}

.admin-login-form label {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--ink);
}

.admin-login-form input[type="email"],
.admin-login-form input[type="password"] {
    margin-top: 6px;
    font-size: 0.9rem;
}

.admin-login-form .check-row {
    font-size: 0.82rem;
    color: var(--muted);
    font-weight: 500;
}

.admin-login-form .auth-actions {
    margin-top: 8px;
}

.button.full-width {
    width: 100%;
    justify-content: center;
}

/* ── Admin login error box ────────────────────────────────────────────────── */
.admin-login-error {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding: 12px 16px;
    border-radius: 8px;
    background: #fef2f2;
    border: 1.5px solid #fecaca;
    color: #b42318;
    font-size: 0.82rem;
    font-weight: 600;
}

.admin-login-error::before {
    content: '!';
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fee2e2;
    color: #b42318;
    font-weight: 900;
    font-size: 0.75rem;
}

/* ══════════════════════════════════════════════════════════════════════════════
   ADMIN PROFILE PAGE
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Two-column layout ────────────────────────────────────────────────────── */
.profile-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 24px;
    align-items: start;
}

.profile-main {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.profile-side {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ── Panel section header (inside form panels) ────────────────────────────── */
.profile-panel {
    padding: clamp(22px, 3vw, 32px);
}

.profile-panel-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
}

.profile-panel-icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: var(--brand-bg);
    color: var(--brand);
    font-size: 0.78rem;
    font-weight: 900;
}

.profile-panel-head h2 {
    margin: 0 0 3px;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ink);
}

.profile-panel-head p {
    margin: 0;
    font-size: 0.8rem;
    color: var(--muted);
}

/* ── Right sidebar cards ─────────────────────────────────────────────────── */
.profile-info-card {
    padding: 20px 22px;
}

.profile-card-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--ink);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
}

.profile-detail-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.profile-detail-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 9px 0;
    border-bottom: 1px solid var(--line);
    font-size: 0.8rem;
}

.profile-detail-list li:last-child {
    border-bottom: none;
}

.profile-detail-list li>span:first-child {
    color: var(--muted);
    font-weight: 500;
}

.profile-detail-list li>strong {
    color: var(--ink-body);
    font-weight: 600;
    text-align: right;
    font-size: 0.8rem;
}

/* ── Security list ────────────────────────────────────────────────────────── */
.profile-security-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.profile-security-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
}

.profile-security-list li:last-child {
    border-bottom: none;
}

.profile-sec-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.profile-sec-row strong {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ink-body);
}

.profile-sec-row small {
    display: block;
    font-size: 0.7rem;
    color: var(--muted);
    margin-top: 1px;
}

.profile-sec-dot {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.dot-ok {
    background: #0369a1;
    box-shadow: 0 0 0 3px #dbeafe;
}

.dot-warn {
    background: #d97706;
    box-shadow: 0 0 0 3px #fef3c7;
}

.dot-off {
    background: #9ca3af;
    box-shadow: 0 0 0 3px #f3f4f6;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .profile-layout {
        grid-template-columns: 1fr;
    }

    .profile-side {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 580px) {
    .profile-side {
        grid-template-columns: 1fr;
    }
}


/* ── Company notes card ────────────────────────────────────────────────────── */
.notes-card {
    padding: 0;
}

.notes-card-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 18px 12px;
    border-bottom: 1px solid var(--line-light);
}

.notes-card-head h2 {
    margin: 0 0 2px;
    font-size: 1rem;
}

.notes-card-head p {
    margin: 0;
    font-size: 0.82rem;
    color: var(--muted);
}

.notes-list {
    padding: 8px 0;
}

.note-entry {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 18px;
    border-bottom: 1px solid var(--line-light);
    transition: background var(--t);
}

.note-entry:last-child {
    border-bottom: 0;
}

.note-entry:hover {
    background: var(--brand-bg);
}

.note-entry-body {
    flex: 1;
    min-width: 0;
}

.note-entry-text {
    display: block;
    font-size: 0.88rem;
    color: var(--ink);
    word-break: break-word;
}

.note-entry-date {
    display: block;
    font-size: 0.75rem;
    color: var(--muted);
    margin-top: 2px;
}

.note-delete {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    font-size: 1rem;
    line-height: 1;
    color: var(--muted);
    cursor: pointer;
    transition: background var(--t), color var(--t);
}

.note-delete:hover {
    background: #fee2e2;
    color: #b42318;
}

.notes-empty {
    padding: 14px 18px;
    margin: 0;
    font-size: 0.85rem;
    color: var(--muted);
}

.notes-add {
    padding: 14px 18px;
    border-top: 1px solid var(--line-light);
    background: var(--surface);
}

.notes-add-label {
    margin: 0 0 8px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.notes-form {
    display: flex;
    gap: 8px;
}

.notes-form input[type="text"] {
    flex: 1;
    min-height: 36px;
    padding: 6px 12px;
    border: 1.5px solid var(--line);
    border-radius: 8px;
    font-size: 0.88rem;
    background: #fff;
}

.notes-form input[type="text"]:focus {
    outline: 2px solid var(--brand);
    outline-offset: 1px;
    border-color: var(--brand);
}

/* ── Row-action fixed dropdown (escapes overflow containers) ───────────────── */
.row-action-fixed-drop {
    position: fixed;
    z-index: 9999;
    display: none;
    min-width: 160px;
    padding: 4px 0;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-sm);
    background: #fff;
    box-shadow: none;
}

.row-action-fixed-drop.is-open {
    display: flex;
}

/* ── Company table — ID & Actions alignment ────────────────────────────────── */
.company-table th:nth-child(8),
.company-table td:nth-child(8) {
    text-align: center;
}

.company-table th:nth-child(9),
.company-table td:nth-child(9) {
    text-align: center;
}

.company-table .filter-row th:nth-child(8) input {
    width: 46px;
    text-align: center;
    padding-inline: 4px;
}

.company-table td:nth-child(9) .row-action-menu {
    margin: 0 auto;
}

/* Company detail actions and notes modal */
.company-action-more {
    display: inline-flex;
    align-items: center;
}

.company-action-more .mini-action {
    min-width: 42px;
    /*min-height: 34px;*/
    border: 0;
    border-radius: 8px;
    background: var(--brand);
    color: #fff;
    font-weight: 800;
    cursor: pointer;
    box-shadow: none;
    transition: background var(--t), box-shadow var(--t), transform var(--t);
}

.company-action-more .mini-action:hover {
    background: var(--brand-dark);
    box-shadow: none;
    transform: translateY(-1px);
}

.company-action-dropdown {
    min-width: 150px;
}

.row-action-fixed-drop.company-action-fixed,
.row-action-fixed-drop {
    min-width: 160px;
    width: max-content;
    max-width: calc(100vw - 16px);
    overflow-x: hidden;
}

/* ── Order detail tab nav ────────────────────────────────────────────────── */
.order-tab-nav {
    padding: 14px 20px 10px;
    border-bottom: 1px solid var(--line-light);
    margin-bottom: 24px !important;
    flex-wrap: wrap;
    gap: 6px;
}

.order-pdf-toggle {
    width: auto !important;
    height: auto !important;
    min-height: 34px !important;
    padding: 0 14px !important;
    border-radius: 50px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    border: 1.5px solid var(--brand) !important;
}

.order-edit-titlebar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
}

.order-edit-titlebar h1 {
    margin: 0;
}

.order-edit-status {
    display: flex;
    align-items: center;
    gap: 10px;
}

.order-edit-status-label {
    font-weight: 800;
    color: var(--ink-body);
}

.order-edit-status .button.info {
    min-height: 34px;
    padding: 0 14px;
    border-radius: 8px;
    font-weight: 800;
}

.notes-card-head {
    justify-content: space-between;
}

.note-entry {
    align-items: center;
}

.note-entry-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.note-entry>.note-delete,
.notes-add {
    display: none;
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    align-items: start;
    justify-items: center;
    padding: 72px 20px 24px;
    background: rgba(15, 23, 42, 0.55);
}

.modal-backdrop[hidden] {
    display: none;
}

.modal-card {
    width: min(560px, 100%);
    padding: 26px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    box-shadow: none;
}

.modal-card h2 {
    margin: 0 0 22px;
    color: #4b5563;
    font-size: 1.05rem;
    font-weight: 800;
}

.note-modal-field {
    display: grid;
    gap: 10px;
    color: var(--ink);
    font-size: 0.9rem;
    font-weight: 600;
}

.note-modal-input {
    width: 100%;
    min-height: 120px;
    resize: vertical;
    border: 1.5px solid var(--line);
    border-radius: 4px;
    padding: 10px 12px;
    font: inherit;
}

.note-modal-input:focus {
    outline: 2px solid var(--brand);
    outline-offset: 1px;
    border-color: var(--brand);
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 22px;
}

.admin-record-form {
    padding: 0;
    overflow: visible;
}

.admin-record-form .form-section-title {
    padding: 18px 22px;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    font-size: 1rem;
    font-weight: 700;
}

.admin-record-grid {
    padding: 28px;
    align-items: start;
    gap: 18px 24px;
}

.admin-record-grid label,
.address-form-grid label {
    color: var(--ink);
    font-size: 0.82rem;
    font-weight: 700;
}

.admin-record-grid input,
.admin-record-grid select,
.address-form-grid input,
.address-form-grid select {
    min-height: 34px;
}

.address-form-card {
    padding: 28px;
}

.address-form-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2.1fr) minmax(0, 1fr);
    align-items: start;
    gap: 20px 24px;
}

.address-form-grid .span-2 {
    grid-column: span 2;
}

.address-left-wide {
    grid-column: span 2;
}

.address-form-grid .form-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
    margin-top: 36px;
}

@media (max-width: 980px) {
    .address-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {

    .admin-record-grid,
    .address-form-grid {
        grid-template-columns: 1fr;
        padding: 20px;
    }

    .address-form-grid .span-2,
    .address-left-wide {
        grid-column: 1;
    }

    .address-form-card {
        padding: 0;
    }
}

.address-book-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.address-book-card,
.address-list-card {
    border: 1.5px solid var(--line);
    border-radius: var(--radius-md);
    background: #fff;
    box-shadow: none;
}

.address-book-card {
    overflow: hidden;
}

.address-book-card-head {
    padding: 18px 20px;
    border-bottom: 1px solid var(--line);
}

.address-book-card-head h2,
.address-book-list h2 {
    margin: 0;
    font-size: 1rem;
}

.address-book-list {
    overflow: hidden;
}

.address-book-list .table-header {
    align-items: center;
    padding: 20px 26px;
}

.address-book-list .table-header p {
    margin-top: 4px;
    color: var(--muted);
    font-size: 0.88rem;
}

.address-card-body {
    padding: 18px 20px;
}

.address-detail-list {
    display: grid;
    gap: 9px;
    margin: 0;
}

.address-detail-list div {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    gap: 12px;
}

.address-detail-list dt {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
}

.address-detail-list dd {
    min-width: 0;
    margin: 0;
    color: var(--ink-body);
    font-size: 0.84rem;
    font-weight: 600;
    word-break: break-word;
}

.address-detail-list .address-lines dd {
    line-height: 1.5;
}

.address-card-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--line-light);
}

.address-card-actions a,
.address-card-actions .link-button {
    border: 0;
    padding: 0;
    color: var(--brand-dark);
    background: transparent;
    font-size: 0.82rem;
    font-weight: 800;
    cursor: pointer;
}

.inline-action-form {
    display: contents;
}

.address-card-actions a:hover,
.address-card-actions .link-button:hover {
    color: var(--brand);
    text-decoration: underline;
}

.address-card-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    padding: 18px;
}

/* Address book page: "All Addresses" column should be a single stacked list (like reference app). */
.address-book-grid .address-book-list .address-card-list {
    grid-template-columns: 1fr;
}

.address-card-empty {
    display: grid;
    gap: 14px;
    justify-items: start;
}

.address-card-empty p {
    margin: 0;
    color: var(--muted);
}

.address-book-list .empty-state {
    display: grid;
    justify-items: center;
    gap: 10px;
    margin: 0;
    padding: 46px 24px 52px;
    text-align: center;
    background: #fff;
}

.address-book-list .empty-state h2 {
    margin: 0;
    color: var(--ink);
    font-size: 1.15rem;
}

.address-book-list .empty-state p {
    max-width: 420px;
    margin: 0 0 8px;
    color: var(--muted);
    font-size: 0.95rem;
}

@media (max-width: 980px) {

    .address-book-grid,
    .address-card-list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .address-detail-list div {
        grid-template-columns: 1fr;
        gap: 2px;
    }
}

/* ── Config list pages (Settings / Email Templates / Inventory Locations) ── */

/* Shared table-header layout for all config grids */
.settings-admin-grid .table-header,
.email-template-grid .table-header,
.fulfillment-region-grid .table-header {
    align-items: center;
    gap: 14px;
}

.settings-admin-grid .table-tools,
.email-template-grid .table-tools,
.fulfillment-region-grid .table-tools {
    flex: 1 1 auto;
    justify-content: flex-end;
}

.settings-admin-grid .wide-table-wrap,
.email-template-grid .wide-table-wrap,
.fulfillment-region-grid .wide-table-wrap {
    overflow-x: auto;
}

/* Settings table */
.settings-table {
    min-width: 1160px;
    table-layout: fixed;
}

.settings-table th,
.settings-table td {
    padding: 10px 12px;
    border-right: 1px solid var(--line-light);
    font-size: 0.82rem;
}

.settings-table td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.settings-table th:last-child,
.settings-table td:last-child {
    border-right: 0;
}

.settings-table th:nth-child(1),
.settings-table td:nth-child(1) {
    width: 86px;
}

.settings-table th:nth-child(2),
.settings-table td:nth-child(2) {
    width: 200px;
}

.settings-table th:nth-child(3),
.settings-table td:nth-child(3) {
    width: 180px;
}

.settings-table th:nth-child(4),
.settings-table td:nth-child(4) {
    width: 240px;
}

.settings-table th:nth-child(5),
.settings-table td:nth-child(5) {}

.settings-table th:nth-child(6),
.settings-table td:nth-child(6) {
    width: 200px;
}

.settings-table td:nth-child(2),
.settings-table td:nth-child(3) {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    word-break: break-word;
}

.settings-table td:nth-child(6) {
    overflow: visible;
}

.settings-table .filter-row th {
    padding: 8px 12px;
    background: #fff;
}

.settings-table .filter-row input,
.settings-table .filter-row select {
    width: 100%;
    min-height: 34px;
    padding: 6px 30px 6px 9px;
    border: 1px solid #d1d5db;
    border-radius: 5px;
    font-size: 0.78rem;
}

.settings-table .filter-row th:first-child input {
    min-width: 0;
    padding-right: 9px;
}

.settings-table tbody tr:nth-child(even) td {
    background: #f6f7f9;
}

.settings-table tbody tr:hover td {
    background: var(--brand-bg);
}

.setting-key {
    display: inline-block;
    max-width: 100%;
    padding: 2px 7px;
    border-radius: 5px;
    background: #f1f5f9;
    color: #1d4ed8;
    font-size: 0.78rem;
    font-family: ui-monospace, 'Cascadia Code', monospace;
    font-weight: 600;
    letter-spacing: 0.01em;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    word-break: break-word;
    vertical-align: bottom;
    box-sizing: border-box;
}

/* Email template table */
.email-template-table {
    min-width: 1400px;
    table-layout: fixed;
}

.email-template-table th,
.email-template-table td {
    padding: 10px 12px;
    border-right: 1px solid var(--line-light);
    font-size: 0.82rem;
}

.email-template-table th:last-child,
.email-template-table td:last-child {
    border-right: 0;
}

.email-template-table th:nth-child(1),
.email-template-table td:nth-child(1) {
    width: 160px;
}

.email-template-table th:nth-child(2),
.email-template-table td:nth-child(2) {
    width: 100px;
}

.email-template-table th:nth-child(3),
.email-template-table td:nth-child(3) {
    width: 280px;
}

.email-template-table th:nth-child(4),
.email-template-table td:nth-child(4) {
    width: 340px;
}

.email-template-table th:nth-child(5),
.email-template-table td:nth-child(5) {}

.email-template-table th:nth-child(6),
.email-template-table td:nth-child(6) {
    width: 100px;
}

.email-template-table th:nth-child(7),
.email-template-table td:nth-child(7) {
    width: 180px;
}

.email-template-table td:nth-child(7) {
    overflow: visible;
}

.email-template-table .filter-row th {
    padding: 8px 12px;
    background: #fff;
}

.email-template-table .filter-row input,
.email-template-table .filter-row select {
    width: 100%;
    min-height: 34px;
    padding: 6px 30px 6px 9px;
    border: 1px solid #d1d5db;
    border-radius: 5px;
    font-size: 0.78rem;
}

.email-template-table tbody tr:nth-child(even) td {
    background: #f6f7f9;
}

.email-template-table tbody tr:hover td {
    background: var(--brand-bg);
}

.email-template-table {
    table-layout: fixed;
    width: 100%;
    min-width: 1200px;
}

.email-template-table th:nth-child(1),
.email-template-table td:nth-child(1) {
    width: 160px;
}

.email-template-table th:nth-child(2),
.email-template-table td:nth-child(2) {
    width: 100px;
}

.email-template-table th:nth-child(3),
.email-template-table td:nth-child(3) {
    width: 220px;
}

.email-template-table th:nth-child(4),
.email-template-table td:nth-child(4) {
    width: 320px;
}

.email-template-table th:nth-child(5),
.email-template-table td:nth-child(5) {
    width: 180px;
}

.email-template-table th:nth-child(6),
.email-template-table td:nth-child(6) {
    width: 100px;
}

.email-template-table th:nth-child(7),
.email-template-table td:nth-child(7) {
    width: 280px;
    min-width: 280px;
}

.email-template-table td {
    vertical-align: top !important;
    padding: 12px 18px !important;
}

.email-template-table td[data-label="Actions"] {
    padding-right: 32px !important;
}

.email-template-table .action-group {
    display: flex !important;
    gap: 8px !important;
    justify-content: flex-start !important;
    margin-top: 12px;
}


.template-body-preview {
    max-height: 80px;
    max-width: 380px;
    margin: 0;
    padding: 6px 10px;
    overflow: auto;
    white-space: pre-wrap;
    color: #475569;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 0.72rem;
    line-height: 1.4;
}

.email-template-table td[data-label="Status"] .badge {
    margin-top: 14px;
}

/* Inventory location table */
.fulfillment-region-table {
    min-width: 700px;
    table-layout: fixed;
}

.fulfillment-region-table th,
.fulfillment-region-table td {
    padding: 10px 12px;
    border-right: 1px solid var(--line-light);
    font-size: 0.82rem;
}

.fulfillment-region-table th:last-child,
.fulfillment-region-table td:last-child {
    border-right: 0;
}

.fulfillment-region-table th:nth-child(1),
.fulfillment-region-table td:nth-child(1) {}

.fulfillment-region-table th:nth-child(2),
.fulfillment-region-table td:nth-child(2) {
    width: 130px;
}

.fulfillment-region-table th:nth-child(3),
.fulfillment-region-table td:nth-child(3) {
    width: 130px;
}

.fulfillment-region-table th:nth-child(4),
.fulfillment-region-table td:nth-child(4) {
    width: 200px;
}

.fulfillment-region-table td:nth-child(4) {
    overflow: visible;
}

.fulfillment-region-table .filter-row th {
    padding: 8px 12px;
    background: #fff;
}

.fulfillment-region-table .filter-row input,
.fulfillment-region-table .filter-row select {
    width: 100%;
    min-height: 34px;
    padding: 6px 30px 6px 9px;
    border: 1px solid #d1d5db;
    border-radius: 5px;
    font-size: 0.78rem;
}

.fulfillment-region-table tbody tr:nth-child(even) td {
    background: #f6f7f9;
}

.fulfillment-region-table tbody tr:hover td {
    background: var(--brand-bg);
}

/* Config form cards */
.config-form-card .config-form-grid {
    align-items: start;
    gap: 16px 24px;
}

.config-form-card label {
    font-size: 0.82rem;
    font-weight: 700;
}

.config-form-card input,
.config-form-card select {
    min-height: 34px;
}

.config-form-card textarea {
    min-height: 96px;
    resize: vertical;
}

.logo-preview-wrap {
    position: relative;
    display: block;
    width: fit-content;
    margin-bottom: 10px;
}

.logo-preview-img {
    display: block;
    max-height: 60px;
    max-width: 200px;
    border-radius: 8px;
    border: 1px solid var(--line);
}

.logo-remove-btn {
    position: absolute;
    top: -9px;
    right: -9px;
    width: 22px;
    height: 22px;
    padding: 0;
    display: flex;
    justify-content: center;
    border: 2px solid #fff;
    border-radius: 999px;
    background: #dc2626;
    color: #fff;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    box-shadow: none;
}

.logo-remove-btn:hover {
    background: #b91c1c;
}

.email-editor-shell {
    display: block;
    border: 1.5px solid #d1d5db;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    transition: border-color var(--t), box-shadow var(--t);
}

.email-editor-shell:focus-within {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.12);
}

.email-editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    min-height: 34px;
    padding: 5px 8px;
    border-bottom: 1px solid #d1d5db;
    color: var(--ink);
    background: #fff;
    font-size: 0.78rem;
    font-weight: 900;
}

.email-editor-toolbar button {
    width: auto;
    min-width: 28px;
    min-height: 24px;
    padding: 3px 7px;
    border: 0;
    border-radius: 6px;
    color: var(--ink);
    background: transparent;
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 900;
}

.email-editor-toolbar button:hover,
.email-editor-toolbar button:focus {
    color: var(--brand-dark);
    background: var(--brand-bg);
    outline: none;
}

.email-editor-shell textarea {
    min-height: 240px;
    padding: 12px 16px;
    border: 0;
    border-radius: 0;
    line-height: 1.6;
    resize: vertical;
}

.fulfillment-region-table {
    min-width: 980px;
    table-layout: fixed;
}

.fulfillment-region-table th:nth-child(1),
.fulfillment-region-table td:nth-child(1) {
    width: 42%;
}

.fulfillment-region-table th:nth-child(2),
.fulfillment-region-table td:nth-child(2) {
    width: 18%;
}

.fulfillment-region-table th:nth-child(3),
.fulfillment-region-table td:nth-child(3) {
    width: 18%;
}

.fulfillment-region-table th:nth-child(4),
.fulfillment-region-table td:nth-child(4) {
    width: 22%;
}

.email-template-table {
    min-width: 1500px;
    table-layout: fixed;
}

.email-template-table th:nth-child(1),
.email-template-table td:nth-child(1) {
    width: 170px;
}

.email-template-table th:nth-child(2),
.email-template-table td:nth-child(2) {
    width: 150px;
}

.email-template-table th:nth-child(3),
.email-template-table td:nth-child(3) {
    width: 360px;
}

.email-template-table th:nth-child(4),
.email-template-table td:nth-child(4) {
    width: 430px;
}

.email-template-table th:nth-child(5),
.email-template-table td:nth-child(5) {
    width: 300px;
}

.email-template-table th:nth-child(6),
.email-template-table td:nth-child(6) {
    width: 140px;
}


.template-body-preview {
    max-height: 190px;
    margin: 0;
    overflow: auto;
    white-space: pre-wrap;
    color: var(--ink);
    font: inherit;
    line-height: 1.45;
}

/* ── System pages: Email Log & Error Log ───────────────────────────────── */

/* Shared system log table header */
.email-log-grid .table-header,
.error-log-grid .table-header {
    align-items: center;
    gap: 14px;
}

.email-log-grid .table-tools,
.error-log-grid .table-tools {
    flex: 1 1 auto;
    justify-content: flex-end;
}

.email-log-grid .wide-table-wrap,
.error-log-grid .wide-table-wrap {
    overflow-x: auto;
}

.log-count {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
}

/* Email log table */
.email-log-table {
    width: 100%;
    min-width: 1600px;
    table-layout: fixed;
}

.email-log-table th,
.email-log-table td {
    padding: 10px 12px;
    border-right: 1px solid var(--line-light);
    font-size: 0.82rem;
    vertical-align: top;
}

.email-log-table th:last-child,
.email-log-table td:last-child {
    border-right: 0;
}

.email-log-table th:nth-child(1),
.email-log-table td:nth-child(1) {
    width: 160px;
}

.email-log-table th:nth-child(2),
.email-log-table td:nth-child(2) {
    width: 160px;
}

.email-log-table th:nth-child(3),
.email-log-table td:nth-child(3) {
    width: 240px;
}

.email-log-table th:nth-child(4),
.email-log-table td:nth-child(4) {
    width: 220px;
}

.email-log-table th:nth-child(5),
.email-log-table td:nth-child(5) {
    width: 620px;
}

.email-log-table th:nth-child(6),
.email-log-table td:nth-child(6) {
    width: 110px;
    max-width: 110px;
    text-align: center;
}

.email-log-table .filter-row th {
    padding: 8px 12px;
    background: #fff;
    vertical-align: middle;
}

.email-log-table .filter-row input,
.email-log-table .filter-row select {
    width: 100%;
    min-height: 34px;
    padding: 6px 30px 6px 9px;
    border: 1px solid #d1d5db;
    border-radius: 5px;
    font-size: 0.78rem;
}

.email-log-table tbody tr:nth-child(even) td {
    background: #f6f7f9;
}

.email-log-table tbody tr:hover td {
    background: var(--brand-bg);
}

.log-date {
    white-space: nowrap;
    color: var(--muted);
    font-size: 0.78rem;
}

.log-recipients {
    display: block;
    word-break: break-all;
    font-size: 0.78rem;
    color: var(--ink-body);
}

.email-body-preview {
    max-height: 220px;
    overflow: auto;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--ink-body);
    border: 1px solid var(--line-light);
    border-radius: 6px;
    padding: 8px 10px;
    background: #fff;
}

.email-body-preview img {
    max-width: 100%;
}

.log-body-frame-shell {
    width: 100%;
    min-height: 260px;
    overflow: visible;
    border: 1px solid #dbe4ef;
    border-radius: 8px;
    background: #f8fafc;
    box-shadow: none;
}

.log-body-frame {
    display: block;
    width: 100%;
    min-height: 260px;
    border: 0;
    background: #fff;
    overflow: hidden;
}

/* Error log table */
.error-log-table {
    min-width: 1800px;
    table-layout: fixed;
}

.error-log-table th,
.error-log-table td {
    padding: 8px 10px;
    border-right: 1px solid var(--line-light);
    font-size: 0.75rem;
    vertical-align: top;
}

.error-log-table th:last-child,
.error-log-table td:last-child {
    border-right: 0;
    overflow: visible;
}

.error-log-table th:nth-child(1),
.error-log-table td:nth-child(1) {
    width: 50px;
}

.error-log-table th:nth-child(2),
.error-log-table td:nth-child(2) {
    width: 170px;
}

.error-log-table th:nth-child(3),
.error-log-table td:nth-child(3) {
    width: 150px;
}

.error-log-table th:nth-child(4),
.error-log-table td:nth-child(4) {
    width: 220px;
}

.error-log-table td:nth-child(4) {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.error-log-table th:nth-child(5),
.error-log-table td:nth-child(5) {
    width: 350px;
}

.error-log-table th:nth-child(6) {}

.error-log-table td:nth-child(6) {}

.error-log-table th:nth-child(7),
.error-log-table td:nth-child(7) {
    width: 100px;
    text-align: center;
    overflow: visible;
}

.error-log-table .actions-cell {
    padding: 12px 8px !important;
    vertical-align: middle;
}

.error-log-table .filter-row th {
    padding: 6px 10px;
    background: #fff;
    vertical-align: middle;
}

.error-log-table .filter-row input,
.error-log-table .filter-row select {
    width: 100%;
    min-height: 30px;
    padding: 4px 28px 4px 8px;
    border: 1px solid #d1d5db;
    border-radius: 5px;
    font-size: 0.75rem;
}

.error-log-table tbody tr:nth-child(even) td {
    background: #f6f7f9;
}

.error-log-table tbody tr:hover td {
    background: var(--brand-bg);
}

.error-method {
    display: block;
    word-break: break-all;
    color: #1d4ed8;
    font-size: 0.72rem;
    font-family: ui-monospace, 'Cascadia Code', monospace;
}

.error-desc-cell {
    display: flex;
    flex-direction: column;
    gap: 6px;
    line-height: 1.4;
}

.error-file {
    display: block;
    color: #1e40af;
    font-size: 0.72rem;
    word-break: break-all;
    margin-bottom: 2px;
}

.error-line {
    display: block;
    color: var(--muted);
    font-size: 0.72rem;
    margin-bottom: 4px;
}

.error-message {
    display: block;
    color: #b42318;
    font-size: 0.75rem;
    font-weight: 600;
}

.error-meta-preview {
    max-height: 80px;
    margin: 0;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-all;
    color: var(--ink);
    font-size: 0.68rem;
    font-family: ui-monospace, 'Cascadia Code', monospace;
    line-height: 1.4;
}

/* ── Form Controls ─────────────────────────────────────────────────────────── */
.form-control {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--ink-body);
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid var(--line);
    appearance: none;
    border-radius: var(--radius-sm);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-control:focus {
    color: var(--ink-body);
    background-color: #fff;
    border-color: var(--brand-mid);
    outline: 0;
    box-shadow: none;
}

select.form-control {
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    padding-right: 2.5rem;
}

/* ── AJAX Grid Loading Overlay ─────────────────────────────────────────────── */
.grid-loading-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 10;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.grid-spinner-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.grid-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(64, 141, 251, 0.2);
    border-top-color: var(--brand);
    border-radius: 50%;
    animation: grid-spinner-rotate 0.8s linear infinite;
}

@keyframes grid-spinner-rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* ── Searchable Select ──────────────────────────────────────────────────────── */
.ss-wrap {
    position: relative;
    width: 100%;
}

.ss-native {
    display: none;
}

.ss-trigger {
    width: 100%;
    min-height: 38px;
    border: 1.5px solid #d1d5db;
    border-radius: var(--radius-sm);
    padding: 7px 34px 7px 11px;
    color: var(--ink);
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280' stroke-width='2.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E") no-repeat right 12px center / 14px;
    font-size: 0.9rem;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--t), box-shadow var(--t);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    box-sizing: border-box;
    outline: none;
}

.ss-trigger:hover {
    border-color: #9ca3af;
}

.ss-wrap.is-open .ss-trigger {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.12);
}

.ss-wrap.has-selection .ss-trigger {
    border-color: var(--brand);
    background-color: var(--brand-bg);
    color: var(--brand-dark);
    font-weight: 800;
}

.ss-wrap.is-invalid .ss-trigger {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12) !important;
}

.ss-wrap.ss-multi-wrap .ss-trigger {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    padding-top: 6px;
    padding-bottom: 6px;
    line-height: 1.35;
}

.ss-wrap.ss-multi-wrap.has-selection .ss-trigger {
    background: #fff;
    border-color: #1e3a8a;
    box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.12);
    color: var(--ink);
    font-weight: 700;
}

.ss-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    padding: 5px 9px;
    border-radius: 7px;
    background: #1e3a8a;
    color: #fff;
    font-weight: 800;
    font-size: 0.9rem;
    box-shadow: none;
}

.ss-pill-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 520px;
}

.ss-pill-remove {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    color: rgba(255, 255, 255, 0.95);
    background: rgba(255, 255, 255, 0.12);
    font-weight: 900;
    line-height: 1;
}

.ss-pill-remove:hover {
    background: rgba(255, 255, 255, 0.2);
}

.ss-pill--more {
    background: #0f172a;
}

.ss-panel {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1.5px solid #d1d5db;
    border-radius: var(--radius-sm);
    box-shadow: none;
    z-index: 9999;
    overflow: hidden;
}

.ss-wrap.is-open .ss-panel {
    display: block;
}

.ss-search-wrap {
    padding: 8px;
    border-bottom: 1px solid var(--line);
}

.ss-search {
    width: 100%;
    min-height: 34px;
    border: 1.5px solid #d1d5db;
    border-radius: 6px;
    padding: 5px 34px 5px 9px;
    font-size: 0.875rem;
    color: var(--ink);
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%239ca3af' stroke-width='2.5'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m21 21-4.3-4.3'/%3E%3C/svg%3E") no-repeat right 10px center / 16px;
    outline: none;
    box-sizing: border-box;
    transition: border-color var(--t);
}

.ss-search:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 2px rgba(29, 78, 216, 0.1);
}

.ss-list {
    list-style: none;
    margin: 0;
    padding: 4px 0;
    max-height: 220px;
    overflow-y: auto;
}

.ss-item {
    padding: 7px 12px;
    font-size: 0.9rem;
    color: var(--ink);
    cursor: pointer;
    transition: background var(--t);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Order-line product names outrun even the widened Name column, and truncating every row to an
   identical "AQQISHI AQSONE A/T..." makes the list useless, so wrap instead — .ss-list already
   scrolls vertically. Scoped to this one widget: the compact dropdowns elsewhere (admin user,
   company payment method, customer address) keep their single-line ellipsis. */
.ss-wrap:has(.order-line-product-select) .ss-item {
    white-space: normal;
    word-break: break-word;
}

/* The closed trigger has to wrap as well — showing "Audi A20 — Black Machine Fac..." once a row
   is saved makes the picked product just as unidentifiable as the truncated list was. Only
   min-height constrains .ss-trigger's box, so it grows to fit; the Name cell is vertical-align:
   top like the rest of .order-lines-table, so a taller trigger doesn't disturb the row. Same
   scoping rationale as the list rule above. */
.ss-wrap:has(.order-line-product-select) .ss-trigger {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    word-break: break-word;
    height: auto;
    line-height: 1.35;
}

/* The estimate line table reuses the same searchable product select, so its long product names
   need the same wrapping treatment. Kept on its own hook rather than sharing
   .order-line-product-select's rules, since those are tuned to the order table's column widths
   and the two tables are free to diverge. */
.ss-wrap:has(.estimate-line-product-select) .ss-item {
    white-space: normal;
    word-break: break-word;
}

.ss-wrap:has(.estimate-line-product-select) .ss-trigger {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    word-break: break-word;
    height: auto;
    line-height: 1.35;
}

/* 14 columns in one horizontally scrolling table squeeze the Name cell down to the widest single
   word otherwise, leaving the closed trigger unreadably narrow. */
.estimate-line-table .ss-wrap {
    min-width: 210px;
}

.ss-item:hover {
    background: var(--line-light);
}

.ss-item.is-selected {
    background: var(--brand);
    color: #fff;
}

.ss-item.is-hidden {
    display: none;
}

.ss-empty {
    padding: 10px 14px;
    font-size: 0.875rem;
    color: var(--muted);
}

.site-admin .ss-wrap.is-open .ss-trigger {
    border-color: var(--admin-blue);
    box-shadow: 0 0 0 3px rgba(64, 141, 251, 0.16);
}

.site-admin .ss-wrap.has-selection .ss-trigger {
    border-color: var(--admin-blue);
    background-color: var(--admin-blue-soft);
    color: var(--admin-blue-hover);
}

.site-admin .ss-search:focus {
    border-color: var(--admin-blue);
    box-shadow: 0 0 0 2px rgba(64, 141, 251, 0.14);
}

.site-admin .ss-item.is-selected {
    background: var(--admin-blue);
    color: #fff;
}

.site-admin .ss-trigger,
.site-admin .ss-search {
    min-height: 34px;
}

/* Admin page switch buttons (Products: Add / Pricing / Details) */
.switch-nav {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.switch-nav .button {
    min-height: 32px;
    padding: 0 12px;
    border-radius: var(--radius-sm);
}

/* Use the existing theme button styles; only override colors per switch */
.switch-nav .button.switch-add,
.switch-nav .button.switch-pricing,
.switch-nav .button.switch-details {
    color: #fff !important;
    border-color: transparent !important;
}

.switch-nav .button.switch-add {
    background: var(--brand) !important;
}
.switch-nav .button.switch-add:hover {
    background: var(--brand-dark) !important;
    transform: translateY(-1px);
    box-shadow: none;
}

.switch-nav .button.switch-pricing {
    background: var(--blue) !important;
}
.switch-nav .button.switch-pricing:hover {
    background: #1e40af !important;
    transform: translateY(-1px);
    box-shadow: none;
}

.switch-nav .button.switch-details {
    background: var(--brand) !important;
}
.switch-nav .button.switch-details:hover {
    background: var(--brand-dark) !important;
    transform: translateY(-1px);
    box-shadow: none;
}

.switch-nav .button.switch-add {
    /* handled above */
}

/* Customer catalog refinements */
.site-customer {
    background: #fffaf1;
}

.site-customer .content-frame {
    width: min(1280px, calc(100% - 34px));
    /*padding-top: 18px;*/
    padding-top: 20px;
}

.site-customer .topbar {
    min-height: 54px;
    padding-block: 6px;
    border-bottom-color: #e7ebef;
    box-shadow: none;
}

.site-customer .brand {
    gap: 9px;
    font-size: 0.86rem;
    letter-spacing: 0;
}

.site-customer .brand-mark {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: var(--brand);
    font-size: 0.75rem;
}

.site-customer .brand-copy small {
    font-size: 0.56rem;
    letter-spacing: 0.1em;
}

.site-customer .nav {
    gap: 2px;
}

.site-customer .nav a,
.site-customer .nav .nav-dropdown-toggle,
.site-customer .button,
.site-customer .button.info {
    min-height: 38px;
    padding: 0 14px;
    border-radius: 5px;
    font-size: 0.88rem;
    font-weight: 800;
}

.site-customer .nav a,
.site-customer .nav .nav-dropdown-toggle {
    font-weight: 500;
}

.site-customer .nav a.is-current,
.site-customer .nav a.active,
.site-customer .nav-dropdown.is-current .nav-dropdown-toggle {
    background: #111827;
    color: #fff;
}

.site-customer .button.primary,
.site-customer .nav-cta {
    background: var(--brand) !important;
    border-color: var(--brand) !important;
}

.site-customer .button.outline {
    background: #fff;
    border-color: #d9dee5;
}

.site-customer .customer-user-menu-toggle {
    min-height: 34px;
    padding: 4px 10px 4px 5px;
    border-radius: 6px;
}

.site-customer .customer-user-menu-icon {
    width: 24px;
    height: 24px;
    border-radius: 6px;
}

.site-customer .customer-user-menu-label {
    max-width: 170px;
    font-size: 0.78rem;
}

.site-customer .customer-user-menu-dropdown,
.site-customer .nav-dropdown-menu {
    border-radius: 6px;
}

.site-customer .catalog-heading,
.site-customer .order-detail-header,
.site-customer .panel,
.site-customer .table-card,
.site-customer .card,
.site-customer .auth-card,
.site-customer .auth-card-solo {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
    box-shadow: none;
}

.site-customer .catalog-heading,
.site-customer .order-detail-header {
    margin-bottom: 14px;
    padding: 14px 16px;
}

.site-customer .order-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.site-customer .catalog-heading h1,
.site-customer .order-detail-header h1,
.site-customer .panel-title-row h1,
.site-customer .table-header h2,
.site-customer .card-header h2 {
    font-size: 1.08rem;
    letter-spacing: 0;
}

.site-customer .eyebrow {
    margin-bottom: 4px;
    color: #c66a1a;
    font-size: 0.59rem;
    letter-spacing: 0.16em;
}

.site-customer .lead,
.site-customer .muted,
.site-customer p {
    font-size: 0.78rem;
}

.site-customer .breadcrumbs {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #6b7280;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}

.site-customer .breadcrumbs a {
    color: #1d4ed8;
}

.site-customer .table-header,
.site-customer .panel-title-row,
.site-customer .card-header {
    min-height: 42px;
    padding: 12px 14px;
    border-bottom: 1px solid #edf0f3;
    background: #fff;
}

.site-customer .table-count,
.site-customer .product-count-label,
.site-customer .selected-view-label {
    color: #6b7280;
    font-size: 0.72rem;
    font-weight: 800;
}

.site-customer .customer-catalog-heading.catalog-heading {
    align-items: center;
    padding: 16px 18px;
}

.site-customer .customer-catalog-heading h1 {
    font-size: 1.25rem;
}

.site-customer .customer-catalog-heading .catalog-controls {
    flex: 0 0 auto;
    gap: 8px;
}

.site-customer .catalog-search {
    width: 310px;
    min-width: 220px;
    min-height: 34px;
    border-radius: 5px;
    padding: 0 12px;
    font-size: 0.76rem;
}

.site-customer .catalog-view-toggle {
    gap: 2px;
    padding: 3px;
    border-radius: 6px;
    background: #f1f5f9;
}

.site-customer .catalog-view-toggle .button {
    width: 32px;
    min-height: 30px;
    padding: 0;
}

.site-customer .catalog-warehouse-select-wrap {
    min-height: 34px;
    padding: 4px 8px;
    border-radius: 6px;
    gap: 7px;
}

.site-customer .catalog-warehouse-label {
    color: #4b5563;
    font-size: 0.72rem;
}

.site-customer .catalog-warehouse-select {
    min-width: 132px;
    height: 28px;
    border-radius: 5px;
    font-size: 0.74rem;
}

.site-customer .marketplace-layout {
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 14px;
}

.site-customer .filter-panel {
    top: 66px;
    padding: 10px;
    border-radius: 8px;
    box-shadow: none;
}

.site-customer .filter-panel > h2,
.site-customer .catalog-filter-block > h2 {
    margin-left: 6px;
    font-size: 0.61rem;
}

.site-customer .filter-link {
    min-height: 30px;
    padding: 7px 8px;
    border-radius: 5px;
    margin: 1px 0;
}

.site-customer .filter-link span,
.site-customer .filter-link strong {
    font-size: 0.75rem;
}

.site-customer .catalog-filter-field {
    margin: 7px 0;
    padding: 8px;
    border-radius: 5px;
}

.site-customer .catalog-filter-label {
    font-size: 0.68rem;
}

.site-customer .catalog-filter-block .form-control {
    min-height: 30px;
    border-radius: 5px;
    font-size: 0.72rem;
}

.site-customer .section-header {
    min-height: 28px;
    margin-bottom: 8px;
}

.site-customer .product-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.site-customer .product-grid.product-grid-market {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 18px 14px;
}

.site-customer .product-card,
.site-customer .market-product {
    border-radius: 5px;
    box-shadow: none;
}

.site-customer .market-product:hover {
    transform: none;
    box-shadow: none;
}

.site-customer .product-media {
    min-height: 118px;
    background: #ffffff;
}

.site-customer .product-media.is-empty {
    background: #ffffff;
    color: #94a3b8;
}

.site-customer .product-media.is-empty::after {
    display: none;
}

.site-customer .product-media img {
    object-fit: contain;
    padding: 10px;
    background: #fff;
}

.site-customer .product-body {
    display: grid;
    gap: 7px;
    padding: 10px 12px 11px;
}

.site-customer .product-body h2 {
    min-height: 33px;
    margin: 0;
    font-size: 0.76rem;
    line-height: 1.25;
    text-decoration: underline;
}

.site-customer .sku {
    margin-bottom: 3px;
    color: #374151;
    font-size: 0.64rem;
    letter-spacing: 0;
}

.site-customer .product-category,
.site-customer .product-body > p {
    color: #6b7280;
    font-size: 0.80rem;
    font-weight: 700;
}

.site-customer .product-avail {
    font-size: 0.68rem;
    font-weight: 800;
}

.site-customer .product-footer {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.site-customer .product-price,
.site-customer .product-body strong {
    color: #1d4ed8;
    font-size: 0.78rem;
    font-weight: 800;
}

.site-customer .btn-cart {
    min-height: 30px;
    width: 100%;
    justify-content: center;
    border-radius: 4px;
    font-size: 0.7rem;
}

.site-customer .product-footer-spacer {
    display: block;
    min-height: 30px;
    width: 100%;
    visibility: hidden;
}

.site-customer .product-grid-market .market-product {
    display: grid;
    grid-template-rows: auto 1fr;
}

.site-customer .product-grid-market .product-media {
    aspect-ratio: 1 / 1;
    min-height: 0;
}

.site-customer .product-grid-market .product-body {
    grid-template-rows: minmax(92px, auto) 28px 1fr;
    gap: 0;
}

.site-customer .product-grid-market .product-main {
    display: grid;
    grid-template-rows: 18px minmax(34px, auto) 28px;
    align-content: start;
    gap: 6px;
    min-height: 92px;
}

.site-customer .product-grid-market .product-body h2 {
    min-height: 34px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.site-customer .product-grid-market .product-avail {
    align-self: center;
}

.site-customer .product-grid-market .product-footer {
    align-self: end;
}

.site-customer .product-grid-market .guest-product-card .product-body {
    grid-template-rows: auto auto;
    gap: 10px;
}

.site-customer .product-grid-market .guest-product-card .product-main {
    display: block;
    min-height: 0;
}

.site-customer .product-grid-market .guest-product-card .product-body h2 {
    min-height: 0;
    margin-bottom: 6px;
}

.site-customer .product-grid-market .guest-product-card .product-unit {
    margin: 0;
}

.site-customer .product-grid-market .guest-product-card .product-footer {
    display: none;
}

@media (max-width: 1500px) {
    .site-customer .product-grid.product-grid-market {
        grid-template-columns: repeat(8, minmax(0, 1fr));
    }
}

.site-customer .catalog-products.is-list-view {
    gap: 8px;
}

.site-customer .catalog-products.is-list-view .market-product {
    grid-template-columns: 72px minmax(0, 1fr);
}

.site-customer .catalog-products.is-list-view .product-media {
    min-height: 72px;
}

.site-customer .catalog-products.is-list-view .product-body {
    grid-template-columns: minmax(180px, 1.8fr) 120px 84px 116px;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
}

.site-customer .catalog-products.is-list-view .product-body h2 {
    min-height: 0;
}

.site-customer .catalog-products.is-list-view .btn-cart {
    width: auto;
}

.site-customer .wide-table-wrap,
.site-customer .cart-table-wrap {
    overflow: auto;
}

.site-customer th {
    padding: 9px 10px;
    color: #4b5563;
    background: #f8fafc;
    border-bottom: 1px solid #e5e7eb;
    font-size: 0.67rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.site-customer td {
    padding: 9px 10px;
    border-bottom: 1px solid #f0f2f4;
    color: #1f2937;
    font-size: 0.74rem;
    vertical-align: middle;
}

.site-customer tbody tr:hover td {
    background: #f7fbfa;
}

.site-customer .order-list-table,
.site-customer .cart-table,
.site-customer .customer-company-users-table {
    min-width: 980px;
}

.site-customer .customer-order-table {
    min-width: 1380px;
}

/* Below 760px every table switches to the stacked layout (thead hidden, each cell a
   label|value flex row — see the @media (max-width: 760px) block). The customer data
   tables kept their desktop min-width (980–1380px) through that switch, so each stacked
   row stayed ~1350px wide and pushed its value off-screen to the right, leaving only the
   data-label column visible. Dropping the min-width lets the rows fit the viewport, which
   is what makes the stacked layout readable. Covers orders/quotes lists, order & quote
   line-item tables, company users, and the cart table. #139 */
@media (max-width: 760px) {
    .site-customer .order-list-table,
    .site-customer .customer-order-table,
    .site-customer .customer-order-items-table,
    .site-customer .customer-company-users-table,
    .site-customer .cart-table {
        min-width: 0;
        width: 100%;
    }

    .site-customer .wide-table-wrap {
        overflow-x: visible;
    }
}

/* Orders/quotes list on desktop: the Actions column (Make Payment / Detail / Cancel / Reorder)
   demanded ~440px of the auto-layout table, starving the Product column down to ~90px so tire
   names wrapped one character per line. Cap Actions to a narrow column with its buttons stacked,
   and give Product a real min-width that breaks at word boundaries, not mid-word. Targeted by
   data-label so it holds whatever position the column sits in (orders vs quotes differ), and
   scoped ≥761px so it doesn't disturb the ≤760px stacked-card layout. #139 */
@media (min-width: 761px) {
    .site-customer .customer-order-table td[data-label="Product"] {
        min-width: 210px;
        word-break: normal;
        overflow-wrap: anywhere;
    }

    /* The Actions <td> is itself the .customer-order-actions flex container (display:flex, row),
       whose buttons overflowed the cell. Cap it and stack the buttons vertically. */
    .site-customer .customer-order-table td[data-label="Actions"] {
        width: 168px;
        white-space: normal;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }

    .site-customer .customer-order-table td[data-label="Actions"] > a,
    .site-customer .customer-order-table td[data-label="Actions"] > form,
    .site-customer .customer-order-table td[data-label="Actions"] > button,
    .site-customer .customer-order-table td[data-label="Actions"] > form > button {
        width: 100%;
        margin: 0;
        text-align: center;
    }
}

.site-customer .order-detail-nav,
.site-customer .customer-order-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-bottom: 1px solid #edf0f3;
}

.site-customer .detail-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.site-customer .detail-tabs a {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 10px;
    border: 1px solid #d9dee5;
    border-radius: 5px;
    color: #4b5563;
    background: #fff;
    font-size: 0.72rem;
    font-weight: 800;
}

.site-customer .detail-tabs a.is-active {
    color: #fff;
    border-color: #111827;
    background: #111827;
}

.site-customer label,
.site-customer .form-label {
    color: #374151;
    font-size: 0.72rem;
    font-weight: 800;
}

.site-customer .form-control,
.site-customer input,
.site-customer select,
.site-customer textarea {
    border-radius: 5px;
    font-size: 0.76rem;
}

.site-customer .form-control,
.site-customer input:not([type="checkbox"]):not([type="radio"]),
.site-customer select {
    min-height: 34px;
}

.site-customer textarea.form-control,
.site-customer textarea {
    min-height: 84px;
}

.site-customer .detail-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border: 1px solid #edf0f3;
    border-radius: 6px;
    overflow: hidden;
}

.site-customer .detail-list > div {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr);
    gap: 12px;
    padding: 10px 12px;
    border-bottom: 1px solid #edf0f3;
}

.site-customer .detail-list > div:nth-child(odd) {
    border-right: 1px solid #edf0f3;
}

.site-customer .detail-list dt {
    color: #6b7280;
    font-size: 0.68rem;
    font-weight: 900;
    text-transform: uppercase;
}

.site-customer .detail-list dd {
    margin: 0;
    color: #111827;
    font-size: 0.76rem;
    font-weight: 700;
}

.site-customer .market-hero {
    grid-template-columns: minmax(0, 1fr) 260px;
    margin-bottom: 14px;
    border-radius: 8px;
    overflow: hidden;
}

.site-customer .market-copy,
.site-customer .market-feature {
    padding: 18px;
}

.site-customer .market-copy h1 {
    font-size: 1.35rem;
    letter-spacing: 0;
}

.site-customer .market-feature {
    min-height: 0;
    border-left: 1px solid #edf0f3;
    background: linear-gradient(180deg, #ffffff 0%, #f5fbfa 100%);
}

.site-customer .market-feature::before {
    background: radial-gradient(circle at 82% 20%, rgba(29, 78, 216, 0.08), transparent 55%);
}

.site-customer .market-feature strong {
    color: #0f172a;
}

.site-customer .market-feature p {
    margin: 0;
    color: #526581;
    font-size: 0.82rem;
    line-height: 1.45;
}

.site-customer .market-feature .muted {
    color: #6b7c93;
}

.site-customer .category-row {
    gap: 8px;
    margin-bottom: 14px;
}

.site-customer .category-pill {
    min-height: 42px;
    padding: 9px 12px;
    border-radius: 6px;
    box-shadow: none;
}

.site-customer .cart-layout,
.site-customer .checkout-layout {
    grid-template-columns: minmax(0, 1fr) 300px;
}

.site-customer .cart-summary,
.site-customer .checkout-summary,
.site-customer .customer-contact-form-card {
    position: sticky;
    top: 66px;
}

.site-customer .cart-summary-body,
.site-customer .checkout-grid,
.site-customer .customer-company-profile-body,
.site-customer .customer-company-address-body {
    padding: 14px;
}

.site-customer .cart-summary-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #edf0f3;
    font-size: 0.76rem;
}

.site-customer .cart-summary-row.total {
    border-bottom: 0;
    font-weight: 900;
}

.site-customer .card-footer,
.site-customer .cart-summary-actions {
    padding: 12px 14px;
    border-top: 1px solid #edf0f3;
}

.site-customer .checkout-panel {
    padding: 12px;
    border: 1px solid #edf0f3;
    border-radius: 6px;
    background: #fbfcfd;
}

.site-customer .customer-company-profile-grid,
.site-customer .customer-contact-grid {
    gap: 14px;
}

.site-customer .customer-contact-grid {
    grid-template-columns: minmax(0, 1fr) 360px;
}

.site-customer .customer-contact-card {
    padding: 14px;
}

.site-customer .customer-contact-card + .customer-contact-card {
    margin-top: 10px;
}

.site-customer .customer-contact-list li {
    font-size: 0.76rem;
}

.site-customer .auth-center {
    display: grid;
    place-items: start center;
    min-height: calc(100vh - 190px);
    padding-top: 22px;
}

.site-customer .auth-card {
    width: min(500px, 100%);
    padding: 18px;
}

.site-customer .auth-card-solo {
    width: min(700px, 100%);
    padding: 18px;
}

.site-customer .auth-card h1,
.site-customer .auth-card-solo h1 {
    font-size: 1.18rem;
    letter-spacing: 0;
}

.site-customer .alert {
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 0.76rem;
}

@media (max-width: 1180px) {
    .site-customer .product-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .site-customer .customer-catalog-heading.catalog-heading {
        align-items: stretch;
        flex-direction: column;
    }
}

@media (max-width: 980px) {
    .site-customer .marketplace-layout,
    .site-customer .cart-layout,
    .site-customer .checkout-layout,
    .site-customer .customer-contact-grid,
    .site-customer .market-hero {
        grid-template-columns: 1fr;
    }

    .site-customer .cart-summary,
    .site-customer .checkout-summary,
    .site-customer .customer-contact-form-card {
        position: static;
    }

    .site-customer .order-detail-header,
    .site-customer .order-detail-nav,
    .site-customer .customer-order-nav {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 760px) {
    .site-customer .product-grid,
    .site-customer .detail-list {
        grid-template-columns: 1fr;
    }

    .site-customer .detail-list > div:nth-child(odd) {
        border-right: 0;
    }

    .site-customer .catalog-products.is-list-view .market-product,
    .site-customer .catalog-products.is-list-view .product-body {
        grid-template-columns: 1fr;
    }

    .site-customer .catalog-search,
    .site-customer .catalog-warehouse-select-wrap,
    .site-customer .catalog-view-toggle {
        width: 100%;
    }
}

/* Customer catalog product browser */
.site-customer .catalog-shell {
    overflow: visible;
    position: relative;
    border: 1px solid #e6e8ee;
    border-radius: 6px;
    background: #fff;
    box-shadow: none;
}

.site-customer .catalog-shell.is-loading::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    z-index: 9;
}

.site-customer .catalog-shell.is-loading::after {
    content: "Loading products...";
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 160px;
    padding: 42px 18px 14px;
    border-radius: 18px;
    color: #1d4ed8;
    background:
        radial-gradient(circle at center 18px, transparent 0 12px, transparent 12px),
        rgba(255, 255, 255, 0.96);
    box-shadow: none;
    font-size: 0.84rem;
    font-weight: 800;
    text-align: center;
    transform: translate(-50%, -50%);
    z-index: 11;
}

.site-customer .catalog-shell.is-loading .catalog-products,
.site-customer .catalog-shell.is-loading .js-catalog-pagination,
.site-customer .catalog-shell.is-loading .catalog-toolbar,
.site-customer .catalog-shell.is-loading .catalog-meta {
    pointer-events: none;
}

.site-customer .catalog-toolbar {
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns: minmax(210px, 240px) minmax(260px, 1fr) 122px 122px auto minmax(180px, 205px);
    align-items: center;
    gap: 16px 18px;
    min-height: 76px;
    padding: 18px 20px;
    border-bottom: 1px solid #e6e8ee;
}

.site-customer .catalog-category-menu {
    position: relative;
}

.site-customer .catalog-category-menu::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 12px;
}

.site-customer .catalog-filter-button,
.site-customer .catalog-search-btn,
.site-customer .catalog-reset-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    border: 1px solid #4b5563;
    border-radius: 5px;
    background: #fff;
    color: #111827;
    font-size: 1rem;
    font-weight: 500;
}

.site-customer .catalog-search-btn {
    border-color: var(--brand);
    background: var(--brand);
    color: #fff;
    font-weight: 700;
}

.site-customer .catalog-search-btn:hover {
    border-color: var(--brand-dark);
    background: var(--brand-dark);
    box-shadow: none;
}

.site-customer .catalog-reset-btn {
    border-color: #dbe4e8;
    background: #f5f8f9;
    color: #0f172a;
}

.site-customer .catalog-reset-btn:hover {
    border-color: #b9c8ce;
    background: #edf4f6;
}

.site-customer .catalog-category-dropdown {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    display: none;
    width: 230px;
    overflow: visible;
    padding: 12px 0;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #fff;
    box-shadow: none;
    z-index: 20;
}

.site-customer .catalog-category-menu.is-open .catalog-category-dropdown,
.site-customer .catalog-category-menu:hover .catalog-category-dropdown,
.site-customer .catalog-category-menu:focus-within .catalog-category-dropdown {
    display: block;
}

.site-customer .catalog-category-dropdown .filter-link {
    min-height: 38px;
    margin: 0;
    padding: 8px 16px;
    border: 0;
    border-radius: 0;
    justify-content: flex-start;
    color: #30447b;
    background: #fff;
    font-size: 0.95rem;
}

.site-customer .catalog-category-dropdown .category-tree-item {
    position: relative;
}

.site-customer .catalog-category-dropdown .category-tree-item.has-children::before {
    content: '';
    position: absolute;
    top: 0;
    left: 100%;
    width: 4px;
    height: 100%;
    z-index: 24;
}

.site-customer .catalog-category-dropdown .category-tree-link {
    position: relative;
    padding-right: 34px;
}

.site-customer .catalog-category-dropdown .category-tree-link-label {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.site-customer .catalog-category-dropdown .category-tree-item.is-child .category-tree-link {
    font-size: 0.92rem;
}

.site-customer .catalog-category-dropdown .category-tree-item.has-children > .category-tree-link::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 16px;
    width: 6px;
    height: 6px;
    border-top: 1.5px solid #8aa0b6;
    border-right: 1.5px solid #8aa0b6;
    transform: translateY(-50%) rotate(45deg);
}

.site-customer .catalog-category-dropdown .filter-link strong {
    display: none;
}

.site-customer .catalog-category-dropdown .category-tree-children {
    position: absolute;
    top: -6px;
    left: calc(100% - 4px);
    display: none;
    width: 230px;
    max-height: none;
    overflow: visible;
    padding: 6px 0;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #fff;
    box-shadow: none;
    z-index: 25;
}

.site-customer .catalog-category-dropdown .category-tree-item.opens-left > .category-tree-children {
    left: auto;
    right: calc(100% - 4px);
}

.site-customer .catalog-category-dropdown .category-tree-item:hover > .category-tree-children,
.site-customer .catalog-category-dropdown .category-tree-item:focus-within > .category-tree-children {
    display: block;
}

.site-customer .catalog-category-dropdown .filter-link:hover,
.site-customer .catalog-category-dropdown .filter-link.active {
    background: #f5f7fb;
}

.site-customer .catalog-search-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid #4b5563;
    border-radius: 5px;
    color: #8a94aa;
    background: #fff;
}

.site-customer .catalog-search-wrap .catalog-search {
    width: 100%;
    min-width: 0;
    min-height: 43px;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: #111827;
    font-size: 1rem;
    box-shadow: none;
}

.site-customer .catalog-view-group {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    color: #111827;
    font-size: 0.95rem;
    min-width: 0;
}

.site-customer .catalog-view-group .catalog-view-toggle {
    display: inline-flex;
    gap: 4px;
    padding: 0;
    border: 0;
    background: transparent;
}

.site-customer .catalog-view-group .view-toggle {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 4px;
    color: var(--brand-dark);
    background: #edf7f6;
}

.site-customer .catalog-view-group .view-toggle.active {
    color: #fff;
    background: var(--brand);
    box-shadow: none;
}

.site-customer .catalog-view-group .view-toggle:hover:not(.active) {
    color: var(--brand);
    background: #e1f1ef;
}

.site-customer .catalog-warehouse-select-wrap {
    justify-self: end;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    min-height: 44px;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.site-customer .catalog-warehouse-label {
    color: #111827;
    font-size: 0.95rem;
    font-weight: 500;
    white-space: nowrap;
}

.site-customer .catalog-warehouse-select {
    width: 190px;
    min-width: 190px;
    height: 42px;
    padding: 0 34px 0 12px;
    border: 1px solid #d9dee8;
    border-radius: 5px;
    background-color: #fff;
    color: #111827;
    font-size: 0.95rem;
    font-weight: 800;
}

@media (max-width: 1420px) {
    .site-customer .catalog-toolbar {
        grid-template-columns: minmax(210px, 240px) minmax(260px, 1fr) 122px 122px;
    }

    .site-customer .catalog-view-group {
        grid-column: 1 / span 2;
    }

    .site-customer .catalog-warehouse-select-wrap {
        grid-column: 3 / span 2;
    }
}

@media (max-width: 1120px) {
    .site-customer .catalog-toolbar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .site-customer .catalog-category-menu,
    .site-customer .catalog-search-wrap,
    .site-customer .catalog-search-btn,
    .site-customer .catalog-reset-btn,
    .site-customer .catalog-view-group,
    .site-customer .catalog-warehouse-select-wrap {
        justify-self: stretch;
    }

    .site-customer .catalog-search-btn,
    .site-customer .catalog-reset-btn {
        width: 100%;
    }

    .site-customer .catalog-warehouse-select-wrap {
        justify-content: space-between;
        align-items: stretch;
    }

    .site-customer .catalog-warehouse-select {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 760px) {
    .site-customer .catalog-toolbar {
        grid-template-columns: 1fr;
    }

    .site-customer .catalog-view-group,
    .site-customer .catalog-warehouse-select-wrap {
        justify-content: flex-start;
    }

    .site-customer .catalog-warehouse-select-wrap {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }

    .site-customer .catalog-warehouse-label {
        align-self: flex-start;
    }

    .site-customer .catalog-warehouse-select {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }
}

/* Wheel category page — Number1CategoryProductPageBundle facet filter panel.
   Sits above .catalog-toolbar as its own full-width section (not squeezed into the
   toolbar's fixed grid columns, which are sized for a single search box). */
.site-customer .wheel-filter-panel {
    padding: 18px 20px 0;
    border-bottom: 1px solid #e6e8ee;
}

.site-customer .wheel-facet-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.site-customer .wheel-facet {
    box-sizing: border-box;
    min-width: 150px;
    max-width: 190px;
    padding: 12px 14px;
    border: 1px solid #d9dee8;
    border-radius: 6px;
    background: #fff;
}

.site-customer .wheel-facet-label {
    color: #111827;
    font-size: 0.95rem;
    font-weight: 700;
}

.site-customer .wheel-facet-options {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 190px;
    margin-top: 6px;
    overflow-y: auto;
}

.site-customer .wheel-facet-option {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #30447b;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}

.site-customer .wheel-facet-option input {
    flex: 0 0 auto;
}

.site-customer .wheel-facet-empty {
    margin: 0;
    color: #8a94aa;
    font-size: 0.85rem;
}

/* "Advanced View" — CSS-only checkbox toggle (no JS) so the hidden facets appear inline in the
   same row as Diameter/PCD once revealed, and the toggle itself disappears — matching the
   reference app's behavior exactly (advance-filter-view / rim-advanced-view in its own CSS). */
.site-customer .wheel-advanced-toggle-input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

.site-customer .wheel-facet.is-advanced {
    display: none;
}

.site-customer .wheel-advanced-toggle-input:checked ~ .wheel-facet-row .wheel-facet.is-advanced {
    display: block;
}

.site-customer .wheel-advanced-toggle-input:checked ~ .wheel-facet-row .wheel-advanced-toggle-label {
    display: none;
}

.site-customer .wheel-advanced-toggle-label {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    height: 44px;
    padding: 0 18px;
    border: 1px solid var(--brand);
    border-radius: 5px;
    color: var(--brand-dark);
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    background: #edf7f6;
}

.site-customer .wheel-advanced-toggle-label:hover {
    background: #e1f1ef;
}

.site-customer .wheel-advanced-toggle-input:focus-visible ~ .wheel-facet-row .wheel-advanced-toggle-label {
    outline: 2px solid var(--brand-dark);
    outline-offset: 2px;
}

.site-customer .wheel-filter-actions {
    display: flex;
    gap: 12px;
    margin: 18px 0;
}

.site-customer .wheel-filter-actions .catalog-search-btn,
.site-customer .wheel-filter-actions .catalog-reset-btn {
    width: auto;
    min-width: 122px;
    padding: 0 20px;
}

.site-customer .catalog-meta {
    display: none;
}

.site-customer .catalog-shell .catalog-products {
    grid-template-columns: repeat(6, minmax(0, 210px));
    justify-content: space-between;
    gap: 30px 26px;
    padding: 38px 34px 24px;
    align-items: start;
}

.site-customer .catalog-shell .market-product {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 210px;
    min-width: 0;
    min-height: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.site-customer .catalog-shell .product-media {
    width: 100%;
    min-height: 0;
    aspect-ratio: 1 / 1;
    border: 1px solid #e4e7ee;
    border-radius: 5px;
    background: #ffffff;
}

.site-customer .catalog-shell .product-media.is-empty {
    background: #ffffff;
    color: #94a3b8;
}

.site-customer .catalog-shell .product-media.is-empty::after {
    display: none;
}

.site-customer .catalog-shell .product-media img {
    width: 100%;
    height: 100%;
    padding: 12px;
    object-fit: contain;
}

.site-customer .catalog-shell .product-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 8px 0 0;
}

.site-customer .catalog-shell .product-main {
    flex: 1 1 auto;
}

.site-customer .catalog-shell .product-body h2 {
    min-height: 44px;
    margin: 0;
    color: #000;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.35;
    text-decoration: underline;
}

.site-customer .catalog-shell .sku,
.site-customer .catalog-shell .product-category,
.site-customer .catalog-shell .product-size,
.site-customer .catalog-shell .product-remarks {
    display: none;
}

.site-customer .catalog-shell .product-unit {
    margin-top: 8px;
    color: #000;
    font-size: 1rem;
}

.site-customer .catalog-shell .product-price {
    display: block;
    margin-top: 10px;
    color: #000;
    font-size: 1rem;
    font-weight: 500;
}

.site-customer .catalog-shell .product-avail {
    display: block;
    margin-top: 2px;
    color: #0369a1;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: none;
}

.site-customer .catalog-shell .product-avail::before {
    content: none;
}

.site-customer .catalog-shell .product-footer {
    display: block;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px dashed #e3e6eb;
}

.site-customer .catalog-shell .btn-cart {
    width: 100%;
    min-height: 45px;
    border-radius: 5px;
    background: var(--brand);
    font-size: 1rem;
    font-weight: 800;
}

.site-customer .catalog-shell .btn-cart:hover:not(:disabled) {
    background: var(--brand-dark);
    box-shadow: none;
}

.site-customer .catalog-shell .btn-cart:disabled,
.site-customer .catalog-shell .btn-cart[aria-disabled="true"] {
    cursor: not-allowed;
    color: #64748b;
    background: #e8eef2;
    box-shadow: none;
    transform: none;
}

.site-customer .catalog-list-head {
    display: none;
}

.site-customer .catalog-products.is-list-view {
    display: block;
    padding: 0;
}

.site-customer .catalog-products.is-list-view .catalog-list-head {
    display: grid;
    grid-template-columns: 82px minmax(220px, 1.35fr) 110px 150px 100px 95px 120px minmax(120px, 0.8fr) 150px;
    column-gap: 16px;
    align-items: center;
    min-height: 56px;
    padding: 0 24px;
    border-bottom: 1px solid #dfe3e8;
    color: #6b7280;
    font-size: 0.95rem;
    font-weight: 800;
}

.site-customer .catalog-products.is-list-view .market-product {
    display: grid;
    max-width: none;
    grid-template-columns: 82px minmax(220px, 1.35fr) 110px 150px 100px 95px 120px minmax(120px, 0.8fr) 150px;
    column-gap: 16px;
    align-items: center;
    min-height: 78px;
    padding: 12px 24px;
    border-bottom: 1px solid #e8ebef;
}

.site-customer .catalog-products.is-list-view .product-media {
    width: 48px;
    min-height: 48px;
    height: 48px;
    aspect-ratio: 1 / 1;
    border: 0;
    background: transparent;
}

.site-customer .catalog-products.is-list-view .product-media img {
    padding: 0;
}

.site-customer .catalog-products.is-list-view .product-body {
    display: grid;
    grid-column: 2 / -1;
    grid-template-columns: minmax(220px, 1.35fr) 110px 150px 100px 95px 120px minmax(120px, 0.8fr) 150px;
    column-gap: 16px;
    align-items: center;
    padding: 0;
}

.site-customer .catalog-products.is-list-view .product-body h2,
.site-customer .catalog-products.is-list-view .sku,
.site-customer .catalog-products.is-list-view .product-unit,
.site-customer .catalog-products.is-list-view .product-size,
.site-customer .catalog-products.is-list-view .product-price,
.site-customer .catalog-products.is-list-view .product-avail,
.site-customer .catalog-products.is-list-view .product-remarks {
    display: block;
    margin: 0;
    min-height: 0;
    padding: 0;
    border: 0;
    color: #000;
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
}

.site-customer .catalog-products.is-list-view .product-main {
    display: contents;
}

.site-customer .catalog-products.is-list-view .product-footer {
    display: contents;
}

.site-customer .catalog-products.is-list-view .product-body h2 {
    grid-column: 1;
    text-decoration: underline;
}

.site-customer .catalog-products.is-list-view .sku {
    grid-column: 2;
}

.site-customer .catalog-products.is-list-view .product-unit {
    grid-column: 3;
}

.site-customer .catalog-products.is-list-view .product-size {
    grid-column: 4;
}

.site-customer .catalog-products.is-list-view .product-price {
    grid-column: 5;
}

.site-customer .catalog-products.is-list-view .product-avail {
    grid-column: 6;
}

.site-customer .catalog-products.is-list-view .product-remarks {
    grid-column: 7;
}

.site-customer .catalog-products.is-list-view .product-category {
    display: none;
}

.site-customer .catalog-products.is-list-view .product-avail {
    color: #0369a1;
    font-weight: 800;
}

.site-customer .catalog-products.is-list-view .btn-cart {
    grid-column: 8;
    width: 100%;
    min-width: 0;
    min-height: 40px;
    padding: 0 12px;
}

@media (max-width: 1500px) {
    .site-customer .catalog-shell .catalog-products {
        grid-template-columns: repeat(5, minmax(0, 210px));
    }

    .site-customer .catalog-toolbar {
        grid-template-columns: 210px minmax(280px, 1fr) 112px 112px auto minmax(185px, auto);
        gap: 14px;
    }

    .site-customer .catalog-warehouse-select-wrap {
        justify-self: end;
    }

    .site-customer .catalog-warehouse-select {
        width: 118px;
        min-width: 118px;
    }
}

@media (max-width: 1180px) {
    .site-customer .catalog-shell .catalog-products {
        grid-template-columns: repeat(3, minmax(0, 210px));
    }

    .site-customer .catalog-toolbar {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
}

@media (max-width: 760px) {
    .site-customer .catalog-toolbar {
        grid-template-columns: 1fr;
        padding: 14px;
    }

    .site-customer .catalog-shell .catalog-products {
        grid-template-columns: 1fr;
        justify-content: stretch;
        padding: 24px 18px;
    }

    .site-customer .catalog-shell .market-product {
        max-width: none;
    }

    .site-customer .catalog-products.is-list-view .catalog-list-head {
        display: none;
    }

    .site-customer .catalog-products.is-list-view .market-product {
        display: block;
        padding: 18px;
    }
}

/* Customer catalog final normalization: compact grid/list */
.site-customer .catalog-shell {
    width: 100%;
    max-width: none;
    margin: 0;
}

.site-customer .catalog-toolbar {
    grid-template-columns: 210px minmax(320px, 1fr) 94px 86px auto 218px;
    gap: 12px 16px;
    min-height: 66px;
    padding: 14px 18px;
    box-sizing: border-box;
}

.site-customer .catalog-filter-button,
.site-customer .catalog-search-btn,
.site-customer .catalog-reset-btn,
.site-customer .catalog-search-wrap,
.site-customer .catalog-warehouse-select {
    min-height: 38px;
    height: 38px;
    font-size: 0.82rem;
}

.site-customer .catalog-search-btn,
.site-customer .catalog-reset-btn {
    padding: 0 12px;
    border-radius: 5px;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.site-customer .catalog-search-wrap .catalog-search {
    min-height: 36px;
    font-size: 0.82rem;
}

.site-customer .catalog-view-group {
    gap: 8px;
    font-size: 0.86rem;
    justify-self: start;
}

.site-customer .catalog-view-group .view-toggle {
    width: 36px;
    height: 36px;
}

.site-customer .catalog-warehouse-select-wrap {
    gap: 8px;
    justify-self: end;
}

.site-customer .catalog-warehouse-label,
.site-customer .catalog-warehouse-select {
    font-size: 0.86rem;
}

.site-customer .catalog-warehouse-select {
    width: 190px;
    min-width: 190px;
}

.site-customer .catalog-toolbar .catalog-search-btn,
.site-customer .catalog-toolbar .catalog-reset-btn {
    min-width: 0;
}

@media (max-width: 1760px) {
    .site-customer .catalog-toolbar {
        grid-template-columns: 200px minmax(240px, 1fr) 86px 78px;
        gap: 12px;
    }

    .site-customer .catalog-view-group {
        grid-column: 1 / span 2;
    }

    .site-customer .catalog-warehouse-select-wrap {
        grid-column: 3 / span 2;
    }
}

.site-customer .catalog-shell .catalog-products {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 24px 14px;
    justify-content: initial;
    padding: 30px 28px 24px;
}

.site-customer .catalog-shell .market-product {
    max-width: none;
}

.site-customer .catalog-shell .product-media {
    height: auto;
}

.site-customer .catalog-shell .product-media img {
    padding: 10px;
}

.site-customer .catalog-shell .product-body h2 {
    min-height: 38px;
    font-size: 0.86rem;
    line-height: 1.3;
}

.site-customer .catalog-shell .product-unit,
.site-customer .catalog-shell .product-price {
    font-size: 0.84rem;
}

.site-customer .catalog-shell .product-avail {
    margin-top: 2px;
    font-size: 0.82rem;
    line-height: 1.25;
    letter-spacing: 0;
    text-transform: none;
}

.site-customer .catalog-shell .product-avail::before {
    content: none !important;
    display: none !important;
}

.site-customer .catalog-shell .product-footer {
    margin-top: 14px;
    padding-top: 14px;
}

.site-customer .catalog-shell .btn-cart {
    min-height: 38px;
    font-size: 0.82rem;
    line-height: 1.1;
}

.site-customer .catalog-products.is-list-view {
    padding: 0;
}

.site-customer .catalog-products.is-list-view .catalog-list-head,
.site-customer .catalog-products.is-list-view .market-product {
    grid-template-columns: 74px minmax(210px, 1.25fr) 95px 130px 82px 82px 105px minmax(115px, 0.8fr) 140px;
    column-gap: 14px;
    padding-left: 20px;
    padding-right: 20px;
}

.site-customer .catalog-products.is-list-view .catalog-list-head {
    min-height: 48px;
    font-size: 0.82rem;
}

.site-customer .catalog-products.is-list-view .market-product {
    max-width: none;
    min-height: 72px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.site-customer .catalog-products.is-list-view .product-media {
    grid-column: 1;
    grid-row: 1;
    width: 54px;
    height: 54px;
    min-height: 54px;
}

.site-customer .catalog-products.is-list-view .product-body {
    grid-column: 2 / -1;
    grid-row: 1;
    grid-template-columns: minmax(210px, 1.25fr) 95px 130px 82px 82px 105px minmax(115px, 0.8fr) 140px;
    column-gap: 14px;
    align-items: center;
}

.site-customer .catalog-products.is-list-view .product-body h2,
.site-customer .catalog-products.is-list-view .sku,
.site-customer .catalog-products.is-list-view .product-unit,
.site-customer .catalog-products.is-list-view .product-size,
.site-customer .catalog-products.is-list-view .product-price,
.site-customer .catalog-products.is-list-view .product-avail,
.site-customer .catalog-products.is-list-view .product-remarks,
.site-customer .catalog-products.is-list-view .btn-cart {
    grid-row: 1;
    align-self: center;
    font-size: 0.82rem;
    line-height: 1.25;
}

.site-customer .catalog-products.is-list-view .product-body h2 { grid-column: 1; }
.site-customer .catalog-products.is-list-view .sku { grid-column: 2; }
.site-customer .catalog-products.is-list-view .product-unit { grid-column: 3; }
.site-customer .catalog-products.is-list-view .product-size { grid-column: 4; }
.site-customer .catalog-products.is-list-view .product-price { grid-column: 5; }
.site-customer .catalog-products.is-list-view .product-avail { grid-column: 6; }
.site-customer .catalog-products.is-list-view .product-remarks { grid-column: 7; }
.site-customer .catalog-products.is-list-view .btn-cart { grid-column: 8; }

.site-customer .catalog-products.is-list-view .btn-cart {
    min-height: 36px;
    padding: 0 10px;
}

@media (max-width: 1500px) {
    .site-customer .catalog-toolbar {
        grid-template-columns: 205px minmax(280px, 1fr) 90px 82px auto 190px;
        gap: 12px;
    }

    .site-customer .catalog-shell .catalog-products {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

/* Customer catalog: remove extra vertical whitespace inside grid cards */
.site-customer .catalog-shell:not(.is-list-view) .product-main,
.site-customer .catalog-shell .catalog-products:not(.is-list-view) .product-main {
    flex: 0 0 auto;
}

.site-customer .catalog-shell .catalog-products:not(.is-list-view) .product-body {
    gap: 0;
}

.site-customer .catalog-shell .catalog-products:not(.is-list-view) .product-body h2 {
    min-height: 0;
    margin-bottom: 8px;
}

/* Customer catalog final list view matching table-style screenshot */
.site-customer .catalog-shell .catalog-products.is-list-view {
    display: block;
    padding: 0;
    border-top: 1px solid #e6edf2;
}

.site-customer .catalog-shell .catalog-products.is-list-view .catalog-list-head {
    display: grid;
    grid-template-columns: 88px minmax(280px, 1.7fr) 145px 165px 110px 120px 130px 160px 160px;
    column-gap: 18px;
    align-items: center;
    min-height: 58px;
    padding: 0 12px;
    border-bottom: 1px solid #dbe4ea;
    background: #fff;
    color: #697586;
    font-size: 0.84rem;
    font-weight: 800;
}

.site-customer .catalog-shell .catalog-products.is-list-view .market-product {
    display: grid;
    grid-template-columns: 88px minmax(280px, 1.7fr) 145px 165px 110px 120px 130px 160px 160px;
    column-gap: 18px;
    align-items: center;
    min-height: 84px;
    padding: 10px 12px;
    border: 0;
    border-bottom: 1px solid #e6edf2;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
    transform: none;
}

.site-customer .catalog-shell .catalog-products.is-list-view .market-product:hover {
    border-color: transparent;
    background: #fcfefe;
    box-shadow: none;
    transform: none;
}

.site-customer .catalog-shell .catalog-products.is-list-view .product-media {
    grid-column: 1;
    margin: 0;
    width: 52px;
    height: 52px;
    min-height: 52px;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.site-customer .catalog-shell .catalog-products.is-list-view .product-media img {
    display: block;
    width: 70px;
    max-width: 70px;
    height: 52px;
    max-height: 52px;
    padding: 0;
    object-fit: contain;
}

.site-customer .catalog-shell .catalog-products.is-list-view .product-body {
    display: contents;
}

.site-customer .catalog-shell .catalog-products.is-list-view .product-main,
.site-customer .catalog-shell .catalog-products.is-list-view .product-footer {
    display: contents;
}

.site-customer .catalog-shell .catalog-products.is-list-view .product-body h2,
.site-customer .catalog-shell .catalog-products.is-list-view .sku,
.site-customer .catalog-shell .catalog-products.is-list-view .product-category,
.site-customer .catalog-shell .catalog-products.is-list-view .product-unit,
.site-customer .catalog-shell .catalog-products.is-list-view .product-size,
.site-customer .catalog-shell .catalog-products.is-list-view .product-price,
.site-customer .catalog-shell .catalog-products.is-list-view .product-avail,
.site-customer .catalog-shell .catalog-products.is-list-view .product-remarks,
.site-customer .catalog-shell .catalog-products.is-list-view .btn-cart {
    grid-row: 1;
    margin: 0;
    min-height: 0;
    padding: 0;
    font-size: 0.82rem;
    line-height: 1.35;
    align-self: center;
}

.site-customer .catalog-shell .catalog-products.is-list-view .product-body h2 {
    grid-column: 2;
    min-height: 0;
    color: #0f172a;
    font-size: 0.86rem;
    font-weight: 500;
    text-decoration: underline;
}

.site-customer .catalog-shell .catalog-products.is-list-view .sku {
    grid-column: 3;
    color: #111827;
    font-weight: 500;
}

.site-customer .catalog-shell .catalog-products.is-list-view .product-category {
    display: none;
}

.site-customer .catalog-shell .catalog-products.is-list-view .product-unit {
    grid-column: 4;
    color: #111827;
}

.site-customer .catalog-shell .catalog-products.is-list-view .product-size {
    grid-column: 5;
    color: #111827;
}

.site-customer .catalog-shell .catalog-products.is-list-view .product-price {
    grid-column: 6;
    color: #111827;
    font-size: 0.86rem;
    font-weight: 500;
}

.site-customer .catalog-shell .catalog-products.is-list-view .product-avail {
    grid-column: 7;
    font-size: 0.8rem;
    font-weight: 800;
}

.site-customer .catalog-shell .catalog-products.is-list-view .product-avail.avail-in-stock {
    color: #0369a1;
}

.site-customer .catalog-shell .catalog-products.is-list-view .product-avail.avail-low {
    color: #ff4d38;
}

.site-customer .catalog-shell .catalog-products.is-list-view .product-avail.avail-out-stock {
    color: #ff4d38;
}

.site-customer .catalog-shell .catalog-products.is-list-view .product-avail::before {
    display: none;
}

.site-customer .catalog-shell .catalog-products.is-list-view .product-remarks {
    grid-column: 8;
    color: #475569;
}

.site-customer .catalog-shell .catalog-products.is-list-view .btn-cart {
    grid-column: 9;
    width: 144px;
    min-height: 44px;
    padding: 0 14px;
    border-radius: 4px;
    font-size: 0.82rem;
    font-weight: 800;
    justify-self: start;
}

.site-customer .catalog-shell .catalog-products:not(.is-list-view) .product-unit {
    margin-top: 0;
}

.site-customer .catalog-shell .catalog-products:not(.is-list-view) .product-avail {
    margin-top: 6px;
}

.site-customer .catalog-shell .catalog-products:not(.is-list-view) .product-avail.avail-out-stock {
    color: #ef3b2d !important;
}

.site-customer .catalog-shell .catalog-products:not(.is-list-view) .product-footer {
    margin-top: 10px;
    padding-top: 8px;
}

.site-customer .catalog-shell .catalog-products:not(.is-list-view) .product-footer .product-price {
    margin-top: 0;
    margin-bottom: 8px;
}

/* Customer cart quantity modal and cart page */
body.has-cart-modal {
    overflow: hidden;
}

.cart-qty-modal[hidden] {
    display: none !important;
}

.cart-qty-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 24px;
}

.cart-qty-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.52);
}

.cart-qty-dialog {
    position: relative;
    width: min(720px, 100%);
    overflow: hidden;
    border: 1px solid #dfe8e6;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfefd 100%);
    box-shadow: none;
}

.cart-qty-dialog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px 18px;
    border-bottom: 1px solid #e7efee;
}

.cart-qty-dialog-head h2 {
    margin: 0;
    color: #16324f;
    font-size: 1.22rem;
    font-weight: 800;
}

.cart-modal-x {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #64748b;
    font-size: 1.8rem;
    line-height: 1;
}

.cart-modal-x:hover {
    background: #f1f5f9;
    color: var(--brand-dark);
}

.cart-qty-dialog-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 240px;
    gap: 28px;
    padding: 24px;
}

.cart-qty-dialog-body.no-image {
    grid-template-columns: minmax(0, 1fr);
}

.cart-modal-info {
    display: grid;
    align-content: start;
    gap: 12px;
    color: #31465f;
    font-size: 0.95rem;
    padding: 4px 0;
}

.cart-modal-info p {
    margin: 0;
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
}

.cart-modal-info p.cart-modal-suggested-price {
    grid-template-columns: minmax(0, 1fr);
}

.cart-modal-info strong,
.cart-qty-dialog-foot label,
.cart-modal-subtotal strong {
    color: #16324f;
    font-weight: 800;
}

.cart-modal-image-wrap {
    display: grid;
    place-items: center;
    min-height: 220px;
    padding: 18px;
    border: 1px solid #e6efee;
    border-radius: 14px;
    background: radial-gradient(circle at top, #ffffff 0%, #f4fbf9 100%);
}

.cart-modal-image-wrap img {
    max-width: 200px;
    max-height: 200px;
    object-fit: contain;
}

.cart-qty-dialog-foot {
    display: grid;
    grid-template-columns: auto 142px 1fr;
    align-items: center;
    gap: 18px;
    padding: 0 24px 24px;
}

.cart-modal-qty-control {
    gap: 0;
    overflow: hidden;
    width: 135px;
    height: 42px;
    border: 1px solid #dbeafe;
    border-radius: 10px;
    background: #f8fafc;
}

.cart-modal-qty-control .cart-qty-btn,
.cart-modal-qty-control .cart-qty {
    width: 44px;
    height: 40px;
    min-height: 40px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: #eef7f5;
    color: #0f172a;
    font-weight: 800;
}

.cart-modal-qty-control .cart-qty {
    width: 54px;
    padding: 0;
    background: #fff;
    text-align: center;
    appearance: textfield;
    -webkit-appearance: none;
    -moz-appearance: textfield;
}

.cart-modal-qty-control .cart-qty::-webkit-outer-spin-button,
.cart-modal-qty-control .cart-qty::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.cart-modal-subtotal {
    grid-column: 1 / 3;
    margin: 6px 0 0;
    color: #31465f;
    font-size: 0.94rem;
}

.cart-modal-subtotal small {
    color: #6a7e95;
}

.cart-modal-actions {
    grid-column: 3;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.cart-modal-actions .button {
    min-height: 32px;
    border-radius: var(--radius-sm);
    padding: 0 12px;
}

.cart-modal-actions .button.primary {
    background: var(--brand);
}

.site-customer .cart-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    gap: 28px 40px;
    align-items: start;
}

.site-customer .cart-table-card {
    grid-column: 1 / -1;
    overflow: hidden;
    border: 1px solid #e4eceb;
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfefd 100%);
    box-shadow: none;
}

.site-customer .cart-table {
    min-width: 980px;
    border-collapse: collapse;
    background: transparent;
}

.site-customer .cart-table th,
.site-customer .cart-table td {
    padding: 18px 20px;
    border-bottom: 1px solid #e7efee;
    color: #183153;
    font-size: 0.9rem;
}

.site-customer .cart-table thead th {
    color: #48627d;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    background: #f4fbf9;
}

.site-customer .cart-table .cart-col-image {
    width: 90px;
}

.site-customer .cart-table .cart-col-product {
    width: auto;
}

.site-customer .cart-table .cart-col-price,
.site-customer .cart-table .cart-col-total {
    width: 150px;
}

.site-customer .cart-table .cart-col-qty {
    width: 190px;
}

.site-customer .cart-table .cart-col-actions {
    width: 80px;
}

.site-customer .cart-product-image {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
}

.site-customer .cart-product-image img {
    max-width: 54px;
    max-height: 54px;
    object-fit: contain;
}

.site-customer .cart-product {
    gap: 0;
}

.site-customer .cart-product-name {
    font-size: 0.98rem;
    font-weight: 700;
    color: #183153;
}

.site-customer .cart-qty-control {
    gap: 0;
    overflow: hidden;
    height: 42px;
    border: 1px solid #dbeafe;
    border-radius: 12px;
    background: #fff;
    box-shadow: none;
}

.site-customer .cart-qty-btn {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 0;
    background: #eef7f5;
    box-shadow: none;
    color: var(--brand-dark);
    font-size: 1.15rem;
    font-weight: 800;
}

.site-customer .cart-qty {
    width: 54px;
    height: 40px;
    min-height: 40px;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    text-align: center;
    color: #183153;
    font-weight: 700;
    background: #fff;
}

.site-customer .cart-remove {
    width: 34px;
    min-width: 34px;
    height: 34px;
    min-height: 34px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #e33b3b;
}

.site-customer .cart-profile-card {
    padding: 28px 30px;
    border: 1px solid #e4eceb;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #fcfffe 100%);
    box-shadow: none;
}

.site-customer .cart-profile-card h2,
.site-customer .cart-summary-card h2 {
    margin: 0 0 20px;
    color: #274565;
    font-size: 1.15rem;
    font-weight: 800;
}

.site-customer .cart-profile-card dl {
    display: grid;
    gap: 14px;
    margin: 0;
}

.site-customer .cart-profile-card dl div {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 28px;
}

.site-customer .cart-profile-card dt,
.site-customer .cart-profile-card dd {
    margin: 0;
    color: #183153;
    font-size: 0.9rem;
}

.site-customer .cart-profile-card dt {
    font-weight: 800;
}

.site-customer .cart-profile-actions {
    display: flex;
    gap: 10px;
    margin-top: 24px;
    flex-wrap: wrap;
}

.site-customer .cart-summary {
    position: static;
}

.site-customer .cart-summary-card {
    border: 1px solid #e4eceb;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #fcfffe 100%);
    box-shadow: none;
}

.site-customer .cart-summary-card .card-header {
    padding: 24px 28px 12px;
    border: 0;
    background: transparent;
}

.site-customer .cart-summary-body {
    padding: 4px 28px 0;
    gap: 12px;
}

.site-customer .cart-summary-row {
    color: #183153;
    font-size: 0.9rem;
    font-weight: 500;
}

.site-customer .checkout-coupon-feedback {
    min-height: 18px;
    margin: -2px 0 6px;
    color: #5b7086;
    font-size: 0.8rem;
}

.site-customer .checkout-coupon-feedback.is-success {
    color: #1d4ed8;
}

.site-customer .checkout-coupon-feedback.is-error {
    color: #c24141;
}

.site-customer .cart-summary-row span {
    color: #183153;
    font-weight: 800;
}

.site-customer .cart-summary-row.total {
    margin-top: 4px;
    padding-top: 14px;
    border-top: 1px solid #e7efee;
}

.site-customer .cart-summary-actions {
    justify-items: end;
    padding: 24px 28px 28px;
    border: 0;
}

.site-customer .cart-summary-actions .button {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    border-radius: 10px;
    background: var(--brand);
    box-shadow: none;
}

.site-customer .cart-summary-actions .button:hover {
    background: var(--brand-dark);
}

.site-customer .cart-secondary-btn,
.site-customer .cart-clear-btn {
    min-height: 42px;
    padding: 0 18px;
    border-radius: 10px;
    font-weight: 700;
}

.site-customer .cart-secondary-btn {
    border-color: #dbeafe;
    color: var(--brand-dark);
    background: #f6fcfb;
}

.site-customer .cart-clear-btn {
    border-color: #f1d0d0;
    color: #b24242;
    background: #fff8f8;
}

.site-customer .cart-table-card .table-footer,
.site-customer .cart-table-card .per-page-label,
.site-customer .cart-table-card .table-count,
.site-customer .cart-table-card .table-pagination {
    display: none !important;
}

.site-customer .cart-page-head {
    margin: 8px 0 20px;
}

.site-customer .cart-page-head h1 {
    margin: 0;
    color: #0f172a;
    font-size: 1.12rem;
    font-weight: 900;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.site-customer .cart-page-layout {
    grid-template-columns: 1fr;
    gap: 26px;
}

.site-customer .cart-bottom-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 540px;
    gap: 36px;
    align-items: start;
    padding: 0 18px;
}

.site-customer .cart-page-layout .cart-table-card {
    border: 1px solid #e5eaf0;
    border-radius: 4px;
    background: #fff;
    box-shadow: none;
}

.site-customer .cart-page-layout .cart-table {
    min-width: 100%;
    table-layout: fixed;
}

.site-customer .cart-page-layout .cart-table .cart-col-image {
    width: 96px;
}

.site-customer .cart-page-layout .cart-table .cart-col-product {
    width: auto;
}

.site-customer .cart-page-layout .cart-table .cart-col-price {
    width: 210px;
}

.site-customer .cart-page-layout .cart-table .cart-col-qty {
    width: 200px;
}

.site-customer .cart-page-layout .cart-table .cart-col-total {
    width: 220px;
}

.site-customer .cart-page-layout .cart-table .cart-col-actions {
    width: 84px;
}

.site-customer .cart-page-layout .cart-table th,
.site-customer .cart-page-layout .cart-table td {
    padding: 14px 16px;
    border-bottom: 1px solid #e7edf3;
    color: #0f172a;
    font-size: 0.9rem;
    vertical-align: middle;
}

.site-customer .cart-page-layout .cart-table thead th {
    color: #64748b;
    font-size: 0.78rem;
    background: #fff;
    white-space: nowrap;
}

.site-customer .cart-page-layout .cart-table thead th:nth-child(2),
.site-customer .cart-page-layout .cart-table tbody td:nth-child(2) {
    text-align: left;
}

.site-customer .cart-page-layout .cart-table th:nth-child(3),
.site-customer .cart-page-layout .cart-table td:nth-child(3),
.site-customer .cart-page-layout .cart-table th:nth-child(4),
.site-customer .cart-page-layout .cart-table td:nth-child(4),
.site-customer .cart-page-layout .cart-table th:nth-child(5),
.site-customer .cart-page-layout .cart-table td:nth-child(5),
.site-customer .cart-page-layout .cart-table th:nth-child(6),
.site-customer .cart-page-layout .cart-table td:nth-child(6) {
    white-space: nowrap;
    text-align: center;
}

.site-customer .cart-page-layout .cart-table td:nth-child(6) {
    padding-left: 8px;
    padding-right: 8px;
}

.site-customer .cart-page-layout .cart-table td.cart-actions {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.site-customer .cart-page-layout .cart-product-image {
    width: 60px;
    height: 60px;
    border: 1px solid #e8edf2;
    border-radius: 4px;
    background: #fff;
}

.site-customer .cart-page-layout .cart-product-image img {
    max-width: 52px;
    max-height: 52px;
}

.site-customer .cart-page-layout .cart-product-name {
    color: #0f172a;
    font-size: 0.92rem;
    font-weight: 500;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.site-customer .cart-page-layout .cart-qty-control {
    display: grid;
    grid-template-columns: 38px 64px 38px;
    align-items: center;
    width: 140px;
    max-width: 100%;
    height: 44px;
    border: 1px solid #dbe5ea;
    border-radius: 6px;
    box-shadow: none;
    overflow: hidden;
    margin: 0 auto;
}

.site-customer .cart-page-layout .cart-qty-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 42px;
    background: #f3f6f9;
    color: #1e293b;
}

.site-customer .cart-page-layout .cart-qty {
    display: block;
    width: 100%;
    height: 42px;
    min-height: 42px;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: #fff;
    text-align: center;
    text-indent: 0;
    color: #0f172a;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 42px;
    appearance: textfield;
    -moz-appearance: textfield;
}

.site-customer .cart-page-layout .cart-qty::-webkit-outer-spin-button,
.site-customer .cart-page-layout .cart-qty::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.site-customer .cart-page-layout .cart-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    min-width: 42px;
    height: 42px;
    min-height: 42px;
    padding: 0;
    color: #ff2d2d;
    margin: 0 auto;
    line-height: 1;
    vertical-align: middle;
}

.site-customer .cart-table-toolbar {
    display: flex;
    justify-content: flex-end;
    padding: 14px 18px 18px;
}

.site-customer .cart-table-toolbar .button {
    min-width: 126px;
    min-height: 38px;
    border-radius: 6px;
}

.site-customer .cart-page-layout .cart-profile-card,
.site-customer .cart-page-layout .cart-summary-card {
    padding: 0 18px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.site-customer .cart-page-layout .cart-profile-card h2,
.site-customer .cart-page-layout .cart-summary-card h2 {
    margin: 0 0 18px;
    color: #334155;
    font-size: 1.12rem;
}

.site-customer .cart-page-layout .cart-profile-card dl div {
    grid-template-columns: 110px 1fr;
    gap: 24px;
}

.site-customer .cart-page-layout .cart-profile-card dt,
.site-customer .cart-page-layout .cart-profile-card dd {
    color: #0f172a;
    font-size: 0.9rem;
}

.site-customer .cart-page-layout .cart-summary-card .card-header {
    padding: 0 0 8px;
}

.site-customer .cart-page-layout .cart-summary-body {
    padding: 0;
}

.site-customer .cart-page-layout .cart-summary-row {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 12px 0;
    border-bottom: 1px solid #e7edf3;
    color: #0f172a;
    font-size: 0.9rem;
}

.site-customer .cart-page-layout .cart-summary-row span {
    color: #0f172a;
    font-weight: 800;
}

.site-customer .cart-page-layout .cart-summary-row em {
    color: #334155;
    font-style: normal;
    font-weight: 400;
}

.site-customer .cart-page-layout .cart-summary-row.total {
    margin-top: 0;
    padding-top: 12px;
    border-top: 0;
}

.site-customer .cart-free-shipping-note {
    margin: 14px 0 0;
    color: #ff1f1f;
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.45;
}

.site-customer .cart-page-layout .cart-summary-actions {
    padding: 28px 0 0;
}

.site-customer .cart-page-layout .cart-summary-actions .button {
    min-height: 38px;
    min-width: 112px;
    border-radius: 6px;
    box-shadow: none;
}

.site-customer .catalog-shell .pagination,
.site-customer .catalog-shell .js-catalog-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 26px auto 0;
    padding: 0 24px 24px;
    box-sizing: border-box;
}

@media (max-width: 980px) {
    .cart-qty-dialog-body,
    .site-customer .cart-layout {
        grid-template-columns: 1fr;
    }

    .cart-qty-dialog-foot {
        grid-template-columns: 1fr;
    }

    .cart-modal-subtotal,
    .cart-modal-actions {
        grid-column: auto;
    }

    .site-customer .cart-table-wrap {
        border-radius: 12px;
    }

    .site-customer .cart-summary-actions .button {
        width: 100%;
    }

    .site-customer .cart-bottom-grid {
        grid-template-columns: 1fr;
        gap: 22px;
        padding: 0;
    }

    .site-customer .cart-page-layout .cart-profile-card,
    .site-customer .cart-page-layout .cart-summary-card {
        padding: 0;
    }
}

/* Customer checkout page: form, totals, and payment panels */
.site-customer .checkout-page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: 4px 0 22px;
}

.site-customer .checkout-page-head h1 {
    margin: 0;
    color: #000;
    font-size: 1rem;
    font-weight: 900;
    text-transform: uppercase;
}

.site-customer .checkout-page-head nav {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #475569;
    font-size: 0.78rem;
}

.site-customer .checkout-page-head a {
    color: #1f3d6d;
    text-decoration: none;
}

.site-customer .checkout-page {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 430px;
    gap: 22px;
    align-items: start;
}

.site-customer .checkout-main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
}

/* checkout-main now holds a variable-length stack of full-width sections
   (order items, addresses, delivery options, order form) rather than the
   two side-by-side cards it was originally built for, so force a single
   column here instead of letting the 2-col grid above zigzag them. */
.site-customer .checkout-page .checkout-main {
    grid-template-columns: 1fr;
}

.site-customer .checkout-cart-review .cart-table-wrap {
    border-radius: 4px;
}

.site-customer .checkout-items-table {
    min-width: 0;
}

.site-customer .checkout-items-table th,
.site-customer .checkout-items-table td {
    text-align: left;
    white-space: normal;
}

.site-customer .checkout-items-table th:nth-child(3),
.site-customer .checkout-items-table td:nth-child(3),
.site-customer .checkout-items-table th:nth-child(5),
.site-customer .checkout-items-table td:nth-child(5) {
    text-align: right;
    white-space: nowrap;
}

.site-customer .checkout-items-table th:nth-child(4),
.site-customer .checkout-items-table td:nth-child(4) {
    text-align: center;
}

.site-customer .checkout-cart-review .checkout-card-body {
    display: grid;
    gap: 14px;
}

.site-customer .checkout-card {
    border: 1px solid #e5e7eb;
    border-radius: 5px;
    background: #fff;
    box-shadow: none;
}

.site-customer .checkout-card h2 {
    margin: 0;
    padding: 16px 18px;
    border-bottom: 1px solid #e5e7eb;
    color: #344052;
    font-size: 0.98rem;
    font-weight: 700;
}

.site-customer .checkout-card-body {
    padding: 18px;
}

.site-customer .checkout-card label {
    display: grid;
    gap: 8px;
    color: #000;
    font-size: 0.8rem;
    font-weight: 500;
}

.site-customer .checkout-card .form-control {
    width: 100%;
    min-height: 36px;
    padding: 7px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    color: #000;
    font-size: 0.82rem;
    box-shadow: none;
}

.site-customer .checkout-card .form-control[readonly],
.site-customer .checkout-card .form-control:disabled {
    color: #274565;
    background: #f8fbfb;
    border-color: #d8e5e3;
    cursor: default;
}

.site-customer .checkout-card textarea.form-control {
    min-height: 86px;
}

.site-customer .checkout-order-info .checkout-card-body {
    display: grid;
    gap: 16px;
}

.site-customer .checkout-order-info label {
    grid-template-columns: 190px 1fr;
    align-items: start;
}

.site-customer .checkout-order-info label span {
    padding-top: 8px;
}

/* On a phone the 190px label column leaves the input a ~70px sliver. Stack the label above
   a full-width input instead. #139 */
@media (max-width: 760px) {
    .site-customer .checkout-order-info label {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .site-customer .checkout-order-info label span {
        padding-top: 0;
    }

    /* Order Items summary: the numeric cells get data-label rows (Price/Qty/Subtotal) from the
       generic stacked-table treatment, but the first cell holds the product name + SKU, which
       must stack (not split into a flex label|value row). #139 */
    .site-customer .checkout-items-table .cart-item-name {
        display: block;
    }

    .site-customer .checkout-items-table .cart-item-name::before {
        display: none;
    }
}

.site-customer .checkout-shipping-section {
    grid-column: 1 / -1;
    margin-top: 34px;
}

.site-customer .checkout-shipping-section h2 {
    margin: 0 0 20px;
    color: #000;
    font-size: 1.02rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.01em;
}

.site-customer .checkout-address-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
}

.site-customer .checkout-address-column {
    display: flex;
    flex-direction: column;
}

.site-customer .checkout-address-select-form {
    margin-bottom: 12px;
}

.site-customer .checkout-address-select-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.site-customer .checkout-address-select {
    flex: 1 1 auto;
    min-width: 0;
}

.site-customer .checkout-address-add {
    flex: 0 0 auto;
    white-space: nowrap;
}

.site-customer .checkout-address-detail {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 22px 18px 16px;
    border: 1px solid #e8edee;
    border-radius: 8px;
    background: #fff;
    box-shadow: none;
    color: #16324f;
    font-size: 0.84rem;
    line-height: 1.42;
    text-align: left;
}

.site-customer .checkout-address-detail.is-empty strong {
    display: block;
    margin-bottom: 10px;
    color: #0f172a;
    font-size: 0.96rem;
    font-weight: 900;
}

.site-customer .checkout-address-detail.is-empty p {
    margin: 0;
}

.site-customer .checkout-address-detail-actions {
    display: flex;
    gap: 8px;
    margin-top: auto;
    padding-top: 16px;
}

.site-customer .checkout-address-detail-actions .button {
    margin-top: 0;
    padding: 0 14px;
    min-height: 38px;
    border-radius: 6px;
}

@media (max-width: 720px) {
    .site-customer .checkout-address-columns {
        grid-template-columns: 1fr;
    }
}

/* Customer catalog screenshot alignment */
.site-customer {
    background: #f7f8fb;
}

.site-customer .content-frame {
    width: calc(100% - 24px);
    max-width: none;
    padding-top: 20px;
}

.site-customer .topbar {
    min-height: 58px;
    padding: 6px 18px;
    border-bottom: 0;
    background: var(--admin-navy);
    box-shadow: none;
}

.site-customer .brand {
    color: #fff;
}

.site-customer .brand:hover,
.site-customer .brand:focus-visible {
    color: #fff;
}

.site-customer .brand-mark {
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    box-shadow: none;
}

.site-customer .brand-copy {
    color: #fff;
}

.site-customer .brand-copy small {
    color: rgba(255, 255, 255, 0.72);
}

.site-customer .nav {
    gap: 4px;
}

.site-customer .nav a,
.site-customer .nav .nav-dropdown-toggle {
    min-height: 34px;
    padding: 0 12px;
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.88);
    background: transparent;
    font-size: 0.74rem;
    font-weight: 500;
}

.site-customer .nav a:hover,
.site-customer .nav .nav-dropdown-toggle:hover,
.site-customer .nav a:focus-visible,
.site-customer .nav .nav-dropdown-toggle:focus-visible {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.site-customer .nav a.is-current,
.site-customer .nav a.active,
.site-customer .nav-dropdown.is-current .nav-dropdown-toggle,
.site-customer .nav-icon-link.is-current {
    color: #0f172a;
    background: #fff;
}

.site-customer .nav-icon-link {
    position: relative;
    min-width: 38px;
    justify-content: center;
}

.site-customer .customer-user-menu-toggle {
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.site-customer .customer-user-menu-icon {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}

.site-customer .customer-user-menu-label,
.site-customer .user-menu-caret {
    color: #fff;
}

.site-customer .catalog-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin: 2px 0 14px;
    padding: 2px 2px 0;
}

.site-customer .catalog-page-head h1 {
    margin: 0 0 6px;
    color: #0f172a;
    font-size: 0.98rem;
    font-weight: 900;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.site-customer .catalog-page-head .breadcrumbs {
    gap: 7px;
    color: #64748b;
    font-size: 0.68rem;
    font-weight: 700;
}

.site-customer .catalog-page-head .breadcrumbs a {
    color: #506077;
    text-decoration: none;
}

.site-customer .catalog-page-context {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #64748b;
    font-size: 0.88rem;
    font-weight: 800;
    white-space: nowrap;
}

.site-customer .catalog-page-context strong {
    color: #0f172a;
    font-weight: 800;
}

.site-customer .catalog-shell {
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    background: #fff;
    box-shadow: none;
}

.site-customer .catalog-toolbar {
    display: grid;
    grid-template-columns: minmax(170px, 205px) minmax(320px, 1fr) 120px 110px auto minmax(220px, 280px);
    grid-template-areas: "filter search searchbtn reset view warehouse";
    gap: 10px 12px;
    min-height: 56px;
    padding: 12px 14px;
    border-bottom: 1px solid #edf1f5;
    align-items: center;
}

.site-customer .catalog-category-menu {
    grid-area: filter;
}

.site-customer .catalog-search-wrap {
    grid-area: search;
    width: 100%;
}

.site-customer .catalog-search-btn {
    grid-area: searchbtn;
    width: 100%;
}

.site-customer .catalog-reset-btn {
    grid-area: reset;
    width: 100%;
}

.site-customer .catalog-view-group {
    grid-area: view;
    align-self: center;
    justify-self: start;
    white-space: nowrap;
    gap: 8px;
    color: #475569;
    font-size: 0.9rem;
    font-weight: 800;
}

.site-customer .catalog-warehouse-select-wrap {
    grid-area: warehouse;
    justify-self: end;
    align-self: center;
    white-space: nowrap;
    gap: 10px;
}

.site-customer .catalog-filter-button,
.site-customer .catalog-search-btn,
.site-customer .catalog-reset-btn {
    min-height: 28px;
    border-radius: 2px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0;
}

.site-customer .catalog-filter-button {
    justify-content: flex-start;
    padding: 0 10px;
    border-color: #d9dee7;
    color: #334155;
}

.site-customer .catalog-search-btn {
    border-color: #5d8cf6;
    background: #5d8cf6;
    box-shadow: none;
}

.site-customer .catalog-search-btn:hover {
    border-color: #4878eb;
    background: #4878eb;
    box-shadow: none;
}

.site-customer .catalog-reset-btn {
    border-color: transparent;
    background: #f8fafc;
    color: #475569;
}

.site-customer .catalog-search-wrap {
    min-height: 28px;
    gap: 8px;
    padding: 0 10px;
    border-color: #d7dde6;
    border-radius: 2px;
    color: #94a3b8;
}

.site-customer .catalog-search-wrap svg {
    width: 13px;
    height: 13px;
}

.site-customer .catalog-search-wrap .catalog-search {
    min-height: 26px;
    font-size: 0.92rem;
    font-weight: 500;
}

.site-customer .catalog-search-wrap .catalog-search::placeholder {
    color: #8b97aa;
    font-size: 0.92rem;
}

.site-customer .catalog-view-group {
    gap: 6px;
    color: #6b7280;
    font-size: 0.56rem;
    font-weight: 800;
}

.site-customer .catalog-view-group .catalog-view-toggle {
    gap: 2px;
}

.site-customer .catalog-view-group .view-toggle {
    width: 22px;
    height: 22px;
    border-radius: 2px;
}

.site-customer .catalog-warehouse-select-wrap {
    gap: 8px;
}

.site-customer .catalog-warehouse-label {
    color: #475569;
    font-size: 0.9rem;
    font-weight: 800;
}

.site-customer .catalog-warehouse-select {
    width: 102px;
    min-width: 102px;
    height: 40px;
    padding: 0 26px 0 8px;
    border-color: #d7dde6;
    border-radius: 6px;
    font-size: 0.92rem;
    font-weight: 800;
}

.site-customer .catalog-category-dropdown {
    width: 220px;
    padding: 6px 0;
    border-radius: 3px;
}

.site-customer .catalog-category-dropdown .filter-link {
    min-height: 30px;
    padding: 6px 12px;
    color: #334155;
    font-size: 0.69rem;
}

.site-customer .catalog-category-dropdown .category-tree-children {
    width: 220px;
    border-radius: 3px;
}

.site-customer .catalog-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 14px 0;
}

.site-customer .product-count-label,
.site-customer .selected-view-label {
    color: #64748b;
    font-size: 0.9rem;
    font-weight: 800;
}

.site-customer .catalog-shell .catalog-products {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 18px 14px;
    padding: 18px 14px;
    justify-content: initial;
}

.site-customer .catalog-shell .catalog-list-head {
    display: none;
}

.site-customer .catalog-shell .market-product {
    display: grid;
    grid-template-rows: auto 1fr;
    max-width: none;
    min-height: 100%;
    padding: 14px 14px 12px;
    border: 1px solid #e4eaf0;
    border-radius: 10px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%);
    box-shadow: none;
    transition: border-color var(--t), box-shadow var(--t), transform var(--t);
}

.site-customer .catalog-shell .market-product:hover {
    border-color: #dbeafe;
    box-shadow: none;
    transform: translateY(-2px);
}

.site-customer .catalog-shell .product-media {
    aspect-ratio: 1 / 1;
    display: grid;
    place-items: center;
    margin-bottom: 12px;
    border: 1px solid #e5eaf2;
    border-radius: 6px;
    background: #fff;
}

.site-customer .catalog-shell .product-media img {
    width: 100%;
    height: 100%;
    padding: 14px;
    object-fit: contain;
}

.site-customer .catalog-shell .product-body {
    display: grid;
    grid-template-rows: minmax(82px, auto) 28px 1fr;
    gap: 0;
    padding-top: 0;
}

.site-customer .catalog-shell .product-main {
    display: grid;
    grid-template-rows: minmax(44px, auto) 22px;
    align-content: start;
    gap: 6px;
    min-height: 82px;
    padding-bottom: 12px;
    border-bottom: 1px dashed #d8e3e8;
}

.site-customer .catalog-shell .product-body h2 {
    min-height: 44px;
    margin: 0;
    color: #16324f;
    font-size: 0.84rem;
    font-weight: 800;
    line-height: 1.45;
    text-decoration: underline;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.site-customer .catalog-shell .sku {
    min-height: 22px;
    color: #58708a;
    font-size: 0.66rem;
    font-weight: 800;
    line-height: 1.4;
}

.site-customer .catalog-shell .product-category {
    color: #6b7280;
    font-size: 0.72rem;
}

.site-customer .catalog-shell .product-unit,
.site-customer .catalog-shell .product-price,
.site-customer .catalog-shell .product-avail {
    font-size: 0.74rem;
    line-height: 1.4;
}

.site-customer .catalog-shell .product-unit {
    margin-top: 0;
    color: #1f2937;
    font-weight: 500;
}

.site-customer .catalog-shell .product-price {
    margin-top: 2px;
    color: #1d4ed8;
    font-size: 0.86rem;
    font-weight: 900;
}

.site-customer .catalog-shell .product-avail {
    align-self: center;
    color: #0369a1;
    font-weight: 800;
}

.site-customer .catalog-shell .product-avail::before {
    width: 6px;
    height: 6px;
}

.site-customer .catalog-shell .product-footer {
    display: grid;
    align-self: end;
    gap: 10px;
    margin-top: 0;
    padding-top: 8px;
}

.site-customer .catalog-shell .btn-cart {
    width: 100%;
    min-height: 44px;
    padding: 0 14px;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 800;
}

.site-customer .catalog-shell .btn-cart svg {
    width: 14px;
    height: 14px;
}

.site-customer .catalog-shell .btn-cart.is-in-cart {
    background: #f3f4f6;
    border-color: #e5e7eb;
    color: #4b5563;
    box-shadow: none;
}

.site-customer .catalog-shell .btn-cart.is-in-cart:hover:not(:disabled) {
    background: #eef2f7;
    color: #334155;
}

.site-customer .catalog-shell .product-card-cart-qty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    font-size: 0.9rem;
    font-weight: 800;
}

.cart-modal-availability {
    margin: 6px 0 0;
    color: #ef4444;
    font-size: 0.9rem;
    font-weight: 700;
}

.site-customer .catalog-shell .js-catalog-pagination {
    margin-top: 4px;
    padding: 0 14px 16px;
}

.site-customer .catalog-shell .catalog-empty {
    display: grid;
    place-items: center;
    min-height: 140px;
    margin: 0 14px 14px;
    padding: 12px;
    border: 1px solid #e4eaf0;
    border-radius: 10px;
    color: #64748b;
    text-align: center;
    background: linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%);
}

.site-customer .catalog-shell .catalog-empty.is-hidden,
.site-customer .catalog-shell .catalog-empty[hidden] {
    display: none !important;
}

.site-customer .catalog-shell .catalog-products.is-list-view + .catalog-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: none;
    min-height: 84px;
    margin: 0;
    padding: 10px 12px;
    border: 0;
    border-top: 1px solid #e6edf2;
    border-bottom: 1px solid #e6edf2;
    border-radius: 0;
    background: #fff;
}

@media (max-width: 1500px) {
    .site-customer .catalog-shell .catalog-products {
        grid-template-columns: repeat(8, minmax(0, 1fr));
    }
}

@media (max-width: 1200px) {
    .site-customer .catalog-toolbar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .site-customer .catalog-view-group,
    .site-customer .catalog-warehouse-select-wrap {
        justify-self: stretch;
    }
}

@media (max-width: 760px) {
    .site-customer .content-frame {
        width: min(100%, calc(100% - 16px));
    }

    .site-customer .catalog-page-head {
        flex-direction: column;
    }

    .site-customer .catalog-toolbar {
        grid-template-columns: 1fr;
    }

    .site-customer .catalog-meta {
        align-items: flex-start;
        flex-direction: column;
    }

    .site-customer .catalog-shell .catalog-products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px 12px;
    }
}

.site-customer .checkout-side {
    display: grid;
    gap: 18px;
}

.site-customer .checkout-total-card .cart-summary-body {
    padding: 14px 18px 18px;
    gap: 9px;
}

.site-customer .checkout-total-card .cart-summary-row {
    color: #000;
    font-size: 0.82rem;
}

.site-customer .checkout-total-card .cart-summary-row span {
    color: #000;
    font-weight: 800;
}

.site-customer .checkout-total-card .cart-summary-row span em {
    color: #0369a1;
    font-style: normal;
    font-weight: 600;
    font-size: 0.78rem;
}

.site-customer .checkout-total-card .cart-summary-free {
    color: #0369a1;
}

.site-customer .checkout-coupon-row {
    align-items: center;
}

.site-customer .checkout-coupon-row > div {
    display: grid;
    grid-template-columns: 1fr 62px;
    gap: 6px;
    width: 210px;
}

.site-customer .checkout-coupon-row .button {
    min-height: 34px;
    border-radius: 4px;
    padding: 0 10px;
}

.site-customer .checkout-free-shipping {
    margin: 6px 0 0;
    color: #f00;
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1.4;
}

.site-customer .payment-radio {
    display: flex !important;
    grid-template-columns: none !important;
    align-items: center;
    gap: 8px !important;
    color: #253f7b !important;
    font-size: 0.86rem !important;
}

.site-customer .payment-radio input {
    width: 14px;
    height: 14px;
    accent-color: var(--brand);
}

.site-customer .checkout-payment-copy {
    margin: 0 0 14px;
    color: #64748b;
    font-size: 0.86rem;
    line-height: 1.5;
}

.site-customer .checkout-payment-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    color: #253f7b;
}

.site-customer .checkout-payment-heading strong {
    color: #2a3f78;
    font-size: 0.9rem;
    font-weight: 700;
}

.site-customer .checkout-payment-bullet {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #415fd8;
    box-shadow: 0 0 0 4px rgba(65, 95, 216, 0.15);
    flex: 0 0 10px;
}

.site-customer .checkout-payment-term {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 16px;
    padding: 11px 14px;
    border: 1px solid #dbe7ee;
    border-radius: 10px;
    background: #f8fbfc;
}

.site-customer .checkout-payment-term span {
    color: #64748b;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.site-customer .checkout-payment-term strong {
    color: #0f172a;
    font-size: 0.92rem;
    font-weight: 800;
}

.site-customer .checkout-payment-options {
    display: grid;
    gap: 12px;
}

.site-customer .payment-option-card {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid #dbe5ea;
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.site-customer .payment-option-card:hover {
    border-color: rgba(29, 78, 216, 0.4);
    box-shadow: none;
}

.site-customer .payment-option-card.is-selected {
    border-color: var(--brand);
    background: linear-gradient(180deg, #f5fffd 0%, #ffffff 100%);
    box-shadow: none;
}

.site-customer .payment-option-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.site-customer .payment-option-mark {
    width: 18px;
    height: 18px;
    border: 2px solid #b9c8d3;
    border-radius: 999px;
    background: #fff;
    box-sizing: border-box;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.site-customer .payment-option-card.is-selected .payment-option-mark {
    border-color: var(--brand);
    box-shadow: none;
}

.site-customer .payment-option-body {
    display: grid;
    gap: 3px;
}

.site-customer .payment-option-body strong {
    color: #0f172a;
    font-size: 0.94rem;
    font-weight: 800;
}

.site-customer .payment-option-body small {
    color: #64748b;
    font-size: 0.8rem;
    line-height: 1.45;
}

.site-customer .checkout-stripe-panel {
    margin-top: 8px;
}

.site-customer .checkout-stripe-panel.is-hidden {
    display: none;
}

.site-customer .payment-logos {
    display: flex;
    gap: 10px;
    margin: 14px 0 12px;
    align-items: center;
}

.site-customer .payment-logos span {
    display: inline-flex;
    place-items: center;
    align-items: center;
    justify-content: center;
    min-width: 74px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid #d9e1ea;
    border-radius: 6px;
    color: #17427c;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    background: #fff;
    box-shadow: none;
}

.site-customer .payment-test-card {
    padding: 18px;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    background: #fff;
}

.site-customer .payment-test-card p {
    margin: 0 0 14px;
    color: #000;
    font-size: 0.8rem;
    line-height: 1.45;
}

.site-customer .payment-test-card h3 {
    margin: 0 0 14px;
    color: #344052;
    font-size: 1rem;
}

.site-customer .payment-test-card em {
    color: #f00;
    font-style: normal;
}

.site-customer .payment-two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-top: 14px;
}

.site-customer .checkout-stripe-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 16px;
}

.site-customer .checkout-stripe-field {
    display: grid;
    gap: 8px;
}

.site-customer .checkout-stripe-field-full {
    grid-column: 1 / -1;
}

.site-customer .checkout-stripe-field span {
    color: #0f172a;
    font-size: 0.84rem;
    font-weight: 700;
}

.site-customer .checkout-stripe-field span span {
    color: #dc2626;
    margin-left: 2px;
}

.site-customer .checkout-stripe-element {
    min-height: 44px;
    padding: 11px 14px;
    border: 1px solid #d7e0e7;
    border-radius: 6px;
    background: #fff;
    box-sizing: border-box;
}

.site-customer .checkout-stripe-element.StripeElement--focus {
    border-color: rgba(29, 78, 216, 0.55);
    box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.1);
}

.site-customer .checkout-stripe-element.StripeElement--invalid {
    border-color: #ef4444;
}

.site-customer .checkout-stripe-error {
    margin: 12px 0 0;
    color: #dc2626 !important;
    font-size: 0.84rem !important;
    font-weight: 700;
}

.site-customer .checkout-payment-fallback {
    padding: 16px 18px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #fff;
}

.site-customer .checkout-confirm {
    min-height: 38px;
    border-radius: 4px;
    background: var(--brand);
}

.site-customer .checkout-confirm:hover,
.site-customer .checkout-card .button.primary:hover {
    background: var(--brand-dark);
}

@media (max-width: 1280px) {
    .site-customer .checkout-page,
    .site-customer .checkout-main {
        grid-template-columns: 1fr;
    }
}

/* Customer button theme unification */
.site-customer .button,
.site-customer .catalog-filter-button,
.site-customer .catalog-search-btn,
.site-customer .catalog-reset-btn,
.site-customer .btn-cart,
.site-customer .view-toggle,
.site-customer .customer-company-address-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 32px;
    padding: 0 12px;
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;
    text-decoration: none;
    transition: background-color var(--t), border-color var(--t), color var(--t), box-shadow var(--t), transform var(--t);
}

.site-customer .button.primary,
.site-customer .catalog-search-btn,
.site-customer .btn-cart,
.site-customer .checkout-confirm,
.site-customer .ccu-edit-btn,
.site-customer .ccu-add-staff,
.site-customer .customer-contact-submit,
.site-customer .checkout-coupon-row .button,
.site-customer .cart-summary-actions .button {
    border-color: var(--brand) !important;
    background: var(--brand) !important;
    color: #fff !important;
    box-shadow: none;
}

.site-customer .button.primary:hover,
.site-customer .catalog-search-btn:hover,
.site-customer .btn-cart:hover:not(:disabled),
.site-customer .checkout-confirm:hover,
.site-customer .ccu-edit-btn:hover,
.site-customer .ccu-add-staff:hover,
.site-customer .customer-contact-submit:hover,
.site-customer .checkout-coupon-row .button:hover,
.site-customer .cart-summary-actions .button:hover {
    border-color: var(--brand-dark) !important;
    background: var(--brand-dark) !important;
    color: #fff !important;
    box-shadow: none;
    transform: translateY(-1px);
}

.site-customer .button.outline,
.site-customer .catalog-filter-button,
.site-customer .catalog-reset-btn,
.site-customer .cart-secondary-btn,
.site-customer .ccu-edit-company,
.site-customer .ccu-back-btn,
.site-customer .profile-actions .button.outline,
.site-customer .customer-company-address-form-actions .button.outline,
.site-customer .customer-company-user-create-actions .button.outline {
    border: 1px solid #dbeafe !important;
    background: #f7fcfb !important;
    color: var(--brand-dark) !important;
    box-shadow: none;
}

.site-customer .button.outline:hover,
.site-customer .catalog-filter-button:hover,
.site-customer .catalog-reset-btn:hover,
.site-customer .cart-secondary-btn:hover,
.site-customer .ccu-edit-company:hover,
.site-customer .ccu-back-btn:hover,
.site-customer .profile-actions .button.outline:hover,
.site-customer .customer-company-address-form-actions .button.outline:hover,
.site-customer .customer-company-user-create-actions .button.outline:hover {
    border-color: #93c5fd !important;
    background: #edf8f6 !important;
    color: var(--brand-dark) !important;
    transform: translateY(-1px);
}

.site-customer .catalog-reset-btn {
    min-width: 112px;
}

.site-customer .cart-clear-btn,
.site-customer .ccu-delete-btn,
.site-customer .button.outline.danger,
.site-customer .button.danger-soft {
    border: 1px solid #f3caca !important;
    background: #fff7f7 !important;
    color: #c24141 !important;
    box-shadow: none;
}

.site-customer .cart-clear-btn:hover,
.site-customer .ccu-delete-btn:hover,
.site-customer .button.outline.danger:hover,
.site-customer .button.danger-soft:hover {
    border-color: #e8abab !important;
    background: #fff0f0 !important;
    color: #a72f2f !important;
    transform: translateY(-1px);
}

.site-customer .ccu-reset-btn {
    border: 1px solid #dbeafe !important;
    background: #f7fcfb !important;
    color: var(--brand-dark) !important;
    box-shadow: none;
}

.site-customer .ccu-reset-btn:hover {
    border-color: #93c5fd !important;
    background: #edf8f6 !important;
    color: var(--brand-dark) !important;
}

.site-customer .view-toggle {
    min-width: 42px;
    padding: 0;
    border: 1px solid #dbeafe;
    background: #eff6ff;
    color: var(--brand-dark);
    box-shadow: none;
}

.site-customer .view-toggle svg,
.site-customer .view-toggle i,
.site-customer .view-toggle span {
    color: currentColor;
    fill: currentColor;
}

.site-customer .view-toggle:hover:not(.active) {
    border-color: #93c5fd;
    background: #eff6ff;
    color: var(--brand-dark);
}

.site-customer .view-toggle.active {
    border-color: var(--brand);
    background: var(--brand);
    color: #fff;
    box-shadow: none;
}

.site-customer .checkout-coupon-row .button,
.site-customer .cart-summary-actions .button,
.site-customer .checkout-confirm {
    min-height: 42px;
    border-radius: 8px;
}

.site-customer .customer-company-address-action {
    min-height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--brand);
    font-size: 0.82rem;
    font-weight: 800;
}

.site-customer .customer-company-address-action:hover {
    color: var(--brand-dark);
    text-decoration: underline;
    transform: none;
}

.site-customer .customer-company-address-action--danger {
    color: #c24141;
}

.site-customer .customer-company-address-action--danger:hover {
    color: #a72f2f;
}

.site-customer .cart-remove {
    width: 42px;
    min-width: 42px;
    height: 42px;
    min-height: 42px;
    padding: 0;
    border: 1px solid #f3caca !important;
    border-radius: 10px;
    background: #fff7f7 !important;
    color: #d83a3a !important;
    box-shadow: none;
}

.site-customer .cart-remove:hover {
    border-color: #e8abab !important;
    background: #fff0f0 !important;
    color: #b93131 !important;
}

.site-customer .cart-remove svg {
    display: block;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    stroke: currentColor;
    fill: none;
    pointer-events: none;
}

/* Customer two-row header */
.site-customer .customer-site-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: #111827;
    box-shadow: none;
}

.site-customer .customer-topbar {
    width: calc(100% - 24px);
    max-width: none;
    margin: 0 auto;
}

.site-customer .customer-topbar {
    display: grid;
    grid-template-columns: auto auto minmax(240px, 1fr) auto;
    align-items: center;
    gap: 16px;
    min-height: 54px;
    padding: 10px 0;
}

.site-customer .topbar {
    display: none;
}

.site-customer .customer-brand {
    gap: 10px;
    color: #fff;
}

.site-customer .customer-brand-mark {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    color: #fff;
    background: var(--brand);
    font-size: 0.9rem;
    font-weight: 900;
    box-shadow: none;
}

.site-customer .customer-brand-copy {
    color: #fff;
    line-height: 1.1;
    font-size: 0.92rem;
    font-weight: 900;
    letter-spacing: -0.02em;
}

.site-customer .customer-brand-copy small {
    display: block;
    margin-top: 2px;
    color: rgba(255, 255, 255, 0.74);
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.site-customer .customer-topbar-meta {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.7rem;
    font-weight: 800;
}

.site-customer .customer-topbar-meta a {
    color: inherit;
}

.site-customer .customer-topbar-search {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    height: 34px;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.82);
    background: rgba(255, 255, 255, 0.06);
}

.site-customer .customer-topbar-search input {
    width: 100%;
    min-width: 0;
    border: 0;
    color: #fff;
    background: transparent;
    font-size: 0.72rem;
    outline: 0;
}

.site-customer .customer-topbar-search input::placeholder {
    color: rgba(255, 255, 255, 0.72);
}

.site-customer .customer-topbar-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    min-width: 0;
}

/* The cart pill and the user menu share this flex group, which is already right-aligned
   (justify-content: flex-end). The user-menu carries a margin-left: auto from its lone-item
   days, though, which eats all the free space and pushes the two apart — cart stranded left,
   menu hard right. Inside this group they travel together, so drop the auto margin here. #137 */
.site-customer .customer-topbar-actions .customer-user-menu {
    margin-left: 0;
}

.site-customer .customer-account-hint {
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.72rem;
    font-weight: 800;
    white-space: nowrap;
}

.site-customer .customer-cart-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    font-size: 0.72rem;
    font-weight: 800;
}

.site-customer .customer-cart-pill .nav-badge {
    position: static;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
}

.site-customer .customer-user-menu {
    position: relative;
    overflow: visible;
}

.site-customer .customer-user-menu-toggle {
    min-height: 34px;
    padding: 0 10px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: none;
}

.site-customer .customer-user-menu-toggle:hover,
.site-customer .customer-user-menu-toggle:focus-visible,
.site-customer .customer-user-menu.is-open .customer-user-menu-toggle {
    border-color: rgba(255, 255, 255, 0.26);
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    transform: none;
    box-shadow: none;
}

.site-customer .customer-user-menu-label {
    max-width: 150px;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
}

.site-customer .customer-user-menu-icon {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
}

.site-customer .customer-user-menu-toggle .user-menu-caret {
    color: #fff;
}

.site-customer .customer-user-menu-dropdown {
    top: calc(100% + 10px);
    right: 0;
    left: auto;
    min-width: 250px;
    overflow: visible;
    z-index: 260;
}

.site-customer .customer-subnav {
    width: 100%;
    box-sizing: border-box;
    min-height: 46px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid #e6ebf0;
    background: #fff;
    padding: 0 12px;
}

.site-customer .customer-subnav-inner {
    width: calc(100% - 24px);
    max-width: none;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.site-customer .customer-subnav .nav-toggle {
    display: none;
}

/* The menu toggle now lives in the topbar actions (see layout.html.twig). On desktop the
   subnav renders the category links inline, so the toggle stays hidden there. #139 */
.site-customer .customer-topbar-nav-toggle {
    display: none;
}

.site-customer .customer-subnav-menu {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0;
    width: 100%;
    justify-content: flex-start;
    padding: 0;
}

.site-customer .customer-subnav-menu > a,
.site-customer .customer-subnav-menu .nav-dropdown-link {
    min-height: 46px;
    padding: 0 12px;
    border-radius: 0;
    color: #475569;
    background: transparent;
    font-size: 0.84rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.site-customer .customer-subnav-menu .nav-dropdown {
    display: inline-flex;
    align-items: stretch;
    flex: 0 0 auto;
}

.site-customer .customer-subnav-menu > a:hover,
.site-customer .customer-subnav-menu .nav-dropdown-link:hover,
.site-customer .customer-subnav-menu > a:focus-visible,
.site-customer .customer-subnav-menu .nav-dropdown-link:focus-visible {
    color: #1d4ed8;
    background: #eff6ff;
}

.site-customer .customer-subnav-menu > a.is-current,
.site-customer .customer-subnav-menu .nav-dropdown.is-current .nav-dropdown-link {
    color: #1d4ed8;
    background: #eff6ff;
    box-shadow: none;
}

.site-customer .customer-subnav-menu .nav-dropdown-head {
    display: inline-flex;
    align-items: center;
    gap: 0;
}

.site-customer .customer-subnav-menu .nav-dropdown-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.site-customer .customer-subnav-menu .nav-dropdown-link--with-caret::after {
    content: '';
    margin-left: 6px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
}

.site-customer .customer-subnav-menu .nav-dropdown::after {
    height: 8px;
}

.site-customer .customer-subnav-menu .nav-dropdown-toggle {
    min-width: 20px;
    padding-left: 2px;
    padding-right: 4px;
}

.site-customer .customer-subnav-menu .nav-dropdown-menu {
    top: calc(100% + 1px);
    min-width: 210px;
    overflow: visible;
    border: 1px solid #dde5ec;
    border-radius: 10px;
    background: #fff;
    box-shadow: none;
}

.site-customer .customer-subnav-menu .nav-dropdown-item {
    color: #334155;
    font-size: 0.8rem;
    font-weight: 700;
}

.site-customer .customer-subnav-menu .nav-dropdown-menu .nav-dropdown-item:hover,
.site-customer .customer-subnav-menu .nav-dropdown-menu .nav-dropdown-item.active,
.site-customer .customer-subnav-menu .nav-dropdown-menu .nav-dropdown-item.is-current {
    color: #1d4ed8;
    background: #eff6ff;
}

.site-customer .customer-subnav-menu .nav-category-tree-item.has-children::before {
    content: '';
    position: absolute;
    top: 0;
    left: 100%;
    width: 12px;
    height: 100%;
    z-index: 2;
}

.site-customer .customer-subnav-menu .nav-category-tree-children {
    top: -6px;
    left: calc(100% - 4px);
    width: 238px;
    padding: 8px;
    border: 1px solid #dde5ec;
    border-radius: 10px;
    background: #fff;
    box-shadow: none;
}

@media (max-width: 1100px) {
    .site-customer .customer-topbar {
        grid-template-columns: 1fr;
        justify-items: stretch;
        gap: 10px;
        padding: 8px 0;
    }

    .site-customer .customer-topbar-meta,
    .site-customer .customer-topbar-actions {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .site-customer .customer-subnav {
        padding: 6px 0;
    }

    .site-customer .customer-subnav-inner {
        width: min(1560px, calc(100% - 24px));
        align-items: flex-start;
        flex-direction: column;
    }

    .site-customer .customer-subnav .nav-toggle {
        display: inline-flex;
        min-height: 28px;
        margin-left: 0;
    }

    .site-customer .customer-subnav-menu {
        display: none;
        flex-direction: column;
        align-items: stretch;
    }

.site-customer .customer-subnav-menu.is-open {
        display: flex;
    }
}

/* Mobile customer header: fit everything on ONE line — logo on the left, then cart /
   account / menu as three compact icons on the right. Phone, email and the search field
   are dropped; cart and account collapse to their icons (labels hidden). The category
   links open below via the menu icon. #139 */
@media (max-width: 1100px) {
    .site-customer .customer-topbar {
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: 10px;
    }

    /* The actions group is the `auto` column (its own intrinsic width = the three icons);
       the brand takes the `1fr` column, i.e. the viewport minus those icons minus the gap.
       Grid items default to min-width:auto, which would let the logo's intrinsic width push
       past that share and slide under the icons — min-width:0 makes the column actually hold
       its 1fr share, and max-width:100% scales the logo to fit it. So the logo is bounded to
       (header width − icons width) without any hardcoded number. #139 */
    .site-customer .customer-topbar .customer-brand {
        min-width: 0;
        overflow: hidden;
    }

    .site-customer .customer-topbar .customer-brand-mark,
    .site-customer .customer-topbar .customer-brand-mark img {
        max-width: 100%;
        max-height: 46px;
        width: auto;
        height: auto;
        object-fit: contain;
    }

    .site-customer .customer-topbar-meta,
    .site-customer .customer-topbar-search {
        display: none;
    }

    .site-customer .customer-topbar-actions {
        justify-content: flex-end;
        flex-wrap: nowrap;
        gap: 8px;
    }

    /* Cart → icon only (drop the "View Cart" text). The count badge overlaps the icon's
       top-right corner instead of sitting inline, so the button shrinks to an icon and frees
       horizontal room (which the logo then gets). #139 */
    .site-customer .customer-cart-pill > span:not(.nav-badge) {
        display: none;
    }

    .site-customer .customer-cart-pill {
        padding: 0 9px;
        overflow: visible;
    }

    .site-customer .customer-cart-pill .nav-badge {
        position: absolute;
        top: -6px;
        right: -6px;
        min-width: 15px;
        height: 15px;
        padding: 0 3px;
        font-size: 0.58rem;
        line-height: 15px;
        border: 1px solid rgba(0, 0, 0, 0.25);
    }

    /* Account → icon only (drop the company name and caret). */
    .site-customer .customer-user-menu-label,
    .site-customer .customer-user-menu-toggle .user-menu-caret {
        display: none;
    }

    .site-customer .customer-user-menu-toggle {
        padding: 0 10px;
    }

    /* Menu toggle joins the icon group, styled to match the cart/account pills. */
    .site-customer .customer-topbar-nav-toggle {
        display: inline-flex;
        align-items: center;
        min-height: 34px;
        padding: 0 10px;
        border: 1px solid rgba(255, 255, 255, 0.16);
        border-radius: 8px;
        color: #fff;
        background: rgba(255, 255, 255, 0.08);
    }

    .site-customer .customer-topbar-nav-toggle .nav-toggle-text {
        display: none;
    }

    /* The subnav is now just the collapsible category menu — no empty bar when closed. */
    .site-customer .customer-subnav {
        min-height: 0;
        padding: 0;
    }

    .site-customer .customer-subnav-menu.is-open {
        padding: 6px 0;
    }
}

.import-progress-card {
    scroll-margin-top: 24px;
}

.import-progress-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.import-progress-bar {
    width: 100%;
    height: 12px;
    border-radius: 999px;
    background: #e5edf3;
    overflow: hidden;
    box-shadow: none;
}

.import-progress-fill {
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--admin-blue-hover) 0%, var(--admin-blue) 100%);
    transition: width 0.35s ease;
}

.js-product-import-form.is-loading {
    opacity: 0.92;
}

/* Compact search controls */
input[type="search"],
.table-search,
.form-control[type="search"],
.ss-search,
.po-search-input,
.company-search,
.user-search,
.product-price-search,
.price-list-search,
.category-search,
.email-search,
.location-search,
.memo-search,
.setting-search,
.error-log-search,
.email-log-search {
    min-height: 30px;
    height: 30px;
    padding: 0 9px;
    border-radius: 5px;
    font-size: 0.78rem;
    line-height: 1.2;
}

.table-card .table-search,
.company-admin-grid .table-search,
.order-admin-grid .table-search,
.product-admin-grid .table-search,
.price-matrix-grid .table-search {
    width: 220px;
    max-width: 100%;
}

.table-card .table-tools,
.company-admin-grid .table-tools,
.user-admin-grid .table-tools,
.order-admin-grid .table-tools,
.product-admin-grid .table-tools,
.settings-admin-grid .table-tools,
.email-template-grid .table-tools,
.fulfillment-region-grid .table-tools,
.email-log-grid .table-tools,
.error-log-grid .table-tools {
    gap: 8px;
}

.table-tools .button,
.table-card .table-tools .button {
    min-height: 30px;
    padding: 0 12px;
    border-radius: 5px;
    font-size: 0.78rem;
}

.ss-search-wrap {
    padding: 6px;
}

.site-customer .catalog-search-wrap {
    min-height: 30px;
    padding: 0 8px;
}

.site-customer .catalog-search-wrap .catalog-search,
.site-customer .catalog-search {
    min-height: 28px;
    height: 28px;
    padding: 0 6px;
}

.site-customer .ccu-search-input {
    min-height: 30px;
    padding: 0 8px;
}

.site-customer .customer-topbar-search {
    height: 30px;
    padding: 0 8px;
}

.site-customer .customer-topbar-search input {
    height: 28px;
    padding: 0;
}

/* Product catalog final layout */
.site-customer .catalog-page-head {
    align-items: center;
    margin: 0 0 10px;
    padding: 0;
}

.site-customer .catalog-shell {
    overflow: visible;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #fff;
    box-shadow: none;
}

.site-customer .catalog-toolbar {
    display: grid;
    grid-template-columns: 180px minmax(260px, 1fr) 82px 74px 118px 180px;
    grid-template-areas: "filter search searchbtn reset view warehouse";
    gap: 8px;
    min-height: 46px;
    padding: 8px 10px;
    border-bottom: 1px solid #edf1f5;
    align-items: center;
}

.site-customer .catalog-filter-button,
.site-customer .catalog-search-btn,
.site-customer .catalog-reset-btn,
.site-customer .catalog-warehouse-select,
.site-customer .catalog-view-toggle .view-toggle {
    min-height: 30px;
    height: 30px;
    border-radius: 5px;
    font-size: 0.76rem;
}

.site-customer .catalog-filter-button,
.site-customer .catalog-search-btn,
.site-customer .catalog-reset-btn {
    padding: 0 10px;
}

.site-customer .catalog-search-wrap {
    min-height: 30px;
    height: 30px;
    gap: 6px;
    padding: 0 8px;
    border: 1px solid #d7dde6;
    border-radius: 5px;
}

.site-customer .catalog-search-wrap .catalog-search {
    min-height: 28px;
    height: 28px;
    padding: 0;
    font-size: 0.78rem;
}

.site-customer .catalog-search-wrap .catalog-search::placeholder {
    font-size: 0.78rem;
}

.site-customer .catalog-view-group,
.site-customer .catalog-warehouse-select-wrap {
    gap: 6px;
    font-size: 0.72rem;
}

.site-customer .catalog-view-toggle {
    gap: 2px;
}

.site-customer .catalog-view-toggle .view-toggle {
    width: 30px;
    padding: 0;
}

.site-customer .catalog-warehouse-select {
    width: auto;
    min-width: 190px;
    padding: 0 24px 0 8px;
}

.site-customer .catalog-meta {
    min-height: 34px;
    padding: 8px 10px 0;
}

.site-customer .product-count-label,
.site-customer .selected-view-label {
    font-size: 0.78rem;
}

.site-customer .catalog-shell .catalog-products:not(.is-list-view) {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 18px 14px;
    padding: 0;
}

.site-customer .catalog-shell .catalog-products:not(.is-list-view) .market-product {
    display: grid;
    grid-template-rows: auto 1fr;
    min-height: 100%;
    padding: 0;
    border: 1px solid #e4eaf0;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: none;
}

.site-customer .catalog-shell .catalog-products:not(.is-list-view) .market-product:hover {
    transform: none;
    box-shadow: none;
}

.site-customer .catalog-shell .catalog-products:not(.is-list-view) .product-media {
    aspect-ratio: 1 / 1;
    min-height: 0;
    margin-bottom: 0;
    border: 0;
    border-radius: 0;
    background: #f8fafc;
}

.site-customer .catalog-shell .catalog-products:not(.is-list-view) .product-media.is-empty {
    background: #ffffff;
}

.site-customer .catalog-shell .catalog-products:not(.is-list-view) .product-media img {
    padding: 10px;
    background: #fff;
}

.site-customer .catalog-shell .catalog-products:not(.is-list-view) .product-body {
    display: grid;
    grid-template-rows: minmax(92px, auto) auto 1fr;
    gap: 0;
    padding: 10px 12px 11px;
}

.site-customer .catalog-shell .catalog-products:not(.is-list-view) .product-main {
    display: grid;
    grid-template-rows: 18px minmax(34px, auto) 28px;
    align-content: start;
    gap: 6px;
    min-height: 92px;
    padding-bottom: 0;
    border-bottom: 0;
}

.site-customer .catalog-shell .catalog-products:not(.is-list-view) .product-unit,
.site-customer .catalog-shell .catalog-products:not(.is-list-view) .product-size,
.site-customer .catalog-shell .catalog-products:not(.is-list-view) .product-remarks {
    display: none;
}

.site-customer .catalog-shell .catalog-products:not(.is-list-view) .product-body h2 {
    min-height: 34px;
    font-size: 0.78rem;
    line-height: 1.35;
    margin: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.site-customer .catalog-shell .catalog-products:not(.is-list-view) .guest-product-card .product-body {
    grid-template-rows: auto auto;
    gap: 10px;
}

.site-customer .catalog-shell .catalog-products:not(.is-list-view) .guest-product-card .product-main {
    display: block;
    min-height: 0;
}

.site-customer .catalog-shell .catalog-products:not(.is-list-view) .guest-product-card .product-body h2 {
    min-height: 0;
    margin-bottom: 6px;
}

.site-customer .catalog-shell .catalog-products:not(.is-list-view) .sku,
.site-customer .catalog-shell .catalog-products:not(.is-list-view) .product-avail {
    font-size: 0.7rem;
}

.site-customer .catalog-shell .catalog-products:not(.is-list-view) .sku {
    display: block !important;
    min-height: 18px;
    margin-bottom: 3px;
    color: #374151;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0;
}

.site-customer .catalog-shell .catalog-products:not(.is-list-view) .product-category {
    display: block;
    margin: 0;
    color: #6b7280;
    font-size: 0.80rem;
    line-height: 1.4;
    font-weight: 700;
}

.site-customer .catalog-shell .catalog-products:not(.is-list-view) .product-avail {
    align-self: center;
    margin: 6px 0 8px;
    line-height: 1.3;
}

.site-customer .catalog-shell .catalog-products:not(.is-list-view) .product-price {
    margin-top: 0;
    line-height: 1.2;
}

.site-customer .catalog-shell .catalog-products:not(.is-list-view) .product-price {
    font-size: 0.78rem;
}

.site-customer .product-title-link {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.site-customer .product-title-link:hover {
    color: var(--brand-dark);
}

.site-customer .customer-product-head {
    align-items: flex-start;
    gap: 18px;
}

.site-customer .customer-product-head-actions {
    margin-top: 8px;
}

.site-customer .customer-product-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #111827;
    font-size: 1.15rem;
    font-weight: 800;
    text-decoration: none;
}

.site-customer .customer-product-back:hover {
    color: var(--brand-dark);
}

.site-customer .customer-product-detail-card {
    display: grid;
    grid-template-columns: minmax(320px, 680px) minmax(320px, 1fr);
    gap: 34px;
    padding: 18px;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #fff;
    box-shadow: none;
}

.site-customer .customer-product-gallery,
.site-customer .customer-product-info {
    min-width: 0;
}

.site-customer .customer-product-image {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 570px;
    border-radius: 10px;
    overflow: hidden;
    background: #f8fafc;
}

.site-customer .customer-product-image.is-empty {
    background: #ffffff;
}

.site-customer .customer-product-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #fff;
    opacity: 1;
    transition: opacity 180ms ease;
}

.site-customer .customer-product-image.is-swapping img {
    opacity: 0;
}

.site-customer .customer-product-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
}

.site-customer .customer-product-thumb {
    width: 80px;
    height: 80px;
    padding: 0;
    border: none;
    border-radius: 10px;
    overflow: hidden;
    background: #f8fafc;
    cursor: pointer;
    flex: 0 0 auto;
    opacity: 0.72;
    box-shadow: none;
    transition: opacity 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.site-customer .customer-product-thumb:hover {
    opacity: 1;
    box-shadow: none;
    transform: translateY(-2px);
}

.site-customer .customer-product-thumb.is-active {
    opacity: 1;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #111827;
}

.site-customer .customer-product-thumb.is-active:hover {
    transform: none;
}

.site-customer .customer-product-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.site-customer .customer-product-info h2 {
    margin: 0 0 18px;
    color: #111827;
    font-size: clamp(1.35rem, 2vw, 1.7rem);
    line-height: 1.25;
}

.site-customer .customer-product-meta {
    display: grid;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
    color: #111827;
}

.site-customer .customer-product-meta li {
    font-size: 0.88rem;
    line-height: 1.45;
}

.site-customer .customer-product-meta strong {
    color: #111827;
    font-weight: 800;
}

.site-customer .customer-product-category-link {
    color: #1d4ed8;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 2px;
    transition: color 0.16s ease, text-decoration-color 0.16s ease;
}

.site-customer .customer-product-category-link:hover,
.site-customer .customer-product-category-link:focus-visible {
    color: #1e3a8a;
    text-decoration-color: currentColor;
}

.site-customer .customer-product-stock {
    margin: 22px 0 14px;
    font-size: 0.95rem;
    font-weight: 900;
}

.site-customer .customer-product-stock.avail-in-stock {
    color: #0369a1;
}

.site-customer .customer-product-stock.avail-out-stock {
    color: #ff4d38;
}

.site-customer .customer-product-price {
    margin: 0 0 20px;
    color: #111827;
    font-size: 0.95rem;
    font-weight: 800;
}

.site-customer .customer-product-actions {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 14px;
    width: 100%;
}

.site-customer .customer-product-qty {
    display: inline-flex;
    align-items: center;
    width: 132px;
    min-width: 132px;
    height: 46px;
    border: 1px solid #d9dee8;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.site-customer .customer-product-qty-btn {
    width: 38px;
    height: 100%;
    border: 0;
    background: #f8fafc;
    color: #111827;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

.site-customer .customer-product-qty-btn:hover {
    background: #eef2f7;
}

.site-customer .customer-product-qty-input {
    width: 56px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    color: #111827;
    background: #fff;
    padding: 0;
    -moz-appearance: textfield;
}

.site-customer .customer-product-qty-input:focus {
    outline: none;
}

.site-customer .customer-product-qty-input::-webkit-outer-spin-button,
.site-customer .customer-product-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.site-customer .customer-product-actions .btn-cart {
    min-width: 180px;
    min-height: 46px;
    font-size: 0.95rem;
    border-radius: 8px;
    flex: 0 0 auto;
    width: auto;
    padding: 0 18px;
}

@media (max-width: 1024px) {
    .site-customer .customer-product-detail-card {
        grid-template-columns: 1fr;
    }

    .site-customer .customer-product-image {
        min-height: 420px;
    }

    .site-customer .customer-product-actions {
        flex-wrap: wrap;
    }
}

@media (max-width: 640px) {
    .site-customer .customer-product-detail-card {
        padding: 14px;
        gap: 20px;
    }

    .site-customer .customer-product-image {
        min-height: 280px;
    }

    .site-customer .customer-product-back {
        font-size: 1.1rem;
    }
}

.site-customer .catalog-shell .catalog-products:not(.is-list-view) .product-footer {
    gap: 10px;
    padding-top: 0;
    align-self: end;
    border-top: 0;
}

.site-customer .catalog-shell .catalog-products:not(.is-list-view) .btn-cart {
    min-height: 30px;
    padding: 0 10px;
    border-radius: 4px;
    font-size: 0.7rem;
}

.site-customer .catalog-shell .catalog-products.is-list-view {
    display: block;
    padding: 0;
    border-top: 1px solid #edf1f5;
}

.site-customer .catalog-shell .catalog-products.is-list-view .catalog-list-head,
.site-customer .catalog-shell .catalog-products.is-list-view .market-product {
    display: grid;
    grid-template-columns: 64px minmax(220px, 1.3fr) 90px 112px 74px 90px 96px minmax(110px, 0.8fr) 124px;
    column-gap: 10px;
    align-items: center;
    padding: 8px 10px;
}

.site-customer .catalog-shell .catalog-products.is-list-view .catalog-list-head {
    min-height: 34px;
    color: #64748b;
    background: #f8fafc;
    border-bottom: 1px solid #edf1f5;
    font-size: 0.68rem;
    font-weight: 900;
    text-transform: uppercase;
}

.site-customer .catalog-shell .catalog-products.is-list-view .market-product {
    min-height: 62px;
    border: 0;
    border-bottom: 1px solid #edf1f5;
    border-radius: 0;
    box-shadow: none;
    background: #fff;
}

.site-customer .catalog-shell .catalog-products.is-list-view .product-media {
    grid-column: 1;
    width: 48px;
    height: 48px;
    min-height: 48px;
    margin: 0;
    border-radius: 5px;
}

.site-customer .catalog-shell .catalog-products.is-list-view .product-body {
    grid-column: 2 / -1;
    display: grid;
    grid-template-columns: minmax(220px, 1.3fr) 90px 112px 74px 90px 96px minmax(110px, 0.8fr) 124px;
    column-gap: 10px;
    align-items: center;
    padding: 0;
}

.site-customer .catalog-shell .catalog-products.is-list-view .product-main,
.site-customer .catalog-shell .catalog-products.is-list-view .product-footer {
    display: contents;
}

.site-customer .catalog-shell .catalog-products.is-list-view .product-body h2,
.site-customer .catalog-shell .catalog-products.is-list-view .sku,
.site-customer .catalog-shell .catalog-products.is-list-view .product-unit,
.site-customer .catalog-shell .catalog-products.is-list-view .product-size,
.site-customer .catalog-shell .catalog-products.is-list-view .product-price,
.site-customer .catalog-shell .catalog-products.is-list-view .product-avail,
.site-customer .catalog-shell .catalog-products.is-list-view .product-remarks,
.site-customer .catalog-shell .catalog-products.is-list-view .btn-cart {
    min-height: 0;
    margin: 0;
    align-self: center;
    font-size: 0.76rem;
    line-height: 1.25;
}

.site-customer .catalog-shell .catalog-products.is-list-view .product-body h2 { grid-column: 1; }
.site-customer .catalog-shell .catalog-products.is-list-view .sku { grid-column: 2; }
.site-customer .catalog-shell .catalog-products.is-list-view .product-unit { grid-column: 3; }
.site-customer .catalog-shell .catalog-products.is-list-view .product-size { grid-column: 4; }
.site-customer .catalog-shell .catalog-products.is-list-view .product-price { grid-column: 5; }
.site-customer .catalog-shell .catalog-products.is-list-view .product-avail { grid-column: 6; }
.site-customer .catalog-shell .catalog-products.is-list-view .product-remarks { grid-column: 7; }
.site-customer .catalog-shell .catalog-products.is-list-view .btn-cart { grid-column: 8; }

.site-customer .catalog-shell .catalog-products.is-list-view .product-category {
    display: none;
}

.site-customer .catalog-shell .catalog-products.is-list-view .btn-cart {
    width: 100%;
    min-height: 30px;
    padding: 0 8px;
    border-radius: 5px;
    font-size: 0.72rem;
}

@media (max-width: 1500px) {
    .site-customer .catalog-toolbar {
        grid-template-columns: 170px minmax(240px, 1fr) 78px 70px;
        grid-template-areas:
            "filter search searchbtn reset"
            "view view warehouse warehouse";
    }

    .site-customer .catalog-shell .catalog-products:not(.is-list-view) {
        grid-template-columns: repeat(8, minmax(0, 1fr));
    }
}

@media (max-width: 980px) {
    .site-customer .catalog-toolbar {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "filter filter"
            "search search"
            "searchbtn reset"
            "view warehouse";
    }

    .site-customer .catalog-shell .catalog-products:not(.is-list-view) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .site-customer .catalog-shell .catalog-products.is-list-view .catalog-list-head {
        display: none;
    }

    .site-customer .catalog-shell .catalog-products.is-list-view .market-product,
    .site-customer .catalog-shell .catalog-products.is-list-view .product-body {
        display: grid;
        grid-template-columns: 72px minmax(0, 1fr);
        gap: 10px;
    }
}

@media (max-width: 640px) {
    .site-customer .catalog-shell .catalog-products:not(.is-list-view) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Matched compact control heights */
.table-tools :is(input[type="search"], input[type="text"], select, .form-control, .table-search),
.table-tools :is(.button, button.button),
.table-header > :is(.button, button.button),
.form-toolbar :is(.form-control, .button, button.button),
.po-search-form :is(.po-search-input, .button, button.button),
.company-picker-row :is(.form-control, .button, button.button),
.site-customer .customer-company-users-toolbar :is(.ccu-search-input, .ccu-search-btn, .ccu-edit-company, .ccu-add-staff),
.site-customer .checkout-coupon-row :is(.form-control, .button, button.button),
.site-customer .cart-table-toolbar :is(.form-control, .button, button.button) {
    height: 30px;
    min-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
    border-radius: 5px;
    line-height: 1;
}

.site-customer .customer-company-users-toolbar .ccu-search-input {
    padding-left: 34px;
}

.site-customer .customer-company-users-toolbar .button,
.table-tools .button,
.table-header > .button,
.form-toolbar .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.table-header > .button.company-card-action,
.table-header > a.button.company-card-action {
    width: auto;
    height: 38px;
    min-height: 38px;
    padding: 0 18px;
    border-radius: 999px;
    line-height: 1;
    align-self: flex-start;
    flex: 0 0 auto;
}

/* Customer button size standard */
.site-customer :is(.button, button.button, a.button),
.site-customer :is(.ccu-search-btn, .ccu-edit-company, .ccu-add-staff, .ccu-reset-btn, .ccu-edit-btn, .ccu-delete-btn),
.site-customer :is(.checkout-coupon-row .button, .cart-summary-actions .button, .checkout-confirm) {
    height: 32px;
    min-height: 32px;
    padding: 0 12px;
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.site-customer .ccu-row-actions {
    gap: 8px;
    justify-content: flex-end;
}

.site-customer .ccu-inline-form {
    display: inline-flex;
    align-items: center;
    margin: 0;
}

.site-customer .customer-company-users-toolbar :is(.ccu-search-input, .ccu-search-btn, .ccu-edit-company, .ccu-add-staff),
.site-customer .checkout-coupon-row :is(.form-control, .button, button.button),
.site-customer .cart-table-toolbar :is(.form-control, .button, button.button) {
    height: 36px;
    min-height: 36px;
}

.site-customer .catalog-shell .catalog-products.is-list-view .btn-cart {
    height: 30px;
    min-height: 30px;
}

/* Pricing group manage-company controls */
.price-list-manage .company-picker-row {
    gap: 10px;
    align-items: center;
}

.price-list-manage .company-picker-row select,
.price-list-manage .company-picker-row .button {
    height: 32px;
    min-height: 32px;
    border-radius: var(--radius-sm);
}

.price-list-manage .company-picker-row select {
    padding: 0 34px 0 10px;
}

.price-list-manage .company-picker-row .button {
    min-width: 140px;
    padding: 0 14px;
    border-radius: 999px;
    font-size: 0.84rem;
    line-height: 1;
}

/* Customer catalog toolbar desktop alignment */
@media (min-width: 1200px) {
    .site-customer .catalog-toolbar {
        display: flex !important;
        flex-wrap: nowrap;
        gap: 10px;
        align-items: center;
    }

    .site-customer .catalog-category-menu {
        flex: 0 0 220px;
        min-width: 0;
    }

    .site-customer .catalog-search-wrap {
        flex: 1 1 auto;
        min-width: 260px;
        width: auto;
    }

    .site-customer .catalog-search-btn {
        flex: 0 0 86px;
        min-width: 0;
        width: 100%;
    }

    .site-customer .catalog-reset-btn {
        flex: 0 0 78px;
        min-width: 0;
        width: 100%;
    }

    .site-customer .catalog-view-group {
        display: inline-flex !important;
        flex: 0 0 auto;
        gap: 8px;
        align-items: center;
        justify-content: flex-end;
        white-space: nowrap;
        flex-wrap: nowrap;
    }

    .site-customer .catalog-search-btn,
    .site-customer .catalog-reset-btn {
        padding-inline: 8px;
    }

    .site-customer .catalog-view-toggle {
        display: inline-flex !important;
        flex: 0 0 auto;
        align-items: center;
        white-space: nowrap;
    }

    .site-customer .catalog-filter-button {
        width: 100%;
        padding-inline: 10px;
    }
}

.site-customer .catalog-toolbar .catalog-search-wrap {
    box-sizing: border-box;
    overflow: hidden;
    border: 1px solid #cfd9e6 !important;
    border-radius: 6px;
    background: #fff;
}

@media (min-width: 1200px) {
    .site-customer .catalog-warehouse-select-wrap {
        display: inline-flex !important;
        flex: 0 0 auto;
        gap: 8px;
        align-items: center;
        justify-content: end;
        box-sizing: border-box;
        overflow: visible;
        white-space: nowrap;
    }

    .site-customer .catalog-warehouse-label {
        margin: 0;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        line-height: 40px;
    }

    .site-customer .catalog-warehouse-select {
        height: 40px;
        min-height: 40px;
        width: 112px;
        min-width: 112px;
        max-width: 112px;
        box-sizing: border-box;
        padding: 0 30px 0 12px;
        border: 1px solid #aeb9c8;
        border-radius: 6px;
        background-color: #fff;
        font-size: 0.9rem;
        font-weight: 800;
        cursor: pointer;
    }
}

/* Customer order list action buttons */
.site-customer .customer-order-actions {
    gap: 8px;
}

.site-customer .customer-order-actions .button {
    height: 36px;
    min-height: 36px;
    padding: 0 14px;
    border-radius: 6px;
    font-size: 0.84rem;
    font-weight: 800;
    line-height: 1;
    box-shadow: none;
}

.site-customer .customer-order-actions .button.primary {
    border-color: var(--brand) !important;
    background: var(--brand) !important;
    color: #fff !important;
}

.site-customer .customer-order-actions .button.primary:hover {
    border-color: var(--brand-dark) !important;
    background: var(--brand-dark) !important;
    color: #fff !important;
    box-shadow: none;
    transform: none;
}

.site-customer .customer-order-actions .customer-order-reorder {
    border-color: #dbeafe !important;
    background: #f7fcfb !important;
    color: var(--brand-dark) !important;
    box-shadow: none;
}

.site-customer .customer-order-actions .customer-order-reorder:hover {
    border-color: #93c5fd !important;
    background: #edf8f6 !important;
    color: var(--brand-dark) !important;
    box-shadow: none;
    transform: none;
}

/* Customer order payment panel */
.site-customer .customer-order-payment-card {
    align-self: start;
    border: 1px solid var(--line-light);
    border-radius: 12px;
    box-shadow: none;
}

.site-customer .customer-order-payment-card h2 {
    margin: 0;
    padding: 16px 18px;
    border-bottom: 1px solid var(--line-light);
    color: var(--ink);
    font-size: 1rem;
    font-weight: 800;
}

.site-customer .customer-order-payment-form .checkout-card-body {
    padding: 16px 18px;
}

.site-customer .customer-order-payment-form .checkout-confirm {
    width: calc(100% - 36px);
    margin: 0 18px 18px;
    height: 38px;
    min-height: 38px;
    border-radius: 6px;
}

.site-customer .customer-order-payment-coupon {
    display: grid;
    grid-template-columns: auto minmax(160px, 1fr) auto;
    gap: 8px;
    align-items: center;
    margin: 12px 18px 8px;
    padding: 12px 0;
    border-top: 1px solid var(--line-light);
    border-bottom: 1px solid var(--line-light);
}

.site-customer .customer-order-payment-coupon label {
    color: #000;
    font-size: 0.9rem;
    font-weight: 900;
    white-space: nowrap;
}

.site-customer .customer-order-payment-coupon .form-control {
    height: 36px;
    min-height: 36px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 0.88rem;
    padding: 0 12px;
}

.site-customer .customer-order-payment-coupon .button {
    height: 36px;
    min-height: 36px;
    padding: 0 14px;
    border-radius: 6px;
    font-size: 0.88rem;
    font-weight: 900;
    box-shadow: none;
}

@media (min-width: 1180px) {
    .site-customer .customer-view-order-grid:has(.customer-order-payment-card) {
        grid-template-columns: minmax(0, 1.05fr) minmax(420px, 1.05fr) minmax(340px, 0.7fr);
        align-items: start;
    }
}

/* Compact customer product list view rows */
.site-customer .catalog-shell .catalog-products.is-list-view .market-product {
    min-height: 46px !important;
    height: auto !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

.site-customer .catalog-shell .catalog-products.is-list-view .product-media {
    width: 0 !important;
    min-width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    border: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.site-customer .catalog-shell .catalog-products.is-list-view .product-body,
.site-customer .catalog-shell .catalog-products.is-list-view .product-main,
.site-customer .catalog-shell .catalog-products.is-list-view .product-footer {
    min-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.site-customer .catalog-shell .catalog-products.is-list-view .product-body h2,
.site-customer .catalog-shell .catalog-products.is-list-view .sku,
.site-customer .catalog-shell .catalog-products.is-list-view .product-unit,
.site-customer .catalog-shell .catalog-products.is-list-view .product-size,
.site-customer .catalog-shell .catalog-products.is-list-view .product-price,
.site-customer .catalog-shell .catalog-products.is-list-view .product-avail,
.site-customer .catalog-shell .catalog-products.is-list-view .product-remarks {
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}

.site-customer .catalog-shell .catalog-products.is-list-view .btn-cart {
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 10px !important;
}

/* Customer product list view table theme */
.site-customer .catalog-shell .catalog-products.is-list-view {
    display: block !important;
    padding: 0 !important;
    border: 1px solid #e5e7eb;
    border-radius: 0;
    background: #fff;
    overflow-x: auto;
}

.site-customer .catalog-shell .catalog-products.is-list-view .catalog-list-head,
.site-customer .catalog-shell .catalog-products.is-list-view .market-product {
    display: grid !important;
    grid-template-columns: 96px minmax(280px, 2fr) 150px 150px 110px 120px 130px minmax(150px, 1fr) 150px !important;
    column-gap: 28px;
    align-items: center;
    min-width: 1380px;
    padding: 0 14px !important;
}

.site-customer .catalog-shell .catalog-products.is-list-view .catalog-list-head {
    min-height: 52px;
    border-bottom: 1px solid #d9dee7;
    background: #fff;
    color: #64748b;
    font-size: 0.82rem;
    font-weight: 900;
    text-transform: none;
}

.site-customer .catalog-shell .catalog-products.is-list-view .market-product {
    min-height: 82px !important;
    border: 0;
    border-bottom: 1px solid #e8edf3;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
}

.site-customer .catalog-shell .catalog-products.is-list-view .market-product:nth-child(odd) {
    background: #fcfdff;
}

.site-customer .catalog-shell .catalog-products.is-list-view .market-product:hover {
    background: #f7fcfb;
    box-shadow: none;
    transform: none;
}

.site-customer .catalog-shell .catalog-products.is-list-view .product-media {
    grid-column: 1;
    display: flex !important;
    width: 64px !important;
    min-width: 64px !important;
    height: 54px !important;
    min-height: 54px !important;
    align-items: center;
    justify-content: center;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    overflow: hidden !important;
}

.site-customer .catalog-shell .catalog-products.is-list-view .product-body {
    grid-column: 2 / -1;
    display: grid !important;
    grid-template-columns: minmax(280px, 2fr) 150px 150px 110px 120px 130px minmax(150px, 1fr) 150px !important;
    column-gap: 28px;
    align-items: center;
    min-height: 0 !important;
    padding: 0 !important;
}

.site-customer .catalog-shell .catalog-products.is-list-view .product-main,
.site-customer .catalog-shell .catalog-products.is-list-view .product-footer {
    display: contents !important;
}

.site-customer .catalog-shell .catalog-products.is-list-view .product-body h2,
.site-customer .catalog-shell .catalog-products.is-list-view .sku,
.site-customer .catalog-shell .catalog-products.is-list-view .product-unit,
.site-customer .catalog-shell .catalog-products.is-list-view .product-size,
.site-customer .catalog-shell .catalog-products.is-list-view .product-price,
.site-customer .catalog-shell .catalog-products.is-list-view .product-avail,
.site-customer .catalog-shell .catalog-products.is-list-view .product-remarks {
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #020617;
    font-size: 0.88rem !important;
    font-weight: 500;
    line-height: 1.35 !important;
    text-align: left;
}

.site-customer .catalog-shell .catalog-products.is-list-view .product-body h2 {
    grid-column: 1;
    font-weight: 700;
    text-decoration: underline;
    overflow-wrap: anywhere;
}

.site-customer .catalog-shell .catalog-products.is-list-view .sku { grid-column: 2; }
.site-customer .catalog-shell .catalog-products.is-list-view .product-unit { grid-column: 3; }
.site-customer .catalog-shell .catalog-products.is-list-view .product-size { grid-column: 4; }
.site-customer .catalog-shell .catalog-products.is-list-view .product-price { grid-column: 5; }
.site-customer .catalog-shell .catalog-products.is-list-view .product-avail { grid-column: 6; }
.site-customer .catalog-shell .catalog-products.is-list-view .product-remarks { grid-column: 7; }
.site-customer .catalog-shell .catalog-products.is-list-view .btn-cart { grid-column: 8; }

.site-customer .catalog-shell .catalog-products.is-list-view .product-category {
    display: none !important;
}

.site-customer .catalog-shell .catalog-products.is-list-view .product-price {
    color: var(--brand-dark);
    font-weight: 900;
}

.site-customer .catalog-shell .catalog-products.is-list-view .product-avail {
    color: #0369a1 !important;
    font-weight: 900;
}

.site-customer .catalog-shell .catalog-products.is-list-view .product-avail.avail-low {
    color: #ef3b2d !important;
}

.site-customer .catalog-shell .catalog-products.is-list-view .product-avail.avail-out-stock {
    color: #ef3b2d !important;
}

.site-customer .catalog-shell .catalog-products.is-list-view .product-avail::before {
    display: none !important;
}

.site-customer .catalog-shell .catalog-products.is-list-view .btn-cart {
    width: 100%;
    height: 36px !important;
    min-height: 36px !important;
    border-radius: 6px;
    font-size: 0.82rem !important;
    font-weight: 800;
}

/* Customer product list view compact row sizing */
.site-customer .catalog-shell .catalog-products.is-list-view .catalog-list-head,
.site-customer .catalog-shell .catalog-products.is-list-view .market-product {
    grid-template-columns: 72px minmax(260px, 2fr) 140px 140px 90px 110px 120px minmax(140px, 1fr) 130px !important;
    column-gap: 22px !important;
}

.site-customer .catalog-shell .catalog-products.is-list-view .catalog-list-head {
    min-height: 42px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.site-customer .catalog-shell .catalog-products.is-list-view .market-product {
    min-height: 52px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

.site-customer .catalog-shell .catalog-products.is-list-view .product-media {
    width: 42px !important;
    min-width: 42px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
}

.site-customer .catalog-shell .catalog-products.is-list-view .product-body {
    grid-template-columns: minmax(260px, 2fr) 140px 140px 90px 110px 120px minmax(140px, 1fr) 130px !important;
    column-gap: 22px !important;
}

.site-customer .catalog-shell .catalog-products.is-list-view .product-body h2,
.site-customer .catalog-shell .catalog-products.is-list-view .sku,
.site-customer .catalog-shell .catalog-products.is-list-view .product-unit,
.site-customer .catalog-shell .catalog-products.is-list-view .product-size,
.site-customer .catalog-shell .catalog-products.is-list-view .product-price,
.site-customer .catalog-shell .catalog-products.is-list-view .product-avail,
.site-customer .catalog-shell .catalog-products.is-list-view .product-remarks {
    font-size: 0.82rem !important;
}

.site-customer .catalog-shell .catalog-products.is-list-view .btn-cart {
    height: 32px !important;
    min-height: 32px !important;
}

/* Final hard reset for compact product list rows */
.site-customer .catalog-shell .catalog-products.is-list-view .catalog-list-head,
.site-customer .catalog-shell .catalog-products.is-list-view .market-product {
    box-sizing: border-box !important;
    grid-template-columns: 78px minmax(260px, 2fr) 140px 140px 90px 110px 120px minmax(140px, 1fr) 132px !important;
    min-width: 1320px !important;
    column-gap: 18px !important;
}

.site-customer .catalog-shell .catalog-products.is-list-view .catalog-list-head {
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
}

.site-customer .catalog-shell .catalog-products.is-list-view .market-product {
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
    padding: 6px 12px !important;
    margin: 0 !important;
    overflow: hidden !important;
    align-items: center !important;
}

.site-customer .catalog-shell .catalog-products.is-list-view .product-media {
    box-sizing: border-box !important;
    width: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    align-self: center !important;
}

.site-customer .catalog-shell .catalog-products.is-list-view .product-body {
    grid-template-columns: minmax(260px, 2fr) 140px 140px 90px 110px 120px minmax(140px, 1fr) 132px !important;
    column-gap: 18px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    overflow: hidden !important;
    align-items: center !important;
}

.site-customer .catalog-shell .catalog-products.is-list-view .product-main,
.site-customer .catalog-shell .catalog-products.is-list-view .product-footer {
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

.site-customer .catalog-shell .catalog-products.is-list-view .product-body h2,
.site-customer .catalog-shell .catalog-products.is-list-view .sku,
.site-customer .catalog-shell .catalog-products.is-list-view .product-unit,
.site-customer .catalog-shell .catalog-products.is-list-view .product-size,
.site-customer .catalog-shell .catalog-products.is-list-view .product-price,
.site-customer .catalog-shell .catalog-products.is-list-view .product-avail,
.site-customer .catalog-shell .catalog-products.is-list-view .product-remarks {
    height: auto !important;
    max-height: 38px !important;
    overflow: hidden !important;
    font-size: 0.82rem !important;
    line-height: 1.2 !important;
}

.site-customer .catalog-shell .catalog-products.is-list-view .btn-cart {
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    padding: 0 10px !important;
}

.site-customer .catalog-shell .catalog-products.is-list-view .product-body h2 {
    display: flex !important;
    align-items: center !important;
    height: 42px !important;
    max-height: 42px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    font-size: 0.84rem !important;
    line-height: 1.25 !important;
}

/* Product list visibility fix */
.site-customer .catalog-shell .catalog-products.is-list-view .market-product {
    height: 72px !important;
    min-height: 72px !important;
    max-height: none !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    overflow: visible !important;
}

.site-customer .catalog-shell .catalog-products.is-list-view .product-body {
    height: auto !important;
    min-height: 52px !important;
    max-height: none !important;
    overflow: visible !important;
}

.site-customer .catalog-shell .catalog-products.is-list-view .product-media {
    width: 62px !important;
    min-width: 62px !important;
    max-width: 62px !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
}

.site-customer .catalog-shell .catalog-products.is-list-view .product-body h2,
.site-customer .catalog-shell .catalog-products.is-list-view .sku,
.site-customer .catalog-shell .catalog-products.is-list-view .product-unit,
.site-customer .catalog-shell .catalog-products.is-list-view .product-size,
.site-customer .catalog-shell .catalog-products.is-list-view .product-price,
.site-customer .catalog-shell .catalog-products.is-list-view .product-avail,
.site-customer .catalog-shell .catalog-products.is-list-view .product-remarks {
    display: flex !important;
    align-items: center !important;
    height: auto !important;
    min-height: 52px !important;
    max-height: none !important;
    overflow: visible !important;
    line-height: 1.3 !important;
}

.site-customer .catalog-shell .catalog-products.is-list-view .btn-cart {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
}

/* Product list vertical alignment fix */
.site-customer .catalog-shell .catalog-products.is-list-view .catalog-list-head {
    position: relative;
    z-index: 1;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    padding: 0 14px !important;
    align-items: center !important;
}

.site-customer .catalog-shell .catalog-products.is-list-view .catalog-list-head span {
    display: flex;
    align-items: center;
    min-height: 48px;
    line-height: 1.2;
}

.site-customer .catalog-shell .catalog-products.is-list-view .catalog-list-head .catalog-list-sort {
    appearance: none;
    -webkit-appearance: none;
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-height: 48px;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: inherit !important;
    font: inherit !important;
    font-weight: 800;
    text-align: left;
    cursor: pointer;
}

.site-customer .catalog-shell .catalog-products.is-list-view .catalog-list-head .catalog-list-sort::after {
    content: '';
    width: 8px;
    height: 8px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    opacity: 0;
    transform: rotate(45deg);
}

.site-customer .catalog-shell .catalog-products.is-list-view .catalog-list-head .catalog-list-sort.is-active {
    color: var(--brand-dark);
}

.site-customer .catalog-shell .catalog-products.is-list-view .catalog-list-head .catalog-list-sort.is-active::after {
    opacity: 0.9;
}

.site-customer .catalog-shell .catalog-products.is-list-view .catalog-list-head .catalog-list-sort.is-desc::after {
    transform: rotate(225deg);
}

.site-customer .catalog-shell .catalog-products.is-list-view .product-media {
    position: relative;
}

.site-customer .catalog-shell .catalog-products.is-list-view .product-media.is-empty::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 18px !important;
    height: 18px !important;
    transform: translate(-50%, -50%) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Crect x='3.5' y='5.5' width='17' height='13' rx='2.5' stroke='%23cbd5e1' stroke-width='1.5'/%3E%3Ccircle cx='9' cy='10' r='1.75' fill='%23e2e8f0'/%3E%3Cpath d='M6.5 16l3.8-3.8a1.2 1.2 0 0 1 1.7 0L14.5 14l1.3-1.3a1.2 1.2 0 0 1 1.7 0L20 15.2' stroke='%23cbd5e1' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    opacity: 0.95 !important;
    pointer-events: none !important;
}

.site-customer .catalog-shell .catalog-products.is-list-view .market-product {
    position: relative;
    height: 74px !important;
    min-height: 74px !important;
    padding: 10px 14px !important;
    align-items: center !important;
}

.site-customer .catalog-shell .catalog-products.is-list-view .product-body {
    align-items: center !important;
}

.site-customer .catalog-shell .catalog-products.is-list-view .product-body h2,
.site-customer .catalog-shell .catalog-products.is-list-view .sku,
.site-customer .catalog-shell .catalog-products.is-list-view .product-unit,
.site-customer .catalog-shell .catalog-products.is-list-view .product-size,
.site-customer .catalog-shell .catalog-products.is-list-view .product-price,
.site-customer .catalog-shell .catalog-products.is-list-view .product-avail,
.site-customer .catalog-shell .catalog-products.is-list-view .product-remarks,
.site-customer .catalog-shell .catalog-products.is-list-view .btn-cart {
    align-self: center !important;
}

/* Product list final cell centering */
.site-customer .catalog-shell .catalog-products.is-list-view .market-product {
    height: 70px !important;
    min-height: 70px !important;
    max-height: 70px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

.site-customer .catalog-shell .catalog-products.is-list-view .product-body {
    align-self: center !important;
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
}

.site-customer .catalog-shell .catalog-products.is-list-view .product-media {
    align-self: center !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
}

.site-customer .catalog-shell .catalog-products.is-list-view .product-body h2,
.site-customer .catalog-shell .catalog-products.is-list-view .sku,
.site-customer .catalog-shell .catalog-products.is-list-view .product-unit,
.site-customer .catalog-shell .catalog-products.is-list-view .product-size,
.site-customer .catalog-shell .catalog-products.is-list-view .product-price,
.site-customer .catalog-shell .catalog-products.is-list-view .product-avail,
.site-customer .catalog-shell .catalog-products.is-list-view .product-remarks {
    display: flex !important;
    align-items: center !important;
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

.site-customer .catalog-shell .catalog-products.is-list-view .btn-cart {
    align-self: center !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
}

/* Product list final vertical-center correction */
.site-customer .catalog-shell .catalog-products.is-list-view .market-product {
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    align-items: center !important;
}

.site-customer .catalog-shell .catalog-products.is-list-view .product-body {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    align-self: center !important;
    align-items: center !important;
}

.site-customer .catalog-shell .catalog-products.is-list-view .product-media {
    align-self: center !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
}

.site-customer .catalog-shell .catalog-products.is-list-view .product-body h2,
.site-customer .catalog-shell .catalog-products.is-list-view .sku,
.site-customer .catalog-shell .catalog-products.is-list-view .product-unit,
.site-customer .catalog-shell .catalog-products.is-list-view .product-size,
.site-customer .catalog-shell .catalog-products.is-list-view .product-price,
.site-customer .catalog-shell .catalog-products.is-list-view .product-avail,
.site-customer .catalog-shell .catalog-products.is-list-view .product-remarks {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    align-self: center !important;
    overflow: visible !important;
    line-height: 1.2 !important;
    transform: translateY(-1px);
}

.site-customer .catalog-shell .catalog-products.is-list-view .btn-cart {
    align-self: center !important;
    transform: translateY(-1px);
}

/* Product list table layout final */
.site-customer .catalog-shell .catalog-products.is-list-view {
    display: block !important;
    border: 1px solid #dce3ec !important;
    border-radius: 0 !important;
    background: #fff !important;
    overflow-x: auto !important;
}

.site-customer .catalog-shell .catalog-products.is-list-view .catalog-list-head,
.site-customer .catalog-shell .catalog-products.is-list-view .market-product {
    display: grid !important;
    grid-template-columns: 90px minmax(300px, 2fr) 150px 170px 110px 130px 130px minmax(150px, 1fr) 150px !important;
    min-width: 1380px !important;
    column-gap: 16px !important;
    align-items: center !important;
    box-sizing: border-box !important;
}

.site-customer .catalog-shell .catalog-products.is-list-view .catalog-list-head {
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    padding: 0 16px !important;
    border-bottom: 1px solid #dce3ec !important;
    background: #fff !important;
}

.site-customer .catalog-shell .catalog-products.is-list-view .catalog-list-head span {
    display: flex !important;
    align-items: center !important;
    height: 48px !important;
    min-height: 48px !important;
    margin: 0 !important;
    color: #5f6f85 !important;
    font-size: 0.82rem !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
}

.site-customer .catalog-shell .catalog-products.is-list-view .market-product {
    height: 72px !important;
    min-height: 72px !important;
    max-height: 72px !important;
    padding: 0 16px !important;
    margin: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #e4e9f0 !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
    overflow: hidden !important;
    transform: none !important;
}

.site-customer .catalog-shell .catalog-products.is-list-view .market-product:hover {
    background: #f8fcfb !important;
    box-shadow: none !important;
    transform: none !important;
}

.site-customer .catalog-shell .catalog-products.is-list-view .product-media {
    grid-column: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
    width: 70px !important;
    min-width: 70px !important;
    max-width: 70px !important;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    overflow: hidden !important;
}

.site-customer .catalog-shell .catalog-products.is-list-view .product-body,
.site-customer .catalog-shell .catalog-products.is-list-view .product-main,
.site-customer .catalog-shell .catalog-products.is-list-view .product-footer {
    display: contents !important;
}

.site-customer .catalog-shell .catalog-products.is-list-view .product-category {
    display: none !important;
}

.site-customer .catalog-shell .catalog-products.is-list-view .product-body h2,
.site-customer .catalog-shell .catalog-products.is-list-view .sku,
.site-customer .catalog-shell .catalog-products.is-list-view .product-unit,
.site-customer .catalog-shell .catalog-products.is-list-view .product-size,
.site-customer .catalog-shell .catalog-products.is-list-view .product-price,
.site-customer .catalog-shell .catalog-products.is-list-view .product-avail,
.site-customer .catalog-shell .catalog-products.is-list-view .product-remarks {
    display: flex !important;
    align-items: center !important;
    align-self: center !important;
    height: 72px !important;
    min-height: 72px !important;
    max-height: 72px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    color: #020617 !important;
    font-size: 0.86rem !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
    transform: none !important;
}

.site-customer .catalog-shell .catalog-products.is-list-view .product-body h2 {
    grid-column: 2 !important;
    font-weight: 800 !important;
    text-decoration: none !important;
}

.site-customer .catalog-shell .catalog-products.is-list-view .sku { grid-column: 3 !important; }
.site-customer .catalog-shell .catalog-products.is-list-view .product-unit { grid-column: 4 !important; }
.site-customer .catalog-shell .catalog-products.is-list-view .product-size { grid-column: 5 !important; }
.site-customer .catalog-shell .catalog-products.is-list-view .product-price { grid-column: 6 !important; color: var(--brand-dark) !important; font-weight: 900 !important; }
.site-customer .catalog-shell .catalog-products.is-list-view .product-avail { grid-column: 7 !important; color: #0369a1 !important; font-weight: 900 !important; }
.site-customer .catalog-shell .catalog-products.is-list-view .product-avail.avail-low { color: #ef3b2d !important; }
.site-customer .catalog-shell .catalog-products.is-list-view .product-avail::before { display: none !important; }
.site-customer .catalog-shell .catalog-products.is-list-view .product-remarks { grid-column: 8 !important; }

.site-customer .catalog-shell .catalog-products.is-list-view .btn-cart {
    grid-column: 9 !important;
    align-self: center !important;
    justify-self: stretch !important;
    width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    border-radius: 6px !important;
    font-size: 0.82rem !important;
    font-weight: 800 !important;
    transform: none !important;
}

/* Product list full-width no-scroll layout */
.site-customer .catalog-shell .catalog-products.is-list-view {
    overflow-x: hidden !important;
}

.site-customer .catalog-shell .catalog-products.is-list-view .catalog-list-head,
.site-customer .catalog-shell .catalog-products.is-list-view .market-product {
    width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: 7% 25% 10% 12% 7% 10% 10% 10% 9% !important;
    column-gap: 0 !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

.site-customer .catalog-shell .catalog-products.is-list-view .catalog-list-head span,
.site-customer .catalog-shell .catalog-products.is-list-view .product-body h2,
.site-customer .catalog-shell .catalog-products.is-list-view .sku,
.site-customer .catalog-shell .catalog-products.is-list-view .product-unit,
.site-customer .catalog-shell .catalog-products.is-list-view .product-size,
.site-customer .catalog-shell .catalog-products.is-list-view .product-price,
.site-customer .catalog-shell .catalog-products.is-list-view .product-avail,
.site-customer .catalog-shell .catalog-products.is-list-view .product-remarks {
    padding-right: 10px !important;
}

.site-customer .catalog-shell .catalog-products.is-list-view .product-body {
    width: 100% !important;
    min-width: 0 !important;
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: 7% 25% 10% 12% 7% 10% 10% 10% 9% !important;
    column-gap: 0 !important;
}

.site-customer .catalog-shell .catalog-products.is-list-view .product-media {
    grid-column: 1 !important;
    justify-self: start !important;
}

.site-customer .catalog-shell .catalog-products.is-list-view .product-body h2 { grid-column: 2 !important; }
.site-customer .catalog-shell .catalog-products.is-list-view .sku { grid-column: 3 !important; }
.site-customer .catalog-shell .catalog-products.is-list-view .product-unit { grid-column: 4 !important; }
.site-customer .catalog-shell .catalog-products.is-list-view .product-size { grid-column: 5 !important; }
.site-customer .catalog-shell .catalog-products.is-list-view .product-price { grid-column: 6 !important; }
.site-customer .catalog-shell .catalog-products.is-list-view .product-avail { grid-column: 7 !important; }
.site-customer .catalog-shell .catalog-products.is-list-view .product-remarks { grid-column: 8 !important; }
.site-customer .catalog-shell .catalog-products.is-list-view .btn-cart {
    grid-column: 9 !important;
    padding: 0 8px !important;
    font-size: 0.76rem !important;
}

/* Product list visual polish */
.site-customer .catalog-shell .catalog-products.is-list-view .catalog-list-head {
    background: #fff !important;
    border-bottom: 1px solid #d7dee8 !important;
}

.site-customer .catalog-shell .catalog-products.is-list-view .market-product {
    background: #fff !important;
}

.site-customer .catalog-shell .catalog-products.is-list-view .market-product:nth-of-type(even) {
    background: #fbfdfd !important;
}

.site-customer .catalog-shell .catalog-products.is-list-view .market-product:hover {
    background: #f4fbf9 !important;
}

.site-customer .catalog-shell .catalog-products.is-list-view .product-media {
    margin-left: 0 !important;
}

.site-customer .catalog-shell .catalog-products.is-list-view .product-body h2 {
    padding-left: 0 !important;
}

.site-customer .catalog-shell .catalog-products.is-list-view .btn-cart {
    justify-self: end !important;
    width: 132px !important;
    max-width: 100% !important;
}

/* Product list true table alignment */
.site-customer .catalog-shell .catalog-products.is-list-view .catalog-list-head,
.site-customer .catalog-shell .catalog-products.is-list-view .market-product {
    grid-template-columns: 7% 25% 10% 12% 7% 10% 10% 10% 9% !important;
    align-items: center !important;
}

.site-customer .catalog-shell .catalog-products.is-list-view .market-product {
    height: 76px !important;
    min-height: 76px !important;
    max-height: 76px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.site-customer .catalog-shell .catalog-products.is-list-view .product-body,
.site-customer .catalog-shell .catalog-products.is-list-view .product-main,
.site-customer .catalog-shell .catalog-products.is-list-view .product-footer {
    display: contents !important;
}

.site-customer .catalog-shell .catalog-products.is-list-view .product-media {
    grid-column: 1 !important;
    align-self: center !important;
    justify-self: start !important;
    margin: 0 !important;
}

.site-customer .catalog-shell .catalog-products.is-list-view .product-body h2,
.site-customer .catalog-shell .catalog-products.is-list-view .sku,
.site-customer .catalog-shell .catalog-products.is-list-view .product-unit,
.site-customer .catalog-shell .catalog-products.is-list-view .product-size,
.site-customer .catalog-shell .catalog-products.is-list-view .product-price,
.site-customer .catalog-shell .catalog-products.is-list-view .product-avail,
.site-customer .catalog-shell .catalog-products.is-list-view .product-remarks {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    align-self: center !important;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 1.25 !important;
    overflow: visible !important;
    transform: none !important;
}

.site-customer .catalog-shell .catalog-products.is-list-view .product-body h2 { grid-column: 2 !important; }
.site-customer .catalog-shell .catalog-products.is-list-view .sku { grid-column: 3 !important; }
.site-customer .catalog-shell .catalog-products.is-list-view .product-unit { grid-column: 4 !important; }
.site-customer .catalog-shell .catalog-products.is-list-view .product-size { grid-column: 5 !important; }
.site-customer .catalog-shell .catalog-products.is-list-view .product-price { grid-column: 6 !important; }
.site-customer .catalog-shell .catalog-products.is-list-view .product-avail { grid-column: 7 !important; }
.site-customer .catalog-shell .catalog-products.is-list-view .product-remarks { grid-column: 8 !important; }

.site-customer .catalog-shell .catalog-products.is-list-view .btn-cart {
    grid-column: 9 !important;
    align-self: center !important;
    justify-self: end !important;
    transform: none !important;
}

/* Tire category page only (Number1CategoryProductPageBundle's tire_index.html.twig, which adds
   the .tire-size-first-list class): Size column moved immediately after Image, per Rabby's
   request to match number1_inventory's Tire Inventory column order — every other category page
   keeps the shared column order above untouched. Header cells have no explicit grid-column of
   their own (auto-placed in DOM order), so `order` re-sequences just the "Size" header button;
   row cells already use explicit grid-column overrides, so those are overridden directly. */
.site-customer .catalog-shell .catalog-products.tire-size-first-list.is-list-view .catalog-list-head,
.site-customer .catalog-shell .catalog-products.tire-size-first-list.is-list-view .market-product {
    grid-template-columns: 7% 7% 25% 10% 12% 10% 10% 10% 9% !important;
}

.site-customer .catalog-shell .catalog-products.tire-size-first-list.is-list-view .catalog-list-head > span:first-child {
    order: -2 !important;
}

.site-customer .catalog-shell .catalog-products.tire-size-first-list.is-list-view .catalog-list-head .catalog-list-sort[data-sort-field="size"] {
    order: -1 !important;
}

.site-customer .catalog-shell .catalog-products.tire-size-first-list.is-list-view .product-size { grid-column: 2 !important; }
.site-customer .catalog-shell .catalog-products.tire-size-first-list.is-list-view .product-body h2 { grid-column: 3 !important; }
.site-customer .catalog-shell .catalog-products.tire-size-first-list.is-list-view .sku { grid-column: 4 !important; }
.site-customer .catalog-shell .catalog-products.tire-size-first-list.is-list-view .product-unit { grid-column: 5 !important; }

/* Product list final center lock */
.site-customer .catalog-shell .catalog-products.is-list-view .market-product {
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    align-items: center !important;
}

.site-customer .catalog-shell .catalog-products.is-list-view .product-media {
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    align-self: center !important;
}

.site-customer .catalog-shell .catalog-products.is-list-view .product-body h2,
.site-customer .catalog-shell .catalog-products.is-list-view .sku,
.site-customer .catalog-shell .catalog-products.is-list-view .product-unit,
.site-customer .catalog-shell .catalog-products.is-list-view .product-size,
.site-customer .catalog-shell .catalog-products.is-list-view .product-price,
.site-customer .catalog-shell .catalog-products.is-list-view .product-avail,
.site-customer .catalog-shell .catalog-products.is-list-view .product-remarks {
    display: flex !important;
    align-items: center !important;
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
    line-height: 1.2 !important;
}

.site-customer .catalog-shell .catalog-products.is-list-view .btn-cart {
    align-self: center !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
}

/* The tire list-view above forces a fixed 9-column grid with !important at every width, so on a
   phone the columns crush to unreadable slivers. Below 760px, stack each row into a card instead:
   market-product becomes a flex column and every promoted field (name/sku/size/price/etc., which
   the display:contents chain hoists onto the row) drops its column placement and fixed height and
   flows vertically. Must match the specificity and use !important to beat the rules above; placed
   last in source so it wins at equal specificity. The head row is hidden (no room for it). #139 */
@media (max-width: 760px) {
    .site-customer .catalog-shell .catalog-products.is-list-view .catalog-list-head {
        display: none !important;
    }

    .site-customer .catalog-shell .catalog-products.is-list-view .market-product,
    .site-customer .catalog-shell .catalog-products.tire-size-first-list.is-list-view .market-product {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        grid-template-columns: none !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        padding: 12px 14px !important;
        gap: 3px !important;
    }

    .site-customer .catalog-shell .catalog-products.is-list-view .product-media {
        width: 64px !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        align-self: flex-start !important;
        margin: 0 0 4px !important;
    }

    .site-customer .catalog-shell .catalog-products.is-list-view .product-body h2,
    .site-customer .catalog-shell .catalog-products.is-list-view .sku,
    .site-customer .catalog-shell .catalog-products.is-list-view .product-unit,
    .site-customer .catalog-shell .catalog-products.is-list-view .product-size,
    .site-customer .catalog-shell .catalog-products.is-list-view .product-price,
    .site-customer .catalog-shell .catalog-products.is-list-view .product-avail,
    .site-customer .catalog-shell .catalog-products.is-list-view .product-remarks {
        display: block !important;
        grid-column: auto !important;
        order: 0 !important;
        width: auto !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        padding-right: 0 !important;
    }

    .site-customer .catalog-shell .catalog-products.is-list-view .btn-cart {
        grid-column: auto !important;
        align-self: stretch !important;
        justify-self: stretch !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 8px !important;
    }
}

/* Tire category list view (tire-size-first-list) on desktop: the Size column was 7% (~80px),
   but the size codes are long unbreakable digit strings (e.g. 2757018125122 ~110px) that
   overflowed their cell and collided with the Description beside them. Widen Size to 11%
   (taking it from Unit of Measure, which is short) and let the code wrap as a last resort so
   it can never spill into the next column. Matches the tire grid's specificity + !important and
   is placed after it; scoped ≥761px so the ≤760 stacked-card layout is untouched. #139 */
@media (min-width: 761px) {
    .site-customer .catalog-shell .catalog-products.tire-size-first-list.is-list-view .catalog-list-head,
    .site-customer .catalog-shell .catalog-products.tire-size-first-list.is-list-view .market-product {
        grid-template-columns: 7% 11% 25% 10% 8% 10% 10% 10% 9% !important;
    }

    .site-customer .catalog-shell .catalog-products.is-list-view .product-size {
        min-width: 0 !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
        padding-right: 8px !important;
    }
}

.form-card,
.company-form-card,
.company-form-grid,
.content-frame,
.app-shell,
.product-form-card {
  overflow: visible !important;
}

/* Checkout shipping method options */
.site-customer .checkout-shipping-method-card .checkout-card-body {
    padding: 12px 14px 14px;
}

.site-customer .checkout-shipping-options-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}

.site-customer .checkout-shipping-placeholder {
    color: #666;
    font-size: 0.82rem;
    margin: 0;
}

.site-customer .checkout-shipping-option {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px;
    padding: 10px 14px;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 400;
    transition: border-color 0.15s, background 0.15s;
    background: #fff;
    margin: 0;
}

.site-customer .checkout-shipping-option:hover {
    border-color: #93c5fd;
    background: #f8fbff;
}

.site-customer .checkout-shipping-option.is-selected,
.site-customer .checkout-shipping-option:has(input:checked) {
    border-color: #2563eb;
    background: #eff6ff;
}

.site-customer .checkout-shipping-option input[type="radio"] {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: #2563eb;
    cursor: pointer;
}

.site-customer .checkout-shipping-option input[type="radio"]:focus,
.site-customer .checkout-shipping-option input[type="radio"]:focus-visible {
    outline: none;
    box-shadow: none;
}

.site-customer .checkout-shipping-option__info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
}

.site-customer .checkout-shipping-option__info strong {
    font-weight: 600;
    color: #111;
    font-size: 0.82rem;
    line-height: 1.3;
}

.site-customer .checkout-shipping-option__days {
    color: #64748b;
    font-size: 0.75rem;
    line-height: 1.2;
}

.site-customer .checkout-shipping-option__price {
    font-weight: 700;
    color: #111;
    font-size: 0.85rem;
    white-space: nowrap;
    margin-left: auto;
}

/* Checkout payment method options — mirrors .checkout-shipping-option above */
.site-customer .checkout-payment-options-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}

.site-customer .checkout-payment-placeholder {
    color: #666;
    font-size: 0.82rem;
    margin: 0;
}

.site-customer .checkout-payment-option label {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px;
    padding: 10px 14px;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 400;
    transition: border-color 0.15s, background 0.15s;
    background: #fff;
    margin: 0;
}

.site-customer .checkout-payment-option label:hover {
    border-color: #93c5fd;
    background: #f8fbff;
}

.site-customer .checkout-payment-option label:has(input:checked) {
    border-color: #2563eb;
    background: #eff6ff;
}

.site-customer .checkout-payment-option input[type="radio"] {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: #2563eb;
    cursor: pointer;
}


/* Wheel category List View: rendered as a real <table> (see
   modules/Number1CategoryProductPageBundle/templates/_wheel_products.html.twig) instead of
   retrofitting the shared flexbox/CSS-grid product-card markup used by every other category's
   List View. A native table's header cells and body cells align themselves automatically via the
   browser's own table layout algorithm - no fighting the many pre-existing `!important` CSS-grid
   rules the shared `.market-product`/`.catalog-list-head`/`.product-body` classes carry (that
   fight is what earlier revisions of this comment block were about; removed along with the
   flexbox rules they no longer apply to, now that the template doesn't emit those classes for
   Wheel's List View at all). Deliberately does NOT reuse `.market-product`/`.catalog-list-head`/
   `.catalog-list-sort` on this table - those classes are what the shared client-side sort/filter
   JS (`cacheCatalogNodes()`/`render()` in app.js) keys off to re-parent product cards directly
   under `.catalog-products` on every sort/filter; a `<tr>` given those classes would get ripped
   out of its `<table>`/`<tbody>` the instant that JS ran. `.product-card` alone is kept on each
   row purely so the existing "reveal real price" toggle script (`toggle.closest('.product-card')`
   from `suggested_price_html()`) can still scope itself to the row - confirmed `.product-card`
   alone carries no `!important` display/grid rules, only cosmetic border/background ones. */
.site-customer .catalog-products.is-wheel-list-view.is-list-view {
    overflow-x: auto;
    display: block;
    padding: 0;
}

.site-customer .wheel-list-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.site-customer .wheel-list-table th,
.site-customer .wheel-list-table td {
    padding: 5px 8px;
    text-align: left;
    white-space: nowrap;
    vertical-align: middle;
}

.site-customer .wheel-list-table thead th {
    border-bottom: 1px solid #dfe3e8;
    background: #f8fafc;
    color: #6b7280;
    font-size: 0.76rem;
    font-weight: 800;
    text-align: left;
}

.site-customer .wheel-list-table tbody tr {
    border-bottom: 1px solid #e8edf3;
}

.site-customer .wheel-list-table tbody tr:nth-child(odd) {
    background: #fcfdff;
}

.site-customer .wheel-list-table tbody tr:hover {
    background: #f7fcfb;
}

.site-customer .wheel-list-table .wheel-list-image-cell {
    width: 34px;
}

.site-customer .wheel-list-table .product-media {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin: 0 auto;
    border-radius: 4px;
    overflow: hidden;
    background: transparent;
}

.site-customer .wheel-list-table .product-media img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.site-customer .wheel-list-table .wheel-list-desc-cell {
    min-width: 200px;
    max-width: 300px;
    text-align: left;
    white-space: normal;
}

.site-customer .wheel-list-table .wheel-list-desc-cell h2 {
    margin: 0;
    font-size: 0.76rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}

.site-customer .wheel-list-table .wheel-list-desc-cell .product-title-link {
    font-weight: 700;
    text-decoration: underline;
}

.site-customer .wheel-list-table .wheel-list-sku-cell {
    min-width: 90px;
}

.site-customer .wheel-list-table .wheel-list-cell {
    min-width: 68px;
}

.site-customer .wheel-list-table .wheel-list-price-cell {
    min-width: 120px;
}

.site-customer .wheel-list-table .wheel-list-price-cell .product-price {
    color: var(--brand-dark);
    font-weight: 900;
}

/* The shared suggested_price_html() extension always includes its own "Price Suggested:" label
   (core, shared with every other category's List/Grid View - see src/Twig/SuggestedPriceExtension.php),
   but this table's column header already says "Price Suggested", so the per-row label would be
   redundant. Hides only the <strong> label; the "$X.XX" text that follows it is a separate text
   node in the same <span>, unaffected by hiding its sibling element. */
.site-customer .wheel-list-table .wheel-list-price-cell .customer-product-price-suggested strong {
    display: none;
}

.site-customer .wheel-list-table .wheel-list-stock-cell .product-avail {
    font-weight: 900;
}

.site-customer .wheel-list-table .wheel-list-stock-cell .avail-in-stock {
    color: #0369a1;
}

.site-customer .wheel-list-table .wheel-list-stock-cell .avail-out-stock,
.site-customer .wheel-list-table .wheel-list-stock-cell .avail-company,
.site-customer .wheel-list-table .wheel-list-stock-cell .avail-low {
    color: #ef3b2d;
}

.site-customer .wheel-list-table .wheel-list-ordered-cell {
    min-width: 150px;
}

.site-customer .wheel-list-table .btn-cart-form {
    display: inline-flex;
}

/* Uploaded header logo — any aspect ratio, either header (customer top bar, admin sidebar incl.
   collapsed). The default .brand-mark is a fixed square tile, sized back when it held initials; for a
   real logo we drop the tile and let the image scale to fit its slot, bounded by whichever edge is tighter
   (object-fit: contain) — a wide, tall or square logo all fit with no crop and no overflow. The one
   fixed value is the slot height; width comes from the layout. Selector is .brand-mark.brand-mark-logo
   (0,2,0), placed last, to beat .site-customer .customer-brand-mark / .site-admin .brand-mark. */
.brand-mark.brand-mark-logo {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: auto;
    min-width: 0;
    height: 46px;
    background: none;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
}

.brand-mark.brand-mark-logo img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: left center;
}

/* The admin brand sits in a fixed-width sidebar that narrows when collapsed, so the logo fills the
   sidebar width and rides it down on collapse. The customer header is a horizontal row, so there the
   logo stays width:auto and is bound by the slot height instead. min-width:0 on the brand is what
   lets it (a flex item) actually shrink to the collapsed sidebar rather than staying at the logo's
   width and overflowing. */
.site-admin .brand {
    min-width: 0;
    overflow: hidden;
}

.site-admin .brand-mark.brand-mark-logo {
    width: 100%;
}

/* Product Detail "Choose Columns" chooser — rendered in-page and revealed by JS (issue #120.5). */
.column-chooser {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 60;
    width: min(380px, 92vw);
    max-height: 80vh;
    overflow: auto;
    padding: 16px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 12px 44px rgba(0, 0, 0, 0.18);
}

.column-chooser[hidden] {
    display: none;
}

.column-chooser-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.column-chooser-close {
    border: 0;
    background: none;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    color: var(--muted);
}

.column-chooser-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 14px;
    margin-bottom: 8px;
}

.column-chooser-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
}

.column-chooser-all {
    margin: 8px 0;
    font-weight: 600;
}

.column-chooser-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 6px;
}