/* ── 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;
--teal: #0f766e;
--teal-mid: #0d9488;
--teal-dark: #115e59;
--teal-bg: #f0fdfa;
--teal-light: #ccfbf1;
--blue: #1d4ed8;
--amber: #f1b334;
--red: #b42318;
--shadow-xs: 0 1px 2px rgba(17, 24, 39, 0.05);
--shadow-sm: 0 1px 3px rgba(17, 24, 39, 0.06), 0 1px 2px rgba(17, 24, 39, 0.04);
--shadow: 0 4px 14px rgba(17, 24, 39, 0.07), 0 1px 4px rgba(17, 24, 39, 0.04);
--shadow-md: 0 10px 28px rgba(17, 24, 39, 0.09);
--shadow-lg: 0 20px 50px rgba(17, 24, 39, 0.12), 0 4px 16px rgba(17, 24, 39, 0.06);
--shadow-xl: 0 32px 80px rgba(17, 24, 39, 0.16);
--radius-sm: 8px;
--radius: 12px;
--radius-md: 16px;
--radius-lg: 20px;
--radius-xl: 28px;
--t: 160ms ease;
--t-md: 240ms ease;
}
/* ── 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(--teal);
font-weight: 700;
font-size: 0.875rem;
transition: top 180ms ease;
}
.skip-link:focus {
top: 0;
}
:focus-visible {
outline: 2px solid var(--teal);
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: 0 4px 20px rgba(17, 24, 39, 0.07);
}
/* ── 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;
}
.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);
}
.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(--teal) !important;
border-color: var(--teal) !important;
}
.button.primary:hover,
.nav-cta:hover {
background: var(--teal-dark) !important;
border-color: var(--teal-dark) !important;
transform: translateY(-1px);
box-shadow: 0 4px 14px rgba(15, 118, 110, 0.32);
}
.button.outline {
border-color: var(--line);
color: var(--ink-body);
}
.button.outline:hover {
border-color: var(--teal-light);
color: var(--teal);
background: var(--teal-bg);
transform: translateY(-1px);
box-shadow: var(--shadow-sm);
}
.button.danger {
background: #b91c1c !important;
color: white !important;
}
.button.danger:hover {
background: #991b1b !important;
box-shadow: 0 4px 12px rgba(185, 28, 28, 0.25) !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: 0 10px 24px rgba(185, 28, 28, 0.12);
}
.button.info {
color: var(--ink);
background: #f1f5f9;
border-color: #e2e8f0;
padding: 0 22px;
box-shadow: var(--shadow-xs);
}
.button.info:hover {
color: var(--teal-dark);
background: #e2e8f0;
border-color: #cbd5e1;
transform: translateY(-1px);
box-shadow: var(--shadow-sm);
}
.button.back-button {
min-width: 92px;
color: var(--ink);
border-color: #d8dee8;
background: #fff;
box-shadow: var(--shadow-xs);
}
.button.back-button::before {
content: '\2039';
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border-radius: 999px;
color: var(--teal-dark);
background: var(--teal-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(--teal-dark);
border-color: var(--teal-light);
background: var(--teal-bg);
transform: translateY(-1px);
box-shadow: var(--shadow-sm);
}
.button.back-button:hover::before {
color: #fff;
background: var(--teal);
}
.nav-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: 28px 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(--teal-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(--teal-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 .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-top: 18px;
padding-bottom: 18px;
}
.site-admin .topbar {
background: rgba(15, 23, 42, 0.98);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 0;
}
.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;
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;
}
.user-menu-toggle {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 5px 12px 5px 5px;
background: var(--teal-bg);
border: 1.5px solid var(--teal-light);
border-radius: 999px;
color: var(--teal-dark);
cursor: pointer;
font-size: 0.82rem;
font-weight: 700;
transition: background var(--t), border-color var(--t);
}
.user-menu-toggle:hover {
background: var(--teal-light);
border-color: var(--teal);
}
.user-menu-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--teal);
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: #2dd4bf;
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: var(--shadow-md);
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(--teal-bg);
color: var(--teal-dark);
}
.user-menu-item-icon {
font-size: 0.7rem;
color: var(--muted);
}
/* ── Admin board (dashboard banner) ───────────────────────────────────────── */
.admin-board {
overflow: hidden;
border-radius: var(--radius-xl);
color: #fff;
background:
linear-gradient(135deg, rgba(15, 23, 42, 0.97) 0%, rgba(17, 24, 39, 0.92) 55%, rgba(13, 148, 136, 0.14) 100%),
repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 40px);
box-shadow: var(--shadow-lg);
}
.admin-titlebar {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 24px;
align-items: end;
padding: clamp(28px, 5vw, 56px);
}
.admin-titlebar h1 {
color: #fff;
}
.admin-titlebar .lead {
color: #94a3b8;
}
.admin-actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
justify-content: flex-end;
}
/* Buttons on dark admin board */
.admin-board .button:not(.primary) {
color: #e2e8f0;
border-color: rgba(255, 255, 255, 0.28);
background: rgba(255, 255, 255, 0.09);
}
.admin-board .button:not(.primary):hover {
color: #fff;
background: rgba(255, 255, 255, 0.16);
border-color: rgba(255, 255, 255, 0.45);
transform: translateY(-1px);
}
.kpi-strip {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.kpi-tile {
padding: 24px 28px;
border-right: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.04);
transition: background var(--t);
}
.kpi-tile:last-child {
border-right: 0;
}
.kpi-tile:hover {
background: rgba(255, 255, 255, 0.07);
}
.import-result-notes {
margin: 0;
padding-left: 18px;
}
.import-result-notes li + li {
margin-top: 4px;
}
.kpi-tile span {
display: block;
color: #86efac;
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: #fff;
font-size: 1.75rem;
font-weight: 800;
line-height: 1;
letter-spacing: -0.04em;
}
.kpi-tile small {
color: #94a3b8;
font-size: 0.82rem;
line-height: 1.5;
}
/* ── Module grid ───────────────────────────────────────────────────────────── */
.module-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.module-card {
display: grid;
grid-template-columns: 52px minmax(0, 1fr) auto;
gap: 16px;
align-items: center;
min-height: 128px;
padding: 22px 24px;
border: 1.5px solid var(--line);
border-radius: var(--radius-md);
background: #fff;
box-shadow: var(--shadow-sm);
transition: border-color var(--t), box-shadow var(--t-md), transform var(--t-md);
}
.module-card:hover {
border-color: var(--teal-light);
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
.module-number {
display: grid;
place-items: center;
width: 52px;
height: 52px;
border-radius: 14px;
color: var(--teal);
background: var(--teal-bg);
font-size: 0.95rem;
font-weight: 900;
letter-spacing: -0.03em;
flex-shrink: 0;
}
.module-card h2 {
margin: 0 0 5px;
font-size: 1rem;
}
.module-card p {
margin: 0;
font-size: 0.85rem;
}
.module-arrow {
color: var(--teal);
font-weight: 800;
font-size: 1.15rem;
}
/* ── Customer marketplace layout ────────────────────────────────────────────── */
.site-customer {
background: var(--cream);
}
.site-customer .brand-mark {
background: var(--teal);
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: 700;
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: var(--shadow-xl);
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(--teal-bg);
color: var(--teal-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: var(--shadow-xl);
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: var(--shadow-xs);
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(--teal-light);
background: var(--teal-bg);
color: var(--teal-dark);
transform: translateY(-1px);
box-shadow: var(--shadow-sm);
}
.site-customer .customer-user-menu-icon {
display: grid;
place-items: center;
width: 28px;
height: 28px;
border-radius: 999px;
background: var(--teal);
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: var(--shadow-xl);
}
.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,");
mask-image: url("data:image/svg+xml;utf8,");
}
.site-customer .customer-user-menu-dropdown .user-menu-link--login::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.site-customer .customer-user-menu-dropdown .user-menu-link--register::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.site-customer .customer-user-menu--guest .user-menu-link--login {
background: #eefdf9 !important;
color: var(--teal-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,");
mask-image: url("data:image/svg+xml;utf8,");
}
.site-customer .customer-user-menu-dropdown .user-menu-link--company::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.site-customer .customer-user-menu-dropdown .user-menu-link--logout::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.site-customer .customer-user-menu-dropdown a:hover {
background: var(--teal-bg) !important;
color: var(--teal-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: var(--shadow-lg);
border: 1.5px solid var(--line);
}
.market-copy {
padding: clamp(32px, 6vw, 72px);
background:
radial-gradient(circle at 88% 14%, rgba(15, 118, 110, 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(15, 118, 110, 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%, #0f766e 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: #134e4a;
background: var(--teal-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: var(--shadow-sm);
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(--teal-light);
box-shadow: var(--shadow-md);
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: var(--shadow-sm);
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: var(--shadow-sm);
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: var(--shadow-sm);
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(--teal-bg);
border-color: var(--teal-light);
}
.filter-link span {
font-weight: 600;
color: var(--ink-body);
font-size: 0.9rem;
}
.filter-link.active span {
color: var(--teal-dark);
}
.filter-link strong {
color: var(--teal);
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: var(--shadow-sm);
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: var(--shadow-md);
border-color: var(--teal-light);
}
.product-media {
display: grid;
place-items: center;
min-height: 160px;
color: rgba(255, 255, 255, 0.92);
background: linear-gradient(140deg, #0f766e 0%, #134e4a 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(--teal-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(--teal);
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(--teal-dark);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(15, 118, 110, 0.3);
}
.btn-cart:active {
transform: scale(0.96);
}
.btn-cart.is-added {
background: #065f46;
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(--teal);
box-shadow: 0 3px 10px rgba(15, 118, 110, 0.18);
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: 0 6px 16px rgba(15, 118, 110, 0.18);
}
.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: var(--shadow-xs);
transition: border-color var(--t), box-shadow var(--t), transform var(--t), background var(--t);
}
.cart-qty-btn:hover {
border-color: rgba(15, 118, 110, 0.35);
box-shadow: 0 0 0 3px rgba(15, 118, 110, 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-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: var(--shadow-xs);
}
.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(--teal-light);
background: linear-gradient(180deg, rgba(15, 118, 110, 0.06), rgba(255, 255, 255, 0.0) 42%), #fff;
box-shadow: var(--shadow-md);
}
.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(15, 118, 110, 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(--teal);
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(--teal-bg);
border: 1px solid rgba(15, 118, 110, 0.18);
box-shadow: var(--shadow-xs);
position: relative;
}
.checkout-item::before {
content: '';
position: absolute;
left: 14px;
top: 10px;
bottom: 10px;
width: 3px;
border-radius: 999px;
background: var(--teal);
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(--teal-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: #065f46;
}
.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: var(--shadow-sm);
}
/* 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: var(--shadow-sm);
}
.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(--teal-dark);
background: var(--teal-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: #065f46;
background: #d1fae5;
}
.badge.info {
color: var(--blue);
background: #eff6ff;
}
/* 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(16, 185, 129, 0.35);
background: #ecfdf5;
color: #065f46;
}
.alert.warn {
border-color: rgba(245, 158, 11, 0.35);
background: #fffbeb;
color: #92400e;
}
/* ── Tables ────────────────────────────────────────────────────────────────── */
.table-card {
position: relative;
overflow: hidden;
border: 1.5px solid var(--line);
border-radius: var(--radius-md);
background: #fff;
box-shadow: var(--shadow-sm);
}
.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(--teal);
box-shadow: 0 0 0 3px rgba(15, 118, 110, 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: 2px;
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;
}
/* 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;
}
tbody tr {
transition: background var(--t);
}
tbody tr:hover,
tbody tr.is-row-focus {
background: var(--teal-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: #0f766e !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: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
}
.table-action:hover {
background: #115e59 !important;
transform: translateY(-1px) !important;
box-shadow: 0 4px 12px rgba(15, 118, 110, 0.25) !important;
color: #fff !important;
}
.table-action.danger {
background: #b91c1c !important;
}
.table-action.danger:hover {
background: #991b1b !important;
box-shadow: 0 4px 12px rgba(185, 28, 28, 0.25) !important;
}
.table-action.info {
background: #2563eb !important;
}
.table-action.info:hover {
background: #1e40af !important;
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25) !important;
}
/* 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: #0f766e;
background: rgba(15, 118, 110, 0.1);
transform: translateY(-1px);
}
.drag-handle:active {
cursor: grabbing;
}
.js-sortable-row.is-dragging {
opacity: 0.65;
outline: 2px dashed rgba(15, 118, 110, 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(--teal);
font-weight: 700;
}
.user-manager-table td a:hover,
.order-list-table td a:hover {
color: var(--teal-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(--teal);
}
.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;
}
.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(--teal-dark);
}
.detail-tabs a.is-active {
border-bottom-color: var(--teal);
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(--teal);
box-shadow: 0 0 0 3px rgba(15, 118, 110, 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;
}
/* ── 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 #cfe7d6;
border-radius: 999px;
color: #166534;
background: #f0fdf4;
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: #16a34a;
color: #16a34a;
}
.site-customer .customer-order-reorder:hover {
background: #f0fdf4;
}
.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: 0 4px 18px rgba(15, 23, 42, 0.05);
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: #b9d9d3 !important;
border-radius: 7px;
background: #fafffe !important;
color: var(--teal-dark) !important;
font-size: 0.82rem;
font-weight: 800;
box-shadow: none;
}
.site-customer .customer-view-order-line-reorder:hover {
background: #f0fdf4 !important;
color: #15803d !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-summary > div {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 8px 0;
border-bottom: 1px solid #e8edf2;
color: #0f172a;
font-size: 0.86rem;
}
.site-customer .customer-view-order-summary > div span {
font-weight: 700;
}
.site-customer .customer-view-order-summary > div strong {
font-weight: 800;
}
.site-customer .customer-view-order-summary > div.is-total {
font-size: 0.92rem;
border-bottom: 0;
}
.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-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: 0 28px 60px rgba(15, 23, 42, 0.28);
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: 0 24px 56px rgba(15, 23, 42, 0.24);
}
.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: 36px;
border-radius: 6px;
}
.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: 0 24px 56px rgba(15, 23, 42, 0.24);
}
.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;
}
}
@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 #dbe7e2;
border-radius: 24px;
background:
radial-gradient(circle at top left, rgba(34, 197, 94, 0.16), transparent 32%),
linear-gradient(135deg, #f6fbf8 0%, #ffffff 45%, #eef7f2 100%);
box-shadow: 0 18px 44px rgba(15, 23, 42, 0.06);
}
.site-customer .customer-faq-kicker {
display: inline-flex;
align-items: center;
margin-bottom: 12px;
padding: 6px 10px;
border-radius: 999px;
color: #0f766e;
background: rgba(15, 118, 110, 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(15, 118, 110, 0.14);
border-radius: 20px;
background: rgba(255, 255, 255, 0.9);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.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: 0 12px 28px rgba(15, 23, 42, 0.04);
}
.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, #0f766e, #16a34a);
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, #15803d, #16a34a);
box-shadow: 0 8px 16px rgba(22, 163, 74, 0.2);
}
.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;
}
.site-customer .customer-contact-form .req {
color: #16a34a;
font-weight: 900;
}
.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: #0f766e !important;
border-color: #0f766e !important;
color: #fff !important;
}
.site-customer .ccu-edit-btn:hover {
background: #115e59 !important;
border-color: #115e59 !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;
}
.site-customer .customer-company-profile-form {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.site-customer .customer-company-profile-form label {
font-size: 0.78rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #475569;
}
.site-customer .customer-company-profile-form input.form-control {
height: 42px;
border-radius: 8px;
}
.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: 0 10px 28px rgba(15, 118, 110, 0.06);
}
.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-shipping-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
align-items: start;
}
.site-customer .customer-company-add-address {
display: grid;
place-items: center;
gap: 12px;
min-height: 190px;
border-radius: var(--radius-md);
border: 1.5px dashed var(--line);
background: #fff;
color: var(--ink);
transition: border-color var(--t), background var(--t), transform var(--t), box-shadow var(--t);
}
.site-customer .customer-company-add-address:hover {
border-color: var(--teal);
background: var(--teal-bg);
transform: translateY(-1px);
box-shadow: var(--shadow-sm);
}
.site-customer .customer-company-add-plus {
display: grid;
place-items: center;
width: 54px;
height: 54px;
border-radius: 16px;
background: var(--teal-bg);
color: var(--teal);
font-size: 2rem;
font-weight: 900;
line-height: 1;
}
.site-customer .customer-company-add-address strong {
font-size: 0.86rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.site-customer .customer-company-address-card {
padding: 18px 20px;
}
.site-customer .customer-company-address-actions {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
margin-top: 12px;
padding-top: 10px;
border-top: 1px solid var(--line-light);
color: var(--muted);
font-weight: 800;
}
.site-customer .customer-company-address-action {
color: #16a34a;
font-weight: 900;
background: transparent;
border: 0;
padding: 0;
cursor: pointer;
}
.site-customer .customer-company-address-action:hover {
text-decoration: underline;
}
.site-customer .customer-company-address-action--danger {
color: #dc2626;
}
.site-customer .customer-company-address-sep {
color: var(--line);
font-weight: 900;
}
.site-customer .customer-company-address-remove-form {
margin: 0;
justify-self: end;
}
/* 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; }
.site-customer .customer-company-shipping-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
.site-customer .customer-company-profile-form { grid-template-columns: 1fr; }
.site-customer .customer-company-shipping-grid { grid-template-columns: 1fr; }
}
/* ── 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(--teal) !important;
border-color: var(--teal) !important;
color: #fff !important;
}
.site-customer .ccu-create-btn:hover {
background: var(--teal-dark) !important;
border-color: var(--teal-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: 0 1px 3px rgba(0, 0, 0, 0.02);
}
.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: 700;
color: #334155;
display: block;
}
.detail-row strong {
flex: 1;
color: #475569;
font-weight: 500;
}
.detail-row .badge {
align-self: flex-start;
}
.btn-pdf {
background: var(--teal);
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: 0 4px 20px rgba(0, 0, 0, 0.12);
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(--teal-bg);
color: var(--teal-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(--teal);
outline: none;
border: 0;
}
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(--teal);
box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
}
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;
gap: 10px;
}
.check-row input {
width: auto;
min-height: auto;
}
/* ── Notifications ────────────────────────────────────────────────────────── */
.admin-notification {
position: fixed;
top: 25px;
right: 25px;
z-index: 2000;
padding: 14px 28px;
border-radius: 12px;
background: #fff;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
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(--teal);
}
.admin-notification.is-visible {
transform: translateX(0);
}
.admin-notification.success {
border-left-color: #10b981;
color: #064e3b;
}
.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: 0 20px 60px rgba(0, 0, 0, 0.15);
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(--teal-bg);
color: var(--teal-dark);
border-color: var(--teal-light);
}
.user-status-badge-button {
border: 0;
cursor: pointer;
font: inherit;
text-align: center;
}
.user-status-badge-button:focus-visible {
outline: 2px solid var(--teal);
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;
}
/* ── 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: var(--shadow-lg);
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(15, 118, 110, 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%, #0f766e 100%);
}
.auth-visual h1,
.auth-visual .eyebrow {
color: #fff;
}
.auth-visual p {
color: rgba(255, 255, 255, 0.72);
}
.auth-visual .eyebrow {
color: var(--teal-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: var(--shadow-lg);
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(--teal-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: var(--shadow-md);
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(--teal);
}
.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 {
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;
}
/* ── 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;
border: 1.5px solid var(--line);
border-radius: var(--radius-md);
background: #fff;
box-shadow: var(--shadow-sm);
}
.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: 34px;
padding: 0 14px;
font-size: 0.82rem;
border: 1.5px solid var(--line);
color: var(--ink-body);
background: #fff;
}
.company-action-links .button:hover {
border-color: var(--teal);
color: var(--teal-dark);
background: var(--teal-bg);
}
.company-action-links .button.is-current {
border-color: var(--teal);
color: var(--teal-dark);
background: var(--teal-bg);
font-weight: 700;
}
.mini-action {
display: inline-grid;
place-items: center;
width: 30px;
height: 30px;
border: 1.5px solid var(--teal);
border-radius: 999px;
color: #FFF;
background: var(--teal);
cursor: pointer;
box-shadow: var(--shadow-xs);
transition: background var(--t), border-color var(--t), transform var(--t), box-shadow var(--t);
}
.mini-action:hover {
border-color: var(--teal-dark);
background: var(--teal-dark);
transform: translateY(-1px);
box-shadow: var(--shadow-sm);
}
.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;
}
.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(--teal-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(--teal-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;
}
.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: 42px;
}
.user-form-card .company-email-fieldset {
margin: 2px 0 4px;
background: #fff;
}
/* Select2 theme — matches project form style */
.select2-container .select2-selection--single {
height: 38px;
border: 1.5px solid #d1d5db;
border-radius: 8px;
display: flex;
align-items: center;
}
.select2-container .select2-selection--multiple {
min-height: 38px;
border: 1.5px solid #d1d5db;
border-radius: 8px;
padding: 3px 7px;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
cursor: text;
}
.select2-container .select2-selection--multiple .select2-search__field {
margin-top: 0;
font-family: inherit;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
background: #0f766e;
border: 1px solid rgba(15, 118, 110, 0.25);
color: #fff;
border-radius: 7px;
padding: 2px 8px;
font-size: 0.85rem;
font-weight: 750;
margin-top: 0;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
border: none;
color: rgba(255, 255, 255, 0.9);
margin-right: 6px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
color: #fff;
}
.select2-container .select2-selection--single .select2-selection__rendered {
padding-left: 13px;
padding-right: 32px;
color: #111827;
font-size: 0.9rem;
font-family: inherit;
line-height: 42px;
}
.select2-container .select2-selection--single .select2-selection__arrow {
height: 42px;
top: 0;
right: 4px;
width: 30px;
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: center;
background-size: 14px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
display: none;
}
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--single {
border-color: #0f766e;
box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
outline: none;
}
.select2-container--default.select2-container--open .select2-selection--multiple,
.select2-container--default.select2-container--focus .select2-selection--multiple {
border-color: #0f766e;
box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
outline: none;
}
.select2-container--default .select2-selection__clear {
cursor: pointer;
}
.select2-container--default .select2-selection--single:hover:not(:focus) {
border-color: #9ca3af;
}
.select2-dropdown {
border: 1.5px solid #0f766e;
border-radius: 8px;
font-size: 0.9rem;
font-family: inherit;
box-shadow: 0 4px 14px rgba(17, 24, 39, 0.1);
overflow: hidden;
}
.select2-search--dropdown {
padding: 8px;
}
.select2-search--dropdown .select2-search__field {
border: 1.5px solid #d1d5db;
border-radius: 6px;
padding: 6px 10px;
font-size: 0.85rem;
font-family: inherit;
outline: none;
}
.select2-search--dropdown .select2-search__field:focus {
border-color: #0f766e;
}
.select2-results__option {
padding: 9px 13px;
color: #111827;
font-size: 0.88rem;
cursor: pointer;
position: relative;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
background-color: #0f766e;
color: #fff;
}
.select2-container--default .select2-results__option[aria-selected=true] {
background-color: #f0fdfa;
color: #115e59;
font-weight: 700;
}
.select2-container--default .select2-results__option[aria-selected=true]::after {
content: '✓';
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
color: #0f766e;
font-weight: 900;
opacity: 0.9;
}
.select2-container--default .select2-results__option--highlighted[aria-selected=true]::after {
color: #fff;
opacity: 0.95;
}
.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(--teal);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.2s, transform 0.1s;
}
.row-action-toggle:hover {
background: var(--teal-dark);
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: var(--shadow-lg);
}
.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(--teal-dark);
background: var(--teal-bg);
}
.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;
}
.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(--teal-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(--teal);
box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.1);
}
.view-toggle.active {
color: #fff;
background: var(--black);
border-color: var(--black);
}
.filter-link.active {
color: var(--teal-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(--teal-light);
background: var(--teal-bg);
}
.page-link.active {
color: #fff;
background: var(--teal);
border-color: var(--teal);
}
.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: var(--shadow-lg);
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(--teal);
}
.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: var(--shadow-xl);
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) {
.site-admin .app-shell {
display: grid;
grid-template-columns: 268px minmax(0, 1fr);
min-height: 100vh;
}
.site-admin .topbar {
position: sticky;
top: 0;
align-self: start;
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
gap: 4px;
min-height: 100vh;
padding: 22px 14px;
border-right: 1px solid rgba(255, 255, 255, 0.07);
background: linear-gradient(180deg, #0f172a 0%, #111827 60%, #0d1420 100%);
box-shadow: 2px 0 24px rgba(0, 0, 0, 0.2);
}
.site-admin .brand {
justify-content: center;
align-items: center;
padding: 6px 10px 20px;
margin-bottom: 8px;
border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
.site-admin .brand-mark {
width: 44px;
height: 44px;
border-radius: 12px;
}
.site-admin .nav-toggle {
display: none;
}
.site-admin .nav {
display: flex;
flex-direction: column;
align-items: stretch;
width: 100%;
gap: 8px;
}
.site-admin .nav a {
justify-content: flex-start;
gap: 14px;
min-height: 46px;
padding: 0 14px;
border-radius: 10px;
color: #94a3b8;
background: transparent;
border: 1.5px solid transparent;
font-size: 0.875rem;
font-weight: 600;
}
.site-admin .nav a .nav-icon {
display: grid;
place-items: center;
width: 28px;
height: 28px;
margin-right: 14px;
border-radius: 8px;
color: #0f766e;
background: rgba(240, 253, 250, 0.96);
flex-shrink: 0;
transition: all var(--t);
}
.site-admin .nav a:hover {
color: #e2e8f0;
background: rgba(255, 255, 255, 0.07);
}
.site-admin .nav a.is-current {
color: #fff;
background: rgba(15, 118, 110, 0.82);
border-color: rgba(15, 118, 110, 0.45);
}
.site-admin .nav a.is-current .nav-icon {
color: var(--teal);
background: var(--teal-light);
}
.site-admin .content-frame {
width: calc(100% - 48px);
max-width: none;
margin: 0 24px;
padding: 0 0 80px;
}
.admin-content-header {
display: flex;
align-items: center;
justify-content: flex-end;
margin: 0 -24px 28px;
padding: 12px 24px;
border-bottom: 1px solid var(--line);
position: sticky;
top: 0;
z-index: 40;
background: var(--paper);
}
.site-admin .site-footer {
grid-column: 2;
margin: 0;
padding: 20px 28px;
justify-content: center;
text-align: center;
}
}
/* ══════════════════════════════════════════════════════════════════════════════
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;
}
.module-grid {
grid-template-columns: 1fr;
}
/* Admin mobile nav */
.site-admin .topbar {
background: #111827;
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,
.module-grid,
.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-card {
grid-template-columns: 52px 1fr;
gap: 14px;
min-height: 0;
padding: 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: var(--shadow-lg);
}
.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(--teal-bg);
border-top-color: var(--teal);
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: #0f766e;
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: var(--shadow-sm);
}
.page-btn.is-active {
background: #0f766e;
border-color: #0f766e;
color: #fff;
}
.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);
}
.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);
}
.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(15, 118, 110, 0.14);
outline-offset: 1px;
border-color: var(--teal);
}
.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: var(--shadow-sm);
}
.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 #84efd8;
background: var(--teal-bg);
}
.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"],
.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: normal;
overflow: hidden;
text-overflow: clip;
overflow-wrap: anywhere;
}
.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(--teal-dark);
background: var(--teal-bg);
border-right: 1px solid #d9f7ef;
border-bottom: 1px solid #c7f0e5;
font-size: 0.68rem;
font-weight: 900;
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: 800;
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: #99f6e4;
background: var(--teal-bg);
color: var(--teal-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(--teal-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-x: hidden;
overflow-y: visible;
padding-bottom: 0;
}
.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 {
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: 6px;
}
.site-admin .nav-group-title {
display: inline-flex;
align-items: center;
gap: 14px;
min-height: 46px;
padding: 0 14px;
border-radius: 12px;
color: #94a3b8;
font-size: 0.75rem;
font-weight: 900;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.site-admin .nav-group-title .nav-icon {
display: grid;
place-items: center;
width: 28px;
height: 28px;
flex: 0 0 28px;
margin-right: 12px;
border-radius: 8px;
color: #0f766e;
background: rgba(240, 253, 250, 0.96);
transition: all 0.2s ease;
}
.site-admin .nav a.nav-sub {
min-height: 36px;
margin-left: 42px;
padding-left: 16px;
border-left: 1px solid rgba(148, 163, 184, 0.24);
font-size: 0.84rem;
}
.site-admin .nav a.nav-sub::before {
content: '';
width: 6px;
height: 6px;
margin-right: 8px;
border-radius: 999px;
background: currentColor;
opacity: 0.75;
}
.site-admin .nav a.nav-sub.is-current {
border-left-color: rgba(45, 212, 191, 0.9);
}
/* 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;
}
.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;
}
/* 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(15, 118, 110, 0.16);
outline-offset: 1px;
border-color: var(--teal);
}
.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(--teal-bg);
border-color: var(--teal-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(--teal-dark);
background: #ecfdf8;
border-bottom: 1px solid #bdeee4;
font-size: 0.78rem;
font-weight: 900;
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: 900;
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(--teal-bg);
}
.wide-price-table .product-name-cell {
color: var(--ink);
font-weight: 800;
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;
}
.wide-price-table .price-type {
display: inline-flex;
align-items: center;
min-height: 26px;
padding: 4px 9px;
border-radius: 999px;
color: var(--teal-dark);
background: var(--teal-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: 30px;
border-bottom: 1px solid var(--line);
background: #f9fafb;
}
.order-filter-fields {
display: flex;
align-items: flex-end;
gap: 14px;
flex-wrap: wrap;
}
.order-filter-field {
display: flex;
flex-direction: column;
gap: 5px;
flex: 1 1 170px;
min-width: 140px;
}
.order-filter-field > span {
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--muted);
}
.order-filter-field input {
width: 100%;
min-height: 38px;
padding: 7px 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 rgba(15, 118, 110, 0.16);
outline-offset: 1px;
border-color: var(--teal);
}
.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 rgba(15, 118, 110, 0.16);
outline-offset: 1px;
border-color: var(--teal);
}
.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: 18px;
overflow-x: auto;
padding-bottom: 14px;
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: 36px;
padding: 0 14px;
border: 1.5px solid transparent;
border-radius: 999px;
color: #1e3a8a;
background: #f8fafc;
font-size: 0.84rem;
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(--teal-dark);
border-color: var(--teal);
background: var(--teal-bg);
}
.order-admin-grid .wide-table-wrap {
border-top: 1px solid var(--line-light);
overflow-x: hidden;
box-sizing: border-box;
}
.order-list-table {
width: 100%;
min-width: 0;
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: keep grid usable without horizontal scrolling by hiding low-priority columns on narrower screens. */
@media (max-width: 1400px) {
.order-admin-grid .wide-table-wrap {
overflow-x: hidden;
}
/* Hide Source + Woo columns */
.order-list-table th:nth-child(12),
.order-list-table td:nth-child(12),
.order-list-table th:nth-child(13),
.order-list-table td:nth-child(13),
.order-list-table th:nth-child(14),
.order-list-table td:nth-child(14) {
display: none;
}
/* Filter row cells must also hide */
.order-list-table thead .filter-row th:nth-child(12),
.order-list-table thead .filter-row th:nth-child(13),
.order-list-table thead .filter-row th:nth-child(14) {
display: none;
}
}
@media (max-width: 1180px) {
/* Further reduce: hide Shipping Company column */
.order-list-table th:nth-child(3),
.order-list-table td:nth-child(3),
.order-list-table thead .filter-row th:nth-child(3) {
display: none;
}
/* Tighten typography a bit more */
.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;
}
.order-list-table tbody tr:nth-child(even) td {
background: #f6f7f9;
}
.order-list-table tbody tr:hover td {
background: var(--teal-bg);
}
.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;
}
.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: #1d4ed8;
font-weight: 800;
}
.link-strong:hover {
color: var(--teal-dark);
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: #0f766e;
background: #ccfbf1;
}
.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;
}
.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(15, 118, 110, 0.12), transparent 10rem),
linear-gradient(145deg, #fff 0%, #f8fafc 100%);
box-shadow: var(--shadow-sm);
}
.order-create-summary .summary-kicker {
display: inline-flex;
margin-bottom: 12px;
padding: 5px 10px;
border-radius: 999px;
color: var(--teal-dark);
background: var(--teal-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(--teal);
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 #99f6e4;
border-radius: 14px;
background: var(--teal-bg);
text-align: center;
}
.order-line-placeholder strong {
display: block;
color: var(--teal-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: var(--shadow-sm);
}
.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: 1.15rem;
font-weight: 800;
}
.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 {
min-height: 48px;
padding-right: 42px;
border-radius: 10px;
font-size: 1rem;
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: 15px;
}
.order-company-picker .button.primary {
min-height: 48px;
border-radius: 999px;
}
.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(15, 118, 110, 0.18);
outline-offset: 1px;
border-color: var(--teal);
}
.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;
}
.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(--teal);
background: var(--teal-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: 34px;
padding: 7px 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-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: 1320px;
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;
}
.order-col-name {
width: 16%;
}
.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-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: 18px;
}
.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: #00d639;
}
.order-line-controls .mini-action.info {
background: #3b5ba7;
}
.order-line-controls .mini-action.danger {
background: #ff1f2d;
}
.order-total-box {
display: grid;
gap: 8px;
width: min(430px, 100%);
margin: 28px 0 0 auto;
color: #000;
font-size: 0.78rem;
font-weight: 700;
}
.order-total-box div {
display: grid;
grid-template-columns: 1fr 120px;
gap: 12px;
align-items: center;
}
.order-total-box span {
text-align: right;
}
.order-total-box label {
display: flex;
gap: 6px;
align-items: center;
}
.order-extra-charge-row > span {
display: flex;
align-items: center;
gap: 6px;
justify-content: flex-end;
font-size: 0.78rem;
font-weight: 700;
}
.order-extra-charge-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-extra-charge-row .mini-action:hover {
background: #1e40af !important;
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25) !important;
}
.order-extra-charge-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;
}
.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;
}
.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: 34px;
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: #e2e8f0;
background: rgba(255, 255, 255, 0.075);
}
.site-admin .nav-group.is-open .nav-group-title::after {
color: #2dd4bf;
transform: rotate(0deg);
}
.site-admin .nav-sub-list {
display: flex;
flex-direction: column;
gap: 2px;
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-group.is-open .nav-sub-list {
max-height: 800px;
opacity: 1;
transform: translateY(0);
}
.site-admin .nav-group .nav-sub {
display: inline-flex;
}
.site-admin .nav-sub.is-current {
background: rgba(255, 255, 255, 0.1) !important;
color: #fff !important;
font-weight: 700;
position: relative;
}
.site-admin .nav-sub-section {
display: block;
padding: 6px 16px 2px 58px;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(148, 163, 184, 0.6);
}
@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: #2dd4bf;
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 .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;
}
.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: var(--shadow-sm);
}
.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: 38px;
}
.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(--teal-dark);
}
.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(--teal);
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(--teal);
box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
}
.radio-choice:has(input:checked) .radio-control::after {
transform: scale(1);
}
.radio-choice:has(input:focus-visible) .radio-control {
outline: 3px solid rgba(15, 118, 110, 0.18);
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: inset 0 0 0 1px rgba(16, 24, 40, 0.08);
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: 0 1px 3px rgba(16, 24, 40, 0.18);
transition: transform 0.18s ease;
}
.status-switch.is-on {
background: var(--teal);
}
.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(15, 118, 110, 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(--teal);
background: var(--teal-bg);
}
.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(--teal-bg);
color: var(--teal);
}
.dropzone-label {
margin: 0;
font-size: 0.88rem;
color: var(--ink-body);
}
.dropzone-label strong {
color: var(--teal);
}
.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(--teal-light);
background: #fff;
color: var(--teal);
flex-shrink: 0;
}
.import-inline-help {
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* ── New image preview card ── */
.image-new-preview {
display: flex;
align-items: center;
gap: 14px;
padding: 12px 14px;
border: 1.5px solid var(--teal-light);
border-radius: var(--radius-sm);
background: var(--teal-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(--teal-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(--teal-dark);
}
.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;
}
.inventory-location {
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: inset 0 0 0 2px rgba(15, 118, 110, 0.12);
}
.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(15, 118, 110, 0.25);
border-color: rgba(15, 118, 110, 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, #0f766e 0%, #0d9488 100%);
color: #ccfbf1;
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: #2dd4bf;
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: 0 8px 32px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.3);
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(--teal);
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: 40px;
padding: 0 14px 0 10px;
border-radius: 999px;
background: #0f172a;
border-color: transparent;
color: #cbd5e1;
font-size: 0.8rem;
width: auto;
gap: 8px;
}
.admin-content-header .user-menu-toggle:hover {
background: #1e293b;
border-color: transparent;
color: #f1f5f9;
}
.admin-content-header .user-menu.is-open .user-menu-toggle {
background: #1e293b;
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: var(--shadow-md);
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(--teal);
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(15, 118, 110, 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(15, 118, 110, 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: 0 24px 64px rgba(0, 0, 0, 0.45), 0 4px 16px rgba(0, 0, 0, 0.3);
}
.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
══════════════════════════════════════════════════════════════════════════════ */
/* ── Hero banner ──────────────────────────────────────────────────────────── */
.profile-hero {
margin-bottom: 28px;
}
.profile-hero-inner {
display: flex;
align-items: center;
gap: 24px;
padding: clamp(28px, 4vw, 44px) clamp(24px, 4vw, 48px);
}
.profile-avatar-xl {
display: grid;
place-items: center;
flex-shrink: 0;
width: 72px;
height: 72px;
border-radius: 18px;
background: linear-gradient(135deg, #0f766e 0%, #0d9488 100%);
color: #ccfbf1;
font-size: 1.8rem;
font-weight: 900;
letter-spacing: -0.03em;
box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.35);
}
.profile-hero-info {
flex: 1;
min-width: 0;
}
.profile-hero-info .eyebrow {
color: #2dd4bf;
margin-bottom: 6px;
}
.profile-hero-info h1 {
color: #f1f5f9;
font-size: clamp(1.1rem, 2.5vw, 1.5rem);
font-weight: 800;
letter-spacing: -0.03em;
margin: 0 0 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.profile-hero-meta {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
font-size: 0.8rem;
color: #64748b;
font-weight: 500;
}
.profile-hero-badge {
display: inline-flex;
align-items: center;
padding: 2px 10px;
border-radius: 999px;
background: rgba(15, 118, 110, 0.25);
border: 1px solid rgba(15, 118, 110, 0.4);
color: #2dd4bf;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.04em;
}
.profile-hero-sep {
color: #334155;
}
/* ── 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(--teal-bg);
color: var(--teal);
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: #16a34a;
box-shadow: 0 0 0 3px #dcfce7;
}
.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-hero-inner {
flex-wrap: wrap;
}
.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;
}
.profile-avatar-xl {
width: 56px;
height: 56px;
font-size: 1.3rem;
border-radius: 14px;
}
}
/* ── 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(--teal-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(--teal);
outline-offset: 1px;
border-color: var(--teal);
}
/* ── 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: var(--shadow-lg);
}
.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(--teal);
color: #fff;
font-weight: 800;
cursor: pointer;
box-shadow: var(--shadow-xs);
transition: background var(--t), box-shadow var(--t), transform var(--t);
}
.company-action-more .mini-action:hover {
background: var(--teal-dark);
box-shadow: var(--shadow-sm);
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 0 10px;
border-bottom: 1px solid var(--line-light);
margin-bottom: 24px !important;
flex-wrap: wrap;
gap: 6px;
}
.order-tab-woo {
color: #94a3b8 !important;
border-color: #e2e8f0 !important;
cursor: default;
pointer-events: none;
}
.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(--teal) !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: var(--shadow-lg);
}
.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(--teal);
outline-offset: 1px;
border-color: var(--teal);
}
.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: 38px;
}
.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: var(--shadow-sm);
}
.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(--teal-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(--teal);
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,
.inventory-location-grid .table-header {
align-items: center;
gap: 14px;
}
.settings-admin-grid .table-tools,
.email-template-grid .table-tools,
.inventory-location-grid .table-tools {
flex: 1 1 auto;
justify-content: flex-end;
}
.settings-admin-grid .wide-table-wrap,
.email-template-grid .wide-table-wrap,
.inventory-location-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 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(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(--teal-bg);
}
.setting-key {
display: inline-block;
padding: 2px 7px;
border-radius: 5px;
background: #f1f5f9;
color: #0f766e;
font-size: 0.78rem;
font-family: ui-monospace, 'Cascadia Code', monospace;
font-weight: 600;
letter-spacing: 0.01em;
}
/* 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(--teal-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 */
.inventory-location-table {
min-width: 700px;
table-layout: fixed;
}
.inventory-location-table th,
.inventory-location-table td {
padding: 10px 12px;
border-right: 1px solid var(--line-light);
font-size: 0.82rem;
}
.inventory-location-table th:last-child,
.inventory-location-table td:last-child {
border-right: 0;
}
.inventory-location-table th:nth-child(1),
.inventory-location-table td:nth-child(1) {}
.inventory-location-table th:nth-child(2),
.inventory-location-table td:nth-child(2) {
width: 130px;
}
.inventory-location-table th:nth-child(3),
.inventory-location-table td:nth-child(3) {
width: 130px;
}
.inventory-location-table th:nth-child(4),
.inventory-location-table td:nth-child(4) {
width: 200px;
}
.inventory-location-table td:nth-child(4) {
overflow: visible;
}
.inventory-location-table .filter-row th {
padding: 8px 12px;
background: #fff;
}
.inventory-location-table .filter-row input,
.inventory-location-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;
}
.inventory-location-table tbody tr:nth-child(even) td {
background: #f6f7f9;
}
.inventory-location-table tbody tr:hover td {
background: var(--teal-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: 40px;
}
.config-form-card textarea {
min-height: 96px;
resize: vertical;
}
.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(--teal);
box-shadow: 0 0 0 3px rgba(15, 118, 110, 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(--teal-dark);
background: var(--teal-bg);
outline: none;
}
.email-editor-shell textarea {
min-height: 240px;
padding: 12px 16px;
border: 0;
border-radius: 0;
line-height: 1.6;
resize: vertical;
}
.inventory-location-table {
min-width: 980px;
table-layout: fixed;
}
.inventory-location-table th:nth-child(1),
.inventory-location-table td:nth-child(1) {
width: 42%;
}
.inventory-location-table th:nth-child(2),
.inventory-location-table td:nth-child(2) {
width: 18%;
}
.inventory-location-table th:nth-child(3),
.inventory-location-table td:nth-child(3) {
width: 18%;
}
.inventory-location-table th:nth-child(4),
.inventory-location-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(--teal-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: inset 0 0 0 1px rgba(255, 255, 255, 0.65);
}
.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 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(--teal-bg);
}
.error-method {
display: block;
word-break: break-all;
color: #0f766e;
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(--teal-mid);
outline: 0;
box-shadow: 0 0 0 0.2rem rgba(13, 148, 136, 0.25);
}
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(13, 148, 136, 0.2);
border-top-color: var(--teal);
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(--teal);
box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
}
.ss-wrap.has-selection .ss-trigger {
border-color: var(--teal);
background-color: var(--teal-bg);
color: var(--teal-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: 0 1px 0 rgba(0, 0, 0, 0.06);
}
.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: var(--shadow-md);
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(--teal);
box-shadow: 0 0 0 2px rgba(15, 118, 110, 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;
}
.ss-item:hover {
background: var(--line-light);
}
.ss-item.is-selected {
background: var(--teal);
color: #fff;
}
.ss-item.is-hidden {
display: none;
}
.ss-empty {
padding: 10px 14px;
font-size: 0.875rem;
color: var(--muted);
}
/* Admin page switch buttons (Products: Add / Pricing / Details) */
.switch-nav {
display: inline-flex;
align-items: center;
gap: 10px;
}
.switch-nav .button {
min-height: 38px;
padding: 0 18px;
border-radius: 999px;
}
/* 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(--teal) !important;
}
.switch-nav .button.switch-add:hover {
background: var(--teal-dark) !important;
transform: translateY(-1px);
box-shadow: 0 4px 14px rgba(15, 118, 110, 0.32);
}
.switch-nav .button.switch-pricing {
background: var(--blue) !important;
}
.switch-nav .button.switch-pricing:hover {
background: #1e40af !important;
transform: translateY(-1px);
box-shadow: 0 4px 14px rgba(29, 78, 216, 0.28);
}
.switch-nav .button.switch-details {
background: var(--teal) !important;
}
.switch-nav .button.switch-details:hover {
background: var(--teal-dark) !important;
transform: translateY(-1px);
box-shadow: 0 4px 14px rgba(15, 118, 110, 0.32);
}
.switch-nav .button.switch-add {
/* handled above */
}
/* Customer Tapio-style 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: 0 1px 0 rgba(17, 24, 39, 0.03);
}
.site-customer .brand {
gap: 9px;
font-size: 0.86rem;
letter-spacing: 0;
}
.site-customer .brand-mark {
width: 34px;
height: 34px;
border-radius: 8px;
background: #12836f;
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.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: #168a3a !important;
border-color: #168a3a !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: 0 1px 8px rgba(17, 24, 39, 0.05);
}
.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: #0f766e;
}
.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: 0 6px 18px rgba(17, 24, 39, 0.08);
}
.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: #0f766e;
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: 900;
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;
}
.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(15, 118, 110, 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 Tapio product browser */
.site-customer .tapio-catalog-shell {
overflow: visible;
position: relative;
border: 1px solid #e6e8ee;
border-radius: 6px;
background: #fff;
box-shadow: 0 1px 4px rgba(17, 24, 39, 0.04);
}
.site-customer .tapio-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 .tapio-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: #0f766e;
background:
radial-gradient(circle at center 18px, transparent 0 12px, transparent 12px),
rgba(255, 255, 255, 0.96);
box-shadow: 0 16px 32px rgba(15, 23, 42, 0.08);
font-size: 0.84rem;
font-weight: 800;
text-align: center;
transform: translate(-50%, -50%);
z-index: 11;
}
.site-customer .tapio-catalog-shell.is-loading .catalog-products,
.site-customer .tapio-catalog-shell.is-loading .js-catalog-pagination,
.site-customer .tapio-catalog-shell.is-loading .tapio-catalog-toolbar,
.site-customer .tapio-catalog-shell.is-loading .tapio-catalog-meta {
pointer-events: none;
}
.site-customer .tapio-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 .tapio-category-menu {
position: relative;
}
.site-customer .tapio-category-menu::after {
content: '';
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 12px;
}
.site-customer .tapio-filter-button,
.site-customer .tapio-search-btn,
.site-customer .tapio-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 .tapio-search-btn {
border-color: var(--teal);
background: var(--teal);
color: #fff;
font-weight: 700;
}
.site-customer .tapio-search-btn:hover {
border-color: var(--teal-dark);
background: var(--teal-dark);
box-shadow: 0 6px 14px rgba(15, 118, 110, 0.18);
}
.site-customer .tapio-reset-btn {
border-color: #dbe4e8;
background: #f5f8f9;
color: #0f172a;
}
.site-customer .tapio-reset-btn:hover {
border-color: #b9c8ce;
background: #edf4f6;
}
.site-customer .tapio-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: 0 10px 28px rgba(17, 24, 39, 0.12);
z-index: 20;
}
.site-customer .tapio-category-menu.is-open .tapio-category-dropdown,
.site-customer .tapio-category-menu:hover .tapio-category-dropdown,
.site-customer .tapio-category-menu:focus-within .tapio-category-dropdown {
display: block;
}
.site-customer .tapio-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 .tapio-category-dropdown .category-tree-item {
position: relative;
}
.site-customer .tapio-category-dropdown .category-tree-item.has-children::before {
content: '';
position: absolute;
top: 0;
left: 100%;
width: 4px;
height: 100%;
z-index: 24;
}
.site-customer .tapio-category-dropdown .category-tree-link {
position: relative;
padding-right: 34px;
}
.site-customer .tapio-category-dropdown .category-tree-link-label {
display: inline-flex;
align-items: center;
min-width: 0;
}
.site-customer .tapio-category-dropdown .category-tree-item.is-child .category-tree-link {
font-size: 0.92rem;
}
.site-customer .tapio-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 .tapio-category-dropdown .filter-link strong {
display: none;
}
.site-customer .tapio-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: 0 10px 28px rgba(17, 24, 39, 0.12);
z-index: 25;
}
.site-customer .tapio-category-dropdown .category-tree-item.opens-left > .category-tree-children {
left: auto;
right: calc(100% - 4px);
}
.site-customer .tapio-category-dropdown .category-tree-item:hover > .category-tree-children,
.site-customer .tapio-category-dropdown .category-tree-item:focus-within > .category-tree-children {
display: block;
}
.site-customer .tapio-category-dropdown .filter-link:hover,
.site-customer .tapio-category-dropdown .filter-link.active {
background: #f5f7fb;
}
.site-customer .tapio-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 .tapio-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 .tapio-view-group {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
color: #111827;
font-size: 0.95rem;
min-width: 0;
}
.site-customer .tapio-view-group .catalog-view-toggle {
display: inline-flex;
gap: 4px;
padding: 0;
border: 0;
background: transparent;
}
.site-customer .tapio-view-group .view-toggle {
display: inline-grid;
place-items: center;
width: 40px;
height: 40px;
border: 0;
border-radius: 4px;
color: var(--teal-dark);
background: #edf7f6;
}
.site-customer .tapio-view-group .view-toggle.active {
color: #fff;
background: var(--teal);
box-shadow: 0 5px 12px rgba(15, 118, 110, 0.18);
}
.site-customer .tapio-view-group .view-toggle:hover:not(.active) {
color: var(--teal);
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 .tapio-catalog-toolbar {
grid-template-columns: minmax(210px, 240px) minmax(260px, 1fr) 122px 122px;
}
.site-customer .tapio-view-group {
grid-column: 1 / span 2;
}
.site-customer .catalog-warehouse-select-wrap {
grid-column: 3 / span 2;
}
}
@media (max-width: 1120px) {
.site-customer .tapio-catalog-toolbar {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.site-customer .tapio-category-menu,
.site-customer .tapio-search-wrap,
.site-customer .tapio-search-btn,
.site-customer .tapio-reset-btn,
.site-customer .tapio-view-group,
.site-customer .catalog-warehouse-select-wrap {
justify-self: stretch;
}
.site-customer .tapio-search-btn,
.site-customer .tapio-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 .tapio-catalog-toolbar {
grid-template-columns: 1fr;
}
.site-customer .tapio-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%;
}
}
.site-customer .tapio-catalog-meta {
display: none;
}
.site-customer .tapio-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 .tapio-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 .tapio-catalog-shell .product-media {
width: 100%;
min-height: 0;
aspect-ratio: 1 / 1;
border: 1px solid #e4e7ee;
border-radius: 5px;
background: #ffffff;
}
.site-customer .tapio-catalog-shell .product-media.is-empty {
background: #ffffff;
color: #94a3b8;
}
.site-customer .tapio-catalog-shell .product-media.is-empty::after {
display: none;
}
.site-customer .tapio-catalog-shell .product-media img {
width: 100%;
height: 100%;
padding: 12px;
object-fit: contain;
}
.site-customer .tapio-catalog-shell .product-body {
display: flex;
flex: 1 1 auto;
flex-direction: column;
padding: 8px 0 0;
}
.site-customer .tapio-catalog-shell .product-main {
flex: 1 1 auto;
}
.site-customer .tapio-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 .tapio-catalog-shell .sku,
.site-customer .tapio-catalog-shell .product-category,
.site-customer .tapio-catalog-shell .product-size,
.site-customer .tapio-catalog-shell .product-remarks {
display: none;
}
.site-customer .tapio-catalog-shell .product-unit {
margin-top: 8px;
color: #000;
font-size: 1rem;
}
.site-customer .tapio-catalog-shell .product-price {
display: block;
margin-top: 10px;
color: #000;
font-size: 1rem;
font-weight: 500;
}
.site-customer .tapio-catalog-shell .product-avail {
display: block;
margin-top: 2px;
color: #00b94f;
font-size: 0.95rem;
font-weight: 800;
letter-spacing: 0;
text-transform: none;
}
.site-customer .tapio-catalog-shell .product-avail::before {
content: none;
}
.site-customer .tapio-catalog-shell .product-footer {
display: block;
margin-top: 18px;
padding-top: 16px;
border-top: 1px dashed #e3e6eb;
}
.site-customer .tapio-catalog-shell .btn-cart {
width: 100%;
min-height: 45px;
border-radius: 5px;
background: var(--teal);
font-size: 1rem;
font-weight: 800;
}
.site-customer .tapio-catalog-shell .btn-cart:hover:not(:disabled) {
background: var(--teal-dark);
box-shadow: 0 6px 14px rgba(15, 118, 110, 0.22);
}
.site-customer .tapio-catalog-shell .btn-cart:disabled,
.site-customer .tapio-catalog-shell .btn-cart[aria-disabled="true"] {
cursor: not-allowed;
color: #64748b;
background: #e8eef2;
box-shadow: none;
transform: none;
}
.site-customer .tapio-list-head {
display: none;
}
.site-customer .catalog-products.is-list-view {
display: block;
padding: 0;
}
.site-customer .catalog-products.is-list-view .tapio-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: #00b94f;
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 .tapio-catalog-shell .catalog-products {
grid-template-columns: repeat(5, minmax(0, 210px));
}
.site-customer .tapio-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 .tapio-catalog-shell .catalog-products {
grid-template-columns: repeat(3, minmax(0, 210px));
}
.site-customer .tapio-catalog-toolbar {
grid-template-columns: 1fr 1fr;
gap: 12px;
}
}
@media (max-width: 760px) {
.site-customer .tapio-catalog-toolbar {
grid-template-columns: 1fr;
padding: 14px;
}
.site-customer .tapio-catalog-shell .catalog-products {
grid-template-columns: 1fr;
justify-content: stretch;
padding: 24px 18px;
}
.site-customer .tapio-catalog-shell .market-product {
max-width: none;
}
.site-customer .catalog-products.is-list-view .tapio-list-head {
display: none;
}
.site-customer .catalog-products.is-list-view .market-product {
display: block;
padding: 18px;
}
}
/* Customer catalog final normalization: compact Tapio-like grid/list */
.site-customer .tapio-catalog-shell {
width: 100%;
max-width: none;
margin: 0;
}
.site-customer .tapio-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 .tapio-filter-button,
.site-customer .tapio-search-btn,
.site-customer .tapio-reset-btn,
.site-customer .tapio-search-wrap,
.site-customer .catalog-warehouse-select {
min-height: 38px;
height: 38px;
font-size: 0.82rem;
}
.site-customer .tapio-search-btn,
.site-customer .tapio-reset-btn {
padding: 0 12px;
border-radius: 5px;
min-width: 0;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.site-customer .tapio-search-wrap .catalog-search {
min-height: 36px;
font-size: 0.82rem;
}
.site-customer .tapio-view-group {
gap: 8px;
font-size: 0.86rem;
justify-self: start;
}
.site-customer .tapio-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 .tapio-catalog-toolbar .tapio-search-btn,
.site-customer .tapio-catalog-toolbar .tapio-reset-btn {
min-width: 0;
}
@media (max-width: 1760px) {
.site-customer .tapio-catalog-toolbar {
grid-template-columns: 200px minmax(240px, 1fr) 86px 78px;
gap: 12px;
}
.site-customer .tapio-view-group {
grid-column: 1 / span 2;
}
.site-customer .catalog-warehouse-select-wrap {
grid-column: 3 / span 2;
}
}
.site-customer .tapio-catalog-shell .catalog-products {
grid-template-columns: repeat(8, minmax(0, 1fr));
gap: 24px 14px;
justify-content: initial;
padding: 30px 28px 24px;
}
.site-customer .tapio-catalog-shell .market-product {
max-width: none;
}
.site-customer .tapio-catalog-shell .product-media {
height: auto;
}
.site-customer .tapio-catalog-shell .product-media img {
padding: 10px;
}
.site-customer .tapio-catalog-shell .product-body h2 {
min-height: 38px;
font-size: 0.86rem;
line-height: 1.3;
}
.site-customer .tapio-catalog-shell .product-unit,
.site-customer .tapio-catalog-shell .product-price {
font-size: 0.84rem;
}
.site-customer .tapio-catalog-shell .product-avail {
margin-top: 2px;
font-size: 0.82rem;
line-height: 1.25;
letter-spacing: 0;
text-transform: none;
}
.site-customer .tapio-catalog-shell .product-avail::before {
content: none !important;
display: none !important;
}
.site-customer .tapio-catalog-shell .product-footer {
margin-top: 14px;
padding-top: 14px;
}
.site-customer .tapio-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 .tapio-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 .tapio-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 .tapio-catalog-toolbar {
grid-template-columns: 205px minmax(280px, 1fr) 90px 82px auto 190px;
gap: 12px;
}
.site-customer .tapio-catalog-shell .catalog-products {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
}
/* Customer catalog: remove extra vertical whitespace inside grid cards */
.site-customer .tapio-catalog-shell:not(.is-list-view) .product-main,
.site-customer .tapio-catalog-shell .catalog-products:not(.is-list-view) .product-main {
flex: 0 0 auto;
}
.site-customer .tapio-catalog-shell .catalog-products:not(.is-list-view) .product-body {
gap: 0;
}
.site-customer .tapio-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 .tapio-catalog-shell .catalog-products.is-list-view {
display: block;
padding: 0;
border-top: 1px solid #e6edf2;
}
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .tapio-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 .tapio-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 .tapio-catalog-shell .catalog-products.is-list-view .market-product:hover {
border-color: transparent;
background: #fcfefe;
box-shadow: none;
transform: none;
}
.site-customer .tapio-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 .tapio-catalog-shell .catalog-products.is-list-view .product-media img {
width: 52px;
height: 52px;
padding: 0;
object-fit: contain;
}
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-body {
display: contents;
}
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-main,
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-footer {
display: contents;
}
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-body h2,
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .sku,
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-category,
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-unit,
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-size,
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-price,
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-avail,
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-remarks,
.site-customer .tapio-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 .tapio-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 .tapio-catalog-shell .catalog-products.is-list-view .sku {
grid-column: 3;
color: #111827;
font-weight: 500;
}
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-category {
display: none;
}
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-unit {
grid-column: 4;
color: #111827;
}
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-size {
grid-column: 5;
color: #111827;
}
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-price {
grid-column: 6;
color: #111827;
font-size: 0.86rem;
font-weight: 500;
}
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-avail {
grid-column: 7;
font-size: 0.8rem;
font-weight: 800;
}
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-avail.avail-in-stock {
color: #22c55e;
}
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-avail.avail-low {
color: #ff4d38;
}
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-avail.avail-out-stock {
color: #ff4d38;
}
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-avail::before {
display: none;
}
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-remarks {
grid-column: 8;
color: #475569;
}
.site-customer .tapio-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 .tapio-catalog-shell .catalog-products:not(.is-list-view) .product-unit {
margin-top: 0;
}
.site-customer .tapio-catalog-shell .catalog-products:not(.is-list-view) .product-avail {
margin-top: 6px;
}
.site-customer .tapio-catalog-shell .catalog-products:not(.is-list-view) .product-avail.avail-out-stock {
color: #ef3b2d !important;
}
.site-customer .tapio-catalog-shell .catalog-products:not(.is-list-view) .product-footer {
margin-top: 10px;
padding-top: 8px;
}
.site-customer .tapio-catalog-shell .catalog-products:not(.is-list-view) .product-footer .product-price {
margin-top: 0;
margin-bottom: 8px;
}
/* Customer cart quantity modal and Tapio-style 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: 0 24px 70px rgba(15, 23, 42, 0.18);
}
.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(--teal-dark);
}
.cart-qty-dialog-body {
display: grid;
grid-template-columns: minmax(0, 1fr) 240px;
gap: 28px;
padding: 24px;
}
.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 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 #cfe2df;
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: 40px;
border-radius: 10px;
padding: 0 18px;
}
.cart-modal-actions .button.primary {
background: var(--teal);
}
.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: 0 14px 34px rgba(15, 118, 110, 0.08);
}
.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 #cfe2df;
border-radius: 12px;
background: #fff;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.site-customer .cart-qty-btn {
width: 40px;
height: 40px;
border: 0;
border-radius: 0;
background: #eef7f5;
box-shadow: none;
color: var(--teal-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: 0 10px 28px rgba(15, 118, 110, 0.06);
}
.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: 0 10px 28px rgba(15, 118, 110, 0.06);
}
.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: #0f766e;
}
.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(--teal);
box-shadow: 0 12px 24px rgba(15, 118, 110, 0.18);
}
.site-customer .cart-summary-actions .button:hover {
background: var(--teal-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: #cfe2df;
color: var(--teal-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 .tapio-catalog-shell .pagination,
.site-customer .tapio-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: Tapio-style 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: 0 1px 4px rgba(15, 23, 42, 0.04);
}
.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;
}
.site-customer .checkout-billing-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px 18px;
}
.site-customer .checkout-billing-grid .span-2 {
grid-column: 1 / -1;
}
.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-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 22px;
}
.site-customer .checkout-address-card {
position: relative;
display: flex;
flex-direction: column;
min-height: 228px;
padding: 22px 18px 16px;
border: 1px solid #e8edee;
border-radius: 8px;
background: #fff;
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
color: #16324f;
font-size: 0.84rem;
line-height: 1.42;
text-align: left;
text-decoration: none;
transition: border-color var(--t), box-shadow var(--t), transform var(--t);
}
.site-customer .checkout-address-card:hover {
border-color: #b8dbd4;
box-shadow: 0 14px 28px rgba(15, 118, 110, 0.08);
transform: translateY(-1px);
}
.site-customer .checkout-address-card strong {
display: block;
margin-bottom: 10px;
color: #0f172a;
font-size: 0.96rem;
font-weight: 900;
}
.site-customer .checkout-address-card p {
margin: 0;
white-space: normal;
}
/* 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: linear-gradient(180deg, #0f7a35 0%, #0d6d2f 100%);
box-shadow: 0 2px 12px rgba(10, 40, 18, 0.14);
}
.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: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}
.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: 700;
}
.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 .tapio-page-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 18px;
margin: 2px 0 14px;
padding: 2px 2px 0;
}
.site-customer .tapio-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 .tapio-page-head .breadcrumbs {
gap: 7px;
color: #64748b;
font-size: 0.68rem;
font-weight: 700;
}
.site-customer .tapio-page-head .breadcrumbs a {
color: #506077;
text-decoration: none;
}
.site-customer .tapio-page-context {
display: inline-flex;
align-items: center;
gap: 8px;
color: #64748b;
font-size: 0.88rem;
font-weight: 800;
white-space: nowrap;
}
.site-customer .tapio-page-context strong {
color: #0f172a;
font-weight: 800;
}
.site-customer .tapio-catalog-shell {
border: 1px solid #e5e7eb;
border-radius: 4px;
background: #fff;
box-shadow: none;
}
.site-customer .tapio-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 .tapio-category-menu {
grid-area: filter;
}
.site-customer .tapio-search-wrap {
grid-area: search;
width: 100%;
}
.site-customer .tapio-search-btn {
grid-area: searchbtn;
width: 100%;
}
.site-customer .tapio-reset-btn {
grid-area: reset;
width: 100%;
}
.site-customer .tapio-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 .tapio-filter-button,
.site-customer .tapio-search-btn,
.site-customer .tapio-reset-btn {
min-height: 28px;
border-radius: 2px;
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0;
}
.site-customer .tapio-filter-button {
justify-content: flex-start;
padding: 0 10px;
border-color: #d9dee7;
color: #334155;
}
.site-customer .tapio-search-btn {
border-color: #5d8cf6;
background: #5d8cf6;
box-shadow: none;
}
.site-customer .tapio-search-btn:hover {
border-color: #4878eb;
background: #4878eb;
box-shadow: none;
}
.site-customer .tapio-reset-btn {
border-color: transparent;
background: #f8fafc;
color: #475569;
}
.site-customer .tapio-search-wrap {
min-height: 28px;
gap: 8px;
padding: 0 10px;
border-color: #d7dde6;
border-radius: 2px;
color: #94a3b8;
}
.site-customer .tapio-search-wrap svg {
width: 13px;
height: 13px;
}
.site-customer .tapio-search-wrap .catalog-search {
min-height: 26px;
font-size: 0.92rem;
font-weight: 500;
}
.site-customer .tapio-search-wrap .catalog-search::placeholder {
color: #8b97aa;
font-size: 0.92rem;
}
.site-customer .tapio-view-group {
gap: 6px;
color: #6b7280;
font-size: 0.56rem;
font-weight: 800;
}
.site-customer .tapio-view-group .catalog-view-toggle {
gap: 2px;
}
.site-customer .tapio-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 .tapio-category-dropdown {
width: 220px;
padding: 6px 0;
border-radius: 3px;
}
.site-customer .tapio-category-dropdown .filter-link {
min-height: 30px;
padding: 6px 12px;
color: #334155;
font-size: 0.69rem;
}
.site-customer .tapio-category-dropdown .category-tree-children {
width: 220px;
border-radius: 3px;
}
.site-customer .tapio-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 .tapio-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 .tapio-catalog-shell .tapio-list-head {
display: none;
}
.site-customer .tapio-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: 0 8px 22px rgba(15, 23, 42, 0.05);
transition: border-color var(--t), box-shadow var(--t), transform var(--t);
}
.site-customer .tapio-catalog-shell .market-product:hover {
border-color: #c9ddd7;
box-shadow: 0 14px 28px rgba(15, 23, 42, 0.08);
transform: translateY(-2px);
}
.site-customer .tapio-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 .tapio-catalog-shell .product-media img {
width: 100%;
height: 100%;
padding: 14px;
object-fit: contain;
}
.site-customer .tapio-catalog-shell .product-body {
display: grid;
grid-template-rows: minmax(82px, auto) 28px 1fr;
gap: 0;
padding-top: 0;
}
.site-customer .tapio-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 .tapio-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 .tapio-catalog-shell .sku {
min-height: 22px;
color: #58708a;
font-size: 0.66rem;
font-weight: 800;
line-height: 1.4;
}
.site-customer .tapio-catalog-shell .product-category {
color: #6b7280;
font-size: 0.72rem;
}
.site-customer .tapio-catalog-shell .product-unit,
.site-customer .tapio-catalog-shell .product-price,
.site-customer .tapio-catalog-shell .product-avail {
font-size: 0.74rem;
line-height: 1.4;
}
.site-customer .tapio-catalog-shell .product-unit {
margin-top: 0;
color: #1f2937;
font-weight: 500;
}
.site-customer .tapio-catalog-shell .product-price {
margin-top: 2px;
color: #0f766e;
font-size: 0.86rem;
font-weight: 900;
}
.site-customer .tapio-catalog-shell .product-avail {
align-self: center;
color: #16a34a;
font-weight: 800;
}
.site-customer .tapio-catalog-shell .product-avail::before {
width: 6px;
height: 6px;
}
.site-customer .tapio-catalog-shell .product-footer {
display: grid;
align-self: end;
gap: 10px;
margin-top: 0;
padding-top: 8px;
}
.site-customer .tapio-catalog-shell .btn-cart {
width: 100%;
min-height: 44px;
padding: 0 14px;
border-radius: 6px;
font-size: 0.82rem;
font-weight: 800;
}
.site-customer .tapio-catalog-shell .btn-cart svg {
width: 14px;
height: 14px;
}
.site-customer .tapio-catalog-shell .btn-cart.is-in-cart {
background: #f3f4f6;
border-color: #e5e7eb;
color: #4b5563;
box-shadow: none;
}
.site-customer .tapio-catalog-shell .btn-cart.is-in-cart:hover:not(:disabled) {
background: #eef2f7;
color: #334155;
}
.site-customer .tapio-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 .tapio-catalog-shell .js-catalog-pagination {
margin-top: 4px;
padding: 0 14px 16px;
}
.site-customer .tapio-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 .tapio-catalog-shell .catalog-empty.is-hidden,
.site-customer .tapio-catalog-shell .catalog-empty[hidden] {
display: none !important;
}
.site-customer .tapio-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 .tapio-catalog-shell .catalog-products {
grid-template-columns: repeat(8, minmax(0, 1fr));
}
}
@media (max-width: 1200px) {
.site-customer .tapio-catalog-toolbar {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.site-customer .tapio-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 .tapio-page-head {
flex-direction: column;
}
.site-customer .tapio-catalog-toolbar {
grid-template-columns: 1fr;
}
.site-customer .tapio-catalog-meta {
align-items: flex-start;
flex-direction: column;
}
.site-customer .tapio-catalog-shell .catalog-products {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px 12px;
}
}
.site-customer .add-address-card {
display: grid;
place-items: center;
align-content: center;
gap: 18px;
cursor: pointer;
text-transform: uppercase;
color: #000;
}
.site-customer .address-plus {
color: #0f172a;
font-size: 3.1rem;
font-weight: 300;
line-height: 1;
}
.site-customer .selected-pill {
position: absolute;
top: 14px;
right: 14px;
padding: 4px 10px;
border-radius: 4px;
background: #d9f4ef;
color: var(--teal-dark);
font-size: 0.67rem;
font-weight: 800;
}
.site-customer .checkout-address-card .button {
min-height: 38px;
border-radius: 6px;
}
.site-customer .checkout-address-actions {
display: flex;
gap: 8px;
margin-top: auto;
padding-top: 16px;
flex-wrap: wrap;
}
.site-customer .checkout-address-actions .button {
margin-top: 0;
padding: 0 14px;
}
.site-customer .checkout-address-card.is-selected {
border-color: #8ccfc1;
box-shadow: 0 16px 32px rgba(15, 118, 110, 0.12);
background: linear-gradient(180deg, #ffffff 0%, #f3fbf8 100%);
}
.site-customer .checkout-address-card.is-selected .js-select-checkout-address {
background: #0f766e;
border-color: #0f766e;
color: #fff;
}
.site-customer .checkout-address-card .js-select-checkout-address.is-selected:hover,
.site-customer .checkout-address-card.is-selected .js-select-checkout-address:hover {
background: #0b5f59;
border-color: #0b5f59;
}
.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: #16a34a;
font-style: normal;
font-weight: 600;
font-size: 0.78rem;
}
.site-customer .checkout-total-card .cart-summary-free {
color: #16a34a;
}
.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(--teal);
}
.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(15, 118, 110, 0.4);
box-shadow: 0 8px 18px rgba(15, 118, 110, 0.08);
}
.site-customer .payment-option-card.is-selected {
border-color: var(--teal);
background: linear-gradient(180deg, #f5fffd 0%, #ffffff 100%);
box-shadow: 0 12px 24px rgba(15, 118, 110, 0.12);
}
.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(--teal);
box-shadow: inset 0 0 0 4px var(--teal);
}
.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: 0 4px 10px rgba(15, 23, 42, 0.04);
}
.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(15, 118, 110, 0.55);
box-shadow: 0 0 0 3px rgba(15, 118, 110, 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(--teal);
}
.site-customer .checkout-confirm:hover,
.site-customer .checkout-card .button.primary:hover,
.site-customer .checkout-address-card .button.primary:hover {
background: var(--teal-dark);
}
@media (max-width: 1280px) {
.site-customer .checkout-page,
.site-customer .checkout-main {
grid-template-columns: 1fr;
}
.site-customer .checkout-address-grid {
grid-template-columns: 1fr;
}
}
/* Customer button theme unification */
.site-customer .button,
.site-customer .tapio-filter-button,
.site-customer .tapio-search-btn,
.site-customer .tapio-reset-btn,
.site-customer .btn-cart,
.site-customer .view-toggle,
.site-customer .checkout-address-card .button,
.site-customer .customer-company-address-action {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 36px;
padding: 0 16px;
border-radius: 7px;
font-size: 0.86rem;
font-weight: 700;
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 .tapio-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 .checkout-address-actions .button.primary,
.site-customer .cart-summary-actions .button {
border-color: var(--teal) !important;
background: var(--teal) !important;
color: #fff !important;
box-shadow: 0 10px 22px rgba(15, 118, 110, 0.16);
}
.site-customer .button.primary:hover,
.site-customer .tapio-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 .checkout-address-actions .button.primary:hover,
.site-customer .cart-summary-actions .button:hover {
border-color: var(--teal-dark) !important;
background: var(--teal-dark) !important;
color: #fff !important;
box-shadow: 0 14px 28px rgba(15, 118, 110, 0.22);
transform: translateY(-1px);
}
.site-customer .button.outline,
.site-customer .tapio-filter-button,
.site-customer .tapio-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 .checkout-address-actions .button.outline,
.site-customer .customer-company-address-form-actions .button.outline,
.site-customer .customer-company-user-create-actions .button.outline {
border: 1px solid #cfe2df !important;
background: #f7fcfb !important;
color: var(--teal-dark) !important;
box-shadow: none;
}
.site-customer .button.outline:hover,
.site-customer .tapio-filter-button:hover,
.site-customer .tapio-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 .checkout-address-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: #a8cfc7 !important;
background: #edf8f6 !important;
color: var(--teal-dark) !important;
transform: translateY(-1px);
}
.site-customer .tapio-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 #cfe2df !important;
background: #f7fcfb !important;
color: var(--teal-dark) !important;
box-shadow: none;
}
.site-customer .ccu-reset-btn:hover {
border-color: #a8cfc7 !important;
background: #edf8f6 !important;
color: var(--teal-dark) !important;
}
.site-customer .view-toggle {
min-width: 42px;
padding: 0;
border: 1px solid #d7e6e3;
background: #ecf8f5;
color: var(--teal-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: #a8cfc7;
background: #dff3ee;
color: var(--teal-dark);
}
.site-customer .view-toggle.active {
border-color: var(--teal);
background: var(--teal);
color: #fff;
box-shadow: 0 10px 20px rgba(15, 118, 110, 0.18);
}
.site-customer .checkout-coupon-row .button,
.site-customer .checkout-address-card .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(--teal);
font-size: 0.82rem;
font-weight: 800;
}
.site-customer .customer-company-address-action:hover {
color: var(--teal-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: 0 10px 30px rgba(2, 6, 23, 0.22);
}
.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-site-header::before {
content: '';
position: absolute;
inset: 0 0 auto 0;
height: 54px;
background: linear-gradient(180deg, #0f2f27 0%, #163a2d 100%);
z-index: -1;
}
.site-customer .customer-brand {
gap: 10px;
color: #fff;
}
.site-customer .customer-brand-mark {
width: 38px;
height: 38px;
border-radius: 12px;
color: #fff;
background: linear-gradient(180deg, #19824a 0%, #14683b 100%);
font-size: 0.9rem;
font-weight: 900;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 8px 18px rgba(7, 32, 19, 0.22);
}
.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;
}
.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;
}
.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: 800;
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: #0f766e;
background: #f3faf8;
}
.site-customer .customer-subnav-menu > a.is-current,
.site-customer .customer-subnav-menu .nav-dropdown.is-current .nav-dropdown-link {
color: #0f766e;
background: #f3faf8;
box-shadow: inset 0 -2px 0 #0f766e;
}
.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: 0 18px 40px rgba(15, 23, 42, 0.16);
}
.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: #0f766e;
background: #f3faf8;
}
.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: 0 18px 40px rgba(15, 23, 42, 0.16);
}
@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;
}
}
.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: inset 0 1px 2px rgba(15, 23, 42, 0.08);
}
.import-progress-fill {
height: 100%;
width: 0;
border-radius: inherit;
background: linear-gradient(90deg, #0f766e 0%, #14b8a6 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,
.inventory-location-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 .tapio-search-wrap {
min-height: 30px;
padding: 0 8px;
}
.site-customer .tapio-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 .tapio-page-head {
align-items: center;
margin: 0 0 10px;
padding: 0;
}
.site-customer .tapio-catalog-shell {
overflow: visible;
border: 1px solid #e5e7eb;
border-radius: 6px;
background: #fff;
box-shadow: 0 1px 8px rgba(15, 23, 42, 0.04);
}
.site-customer .tapio-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 .tapio-filter-button,
.site-customer .tapio-search-btn,
.site-customer .tapio-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 .tapio-filter-button,
.site-customer .tapio-search-btn,
.site-customer .tapio-reset-btn {
padding: 0 10px;
}
.site-customer .tapio-search-wrap {
min-height: 30px;
height: 30px;
gap: 6px;
padding: 0 8px;
border: 1px solid #d7dde6;
border-radius: 5px;
}
.site-customer .tapio-search-wrap .catalog-search {
min-height: 28px;
height: 28px;
padding: 0;
font-size: 0.78rem;
}
.site-customer .tapio-search-wrap .catalog-search::placeholder {
font-size: 0.78rem;
}
.site-customer .tapio-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 .tapio-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 .tapio-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 .tapio-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 .tapio-catalog-shell .catalog-products:not(.is-list-view) .market-product:hover {
transform: none;
box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
}
.site-customer .tapio-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 .tapio-catalog-shell .catalog-products:not(.is-list-view) .product-media.is-empty {
background: #ffffff;
}
.site-customer .tapio-catalog-shell .catalog-products:not(.is-list-view) .product-media img {
padding: 10px;
background: #fff;
}
.site-customer .tapio-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 .tapio-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 .tapio-catalog-shell .catalog-products:not(.is-list-view) .product-unit,
.site-customer .tapio-catalog-shell .catalog-products:not(.is-list-view) .product-size,
.site-customer .tapio-catalog-shell .catalog-products:not(.is-list-view) .product-remarks {
display: none;
}
.site-customer .tapio-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 .tapio-catalog-shell .catalog-products:not(.is-list-view) .guest-product-card .product-body {
grid-template-rows: auto auto;
gap: 10px;
}
.site-customer .tapio-catalog-shell .catalog-products:not(.is-list-view) .guest-product-card .product-main {
display: block;
min-height: 0;
}
.site-customer .tapio-catalog-shell .catalog-products:not(.is-list-view) .guest-product-card .product-body h2 {
min-height: 0;
margin-bottom: 6px;
}
.site-customer .tapio-catalog-shell .catalog-products:not(.is-list-view) .sku,
.site-customer .tapio-catalog-shell .catalog-products:not(.is-list-view) .product-avail {
font-size: 0.7rem;
}
.site-customer .tapio-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 .tapio-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 .tapio-catalog-shell .catalog-products:not(.is-list-view) .product-avail {
align-self: center;
margin: 6px 0 8px;
line-height: 1.3;
}
.site-customer .tapio-catalog-shell .catalog-products:not(.is-list-view) .product-price {
margin-top: 0;
line-height: 1.2;
}
.site-customer .tapio-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(--teal-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(--teal-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: 0 18px 40px rgba(15, 23, 42, 0.06);
}
.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;
}
.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: #0f766e;
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: #0b5f58;
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: #00a650;
}
.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 .tapio-catalog-shell .catalog-products:not(.is-list-view) .product-footer {
gap: 10px;
padding-top: 0;
align-self: end;
border-top: 0;
}
.site-customer .tapio-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 .tapio-catalog-shell .catalog-products.is-list-view {
display: block;
padding: 0;
border-top: 1px solid #edf1f5;
}
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .tapio-list-head,
.site-customer .tapio-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 .tapio-catalog-shell .catalog-products.is-list-view .tapio-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 .tapio-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 .tapio-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 .tapio-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 .tapio-catalog-shell .catalog-products.is-list-view .product-main,
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-footer {
display: contents;
}
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-body h2,
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .sku,
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-unit,
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-size,
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-price,
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-avail,
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-remarks,
.site-customer .tapio-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 .tapio-catalog-shell .catalog-products.is-list-view .product-body h2 { grid-column: 1; }
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .sku { grid-column: 2; }
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-unit { grid-column: 3; }
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-size { grid-column: 4; }
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-price { grid-column: 5; }
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-avail { grid-column: 6; }
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-remarks { grid-column: 7; }
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .btn-cart { grid-column: 8; }
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-category {
display: none;
}
.site-customer .tapio-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 .tapio-catalog-toolbar {
grid-template-columns: 170px minmax(240px, 1fr) 78px 70px;
grid-template-areas:
"filter search searchbtn reset"
"view view warehouse warehouse";
}
.site-customer .tapio-catalog-shell .catalog-products:not(.is-list-view) {
grid-template-columns: repeat(8, minmax(0, 1fr));
}
}
@media (max-width: 980px) {
.site-customer .tapio-catalog-toolbar {
grid-template-columns: 1fr 1fr;
grid-template-areas:
"filter filter"
"search search"
"searchbtn reset"
"view warehouse";
}
.site-customer .tapio-catalog-shell .catalog-products:not(.is-list-view) {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .tapio-list-head {
display: none;
}
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .market-product,
.site-customer .tapio-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 .tapio-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, .checkout-address-card .button, .cart-summary-actions .button, .checkout-confirm) {
height: 36px;
min-height: 36px;
padding: 0 14px;
border-radius: 6px;
font-size: 0.84rem;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
}
.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 .tapio-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: 36px;
min-height: 36px;
border-radius: 6px;
}
.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 .tapio-catalog-toolbar {
display: flex !important;
flex-wrap: nowrap;
gap: 10px;
align-items: center;
}
.site-customer .tapio-category-menu {
flex: 0 0 220px;
min-width: 0;
}
.site-customer .tapio-search-wrap {
flex: 1 1 auto;
min-width: 260px;
width: auto;
}
.site-customer .tapio-search-btn {
flex: 0 0 86px;
min-width: 0;
width: 100%;
}
.site-customer .tapio-reset-btn {
flex: 0 0 78px;
min-width: 0;
width: 100%;
}
.site-customer .tapio-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 .tapio-search-btn,
.site-customer .tapio-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 .tapio-filter-button {
width: 100%;
padding-inline: 10px;
}
}
.site-customer .tapio-catalog-toolbar .tapio-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(--teal) !important;
background: var(--teal) !important;
color: #fff !important;
}
.site-customer .customer-order-actions .button.primary:hover {
border-color: var(--teal-dark) !important;
background: var(--teal-dark) !important;
color: #fff !important;
box-shadow: none;
transform: none;
}
.site-customer .customer-order-actions .customer-order-reorder {
border-color: #cfe2df !important;
background: #f7fcfb !important;
color: var(--teal-dark) !important;
box-shadow: none;
}
.site-customer .customer-order-actions .customer-order-reorder:hover {
border-color: #a8cfc7 !important;
background: #edf8f6 !important;
color: var(--teal-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: var(--shadow-sm);
}
.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 .tapio-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 .tapio-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 .tapio-catalog-shell .catalog-products.is-list-view .product-body,
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-main,
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-footer {
min-height: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-body h2,
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .sku,
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-unit,
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-size,
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-price,
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-avail,
.site-customer .tapio-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 .tapio-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 .tapio-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 .tapio-catalog-shell .catalog-products.is-list-view .tapio-list-head,
.site-customer .tapio-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 .tapio-catalog-shell .catalog-products.is-list-view .tapio-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 .tapio-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 .tapio-catalog-shell .catalog-products.is-list-view .market-product:nth-child(odd) {
background: #fcfdff;
}
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .market-product:hover {
background: #f7fcfb;
box-shadow: none;
transform: none;
}
.site-customer .tapio-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 .tapio-catalog-shell .catalog-products.is-list-view .product-media img {
width: auto !important;
max-width: 64px !important;
height: auto !important;
max-height: 46px !important;
object-fit: contain !important;
}
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-media.is-empty::before {
content: "";
width: 38px;
height: 28px;
border-radius: 999px;
background: linear-gradient(135deg, #f8fafc, #e5e7eb);
box-shadow: inset 0 0 0 1px #edf2f7;
}
.site-customer .tapio-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 .tapio-catalog-shell .catalog-products.is-list-view .product-main,
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-footer {
display: contents !important;
}
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-body h2,
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .sku,
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-unit,
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-size,
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-price,
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-avail,
.site-customer .tapio-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 .tapio-catalog-shell .catalog-products.is-list-view .product-body h2 {
grid-column: 1;
font-weight: 700;
text-decoration: underline;
overflow-wrap: anywhere;
}
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .sku { grid-column: 2; }
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-unit { grid-column: 3; }
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-size { grid-column: 4; }
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-price { grid-column: 5; }
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-avail { grid-column: 6; }
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-remarks { grid-column: 7; }
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .btn-cart { grid-column: 8; }
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-category {
display: none !important;
}
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-price {
color: var(--teal-dark);
font-weight: 900;
}
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-avail {
color: #00b050 !important;
font-weight: 900;
}
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-avail.avail-low {
color: #ef3b2d !important;
}
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-avail.avail-out-stock {
color: #ef3b2d !important;
}
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-avail::before {
display: none !important;
}
.site-customer .tapio-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 .tapio-catalog-shell .catalog-products.is-list-view .tapio-list-head,
.site-customer .tapio-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 .tapio-catalog-shell .catalog-products.is-list-view .tapio-list-head {
min-height: 42px !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .market-product {
min-height: 52px !important;
padding-top: 4px !important;
padding-bottom: 4px !important;
}
.site-customer .tapio-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 .tapio-catalog-shell .catalog-products.is-list-view .product-media img {
max-width: 42px !important;
max-height: 36px !important;
}
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-media.is-empty::before {
width: 36px !important;
height: 26px !important;
}
.site-customer .tapio-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 .tapio-catalog-shell .catalog-products.is-list-view .product-body h2,
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .sku,
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-unit,
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-size,
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-price,
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-avail,
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-remarks {
font-size: 0.82rem !important;
}
.site-customer .tapio-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 .tapio-catalog-shell .catalog-products.is-list-view .tapio-list-head,
.site-customer .tapio-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 .tapio-catalog-shell .catalog-products.is-list-view .tapio-list-head {
height: 44px !important;
min-height: 44px !important;
max-height: 44px !important;
}
.site-customer .tapio-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 .tapio-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 .tapio-catalog-shell .catalog-products.is-list-view .product-media img {
display: block !important;
width: 54px !important;
max-width: 54px !important;
height: 42px !important;
max-height: 42px !important;
object-fit: contain !important;
}
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-media.is-empty::before {
width: 42px !important;
height: 28px !important;
}
.site-customer .tapio-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 .tapio-catalog-shell .catalog-products.is-list-view .product-main,
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-footer {
min-height: 0 !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
}
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-body h2,
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .sku,
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-unit,
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-size,
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-price,
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-avail,
.site-customer .tapio-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 .tapio-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 .tapio-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 .tapio-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 .tapio-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 .tapio-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 .tapio-catalog-shell .catalog-products.is-list-view .product-media img {
width: 62px !important;
max-width: 62px !important;
height: 46px !important;
max-height: 46px !important;
}
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-body h2,
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .sku,
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-unit,
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-size,
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-price,
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-avail,
.site-customer .tapio-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 .tapio-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 .tapio-catalog-shell .catalog-products.is-list-view .tapio-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 .tapio-catalog-shell .catalog-products.is-list-view .tapio-list-head span {
display: flex;
align-items: center;
min-height: 48px;
line-height: 1.2;
}
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .tapio-list-head .tapio-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 .tapio-catalog-shell .catalog-products.is-list-view .tapio-list-head .tapio-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 .tapio-catalog-shell .catalog-products.is-list-view .tapio-list-head .tapio-list-sort.is-active {
color: var(--teal-dark);
}
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .tapio-list-head .tapio-list-sort.is-active::after {
opacity: 0.9;
}
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .tapio-list-head .tapio-list-sort.is-desc::after {
transform: rotate(225deg);
}
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-media {
position: relative;
}
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-media.is-empty {
background: #ffffff !important;
}
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-media.is-empty::before {
content: '' !important;
position: absolute !important;
top: 50% !important;
left: 50% !important;
width: 40px !important;
height: 40px !important;
transform: translate(-50%, -50%) !important;
border: 1px solid #e5e7eb !important;
border-radius: 4px !important;
background: #fff !important;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}
.site-customer .tapio-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 .tapio-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 .tapio-catalog-shell .catalog-products.is-list-view .product-body {
align-items: center !important;
}
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-body h2,
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .sku,
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-unit,
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-size,
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-price,
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-avail,
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-remarks,
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .btn-cart {
align-self: center !important;
}
/* Product list final cell centering */
.site-customer .tapio-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 .tapio-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 .tapio-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 .tapio-catalog-shell .catalog-products.is-list-view .product-media img {
height: 44px !important;
max-height: 44px !important;
}
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-body h2,
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .sku,
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-unit,
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-size,
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-price,
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-avail,
.site-customer .tapio-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 .tapio-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 .tapio-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 .tapio-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 .tapio-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 .tapio-catalog-shell .catalog-products.is-list-view .product-body h2,
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .sku,
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-unit,
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-size,
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-price,
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-avail,
.site-customer .tapio-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 .tapio-catalog-shell .catalog-products.is-list-view .btn-cart {
align-self: center !important;
transform: translateY(-1px);
}
/* Product list table layout final */
.site-customer .tapio-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 .tapio-catalog-shell .catalog-products.is-list-view .tapio-list-head,
.site-customer .tapio-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 .tapio-catalog-shell .catalog-products.is-list-view .tapio-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 .tapio-catalog-shell .catalog-products.is-list-view .tapio-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 .tapio-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 .tapio-catalog-shell .catalog-products.is-list-view .market-product:hover {
background: #f8fcfb !important;
box-shadow: none !important;
transform: none !important;
}
.site-customer .tapio-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 .tapio-catalog-shell .catalog-products.is-list-view .product-media img {
display: block !important;
width: 70px !important;
max-width: 70px !important;
height: 52px !important;
max-height: 52px !important;
object-fit: contain !important;
}
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-media.is-empty::before {
content: "" !important;
display: block !important;
width: 42px !important;
height: 28px !important;
border-radius: 999px !important;
background: linear-gradient(135deg, #f8fafc, #e5e7eb) !important;
}
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-body,
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-main,
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-footer {
display: contents !important;
}
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-category {
display: none !important;
}
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-body h2,
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .sku,
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-unit,
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-size,
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-price,
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-avail,
.site-customer .tapio-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 .tapio-catalog-shell .catalog-products.is-list-view .product-body h2 {
grid-column: 2 !important;
font-weight: 800 !important;
text-decoration: underline !important;
}
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .sku { grid-column: 3 !important; }
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-unit { grid-column: 4 !important; }
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-size { grid-column: 5 !important; }
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-price { grid-column: 6 !important; color: var(--teal-dark) !important; font-weight: 900 !important; }
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-avail { grid-column: 7 !important; color: #00a650 !important; font-weight: 900 !important; }
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-avail.avail-low { color: #ef3b2d !important; }
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-avail::before { display: none !important; }
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-remarks { grid-column: 8 !important; }
.site-customer .tapio-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 .tapio-catalog-shell .catalog-products.is-list-view {
overflow-x: hidden !important;
}
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .tapio-list-head,
.site-customer .tapio-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 .tapio-catalog-shell .catalog-products.is-list-view .tapio-list-head span,
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-body h2,
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .sku,
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-unit,
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-size,
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-price,
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-avail,
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-remarks {
padding-right: 10px !important;
}
.site-customer .tapio-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 .tapio-catalog-shell .catalog-products.is-list-view .product-media {
grid-column: 1 !important;
justify-self: start !important;
}
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-body h2 { grid-column: 2 !important; }
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .sku { grid-column: 3 !important; }
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-unit { grid-column: 4 !important; }
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-size { grid-column: 5 !important; }
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-price { grid-column: 6 !important; }
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-avail { grid-column: 7 !important; }
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-remarks { grid-column: 8 !important; }
.site-customer .tapio-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 .tapio-catalog-shell .catalog-products.is-list-view .tapio-list-head {
background: #fff !important;
border-bottom: 1px solid #d7dee8 !important;
}
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .market-product {
background: #fff !important;
}
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .market-product:nth-of-type(even) {
background: #fbfdfd !important;
}
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .market-product:hover {
background: #f4fbf9 !important;
}
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-media {
margin-left: 0 !important;
}
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-body h2 {
padding-left: 0 !important;
}
.site-customer .tapio-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 .tapio-catalog-shell .catalog-products.is-list-view .tapio-list-head,
.site-customer .tapio-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 .tapio-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 .tapio-catalog-shell .catalog-products.is-list-view .product-body,
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-main,
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-footer {
display: contents !important;
}
.site-customer .tapio-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 .tapio-catalog-shell .catalog-products.is-list-view .product-body h2,
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .sku,
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-unit,
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-size,
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-price,
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-avail,
.site-customer .tapio-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 .tapio-catalog-shell .catalog-products.is-list-view .product-body h2 { grid-column: 2 !important; }
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .sku { grid-column: 3 !important; }
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-unit { grid-column: 4 !important; }
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-size { grid-column: 5 !important; }
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-price { grid-column: 6 !important; }
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-avail { grid-column: 7 !important; }
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-remarks { grid-column: 8 !important; }
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .btn-cart {
grid-column: 9 !important;
align-self: center !important;
justify-self: end !important;
transform: none !important;
}
/* Product list final center lock */
.site-customer .tapio-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 .tapio-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 .tapio-catalog-shell .catalog-products.is-list-view .product-media img {
height: 52px !important;
max-height: 52px !important;
}
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-body h2,
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .sku,
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-unit,
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-size,
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-price,
.site-customer .tapio-catalog-shell .catalog-products.is-list-view .product-avail,
.site-customer .tapio-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 .tapio-catalog-shell .catalog-products.is-list-view .btn-cart {
align-self: center !important;
height: 40px !important;
min-height: 40px !important;
max-height: 40px !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;
}