/* 2026-04-08 Baazax UI kit enforcement layer */
:root {
  --token-brand-primary: #1a4fd8;
  --token-brand-primary-hover: #1846c7;
  --token-brand-primary-active: #163fb5;
  --token-brand-deep: var(--token-brand-primary-active);
  --token-brand-darkest: #0b0d10;
  --token-brand-primary-soft: rgba(26, 79, 216, 0.14);
  --token-brand-primary-soft-border: rgba(26, 79, 216, 0.3);
  --token-brand-primary-soft-text: #60a5fa;
  --token-brand-primary-active-text: #e5e7eb;
  --token-brand-primary-active-icon: #60a5fa;
  --token-accent-primary: #3b82f6;
  --token-accent-hover: #60a5fa;
  --token-accent-soft: #60a5fa;
  --token-surface-base: #0b0d10;
  --token-surface-subtle: #11151a;
  --token-surface-card: #11151a;
  --token-surface-elevated: #161b22;
  --token-border: #1f232a;
  --token-border-strong: #2a2f36;
  --token-text-strong: #e5e7eb;
  --token-text-medium: #9ca3af;
  --token-text-muted: #6b7280;
  --token-success: #10b981;
  --token-error: #ef4444;
  --token-warning: #f59e0b;
  --token-info: #3b82f6;
  --font-heading: "Peyda Local", "Inter", "Segoe UI", sans-serif;
  --font-body: "Peyda Local", "Inter", "Segoe UI", sans-serif;
  --font-mono: "Cascadia Code", "Consolas", "Liberation Mono", monospace;
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-full: 999px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.22);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.36);
  --focus-ring-color: rgba(26, 79, 216, 0.34);
  --control-height-sm: 36px;
  --control-height-md: 44px;
  --control-height-lg: 52px;
  --ui-bg-app:
    radial-gradient(circle at top right, rgba(26, 79, 216, 0.14), transparent 28%),
    linear-gradient(180deg, var(--token-surface-base), var(--token-surface-subtle));
  --ui-control-bg: var(--token-surface-card);
  --ui-control-bg-subtle: color-mix(in srgb, var(--token-brand-primary) 8%, var(--token-surface-subtle));
  --ui-hover-bg: color-mix(in srgb, var(--token-brand-primary) 8%, var(--token-surface-subtle));
  --ui-active-bg: color-mix(in srgb, var(--token-brand-primary) 14%, var(--token-surface-subtle));
  --ui-selected-bg: color-mix(in srgb, var(--token-brand-primary) 14%, var(--token-surface-subtle));
  --ui-disabled-bg: color-mix(in srgb, var(--token-text-muted) 16%, var(--token-surface-subtle));
  color-scheme: dark;
}

:root[data-theme="light"] {
  --token-brand-primary: #1a4fd8;
  --token-brand-primary-hover: #1846c7;
  --token-brand-primary-active: #1637b5;
  --token-brand-deep: var(--token-brand-primary-active);
  --token-brand-darkest: #0f172a;
  --token-brand-primary-soft: rgba(26, 79, 216, 0.12);
  --token-brand-primary-soft-border: rgba(26, 79, 216, 0.26);
  --token-brand-primary-soft-text: #1a4fd8;
  --token-brand-primary-active-text: #0f172a;
  --token-brand-primary-active-icon: #1a4fd8;
  --token-accent-primary: #3b82f6;
  --token-accent-hover: #60a5fa;
  --token-accent-soft: #60a5fa;
  --token-surface-base: #eef3f8;
  --token-surface-subtle: #f5f8fc;
  --token-surface-card: #ffffff;
  --token-surface-elevated: #ffffff;
  --token-border: #d8e1ec;
  --token-border-strong: #bdcad9;
  --token-text-strong: #0f172a;
  --token-text-medium: #475569;
  --token-text-muted: #64748b;
  --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.1);
  --focus-ring-color: rgba(26, 79, 216, 0.22);
  --ui-bg-app:
    radial-gradient(circle at top right, rgba(26, 79, 216, 0.07), transparent 24%),
    linear-gradient(180deg, #eef3f8, #f5f8fc);
  --ui-control-bg: #ffffff;
  --ui-control-bg-subtle: color-mix(in srgb, var(--token-brand-primary) 5%, var(--token-surface-subtle));
  --ui-hover-bg: color-mix(in srgb, var(--token-brand-primary) 7%, var(--token-surface-subtle));
  --ui-active-bg: color-mix(in srgb, var(--token-brand-primary) 12%, var(--token-surface-subtle));
  --ui-selected-bg: color-mix(in srgb, var(--token-brand-primary) 12%, var(--token-surface-subtle));
  --ui-disabled-bg: color-mix(in srgb, var(--token-text-muted) 14%, #ffffff);
  color-scheme: light;
}

:root {
  --brand-400: color-mix(in srgb, var(--token-brand-primary) 72%, white);
  --brand-500: var(--token-brand-primary);
  --brand-600: var(--token-brand-primary-hover);
  --brand-700: var(--token-brand-deep);
  --brand-800: var(--token-brand-darkest);
  --accent-gold: var(--token-accent-primary);
  --tech-blue: var(--token-brand-primary);
  --bg-main: var(--token-surface-base);
  --bg-deep: var(--token-surface-base);
  --bg-card: var(--token-surface-card);
  --surface-elevated: var(--token-surface-elevated);
  --surface-muted: var(--token-surface-subtle);
  --text-primary: var(--token-text-strong);
  --text-muted: var(--token-text-medium);
  --text-soft: var(--token-text-muted);
  --line-color: var(--token-border);
  --panel-bg: var(--token-surface-card);
  --panel-bg-strong: var(--token-surface-elevated);
  --link-color: var(--token-brand-primary);
  --focus-ring: var(--focus-ring-color);
  --shadow-brand: var(--shadow-sm);
  --shadow-soft: var(--shadow-sm);
  --bg: var(--bg-main);
  --surface: var(--bg-card);
  --surface-2: var(--surface-muted);
  --surface-3: var(--panel-bg-strong);
  --text: var(--text-primary);
  --border: var(--line-color);
  --border-soft: color-mix(in srgb, var(--line-color) 84%, transparent);
  --border-strong: color-mix(in srgb, var(--line-color) 88%, var(--text-soft));
  --primary: var(--brand-500);
  --primary-contrast: #f9fafb;
  --success: var(--token-success);
  --warning: var(--token-warning);
  --danger: var(--token-error);
  --info: var(--token-info);
  --selected: var(--ui-selected-bg);
  --hover: var(--ui-hover-bg);
  --active: var(--ui-active-bg);
  --disabled: var(--ui-disabled-bg);
  --brand-primary: var(--token-brand-primary);
  --brand-secondary: var(--token-brand-primary-hover);
  --brand-accent: var(--token-accent-primary);
  --radius-token-sm: var(--radius-sm);
  --radius-token-md: var(--radius-md);
  --radius-token-lg: var(--radius-lg);
  --radius-token-xl: var(--radius-xl);
  --radius-token-2xl: var(--radius-2xl);
}

.ui-text-error {
  color: color-mix(in srgb, var(--danger) 88%, var(--text-primary)) !important;
}

.ui-text-warning {
  color: color-mix(in srgb, var(--warning) 86%, var(--text-primary)) !important;
}

.ui-text-success {
  color: color-mix(in srgb, var(--success) 86%, var(--text-primary)) !important;
}

.ui-text-info {
  color: color-mix(in srgb, var(--info) 86%, var(--text-primary)) !important;
}

.text-soft {
  color: var(--text-soft) !important;
}

.ui-state-error-soft,
.ui-state-warning-soft,
.ui-state-success-soft,
.ui-state-info-soft {
  border: 1px solid var(--line-color) !important;
  border-radius: var(--radius-lg) !important;
  background: var(--surface-2) !important;
}

.ui-state-error-soft {
  border-color: color-mix(in srgb, var(--danger) 28%, var(--line-color)) !important;
  background: color-mix(in srgb, var(--danger) 10%, var(--surface-2)) !important;
  color: color-mix(in srgb, var(--danger) 88%, var(--text-primary)) !important;
}

.ui-state-warning-soft {
  border-color: color-mix(in srgb, var(--warning) 30%, var(--line-color)) !important;
  background: color-mix(in srgb, var(--warning) 10%, var(--surface-2)) !important;
  color: color-mix(in srgb, var(--warning) 86%, var(--text-primary)) !important;
}

.ui-state-success-soft {
  border-color: color-mix(in srgb, var(--success) 28%, var(--line-color)) !important;
  background: color-mix(in srgb, var(--success) 10%, var(--surface-2)) !important;
  color: color-mix(in srgb, var(--success) 86%, var(--text-primary)) !important;
}

.ui-state-info-soft {
  border-color: color-mix(in srgb, var(--info) 28%, var(--line-color)) !important;
  background: color-mix(in srgb, var(--info) 10%, var(--surface-2)) !important;
  color: color-mix(in srgb, var(--info) 86%, var(--text-primary)) !important;
}

.ui-dot-warning {
  background: var(--warning) !important;
}

.ui-dot-error {
  background: var(--danger) !important;
}

.ui-dot-info {
  background: var(--info) !important;
}

.ui-dot-success {
  background: var(--success) !important;
}

.ui-progress-track {
  background: color-mix(in srgb, var(--token-border-strong, var(--line-color)) 42%, var(--surface-2)) !important;
}

.ui-progress-fill {
  background: linear-gradient(90deg, var(--brand-500), var(--token-accent-primary)) !important;
}

.border-border {
  border-color: var(--line-color) !important;
}

.border-border-strong {
  border-color: var(--token-border-strong, var(--border-strong)) !important;
}

.ui-surface-faint {
  background: color-mix(in srgb, var(--surface-2) 72%, transparent) !important;
}

.ui-surface-soft {
  background: color-mix(in srgb, var(--surface-2) 88%, transparent) !important;
}

html[dir="ltr"] {
  --font-heading: "Segoe UI", "Trebuchet MS", sans-serif;
  --font-body: "Segoe UI", "Trebuchet MS", sans-serif;
}

body {
  font-family: var(--font-body);
  color: var(--text-primary);
  background-color: var(--bg-main);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
}

a {
  color: var(--link-color);
}

a:hover,
a:focus-visible {
  color: var(--brand-600);
}

::selection {
  background: color-mix(in srgb, var(--brand-500) 18%, transparent);
  color: var(--text-primary);
}

:is(a, button, [role="button"], input, select, textarea, summary):focus-visible {
  outline: none !important;
  box-shadow:
    0 0 0 2px var(--bg-main),
    0 0 0 4px var(--focus-ring-color) !important;
}

.bg-app {
  background: var(--ui-bg-app) !important;
}

.bg-orb,
.mesh-grid {
  display: none !important;
}

.glass-panel,
.product-card,
.category-card,
.search-results,
.drawer-panel,
.modal-card,
.ui-card,
.ui-panel,
.ui-stat-card,
.ui-empty-state,
.ui-topbar,
.ui-sidebar,
.ui-footer,
.ui-drawer-panel {
  border: 1px solid var(--line-color) !important;
  border-radius: var(--radius-lg) !important;
  background: var(--panel-bg) !important;
  box-shadow: var(--shadow-soft) !important;
  backdrop-filter: none !important;
}

.ui-card-muted,
.ui-choice-card,
.ui-page-header,
.ops-empty,
.ops-empty-inline,
.ops-note,
.search-row,
.locale-menu-link,
.ops-sidebar-link,
.ops-drawer-domain-link,
.account-sidebar-item,
.account-sidebar-seller-link,
.ops-footer-link-item,
.ops-footer-action-link {
  border: 1px solid var(--line-color) !important;
  border-radius: var(--radius-md) !important;
  background: var(--surface-2) !important;
  box-shadow: none !important;
}

.ui-modal-card,
.modal-card,
.toast-card,
.ui-toast {
  border: 1px solid var(--line-color) !important;
  border-radius: var(--radius-xl) !important;
  background: var(--panel-bg-strong) !important;
  box-shadow: var(--shadow-lg) !important;
}

.ui-modal-shell {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  align-items: center;
  justify-items: center;
  padding: var(--space-4);
}

.ui-modal-shell[hidden] {
  display: none !important;
}

.ui-modal-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: color-mix(in srgb, var(--bg-main) 72%, transparent);
  opacity: 0;
  transition: opacity var(--motion-normal) var(--ease-standard);
  backdrop-filter: blur(12px);
}

.ui-modal-dialog {
  position: relative;
  z-index: 1;
  width: min(100%, var(--ui-modal-max-width, var(--modal-max-width)));
  max-height: calc(100vh - (var(--space-4) * 2));
  opacity: 0;
  transform: translateY(16px) scale(0.985);
  transition:
    opacity var(--motion-normal) var(--ease-standard),
    transform var(--motion-normal) var(--ease-standard);
}

.ui-modal-shell.is-open .ui-modal-backdrop {
  opacity: 1;
}

.ui-modal-shell.is-open .ui-modal-dialog {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.ui-modal-shell[data-modal-placement="anchor-bottom"] {
  display: block;
  padding: 0;
  pointer-events: none;
}

.ui-modal-shell[data-modal-placement="anchor-bottom"] .ui-modal-backdrop {
  pointer-events: auto;
  background: transparent;
  backdrop-filter: none;
}

.ui-modal-shell[data-modal-placement="anchor-bottom"] .ui-modal-dialog {
  position: absolute;
  top: var(--ui-modal-anchor-top, var(--space-4));
  left: var(--ui-modal-anchor-left, var(--space-4));
  right: auto;
  width: min(100vw - (var(--space-4) * 2), var(--ui-modal-max-width, var(--modal-max-width)));
  max-height: min(42rem, calc(100vh - var(--ui-modal-anchor-top, var(--space-4)) - var(--space-4)));
  pointer-events: auto;
  transform: translateY(-8px) scale(.98);
  transform-origin: top center;
}

.ui-modal-shell[data-modal-placement="anchor-bottom"].is-open .ui-modal-dialog {
  transform: translateY(0) scale(1);
}

.alerts-center-anchored-dialog {
  --ui-modal-max-width: min(37rem, calc(100vw - (var(--space-4) * 2))) !important;
}

.alerts-center-anchored-dialog .ui-modal-card {
  border-radius: var(--radius-lg) !important;
}

.alerts-center-anchored-dialog .ui-modal-body {
  padding: 0;
  overflow: hidden;
}

.ui-modal-card {
  display: flex;
  flex-direction: column;
  max-height: inherit;
  overflow: hidden;
}

.ui-modal-head,
.ui-modal-foot {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5);
}

.ui-modal-head {
  border-bottom: 1px solid color-mix(in srgb, var(--line-color) 86%, transparent);
}

.ui-modal-foot {
  border-top: 1px solid color-mix(in srgb, var(--line-color) 86%, transparent);
}

.ui-modal-copy {
  min-width: 0;
}

.ui-modal-kicker {
  margin: 0 0 .35rem;
  color: var(--text-soft);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ui-modal-title {
  margin: 0;
  color: var(--text-primary);
  font-family: var(--font-heading);
  font-size: clamp(1.2rem, 1rem + .6vw, 1.7rem);
  line-height: 1.3;
}

.ui-modal-description {
  margin: .7rem 0 0;
  color: var(--text-muted);
  font-size: .95rem;
  line-height: 1.8;
}

.ui-modal-body {
  overflow: auto;
  padding: var(--space-5);
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.ui-modal-body::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.ui-modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.9rem;
  min-width: 2.9rem;
  height: 2.9rem;
  border: 1px solid var(--line-color);
  border-radius: var(--radius-full);
  background: var(--surface-2);
  color: var(--text-primary);
  box-shadow: none;
  transition:
    background-color var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard),
    color var(--motion-fast) var(--ease-standard),
    transform var(--motion-fast) var(--ease-standard);
}

.ui-modal-close:hover,
.ui-modal-close:focus-visible {
  border-color: color-mix(in srgb, var(--brand-500) 28%, var(--line-color));
  background: var(--ui-hover-bg);
  color: var(--brand-500);
  transform: translateY(-1px);
}

.ui-modal-close svg {
  width: var(--ui-icon-close-glyph, 1.18rem);
  height: var(--ui-icon-close-glyph, 1.18rem);
  fill: currentColor;
}

.ui-modal-form {
  display: grid;
  gap: var(--space-4);
}

.ui-modal-form p {
  margin: 0;
}

.ui-modal-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .75rem;
  padding-top: .25rem;
}

.workboard-create-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.workboard-create-field {
  display: grid;
  gap: .5rem;
  min-width: 0;
}

.workboard-create-field-wide {
  grid-column: 1 / -1;
}

.workboard-create-field > span,
.workboard-create-check > span {
  color: var(--link-color);
  font-size: .82rem;
  font-weight: 800;
  line-height: 1.7;
}

.workboard-create-check {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: .85rem;
  min-width: 0;
  min-height: var(--control-height-md);
  padding: .68rem .95rem;
  border: 1px solid var(--line-color);
  border-radius: var(--radius-md);
  background: var(--ui-control-bg);
}

.workboard-create-check .ui-checkbox {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
}

.product-info-report-form label,
.product-info-report-grid {
  display: grid;
  gap: .55rem;
}

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

.product-info-report-form label span {
  color: var(--text-primary);
  font-size: .86rem;
  font-weight: 800;
}

.product-info-report-input {
  width: 100%;
  min-height: 2.75rem;
  border: 1px solid color-mix(in srgb, var(--line-color) 82%, var(--text-soft));
  border-radius: .75rem;
  background: color-mix(in srgb, var(--surface-2) 88%, transparent);
  color: var(--text-primary);
  padding: .75rem .85rem;
}

textarea.product-info-report-input {
  min-height: 8rem;
  resize: vertical;
}

.product-info-report-input::placeholder {
  color: var(--text-soft);
}

.product-info-report-input:focus {
  border-color: color-mix(in srgb, var(--brand-500) 45%, var(--line-color));
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-500) 18%, transparent);
}

@media (max-width: 640px) {
  .workboard-create-grid,
  .product-info-report-grid {
    grid-template-columns: 1fr;
  }
}

.ui-confirm-modal-shell {
  z-index: var(--z-critical-overlay);
}

.ui-confirm-modal-dialog {
  --ui-modal-max-width: min(34rem, calc(100vw - 1.5rem));
}

.ui-confirm-body {
  display: grid;
  grid-template-columns: 3.1rem minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}

.ui-confirm-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.1rem;
  height: 3.1rem;
  border: 1px solid color-mix(in srgb, var(--brand-500) 24%, var(--line-color));
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand-500) 12%, var(--surface-2));
  color: color-mix(in srgb, var(--brand-500) 84%, var(--text-primary));
  box-shadow: inset 0 1px color-mix(in srgb, white 10%, transparent);
}

.ui-confirm-icon svg {
  width: 1.55rem;
  height: 1.55rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ui-confirm-message {
  margin: 0;
  color: var(--text-primary);
  font-size: 1.05rem;
  font-weight: 900;
  line-height: 1.9;
}

.ui-confirm-detail {
  margin: .55rem 0 0;
  color: var(--text-muted);
  font-size: .93rem;
  line-height: 1.8;
}

.ui-confirm-detail[hidden] {
  display: none;
}

.ui-confirm-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .75rem;
  width: 100%;
}

.ui-confirm-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.85rem;
  min-width: 7.5rem;
  padding: 0 1rem;
  border: 1px solid var(--line-color);
  border-radius: var(--radius-lg);
  font-weight: 900;
  transition:
    transform var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard),
    background-color var(--motion-fast) var(--ease-standard),
    color var(--motion-fast) var(--ease-standard);
}

.ui-confirm-button:hover,
.ui-confirm-button:focus-visible {
  transform: translateY(-1px);
}

.ui-confirm-button--cancel {
  background: var(--surface-2);
  color: var(--text-muted);
}

.ui-confirm-button--cancel:hover,
.ui-confirm-button--cancel:focus-visible {
  border-color: color-mix(in srgb, var(--text-muted) 30%, var(--line-color));
  background: var(--ui-hover-bg);
  color: var(--text-primary);
}

.ui-confirm-button--confirm {
  border-color: color-mix(in srgb, var(--brand-500) 72%, var(--line-color));
  background: linear-gradient(135deg, var(--brand-500), var(--brand-600));
  color: #fff;
  box-shadow: 0 14px 28px color-mix(in srgb, var(--brand-500) 28%, transparent);
}

.ui-confirm-button--confirm:hover,
.ui-confirm-button--confirm:focus-visible {
  border-color: color-mix(in srgb, var(--brand-400) 72%, var(--line-color));
  background: linear-gradient(135deg, var(--brand-400), var(--brand-500));
}

.ui-confirm-modal-shell[data-confirm-tone="danger"] .ui-confirm-icon {
  border-color: color-mix(in srgb, var(--danger) 34%, var(--line-color));
  background: color-mix(in srgb, var(--danger) 14%, var(--surface-2));
  color: color-mix(in srgb, var(--danger) 88%, var(--text-primary));
}

.ui-confirm-modal-shell[data-confirm-tone="danger"] .ui-confirm-button--confirm {
  border-color: color-mix(in srgb, var(--danger) 70%, var(--line-color));
  background: linear-gradient(135deg, var(--danger), #ef4444);
  box-shadow: 0 14px 28px color-mix(in srgb, var(--danger) 26%, transparent);
}

.ui-confirm-modal-shell[data-confirm-tone="warning"] .ui-confirm-icon {
  border-color: color-mix(in srgb, var(--warning) 42%, var(--line-color));
  background: color-mix(in srgb, var(--warning) 14%, var(--surface-2));
  color: color-mix(in srgb, var(--warning) 88%, var(--text-primary));
}

.ui-confirm-modal-shell[data-confirm-tone="warning"] .ui-confirm-button--confirm {
  border-color: color-mix(in srgb, var(--warning) 70%, var(--line-color));
  background: linear-gradient(135deg, var(--warning), color-mix(in srgb, var(--warning) 72%, #f59e0b));
  box-shadow: 0 14px 28px color-mix(in srgb, var(--warning) 24%, transparent);
}

.header-icon-alerts {
  border-color: color-mix(in srgb, var(--brand-500) 26%, var(--line-color)) !important;
  background: color-mix(in srgb, var(--brand-500) 10%, var(--surface-2)) !important;
  color: color-mix(in srgb, var(--brand-500) 78%, var(--text-primary)) !important;
}

.header-icon-alerts:hover,
.header-icon-alerts:focus-visible {
  border-color: color-mix(in srgb, var(--brand-500) 42%, var(--line-color)) !important;
  background: color-mix(in srgb, var(--brand-500) 14%, var(--surface-2)) !important;
  color: color-mix(in srgb, var(--brand-500) 92%, var(--text-primary)) !important;
}

.header-icon-alerts-active {
  border-color: color-mix(in srgb, var(--brand-500) 56%, var(--line-color)) !important;
  background:
    radial-gradient(circle at 50% 0, color-mix(in srgb, var(--brand-500) 18%, transparent), transparent 60%),
    color-mix(in srgb, var(--brand-500) 14%, var(--surface-2)) !important;
  color: color-mix(in srgb, var(--brand-500) 94%, var(--text-primary)) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-500) 18%, transparent) !important;
}

.header-icon-alerts-active:hover,
.header-icon-alerts-active:focus-visible {
  border-color: color-mix(in srgb, var(--brand-500) 66%, var(--line-color)) !important;
  background:
    radial-gradient(circle at 50% 0, color-mix(in srgb, var(--brand-500) 22%, transparent), transparent 60%),
    color-mix(in srgb, var(--brand-500) 18%, var(--surface-2)) !important;
}

.badge-count.badge-count-alerts {
  color: #f9fafb !important;
  border-color: color-mix(in srgb, var(--brand-500) 68%, transparent) !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand-500) 92%, white), var(--brand-600)) !important;
  box-shadow: none !important;
}

.alerts-center-shell,
.alerts-dashboard-shell {
  display: grid;
  gap: 1rem;
}

.alerts-center-popover {
  gap: .72rem;
  max-height: min(74vh, 41rem);
  overflow: hidden;
  padding: .85rem;
}

.alerts-center-brief {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .8rem;
  align-items: start;
}

.alerts-center-brief-copy {
  min-width: 0;
}

.alerts-center-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  border: 1px solid color-mix(in srgb, var(--line-color) 82%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-2) 84%, transparent);
  color: var(--text-muted);
  transition:
    border-color var(--motion-fast) var(--ease-standard),
    background-color var(--motion-fast) var(--ease-standard),
    color var(--motion-fast) var(--ease-standard),
    transform var(--motion-fast) var(--ease-standard);
}

.alerts-center-close:hover,
.alerts-center-close:focus-visible {
  border-color: color-mix(in srgb, var(--brand-500) 30%, var(--line-color));
  background: color-mix(in srgb, var(--brand-500) 10%, var(--surface-2));
  color: var(--text-primary);
  transform: translateY(-1px);
}

.alerts-center-close svg {
  width: var(--ui-icon-close-glyph, 1.18rem);
  height: var(--ui-icon-close-glyph, 1.18rem);
  fill: currentColor;
}

.alerts-center-quick-stats {
  display: grid;
  gap: .5rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.alerts-center-quick-stats span {
  display: grid;
  gap: .12rem;
  min-height: 3.15rem;
  padding: .56rem .68rem;
  border: 1px solid color-mix(in srgb, var(--line-color) 88%, transparent);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-2) 88%, transparent);
  color: var(--text-soft);
  font-size: .74rem;
  font-weight: 800;
  line-height: 1.45;
}

.alerts-center-quick-stats strong {
  color: var(--text-primary);
  font-size: 1rem;
  line-height: 1.1;
}

.alerts-center-hero,
.alerts-dashboard-head {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1.2fr) minmax(18rem, .8fr);
  align-items: start;
}

.alerts-center-hero {
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--brand-500) 16%, var(--line-color));
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--brand-500) 12%, transparent), transparent 34%),
    linear-gradient(145deg, color-mix(in srgb, var(--panel-bg-strong) 94%, transparent), var(--panel-bg));
}

.alerts-center-kicker {
  margin: 0 0 .35rem;
  color: var(--text-soft);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.alerts-center-heading {
  margin: 0;
  color: var(--text-primary);
  font-size: clamp(1.1rem, 1rem + .4vw, 1.45rem);
  line-height: 1.35;
}

.alerts-center-description {
  margin: .6rem 0 0;
  color: var(--text-muted);
  line-height: 1.9;
}

.alerts-center-stats {
  display: grid;
  gap: .75rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.alerts-center-stat {
  padding: .95rem;
  border: 1px solid color-mix(in srgb, var(--line-color) 88%, transparent);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-2) 92%, transparent);
}

.alerts-center-stat span {
  display: block;
  color: var(--text-soft);
  font-size: .82rem;
}

.alerts-center-stat strong {
  display: block;
  margin-top: .4rem;
  color: var(--text-primary);
  font-size: 1.35rem;
  line-height: 1.1;
}

.alerts-center-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .75rem;
}

.alerts-center-popover .alerts-center-toolbar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: .55rem;
}

.alerts-center-popover .alerts-center-toolbar .ops-button-secondary,
.alerts-center-popover .alerts-center-toolbar .ops-button-muted,
.alerts-center-popover .alerts-center-toolbar form,
.alerts-center-popover .alerts-center-toolbar form button {
  width: 100%;
}

.alerts-center-popover .ops-button,
.alerts-center-popover .ops-button-secondary,
.alerts-center-popover .ops-button-muted {
  min-height: 2.45rem;
  padding: .55rem .82rem;
  border-radius: var(--radius-md);
  font-size: .8rem;
  line-height: 1.4;
}

.alerts-center-list {
  display: grid;
  gap: .85rem;
}

.alerts-center-popover .alerts-center-list {
  gap: .55rem;
  max-height: min(42vh, 22rem);
  overflow: auto;
  padding-inline-end: .1rem;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.alerts-center-popover .alerts-center-list::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.alerts-center-load-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 2.8rem;
  padding: .45rem .75rem;
  color: var(--text-soft);
  font-size: .78rem;
  font-weight: 800;
  text-align: center;
}

.alerts-center-load-more::before {
  content: "";
  width: .62rem;
  height: .62rem;
  border: 2px solid color-mix(in srgb, var(--brand-500) 24%, transparent);
  border-top-color: color-mix(in srgb, var(--brand-500) 88%, var(--text-primary));
  border-radius: 999px;
  animation: alerts-center-load-more-spin .8s linear infinite;
}

.alerts-center-list-page {
  margin-top: .5rem;
}

@keyframes alerts-center-load-more-spin {
  to {
    transform: rotate(360deg);
  }
}

.alerts-entry {
  display: grid;
  gap: 1rem;
  align-items: start;
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--line-color) 90%, transparent);
  border-radius: calc(var(--radius-lg) + .1rem);
  background: color-mix(in srgb, var(--surface-2) 94%, transparent);
}

.alerts-entry-unread {
  border-color: color-mix(in srgb, var(--brand-500) 24%, var(--line-color));
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--brand-500) 5%, transparent), transparent 50%),
    color-mix(in srgb, var(--surface-2) 96%, transparent);
}

.alerts-entry-followed-up {
  border-color: color-mix(in srgb, var(--success) 20%, var(--line-color));
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--success) 5%, transparent), transparent 48%),
    color-mix(in srgb, var(--surface-2) 90%, transparent);
}

.alerts-entry-main {
  display: grid;
  gap: .9rem;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
}

.alerts-entry-indicator {
  width: .78rem;
  height: .78rem;
  margin-top: .5rem;
  border-radius: 999px;
  background: var(--text-soft);
  box-shadow: 0 0 0 6px color-mix(in srgb, currentColor 14%, transparent);
}

.alerts-entry-indicator-low {
  color: #9ca3af;
  background: #9ca3af;
}

.alerts-entry-indicator-normal {
  color: var(--brand-500);
  background: var(--brand-500);
}

.alerts-entry-indicator-high {
  color: var(--warning);
  background: var(--warning);
}

.alerts-entry-indicator-critical {
  color: #ef4444;
  background: #ef4444;
}

.alerts-entry-copy {
  min-width: 0;
}

.alerts-entry-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  align-items: center;
}

.alerts-entry-meta time {
  color: var(--text-soft);
  font-size: .82rem;
}

.alerts-entry-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.9rem;
  padding-inline: .7rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--line-color) 84%, transparent);
  background: color-mix(in srgb, var(--panel-bg) 92%, transparent);
  color: var(--text-muted);
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.2;
}

.alerts-entry-chip-low {
  color: #9ca3af;
}

.alerts-entry-chip-normal,
.alerts-entry-chip-status-unread {
  color: var(--brand-500);
  border-color: color-mix(in srgb, var(--brand-500) 24%, transparent);
  background: color-mix(in srgb, var(--brand-500) 10%, var(--surface-2));
}

.alerts-entry-chip-high {
  color: color-mix(in srgb, var(--warning) 88%, #f59e0b);
  border-color: color-mix(in srgb, var(--warning) 28%, transparent);
  background: color-mix(in srgb, var(--warning) 12%, var(--surface-2));
}

.alerts-entry-chip-critical {
  color: #ef4444;
  border-color: color-mix(in srgb, #ef4444 30%, transparent);
  background: color-mix(in srgb, #ef4444 10%, var(--surface-2));
}

.alerts-entry-chip-status-read,
.alerts-entry-chip-source,
.alerts-entry-chip-status-dismissed {
  color: var(--text-soft);
}

.alerts-entry-chip-status-read {
  color: color-mix(in srgb, var(--success) 86%, var(--text-primary));
  border-color: color-mix(in srgb, var(--success) 28%, transparent);
  background: color-mix(in srgb, var(--success) 10%, var(--surface-2));
}

.alerts-entry-followed-up .alerts-entry-indicator {
  color: var(--success);
  background: var(--success);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--success) 13%, transparent);
}

.alerts-entry-followed-up .alerts-entry-title {
  color: color-mix(in srgb, var(--text-primary) 88%, var(--success));
}

.alerts-entry-followed-up .alerts-entry-message {
  color: color-mix(in srgb, var(--text-muted) 88%, var(--success));
}

.alerts-entry-title {
  margin: .7rem 0 .35rem;
  color: var(--text-primary);
  font-size: 1rem;
  line-height: 1.7;
}

.alerts-entry-message {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.95;
  white-space: pre-line;
}

.alerts-entry-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
}

.alerts-entry-action-form {
  display: inline-flex;
}

.alerts-center-popover .alerts-entry {
  gap: .72rem;
  padding: .78rem;
  border-radius: var(--radius-md);
}

.alerts-center-popover .alerts-entry-main {
  gap: .7rem;
}

.alerts-center-popover .alerts-entry-indicator {
  width: .58rem;
  height: .58rem;
  margin-top: .45rem;
  box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 13%, transparent);
}

.alerts-center-popover .alerts-entry-title {
  margin: 0 0 .35rem;
  font-size: .94rem;
  line-height: 1.65;
}

.alerts-center-popover .alerts-entry-meta {
  gap: .35rem;
}

.alerts-center-popover .alerts-entry-chip {
  min-height: 1.55rem;
  padding-inline: .55rem;
  font-size: .68rem;
}

.alerts-center-popover .alerts-entry-meta time {
  font-size: .72rem;
}

.alerts-center-popover .alerts-entry-message {
  display: -webkit-box;
  margin-top: .36rem;
  overflow: hidden;
  color: var(--text-muted);
  font-size: .84rem;
  line-height: 1.85;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.alerts-center-popover .alerts-entry-actions {
  gap: .45rem;
  justify-content: flex-end;
}

.alerts-center-popover .alerts-entry-actions .ops-button,
.alerts-center-popover .alerts-entry-actions .ops-button-muted,
.alerts-center-popover .alerts-entry-actions form button {
  min-height: 2.25rem;
  padding: .44rem .8rem;
  font-size: .78rem;
}

.alerts-center-popover .alerts-center-footnote {
  padding: .1rem .2rem 0;
  font-size: .78rem;
}

.alerts-center-empty {
  display: grid;
  gap: .45rem;
  padding: 1.15rem;
  border: 1px dashed color-mix(in srgb, var(--line-color) 82%, transparent);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-2) 88%, transparent);
}

.alerts-center-empty strong {
  color: var(--text-primary);
}

.alerts-center-empty p,
.alerts-center-footnote {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.8;
}

@media (max-width: 640px) {
  .ui-modal-shell {
    padding: var(--space-3);
    align-items: end;
  }

  .ui-modal-dialog {
    width: 100%;
    max-height: calc(100vh - (var(--space-3) * 2));
  }

  .ui-modal-head,
  .ui-modal-foot,
  .ui-modal-body {
    padding: var(--space-4);
  }

  .ui-modal-actions {
    flex-direction: column-reverse;
  }

  .ui-confirm-body {
    grid-template-columns: 1fr;
  }

  .ui-confirm-icon {
    width: 2.75rem;
    height: 2.75rem;
  }

  .ui-confirm-actions {
    flex-direction: column-reverse;
  }

  .ui-modal-actions .ops-button,
  .ui-modal-actions .ops-button-muted,
  .ui-modal-actions .ops-button-secondary,
  .ui-confirm-button {
    width: 100%;
  }

  .alerts-center-toolbar,
  .alerts-entry-actions {
    flex-direction: column;
  }

  .alerts-center-popover {
    padding: .75rem;
  }

  .alerts-center-brief {
    gap: .65rem;
  }

  .alerts-center-quick-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .alerts-center-quick-stats span {
    padding-inline: .5rem;
    font-size: .68rem;
  }

  .alerts-center-popover .alerts-center-list {
    max-height: min(46vh, 22rem);
  }

  .alerts-center-toolbar .ops-button-secondary,
  .alerts-center-toolbar .ops-button-muted,
  .alerts-center-toolbar form,
  .alerts-center-toolbar form button,
  .alerts-entry-actions .ops-button,
  .alerts-entry-actions .ops-button-muted,
  .alerts-entry-actions form,
  .alerts-entry-actions form button {
    width: 100%;
  }

  .ui-modal-shell[data-modal-placement="anchor-bottom"] .ui-modal-dialog {
    left: var(--space-3);
    right: auto;
    width: calc(100vw - (var(--space-3) * 2));
    max-height: min(36rem, calc(100vh - var(--ui-modal-anchor-top, var(--space-3)) - var(--space-3)));
  }
}

@media (max-width: 920px) {
  .alerts-center-hero,
  .alerts-dashboard-head {
    grid-template-columns: minmax(0, 1fr);
  }

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

@media (max-width: 560px) {
  .alerts-center-stats {
    grid-template-columns: minmax(0, 1fr);
  }
}

.ui-drawer-panel,
.drawer-panel,
.profile-drawer-panel,
.cockpit-drawer-panel {
  border: 1px solid var(--line-color) !important;
  border-radius: var(--radius-xl) !important;
  background: var(--panel-bg-strong) !important;
  box-shadow: var(--shadow-md) !important;
}

.ui-button,
.ui-button-primary,
.ui-button-secondary,
.ui-button-muted,
.ui-button-ghost,
.ui-button-danger,
.cta-button,
.cta-button-secondary,
.ops-button,
.ops-button-secondary,
.ops-button-muted,
.ops-footer-action-link-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--control-height-md);
  padding-inline: 18px;
  border-radius: var(--radius-md) !important;
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.ui-button-sm {
  min-height: var(--control-height-sm);
  padding-inline: 16px;
  font-size: 0.875rem;
}

.ui-button-lg {
  min-height: var(--control-height-lg);
  padding-inline: 22px;
  font-size: 1rem;
}

.ui-button-primary,
.cta-button,
.ops-button,
.ops-footer-action-link-primary {
  border-color: var(--token-brand-primary) !important;
  background: var(--token-brand-primary) !important;
  color: #f9fafb !important;
  box-shadow: var(--shadow-brand) !important;
}

.ui-button-primary:hover,
.ui-button-primary:focus-visible,
.cta-button:hover,
.cta-button:focus-visible,
.ops-button:hover,
.ops-button:focus-visible,
.ops-footer-action-link-primary:hover,
.ops-footer-action-link-primary:focus-visible,
.cta-button.cta-button-cart:hover,
.cta-button.cta-button-cart:focus-visible,
.cta-button.cta-button-inquiry:hover,
.cta-button.cta-button-inquiry:focus-visible,
.cta-button.cta-button-wishlist:hover,
.cta-button.cta-button-wishlist:focus-visible {
  border-color: var(--token-brand-primary-hover) !important;
  background: var(--token-brand-primary-hover) !important;
  color: #f9fafb !important;
  box-shadow: var(--shadow-brand) !important;
  transform: translateY(-1px);
}

.cta-button.cta-button-cart,
.cta-button.cta-button-inquiry,
.cta-button.cta-button-wishlist {
  border-color: var(--token-brand-primary) !important;
  background: var(--token-brand-primary) !important;
  color: #f9fafb !important;
  box-shadow: var(--shadow-brand) !important;
}

.ui-button-secondary,
.cta-button-secondary,
.ops-button-secondary,
.cta-button.cta-button-secondary.cta-button-cart,
.cta-button.cta-button-secondary.cta-button-inquiry,
.cta-button.cta-button-secondary.cta-button-wishlist {
  border-color: var(--brand-500) !important;
  background: color-mix(in srgb, var(--brand-500) 8%, var(--surface)) !important;
  color: var(--brand-500) !important;
  box-shadow: none !important;
}

.ui-button-secondary:hover,
.ui-button-secondary:focus-visible,
.cta-button-secondary:hover,
.cta-button-secondary:focus-visible,
.ops-button-secondary:hover,
.ops-button-secondary:focus-visible {
  border-color: var(--brand-600) !important;
  background: var(--ui-hover-bg) !important;
  color: var(--brand-600) !important;
  box-shadow: none !important;
  transform: translateY(-1px);
}

.ui-button-muted,
.ui-button-ghost,
.ops-button-muted,
.nav-pill,
.icon-chip,
.toggle-chip,
.mobile-chip,
.ops-user-chip,
.ops-auth-link,
.ops-admin-link,
.header-icon-chip,
.header-icon-wishlist,
.header-icon-cart,
.header-icon-inquiry,
.header-icon-wishlist-active,
.header-icon-cart-active,
.header-icon-inquiry-active {
  border-color: var(--line-color) !important;
  background: var(--surface-2) !important;
  color: var(--text-primary) !important;
  box-shadow: none !important;
}

.ui-button-muted:hover,
.ui-button-muted:focus-visible,
.ui-button-ghost:hover,
.ui-button-ghost:focus-visible,
.ops-button-muted:hover,
.ops-button-muted:focus-visible,
.nav-pill:hover,
.nav-pill:focus-visible,
.icon-chip:hover,
.icon-chip:focus-visible,
.toggle-chip:hover,
.toggle-chip:focus-visible,
.mobile-chip:hover,
.mobile-chip:focus-visible,
.ops-user-chip:hover,
.ops-user-chip:focus-visible,
.ops-auth-link:hover,
.ops-auth-link:focus-visible,
.ops-admin-link:hover,
.ops-admin-link:focus-visible,
.header-icon-chip:hover,
.header-icon-chip:focus-visible,
.header-icon-wishlist:hover,
.header-icon-wishlist:focus-visible,
.header-icon-cart:hover,
.header-icon-cart:focus-visible,
.header-icon-inquiry:hover,
.header-icon-inquiry:focus-visible,
.header-icon-wishlist-active:hover,
.header-icon-wishlist-active:focus-visible,
.header-icon-cart-active:hover,
.header-icon-cart-active:focus-visible,
.header-icon-inquiry-active:hover,
.header-icon-inquiry-active:focus-visible,
.locale-menu-link:hover,
.locale-menu-link:focus-visible,
.search-row:hover,
.search-row:focus-within,
.ops-sidebar-link:hover,
.ops-drawer-domain-link:hover,
.account-sidebar-item:hover,
.account-sidebar-item:focus-visible,
.account-sidebar-seller-link:hover,
.account-sidebar-seller-link:focus-visible,
.ops-footer-link-item:hover,
.ops-footer-link-item:focus-visible,
.ops-footer-action-link:hover,
.ops-footer-action-link:focus-visible {
  border-color: color-mix(in srgb, var(--brand-500) 28%, var(--line-color)) !important;
  background: var(--ui-hover-bg) !important;
  color: var(--brand-500) !important;
  box-shadow: none !important;
}

.ui-button-danger {
  border-color: var(--danger) !important;
  background: var(--danger) !important;
  color: #f9fafb !important;
  box-shadow: none !important;
}

.ui-button-danger:hover,
.ui-button-danger:focus-visible {
  border-color: color-mix(in srgb, var(--danger) 88%, black) !important;
  background: color-mix(in srgb, var(--danger) 88%, black) !important;
}

.ui-button:disabled,
.ui-button-primary:disabled,
.ui-button-secondary:disabled,
.ui-button-muted:disabled,
.ui-button-ghost:disabled,
.ui-button-danger:disabled,
.cta-button:disabled,
.cta-button-secondary:disabled,
.ops-button:disabled,
.ops-button-secondary:disabled,
.ops-button-muted:disabled,
.cta-button[aria-disabled="true"],
.cta-button-secondary[aria-disabled="true"],
.ops-button[aria-disabled="true"],
.ops-button-secondary[aria-disabled="true"],
.ops-button-muted[aria-disabled="true"] {
  cursor: not-allowed;
  border-color: var(--line-color) !important;
  background: var(--disabled) !important;
  color: var(--text-soft) !important;
  box-shadow: none !important;
  opacity: 0.72;
  transform: none !important;
}

.ui-input,
.ui-select,
.ui-textarea,
.field-input,
.search-input,
.ops-form input,
.ops-form select,
.ops-form textarea {
  min-height: var(--control-height-md);
  border: 1px solid var(--line-color) !important;
  border-radius: var(--radius-md) !important;
  background: var(--ui-control-bg) !important;
  color: var(--text-primary) !important;
  box-shadow: none !important;
}

.ui-input::placeholder,
.ui-select::placeholder,
.ui-textarea::placeholder,
.field-input::placeholder,
.search-input::placeholder,
.ops-form input::placeholder,
.ops-form select::placeholder,
.ops-form textarea::placeholder {
  color: var(--text-soft) !important;
}

.ui-input:focus,
.ui-select:focus,
.ui-textarea:focus,
.field-input:focus,
.search-input:focus,
.ops-form input:focus,
.ops-form select:focus,
.ops-form textarea:focus {
  border-color: var(--brand-500) !important;
  box-shadow:
    0 0 0 1px var(--brand-500),
    0 0 0 4px color-mix(in srgb, var(--brand-500) 14%, transparent) !important;
}

.ui-input:disabled,
.ui-select:disabled,
.ui-textarea:disabled,
.field-input:disabled,
.search-input:disabled,
.ops-form input:disabled,
.ops-form select:disabled,
.ops-form textarea:disabled {
  cursor: not-allowed;
  background: var(--disabled) !important;
  color: var(--text-soft) !important;
}

.ui-textarea,
.ops-form textarea {
  min-height: 110px;
  resize: vertical;
}

.ui-checkbox,
.ui-radio,
.ui-switch {
  accent-color: var(--brand-500);
}

.nav-pill-active,
.toggle-chip-active,
.seller-filter-chip-active,
.ops-sidebar-link-active,
.ops-drawer-domain-link-active,
.locale-menu-link-active {
  border-color: color-mix(in srgb, var(--brand-500) 28%, var(--line-color)) !important;
  background: var(--ui-selected-bg) !important;
  color: var(--brand-500) !important;
  box-shadow: none !important;
}

.ui-badge,
.price-chip,
.spec-chip,
.ops-soft-badge,
.ops-badge,
.ops-meta span,
.ops-meta-chip,
.ops-sidebar-pill,
.seller-filter-chip,
.seller-note-chip,
.seller-priority,
.badge-count,
.account-sidebar-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--line-color) !important;
  border-radius: var(--radius-full) !important;
  background: var(--surface-2) !important;
  color: var(--text-muted) !important;
  box-shadow: none !important;
}

.ui-badge-strong,
.ops-badge-strong,
.ops-soft-badge-strong,
.ops-meta-chip-strong,
.ops-meta span.ops-meta-chip-strong,
.ops-meta span.product-class-type,
.price-chip-strong,
.spec-chip-strong,
.price-chip.price-chip-cart,
.price-chip.price-chip-inquiry,
.price-chip.price-chip-wishlist,
.header-icon-chip .badge-count,
.header-icon-chip .badge-count.badge-count-wishlist,
.header-icon-chip .badge-count.badge-count-cart,
.header-icon-chip .badge-count.badge-count-inquiry,
.drawer-link .badge-count.badge-count-wishlist,
.drawer-link .badge-count.badge-count-cart,
.drawer-link .badge-count.badge-count-inquiry {
  border-color: var(--brand-500) !important;
  background: var(--brand-500) !important;
  color: #f9fafb !important;
}

.ui-badge-success,
.ops-badge-success,
.ops-soft-badge-success,
.ops-meta-chip-success,
.ops-meta span.ops-meta-chip-success,
.price-chip-success,
.spec-chip-success,
.product-class-status-active,
.ui-badge[data-tone="success"],
.ops-badge[data-tone="success"],
.ops-soft-badge[data-tone="success"],
.ops-meta-chip[data-tone="success"],
.ops-meta span[data-tone="success"],
.price-chip[data-tone="success"],
.spec-chip[data-tone="success"],
.ui-badge[data-status="active"],
.ops-badge[data-status="active"],
.ops-soft-badge[data-status="active"],
.ops-meta-chip[data-status="active"],
.ops-meta span[data-status="active"],
.price-chip[data-status="active"],
.spec-chip[data-status="active"],
.account-sidebar-status-verified {
  border-color: color-mix(in srgb, var(--success) 24%, transparent) !important;
  background: color-mix(in srgb, var(--success) 10%, var(--surface-2)) !important;
  color: var(--success) !important;
}

.ui-badge-warning,
.ops-badge-warning,
.ops-soft-badge-warning,
.ops-meta-chip-warning,
.ops-meta span.ops-meta-chip-warning,
.price-chip-warning,
.spec-chip-warning,
.product-class-status-inactive,
.ops-meta span.product-class-option-count,
.ui-badge[data-tone="warning"],
.ops-badge[data-tone="warning"],
.ops-soft-badge[data-tone="warning"],
.ops-meta-chip[data-tone="warning"],
.ops-meta span[data-tone="warning"],
.price-chip[data-tone="warning"],
.spec-chip[data-tone="warning"],
.ui-badge[data-status="inactive"],
.ops-badge[data-status="inactive"],
.ops-soft-badge[data-status="inactive"],
.ops-meta-chip[data-status="inactive"],
.ops-meta span[data-status="inactive"],
.price-chip[data-status="inactive"],
.spec-chip[data-status="inactive"],
.account-sidebar-status-incomplete,
.ops-meta-chip-warning {
  border-color: color-mix(in srgb, var(--warning) 24%, transparent) !important;
  background: color-mix(in srgb, var(--warning) 12%, var(--surface-2)) !important;
  color: color-mix(in srgb, var(--warning) 70%, black) !important;
}

.ui-badge-info,
.ops-badge-info,
.ops-soft-badge-info,
.ops-meta-chip-info,
.ops-meta span.ops-meta-chip-info,
.price-chip-info,
.spec-chip-info,
.product-class-code,
.ops-meta span.product-class-attribute-count,
.ui-badge[data-tone="info"],
.ops-badge[data-tone="info"],
.ops-soft-badge[data-tone="info"],
.ops-meta-chip[data-tone="info"],
.ops-meta span[data-tone="info"],
.price-chip[data-tone="info"],
.spec-chip[data-tone="info"],
.ui-badge[data-status="pending"],
.ops-badge[data-status="pending"],
.ops-soft-badge[data-status="pending"],
.ops-meta-chip[data-status="pending"],
.ops-meta span[data-status="pending"],
.price-chip[data-status="pending"],
.spec-chip[data-status="pending"],
.account-sidebar-status-pending,
.account-sidebar-badge-info {
  border-color: color-mix(in srgb, var(--info) 24%, transparent) !important;
  background: color-mix(in srgb, var(--info) 10%, var(--surface-2)) !important;
  color: var(--info) !important;
}

.ui-badge-danger,
.ops-badge-danger,
.ops-soft-badge-danger,
.ops-meta-chip-danger,
.ops-meta span.ops-meta-chip-danger,
.price-chip-danger,
.spec-chip-danger,
.ui-badge[data-tone="danger"],
.ops-badge[data-tone="danger"],
.ops-soft-badge[data-tone="danger"],
.ops-meta-chip[data-tone="danger"],
.ops-meta span[data-tone="danger"],
.price-chip[data-tone="danger"],
.spec-chip[data-tone="danger"],
.ui-badge[data-status="danger"],
.ops-badge[data-status="danger"],
.ops-soft-badge[data-status="danger"],
.ops-meta-chip[data-status="danger"],
.ops-meta span[data-status="danger"],
.price-chip[data-status="danger"],
.spec-chip[data-status="danger"],
.account-sidebar-status-restricted,
.account-sidebar-badge-danger {
  border-color: color-mix(in srgb, var(--danger) 24%, transparent) !important;
  background: color-mix(in srgb, var(--danger) 10%, var(--surface-2)) !important;
  color: var(--danger) !important;
}

.ui-table-shell,
.ops-table-shell {
  border: 1px solid var(--line-color) !important;
  border-radius: var(--radius-lg) !important;
  background: var(--surface) !important;
  box-shadow: none !important;
}

.ui-table thead th,
.ops-table thead th {
  background: var(--surface-2) !important;
  color: var(--text-primary) !important;
}

.ui-table tbody tr:hover td,
.ops-table tbody tr:hover td {
  background: var(--ui-hover-bg);
}

.ui-tab-list {
  gap: 8px;
}

.ui-tab {
  border: 1px solid var(--line-color) !important;
  border-radius: var(--radius-md) !important;
  background: var(--surface-2) !important;
  color: var(--text-muted) !important;
}

.ui-tab:hover,
.ui-tab:focus-visible,
.ui-tab-active {
  border-color: color-mix(in srgb, var(--brand-500) 28%, var(--line-color)) !important;
  background: var(--ui-selected-bg) !important;
  color: var(--brand-500) !important;
}

.header-search-submit {
  border-color: transparent !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--brand-500) !important;
  box-shadow: none !important;
}

.header-search-submit:hover,
.header-search-submit:focus-visible {
  border-color: transparent !important;
  background: transparent !important;
  color: var(--brand-600) !important;
  box-shadow: none !important;
}

.locale-menu-list,
.search-results,
.search-results-shell .search-results {
  border: 1px solid var(--line-color) !important;
  border-radius: var(--radius-lg) !important;
  background: var(--panel-bg-strong) !important;
  box-shadow: var(--shadow-md) !important;
}

.locale-menu-title,
.ui-copy-soft,
.ui-field-hint,
.ops-kicker,
.ops-topbar-kicker,
.ops-footer-kicker,
.eyebrow {
  color: var(--text-soft) !important;
}

.ui-copy-muted,
.ops-empty,
.ops-empty-inline,
.ops-note,
.ops-footer-summary,
.ops-footer-bottom-copy {
  color: var(--text-muted) !important;
}

.ops-sidebar-link-order,
.ops-sidebar-group-kicker,
.ops-drawer-domain-link span,
.account-sidebar-item-icon,
.profile-mobile-trigger-icon,
.ops-footer-context-badge {
  background: color-mix(in srgb, var(--brand-500) 12%, var(--surface-2)) !important;
  color: var(--brand-500) !important;
}

/* 2026-04-09 VSCode-like neutral dark override */
:root:not([data-theme="light"]) {
  --token-brand-primary: #1a4fd8;
  --token-brand-primary-hover: #1846c7;
  --token-brand-primary-active: #163fb5;
  --token-brand-deep: var(--token-brand-primary-active);
  --token-brand-darkest: #0b0d10;
  --token-brand-primary-soft: rgba(26, 79, 216, 0.14);
  --token-brand-primary-soft-border: rgba(26, 79, 216, 0.3);
  --token-brand-primary-soft-text: #60a5fa;
  --token-brand-primary-active-text: #e5e7eb;
  --token-brand-primary-active-icon: #60a5fa;
  --token-accent-primary: #3b82f6;
  --token-accent-hover: #60a5fa;
  --token-accent-soft: #60a5fa;
  --token-surface-base: #0b0d10;
  --token-surface-subtle: #11151a;
  --token-surface-card: #11151a;
  --token-surface-elevated: #161b22;
  --token-border: #1f232a;
  --token-border-strong: #2a2f36;
  --token-border-active: rgba(26, 79, 216, 0.3);
  --token-text-strong: #e5e7eb;
  --token-text-medium: #9ca3af;
  --token-text-muted: #6b7280;
  --token-text-disabled: #6b7280;
  --shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.24);
  --shadow-md: 0 18px 34px rgba(0, 0, 0, 0.28);
  --shadow-lg: 0 24px 48px rgba(0, 0, 0, 0.34);
  --focus-ring-color: rgba(26, 79, 216, 0.22);
  --ui-bg-app: linear-gradient(180deg, #0b0d10, #11151a);
  --ui-control-bg: #11151a;
  --ui-control-bg-subtle: #11151a;
  --ui-hover-bg: #161b22;
  --ui-active-bg: rgba(26, 79, 216, 0.14);
  --ui-selected-bg: rgba(26, 79, 216, 0.14);
  --ui-disabled-bg: #161b22;
  --brand-400: var(--token-brand-primary-active-icon);
  --brand-500: var(--token-brand-primary);
  --brand-600: var(--token-brand-primary-hover);
  --brand-700: var(--token-brand-deep);
  --brand-800: var(--token-brand-darkest);
  --accent-gold: var(--token-accent-primary);
  --tech-blue: var(--token-brand-primary);
  --bg-main: var(--token-surface-base);
  --bg-deep: var(--token-surface-base);
  --bg-card: var(--token-surface-card);
  --surface-elevated: var(--token-surface-elevated);
  --surface-muted: var(--token-surface-subtle);
  --text-primary: var(--token-text-strong);
  --text-muted: var(--token-text-medium);
  --text-soft: var(--token-text-muted);
  --line-color: var(--token-border);
  --panel-bg: var(--token-surface-card);
  --panel-bg-strong: var(--token-surface-elevated);
  --link-color: var(--token-brand-primary-soft-text);
  --focus-ring: var(--focus-ring-color);
  --shadow-brand: var(--shadow-sm);
  --shadow-soft: var(--shadow-sm);
  --bg: var(--bg-main);
  --surface: var(--bg-card);
  --surface-2: var(--surface-muted);
  --surface-3: var(--panel-bg-strong);
  --text: var(--text-primary);
  --border: var(--line-color);
  --border-soft: color-mix(in srgb, var(--token-border) 84%, transparent);
  --border-strong: var(--token-border-strong);
  --primary: var(--token-brand-primary);
  --primary-contrast: #f9fafb;
  --success: var(--token-success);
  --warning: var(--token-warning);
  --danger: var(--token-error);
  --info: var(--token-info);
  --selected: var(--ui-selected-bg);
  --hover: var(--ui-hover-bg);
  --active: var(--ui-active-bg);
  --disabled: var(--ui-disabled-bg);
  color-scheme: dark;
}

:root:not([data-theme="light"]) body.profile-layout-page,
:root:not([data-theme="light"]) .profile-shell {
  --account-sidebar-bg: var(--token-surface-card);
  --account-sidebar-card-bg: var(--token-surface-elevated);
  --account-sidebar-hover: var(--token-surface-elevated);
  --account-sidebar-active-bg: var(--token-brand-primary-soft);
  --account-sidebar-badge-bg: var(--token-surface-subtle);
  --account-sidebar-badge-text: var(--token-text-muted);
}

:root:not([data-theme="light"]) .bg-app {
  background: linear-gradient(180deg, var(--token-surface-base), var(--token-surface-subtle)) !important;
}

:root:not([data-theme="light"]) .glass-panel,
:root:not([data-theme="light"]) .product-card,
:root:not([data-theme="light"]) .category-card,
:root:not([data-theme="light"]) .search-results,
:root:not([data-theme="light"]) .drawer-panel,
:root:not([data-theme="light"]) .modal-card,
:root:not([data-theme="light"]) .ui-card,
:root:not([data-theme="light"]) .ui-panel,
:root:not([data-theme="light"]) .ui-stat-card,
:root:not([data-theme="light"]) .ui-empty-state,
:root:not([data-theme="light"]) .ui-topbar,
:root:not([data-theme="light"]) .ui-sidebar,
:root:not([data-theme="light"]) .ui-footer,
:root:not([data-theme="light"]) .ui-drawer-panel,
:root:not([data-theme="light"]) .site-footer,
:root:not([data-theme="light"]) .site-footer-brand-block,
:root:not([data-theme="light"]) .site-footer-card,
:root:not([data-theme="light"]) .site-footer-link-group {
  border-color: var(--token-border) !important;
  background: var(--token-surface-card) !important;
  box-shadow: var(--shadow-sm) !important;
}

:root:not([data-theme="light"]) .ui-modal-card,
:root:not([data-theme="light"]) .modal-card,
:root:not([data-theme="light"]) .toast-card,
:root:not([data-theme="light"]) .ui-toast,
:root:not([data-theme="light"]) .desktop-cart-preview-panel,
:root:not([data-theme="light"]) .profile-drawer-panel,
:root:not([data-theme="light"]) .cockpit-drawer-panel {
  border-color: var(--token-border-strong) !important;
  background: var(--token-surface-elevated) !important;
  box-shadow: var(--shadow-md) !important;
}

:root:not([data-theme="light"]) .desktop-cart-preview-panel-active {
  border-color: var(--token-border-active) !important;
  box-shadow: var(--shadow-lg) !important;
}

:root:not([data-theme="light"]) .site-header-elevated {
  background: var(--token-surface-card) !important;
  box-shadow: var(--shadow-sm) !important;
}

:root:not([data-theme="light"]) .auth-kicker,
:root:not([data-theme="light"]) .auth-flow-kicker,
:root:not([data-theme="light"]) .desktop-cart-preview-kicker,
:root:not([data-theme="light"]) .toast-kicker,
:root:not([data-theme="light"]) .site-footer-kicker,
:root:not([data-theme="light"]) .site-footer-card-kicker,
:root:not([data-theme="light"]) .site-footer-social-state,
:root:not([data-theme="light"]) .site-footer-trust-status,
:root:not([data-theme="light"]) .drawer-user-chip,
:root:not([data-theme="light"]) .ops-kicker,
:root:not([data-theme="light"]) .ops-topbar-kicker,
:root:not([data-theme="light"]) .ops-footer-kicker,
:root:not([data-theme="light"]) .eyebrow {
  color: var(--token-text-muted) !important;
}

:root:not([data-theme="light"]) .ui-copy-muted,
:root:not([data-theme="light"]) .ops-empty,
:root:not([data-theme="light"]) .ops-empty-inline,
:root:not([data-theme="light"]) .ops-note,
:root:not([data-theme="light"]) .ops-footer-summary,
:root:not([data-theme="light"]) .ops-footer-bottom-copy,
:root:not([data-theme="light"]) .desktop-cart-preview-meta,
:root:not([data-theme="light"]) .desktop-cart-preview-empty,
:root:not([data-theme="light"]) .desktop-cart-preview-empty p,
:root:not([data-theme="light"]) .toast-brand,
:root:not([data-theme="light"]) .site-footer-body,
:root:not([data-theme="light"]) .site-footer-copy,
:root:not([data-theme="light"]) .site-footer-trust-copy,
:root:not([data-theme="light"]) .account-sidebar-group-title,
:root:not([data-theme="light"]) .profile-mobile-trigger-copy small,
:root:not([data-theme="light"]) .cockpit-mobile-trigger-copy small {
  color: var(--token-text-medium) !important;
}

:root:not([data-theme="light"]) .ui-input,
:root:not([data-theme="light"]) .ui-select,
:root:not([data-theme="light"]) .ui-textarea,
:root:not([data-theme="light"]) .field-input,
:root:not([data-theme="light"]) .search-input,
:root:not([data-theme="light"]) .ops-form input,
:root:not([data-theme="light"]) .ops-form select,
:root:not([data-theme="light"]) .ops-form textarea {
  border-color: var(--token-border) !important;
  background: #0b0d10 !important;
  color: var(--token-text-strong) !important;
}

:root:not([data-theme="light"]) .ui-input::placeholder,
:root:not([data-theme="light"]) .ui-select::placeholder,
:root:not([data-theme="light"]) .ui-textarea::placeholder,
:root:not([data-theme="light"]) .field-input::placeholder,
:root:not([data-theme="light"]) .search-input::placeholder,
:root:not([data-theme="light"]) .ops-form input::placeholder,
:root:not([data-theme="light"]) .ops-form select::placeholder,
:root:not([data-theme="light"]) .ops-form textarea::placeholder {
  color: var(--token-text-muted) !important;
}

:root:not([data-theme="light"]) .ui-input:focus,
:root:not([data-theme="light"]) .ui-select:focus,
:root:not([data-theme="light"]) .ui-textarea:focus,
:root:not([data-theme="light"]) .field-input:focus,
:root:not([data-theme="light"]) .search-input:focus,
:root:not([data-theme="light"]) .ops-form input:focus,
:root:not([data-theme="light"]) .ops-form select:focus,
:root:not([data-theme="light"]) .ops-form textarea:focus {
  border-color: var(--token-brand-primary) !important;
  box-shadow:
    0 0 0 1px var(--token-brand-primary),
    0 0 0 4px color-mix(in srgb, var(--token-brand-primary) 22%, transparent) !important;
}

:root:not([data-theme="light"]) .ui-input:disabled,
:root:not([data-theme="light"]) .ui-select:disabled,
:root:not([data-theme="light"]) .ui-textarea:disabled,
:root:not([data-theme="light"]) .field-input:disabled,
:root:not([data-theme="light"]) .search-input:disabled,
:root:not([data-theme="light"]) .ops-form input:disabled,
:root:not([data-theme="light"]) .ops-form select:disabled,
:root:not([data-theme="light"]) .ops-form textarea:disabled {
  border-color: var(--token-border) !important;
  background: var(--token-surface-card) !important;
  color: var(--token-text-disabled) !important;
}

:root:not([data-theme="light"]) .ui-button-secondary,
:root:not([data-theme="light"]) .cta-button-secondary,
:root:not([data-theme="light"]) .ops-button-secondary,
:root:not([data-theme="light"]) .cta-button.cta-button-secondary.cta-button-cart,
:root:not([data-theme="light"]) .cta-button.cta-button-secondary.cta-button-inquiry,
:root:not([data-theme="light"]) .cta-button.cta-button-secondary.cta-button-wishlist,
:root:not([data-theme="light"]) .ui-button-muted,
:root:not([data-theme="light"]) .ui-button-ghost,
:root:not([data-theme="light"]) .ops-button-muted,
:root:not([data-theme="light"]) .nav-pill,
:root:not([data-theme="light"]) .icon-chip,
:root:not([data-theme="light"]) .toggle-chip,
:root:not([data-theme="light"]) .mobile-chip,
:root:not([data-theme="light"]) .ops-user-chip,
:root:not([data-theme="light"]) .ops-auth-link,
:root:not([data-theme="light"]) .ops-admin-link,
:root:not([data-theme="light"]) .header-icon-chip,
:root:not([data-theme="light"]) .header-icon-wishlist,
:root:not([data-theme="light"]) .header-icon-cart,
:root:not([data-theme="light"]) .header-icon-inquiry,
:root:not([data-theme="light"]) .header-search-submit,
:root:not([data-theme="light"]) .locale-menu-link,
:root:not([data-theme="light"]) .drawer-link,
:root:not([data-theme="light"]) .profile-mobile-trigger,
:root:not([data-theme="light"]) .cockpit-mobile-trigger,
:root:not([data-theme="light"]) .account-sidebar-item,
:root:not([data-theme="light"]) .account-sidebar-seller-link,
:root:not([data-theme="light"]) .ops-sidebar-link,
:root:not([data-theme="light"]) .ops-drawer-domain-link,
:root:not([data-theme="light"]) .ops-footer-link-item,
:root:not([data-theme="light"]) .ops-footer-action-link,
:root:not([data-theme="light"]) .desktop-cart-preview-link,
:root:not([data-theme="light"]) .toast-action,
:root:not([data-theme="light"]) .profile-drawer-close,
:root:not([data-theme="light"]) .cockpit-drawer-close {
  border-color: var(--token-border) !important;
  background: var(--token-surface-subtle) !important;
  color: var(--token-text-medium) !important;
  box-shadow: none !important;
}

:root:not([data-theme="light"]) .ui-button-secondary:hover,
:root:not([data-theme="light"]) .ui-button-secondary:focus-visible,
:root:not([data-theme="light"]) .cta-button-secondary:hover,
:root:not([data-theme="light"]) .cta-button-secondary:focus-visible,
:root:not([data-theme="light"]) .ops-button-secondary:hover,
:root:not([data-theme="light"]) .ops-button-secondary:focus-visible,
:root:not([data-theme="light"]) .ui-button-muted:hover,
:root:not([data-theme="light"]) .ui-button-muted:focus-visible,
:root:not([data-theme="light"]) .ui-button-ghost:hover,
:root:not([data-theme="light"]) .ui-button-ghost:focus-visible,
:root:not([data-theme="light"]) .ops-button-muted:hover,
:root:not([data-theme="light"]) .ops-button-muted:focus-visible,
:root:not([data-theme="light"]) .nav-pill:hover,
:root:not([data-theme="light"]) .nav-pill:focus-visible,
:root:not([data-theme="light"]) .icon-chip:hover,
:root:not([data-theme="light"]) .icon-chip:focus-visible,
:root:not([data-theme="light"]) .toggle-chip:hover,
:root:not([data-theme="light"]) .toggle-chip:focus-visible,
:root:not([data-theme="light"]) .mobile-chip:hover,
:root:not([data-theme="light"]) .mobile-chip:focus-visible,
:root:not([data-theme="light"]) .ops-user-chip:hover,
:root:not([data-theme="light"]) .ops-user-chip:focus-visible,
:root:not([data-theme="light"]) .ops-auth-link:hover,
:root:not([data-theme="light"]) .ops-auth-link:focus-visible,
:root:not([data-theme="light"]) .ops-admin-link:hover,
:root:not([data-theme="light"]) .ops-admin-link:focus-visible,
:root:not([data-theme="light"]) .header-icon-chip:hover,
:root:not([data-theme="light"]) .header-icon-chip:focus-visible,
:root:not([data-theme="light"]) .header-icon-wishlist:hover,
:root:not([data-theme="light"]) .header-icon-wishlist:focus-visible,
:root:not([data-theme="light"]) .header-icon-cart:hover,
:root:not([data-theme="light"]) .header-icon-cart:focus-visible,
:root:not([data-theme="light"]) .header-icon-inquiry:hover,
:root:not([data-theme="light"]) .header-icon-inquiry:focus-visible,
:root:not([data-theme="light"]) .header-search-submit:hover,
:root:not([data-theme="light"]) .header-search-submit:focus-visible,
:root:not([data-theme="light"]) .locale-menu-link:hover,
:root:not([data-theme="light"]) .locale-menu-link:focus-visible,
:root:not([data-theme="light"]) .drawer-link:hover,
:root:not([data-theme="light"]) .drawer-link:focus-visible,
:root:not([data-theme="light"]) .profile-mobile-trigger:hover,
:root:not([data-theme="light"]) .profile-mobile-trigger:focus-visible,
:root:not([data-theme="light"]) .cockpit-mobile-trigger:hover,
:root:not([data-theme="light"]) .cockpit-mobile-trigger:focus-visible,
:root:not([data-theme="light"]) .account-sidebar-item:hover,
:root:not([data-theme="light"]) .account-sidebar-item:focus-visible,
:root:not([data-theme="light"]) .account-sidebar-seller-link:hover,
:root:not([data-theme="light"]) .account-sidebar-seller-link:focus-visible,
:root:not([data-theme="light"]) .ops-sidebar-link:hover,
:root:not([data-theme="light"]) .ops-drawer-domain-link:hover,
:root:not([data-theme="light"]) .ops-footer-link-item:hover,
:root:not([data-theme="light"]) .ops-footer-link-item:focus-visible,
:root:not([data-theme="light"]) .ops-footer-action-link:hover,
:root:not([data-theme="light"]) .ops-footer-action-link:focus-visible,
:root:not([data-theme="light"]) .desktop-cart-preview-link:hover,
:root:not([data-theme="light"]) .desktop-cart-preview-link:focus-visible,
:root:not([data-theme="light"]) .toast-action:hover,
:root:not([data-theme="light"]) .toast-action:focus-visible,
:root:not([data-theme="light"]) .profile-drawer-close:hover,
:root:not([data-theme="light"]) .profile-drawer-close:focus-visible,
:root:not([data-theme="light"]) .cockpit-drawer-close:hover,
:root:not([data-theme="light"]) .cockpit-drawer-close:focus-visible {
  border-color: var(--token-border-strong) !important;
  background: var(--token-surface-elevated) !important;
  color: var(--token-text-strong) !important;
  box-shadow: none !important;
}

:root:not([data-theme="light"]) .nav-pill-active,
:root:not([data-theme="light"]) .toggle-chip-active,
:root:not([data-theme="light"]) .seller-filter-chip-active,
:root:not([data-theme="light"]) .ops-sidebar-link-active,
:root:not([data-theme="light"]) .ops-drawer-domain-link-active,
:root:not([data-theme="light"]) .locale-menu-link-active,
:root:not([data-theme="light"]) .account-sidebar-item.is-active,
:root:not([data-theme="light"]) .header-icon-wishlist-active,
:root:not([data-theme="light"]) .header-icon-cart-active,
:root:not([data-theme="light"]) .header-icon-inquiry-active,
:root:not([data-theme="light"]) .drawer-link-wishlist-active,
:root:not([data-theme="light"]) .drawer-link-cart-active,
:root:not([data-theme="light"]) .drawer-link-inquiry-active,
:root:not([data-theme="light"]) .quantity-stepper-cart,
:root:not([data-theme="light"]) .quantity-stepper-inquiry,
:root:not([data-theme="light"]) .toast-card-cart .toast-media,
:root:not([data-theme="light"]) .toast-card-cart .toast-action,
:root:not([data-theme="light"]) .toast-card-inquiry .toast-media,
:root:not([data-theme="light"]) .toast-card-inquiry .toast-action,
:root:not([data-theme="light"]) .price-chip.price-chip-cart,
:root:not([data-theme="light"]) .price-chip.price-chip-inquiry,
:root:not([data-theme="light"]) .price-chip.price-chip-wishlist,
:root:not([data-theme="light"]) .brand-alert {
  border-color: var(--token-border-active) !important;
  background: var(--token-brand-primary-soft) !important;
  color: var(--token-brand-primary-active-text) !important;
  box-shadow: none !important;
}

:root:not([data-theme="light"]) .header-icon-wishlist-active:hover,
:root:not([data-theme="light"]) .header-icon-wishlist-active:focus-visible,
:root:not([data-theme="light"]) .header-icon-cart-active:hover,
:root:not([data-theme="light"]) .header-icon-cart-active:focus-visible,
:root:not([data-theme="light"]) .header-icon-inquiry-active:hover,
:root:not([data-theme="light"]) .header-icon-inquiry-active:focus-visible,
:root:not([data-theme="light"]) .drawer-link-wishlist-active:hover,
:root:not([data-theme="light"]) .drawer-link-wishlist-active:focus-visible,
:root:not([data-theme="light"]) .drawer-link-cart-active:hover,
:root:not([data-theme="light"]) .drawer-link-cart-active:focus-visible,
:root:not([data-theme="light"]) .drawer-link-inquiry-active:hover,
:root:not([data-theme="light"]) .drawer-link-inquiry-active:focus-visible,
:root:not([data-theme="light"]) .quantity-stepper-cart:hover,
:root:not([data-theme="light"]) .quantity-stepper-inquiry:hover {
  border-color: var(--token-border-active) !important;
  background: color-mix(in srgb, var(--token-brand-primary) 18%, var(--token-surface-subtle)) !important;
  color: var(--token-brand-primary-active-text) !important;
}

:root:not([data-theme="light"]) .ops-sidebar-link-order,
:root:not([data-theme="light"]) .ops-sidebar-group-kicker,
:root:not([data-theme="light"]) .ops-drawer-domain-link span,
:root:not([data-theme="light"]) .account-sidebar-item-icon,
:root:not([data-theme="light"]) .profile-mobile-trigger-icon,
:root:not([data-theme="light"]) .cockpit-mobile-trigger-icon,
:root:not([data-theme="light"]) .ops-footer-context-badge {
  background: var(--token-surface-subtle) !important;
  color: var(--token-text-muted) !important;
}

:root:not([data-theme="light"]) .ops-sidebar-link-active .ops-sidebar-link-order,
:root:not([data-theme="light"]) .ops-drawer-domain-link-active span,
:root:not([data-theme="light"]) .account-sidebar-item.is-active .account-sidebar-item-icon,
:root:not([data-theme="light"]) .header-icon-wishlist-active,
:root:not([data-theme="light"]) .header-icon-cart-active,
:root:not([data-theme="light"]) .header-icon-inquiry-active {
  color: var(--token-brand-primary-active-icon) !important;
}

/* Sidebar icon accents stay scoped to the icon chip, not the menu item. */
.account-sidebar-item-icon {
  --account-sidebar-icon-color: var(--brand-400);
  --account-sidebar-icon-surface: color-mix(in srgb, var(--account-sidebar-icon-color) 15%, var(--surface-2));
  width: 1.55rem;
  height: 1.55rem;
  border: 1px solid color-mix(in srgb, var(--account-sidebar-icon-color) 26%, transparent);
  border-radius: 0.58rem;
  background:
    radial-gradient(circle at 32% 18%, color-mix(in srgb, var(--account-sidebar-icon-color) 28%, white 8%), transparent 42%),
    var(--account-sidebar-icon-surface) !important;
  color: var(--account-sidebar-icon-color) !important;
  box-shadow:
    0 8px 18px color-mix(in srgb, var(--account-sidebar-icon-color) 13%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition:
    transform 150ms ease-out,
    border-color 150ms ease-out,
    background-color 150ms ease-out,
    color 150ms ease-out,
    box-shadow 150ms ease-out;
}

.account-sidebar-item-icon[data-sidebar-icon="dashboard"],
.account-sidebar-item-icon[data-sidebar-icon="credit-card"],
.account-sidebar-item-icon[data-sidebar-icon="settings"] {
  --account-sidebar-icon-color: var(--brand-400);
}

.account-sidebar-item-icon[data-sidebar-icon="user"] {
  --account-sidebar-icon-color: var(--info);
}

.account-sidebar-item-icon[data-sidebar-icon="bell"],
.account-sidebar-item-icon[data-sidebar-icon="ticket"],
.account-sidebar-item-icon[data-sidebar-icon="percent"] {
  --account-sidebar-icon-color: var(--warning);
}

.account-sidebar-item-icon[data-sidebar-icon="shopping-bag"],
.account-sidebar-item-icon[data-sidebar-icon="wallet"],
.account-sidebar-item-icon[data-sidebar-icon="chat"] {
  --account-sidebar-icon-color: var(--success);
}

.account-sidebar-item-icon[data-sidebar-icon="quote"],
.account-sidebar-item-icon[data-sidebar-icon="location"],
.account-sidebar-item-icon[data-sidebar-icon="calendar"] {
  --account-sidebar-icon-color: #38bdf8;
}

.account-sidebar-item-icon[data-sidebar-icon="layers"],
.account-sidebar-item-icon[data-sidebar-icon="image"] {
  --account-sidebar-icon-color: #a78bfa;
}

.account-sidebar-item-icon[data-sidebar-icon="package"] {
  --account-sidebar-icon-color: #fb923c;
}

.account-sidebar-item-icon[data-sidebar-icon="heart"],
.account-sidebar-item-icon[data-sidebar-icon="logout"],
.account-sidebar-item.is-danger .account-sidebar-item-icon {
  --account-sidebar-icon-color: #fb7185;
}

.account-sidebar-item-icon[data-sidebar-icon="store"],
.account-sidebar-item-icon[data-sidebar-icon="briefcase"],
.account-sidebar-item-icon[data-sidebar-icon="check-square"] {
  --account-sidebar-icon-color: #2dd4bf;
}

.account-sidebar-item:hover .account-sidebar-item-icon,
.account-sidebar-item:focus-visible .account-sidebar-item-icon,
.account-sidebar-item.is-active .account-sidebar-item-icon {
  border-color: color-mix(in srgb, var(--account-sidebar-icon-color) 48%, transparent);
  background:
    radial-gradient(circle at 30% 18%, color-mix(in srgb, white 34%, var(--account-sidebar-icon-color) 66%), transparent 44%),
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--account-sidebar-icon-color) 72%, var(--surface-2)),
      color-mix(in srgb, var(--account-sidebar-icon-color) 38%, var(--surface-2))
    ) !important;
  color: #f8fafc !important;
  box-shadow:
    0 10px 22px color-mix(in srgb, var(--account-sidebar-icon-color) 22%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
  transform: translateY(-1px);
}

:root[data-theme="light"] .account-sidebar-item-icon {
  --account-sidebar-icon-surface: color-mix(in srgb, var(--account-sidebar-icon-color) 11%, #ffffff);
  box-shadow:
    0 8px 18px color-mix(in srgb, var(--account-sidebar-icon-color) 12%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

:root:not([data-theme="light"]) .account-sidebar-item-icon {
  background:
    radial-gradient(circle at 32% 18%, color-mix(in srgb, var(--account-sidebar-icon-color) 24%, #ffffff 6%), transparent 42%),
    color-mix(in srgb, var(--account-sidebar-icon-color) 14%, var(--token-surface-subtle)) !important;
  color: var(--account-sidebar-icon-color) !important;
}

:root:not([data-theme="light"]) .account-sidebar-item:hover .account-sidebar-item-icon,
:root:not([data-theme="light"]) .account-sidebar-item:focus-visible .account-sidebar-item-icon,
:root:not([data-theme="light"]) .account-sidebar-item.is-active .account-sidebar-item-icon {
  background:
    radial-gradient(circle at 30% 18%, color-mix(in srgb, #ffffff 32%, var(--account-sidebar-icon-color) 68%), transparent 44%),
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--account-sidebar-icon-color) 68%, var(--token-surface-subtle)),
      color-mix(in srgb, var(--account-sidebar-icon-color) 36%, var(--token-surface-subtle))
    ) !important;
  color: #f8fafc !important;
}

:root:not([data-theme="light"]) .ui-badge,
:root:not([data-theme="light"]) .price-chip,
:root:not([data-theme="light"]) .spec-chip,
:root:not([data-theme="light"]) .ops-soft-badge,
:root:not([data-theme="light"]) .ops-badge,
:root:not([data-theme="light"]) .ops-meta span,
:root:not([data-theme="light"]) .ops-meta-chip,
:root:not([data-theme="light"]) .ops-sidebar-pill,
:root:not([data-theme="light"]) .seller-filter-chip,
:root:not([data-theme="light"]) .seller-note-chip,
:root:not([data-theme="light"]) .seller-priority,
:root:not([data-theme="light"]) .badge-count,
:root:not([data-theme="light"]) .account-sidebar-status,
:root:not([data-theme="light"]) .drawer-user-chip,
:root:not([data-theme="light"]) .site-footer-kicker,
:root:not([data-theme="light"]) .site-footer-card-kicker,
:root:not([data-theme="light"]) .site-footer-social-state,
:root:not([data-theme="light"]) .site-footer-trust-status {
  border-color: var(--token-border) !important;
  background: var(--token-surface-subtle) !important;
  color: var(--token-text-muted) !important;
  box-shadow: none !important;
}

:root:not([data-theme="light"]) .ui-badge-strong,
:root:not([data-theme="light"]) .ops-badge-strong,
:root:not([data-theme="light"]) .ops-soft-badge-strong,
:root:not([data-theme="light"]) .ops-meta-chip-strong,
:root:not([data-theme="light"]) .ops-meta span.ops-meta-chip-strong,
:root:not([data-theme="light"]) .ops-meta span.product-class-type,
:root:not([data-theme="light"]) .price-chip-strong,
:root:not([data-theme="light"]) .spec-chip-strong,
:root:not([data-theme="light"]) .header-icon-chip .badge-count,
:root:not([data-theme="light"]) .header-icon-chip .badge-count.badge-count-wishlist,
:root:not([data-theme="light"]) .header-icon-chip .badge-count.badge-count-cart,
:root:not([data-theme="light"]) .header-icon-chip .badge-count.badge-count-inquiry,
:root:not([data-theme="light"]) .drawer-link .badge-count.badge-count-wishlist,
:root:not([data-theme="light"]) .drawer-link .badge-count.badge-count-cart,
:root:not([data-theme="light"]) .drawer-link .badge-count.badge-count-inquiry {
  border-color: var(--token-border-active) !important;
  background: color-mix(in srgb, var(--token-brand-primary) 18%, var(--token-surface-subtle)) !important;
  color: var(--token-brand-primary-active-text) !important;
}

:root:not([data-theme="light"]) .ui-badge-success,
:root:not([data-theme="light"]) .ops-badge-success,
:root:not([data-theme="light"]) .ops-soft-badge-success,
:root:not([data-theme="light"]) .ops-meta-chip-success,
:root:not([data-theme="light"]) .ops-meta span.ops-meta-chip-success,
:root:not([data-theme="light"]) .price-chip-success,
:root:not([data-theme="light"]) .spec-chip-success,
:root:not([data-theme="light"]) .product-class-status-active,
:root:not([data-theme="light"]) .ui-badge[data-tone="success"],
:root:not([data-theme="light"]) .ops-badge[data-tone="success"],
:root:not([data-theme="light"]) .ops-soft-badge[data-tone="success"],
:root:not([data-theme="light"]) .ops-meta-chip[data-tone="success"],
:root:not([data-theme="light"]) .ops-meta span[data-tone="success"],
:root:not([data-theme="light"]) .price-chip[data-tone="success"],
:root:not([data-theme="light"]) .spec-chip[data-tone="success"],
:root:not([data-theme="light"]) .ui-badge[data-status="active"],
:root:not([data-theme="light"]) .ops-badge[data-status="active"],
:root:not([data-theme="light"]) .ops-soft-badge[data-status="active"],
:root:not([data-theme="light"]) .ops-meta-chip[data-status="active"],
:root:not([data-theme="light"]) .ops-meta span[data-status="active"],
:root:not([data-theme="light"]) .price-chip[data-status="active"],
:root:not([data-theme="light"]) .spec-chip[data-status="active"],
:root:not([data-theme="light"]) .account-sidebar-status-verified,
:root:not([data-theme="light"]) .brand-success {
  border-color: color-mix(in srgb, var(--success) 24%, transparent) !important;
  background: color-mix(in srgb, var(--success) 10%, var(--token-surface-subtle)) !important;
  color: var(--success) !important;
}

:root:not([data-theme="light"]) .ui-badge-warning,
:root:not([data-theme="light"]) .ops-badge-warning,
:root:not([data-theme="light"]) .ops-soft-badge-warning,
:root:not([data-theme="light"]) .ops-meta-chip-warning,
:root:not([data-theme="light"]) .ops-meta span.ops-meta-chip-warning,
:root:not([data-theme="light"]) .price-chip-warning,
:root:not([data-theme="light"]) .spec-chip-warning,
:root:not([data-theme="light"]) .product-class-status-inactive,
:root:not([data-theme="light"]) .ops-meta span.product-class-option-count,
:root:not([data-theme="light"]) .ui-badge[data-tone="warning"],
:root:not([data-theme="light"]) .ops-badge[data-tone="warning"],
:root:not([data-theme="light"]) .ops-soft-badge[data-tone="warning"],
:root:not([data-theme="light"]) .ops-meta-chip[data-tone="warning"],
:root:not([data-theme="light"]) .ops-meta span[data-tone="warning"],
:root:not([data-theme="light"]) .price-chip[data-tone="warning"],
:root:not([data-theme="light"]) .spec-chip[data-tone="warning"],
:root:not([data-theme="light"]) .ui-badge[data-status="inactive"],
:root:not([data-theme="light"]) .ops-badge[data-status="inactive"],
:root:not([data-theme="light"]) .ops-soft-badge[data-status="inactive"],
:root:not([data-theme="light"]) .ops-meta-chip[data-status="inactive"],
:root:not([data-theme="light"]) .ops-meta span[data-status="inactive"],
:root:not([data-theme="light"]) .price-chip[data-status="inactive"],
:root:not([data-theme="light"]) .spec-chip[data-status="inactive"],
:root:not([data-theme="light"]) .account-sidebar-status-incomplete,
:root:not([data-theme="light"]) .ops-meta-chip-warning {
  border-color: color-mix(in srgb, var(--warning) 24%, transparent) !important;
  background: color-mix(in srgb, var(--warning) 10%, var(--token-surface-subtle)) !important;
  color: #f59e0b !important;
}

:root:not([data-theme="light"]) .ui-badge-info,
:root:not([data-theme="light"]) .ops-badge-info,
:root:not([data-theme="light"]) .ops-soft-badge-info,
:root:not([data-theme="light"]) .ops-meta-chip-info,
:root:not([data-theme="light"]) .ops-meta span.ops-meta-chip-info,
:root:not([data-theme="light"]) .price-chip-info,
:root:not([data-theme="light"]) .spec-chip-info,
:root:not([data-theme="light"]) .product-class-code,
:root:not([data-theme="light"]) .ops-meta span.product-class-attribute-count,
:root:not([data-theme="light"]) .ui-badge[data-tone="info"],
:root:not([data-theme="light"]) .ops-badge[data-tone="info"],
:root:not([data-theme="light"]) .ops-soft-badge[data-tone="info"],
:root:not([data-theme="light"]) .ops-meta-chip[data-tone="info"],
:root:not([data-theme="light"]) .ops-meta span[data-tone="info"],
:root:not([data-theme="light"]) .price-chip[data-tone="info"],
:root:not([data-theme="light"]) .spec-chip[data-tone="info"],
:root:not([data-theme="light"]) .ui-badge[data-status="pending"],
:root:not([data-theme="light"]) .ops-badge[data-status="pending"],
:root:not([data-theme="light"]) .ops-soft-badge[data-status="pending"],
:root:not([data-theme="light"]) .ops-meta-chip[data-status="pending"],
:root:not([data-theme="light"]) .ops-meta span[data-status="pending"],
:root:not([data-theme="light"]) .price-chip[data-status="pending"],
:root:not([data-theme="light"]) .spec-chip[data-status="pending"],
:root:not([data-theme="light"]) .account-sidebar-status-pending,
:root:not([data-theme="light"]) .account-sidebar-badge-info {
  border-color: var(--token-border-active) !important;
  background: color-mix(in srgb, var(--token-brand-primary) 12%, var(--token-surface-subtle)) !important;
  color: var(--token-brand-primary-active-icon) !important;
}

:root:not([data-theme="light"]) .ui-badge-danger,
:root:not([data-theme="light"]) .ops-badge-danger,
:root:not([data-theme="light"]) .ops-soft-badge-danger,
:root:not([data-theme="light"]) .ops-meta-chip-danger,
:root:not([data-theme="light"]) .ops-meta span.ops-meta-chip-danger,
:root:not([data-theme="light"]) .price-chip-danger,
:root:not([data-theme="light"]) .spec-chip-danger,
:root:not([data-theme="light"]) .ui-badge[data-tone="danger"],
:root:not([data-theme="light"]) .ops-badge[data-tone="danger"],
:root:not([data-theme="light"]) .ops-soft-badge[data-tone="danger"],
:root:not([data-theme="light"]) .ops-meta-chip[data-tone="danger"],
:root:not([data-theme="light"]) .ops-meta span[data-tone="danger"],
:root:not([data-theme="light"]) .price-chip[data-tone="danger"],
:root:not([data-theme="light"]) .spec-chip[data-tone="danger"],
:root:not([data-theme="light"]) .ui-badge[data-status="danger"],
:root:not([data-theme="light"]) .ops-badge[data-status="danger"],
:root:not([data-theme="light"]) .ops-soft-badge[data-status="danger"],
:root:not([data-theme="light"]) .ops-meta-chip[data-status="danger"],
:root:not([data-theme="light"]) .ops-meta span[data-status="danger"],
:root:not([data-theme="light"]) .price-chip[data-status="danger"],
:root:not([data-theme="light"]) .spec-chip[data-status="danger"],
:root:not([data-theme="light"]) .account-sidebar-status-restricted,
:root:not([data-theme="light"]) .account-sidebar-badge-danger {
  border-color: color-mix(in srgb, var(--danger) 24%, transparent) !important;
  background: color-mix(in srgb, var(--danger) 10%, var(--token-surface-subtle)) !important;
  color: var(--danger) !important;
}

:root:not([data-theme="light"]) .account-sidebar-header-card,
:root:not([data-theme="light"]) .account-sidebar-seller-default .account-sidebar-seller-link,
:root:not([data-theme="light"]) .account-sidebar-seller-pending .account-sidebar-seller-link,
:root:not([data-theme="light"]) .account-sidebar-seller-approved .account-sidebar-seller-link,
:root:not([data-theme="light"]) .account-sidebar-seller-restricted .account-sidebar-seller-link,
:root:not([data-theme="light"]) .site-footer-social-link,
:root:not([data-theme="light"]) .site-footer-trust-item,
:root:not([data-theme="light"]) .desktop-cart-preview-total,
:root:not([data-theme="light"]) .desktop-cart-preview-item,
:root:not([data-theme="light"]) .toast-meta-chip {
  border-color: var(--token-border) !important;
  background: var(--token-surface-subtle) !important;
  color: var(--token-text-medium) !important;
  box-shadow: none !important;
}

:root:not([data-theme="light"]) .account-sidebar-avatar,
:root:not([data-theme="light"]) .drawer-user-avatar-shell,
:root:not([data-theme="light"]) .desktop-cart-preview-media,
:root:not([data-theme="light"]) .toast-media,
:root:not([data-theme="light"]) .drawer-theme-orb {
  border: 1px solid var(--token-border) !important;
  background: var(--token-surface-subtle) !important;
  color: var(--token-text-strong) !important;
  box-shadow: none !important;
}

:root:not([data-theme="light"]) .account-sidebar-header-cta,
:root:not([data-theme="light"]) a.header-search-submit,
:root:not([data-theme="light"]) .site-footer a {
  color: var(--token-text-medium) !important;
}

:root:not([data-theme="light"]) .account-sidebar-header-cta:hover,
:root:not([data-theme="light"]) .account-sidebar-header-cta:focus-visible,
:root:not([data-theme="light"]) .site-footer a:hover,
:root:not([data-theme="light"]) .site-footer a:focus-visible {
  color: var(--token-text-strong) !important;
}

.account-sidebar-header-card {
  padding: 1rem;
  border-radius: 1rem;
}

.account-sidebar-header-main {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
  gap: 0.9rem;
}

.account-sidebar-avatar-stack {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-inline: auto;
}

.account-sidebar-header-main .account-sidebar-avatar {
  width: 4.75rem;
  height: 4.75rem;
  font-size: 1.18rem;
  box-shadow:
    0 18px 34px rgba(2, 6, 23, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.account-sidebar-header-copy {
  width: 100%;
  justify-items: center;
  text-align: center;
}

.account-sidebar-header-copy strong {
  display: block;
  max-width: 100%;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}

.account-sidebar-header-copy small {
  display: block;
  max-width: 100%;
  text-align: center;
}

.account-sidebar-header-copy strong[dir="ltr"],
.account-sidebar-header-copy small[dir="ltr"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  width: 100%;
  direction: ltr;
  font-family: "Inter", "Segoe UI", Arial, sans-serif;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  letter-spacing: 0;
  line-height: 1;
  text-align: center;
  unicode-bidi: isolate;
  vertical-align: middle;
  white-space: nowrap;
}

.account-sidebar-header-copy strong[dir="ltr"] {
  font-size: 0.94rem;
}

.account-sidebar-header-copy small[dir="ltr"] {
  font-size: 0.74rem;
}

.account-sidebar-status {
  margin-top: 0.25rem;
  padding: 0.18rem 0.62rem;
}

.account-sidebar-header-cta {
  position: absolute;
  inset-inline-start: -0.12rem;
  inset-block-end: -0.12rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--line-color);
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel-bg) 82%, white 18%);
  color: var(--link-color);
  text-decoration: none;
  box-shadow:
    0 12px 22px rgba(16, 32, 58, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transition:
    transform var(--motion-normal) var(--ease-standard),
    border-color var(--motion-normal) var(--ease-standard),
    background-color var(--motion-normal) var(--ease-standard),
    color var(--motion-normal) var(--ease-standard),
    box-shadow var(--motion-normal) var(--ease-standard);
}

.account-sidebar-header-cta svg {
  width: 1.04rem;
  height: 1.04rem;
  fill: currentColor;
}

.account-sidebar-header-cta:hover,
.account-sidebar-header-cta:focus-visible {
  border-color: rgba(76, 141, 255, 0.24);
  color: var(--brand-400);
  transform: translateY(-1px) scale(1.04);
  box-shadow:
    0 14px 24px rgba(16, 32, 58, 0.16),
    0 0 0 4px color-mix(in srgb, var(--brand-500) 10%, transparent);
}

@supports (color: color-mix(in srgb, white 50%, black)) {
  .account-sidebar-header-cta:hover,
  .account-sidebar-header-cta:focus-visible {
    background: color-mix(in srgb, var(--brand-500) 12%, var(--panel-bg));
  }
}

.organization-entity-choice-shell {
  gap: 0.9rem;
}

.organization-entity-choice-intro {
  display: grid;
  gap: 0.3rem;
  margin-bottom: 0.85rem !important;
}

.organization-entity-choice-grid {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0.85rem;
  padding-inline: 0.55rem;
}

.organization-entity-choice-card {
  display: block;
  cursor: pointer;
  text-align: right;
  padding: 0.88rem 1rem;
  border: 1px solid var(--line-color);
  border-radius: 1.05rem;
  background:
    radial-gradient(circle at top right, rgba(96, 165, 250, 0.12), transparent 44%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.88), rgba(247, 249, 252, 0.96));
  box-shadow:
    0 14px 28px rgba(16, 32, 58, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
  transition:
    transform var(--motion-normal) var(--ease-standard),
    border-color var(--motion-normal) var(--ease-standard),
    box-shadow var(--motion-normal) var(--ease-standard),
    background-color var(--motion-normal) var(--ease-standard);
}

.organization-entity-choice-card:hover,
.organization-entity-choice-card:focus-within {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--brand-500) 26%, var(--line-color));
  box-shadow:
    0 14px 28px rgba(16, 32, 58, 0.08),
    0 0 0 1px color-mix(in srgb, var(--brand-500) 5%, transparent);
}

.organization-entity-choice-card-active {
  border-color: color-mix(in srgb, var(--brand-500) 34%, transparent);
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--brand-500) 20%, transparent), transparent 42%),
    linear-gradient(160deg, rgba(233, 241, 255, 0.98), rgba(246, 249, 255, 0.98));
  box-shadow:
    0 12px 28px color-mix(in srgb, var(--brand-500) 10%, transparent),
    0 0 0 1px color-mix(in srgb, var(--brand-500) 10%, transparent);
}

.organization-entity-choice-body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.72rem;
}

.organization-entity-choice-copy {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.organization-entity-choice-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
}

.organization-entity-choice-title {
  display: block;
  color: var(--text-primary);
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.45;
}

.organization-entity-choice-description {
  display: block;
  color: var(--text-muted);
  font-size: 0.79rem;
  font-weight: 600;
  line-height: 1.65;
}

.organization-entity-choice-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.28rem;
  height: 2.28rem;
  flex-shrink: 0;
  border: 1px solid var(--line-color);
  border-radius: 0.85rem;
  background: color-mix(in srgb, var(--surface-muted) 84%, white);
  color: var(--text-soft);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
  transition:
    border-color var(--motion-normal) var(--ease-standard),
    background-color var(--motion-normal) var(--ease-standard),
    color var(--motion-normal) var(--ease-standard),
    transform var(--motion-normal) var(--ease-standard);
}

.organization-entity-choice-icon svg {
  width: 1.04rem;
  height: 1.04rem;
}

.organization-entity-choice-icon-active {
  border-color: color-mix(in srgb, var(--brand-500) 20%, transparent);
  background: color-mix(in srgb, var(--brand-500) 12%, white);
  color: var(--brand-600);
  transform: scale(1.02);
}

.organization-entity-choice-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.18rem;
  height: 1.18rem;
  flex-shrink: 0;
  margin-top: 0;
  border: 1px solid rgba(148, 163, 184, 0.72);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  transition:
    border-color var(--motion-normal) var(--ease-standard),
    background-color var(--motion-normal) var(--ease-standard),
    box-shadow var(--motion-normal) var(--ease-standard);
}

.organization-entity-choice-indicator-active {
  border-color: color-mix(in srgb, var(--brand-500) 30%, transparent);
  background: color-mix(in srgb, var(--brand-500) 10%, white);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-500) 8%, transparent);
}

.organization-entity-choice-indicator-dot {
  width: 0.52rem;
  height: 0.52rem;
  border-radius: 999px;
  transform: scale(0);
  background: transparent;
  transition: transform 150ms ease, background-color 150ms ease;
}

.organization-entity-choice-indicator-dot-active {
  transform: scale(1);
  background: var(--brand-500);
}

.organization-entity-choice-note {
  border-color: color-mix(in srgb, var(--line-color) 82%, white);
  background:
    linear-gradient(180deg, rgba(248, 250, 252, 0.96), rgba(241, 245, 249, 0.9));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.organization-entity-choice-note p {
  margin: 0;
}

:root:not([data-theme="light"]) .organization-create-form .text-primary {
  color: var(--token-text-strong) !important;
}

:root:not([data-theme="light"]) .organization-create-form .ui-copy-muted {
  color: var(--token-text-medium) !important;
}

:root:not([data-theme="light"]) .organization-create-form .organization-entity-choice-card {
  border-color: var(--token-border-strong);
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--token-brand-primary) 22%, transparent), transparent 44%),
    linear-gradient(160deg, rgba(28, 33, 40, 0.98), rgba(17, 22, 29, 0.98));
  box-shadow:
    0 18px 34px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

:root:not([data-theme="light"]) .organization-create-form .organization-entity-choice-card:hover,
:root:not([data-theme="light"]) .organization-create-form .organization-entity-choice-card:focus-within {
  border-color: color-mix(in srgb, var(--token-brand-primary-active-icon) 42%, var(--token-border-strong));
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--token-brand-primary) 30%, transparent), transparent 46%),
    linear-gradient(160deg, rgba(31, 38, 48, 0.98), rgba(17, 22, 29, 0.98));
  box-shadow:
    0 22px 38px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(159, 192, 247, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

:root:not([data-theme="light"]) .organization-create-form .organization-entity-choice-card-active {
  border-color: color-mix(in srgb, var(--token-brand-primary-active-icon) 58%, var(--token-border-strong));
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--token-brand-primary) 34%, transparent), transparent 46%),
    linear-gradient(160deg, rgba(25, 39, 61, 0.98), rgba(18, 25, 36, 0.98));
  box-shadow:
    0 22px 42px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(159, 192, 247, 0.12),
    0 0 0 4px color-mix(in srgb, var(--token-brand-primary) 16%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

:root:not([data-theme="light"]) .organization-create-form .organization-entity-choice-title {
  color: var(--token-text-strong);
}

:root:not([data-theme="light"]) .organization-create-form .organization-entity-choice-description {
  color: var(--token-text-medium);
}

:root:not([data-theme="light"]) .organization-create-form .organization-entity-choice-icon {
  border-color: var(--token-border-strong);
  background: var(--token-surface-subtle);
  color: var(--token-text-muted);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

:root:not([data-theme="light"]) .organization-create-form .organization-entity-choice-icon-active {
  border-color: color-mix(in srgb, var(--token-brand-primary-active-icon) 42%, var(--token-border-strong));
  background: color-mix(in srgb, var(--token-brand-primary) 18%, var(--token-surface-subtle));
  color: var(--token-brand-primary-active-icon);
}

:root:not([data-theme="light"]) .organization-create-form .organization-entity-choice-indicator {
  border-color: var(--token-border-strong);
  background: var(--token-surface-base);
}

:root:not([data-theme="light"]) .organization-create-form .organization-entity-choice-indicator-active {
  border-color: color-mix(in srgb, var(--token-brand-primary-active-icon) 52%, var(--token-border-strong));
  background: color-mix(in srgb, var(--token-brand-primary) 18%, var(--token-surface-base));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--token-brand-primary) 16%, transparent);
}

:root:not([data-theme="light"]) .organization-create-form .organization-entity-choice-indicator-dot-active {
  background: var(--token-brand-primary-active-icon);
}

:root:not([data-theme="light"]) .organization-create-form .organization-entity-choice-note {
  border-color: var(--token-border-strong) !important;
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--token-brand-primary) 12%, transparent), transparent 44%),
    linear-gradient(160deg, rgba(17, 22, 29, 0.98), rgba(13, 17, 23, 0.98)) !important;
  color: var(--token-text-medium) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

@media (max-width: 39.99rem) {
  .organization-entity-choice-grid {
    padding-inline: 0;
  }

  .organization-entity-choice-card {
    padding: 0.82rem 0.85rem;
  }

  .organization-entity-choice-body {
    gap: 0.68rem;
  }

  .organization-entity-choice-title {
    font-size: 0.92rem;
  }

  .organization-entity-choice-description {
    font-size: 0.76rem;
    line-height: 1.75;
  }
}

@media (min-width: 40rem) {
  .organization-entity-choice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

:root:not([data-theme="light"]) .quantity-stepper-cart span,
:root:not([data-theme="light"]) .quantity-stepper-inquiry span,
:root:not([data-theme="light"]) .desktop-cart-preview-title,
:root:not([data-theme="light"]) .toast-product,
:root:not([data-theme="light"]) .site-footer-heading,
:root:not([data-theme="light"]) .site-footer-card-head h3 {
  color: var(--token-text-strong) !important;
}

:root:not([data-theme="light"]) .toast-progress-bar-cart,
:root:not([data-theme="light"]) .toast-progress-bar-inquiry {
  background: var(--token-brand-primary) !important;
}

:root:not([data-theme="light"]) .toast-close {
  color: var(--token-text-muted) !important;
  background: transparent !important;
}

:root:not([data-theme="light"]) .toast-close:hover,
:root:not([data-theme="light"]) .toast-close:focus-visible {
  color: var(--token-text-strong) !important;
  background: var(--token-surface-subtle) !important;
}

.action-icon-button {
  position: relative;
  display: inline-grid !important;
  place-items: center;
  inline-size: 2.25rem !important;
  block-size: 2.25rem !important;
  min-inline-size: 2.25rem !important;
  min-height: 2.25rem !important;
  flex: 0 0 auto;
  gap: 0 !important;
  padding: 0 !important;
  overflow: visible;
  border-radius: var(--radius-md) !important;
  line-height: 1;
  white-space: nowrap;
}

.action-icon-button svg {
  width: var(--ui-icon-button-glyph, 1.28rem);
  height: var(--ui-icon-button-glyph, 1.28rem);
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.action-icon-button-edit,
.action-icon-button[aria-label*="ویرایش"],
.action-icon-button[data-action-tooltip*="ویرایش"] {
  border-color: color-mix(in srgb, var(--info) 34%, var(--border)) !important;
  background: color-mix(in srgb, var(--info) 10%, var(--surface)) !important;
  color: color-mix(in srgb, var(--info) 88%, var(--text-primary)) !important;
}

.action-icon-button-edit:hover,
.action-icon-button-edit:focus-visible,
.action-icon-button[aria-label*="ویرایش"]:hover,
.action-icon-button[aria-label*="ویرایش"]:focus-visible,
.action-icon-button[data-action-tooltip*="ویرایش"]:hover,
.action-icon-button[data-action-tooltip*="ویرایش"]:focus-visible {
  border-color: color-mix(in srgb, var(--info) 52%, var(--border)) !important;
  background: color-mix(in srgb, var(--info) 16%, var(--surface)) !important;
  color: color-mix(in srgb, var(--info) 96%, var(--text-primary)) !important;
}

.action-icon-button-success,
.action-icon-button[aria-label*="فعال کردن"],
.action-icon-button[data-action-tooltip*="فعال کردن"] {
  border-color: color-mix(in srgb, var(--success) 34%, var(--border)) !important;
  background: color-mix(in srgb, var(--success) 10%, var(--surface)) !important;
  color: color-mix(in srgb, var(--success) 88%, var(--text-primary)) !important;
}

.action-icon-button-success:hover,
.action-icon-button-success:focus-visible,
.action-icon-button[aria-label*="فعال کردن"]:hover,
.action-icon-button[aria-label*="فعال کردن"]:focus-visible,
.action-icon-button[data-action-tooltip*="فعال کردن"]:hover,
.action-icon-button[data-action-tooltip*="فعال کردن"]:focus-visible {
  border-color: color-mix(in srgb, var(--success) 52%, var(--border)) !important;
  background: color-mix(in srgb, var(--success) 16%, var(--surface)) !important;
  color: color-mix(in srgb, var(--success) 96%, var(--text-primary)) !important;
}

.action-icon-button-warning,
.action-icon-button[aria-label*="غیرفعال"],
.action-icon-button[data-action-tooltip*="غیرفعال"] {
  border-color: color-mix(in srgb, var(--warning) 38%, var(--border)) !important;
  background: color-mix(in srgb, var(--warning) 12%, var(--surface)) !important;
  color: color-mix(in srgb, var(--warning) 90%, var(--text-primary)) !important;
}

.action-icon-button-warning:hover,
.action-icon-button-warning:focus-visible,
.action-icon-button[aria-label*="غیرفعال"]:hover,
.action-icon-button[aria-label*="غیرفعال"]:focus-visible,
.action-icon-button[data-action-tooltip*="غیرفعال"]:hover,
.action-icon-button[data-action-tooltip*="غیرفعال"]:focus-visible {
  border-color: color-mix(in srgb, var(--warning) 58%, var(--border)) !important;
  background: color-mix(in srgb, var(--warning) 18%, var(--surface)) !important;
  color: color-mix(in srgb, var(--warning) 98%, var(--text-primary)) !important;
}

.action-icon-button-danger,
.action-icon-button[aria-label*="حذف"],
.action-icon-button[data-action-tooltip*="حذف"],
.action-icon-button[aria-label*="پاک کردن"],
.action-icon-button[data-action-tooltip*="پاک کردن"] {
  border-color: color-mix(in srgb, var(--danger) 30%, var(--border)) !important;
  background: color-mix(in srgb, var(--danger) 8%, var(--surface)) !important;
  color: var(--danger) !important;
}

.action-icon-button-danger:hover,
.action-icon-button-danger:focus-visible,
.action-icon-button[aria-label*="حذف"]:hover,
.action-icon-button[aria-label*="حذف"]:focus-visible,
.action-icon-button[data-action-tooltip*="حذف"]:hover,
.action-icon-button[data-action-tooltip*="حذف"]:focus-visible,
.action-icon-button[aria-label*="پاک کردن"]:hover,
.action-icon-button[aria-label*="پاک کردن"]:focus-visible,
.action-icon-button[data-action-tooltip*="پاک کردن"]:hover,
.action-icon-button[data-action-tooltip*="پاک کردن"]:focus-visible {
  border-color: color-mix(in srgb, var(--danger) 48%, var(--border)) !important;
  background: color-mix(in srgb, var(--danger) 14%, var(--surface)) !important;
  color: var(--danger) !important;
}

html[data-theme] body {
  --tooltip-bg: color-mix(in srgb, #11151a 94%, var(--brand-500, #1a4fd8));
  --tooltip-text: #f8fafc;
  --tooltip-border: color-mix(in srgb, #ffffff 14%, transparent);
}

:root[data-theme="light"] body {
  --tooltip-bg: color-mix(in srgb, #0f172a 92%, var(--brand-500, #1a4fd8));
  --tooltip-text: #f8fafc;
  --tooltip-border: color-mix(in srgb, #ffffff 18%, transparent);
}

[data-action-tooltip] {
  position: relative;
}

[data-action-tooltip]::before,
[data-action-tooltip]::after {
  position: absolute;
  inset-inline-start: 50%;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity var(--motion-fast) var(--ease-standard),
    transform var(--motion-fast) var(--ease-standard);
}

[data-action-tooltip]::before {
  content: "";
  z-index: 119;
  inset-block-end: calc(100% + 0.24rem);
  border: 0.32rem solid transparent;
  border-block-start-color: var(--tooltip-bg, #11151a);
  transform: translateX(-50%) translateY(0.18rem);
}

[dir="rtl"] [data-action-tooltip]::before {
  transform: translateX(50%) translateY(0.18rem);
}

[data-action-tooltip]::after {
  content: attr(data-action-tooltip);
  z-index: 120;
  inset-block-end: calc(100% + 0.82rem);
  width: max-content;
  max-width: min(18rem, calc(100vw - 2rem));
  padding: 0.42rem 0.65rem;
  border: 1px solid var(--tooltip-border, color-mix(in srgb, white 12%, transparent));
  border-radius: 0.55rem;
  background: var(--tooltip-bg, #11151a);
  color: var(--tooltip-text, #f9fafb);
  box-shadow: none;
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1.5;
  text-align: center;
  white-space: nowrap;
  transform: translateX(-50%) translateY(0.18rem);
}

[dir="rtl"] [data-action-tooltip]::after {
  transform: translateX(50%) translateY(0.18rem);
}

[data-action-tooltip]:hover::before,
[data-action-tooltip]:hover::after,
[data-action-tooltip]:focus-visible::before,
[data-action-tooltip]:focus-visible::after,
[data-action-tooltip]:focus-within::before,
[data-action-tooltip]:focus-within::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

[dir="rtl"] [data-action-tooltip]:hover::before,
[dir="rtl"] [data-action-tooltip]:hover::after,
[dir="rtl"] [data-action-tooltip]:focus-visible::before,
[dir="rtl"] [data-action-tooltip]:focus-visible::after,
[dir="rtl"] [data-action-tooltip]:focus-within::before,
[dir="rtl"] [data-action-tooltip]:focus-within::after {
  transform: translateX(50%) translateY(0);
}

[data-action-tooltip=""]::before,
[data-action-tooltip=""]::after {
  display: none;
}

[data-action-tooltip-placement="bottom"]::before {
  inset-block-start: calc(100% + 0.24rem);
  inset-block-end: auto;
  border-block-start-color: transparent;
  border-block-end-color: var(--tooltip-bg, #11151a);
  transform: translateX(-50%) translateY(-0.18rem);
}

[dir="rtl"] [data-action-tooltip-placement="bottom"]::before {
  transform: translateX(50%) translateY(-0.18rem);
}

[data-action-tooltip-placement="bottom"]::after {
  inset-block-start: calc(100% + 0.82rem);
  inset-block-end: auto;
  white-space: normal;
  transform: translateX(-50%) translateY(-0.18rem);
}

[dir="rtl"] [data-action-tooltip-placement="bottom"]::after {
  transform: translateX(50%) translateY(-0.18rem);
}

[data-action-tooltip-placement="bottom"]:hover::before,
[data-action-tooltip-placement="bottom"]:hover::after,
[data-action-tooltip-placement="bottom"]:focus-visible::before,
[data-action-tooltip-placement="bottom"]:focus-visible::after,
[data-action-tooltip-placement="bottom"]:focus-within::before,
[data-action-tooltip-placement="bottom"]:focus-within::after {
  transform: translateX(-50%) translateY(0);
}

[dir="rtl"] [data-action-tooltip-placement="bottom"]:hover::before,
[dir="rtl"] [data-action-tooltip-placement="bottom"]:hover::after,
[dir="rtl"] [data-action-tooltip-placement="bottom"]:focus-visible::before,
[dir="rtl"] [data-action-tooltip-placement="bottom"]:focus-visible::after,
[dir="rtl"] [data-action-tooltip-placement="bottom"]:focus-within::before,
[dir="rtl"] [data-action-tooltip-placement="bottom"]:focus-within::after {
  transform: translateX(50%) translateY(0);
}

input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
}

/* 2026-05 header action ordering: counter-bearing actions stay adjacent. */
.header-stable-actions {
  align-items: center !important;
}

.header-stable-actions #site-cart-icon {
  order: 10;
}

.header-stable-actions #site-inquiry-icon {
  order: 20;
}

.header-stable-actions #site-alerts-button {
  order: 30;
}

.header-stable-actions #site-account-chip {
  order: 40;
}

.header-stable-actions [href$="/admin/"] {
  order: 50;
}

.header-stable-actions [data-theme-toggle] {
  order: 60;
}

.header-stable-actions #site-alerts-button {
  margin-inline-start: 0.12rem;
}

.header-stable-actions #site-account-chip,
.header-stable-actions [href$="/admin/"],
.header-stable-actions [data-theme-toggle],
.header-stable-actions .ops-auth-link {
  margin-inline-start: 0.34rem;
}

@media (max-width: 39.99875rem) {
  .header-stable-actions #site-account-chip,
  .header-stable-actions [href$="/admin/"],
  .header-stable-actions [data-theme-toggle],
  .header-stable-actions .ops-auth-link {
    margin-inline-start: 0.2rem;
  }
}

/* 2026-05 header commerce icons: match alert chip shape and keep badges readable in light mode. */
.header-stable-actions #site-cart-icon,
.header-stable-actions #site-inquiry-icon,
.header-stable-actions #site-alerts-button {
  position: relative !important;
  overflow: visible !important;
  width: 2.72rem !important;
  min-width: 2.72rem !important;
  height: 2.72rem !important;
  min-height: 2.72rem !important;
  padding: 0 !important;
  gap: 0 !important;
  cursor: pointer;
}

.header-stable-actions #site-cart-icon .header-chip-icon,
.header-stable-actions #site-inquiry-icon .header-chip-icon,
.header-stable-actions #site-alerts-button .header-chip-icon {
  width: 1.28rem !important;
  height: 1.28rem !important;
}

.header-stable-actions #site-cart-icon > .badge-count,
.header-stable-actions #site-inquiry-icon > .badge-count,
.header-stable-actions #site-alerts-button > .badge-count {
  position: absolute !important;
  inset-block-start: -0.22rem !important;
  inset-inline-end: -0.18rem !important;
  z-index: 2;
  min-width: 1.22rem !important;
  height: 1.22rem !important;
  padding: 0 0.3rem !important;
  border-radius: 999px !important;
  font-size: 0.64rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

:root[data-theme="light"] .header-stable-actions #site-cart-icon {
  color: #1a4fd8 !important;
  border-color: rgba(26, 79, 216, 0.18) !important;
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.98), transparent 36%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(239, 246, 255, 0.94)) !important;
  box-shadow:
    0 10px 22px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
}

:root[data-theme="light"] .header-stable-actions #site-alerts-button {
  color: #1a4fd8 !important;
  border-color: rgba(26, 79, 216, 0.18) !important;
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.98), transparent 36%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(239, 246, 255, 0.94)) !important;
  box-shadow:
    0 10px 22px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
}

:root[data-theme="light"] .header-stable-actions #site-inquiry-icon {
  color: #059669 !important;
  border-color: rgba(16, 185, 129, 0.22) !important;
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.98), transparent 36%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(236, 253, 245, 0.94)) !important;
  box-shadow:
    0 10px 22px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
}

:root[data-theme="light"] .header-stable-actions #site-cart-icon > .badge-count {
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.95) !important;
  background: linear-gradient(135deg, #3b82f6 0%, #1a4fd8 100%) !important;
  box-shadow:
    0 0 0 1px rgba(26, 79, 216, 0.18),
    0 8px 16px rgba(26, 79, 216, 0.24) !important;
}

:root[data-theme="light"] .header-stable-actions #site-alerts-button > .badge-count {
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.95) !important;
  background: linear-gradient(135deg, #3b82f6 0%, #1a4fd8 100%) !important;
  box-shadow:
    0 0 0 1px rgba(26, 79, 216, 0.18),
    0 8px 16px rgba(26, 79, 216, 0.24) !important;
}

:root[data-theme="light"] .header-stable-actions #site-inquiry-icon > .badge-count {
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.95) !important;
  background: linear-gradient(135deg, #34d399 0%, #059669 100%) !important;
  box-shadow:
    0 0 0 1px rgba(16, 185, 129, 0.18),
    0 8px 16px rgba(16, 185, 129, 0.24) !important;
}

:root:not([data-theme="light"]) .header-stable-actions #site-cart-icon {
  color: #60a5fa !important;
}

:root:not([data-theme="light"]) .header-stable-actions #site-alerts-button {
  color: #60a5fa !important;
}

:root:not([data-theme="light"]) .header-stable-actions #site-inquiry-icon {
  color: #34d399 !important;
}

:root:not([data-theme="light"]) .header-stable-actions #site-cart-icon > .badge-count {
  color: #fff !important;
  border-color: rgba(15, 23, 42, 0.92) !important;
  background: linear-gradient(135deg, #60a5fa 0%, #1a4fd8 100%) !important;
  box-shadow:
    0 0 0 1px rgba(96, 165, 250, 0.22),
    0 8px 16px rgba(26, 79, 216, 0.36) !important;
}

:root:not([data-theme="light"]) .header-stable-actions #site-alerts-button > .badge-count {
  color: #fff !important;
  border-color: rgba(15, 23, 42, 0.92) !important;
  background: linear-gradient(135deg, #60a5fa 0%, #1a4fd8 100%) !important;
  box-shadow:
    0 0 0 1px rgba(96, 165, 250, 0.22),
    0 8px 16px rgba(26, 79, 216, 0.36) !important;
}

:root:not([data-theme="light"]) .header-stable-actions #site-inquiry-icon > .badge-count {
  color: #fff !important;
  border-color: rgba(15, 23, 42, 0.92) !important;
  background: linear-gradient(135deg, #34d399 0%, #059669 100%) !important;
  box-shadow:
    0 0 0 1px rgba(52, 211, 153, 0.22),
    0 8px 16px rgba(16, 185, 129, 0.36) !important;
}

.header-stable-actions .commerce-header-button {
  position: relative !important;
  overflow: visible !important;
  width: 2.72rem !important;
  min-width: 2.72rem !important;
  height: 2.72rem !important;
  min-height: 2.72rem !important;
  padding: 0 !important;
  gap: 0 !important;
  border-radius: 999px !important;
}

.header-stable-actions .commerce-header-button .commerce-header-label {
  display: none !important;
}

.header-stable-actions .commerce-header-button .commerce-header-icon {
  width: 1.28rem !important;
  height: 1.28rem !important;
}

.header-stable-actions .commerce-header-button .commerce-header-count {
  position: absolute !important;
  inset-block-start: -0.22rem !important;
  inset-inline-end: -0.18rem !important;
  z-index: 2;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 1.22rem !important;
  height: 1.22rem !important;
  padding: 0 0.3rem !important;
  border-radius: 999px !important;
  font-size: 0.64rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

:root[data-theme="light"] .header-stable-actions .commerce-header-button .commerce-header-count.badge-count-cart {
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.95) !important;
  background: linear-gradient(135deg, #3b82f6 0%, #1a4fd8 100%) !important;
  box-shadow:
    0 0 0 1px rgba(26, 79, 216, 0.18),
    0 8px 16px rgba(26, 79, 216, 0.24) !important;
}

:root[data-theme="light"] .header-stable-actions .commerce-header-button .commerce-header-count.badge-count-inquiry {
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.95) !important;
  background: linear-gradient(135deg, #34d399 0%, #059669 100%) !important;
  box-shadow:
    0 0 0 1px rgba(16, 185, 129, 0.18),
    0 8px 16px rgba(16, 185, 129, 0.24) !important;
}

:root:not([data-theme="light"]) .header-stable-actions .commerce-header-button .commerce-header-count.badge-count-cart {
  color: #fff !important;
  border: 1px solid rgba(15, 23, 42, 0.92) !important;
  background: linear-gradient(135deg, #60a5fa 0%, #1a4fd8 100%) !important;
  box-shadow:
    0 0 0 1px rgba(96, 165, 250, 0.22),
    0 8px 16px rgba(26, 79, 216, 0.36) !important;
}

:root:not([data-theme="light"]) .header-stable-actions .commerce-header-button .commerce-header-count.badge-count-inquiry {
  color: #fff !important;
  border: 1px solid rgba(15, 23, 42, 0.92) !important;
  background: linear-gradient(135deg, #34d399 0%, #059669 100%) !important;
  box-shadow:
    0 0 0 1px rgba(52, 211, 153, 0.22),
    0 8px 16px rgba(16, 185, 129, 0.36) !important;
}

.rfq-dispatch-form {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.rfq-dispatch-form .ops-inline-indicator {
  opacity: 0;
  transform: translateY(2px);
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 800;
  transition: opacity 160ms ease, transform 160ms ease;
}

.rfq-dispatch-form.htmx-request .ops-inline-indicator,
.rfq-dispatch-form .ops-inline-indicator.htmx-request {
  opacity: 1;
  transform: translateY(0);
}

.rfq-dispatch-form.htmx-request button {
  cursor: progress;
  opacity: 0.72;
}

.rfq-dispatch-feedback {
  display: grid;
  gap: 1rem;
  margin: 1rem 0;
  padding: 1rem;
  border: 1px solid var(--line-color);
  border-radius: 8px;
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--brand-500) 14%, transparent), transparent 42%),
    var(--surface-2);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.04);
}

.rfq-dispatch-feedback-copy {
  display: grid;
  gap: 0.28rem;
}

.rfq-dispatch-feedback-copy span {
  color: var(--brand-500);
  font-size: 0.78rem;
  font-weight: 900;
}

.rfq-dispatch-feedback-copy strong {
  color: var(--text-primary);
  font-size: 1rem;
  line-height: 1.6;
}

.rfq-dispatch-feedback-copy p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.9;
}

.rfq-dispatch-feedback-metrics,
.rfq-dispatch-status-strip {
  display: grid;
  gap: 0.65rem;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
}

.rfq-dispatch-feedback-metrics div,
.rfq-dispatch-status-strip span {
  border: 1px solid var(--line-color);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
}

.rfq-dispatch-feedback-metrics div {
  display: grid;
  gap: 0.15rem;
  padding: 0.7rem 0.8rem;
}

.rfq-dispatch-feedback-metrics span {
  color: var(--text-soft);
  font-size: 0.74rem;
  font-weight: 800;
}

.rfq-dispatch-feedback-metrics strong {
  color: var(--text-primary);
  font-size: 0.92rem;
}

.rfq-dispatch-status-strip {
  margin: 0 0 1rem;
}

.rfq-dispatch-status-strip span {
  justify-content: flex-start;
  padding: 0.62rem 0.78rem;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.rfq-dispatch-feedback-success {
  border-color: color-mix(in srgb, var(--success) 34%, var(--line-color));
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--success) 15%, transparent), transparent 42%),
    var(--surface-2);
}

.rfq-dispatch-feedback-success .rfq-dispatch-feedback-copy span {
  color: var(--success);
}

.rfq-dispatch-feedback-error {
  border-color: color-mix(in srgb, var(--danger) 34%, var(--line-color));
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--danger) 14%, transparent), transparent 42%),
    var(--surface-2);
}

.rfq-dispatch-feedback-error .rfq-dispatch-feedback-copy span {
  color: var(--danger);
}

@media (max-width: 720px) {
  .rfq-dispatch-form,
  .rfq-dispatch-form button {
    width: 100%;
  }

  .rfq-dispatch-feedback {
    padding: 0.9rem;
  }
}

/* Semantic, low-saturation header action colors. Keep each item's hue consistent across header, badges, and drawer links. */
:root {
  --ui-action-neutral: #8fa0b6;
  --ui-action-alert: #d69a2d;
  --ui-action-cart: #4f86d9;
  --ui-action-inquiry: #2f9b78;
  --ui-action-wishlist: #d7657c;
  --ui-action-compare: #c39a35;
  --ui-action-admin: #9275d4;
}

:root[data-theme="light"] {
  --ui-action-neutral: #607188;
  --ui-action-alert: #a66d18;
  --ui-action-cart: #2f6fb8;
  --ui-action-inquiry: #217b60;
  --ui-action-wishlist: #ba4d63;
  --ui-action-compare: #8c6818;
  --ui-action-admin: #7159b8;
}

html[data-theme] body .header-stable-actions .header-icon-chip,
html[data-theme] body .drawer-close-chip,
html[data-theme] body .mobile-menu-chip {
  --header-action-color: var(--ui-action-neutral);
  color: color-mix(in srgb, var(--header-action-color) 76%, var(--text-primary)) !important;
  border-color: color-mix(in srgb, var(--header-action-color) 20%, var(--line-color)) !important;
  background:
    radial-gradient(circle at 32% 18%, color-mix(in srgb, var(--header-action-color) 12%, transparent), transparent 42%),
    linear-gradient(180deg, color-mix(in srgb, var(--header-action-color) 6%, var(--surface-2)), var(--surface-2)) !important;
  box-shadow:
    inset 0 1px color-mix(in srgb, #ffffff 7%, transparent),
    inset 0 -8px 14px color-mix(in srgb, #000000 16%, transparent) !important;
  filter: saturate(0.86) !important;
}

html[data-theme] body .header-stable-actions .header-icon-chip:hover,
html[data-theme] body .header-stable-actions .header-icon-chip:focus-visible,
html[data-theme] body .drawer-close-chip:hover,
html[data-theme] body .drawer-close-chip:focus-visible,
html[data-theme] body .mobile-menu-chip:hover,
html[data-theme] body .mobile-menu-chip:focus-visible {
  color: color-mix(in srgb, var(--header-action-color) 88%, var(--text-primary)) !important;
  border-color: color-mix(in srgb, var(--header-action-color) 34%, var(--line-color)) !important;
  background:
    radial-gradient(circle at 32% 18%, color-mix(in srgb, var(--header-action-color) 18%, transparent), transparent 42%),
    linear-gradient(180deg, color-mix(in srgb, var(--header-action-color) 9%, var(--surface-2)), var(--surface-2)) !important;
  box-shadow:
    0 8px 18px color-mix(in srgb, #000000 18%, transparent),
    inset 0 1px color-mix(in srgb, #ffffff 8%, transparent) !important;
}

html[data-theme] body .header-stable-actions .header-icon-chip[class*="-active"] {
  color: color-mix(in srgb, var(--header-action-color) 92%, var(--text-primary)) !important;
  border-color: color-mix(in srgb, var(--header-action-color) 42%, var(--line-color)) !important;
  background:
    radial-gradient(circle at 32% 16%, color-mix(in srgb, var(--header-action-color) 24%, transparent), transparent 44%),
    linear-gradient(180deg, color-mix(in srgb, var(--header-action-color) 12%, var(--surface-2)), var(--surface-2)) !important;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--header-action-color) 10%, transparent),
    inset 0 1px color-mix(in srgb, #ffffff 9%, transparent) !important;
}

html[data-theme] body #site-alerts-button.header-icon-alerts {
  --header-action-color: var(--ui-action-alert);
}

html[data-theme] body #site-cart-icon.header-icon-cart,
html[data-theme] body #drawer-cart-link.drawer-link {
  --header-action-color: var(--ui-action-cart);
}

html[data-theme] body #site-inquiry-icon.header-icon-inquiry,
html[data-theme] body #drawer-inquiry-link.drawer-link {
  --header-action-color: var(--ui-action-inquiry);
}

html[data-theme] body #site-wishlist-icon.header-icon-wishlist,
html[data-theme] body #drawer-wishlist-link.drawer-link {
  --header-action-color: var(--ui-action-wishlist);
}

html[data-theme] body #site-compare-icon.header-icon-compare,
html[data-theme] body #drawer-compare-link.drawer-link {
  --header-action-color: var(--ui-action-compare);
}

html[data-theme] body .header-icon-admin {
  --header-action-color: var(--ui-action-admin);
}

html[data-theme] body #site-account-chip,
html[data-theme] body .header-theme-toggle,
html[data-theme] body .drawer-close-chip,
html[data-theme] body .mobile-menu-chip {
  --header-action-color: var(--ui-action-neutral);
}

html[data-theme] body .header-stable-actions .header-icon-chip .header-chip-icon {
  width: 1.42rem !important;
  height: 1.42rem !important;
  filter: none !important;
}

@media (max-width: 39.99875rem) {
  html[data-theme] body .header-stable-actions .header-icon-chip .header-chip-icon {
    width: 1.18rem !important;
    height: 1.18rem !important;
  }
}

html[data-theme] body .header-stable-actions .header-icon-chip .badge-count,
html[data-theme] body .drawer-link .badge-count {
  color: color-mix(in srgb, var(--header-action-color) 84%, var(--text-primary)) !important;
  border-color: color-mix(in srgb, var(--header-action-color) 34%, var(--line-color)) !important;
  background: color-mix(in srgb, var(--header-action-color) 18%, var(--surface-2)) !important;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--header-action-color) 10%, transparent),
    0 5px 12px color-mix(in srgb, #000000 14%, transparent) !important;
}

:root[data-theme="light"] body .header-stable-actions .header-icon-chip .badge-count,
:root[data-theme="light"] body .drawer-link .badge-count {
  color: color-mix(in srgb, var(--header-action-color) 82%, #0f172a) !important;
  border-color: color-mix(in srgb, var(--header-action-color) 26%, #ffffff) !important;
  background: color-mix(in srgb, var(--header-action-color) 14%, #ffffff) !important;
}

html[data-theme] body .drawer-account-sublist {
  display: grid;
  gap: 0.35rem;
  margin: 0.35rem 0.85rem 0.75rem 0;
  padding-inline-start: 0.7rem;
  border-inline-start: 1px solid color-mix(in srgb, var(--brand-400) 26%, transparent);
}

html[data-theme] body .drawer-account-subitem.drawer-link {
  min-height: 2.2rem;
  padding-block: 0.48rem;
  padding-inline: 0.78rem;
  border-color: color-mix(in srgb, var(--line-color) 76%, transparent);
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--brand-400) 10%, transparent), transparent 42%),
    color-mix(in srgb, var(--surface-2) 88%, transparent);
  color: var(--text-soft);
  font-size: 0.78rem;
  font-weight: 700;
  box-shadow: none;
}

html[data-theme] body .drawer-account-subitem.drawer-link:hover,
html[data-theme] body .drawer-account-subitem.drawer-link:focus-visible,
html[data-theme] body .drawer-account-subitem.drawer-link.nav-pill-active {
  color: var(--text-primary);
  border-color: color-mix(in srgb, var(--brand-400) 36%, transparent);
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--brand-400) 18%, transparent), transparent 44%),
    color-mix(in srgb, var(--surface-2) 78%, var(--brand-400) 8%);
}

html[data-theme] body .drawer-link-wishlist-active,
html[data-theme] body .drawer-link-cart-active,
html[data-theme] body .drawer-link-inquiry-active,
html[data-theme] body .drawer-link-compare-active {
  color: color-mix(in srgb, var(--header-action-color) 84%, var(--text-primary)) !important;
  border-color: color-mix(in srgb, var(--header-action-color) 26%, var(--line-color)) !important;
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--header-action-color) 14%, transparent), transparent 42%),
    color-mix(in srgb, var(--header-action-color) 7%, var(--surface-2)) !important;
  box-shadow: inset 0 1px color-mix(in srgb, #ffffff 6%, transparent) !important;
}

/* Product detail tabs: each section keeps a soft, meaningful color in both the tab and its section label. */
:root {
  --product-tab-intro: #5f8fc9;
  --product-tab-specs: #5f8fc9;
  --product-tab-installation: #5f8fc9;
  --product-tab-documents: #5f8fc9;
  --product-tab-sellers: #5f8fc9;
  --product-tab-reviews: #5f8fc9;
  --product-tab-similar: #5f8fc9;
  --product-tab-rfq: #5f8fc9;
  --product-tab-nav-text: #9aa8b8;
  --product-tab-nav-text-active: #d9e4ef;
  --product-tab-nav-line: #7f9bb8;
}

:root[data-theme="light"] {
  --product-tab-intro: #356fa8;
  --product-tab-specs: #356fa8;
  --product-tab-installation: #356fa8;
  --product-tab-documents: #356fa8;
  --product-tab-sellers: #356fa8;
  --product-tab-reviews: #356fa8;
  --product-tab-similar: #356fa8;
  --product-tab-rfq: #356fa8;
  --product-tab-nav-text: #647386;
  --product-tab-nav-text-active: #1f2a3a;
  --product-tab-nav-line: #5e7fa3;
}

html[data-theme] body .industrial-tabs a {
  --product-tab-color: var(--product-tab-intro);
  color: var(--product-tab-nav-text) !important;
  border: 1px solid color-mix(in srgb, var(--product-tab-color) 15%, transparent);
  background:
    radial-gradient(circle at 80% 0, color-mix(in srgb, var(--product-tab-color) 8%, transparent), transparent 58%),
    color-mix(in srgb, var(--product-tab-color) 4%, transparent);
  box-shadow: inset 0 1px color-mix(in srgb, #ffffff 5%, transparent);
  transition:
    color 0.18s ease,
    border-color 0.18s ease,
    background-color 0.18s ease,
    transform 0.18s ease;
}

html[data-theme] body .industrial-tabs a:hover,
html[data-theme] body .industrial-tabs a:focus-visible {
  color: var(--product-tab-nav-text-active) !important;
  border-color: color-mix(in srgb, var(--product-tab-color) 32%, var(--line-color));
  background:
    radial-gradient(circle at 80% 0, color-mix(in srgb, var(--product-tab-color) 14%, transparent), transparent 58%),
    color-mix(in srgb, var(--product-tab-color) 8%, var(--surface-2)) !important;
  transform: translateY(-1px);
  box-shadow:
    0 6px 14px color-mix(in srgb, #000000 12%, transparent),
    inset 0 1px color-mix(in srgb, #ffffff 7%, transparent);
}

html[data-theme] body .industrial-tabs a[href="#intro"],
html[data-theme] body #intro .industrial-section-head span {
  --product-tab-color: var(--product-tab-intro);
}

html[data-theme] body .industrial-tabs a[href="#specs"],
html[data-theme] body #specs .industrial-section-head span {
  --product-tab-color: var(--product-tab-specs);
}

html[data-theme] body .industrial-tabs a[href="#installation"],
html[data-theme] body #installation .industrial-section-head span {
  --product-tab-color: var(--product-tab-installation);
}

html[data-theme] body .industrial-tabs a[href="#documents"],
html[data-theme] body #documents .industrial-section-head span {
  --product-tab-color: var(--product-tab-documents);
}

html[data-theme] body .industrial-tabs a[href="#sellers"],
html[data-theme] body #sellers .industrial-section-head span {
  --product-tab-color: var(--product-tab-sellers);
}

html[data-theme] body .industrial-tabs a[href="#reviews"],
html[data-theme] body #reviews .industrial-section-head span {
  --product-tab-color: var(--product-tab-reviews);
}

html[data-theme] body .industrial-tabs a[href="#similar-products"],
html[data-theme] body #similar-products .industrial-section-head span {
  --product-tab-color: var(--product-tab-similar);
}

html[data-theme] body .industrial-tabs a[href="#rfq"],
html[data-theme] body #rfq .industrial-section-head span {
  --product-tab-color: var(--product-tab-rfq);
}

html[data-theme] body .industrial-section-head span {
  color: color-mix(in srgb, var(--product-tab-color, var(--brand-500)) 78%, var(--text-primary)) !important;
}

html[data-theme] body #similar-products {
  --similar-box-color: var(--product-tab-similar);
  border-color: color-mix(in srgb, var(--similar-box-color) 18%, var(--line-color)) !important;
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--similar-box-color) 8%, transparent), transparent 40%),
    color-mix(in srgb, var(--similar-box-color) 3%, var(--panel-bg-strong)) !important;
}

html[data-theme] body #similar-products .industrial-section-head {
  padding-bottom: 0.8rem;
  border-bottom: 1px solid color-mix(in srgb, var(--similar-box-color) 12%, var(--line-color));
}

html[data-theme] body #similar-products .industrial-section-head h2 {
  color: color-mix(in srgb, var(--text-primary) 82%, var(--similar-box-color)) !important;
  font-size: 1rem;
  line-height: 1.8;
}

html[data-theme] body #similar-products .industrial-similar-list {
  margin-top: 0.85rem;
  border-color: color-mix(in srgb, var(--similar-box-color) 14%, var(--line-color)) !important;
  border-radius: 0.5rem !important;
  background: color-mix(in srgb, var(--surface-muted) 48%, transparent) !important;
  box-shadow: inset 0 1px color-mix(in srgb, #ffffff 4%, transparent) !important;
}

html[data-theme] body #similar-products .industrial-similar-list-head {
  padding-block: 0.52rem;
  border-bottom-color: color-mix(in srgb, var(--similar-box-color) 12%, var(--line-color)) !important;
  background: color-mix(in srgb, var(--similar-box-color) 5%, var(--surface-muted)) !important;
  color: color-mix(in srgb, var(--text-soft) 86%, var(--similar-box-color)) !important;
  font-size: 0.68rem;
  letter-spacing: 0;
}

html[data-theme] body #similar-products .industrial-similar-row {
  min-height: 4.35rem;
  padding-block: 0.72rem;
  border-top-color: color-mix(in srgb, var(--line-color) 58%, transparent) !important;
  background: transparent !important;
}

html[data-theme] body #similar-products .industrial-similar-row:hover,
html[data-theme] body #similar-products .industrial-similar-row:focus-visible {
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--similar-box-color) 8%, transparent), transparent 42%),
    color-mix(in srgb, var(--similar-box-color) 5%, var(--surface-muted)) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--similar-box-color) 14%, transparent) !important;
  transform: none !important;
}

html[data-theme] body #similar-products .industrial-similar-rank {
  width: 1.85rem;
  height: 1.85rem;
  border-color: color-mix(in srgb, var(--similar-box-color) 20%, var(--line-color)) !important;
  background: color-mix(in srgb, var(--similar-box-color) 7%, var(--surface-muted)) !important;
  color: color-mix(in srgb, var(--similar-box-color) 78%, var(--text-primary)) !important;
  font-size: 0.72rem;
}

html[data-theme] body #similar-products .industrial-similar-product strong {
  color: color-mix(in srgb, var(--text-primary) 88%, var(--similar-box-color)) !important;
  font-size: 0.86rem;
  font-weight: 880;
}

html[data-theme] body #similar-products .industrial-similar-product small {
  color: color-mix(in srgb, var(--text-soft) 90%, var(--similar-box-color)) !important;
  font-size: 0.7rem;
}

html[data-theme] body #similar-products .industrial-similar-evidence {
  gap: 0.28rem;
}

html[data-theme] body #similar-products .industrial-similar-evidence span,
html[data-theme] body #similar-products .industrial-similar-evidence em,
html[data-theme] body #similar-products .industrial-similar-supply span {
  min-height: 1.35rem;
  padding: 0.16rem 0.46rem;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 820;
}

html[data-theme] body #similar-products .industrial-similar-evidence span {
  border-color: color-mix(in srgb, var(--similar-box-color) 24%, var(--line-color)) !important;
  background: color-mix(in srgb, var(--similar-box-color) 8%, transparent) !important;
  color: color-mix(in srgb, var(--similar-box-color) 76%, var(--text-primary)) !important;
}

html[data-theme] body #similar-products .industrial-similar-evidence em {
  border-color: color-mix(in srgb, var(--line-color) 62%, transparent) !important;
  background: color-mix(in srgb, var(--surface-muted) 48%, transparent) !important;
  color: color-mix(in srgb, var(--text-soft) 92%, var(--text-primary)) !important;
}

html[data-theme] body #similar-products .industrial-similar-supply span {
  border-color: color-mix(in srgb, var(--product-tab-installation) 20%, var(--line-color)) !important;
  background: color-mix(in srgb, var(--product-tab-installation) 8%, transparent) !important;
  color: color-mix(in srgb, var(--product-tab-installation) 76%, var(--text-primary)) !important;
}

html[data-theme] body #similar-products .industrial-similar-price strong {
  color: color-mix(in srgb, var(--text-primary) 88%, var(--similar-box-color)) !important;
  font-size: 0.78rem;
  font-weight: 860;
}

html[data-theme] body #similar-products .industrial-similar-action span {
  min-height: 1.95rem;
  border: 1px solid color-mix(in srgb, var(--similar-box-color) 24%, var(--line-color));
  background: color-mix(in srgb, var(--similar-box-color) 10%, var(--surface-muted)) !important;
  color: color-mix(in srgb, var(--similar-box-color) 82%, var(--text-primary)) !important;
  box-shadow: none !important;
}

html[data-theme] body #similar-products .industrial-similar-row:hover .industrial-similar-action span,
html[data-theme] body #similar-products .industrial-similar-row:focus-visible .industrial-similar-action span {
  border-color: color-mix(in srgb, var(--similar-box-color) 34%, var(--line-color));
  background: color-mix(in srgb, var(--similar-box-color) 14%, var(--surface-muted)) !important;
}

@media (max-width: 48rem) {
  html[data-theme] body #similar-products .industrial-similar-list {
    background: transparent !important;
    box-shadow: none !important;
  }

  html[data-theme] body #similar-products .industrial-similar-row {
    border-color: color-mix(in srgb, var(--similar-box-color) 14%, var(--line-color)) !important;
    background: color-mix(in srgb, var(--surface-muted) 42%, transparent) !important;
  }
}

/* Item action color contract: reuse these aliases for every new cart, inquiry, wishlist, compare, or alert surface. */
:root {
  --item-action-neutral: var(--ui-action-neutral);
  --item-action-alert: var(--ui-action-alert);
  --item-action-cart: var(--ui-action-cart);
  --item-action-inquiry: var(--ui-action-inquiry);
  --item-action-wishlist: var(--ui-action-wishlist);
  --item-action-compare: var(--ui-action-compare);
  --item-action-admin: var(--ui-action-admin);
}

html[data-theme] body :is(
  .cta-button.cta-button-cart,
  .cta-button.cta-button-secondary.cta-button-cart,
  .commerce-primary-action-cart,
  .industrial-btn-primary,
  .quantity-stepper-cart,
  .quantity-stepper-button-cart,
  .price-chip.price-chip-cart,
  .badge-count.badge-count-cart,
  .toast-card-cart .toast-media,
  .toast-card-cart .toast-action
) {
  --item-action-color: var(--item-action-cart);
}

html[data-theme] body :is(
  .cta-button.cta-button-inquiry,
  .cta-button.cta-button-secondary.cta-button-inquiry,
  .commerce-primary-action-inquiry,
  .industrial-btn-inquiry,
  .industrial-rfq-action,
  .quantity-stepper-inquiry,
  .quantity-stepper-button-inquiry,
  .price-chip.price-chip-inquiry,
  .badge-count.badge-count-inquiry,
  .toast-card-inquiry .toast-media,
  .toast-card-inquiry .toast-action,
  .add-rfq-product-media,
  .add-rfq-success-icon
) {
  --item-action-color: var(--item-action-inquiry);
}

html[data-theme] body :is(
  .cta-button.cta-button-wishlist,
  .cta-button.cta-button-secondary.cta-button-wishlist,
  .toggle-chip-wishlist,
  .price-chip.price-chip-wishlist,
  .badge-count.badge-count-wishlist
) {
  --item-action-color: var(--item-action-wishlist);
}

html[data-theme] body :is(
  .toggle-chip-compare,
  .badge-count.badge-count-compare
) {
  --item-action-color: var(--item-action-compare);
}

html[data-theme] body :is(
  .badge-count.badge-count-alerts,
  .alerts-center-toolbar .ops-button-secondary,
  .alerts-entry-actions .ops-button,
  .alerts-entry-actions .ops-button-muted
) {
  --item-action-color: var(--item-action-alert);
}

html[data-theme] body :is(
  .cta-button.cta-button-cart,
  .cta-button.cta-button-inquiry,
  .cta-button.cta-button-wishlist,
  .commerce-primary-action-cart,
  .commerce-primary-action-inquiry,
  .industrial-btn-primary,
  .industrial-btn-inquiry,
  .industrial-rfq-action,
  .toggle-chip-wishlist,
  .toggle-chip-compare,
  .quantity-stepper-button-cart,
  .quantity-stepper-button-inquiry,
  .toast-card-cart .toast-action,
  .toast-card-inquiry .toast-action,
  .alerts-center-toolbar .ops-button-secondary,
  .alerts-entry-actions .ops-button,
  .alerts-entry-actions .ops-button-muted
) {
  border-color: color-mix(in srgb, var(--item-action-color) 25%, var(--line-color)) !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--item-action-color) 11%, var(--surface-2)), color-mix(in srgb, var(--item-action-color) 7%, var(--surface-2))) !important;
  color: color-mix(in srgb, var(--item-action-color) 84%, var(--text-primary)) !important;
  box-shadow: inset 0 1px color-mix(in srgb, #ffffff 6%, transparent) !important;
  text-shadow: none !important;
  filter: saturate(0.9) !important;
}

html[data-theme] body :is(
  .cta-button.cta-button-cart,
  .cta-button.cta-button-inquiry,
  .cta-button.cta-button-wishlist,
  .commerce-primary-action-cart,
  .commerce-primary-action-inquiry,
  .industrial-btn-primary,
  .industrial-btn-inquiry,
  .industrial-rfq-action,
  .toggle-chip-wishlist,
  .toggle-chip-compare,
  .quantity-stepper-button-cart,
  .quantity-stepper-button-inquiry,
  .toast-card-cart .toast-action,
  .toast-card-inquiry .toast-action,
  .alerts-center-toolbar .ops-button-secondary,
  .alerts-entry-actions .ops-button,
  .alerts-entry-actions .ops-button-muted
):hover,
html[data-theme] body :is(
  .cta-button.cta-button-cart,
  .cta-button.cta-button-inquiry,
  .cta-button.cta-button-wishlist,
  .commerce-primary-action-cart,
  .commerce-primary-action-inquiry,
  .industrial-btn-primary,
  .industrial-btn-inquiry,
  .industrial-rfq-action,
  .toggle-chip-wishlist,
  .toggle-chip-compare,
  .quantity-stepper-button-cart,
  .quantity-stepper-button-inquiry,
  .toast-card-cart .toast-action,
  .toast-card-inquiry .toast-action,
  .alerts-center-toolbar .ops-button-secondary,
  .alerts-entry-actions .ops-button,
  .alerts-entry-actions .ops-button-muted
):focus-visible {
  border-color: color-mix(in srgb, var(--item-action-color) 36%, var(--line-color)) !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--item-action-color) 15%, var(--surface-2)), color-mix(in srgb, var(--item-action-color) 10%, var(--surface-2))) !important;
  color: color-mix(in srgb, var(--item-action-color) 92%, var(--text-primary)) !important;
  box-shadow:
    0 8px 18px color-mix(in srgb, #000000 13%, transparent),
    inset 0 1px color-mix(in srgb, #ffffff 8%, transparent) !important;
  transform: translateY(-1px);
}

html[data-theme] body :is(
  .toggle-chip-wishlist.toggle-chip-active,
  .toggle-chip-compare.toggle-chip-active,
  .quantity-stepper-cart,
  .quantity-stepper-inquiry
) {
  border-color: color-mix(in srgb, var(--item-action-color) 34%, var(--line-color)) !important;
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--item-action-color) 10%, transparent), transparent 42%),
    color-mix(in srgb, var(--item-action-color) 10%, var(--surface-2)) !important;
  color: color-mix(in srgb, var(--item-action-color) 86%, var(--text-primary)) !important;
  box-shadow: inset 0 1px color-mix(in srgb, #ffffff 7%, transparent) !important;
}

html[data-theme] body :is(
  .quantity-stepper-cart span,
  .quantity-stepper-inquiry span
) {
  color: color-mix(in srgb, var(--item-action-color) 86%, var(--text-primary)) !important;
}

html[data-theme] body :is(
  .price-chip.price-chip-cart,
  .price-chip.price-chip-inquiry,
  .price-chip.price-chip-wishlist,
  .badge-count.badge-count-alerts,
  .badge-count.badge-count-cart,
  .badge-count.badge-count-inquiry,
  .badge-count.badge-count-wishlist,
  .badge-count.badge-count-compare,
  .toast-card-cart .toast-media,
  .toast-card-inquiry .toast-media
) {
  border-color: color-mix(in srgb, var(--item-action-color) 28%, var(--line-color)) !important;
  background: color-mix(in srgb, var(--item-action-color) 12%, var(--surface-2)) !important;
  color: color-mix(in srgb, var(--item-action-color) 84%, var(--text-primary)) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

html[data-theme] body :is(
  .add-rfq-product p,
  .add-rfq-success p,
  .commerce-modal-panel-inquiry .commerce-modal-headline p
) {
  color: color-mix(in srgb, var(--item-action-inquiry) 82%, var(--text-primary)) !important;
}

html[data-theme] body .add-rfq-checks input {
  accent-color: var(--item-action-inquiry);
}

html[data-theme] body :is(
  .add-rfq-product-media,
  .add-rfq-success-icon
) {
  background: color-mix(in srgb, var(--item-action-inquiry) 13%, var(--surface-2)) !important;
  color: color-mix(in srgb, var(--item-action-inquiry) 86%, var(--text-primary)) !important;
  box-shadow: none !important;
}

html[data-theme] body :is(
  .cta-button.cta-button-cart,
  .cta-button.cta-button-inquiry,
  .cta-button.cta-button-wishlist,
  .commerce-primary-action-cart,
  .commerce-primary-action-inquiry,
  .industrial-btn-primary,
  .industrial-btn-inquiry,
  .industrial-rfq-action,
  .toggle-chip-wishlist,
  .toggle-chip-compare,
  .quantity-stepper-button-cart,
  .quantity-stepper-button-inquiry,
  .toast-card-cart .toast-action,
  .toast-card-inquiry .toast-action,
  .alerts-center-toolbar .ops-button-secondary,
  .alerts-entry-actions .ops-button,
  .alerts-entry-actions .ops-button-muted
):disabled,
html[data-theme] body :is(
  .cta-button.cta-button-cart,
  .cta-button.cta-button-inquiry,
  .cta-button.cta-button-wishlist,
  .commerce-primary-action-cart,
  .commerce-primary-action-inquiry,
  .industrial-btn-primary,
  .industrial-btn-inquiry,
  .industrial-rfq-action,
  .toggle-chip-wishlist,
  .toggle-chip-compare,
  .quantity-stepper-button-cart,
  .quantity-stepper-button-inquiry,
  .toast-card-cart .toast-action,
  .toast-card-inquiry .toast-action,
  .alerts-center-toolbar .ops-button-secondary,
  .alerts-entry-actions .ops-button,
  .alerts-entry-actions .ops-button-muted
)[aria-disabled="true"] {
  cursor: not-allowed;
  border-color: var(--line-color) !important;
  background: var(--disabled) !important;
  color: var(--text-soft) !important;
  box-shadow: none !important;
  opacity: 0.72;
  transform: none !important;
}

html[data-theme] body .commerce-page-shell :is(
  .commerce-page-hero-actions,
  .commerce-summary-actions
) .commerce-primary-action-cart:not([aria-disabled="true"]),
html[data-theme] body .commerce-page-shell .checkout-address-add-button:not([aria-disabled="true"]),
html[data-theme] body .checkout-address-modal .commerce-primary-action-cart:not([aria-disabled="true"]) {
  border-color: color-mix(in srgb, var(--item-action-cart) 68%, #ffffff) !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--item-action-cart) 92%, #ffffff), var(--item-action-cart)) !important;
  color: #ffffff !important;
  box-shadow:
    0 12px 24px color-mix(in srgb, var(--item-action-cart) 24%, transparent),
    inset 0 1px color-mix(in srgb, #ffffff 18%, transparent) !important;
  filter: saturate(1.04) !important;
}

html[data-theme] body .commerce-page-shell :is(
  .commerce-page-hero-actions,
  .commerce-summary-actions
) .commerce-primary-action-cart:not([aria-disabled="true"]):hover,
html[data-theme] body .commerce-page-shell :is(
  .commerce-page-hero-actions,
  .commerce-summary-actions
) .commerce-primary-action-cart:not([aria-disabled="true"]):focus-visible,
html[data-theme] body .commerce-page-shell .checkout-address-add-button:not([aria-disabled="true"]):hover,
html[data-theme] body .commerce-page-shell .checkout-address-add-button:not([aria-disabled="true"]):focus-visible,
html[data-theme] body .checkout-address-modal .commerce-primary-action-cart:not([aria-disabled="true"]):hover,
html[data-theme] body .checkout-address-modal .commerce-primary-action-cart:not([aria-disabled="true"]):focus-visible {
  border-color: color-mix(in srgb, var(--item-action-cart) 78%, #ffffff) !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--item-action-cart) 96%, #ffffff), color-mix(in srgb, var(--item-action-cart) 92%, #000000)) !important;
  color: #ffffff !important;
  box-shadow:
    0 14px 28px color-mix(in srgb, var(--item-action-cart) 30%, transparent),
    inset 0 1px color-mix(in srgb, #ffffff 20%, transparent) !important;
}

html[data-theme] body .industrial-detail-shell :is(
  .industrial-btn-primary,
  .industrial-btn-inquiry,
  .industrial-rfq-action,
  .toggle-chip-wishlist,
  .toggle-chip-compare,
  .toggle-chip-wishlist.toggle-chip-active,
  .toggle-chip-compare.toggle-chip-active
) {
  border-color: color-mix(in srgb, var(--brand-500) 22%, var(--line-color)) !important;
  background: color-mix(in srgb, var(--brand-500) 6%, var(--surface-2)) !important;
  color: color-mix(in srgb, var(--brand-500) 34%, var(--text-primary)) !important;
  box-shadow: inset 0 1px color-mix(in srgb, #ffffff 5%, transparent) !important;
  filter: none !important;
  text-shadow: none !important;
}

html[data-theme] body .industrial-detail-shell :is(
  .industrial-btn-primary,
  .industrial-btn-inquiry,
  .industrial-rfq-action,
  .toggle-chip-wishlist,
  .toggle-chip-compare
):hover,
html[data-theme] body .industrial-detail-shell :is(
  .industrial-btn-primary,
  .industrial-btn-inquiry,
  .industrial-rfq-action,
  .toggle-chip-wishlist,
  .toggle-chip-compare
):focus-visible {
  border-color: color-mix(in srgb, var(--brand-500) 32%, var(--line-color)) !important;
  background: color-mix(in srgb, var(--brand-500) 9%, var(--surface-2)) !important;
  color: color-mix(in srgb, var(--brand-500) 42%, var(--text-primary)) !important;
  box-shadow: inset 0 1px color-mix(in srgb, #ffffff 7%, transparent) !important;
}

html[data-theme] body .industrial-detail-shell .industrial-side-actions .industrial-side-report-action,
html[data-theme] body .industrial-detail-shell .industrial-seller-row .industrial-seller-inquiry-action {
  cursor: pointer;
  min-height: 2.7rem;
  border-radius: 0.62rem !important;
  opacity: 1 !important;
  filter: none !important;
  transition:
    transform 0.16s ease,
    border-color 0.16s ease,
    background-color 0.16s ease,
    box-shadow 0.16s ease,
    color 0.16s ease;
}

html[data-theme] body .industrial-detail-shell .industrial-side-actions .industrial-side-report-action {
  border-color: color-mix(in srgb, var(--text-soft) 24%, var(--line-color)) !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--text-primary) 5%, var(--surface-2)), var(--surface-2)) !important;
  color: color-mix(in srgb, var(--text-primary) 82%, var(--text-soft)) !important;
  box-shadow: inset 0 1px color-mix(in srgb, #ffffff 7%, transparent) !important;
}

html[data-theme] body .industrial-detail-shell .industrial-seller-row .industrial-seller-inquiry-action {
  border-color: color-mix(in srgb, var(--item-action-inquiry) 45%, var(--line-color)) !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--item-action-inquiry) 24%, var(--surface-2)), color-mix(in srgb, var(--item-action-inquiry) 15%, var(--surface-2))) !important;
  color: color-mix(in srgb, var(--item-action-inquiry) 96%, var(--text-primary)) !important;
  box-shadow:
    0 8px 18px color-mix(in srgb, var(--item-action-inquiry) 12%, transparent),
    inset 0 1px color-mix(in srgb, #ffffff 10%, transparent) !important;
}

html[data-theme] body .industrial-detail-shell .industrial-seller-row .industrial-seller-inquiry-action {
  min-width: 5.2rem;
  justify-self: end;
}

html[data-theme] body .industrial-detail-shell .industrial-side-actions .industrial-side-report-action:hover,
html[data-theme] body .industrial-detail-shell .industrial-side-actions .industrial-side-report-action:focus-visible,
html[data-theme] body .industrial-detail-shell .industrial-seller-row .industrial-seller-inquiry-action:hover,
html[data-theme] body .industrial-detail-shell .industrial-seller-row .industrial-seller-inquiry-action:focus-visible {
  transform: translateY(-1px);
}

:root[data-theme="light"] body .industrial-detail-shell .industrial-side-actions .industrial-side-report-action {
  border-color: #cbd9e8 !important;
  background: #ffffff !important;
  color: #243244 !important;
  box-shadow:
    0 5px 12px rgba(15, 23, 42, 0.055),
    inset 0 1px rgba(255, 255, 255, 0.96) !important;
}

:root[data-theme="light"] body .industrial-detail-shell .industrial-seller-row .industrial-seller-inquiry-action {
  border-color: #2f6fb8 !important;
  background: #2f6fb8 !important;
  color: #ffffff !important;
  box-shadow: 0 8px 18px rgba(47, 111, 184, 0.18) !important;
}

:root[data-theme="light"] body .industrial-detail-shell .industrial-side-actions .industrial-side-report-action:hover,
:root[data-theme="light"] body .industrial-detail-shell .industrial-side-actions .industrial-side-report-action:focus-visible {
  border-color: #b7c8da !important;
  background: #f8fbfe !important;
  color: #111827 !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.075) !important;
}

:root[data-theme="light"] body .industrial-detail-shell .industrial-seller-row .industrial-seller-inquiry-action:hover,
:root[data-theme="light"] body .industrial-detail-shell .industrial-seller-row .industrial-seller-inquiry-action:focus-visible {
  border-color: #285f9f !important;
  background: #285f9f !important;
  color: #ffffff !important;
  box-shadow: 0 10px 22px rgba(47, 111, 184, 0.22) !important;
}

/* Seller score card: compact trust signal with a soft, readable meter. */
html[data-theme] body .industrial-seller-performance {
  --seller-performance-color: var(--item-action-neutral, var(--ui-action-neutral));
  --seller-performance-score: 0%;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0.34rem !important;
  width: min(10.4rem, 100%);
  min-width: 8.5rem;
  padding: 0.56rem 0.62rem !important;
  border-color: color-mix(in srgb, var(--seller-performance-color) 26%, var(--line-color)) !important;
  border-radius: 0.62rem !important;
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--seller-performance-color) 10%, transparent), transparent 44%),
    color-mix(in srgb, var(--seller-performance-color) 7%, var(--surface-2)) !important;
  color: color-mix(in srgb, var(--seller-performance-color) 82%, var(--text-primary)) !important;
  box-shadow: inset 0 1px color-mix(in srgb, #ffffff 6%, transparent) !important;
}

html[data-theme] body .industrial-seller-performance--excellent {
  --seller-performance-color: var(--product-tab-sellers, #56a66f);
}

html[data-theme] body .industrial-seller-performance--stable {
  --seller-performance-color: var(--item-action-inquiry, #2f9b78);
}

html[data-theme] body .industrial-seller-performance--watch {
  --seller-performance-color: var(--item-action-alert, #d69a2d);
}

html[data-theme] body .industrial-seller-performance--risky {
  --seller-performance-color: var(--item-action-wishlist, #d7657c);
}

html[data-theme] body .industrial-seller-performance-head,
html[data-theme] body .industrial-seller-performance-score {
  display: flex;
  align-items: center;
  min-width: 0;
}

html[data-theme] body .industrial-seller-performance-head {
  gap: 0.34rem;
}

html[data-theme] body .industrial-seller-performance-dot {
  width: 0.46rem;
  height: 0.46rem;
  flex: 0 0 auto;
  border-radius: 999px;
  background: color-mix(in srgb, var(--seller-performance-color) 86%, var(--text-primary));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--seller-performance-color) 13%, transparent);
}

html[data-theme] body .industrial-seller-performance-head small {
  grid-column: auto !important;
  overflow: hidden;
  color: color-mix(in srgb, var(--seller-performance-color) 78%, var(--text-primary)) !important;
  font-size: 0.68rem !important;
  font-weight: 900 !important;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-theme] body .industrial-seller-performance-score {
  justify-content: space-between;
  gap: 0.42rem;
}

html[data-theme] body .industrial-seller-performance-score strong {
  color: color-mix(in srgb, var(--seller-performance-color) 88%, var(--text-primary)) !important;
  font-size: 1.08rem !important;
  font-weight: 950;
  line-height: 1;
}

html[data-theme] body .industrial-seller-performance-score span {
  color: color-mix(in srgb, var(--text-soft) 82%, var(--seller-performance-color)) !important;
  font-size: 0.64rem !important;
  font-weight: 850 !important;
  white-space: nowrap;
}

html[data-theme] body .industrial-seller-performance-score-empty strong {
  color: var(--text-soft) !important;
}

html[data-theme] body .industrial-seller-performance-meter {
  overflow: hidden;
  height: 0.34rem;
  border: 1px solid color-mix(in srgb, var(--seller-performance-color) 18%, var(--line-color));
  border-radius: 999px;
  background: color-mix(in srgb, var(--seller-performance-color) 7%, var(--surface-muted));
}

html[data-theme] body .industrial-seller-performance-meter span {
  display: block;
  width: var(--seller-performance-score);
  min-width: 0.5rem;
  max-width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--seller-performance-color) 62%, var(--surface-2)),
    color-mix(in srgb, var(--seller-performance-color) 86%, var(--text-primary))
  );
  box-shadow: none !important;
}

html[data-theme] body .industrial-seller-performance--unknown .industrial-seller-performance-meter span {
  width: 32%;
  opacity: 0.42;
}

html[data-theme] body .industrial-review-inline-hint {
  margin: -0.25rem 0 0;
  padding: 0.48rem 0.64rem;
  border: 1px solid color-mix(in srgb, var(--item-action-alert) 24%, var(--line-color));
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--item-action-alert) 7%, transparent);
  color: color-mix(in srgb, var(--item-action-alert) 72%, var(--text-primary));
  font-size: 0.76rem;
  font-weight: 820;
  line-height: 1.8;
}

html[data-theme] body .industrial-review-live-check {
  display: none !important;
}

@media (max-width: 44rem) {
  html[data-theme] body .industrial-seller-performance {
    width: 100%;
    min-width: 0;
  }
}

/* Light product detail audit: keep the industrial surface crisp instead of washed-out. */
:root[data-theme="light"] body .site-header-shell.glass-panel {
  border-color: rgba(148, 163, 184, 0.32) !important;
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08), inset 0 1px rgba(255, 255, 255, 0.92) !important;
}

:root[data-theme="light"] body .header-stable-actions .header-icon-chip,
:root[data-theme="light"] body .header-stable-actions #site-cart-icon.header-icon-cart,
:root[data-theme="light"] body .header-stable-actions #site-inquiry-icon.header-icon-inquiry,
:root[data-theme="light"] body .header-stable-actions #site-wishlist-icon.header-icon-wishlist,
:root[data-theme="light"] body .header-stable-actions #site-compare-icon.header-icon-compare,
:root[data-theme="light"] body .header-stable-actions .header-theme-toggle {
  color: color-mix(in srgb, var(--header-action-color, #475569) 78%, #0f172a) !important;
  border-color: color-mix(in srgb, var(--header-action-color, #475569) 32%, #cbd5e1) !important;
  background:
    radial-gradient(circle at 30% 18%, color-mix(in srgb, var(--header-action-color, #475569) 16%, transparent), transparent 42%),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--header-action-color, #475569) 10%, #ffffff),
      color-mix(in srgb, var(--header-action-color, #475569) 5%, #f7fafe)
    ) !important;
  box-shadow:
    0 8px 18px color-mix(in srgb, var(--header-action-color, #475569) 10%, rgba(15, 23, 42, 0.06)),
    inset 0 1px rgba(255, 255, 255, 0.95) !important;
  filter: saturate(1.08) !important;
}

:root[data-theme="light"] body .header-stable-actions .header-icon-chip:hover,
:root[data-theme="light"] body .header-stable-actions .header-icon-chip:focus-visible,
:root[data-theme="light"] body .header-stable-actions #site-cart-icon.header-icon-cart:hover,
:root[data-theme="light"] body .header-stable-actions #site-cart-icon.header-icon-cart:focus-visible,
:root[data-theme="light"] body .header-stable-actions #site-inquiry-icon.header-icon-inquiry:hover,
:root[data-theme="light"] body .header-stable-actions #site-inquiry-icon.header-icon-inquiry:focus-visible,
:root[data-theme="light"] body .header-stable-actions #site-wishlist-icon.header-icon-wishlist:hover,
:root[data-theme="light"] body .header-stable-actions #site-wishlist-icon.header-icon-wishlist:focus-visible,
:root[data-theme="light"] body .header-stable-actions #site-compare-icon.header-icon-compare:hover,
:root[data-theme="light"] body .header-stable-actions #site-compare-icon.header-icon-compare:focus-visible {
  color: color-mix(in srgb, var(--header-action-color, #1a4fd8) 88%, #0f172a) !important;
  border-color: color-mix(in srgb, var(--header-action-color, #1a4fd8) 46%, #cbd5e1) !important;
  background:
    radial-gradient(circle at 30% 18%, color-mix(in srgb, var(--header-action-color, #1a4fd8) 24%, transparent), transparent 42%),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--header-action-color, #1a4fd8) 16%, #ffffff),
      color-mix(in srgb, var(--header-action-color, #1a4fd8) 8%, #f7fafe)
    ) !important;
  box-shadow:
    0 10px 22px color-mix(in srgb, var(--header-action-color, #1a4fd8) 16%, rgba(15, 23, 42, 0.08)),
    inset 0 1px rgba(255, 255, 255, 0.96) !important;
}

:root[data-theme="light"] body .header-stable-actions .header-icon-chip[class*="-active"],
:root[data-theme="light"] body .header-stable-actions #site-wishlist-icon.header-icon-wishlist-active,
:root[data-theme="light"] body .header-stable-actions #site-compare-icon.header-icon-compare-active,
:root[data-theme="light"] body .header-stable-actions #site-cart-icon.header-icon-cart-active,
:root[data-theme="light"] body .header-stable-actions #site-inquiry-icon.header-icon-inquiry-active {
  color: color-mix(in srgb, var(--header-action-color, #1a4fd8) 92%, #0f172a) !important;
  border-color: color-mix(in srgb, var(--header-action-color, #1a4fd8) 52%, #cbd5e1) !important;
  background:
    radial-gradient(circle at 30% 18%, color-mix(in srgb, var(--header-action-color, #1a4fd8) 28%, transparent), transparent 42%),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--header-action-color, #1a4fd8) 18%, #ffffff),
      color-mix(in srgb, var(--header-action-color, #1a4fd8) 9%, #f7fafe)
    ) !important;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--header-action-color, #1a4fd8) 14%, transparent),
    0 8px 18px color-mix(in srgb, var(--header-action-color, #1a4fd8) 16%, rgba(15, 23, 42, 0.07)),
    inset 0 1px rgba(255, 255, 255, 0.95) !important;
}

:root[data-theme="light"] body .header-stable-actions .header-icon-chip .badge-count {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.94) !important;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--header-action-color, #1a4fd8) 88%, #ffffff),
      color-mix(in srgb, var(--header-action-color, #1a4fd8) 90%, #111827)
    ) !important;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--header-action-color, #1a4fd8) 18%, transparent),
    0 5px 11px color-mix(in srgb, var(--header-action-color, #1a4fd8) 22%, transparent) !important;
  filter: saturate(1.14) !important;
}

:root[data-theme="light"] body .industrial-detail-hero {
  border-color: #ccd8e7 !important;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%) !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.07), inset 0 1px rgba(255, 255, 255, 0.96) !important;
}

:root[data-theme="light"] body .industrial-product-summary h1 {
  max-width: 100% !important;
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  color: #102033 !important;
  font-size: clamp(1.75rem, 3.15vw, 2.72rem) !important;
  line-height: 1.34 !important;
  -webkit-text-fill-color: #102033 !important;
  text-shadow: none !important;
}

html[data-theme] body .industrial-gallery-toolbar {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  justify-self: stretch !important;
}

html[data-theme] body .industrial-gallery {
  grid-template-columns: minmax(0, 1fr) !important;
  overflow: hidden !important;
  contain: inline-size !important;
}

html[data-theme] body .industrial-gallery > * {
  max-width: 100% !important;
  min-width: 0 !important;
  justify-self: stretch !important;
}

html[data-theme] body .industrial-gallery-filterbar {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  justify-content: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

html[data-theme] body .industrial-gallery-filter {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

@media (max-width: 44rem) {
  html[data-theme] body .industrial-gallery-filterbar {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

:root:not([data-theme="light"]) body .industrial-product-summary .industrial-card-meta > span:not(.industrial-status-chip) {
  border-color: color-mix(in srgb, #8ec5ff 36%, var(--line-color)) !important;
  background:
    linear-gradient(135deg, color-mix(in srgb, #8ec5ff 14%, transparent), transparent 62%),
    color-mix(in srgb, var(--surface-muted) 90%, transparent) !important;
  color: #dcecff !important;
  text-shadow: 0 1px 10px rgba(142, 197, 255, 0.14);
}

:root:not([data-theme="light"]) body .industrial-price-panel small,
:root:not([data-theme="light"]) body .industrial-side-price-panel small {
  color: #c9d7e8 !important;
}

:root[data-theme="light"] body .industrial-product-summary .industrial-card-meta > span,
:root[data-theme="light"] body .industrial-fact-grid div,
:root[data-theme="light"] body .industrial-badge-row span,
:root[data-theme="light"] body .industrial-price-panel,
:root[data-theme="light"] body .industrial-side-price-panel,
:root[data-theme="light"] body .industrial-gallery-status {
  border-color: #d2deeb !important;
  background: #f8fbff !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.95) !important;
}

:root[data-theme="light"] body .industrial-product-summary .industrial-card-meta > .industrial-status-chip {
  border-color: color-mix(in srgb, var(--brand-500) 28%, #cbd5e1) !important;
  background: color-mix(in srgb, var(--brand-500) 8%, #ffffff) !important;
  color: #17449f !important;
}

:root[data-theme="light"] body .industrial-fact-grid dt,
:root[data-theme="light"] body .industrial-card-price span,
:root[data-theme="light"] body .industrial-price-panel span,
:root[data-theme="light"] body .industrial-price-panel small,
:root[data-theme="light"] body .industrial-side-price-panel span,
:root[data-theme="light"] body .industrial-side-price-panel small,
:root[data-theme="light"] body .industrial-gallery-status small,
:root[data-theme="light"] body .industrial-gallery-hint strong {
  color: #64748b !important;
}

:root[data-theme="light"] body .industrial-fact-grid dd,
:root[data-theme="light"] body .industrial-price-panel strong,
:root[data-theme="light"] body .industrial-side-price-panel strong,
:root[data-theme="light"] body .industrial-gallery-status strong {
  color: #0f172a !important;
}

:root[data-theme="light"] body .industrial-gallery-copy span,
:root[data-theme="light"] body .industrial-gallery-status span,
:root[data-theme="light"] body .industrial-gallery-hint span {
  color: #17449f !important;
}

:root[data-theme="light"] body .industrial-gallery-hint .industrial-gallery-hint-line {
  color: #64748b !important;
}

:root[data-theme="light"] body .industrial-gallery-filter,
:root[data-theme="light"] body .industrial-gallery-mini-filter {
  border-color: #d2deeb !important;
  background: #ffffff !important;
  color: #475569 !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.96) !important;
}

:root[data-theme="light"] body .industrial-gallery-filter small {
  background: #eef3f8 !important;
  color: #334155 !important;
}

:root[data-theme="light"] body .industrial-gallery-filter:hover,
:root[data-theme="light"] body .industrial-gallery-filter:focus-visible,
:root[data-theme="light"] body .industrial-gallery-filter.is-active,
:root[data-theme="light"] body .industrial-gallery-mini-filter:hover,
:root[data-theme="light"] body .industrial-gallery-mini-filter:focus-visible {
  border-color: color-mix(in srgb, var(--brand-500) 38%, #cbd5e1) !important;
  background: color-mix(in srgb, var(--brand-500) 8%, #ffffff) !important;
  color: #17449f !important;
  box-shadow: 0 8px 18px rgba(26, 79, 216, 0.09), inset 0 1px rgba(255, 255, 255, 0.96) !important;
}

:root[data-theme="light"] body .industrial-gallery-main {
  border-color: #ccd8e7 !important;
  background:
    linear-gradient(90deg, rgba(148, 163, 184, 0.18) 1px, transparent 1px),
    linear-gradient(0deg, rgba(148, 163, 184, 0.14) 1px, transparent 1px),
    #f8fbff !important;
  background-size: 3rem 3rem !important;
}

:root[data-theme="light"] body .industrial-gallery-thumb {
  border-color: #d2deeb !important;
  background: #f8fbff !important;
}

:root[data-theme="light"] body .industrial-gallery-thumb span {
  background: rgba(255, 255, 255, 0.88) !important;
  color: #0f172a !important;
}

html[data-theme] body .industrial-gallery-strip-toolbar {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 0.5rem !important;
  min-width: 0 !important;
  padding-block: 0.1rem 0 !important;
}

html[data-theme] body .industrial-gallery-strip-toolbar > div {
  display: grid !important;
  min-width: 0 !important;
  gap: 0.08rem !important;
}

html[data-theme] body .industrial-gallery-strip-toolbar strong {
  overflow: hidden !important;
  color: var(--text-primary) !important;
  font-size: 0.84rem !important;
  font-weight: 950 !important;
  line-height: 1.5 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-theme] body .industrial-gallery-strip-toolbar span {
  color: var(--text-soft) !important;
  font-size: 0.72rem !important;
  font-weight: 820 !important;
  line-height: 1.4 !important;
}

html[data-theme] body .industrial-gallery-strip-actions {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: end !important;
  gap: 0.42rem !important;
}

html[data-theme] body .industrial-gallery-strip-nav {
  display: inline-flex !important;
  align-items: center !important;
  pointer-events: none !important;
  position: absolute !important;
  z-index: 3 !important;
  inset-inline: 0.18rem !important;
  top: 50% !important;
  justify-content: space-between !important;
  gap: 0 !important;
  transform: translateY(-50%) !important;
}

html[data-theme] body .industrial-gallery[data-gallery-strip-scrollable="false"] .industrial-gallery-strip-nav {
  display: none !important;
}

html[data-theme] body .industrial-gallery-strip-nav-button {
  cursor: pointer !important;
  display: inline-grid !important;
  width: 2.02rem !important;
  height: 2.02rem !important;
  place-items: center !important;
  pointer-events: auto !important;
  padding: 0 !important;
  border: 1px solid color-mix(in srgb, var(--product-tab-specs, var(--brand-500)) 34%, var(--line-color)) !important;
  border-radius: 0.45rem !important;
  background: color-mix(in srgb, var(--surface-muted) 84%, transparent) !important;
  color: color-mix(in srgb, var(--product-tab-specs, var(--brand-500)) 72%, var(--text-primary)) !important;
  transition:
    border-color 0.18s ease,
    background-color 0.18s ease,
    color 0.18s ease,
    opacity 0.18s ease,
    transform 0.18s ease !important;
}

html[data-theme] body .industrial-gallery-strip-nav-button:hover,
html[data-theme] body .industrial-gallery-strip-nav-button:focus-visible {
  border-color: color-mix(in srgb, var(--product-tab-specs, var(--brand-500)) 52%, var(--line-color)) !important;
  background: color-mix(in srgb, var(--product-tab-specs, var(--brand-500)) 13%, var(--surface-muted)) !important;
  color: var(--text-primary) !important;
  outline: 2px solid color-mix(in srgb, var(--product-tab-specs, var(--brand-500)) 22%, transparent) !important;
  outline-offset: 2px !important;
  transform: translateY(-1px) !important;
}

html[data-theme] body .industrial-gallery-strip-nav-button:disabled {
  cursor: default !important;
  opacity: 0.42 !important;
  transform: none !important;
}

html[data-theme] body .industrial-gallery-strip-nav-button svg {
  width: 0.95rem !important;
  height: 0.95rem !important;
  fill: currentColor !important;
}

html[dir="rtl"][data-theme] body .industrial-gallery-strip-nav-button svg {
  transform: scaleX(-1) !important;
}

html[data-theme] body .industrial-gallery-show-all {
  cursor: pointer !important;
  display: inline-flex !important;
  flex: 0 0 auto !important;
  min-height: 2rem !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.28rem 0.64rem !important;
  border: 1px solid color-mix(in srgb, var(--product-tab-specs, var(--brand-500)) 32%, var(--line-color)) !important;
  border-radius: 0.45rem !important;
  background: color-mix(in srgb, var(--product-tab-specs, var(--brand-500)) 10%, var(--surface-muted)) !important;
  color: color-mix(in srgb, var(--product-tab-specs, var(--brand-500)) 72%, var(--text-primary)) !important;
  font-size: 0.74rem !important;
  font-weight: 920 !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
}

html[data-theme] body .industrial-gallery-show-all:hover,
html[data-theme] body .industrial-gallery-show-all:focus-visible {
  border-color: color-mix(in srgb, var(--product-tab-specs, var(--brand-500)) 46%, var(--line-color)) !important;
  background: color-mix(in srgb, var(--product-tab-specs, var(--brand-500)) 15%, var(--surface-muted)) !important;
  outline: 2px solid color-mix(in srgb, var(--product-tab-specs, var(--brand-500)) 24%, transparent) !important;
  outline-offset: 2px !important;
}

html[data-theme] body .industrial-gallery-strip-shell {
  position: relative !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

html[data-theme] body .industrial-gallery-strip-shell::before,
html[data-theme] body .industrial-gallery-strip-shell::after {
  content: "" !important;
  position: absolute !important;
  inset-block: 0.15rem 0.45rem !important;
  z-index: 2 !important;
  width: 1.45rem !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.18s ease !important;
}

html[data-theme] body .industrial-gallery-strip-shell::before {
  inset-inline-start: 0 !important;
  background: linear-gradient(to right, var(--panel-bg-strong) 18%, transparent) !important;
}

html[data-theme] body .industrial-gallery-strip-shell::after {
  inset-inline-end: 0 !important;
  background: linear-gradient(to left, var(--panel-bg-strong) 18%, transparent) !important;
}

html[dir="rtl"][data-theme] body .industrial-gallery-strip-shell::before {
  background: linear-gradient(to left, var(--panel-bg-strong) 18%, transparent) !important;
}

html[dir="rtl"][data-theme] body .industrial-gallery-strip-shell::after {
  background: linear-gradient(to right, var(--panel-bg-strong) 18%, transparent) !important;
}

html[data-theme] body .industrial-gallery-strip-shell[data-scrollable="true"]:not([data-at-start="true"])::before,
html[data-theme] body .industrial-gallery-strip-shell[data-scrollable="true"]:not([data-at-end="true"])::after {
  opacity: 0.9 !important;
}

html[data-theme] body .industrial-gallery-strip {
  display: flex !important;
  flex-wrap: nowrap !important;
  grid-template-columns: none !important;
  gap: 0.54rem !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  overscroll-behavior-inline: contain !important;
  padding-block: 0.1rem 0.32rem !important;
  padding-inline: 2.2rem !important;
  scroll-behavior: smooth !important;
  scroll-padding-inline: 2.2rem !important;
  scroll-snap-type: inline mandatory !important;
  scrollbar-color: transparent transparent !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  -webkit-overflow-scrolling: touch !important;
}

html[data-theme] body .industrial-gallery[data-gallery-strip-scrollable="false"] .industrial-gallery-strip {
  padding-inline: 0 !important;
}

html[data-theme] body .industrial-gallery-strip::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

html[data-theme] body .industrial-gallery-thumb {
  flex: 0 0 min(9.1rem, 38vw) !important;
  width: min(9.1rem, 38vw) !important;
  scroll-snap-align: start !important;
  scroll-snap-stop: always !important;
}

html[data-theme] body .product-gallery-modal-body {
  grid-template-columns: minmax(0, 1fr) minmax(12rem, 0.34fr) !important;
}

html[data-theme] body .product-gallery-modal-card,
:root[data-theme="light"] body .product-gallery-modal-card {
  box-shadow: none !important;
}

html[data-theme] body .product-gallery-modal-stage figcaption {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 0.5rem !important;
}

html[data-theme] body .product-gallery-modal-stage figcaption strong,
html[data-theme] body .product-gallery-modal-stage figcaption span,
html[data-theme] body .product-gallery-modal-stage figcaption em {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-theme] body .product-gallery-modal-stage figcaption strong {
  color: var(--text-primary) !important;
  font-style: normal !important;
}

html[data-theme] body .product-gallery-modal-stage figcaption em {
  grid-column: 1 / -1 !important;
  color: var(--text-soft) !important;
  font-style: normal !important;
}

html[data-theme] body .product-gallery-modal-groups {
  display: grid !important;
  align-content: start !important;
  gap: 0.72rem !important;
  max-height: min(58vh, 32rem) !important;
  min-width: 0 !important;
  overflow: auto !important;
  padding: 0.2rem !important;
}

html[data-theme] body .product-gallery-modal-group {
  display: grid !important;
  gap: 0.46rem !important;
  min-width: 0 !important;
}

html[data-theme] body .product-gallery-modal-group-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.5rem !important;
  min-width: 0 !important;
}

html[data-theme] body .product-gallery-modal-group-head h3 {
  margin: 0 !important;
  overflow: hidden !important;
  color: var(--text-primary) !important;
  font-size: 0.82rem !important;
  font-weight: 950 !important;
  line-height: 1.5 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-theme] body .product-gallery-modal-group-head span {
  flex: 0 0 auto !important;
  color: var(--text-soft) !important;
  font-size: 0.68rem !important;
  font-weight: 820 !important;
}

html[data-theme] body .product-gallery-modal-thumbs {
  display: grid !important;
  gap: 0.48rem !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 0 !important;
}

html[data-theme] body .product-gallery-modal-thumb,
html[data-theme] body .product-gallery-modal-thumb:hover,
html[data-theme] body .product-gallery-modal-thumb:focus-visible,
html[data-theme] body .product-gallery-modal-thumb.is-active,
:root[data-theme="light"] body .product-gallery-modal-thumb,
:root[data-theme="light"] body .product-gallery-modal-thumb:hover,
:root[data-theme="light"] body .product-gallery-modal-thumb:focus-visible,
:root[data-theme="light"] body .product-gallery-modal-thumb.is-active {
  box-shadow: none !important;
}

html[data-theme] body .industrial-review-media-list {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 0.5rem !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding-block: 0.2rem !important;
}

html[data-theme] body .industrial-review-media-thumb {
  cursor: pointer !important;
  display: inline-grid !important;
  flex: 0 0 4.25rem !important;
  width: 4.25rem !important;
  height: 4.25rem !important;
  max-width: 4.25rem !important;
  max-height: 4.25rem !important;
  aspect-ratio: 1 / 1 !important;
  place-items: center !important;
  overflow: hidden !important;
  padding: 0 !important;
  border: 1px solid color-mix(in srgb, var(--line-color) 82%, transparent) !important;
  border-radius: 0.55rem !important;
  background: color-mix(in srgb, var(--surface-muted) 62%, transparent) !important;
}

html[data-theme] body .industrial-review-media-thumb:hover,
html[data-theme] body .industrial-review-media-thumb:focus-visible {
  border-color: color-mix(in srgb, var(--product-tab-specs, var(--brand-500)) 42%, var(--line-color)) !important;
  outline: 2px solid color-mix(in srgb, var(--product-tab-specs, var(--brand-500)) 20%, transparent) !important;
  outline-offset: 2px !important;
}

html[data-theme] body .industrial-review-media-thumb img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  padding: 0.24rem !important;
  object-fit: contain !important;
}

html[data-theme] body .industrial-review-media-field,
html[data-theme] body .industrial-review-media-locked {
  display: grid !important;
  gap: 0.35rem !important;
  margin: 0 !important;
  padding: 0.7rem !important;
  border: 1px dashed color-mix(in srgb, var(--product-tab-specs, var(--brand-500)) 20%, var(--line-color)) !important;
  border-radius: 0.62rem !important;
  background: color-mix(in srgb, var(--surface-muted) 52%, transparent) !important;
  color: var(--text-soft) !important;
  font-size: 0.78rem !important;
  font-weight: 820 !important;
  line-height: 1.7 !important;
}

html[data-theme] body .industrial-review-media-field input[type="file"] {
  width: 100% !important;
  min-width: 0 !important;
  color: var(--text-soft) !important;
  font-size: 0.76rem !important;
}

html[data-theme] body .industrial-review-media-field small {
  color: var(--text-soft) !important;
  font-size: 0.72rem !important;
  font-weight: 760 !important;
  line-height: 1.6 !important;
}

:root[data-theme="light"] body .industrial-gallery-show-all {
  border-color: #c5d8ec !important;
  background: #f4f8fc !important;
  color: #245d96 !important;
}

:root[data-theme="light"] body .industrial-review-media-field,
:root[data-theme="light"] body .industrial-review-media-locked,
:root[data-theme="light"] body .industrial-review-media-thumb {
  border-color: #d5e2ef !important;
  background: #f8fbff !important;
}

@media (max-width: 48rem) {
  html[data-theme] body .industrial-gallery-strip-toolbar {
    align-items: center !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 0.42rem !important;
  }

  html[data-theme] body .industrial-gallery-strip-actions {
    width: 100% !important;
    justify-content: space-between !important;
  }

  html[data-theme] body .industrial-gallery-strip {
    gap: 0.46rem !important;
    padding-inline: 2rem !important;
    scroll-padding-inline: 2rem !important;
  }

  html[data-theme] body .industrial-gallery-thumb {
    flex-basis: min(8.4rem, 64vw) !important;
    width: min(8.4rem, 64vw) !important;
  }

  html[data-theme] body .product-gallery-modal-body {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html[data-theme] body .product-gallery-modal-stage {
    min-height: min(48vh, 24rem) !important;
  }

  html[data-theme] body .product-gallery-modal-groups {
    max-height: 32vh !important;
  }

  html[data-theme] body .product-gallery-modal-thumbs {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

:root[data-theme="light"] body .industrial-detail-shell :is(
  .industrial-btn-primary,
  .industrial-btn-inquiry,
  .industrial-rfq-action,
  .toggle-chip-wishlist,
  .toggle-chip-compare,
  .toggle-chip-wishlist.toggle-chip-active,
  .toggle-chip-compare.toggle-chip-active
) {
  border-color: color-mix(in srgb, var(--brand-500) 30%, #cbd5e1) !important;
  background: color-mix(in srgb, var(--brand-500) 9%, #ffffff) !important;
  color: #17449f !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.96) !important;
}

/* Final header action clarity: keep each quick action identifiable in light mode without turning the header noisy. */
:root {
  --header-action-muted-off: #6f839c;
  --header-action-muted-on: #5f88b8;
}

:root[data-theme="light"] {
  --header-action-muted-off: #3f5f85;
  --header-action-muted-on: #1f67c8;
}

html[data-theme] body .header-stable-actions :is(
  #site-alerts-button.header-icon-alerts,
  #site-wishlist-icon.header-icon-wishlist,
  #site-compare-icon.header-icon-compare,
  #site-cart-icon.header-icon-cart,
  #site-inquiry-icon.header-icon-inquiry,
  #site-account-chip.header-icon-chip,
  .header-theme-toggle.header-icon-chip,
  .header-icon-admin.header-icon-chip
),
html[data-theme] body :is(.mobile-menu-chip.header-icon-chip, .drawer-close-chip.header-icon-chip) {
  color: color-mix(in srgb, var(--header-action-color) 78%, var(--text-primary)) !important;
  border-color: color-mix(in srgb, var(--header-action-color) 34%, var(--line-color)) !important;
  background:
    radial-gradient(circle at 32% 18%, color-mix(in srgb, var(--header-action-color) 16%, transparent), transparent 44%),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--header-action-color) 11%, var(--surface-2)),
      color-mix(in srgb, var(--header-action-color) 5%, var(--surface-2))
    ) !important;
  box-shadow:
    0 7px 16px color-mix(in srgb, #000000 8%, transparent),
    inset 0 1px color-mix(in srgb, #ffffff 72%, transparent) !important;
  filter: saturate(1.05) !important;
  opacity: 1;
}

html[data-theme] body .header-stable-actions :is(
  #site-alerts-button.header-icon-alerts:hover,
  #site-alerts-button.header-icon-alerts:focus-visible,
  #site-wishlist-icon.header-icon-wishlist:hover,
  #site-wishlist-icon.header-icon-wishlist:focus-visible,
  #site-compare-icon.header-icon-compare:hover,
  #site-compare-icon.header-icon-compare:focus-visible,
  #site-cart-icon.header-icon-cart:hover,
  #site-cart-icon.header-icon-cart:focus-visible,
  #site-inquiry-icon.header-icon-inquiry:hover,
  #site-inquiry-icon.header-icon-inquiry:focus-visible,
  #site-account-chip.header-icon-chip:hover,
  #site-account-chip.header-icon-chip:focus-visible,
  .header-theme-toggle.header-icon-chip:hover,
  .header-theme-toggle.header-icon-chip:focus-visible,
  .header-icon-admin.header-icon-chip:hover,
  .header-icon-admin.header-icon-chip:focus-visible
) {
  color: color-mix(in srgb, var(--header-action-color) 90%, var(--text-primary)) !important;
  border-color: color-mix(in srgb, var(--header-action-color) 52%, var(--line-color)) !important;
  background:
    radial-gradient(circle at 32% 18%, color-mix(in srgb, var(--header-action-color) 24%, transparent), transparent 44%),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--header-action-color) 17%, var(--surface-2)),
      color-mix(in srgb, var(--header-action-color) 8%, var(--surface-2))
    ) !important;
  box-shadow:
    0 10px 20px color-mix(in srgb, var(--header-action-color) 18%, transparent),
    inset 0 1px color-mix(in srgb, #ffffff 82%, transparent) !important;
  filter: saturate(1.15) !important;
  opacity: 1;
}

html[data-theme] body .header-stable-actions :is(
  #site-alerts-button.header-icon-alerts-active,
  #site-wishlist-icon.header-icon-wishlist-active,
  #site-compare-icon.header-icon-compare-active,
  #site-cart-icon.header-icon-cart-active,
  #site-inquiry-icon.header-icon-inquiry-active
) {
  color: color-mix(in srgb, var(--header-action-color) 94%, var(--text-primary)) !important;
  border-color: color-mix(in srgb, var(--header-action-color) 56%, var(--line-color)) !important;
  background:
    radial-gradient(circle at 32% 16%, color-mix(in srgb, var(--header-action-color) 28%, transparent), transparent 45%),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--header-action-color) 20%, var(--surface-2)),
      color-mix(in srgb, var(--header-action-color) 9%, var(--surface-2))
    ) !important;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--header-action-color) 14%, transparent),
    0 8px 18px color-mix(in srgb, var(--header-action-color) 18%, transparent),
    inset 0 1px color-mix(in srgb, #ffffff 84%, transparent) !important;
  filter: saturate(1.16) !important;
  opacity: 1;
}

html[data-theme] body .header-stable-actions :is(
  #site-alerts-button.header-icon-alerts-active:hover,
  #site-alerts-button.header-icon-alerts-active:focus-visible,
  #site-wishlist-icon.header-icon-wishlist-active:hover,
  #site-wishlist-icon.header-icon-wishlist-active:focus-visible,
  #site-compare-icon.header-icon-compare-active:hover,
  #site-compare-icon.header-icon-compare-active:focus-visible,
  #site-cart-icon.header-icon-cart-active:hover,
  #site-cart-icon.header-icon-cart-active:focus-visible,
  #site-inquiry-icon.header-icon-inquiry-active:hover,
  #site-inquiry-icon.header-icon-inquiry-active:focus-visible
) {
  color: color-mix(in srgb, var(--header-action-color) 96%, var(--text-primary)) !important;
  border-color: color-mix(in srgb, var(--header-action-color) 64%, var(--line-color)) !important;
  background:
    radial-gradient(circle at 32% 16%, color-mix(in srgb, var(--header-action-color) 34%, transparent), transparent 45%),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--header-action-color) 24%, var(--surface-2)),
      color-mix(in srgb, var(--header-action-color) 11%, var(--surface-2))
    ) !important;
}

html[data-theme] body .header-stable-actions :is(
  #site-alerts-button,
  #site-wishlist-icon,
  #site-compare-icon,
  #site-cart-icon,
  #site-inquiry-icon
) > .badge-count,
html[data-theme] body .drawer-link .badge-count {
  color: #ffffff !important;
  border-color: color-mix(in srgb, #ffffff 88%, transparent) !important;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--header-action-color) 86%, #ffffff),
      color-mix(in srgb, var(--header-action-color) 88%, #111827)
    ) !important;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--header-action-color) 16%, transparent),
    0 5px 11px color-mix(in srgb, var(--header-action-color) 20%, transparent) !important;
  filter: saturate(1.12) !important;
  opacity: 0.96;
}

html[data-theme] body .header-stable-actions #site-alerts-button.header-icon-alerts > .badge-count.badge-count-alerts,
html[data-theme] body .header-stable-actions #site-wishlist-icon.header-icon-wishlist > .badge-count.badge-count-wishlist,
html[data-theme] body .header-stable-actions #site-compare-icon.header-icon-compare > .badge-count.badge-count-compare,
html[data-theme] body .header-stable-actions #site-cart-icon.header-icon-cart > .badge-count.badge-count-cart,
html[data-theme] body .header-stable-actions #site-inquiry-icon.header-icon-inquiry > .badge-count.badge-count-inquiry,
html[data-theme] body #drawer-wishlist-link.drawer-link .badge-count.badge-count-wishlist,
html[data-theme] body #drawer-compare-link.drawer-link .badge-count.badge-count-compare,
html[data-theme] body #drawer-cart-link.drawer-link .badge-count.badge-count-cart,
html[data-theme] body #drawer-inquiry-link.drawer-link .badge-count.badge-count-inquiry {
  color: #ffffff !important;
  border-color: color-mix(in srgb, #ffffff 88%, transparent) !important;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--header-action-color) 86%, #ffffff),
      color-mix(in srgb, var(--header-action-color) 88%, #111827)
    ) !important;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--header-action-color) 16%, transparent),
    0 5px 11px color-mix(in srgb, var(--header-action-color) 20%, transparent) !important;
  filter: saturate(1.12) !important;
  opacity: 0.96;
}

html[data-theme] body .header-stable-actions :is(
  #site-alerts-button.header-icon-alerts-active,
  #site-wishlist-icon.header-icon-wishlist-active,
  #site-compare-icon.header-icon-compare-active,
  #site-cart-icon.header-icon-cart-active,
  #site-inquiry-icon.header-icon-inquiry-active
) > .badge-count,
html[data-theme] body :is(
  .drawer-link-wishlist-active,
  .drawer-link-compare-active,
  .drawer-link-cart-active,
  .drawer-link-inquiry-active
) .badge-count {
  color: #ffffff !important;
  border-color: color-mix(in srgb, #ffffff 92%, transparent) !important;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--header-action-color) 92%, #ffffff),
      color-mix(in srgb, var(--header-action-color) 92%, #111827)
    ) !important;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--header-action-color) 18%, transparent),
    0 6px 13px color-mix(in srgb, var(--header-action-color) 26%, transparent) !important;
  filter: saturate(1.18) !important;
  opacity: 1;
}

html[data-theme] body .header-stable-actions #site-alerts-button.header-icon-alerts-active > .badge-count.badge-count-alerts,
html[data-theme] body .header-stable-actions #site-wishlist-icon.header-icon-wishlist-active > .badge-count.badge-count-wishlist,
html[data-theme] body .header-stable-actions #site-compare-icon.header-icon-compare-active > .badge-count.badge-count-compare,
html[data-theme] body .header-stable-actions #site-cart-icon.header-icon-cart-active > .badge-count.badge-count-cart,
html[data-theme] body .header-stable-actions #site-inquiry-icon.header-icon-inquiry-active > .badge-count.badge-count-inquiry,
html[data-theme] body #drawer-wishlist-link.drawer-link-wishlist-active .badge-count.badge-count-wishlist,
html[data-theme] body #drawer-compare-link.drawer-link-compare-active .badge-count.badge-count-compare,
html[data-theme] body #drawer-cart-link.drawer-link-cart-active .badge-count.badge-count-cart,
html[data-theme] body #drawer-inquiry-link.drawer-link-inquiry-active .badge-count.badge-count-inquiry {
  color: #ffffff !important;
  border-color: color-mix(in srgb, #ffffff 92%, transparent) !important;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--header-action-color) 92%, #ffffff),
      color-mix(in srgb, var(--header-action-color) 92%, #111827)
    ) !important;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--header-action-color) 18%, transparent),
    0 6px 13px color-mix(in srgb, var(--header-action-color) 26%, transparent) !important;
  filter: saturate(1.18) !important;
  opacity: 1;
}

html[data-theme] body .industrial-gallery-action:focus-visible {
  outline: none !important;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--gallery-action-color) 24%, transparent),
    0 12px 28px color-mix(in srgb, var(--gallery-action-color) 18%, transparent),
    inset 0 1px color-mix(in srgb, #ffffff 62%, transparent) !important;
}

/* Modern seller trust signal: compact enough for the seller table, readable at a glance. */
html[data-theme] body .industrial-seller-performance {
  --seller-performance-color: var(--item-action-neutral, #7f8ea3);
  --seller-performance-score: 0%;
  display: grid !important;
  width: min(100%, 12.4rem) !important;
  min-width: 10.6rem !important;
  gap: 0.42rem !important;
  padding: 0.52rem 0.58rem !important;
  border: 1px solid color-mix(in srgb, var(--seller-performance-color) 19%, var(--line-color)) !important;
  border-radius: 0.72rem !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, #ffffff 4%, transparent), transparent),
    color-mix(in srgb, var(--seller-performance-color) 5%, var(--surface-2)) !important;
  box-shadow:
    inset 0 1px color-mix(in srgb, #ffffff 6%, transparent),
    0 6px 16px color-mix(in srgb, #000000 9%, transparent) !important;
}

html[data-theme] body .industrial-seller-performance-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

html[data-theme] body .industrial-seller-performance-gauge {
  display: inline-grid;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  padding: 0.26rem;
  border: 1px solid color-mix(in srgb, var(--seller-performance-color) 24%, var(--line-color));
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--seller-performance-color) 13%, transparent), transparent 62%),
    color-mix(in srgb, var(--surface-muted) 60%, transparent);
  color: color-mix(in srgb, var(--seller-performance-color) 82%, var(--text-primary));
  box-shadow: inset 0 1px color-mix(in srgb, #ffffff 8%, transparent);
}

html[data-theme] body .industrial-seller-performance-gauge strong,
html[data-theme] body .industrial-seller-performance-gauge small {
  display: block;
  line-height: 1;
  text-align: center;
}

html[data-theme] body .industrial-seller-performance-gauge strong {
  color: color-mix(in srgb, var(--seller-performance-color) 82%, var(--text-primary)) !important;
  font-size: 0.95rem !important;
  font-weight: 950 !important;
}

html[data-theme] body .industrial-seller-performance-gauge small {
  margin-top: 0.14rem;
  color: var(--text-soft) !important;
  font-size: 0.52rem !important;
  font-weight: 820 !important;
  white-space: nowrap;
}

html[data-theme] body .industrial-seller-performance-gauge-empty {
  color: var(--text-soft);
  opacity: 0.74;
}

html[data-theme] body .industrial-seller-performance-copy {
  display: grid;
  min-width: 0;
  gap: 0.08rem;
}

html[data-theme] body .industrial-seller-performance-copy span,
html[data-theme] body .industrial-seller-performance-score span {
  overflow: hidden;
  color: var(--text-soft) !important;
  font-size: 0.64rem !important;
  font-weight: 820 !important;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-theme] body .industrial-seller-performance-copy strong {
  overflow: hidden;
  color: color-mix(in srgb, var(--seller-performance-color) 78%, var(--text-primary)) !important;
  font-size: 0.86rem !important;
  font-weight: 950 !important;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-theme] body .industrial-seller-performance-dot {
  width: 0.58rem !important;
  height: 0.58rem !important;
  border: 2px solid color-mix(in srgb, var(--surface-2) 74%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--seller-performance-color) 84%, var(--text-primary)) !important;
  box-shadow: 0 0 0 0.22rem color-mix(in srgb, var(--seller-performance-color) 12%, transparent) !important;
}

html[data-theme] body .industrial-seller-performance-score {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.5rem !important;
}

html[data-theme] body .industrial-seller-performance-meter {
  overflow: hidden;
  height: 0.28rem !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--seller-performance-color) 8%, var(--surface-muted)) !important;
}

html[data-theme] body .industrial-seller-performance-meter span {
  display: block;
  width: var(--seller-performance-score);
  min-width: 0.42rem;
  max-width: 100%;
  height: 100%;
  border-radius: inherit;
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--seller-performance-color) 58%, var(--surface-2)),
      color-mix(in srgb, var(--seller-performance-color) 88%, var(--text-primary))
    ) !important;
  box-shadow: none !important;
}

html[data-theme] body .industrial-seller-performance--excellent {
  --seller-performance-color: var(--product-tab-sellers, #56a66f);
}

html[data-theme] body .industrial-seller-performance--stable {
  --seller-performance-color: var(--item-action-inquiry, #2f9b78);
}

html[data-theme] body .industrial-seller-performance--watch {
  --seller-performance-color: var(--item-action-alert, #d69a2d);
}

html[data-theme] body .industrial-seller-performance--risky {
  --seller-performance-color: var(--item-action-wishlist, #d7657c);
}

:root[data-theme="light"] body .industrial-seller-performance {
  border-color: color-mix(in srgb, var(--seller-performance-color) 18%, #d8e3ee) !important;
  background: #ffffff !important;
  box-shadow:
    0 8px 18px rgba(15, 23, 42, 0.045),
    inset 0 1px rgba(255, 255, 255, 0.96) !important;
}

:root[data-theme="light"] body .industrial-seller-performance-gauge {
  border-color: color-mix(in srgb, var(--seller-performance-color) 20%, #d8e3ee) !important;
  background: color-mix(in srgb, var(--seller-performance-color) 7%, #f8fbfe) !important;
}

:root[data-theme="light"] body .industrial-seller-performance-copy span,
:root[data-theme="light"] body .industrial-seller-performance-score span,
:root[data-theme="light"] body .industrial-seller-performance-gauge small {
  color: #7a8797 !important;
}

/* Product intro card redesign: compact reading block plus soft chips for usage and industries. */
html[data-theme] body #intro.industrial-section {
  --intro-accent: var(--product-tab-intro, var(--brand-500));
  position: relative;
  overflow: hidden;
  gap: 1rem;
  padding: clamp(1rem, 1.7vw, 1.25rem);
  border-color: color-mix(in srgb, var(--intro-accent) 17%, var(--line-color)) !important;
  border-radius: 0.72rem;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--intro-accent) 4%, transparent), transparent 48%),
    color-mix(in srgb, var(--panel-bg-strong) 94%, transparent) !important;
  box-shadow:
    0 10px 24px color-mix(in srgb, #000000 13%, transparent),
    inset 0 1px color-mix(in srgb, #ffffff 5%, transparent) !important;
}

html[data-theme] body #intro .industrial-section-head {
  display: grid;
  align-items: flex-start;
  justify-items: start;
  gap: 0.34rem;
  padding-bottom: 0.82rem;
  border-bottom: 1px solid color-mix(in srgb, var(--intro-accent) 13%, var(--line-color));
}

html[data-theme] body #intro .industrial-section-head span {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 1.75rem;
  padding: 0.28rem 0.64rem;
  border: 1px solid color-mix(in srgb, var(--intro-accent) 22%, var(--line-color));
  border-radius: 999px;
  background: color-mix(in srgb, var(--intro-accent) 7%, transparent);
  color: color-mix(in srgb, var(--intro-accent) 64%, var(--text-primary)) !important;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1.4;
}

html[data-theme] body #intro .industrial-section-head h2 {
  min-width: min(100%, 14rem);
  color: var(--text-primary) !important;
  font-size: clamp(1.08rem, 1.6vw, 1.28rem);
  line-height: 1.65;
}

html[data-theme] body #intro.industrial-section > p {
  margin: 0;
  padding: 0.86rem 0.98rem;
  border: 1px solid color-mix(in srgb, var(--intro-accent) 14%, var(--line-color));
  border-radius: 0.62rem;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--intro-accent) 5%, transparent), transparent),
    color-mix(in srgb, var(--surface-muted) 68%, transparent);
  color: color-mix(in srgb, var(--text-soft) 84%, var(--text-primary));
  font-size: 0.9rem;
  font-weight: 760;
  line-height: 2.05;
}

html[data-theme] body #intro .industrial-two-col {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.75rem;
  align-items: stretch;
}

html[data-theme] body #intro .industrial-two-col > div {
  display: grid;
  align-content: start;
  gap: 0.65rem;
  min-width: 0;
  min-height: 0;
  padding: 0.86rem;
  border: 1px solid color-mix(in srgb, var(--intro-accent) 15%, var(--line-color));
  border-radius: 0.62rem;
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--intro-accent) 6%, transparent), transparent 46%),
    color-mix(in srgb, var(--surface-muted) 56%, transparent);
}

html[data-theme] body #intro .industrial-two-col h3 {
  display: flex;
  align-items: center;
  gap: 0.42rem;
  margin: 0;
  color: color-mix(in srgb, var(--text-primary) 90%, var(--intro-accent)) !important;
  font-size: 0.95rem;
  line-height: 1.65;
}

html[data-theme] body #intro .industrial-two-col h3::before {
  content: "";
  width: 0.48rem;
  height: 0.48rem;
  flex: 0 0 auto;
  border-radius: 999px;
  background: color-mix(in srgb, var(--intro-accent) 54%, var(--text-soft));
  box-shadow: 0 0 0 0.24rem color-mix(in srgb, var(--intro-accent) 8%, transparent);
}

html[data-theme] body #intro .industrial-two-col ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.48rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

html[data-theme] body #intro .industrial-two-col li {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  min-height: 2rem;
  padding: 0.28rem 0.68rem;
  border: 1px solid color-mix(in srgb, var(--intro-accent) 17%, var(--line-color));
  border-radius: 999px;
  background: color-mix(in srgb, var(--intro-accent) 6%, var(--surface-muted));
  color: color-mix(in srgb, var(--text-soft) 78%, var(--text-primary));
  font-size: 0.82rem;
  font-weight: 850;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

:root[data-theme="light"] body #intro.industrial-section {
  border-color: #d9e3ee !important;
  background:
    linear-gradient(180deg, rgba(53, 111, 168, 0.035), transparent 48%),
    #ffffff !important;
  box-shadow:
    0 12px 28px rgba(15, 23, 42, 0.055),
    inset 0 1px rgba(255, 255, 255, 0.96) !important;
}

:root[data-theme="light"] body #intro .industrial-section-head {
  border-bottom-color: #e4ebf3 !important;
}

:root[data-theme="light"] body #intro .industrial-section-head span {
  border-color: #dbe6f1 !important;
  background: #f4f8fc !important;
  color: #315f8f !important;
}

:root[data-theme="light"] body #intro .industrial-section-head h2 {
  color: #0f172a !important;
}

:root[data-theme="light"] body #intro.industrial-section > p,
:root[data-theme="light"] body #intro .industrial-two-col > div {
  border-color: #e0e8f0 !important;
  background: #f8fbfe !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.92) !important;
}

:root[data-theme="light"] body #intro.industrial-section > p {
  color: #5c6b7d !important;
}

:root[data-theme="light"] body #intro .industrial-two-col h3 {
  color: #111827 !important;
}

:root[data-theme="light"] body #intro .industrial-two-col li {
  border-color: #dce6f0 !important;
  background: #ffffff !important;
  color: #667587 !important;
}

:root[data-theme="light"] body #specs.industrial-section {
  border-color: #d9e3ee !important;
  background:
    linear-gradient(180deg, rgba(53, 111, 168, 0.03), transparent 46%),
    #ffffff !important;
  box-shadow:
    0 12px 28px rgba(15, 23, 42, 0.05),
    inset 0 1px rgba(255, 255, 255, 0.96) !important;
}

:root[data-theme="light"] body #specs .industrial-section-head {
  border-bottom-color: #e2eaf3 !important;
}

:root[data-theme="light"] body #specs .industrial-section-head span {
  border-color: #d7e5f4 !important;
  background: #f5f9fd !important;
  color: #2f6695 !important;
}

:root[data-theme="light"] body #specs .industrial-spec-table {
  border-color: #dae4ef !important;
  background: #f8fbfe !important;
}

:root[data-theme="light"] body #specs .industrial-spec-table > div {
  border-color: #e2ebf4 !important;
  background: #ffffff !important;
}

:root[data-theme="light"] body #specs .industrial-spec-table span,
:root[data-theme="light"] body #specs .industrial-variant-list span,
:root[data-theme="light"] body #specs .industrial-variant-list small {
  color: #7a8797 !important;
}

:root[data-theme="light"] body #specs .industrial-spec-table strong,
:root[data-theme="light"] body #specs .industrial-variant-list strong {
  color: #111827 !important;
}

:root[data-theme="light"] body #specs .industrial-variant-list > div {
  border-color: #dce6f0 !important;
  background: #f8fbfe !important;
}

html[data-theme] body #specs .industrial-variant-panel {
  display: grid;
  gap: 0.76rem;
  margin-top: 0.2rem;
  padding: 0.86rem;
  border: 1px solid color-mix(in srgb, var(--product-tab-specs) 15%, var(--line-color));
  border-radius: 0.64rem;
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--product-tab-specs) 6%, transparent), transparent 42%),
    color-mix(in srgb, var(--surface-muted) 54%, transparent);
}

html[data-theme] body #specs .industrial-variant-panel-head {
  display: grid;
  gap: 0.22rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid color-mix(in srgb, var(--product-tab-specs) 12%, var(--line-color));
}

html[data-theme] body #specs .industrial-variant-panel-head span {
  width: fit-content;
  color: color-mix(in srgb, var(--product-tab-specs) 70%, var(--text-primary)) !important;
  font-size: 0.72rem;
  font-weight: 900;
}

html[data-theme] body #specs .industrial-variant-panel-head h3 {
  margin: 0;
  color: var(--text-primary) !important;
  font-size: 0.98rem;
  font-weight: 950;
  line-height: 1.65;
}

html[data-theme] body #specs .industrial-variant-panel-head p {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.78rem;
  font-weight: 760;
  line-height: 1.85;
}

html[data-theme] body #specs .industrial-variant-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.72rem;
}

html[data-theme] body #specs .industrial-variant-list > .industrial-variant-card {
  display: grid;
  align-content: start;
  gap: 0.66rem;
  min-width: 0;
  padding: 0.82rem;
  border: 1px solid color-mix(in srgb, var(--product-tab-specs) 15%, var(--line-color));
  border-radius: 0.58rem;
  background:
    linear-gradient(180deg, color-mix(in srgb, #ffffff 4%, transparent), transparent),
    color-mix(in srgb, var(--panel-bg-strong) 78%, transparent);
  box-shadow: inset 0 1px color-mix(in srgb, #ffffff 5%, transparent);
}

html[data-theme] body #specs .industrial-variant-card-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.58rem;
  align-items: start;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

html[data-theme] body #specs .industrial-variant-card-head > div,
html[data-theme] body #specs .industrial-variant-options {
  display: grid;
  gap: 0.18rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

html[data-theme] body #specs .industrial-variant-index {
  display: inline-grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--product-tab-specs) 22%, var(--line-color));
  border-radius: 999px;
  background: color-mix(in srgb, var(--product-tab-specs) 8%, var(--surface-muted));
  color: color-mix(in srgb, var(--product-tab-specs) 72%, var(--text-primary)) !important;
  font-size: 0.78rem !important;
  font-weight: 950 !important;
  line-height: 1;
}

html[data-theme] body #specs .industrial-variant-card strong {
  display: block;
  overflow-wrap: anywhere;
  color: var(--text-primary) !important;
  font-size: 0.94rem;
  line-height: 1.55;
}

html[data-theme] body #specs .industrial-variant-card small {
  display: block;
  margin-top: 0.12rem;
  color: var(--text-soft) !important;
  font-size: 0.72rem;
  font-weight: 820;
  line-height: 1.55;
}

html[data-theme] body #specs .industrial-variant-card em {
  display: inline-flex;
  min-height: 1.55rem;
  align-items: center;
  padding: 0.18rem 0.48rem;
  border: 1px solid color-mix(in srgb, var(--product-tab-specs) 20%, var(--line-color));
  border-radius: 999px;
  background: color-mix(in srgb, var(--product-tab-specs) 7%, transparent);
  color: color-mix(in srgb, var(--product-tab-specs) 72%, var(--text-primary));
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

html[data-theme] body #specs .industrial-variant-meta {
  display: grid;
  gap: 0.44rem;
  margin: 0;
}

html[data-theme] body #specs .industrial-variant-meta div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.55rem;
  align-items: center;
  padding: 0.46rem 0.56rem;
  border: 1px solid color-mix(in srgb, var(--line-color) 70%, transparent);
  border-radius: 0.48rem;
  background: color-mix(in srgb, var(--surface-muted) 50%, transparent);
}

html[data-theme] body #specs .industrial-variant-meta dt,
html[data-theme] body #specs .industrial-variant-options > span {
  color: var(--text-soft) !important;
  font-size: 0.68rem;
  font-weight: 900;
}

html[data-theme] body #specs .industrial-variant-meta dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--text-primary);
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1.6;
}

html[data-theme] body #specs .industrial-variant-options {
  display: grid;
  gap: 0.42rem;
}

html[data-theme] body #specs .industrial-variant-options ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.38rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

html[data-theme] body #specs .industrial-variant-options li {
  display: inline-flex;
  min-height: 1.75rem;
  align-items: center;
  padding: 0.18rem 0.52rem;
  border: 1px solid color-mix(in srgb, var(--product-tab-specs) 15%, var(--line-color));
  border-radius: 999px;
  background: color-mix(in srgb, var(--product-tab-specs) 5%, var(--surface-muted));
  color: color-mix(in srgb, var(--text-soft) 78%, var(--text-primary));
  font-size: 0.72rem;
  font-weight: 840;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

html[data-theme] body #specs .industrial-variant-gallery-action {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: start;
  justify-self: start;
  gap: 0.5rem;
  width: max-content;
  max-width: 100%;
  min-width: 0;
  min-height: 2.75rem;
  padding: 0.28rem 0.38rem;
  border: 1px solid color-mix(in srgb, var(--product-tab-specs) 22%, var(--line-color));
  border-radius: 0.62rem;
  background:
    radial-gradient(circle at 18% 22%, color-mix(in srgb, var(--product-tab-specs) 12%, transparent), transparent 45%),
    color-mix(in srgb, var(--product-tab-specs) 5%, var(--surface-muted));
  color: color-mix(in srgb, var(--product-tab-specs) 76%, var(--text-primary));
  box-shadow: inset 0 1px color-mix(in srgb, #ffffff 7%, transparent);
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    background-color 0.18s ease,
    box-shadow 0.18s ease;
}

html[data-theme] body #specs .industrial-variant-gallery-action:hover,
html[data-theme] body #specs .industrial-variant-gallery-action:focus-visible {
  border-color: color-mix(in srgb, var(--product-tab-specs) 36%, var(--line-color));
  background:
    radial-gradient(circle at 18% 22%, color-mix(in srgb, var(--product-tab-specs) 18%, transparent), transparent 45%),
    color-mix(in srgb, var(--product-tab-specs) 8%, var(--surface-muted));
  box-shadow:
    0 10px 20px color-mix(in srgb, var(--product-tab-specs) 10%, transparent),
    inset 0 1px color-mix(in srgb, #ffffff 8%, transparent);
  transform: translateY(-1px);
}

html[data-theme] body #specs .industrial-variant-gallery-stack {
  direction: ltr;
  display: inline-flex;
  width: max-content;
  min-width: 0;
  align-items: center;
  justify-content: start;
  isolation: isolate;
}

html[data-theme] body #specs .industrial-variant-gallery-stack img {
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  margin-left: -0.56rem;
  padding: 0.12rem;
  border: 1px solid color-mix(in srgb, var(--product-tab-specs) 20%, var(--line-color));
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--panel-bg-strong) 92%, transparent);
  box-shadow:
    0 5px 12px color-mix(in srgb, #000000 12%, transparent),
    inset 0 1px color-mix(in srgb, #ffffff 8%, transparent);
  object-fit: contain;
  transition:
    transform 0.18s ease,
    border-color 0.18s ease;
}

html[data-theme] body #specs .industrial-variant-gallery-stack img:first-child {
  margin-left: 0;
}

html[data-theme] body #specs .industrial-variant-gallery-stack img:nth-child(2) {
  transform: translateY(-0.08rem);
}

html[data-theme] body #specs .industrial-variant-gallery-stack img:nth-child(3) {
  transform: translateY(0.08rem);
}

html[data-theme] body #specs .industrial-variant-gallery-stack img:nth-child(4) {
  transform: translateY(-0.04rem);
}

html[data-theme] body #specs .industrial-variant-gallery-action:hover .industrial-variant-gallery-stack img,
html[data-theme] body #specs .industrial-variant-gallery-action:focus-visible .industrial-variant-gallery-stack img {
  border-color: color-mix(in srgb, var(--product-tab-specs) 34%, var(--line-color));
}

html[data-theme] body #specs .industrial-variant-gallery-action:hover .industrial-variant-gallery-stack img:nth-child(1),
html[data-theme] body #specs .industrial-variant-gallery-action:focus-visible .industrial-variant-gallery-stack img:nth-child(1) {
  transform: translateY(-0.06rem) rotate(-2deg);
}

html[data-theme] body #specs .industrial-variant-gallery-action:hover .industrial-variant-gallery-stack img:nth-child(2),
html[data-theme] body #specs .industrial-variant-gallery-action:focus-visible .industrial-variant-gallery-stack img:nth-child(2) {
  transform: translateY(-0.16rem) rotate(2deg);
}

html[data-theme] body #specs .industrial-variant-gallery-action:hover .industrial-variant-gallery-stack img:nth-child(3),
html[data-theme] body #specs .industrial-variant-gallery-action:focus-visible .industrial-variant-gallery-stack img:nth-child(3) {
  transform: translateY(0.02rem) rotate(-1deg);
}

html[data-theme] body #specs .industrial-variant-gallery-action:hover .industrial-variant-gallery-stack img:nth-child(4),
html[data-theme] body #specs .industrial-variant-gallery-action:focus-visible .industrial-variant-gallery-stack img:nth-child(4) {
  transform: translateY(-0.1rem) rotate(2deg);
}

html[data-theme] body #specs .industrial-variant-gallery-count {
  display: inline-grid;
  width: 1.65rem;
  height: 1.65rem;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--product-tab-specs) 24%, var(--line-color));
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel-bg-strong) 88%, transparent);
  color: color-mix(in srgb, var(--product-tab-specs) 76%, var(--text-primary));
  font-size: 0.72rem;
  font-weight: 950;
  line-height: 1;
}

:root[data-theme="light"] body #specs .industrial-variant-panel {
  border-color: #dde8f3 !important;
  background: #f8fbfe !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.94) !important;
}

:root[data-theme="light"] body #specs .industrial-variant-panel-head {
  border-bottom-color: #e3ebf4 !important;
}

:root[data-theme="light"] body #specs .industrial-variant-panel-head span {
  color: #315f8f !important;
}

:root[data-theme="light"] body #specs .industrial-variant-panel-head h3 {
  color: #111827 !important;
}

:root[data-theme="light"] body #specs .industrial-variant-panel-head p {
  color: #697789 !important;
}

:root[data-theme="light"] body #specs .industrial-variant-list > .industrial-variant-card {
  border-color: #dce6f0 !important;
  background: #ffffff !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.035), inset 0 1px rgba(255, 255, 255, 0.96) !important;
}

:root[data-theme="light"] body #specs .industrial-variant-index,
:root[data-theme="light"] body #specs .industrial-variant-card em {
  border-color: #d5e2ef !important;
  background: #f3f7fb !important;
  color: #315f8f !important;
}

:root[data-theme="light"] body #specs .industrial-variant-card small,
:root[data-theme="light"] body #specs .industrial-variant-meta dt,
:root[data-theme="light"] body #specs .industrial-variant-options > span {
  color: #758294 !important;
}

:root[data-theme="light"] body #specs .industrial-variant-meta div {
  border-color: #e2eaf3 !important;
  background: #f8fbfe !important;
}

:root[data-theme="light"] body #specs .industrial-variant-options li {
  border-color: #dde8f3 !important;
  background: #f8fbfe !important;
  color: #667587 !important;
}

:root[data-theme="light"] body #specs .industrial-variant-gallery-action {
  border-color: #d5e2ef !important;
  background:
    radial-gradient(circle at 18% 22%, rgba(53, 111, 168, 0.1), transparent 45%),
    #f8fbfe !important;
  color: #315f8f !important;
  box-shadow:
    0 8px 18px rgba(15, 23, 42, 0.04),
    inset 0 1px rgba(255, 255, 255, 0.96) !important;
}

:root[data-theme="light"] body #specs .industrial-variant-gallery-action:hover,
:root[data-theme="light"] body #specs .industrial-variant-gallery-action:focus-visible {
  border-color: #c5d7ea !important;
  background:
    radial-gradient(circle at 18% 22%, rgba(53, 111, 168, 0.15), transparent 45%),
    #ffffff !important;
  box-shadow:
    0 12px 24px rgba(15, 23, 42, 0.07),
    inset 0 1px rgba(255, 255, 255, 0.96) !important;
}

:root[data-theme="light"] body #specs .industrial-variant-gallery-stack img {
  border-color: #d8e5f1 !important;
  background: #ffffff !important;
  box-shadow:
    0 5px 12px rgba(15, 23, 42, 0.1),
    inset 0 1px rgba(255, 255, 255, 0.96) !important;
}

:root[data-theme="light"] body #specs .industrial-variant-gallery-count {
  border-color: #d5e2ef !important;
  background: #ffffff !important;
  color: #315f8f !important;
}

html[data-theme] body .variant-gallery-modal-dialog {
  width: min(calc(100vw - 2rem), var(--ui-modal-max-width, 64rem)) !important;
  max-width: min(calc(100vw - 2rem), 64rem) !important;
}

html[data-theme] body .variant-gallery-modal-shell .variant-gallery-modal-dialog {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  transform: translate(-50%, calc(-50% + 0.8rem)) scale(0.985) !important;
}

html[data-theme] body .variant-gallery-modal-shell.is-open .variant-gallery-modal-dialog {
  transform: translate(-50%, -50%) scale(1) !important;
}

html[data-theme] body .variant-gallery-modal-card {
  box-sizing: border-box;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--product-tab-specs, var(--brand-500)) 18%, var(--line-color));
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--product-tab-specs, var(--brand-500)) 10%, transparent), transparent 42%),
    var(--panel-bg-strong);
}

html[data-theme] body .variant-gallery-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.82rem 0.9rem;
  border-bottom: 1px solid color-mix(in srgb, var(--product-tab-specs, var(--brand-500)) 14%, var(--line-color));
}

html[data-theme] body .variant-gallery-modal-head > div {
  display: grid;
  gap: 0.16rem;
  min-width: 0;
}

html[data-theme] body .variant-gallery-modal-kicker {
  margin: 0;
  color: color-mix(in srgb, var(--product-tab-specs, var(--brand-500)) 76%, var(--text-primary));
  font-size: 0.7rem;
  font-weight: 900;
  line-height: 1.5;
}

html[data-theme] body .variant-gallery-modal-head h2 {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--text-primary);
  font-size: 1rem;
  font-weight: 950;
  line-height: 1.55;
}

html[data-theme] body .variant-gallery-modal-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(6.5rem, 0.2fr);
  gap: 0.75rem;
  padding: 0.9rem;
}

html[data-theme] body .variant-gallery-modal-stage {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-width: 0;
  min-height: min(58vh, 32rem);
  margin: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--line-color) 80%, transparent);
  border-radius: 0.7rem;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--line-color) 36%, transparent) 1px, transparent 1px),
    linear-gradient(color-mix(in srgb, var(--line-color) 36%, transparent) 1px, transparent 1px),
    color-mix(in srgb, var(--surface-muted) 58%, transparent);
  background-size: 3rem 3rem;
}

html[data-theme] body .variant-gallery-modal-stage img {
  align-self: center;
  justify-self: center;
  max-width: 100%;
  max-height: min(54vh, 29rem);
  padding: 0.9rem;
  object-fit: contain;
  user-select: none;
}

html[data-theme] body .variant-gallery-modal-stage.industrial-gallery-main {
  grid-template-rows: minmax(0, 1fr) auto;
  cursor: crosshair;
}

html[data-theme] body .variant-gallery-modal-stage.industrial-gallery-main img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  transform: scale(var(--gallery-zoom));
  transform-origin: var(--gallery-focus-x) var(--gallery-focus-y);
}

html[data-theme] body .variant-gallery-modal-stage.industrial-gallery-main .industrial-gallery-zoom-panel {
  bottom: calc(2.25rem + 0.85rem);
}

html[data-theme] body .variant-gallery-modal-stage figcaption {
  min-height: 2.25rem;
  padding: 0.42rem 0.7rem;
  border-top: 1px solid color-mix(in srgb, var(--line-color) 76%, transparent);
  background: color-mix(in srgb, var(--panel-bg-strong) 84%, transparent);
  color: var(--text-soft);
  font-size: 0.74rem;
  font-weight: 850;
  line-height: 1.6;
}

html[data-theme] body .variant-gallery-modal-thumbs {
  display: grid;
  align-content: start;
  gap: 0.5rem;
  max-height: min(58vh, 32rem);
  overflow: auto;
  padding: 0.2rem;
}

html[data-theme] body .variant-gallery-modal-thumb {
  cursor: pointer;
  display: grid;
  width: 100%;
  height: 4.75rem;
  place-items: center;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--line-color) 82%, transparent);
  border-radius: 0.55rem;
  background: color-mix(in srgb, var(--surface-muted) 64%, transparent);
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    background-color 0.18s ease,
    box-shadow 0.18s ease;
}

html[data-theme] body .variant-gallery-modal-thumb img {
  width: 100%;
  height: 100%;
  padding: 0.32rem;
  object-fit: contain;
  user-select: none;
}

html[data-theme] body .variant-gallery-modal-thumb:hover,
html[data-theme] body .variant-gallery-modal-thumb:focus-visible,
html[data-theme] body .variant-gallery-modal-thumb.is-active {
  border-color: color-mix(in srgb, var(--product-tab-specs, var(--brand-500)) 38%, var(--line-color));
  background: color-mix(in srgb, var(--product-tab-specs, var(--brand-500)) 9%, var(--surface-muted));
  box-shadow: 0 8px 18px color-mix(in srgb, var(--product-tab-specs, var(--brand-500)) 12%, transparent);
  transform: translateY(-1px);
}

html[data-theme] body .variant-gallery-modal-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 0.8rem;
  border: 1px dashed color-mix(in srgb, var(--line-color) 86%, transparent);
  border-radius: 0.55rem;
  color: var(--text-soft);
  font-size: 0.82rem;
  font-weight: 850;
  text-align: center;
}

:root[data-theme="light"] body .variant-gallery-modal-card {
  border-color: #d8e4f0 !important;
  background:
    radial-gradient(circle at 100% 0, rgba(53, 111, 168, 0.08), transparent 42%),
    #ffffff !important;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.16), inset 0 1px rgba(255, 255, 255, 0.96) !important;
}

:root[data-theme="light"] body .variant-gallery-modal-head {
  border-bottom-color: #e1eaf4 !important;
}

:root[data-theme="light"] body .variant-gallery-modal-kicker {
  color: #315f8f !important;
}

:root[data-theme="light"] body .variant-gallery-modal-stage {
  border-color: #dbe6f0 !important;
  background:
    linear-gradient(90deg, rgba(203, 213, 225, 0.42) 1px, transparent 1px),
    linear-gradient(rgba(203, 213, 225, 0.42) 1px, transparent 1px),
    #f8fbfe !important;
}

:root[data-theme="light"] body .variant-gallery-modal-stage figcaption {
  border-top-color: #e2eaf3 !important;
  background: #ffffff !important;
  color: #667587 !important;
}

:root[data-theme="light"] body .variant-gallery-modal-thumb {
  border-color: #dbe6f1 !important;
  background: #ffffff !important;
}

:root[data-theme="light"] body .variant-gallery-modal-thumb:hover,
:root[data-theme="light"] body .variant-gallery-modal-thumb:focus-visible,
:root[data-theme="light"] body .variant-gallery-modal-thumb.is-active {
  border-color: #b9cee5 !important;
  background: #f4f8fc !important;
  box-shadow: 0 8px 18px rgba(53, 111, 168, 0.1) !important;
}

@media (max-width: 48rem) {
  html[data-theme] body .variant-gallery-modal-body {
    grid-template-columns: minmax(0, 1fr);
    padding: 0.68rem;
  }

  html[data-theme] body .variant-gallery-modal-head {
    padding: 0.72rem;
  }

  html[data-theme] body .variant-gallery-modal-stage {
    min-height: 18rem;
  }

  html[data-theme] body .variant-gallery-modal-stage img {
    max-height: 15rem;
    padding: 0.65rem;
  }

  html[data-theme] body .variant-gallery-modal-stage.industrial-gallery-main img {
    height: 100%;
    max-height: none;
  }

  html[data-theme] body .variant-gallery-modal-stage.industrial-gallery-main .industrial-gallery-zoom-panel {
    bottom: calc(2.25rem + 0.56rem);
  }

  html[data-theme] body .variant-gallery-modal-thumbs {
    grid-auto-columns: 4.8rem;
    grid-auto-flow: column;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 0.35rem;
  }

  html[data-theme] body .variant-gallery-modal-thumb {
    width: 4.8rem;
    height: 4.2rem;
  }
}

@media (max-width: 58rem) {
  html[data-theme] body #specs .industrial-variant-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 48rem) {
  html[data-theme] body #intro .industrial-two-col {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Header quick action geometry lock: every circular chip keeps the same visual diameter. */
:root {
  --header-action-circle-size: 2.72rem;
  --header-action-icon-size: 1.48rem;
  --header-action-badge-size: 1.22rem;
}

html[data-theme] body .header-stable-actions {
  align-items: center !important;
  gap: 0.38rem !important;
}

html[data-theme] body .header-stable-actions .header-action-group {
  align-items: center !important;
}

html[data-theme] body .header-stable-actions :is(
  .header-icon-chip,
  #site-wishlist-icon.header-icon-wishlist,
  #site-compare-icon.header-icon-compare,
  #site-cart-icon.header-icon-cart,
  #site-inquiry-icon.header-icon-inquiry,
  #site-alerts-button.header-icon-alerts,
  .header-theme-toggle.header-icon-chip,
  .header-icon-admin.header-icon-chip
) {
  position: relative !important;
  display: inline-grid !important;
  width: var(--header-action-circle-size) !important;
  min-width: var(--header-action-circle-size) !important;
  max-width: var(--header-action-circle-size) !important;
  height: var(--header-action-circle-size) !important;
  min-height: var(--header-action-circle-size) !important;
  max-height: var(--header-action-circle-size) !important;
  flex: 0 0 var(--header-action-circle-size) !important;
  place-items: center !important;
  padding: 0 !important;
  border-radius: 999px !important;
  box-sizing: border-box !important;
  line-height: 1 !important;
}

html[data-theme] body .header-stable-actions .header-icon-chip .header-chip-icon {
  width: var(--header-action-icon-size) !important;
  min-width: var(--header-action-icon-size) !important;
  max-width: var(--header-action-icon-size) !important;
  height: var(--header-action-icon-size) !important;
  min-height: var(--header-action-icon-size) !important;
  max-height: var(--header-action-icon-size) !important;
  flex: 0 0 var(--header-action-icon-size) !important;
}

html[data-theme] body .header-stable-actions .header-icon-chip > .badge-count {
  position: absolute !important;
  inset-block-start: -0.25rem !important;
  inset-inline-start: -0.16rem !important;
  inset-inline-end: auto !important;
  display: inline-grid !important;
  width: var(--header-action-badge-size) !important;
  min-width: var(--header-action-badge-size) !important;
  max-width: var(--header-action-badge-size) !important;
  height: var(--header-action-badge-size) !important;
  min-height: var(--header-action-badge-size) !important;
  max-height: var(--header-action-badge-size) !important;
  place-items: center !important;
  padding: 0 !important;
  border-radius: 999px !important;
  font-size: 0.68rem !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
  transform: none !important;
}

/* Final action palette pass: heavier, quieter colors without the toy-like glow. */
:root {
  --ui-action-neutral: #637287;
  --ui-action-alert: #806437;
  --ui-action-cart: #335f8e;
  --ui-action-inquiry: #246f63;
  --ui-action-wishlist: #96323f;
  --ui-action-compare: #73592a;
  --ui-action-admin: #625982;
  --header-action-muted-off: #657386;
  --header-action-muted-on: #345f8d;
}

:root[data-theme="light"] {
  --ui-action-neutral: #526174;
  --ui-action-alert: #745b31;
  --ui-action-cart: #2c5c8f;
  --ui-action-inquiry: #1f665c;
  --ui-action-wishlist: #8d2f3b;
  --ui-action-compare: #6b5327;
  --ui-action-admin: #5b5378;
  --header-action-muted-off: #586779;
  --header-action-muted-on: #2d5a89;
}

html[data-theme] body .header-stable-actions :is(
  #site-alerts-button.header-icon-alerts,
  #site-wishlist-icon.header-icon-wishlist,
  #site-compare-icon.header-icon-compare,
  #site-cart-icon.header-icon-cart,
  #site-inquiry-icon.header-icon-inquiry,
  #site-account-chip.header-icon-chip,
  .header-theme-toggle.header-icon-chip,
  .header-icon-admin.header-icon-chip
),
html[data-theme] body :is(.mobile-menu-chip.header-icon-chip, .drawer-close-chip.header-icon-chip) {
  color: color-mix(in srgb, var(--header-action-color) 68%, var(--text-primary)) !important;
  border-color: color-mix(in srgb, var(--header-action-color) 24%, var(--line-color)) !important;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--header-action-color) 7%, var(--surface-2)),
      color-mix(in srgb, var(--header-action-color) 3%, var(--surface-2))
    ) !important;
  box-shadow:
    0 5px 14px color-mix(in srgb, #000000 10%, transparent),
    inset 0 1px color-mix(in srgb, #ffffff 34%, transparent) !important;
  filter: saturate(0.78) contrast(0.98) !important;
}

:root[data-theme="light"] body .header-stable-actions :is(
  #site-alerts-button.header-icon-alerts,
  #site-wishlist-icon.header-icon-wishlist,
  #site-compare-icon.header-icon-compare,
  #site-cart-icon.header-icon-cart,
  #site-inquiry-icon.header-icon-inquiry,
  #site-account-chip.header-icon-chip,
  .header-theme-toggle.header-icon-chip,
  .header-icon-admin.header-icon-chip
),
:root[data-theme="light"] body :is(.mobile-menu-chip.header-icon-chip, .drawer-close-chip.header-icon-chip) {
  color: color-mix(in srgb, var(--header-action-color) 74%, #172033) !important;
  border-color: color-mix(in srgb, var(--header-action-color) 28%, #d8e1ec) !important;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--header-action-color) 7%, #ffffff),
      color-mix(in srgb, var(--header-action-color) 4%, #f7fafc)
    ) !important;
  box-shadow:
    0 6px 14px rgba(18, 29, 45, 0.06),
    inset 0 1px rgba(255, 255, 255, 0.92) !important;
}

html[data-theme] body .header-stable-actions :is(
  #site-alerts-button.header-icon-alerts:hover,
  #site-alerts-button.header-icon-alerts:focus-visible,
  #site-wishlist-icon.header-icon-wishlist:hover,
  #site-wishlist-icon.header-icon-wishlist:focus-visible,
  #site-compare-icon.header-icon-compare:hover,
  #site-compare-icon.header-icon-compare:focus-visible,
  #site-cart-icon.header-icon-cart:hover,
  #site-cart-icon.header-icon-cart:focus-visible,
  #site-inquiry-icon.header-icon-inquiry:hover,
  #site-inquiry-icon.header-icon-inquiry:focus-visible,
  #site-account-chip.header-icon-chip:hover,
  #site-account-chip.header-icon-chip:focus-visible,
  .header-theme-toggle.header-icon-chip:hover,
  .header-theme-toggle.header-icon-chip:focus-visible,
  .header-icon-admin.header-icon-chip:hover,
  .header-icon-admin.header-icon-chip:focus-visible
) {
  color: color-mix(in srgb, var(--header-action-color) 78%, var(--text-primary)) !important;
  border-color: color-mix(in srgb, var(--header-action-color) 36%, var(--line-color)) !important;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--header-action-color) 10%, var(--surface-2)),
      color-mix(in srgb, var(--header-action-color) 5%, var(--surface-2))
    ) !important;
  box-shadow:
    0 8px 18px color-mix(in srgb, #000000 12%, transparent),
    inset 0 1px color-mix(in srgb, #ffffff 42%, transparent) !important;
  filter: saturate(0.86) contrast(1) !important;
}

html[data-theme] body .header-stable-actions :is(
  #site-alerts-button.header-icon-alerts-active,
  #site-wishlist-icon.header-icon-wishlist-active,
  #site-compare-icon.header-icon-compare-active,
  #site-cart-icon.header-icon-cart-active,
  #site-inquiry-icon.header-icon-inquiry-active
) {
  color: color-mix(in srgb, var(--header-action-color) 84%, var(--text-primary)) !important;
  border-color: color-mix(in srgb, var(--header-action-color) 42%, var(--line-color)) !important;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--header-action-color) 13%, var(--surface-2)),
      color-mix(in srgb, var(--header-action-color) 7%, var(--surface-2))
    ) !important;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--header-action-color) 8%, transparent),
    0 8px 18px color-mix(in srgb, #000000 11%, transparent),
    inset 0 1px color-mix(in srgb, #ffffff 44%, transparent) !important;
  filter: saturate(0.9) contrast(1) !important;
}

html[data-theme] body .header-stable-actions :is(
  #site-alerts-button,
  #site-wishlist-icon,
  #site-compare-icon,
  #site-cart-icon,
  #site-inquiry-icon
) > .badge-count,
html[data-theme] body .drawer-link .badge-count {
  color: #ffffff !important;
  border-color: color-mix(in srgb, #ffffff 82%, transparent) !important;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--header-action-color) 72%, #526070),
      color-mix(in srgb, var(--header-action-color) 80%, #182235)
    ) !important;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--header-action-color) 12%, transparent),
    0 4px 9px color-mix(in srgb, var(--header-action-color) 14%, transparent) !important;
  filter: saturate(0.9) contrast(1.02) !important;
}

html[data-theme] body .nav-pill {
  border-color: color-mix(in srgb, var(--header-action-muted-off) 18%, var(--line-color)) !important;
  background: color-mix(in srgb, var(--header-action-muted-off) 4%, var(--surface-2)) !important;
  color: color-mix(in srgb, var(--header-action-muted-off) 62%, var(--text-primary)) !important;
  box-shadow: inset 0 1px color-mix(in srgb, #ffffff 28%, transparent) !important;
  filter: saturate(0.78) !important;
}

html[data-theme] body .nav-pill:hover,
html[data-theme] body .nav-pill:focus-visible {
  border-color: color-mix(in srgb, var(--header-action-muted-on) 30%, var(--line-color)) !important;
  background: color-mix(in srgb, var(--header-action-muted-on) 7%, var(--surface-2)) !important;
  color: color-mix(in srgb, var(--header-action-muted-on) 76%, var(--text-primary)) !important;
}

html[data-theme] body .nav-pill-active {
  border-color: color-mix(in srgb, var(--header-action-muted-on) 38%, var(--line-color)) !important;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--header-action-muted-on) 12%, var(--surface-2)),
      color-mix(in srgb, var(--header-action-muted-on) 6%, var(--surface-2))
    ) !important;
  color: color-mix(in srgb, var(--header-action-muted-on) 86%, var(--text-primary)) !important;
  box-shadow:
    0 5px 14px color-mix(in srgb, #000000 8%, transparent),
    inset 0 1px color-mix(in srgb, #ffffff 34%, transparent) !important;
  filter: saturate(0.86) !important;
}

:root[data-theme="light"] body .nav-pill {
  border-color: color-mix(in srgb, var(--header-action-muted-off) 16%, #d8e1ec) !important;
  background: color-mix(in srgb, var(--header-action-muted-off) 4%, #ffffff) !important;
  color: color-mix(in srgb, var(--header-action-muted-off) 66%, #172033) !important;
}

:root[data-theme="light"] body .nav-pill-active {
  border-color: color-mix(in srgb, var(--header-action-muted-on) 34%, #cfd9e7) !important;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--header-action-muted-on) 10%, #ffffff),
      color-mix(in srgb, var(--header-action-muted-on) 6%, #f5f8fc)
    ) !important;
  color: color-mix(in srgb, var(--header-action-muted-on) 84%, #172033) !important;
  box-shadow:
    0 6px 16px rgba(18, 29, 45, 0.07),
    inset 0 1px rgba(255, 255, 255, 0.94) !important;
}

html[data-theme] body .header-desktop-nav {
  align-items: center;
  gap: 0.28rem !important;
}

html[data-theme] body .header-desktop-nav .nav-pill {
  position: relative;
  min-height: 1.9rem !important;
  border: 0 !important;
  border-radius: 0.48rem !important;
  padding: 0.2rem 0.62rem !important;
  background: transparent !important;
  color: color-mix(in srgb, var(--text-muted) 84%, var(--text-primary)) !important;
  box-shadow: none !important;
  filter: none !important;
  font-size: var(--ops-type-control, 0.82rem) !important;
  line-height: 1.25 !important;
  font-weight: 760 !important;
}

html[data-theme] body .header-desktop-nav .nav-pill::after {
  content: "";
  position: absolute;
  inset-inline: 0.7rem;
  bottom: 0.18rem;
  height: 2px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand-400) 76%, var(--text-muted));
  opacity: 0;
  transform: scaleX(0.28);
  transition: opacity 0.18s ease, transform 0.18s ease, background-color 0.18s ease;
}

html[data-theme] body .header-desktop-nav .nav-pill:hover,
html[data-theme] body .header-desktop-nav .nav-pill:focus-visible {
  border-color: transparent !important;
  background: color-mix(in srgb, var(--brand-400) 7%, transparent) !important;
  color: var(--text-primary) !important;
  box-shadow: none !important;
}

html[data-theme] body .header-desktop-nav .nav-pill:hover::after,
html[data-theme] body .header-desktop-nav .nav-pill:focus-visible::after,
html[data-theme] body .header-desktop-nav .nav-pill-active::after {
  opacity: 1;
  transform: scaleX(1);
}

html[data-theme] body .header-desktop-nav .nav-pill-active {
  border-color: transparent !important;
  background: color-mix(in srgb, var(--brand-400) 9%, transparent) !important;
  color: color-mix(in srgb, var(--brand-400) 82%, var(--text-primary)) !important;
  box-shadow: none !important;
  filter: none !important;
}

:root[data-theme="light"] body .header-desktop-nav .nav-pill {
  color: color-mix(in srgb, #475569 86%, #0f172a) !important;
}

:root[data-theme="light"] body .header-desktop-nav .nav-pill:hover,
:root[data-theme="light"] body .header-desktop-nav .nav-pill:focus-visible,
:root[data-theme="light"] body .header-desktop-nav .nav-pill-active {
  background: color-mix(in srgb, var(--brand-500) 7%, transparent) !important;
  color: color-mix(in srgb, var(--brand-600) 78%, #0f172a) !important;
}

html[data-theme] body .industrial-gallery-action-wishlist {
  --gallery-action-color: var(--ui-action-wishlist, #96323f) !important;
}

html[data-theme] body .industrial-gallery-action-compare {
  --gallery-action-color: var(--ui-action-compare, #73592a) !important;
}

html[data-theme] body .industrial-gallery-action-share {
  --gallery-action-color: var(--ui-action-share, #386a90) !important;
}

html[data-theme] body .industrial-gallery-action {
  border-color: color-mix(in srgb, var(--gallery-action-color) 28%, var(--line-color)) !important;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--gallery-action-color) 7%, var(--panel-bg-strong)),
      color-mix(in srgb, var(--gallery-action-color) 3%, var(--panel-bg-strong))
    ) !important;
  color: color-mix(in srgb, var(--gallery-action-color) 74%, var(--text-primary)) !important;
  box-shadow:
    0 8px 18px color-mix(in srgb, #000000 10%, transparent),
    inset 0 1px color-mix(in srgb, #ffffff 34%, transparent) !important;
  filter: saturate(0.78) !important;
}

:root[data-theme="light"] body .industrial-gallery-action {
  border-color: color-mix(in srgb, var(--gallery-action-color) 30%, #d4deea) !important;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--gallery-action-color) 7%, #ffffff),
      color-mix(in srgb, var(--gallery-action-color) 4%, #f8fbff)
    ) !important;
  color: color-mix(in srgb, var(--gallery-action-color) 78%, #172033) !important;
  box-shadow:
    0 8px 18px rgba(18, 29, 45, 0.08),
    inset 0 1px rgba(255, 255, 255, 0.92) !important;
}

html[data-theme] body .industrial-gallery-action:hover,
html[data-theme] body .industrial-gallery-action:focus-visible {
  border-color: color-mix(in srgb, var(--gallery-action-color) 40%, var(--line-color)) !important;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--gallery-action-color) 11%, var(--panel-bg-strong)),
      color-mix(in srgb, var(--gallery-action-color) 5%, var(--panel-bg-strong))
    ) !important;
  color: color-mix(in srgb, var(--gallery-action-color) 84%, var(--text-primary)) !important;
  box-shadow:
    0 10px 22px color-mix(in srgb, #000000 11%, transparent),
    inset 0 1px color-mix(in srgb, #ffffff 42%, transparent) !important;
  filter: saturate(0.86) !important;
  transform: translateY(-1px);
}

html[data-theme] body .industrial-gallery-action.is-active {
  color: #ffffff !important;
  border-color: color-mix(in srgb, var(--gallery-action-color) 62%, var(--line-color)) !important;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--gallery-action-color) 74%, #4c5969),
      color-mix(in srgb, var(--gallery-action-color) 82%, #111827)
    ) !important;
  box-shadow:
    0 10px 22px color-mix(in srgb, var(--gallery-action-color) 16%, transparent),
    inset 0 1px color-mix(in srgb, #ffffff 34%, transparent) !important;
  filter: saturate(0.9) contrast(1.02) !important;
}

/* Light-theme restraint pass: color is a signal, not the whole surface. */
:root[data-theme="light"] {
  --ui-action-neutral: #4f5c6d;
  --ui-action-alert: #5f4b2d;
  --ui-action-cart: #2c537b;
  --ui-action-inquiry: #205a51;
  --ui-action-wishlist: #7f2f38;
  --ui-action-compare: #5f4d2b;
  --ui-action-share: #365d7f;
  --ui-action-admin: #554f6d;
  --header-action-muted-off: #536171;
  --header-action-muted-on: #2b557f;
}

:root[data-theme="light"] body .header-stable-actions :is(
  #site-alerts-button.header-icon-alerts,
  #site-wishlist-icon.header-icon-wishlist,
  #site-compare-icon.header-icon-compare,
  #site-cart-icon.header-icon-cart,
  #site-inquiry-icon.header-icon-inquiry,
  #site-account-chip.header-icon-chip,
  .header-theme-toggle.header-icon-chip,
  .header-icon-admin.header-icon-chip
),
:root[data-theme="light"] body :is(.mobile-menu-chip.header-icon-chip, .drawer-close-chip.header-icon-chip) {
  color: color-mix(in srgb, var(--header-action-color) 82%, #182233) !important;
  border-color: color-mix(in srgb, var(--header-action-color) 26%, #d5dde8) !important;
  background:
    linear-gradient(
      180deg,
      #fbfcfe,
      #f7f9fc
    ) !important;
  box-shadow:
    0 5px 12px rgba(18, 29, 45, 0.055),
    inset 0 1px rgba(255, 255, 255, 0.94) !important;
  filter: saturate(0.68) contrast(1.02) !important;
}

:root[data-theme="light"] body .header-stable-actions :is(
  #site-alerts-button.header-icon-alerts:hover,
  #site-alerts-button.header-icon-alerts:focus-visible,
  #site-wishlist-icon.header-icon-wishlist:hover,
  #site-wishlist-icon.header-icon-wishlist:focus-visible,
  #site-compare-icon.header-icon-compare:hover,
  #site-compare-icon.header-icon-compare:focus-visible,
  #site-cart-icon.header-icon-cart:hover,
  #site-cart-icon.header-icon-cart:focus-visible,
  #site-inquiry-icon.header-icon-inquiry:hover,
  #site-inquiry-icon.header-icon-inquiry:focus-visible,
  #site-account-chip.header-icon-chip:hover,
  #site-account-chip.header-icon-chip:focus-visible,
  .header-theme-toggle.header-icon-chip:hover,
  .header-theme-toggle.header-icon-chip:focus-visible,
  .header-icon-admin.header-icon-chip:hover,
  .header-icon-admin.header-icon-chip:focus-visible
) {
  color: color-mix(in srgb, var(--header-action-color) 88%, #111827) !important;
  border-color: color-mix(in srgb, var(--header-action-color) 36%, #ccd7e4) !important;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--header-action-color) 5.5%, #ffffff),
      color-mix(in srgb, var(--header-action-color) 2.5%, #f7f9fc)
    ) !important;
  filter: saturate(0.78) contrast(1.02) !important;
}

:root[data-theme="light"] body .header-stable-actions :is(
  #site-alerts-button.header-icon-alerts-active,
  #site-wishlist-icon.header-icon-wishlist-active,
  #site-compare-icon.header-icon-compare-active,
  #site-cart-icon.header-icon-cart-active,
  #site-inquiry-icon.header-icon-inquiry-active
) {
  color: color-mix(in srgb, var(--header-action-color) 90%, #111827) !important;
  border-color: color-mix(in srgb, var(--header-action-color) 42%, #cbd6e3) !important;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--header-action-color) 7%, #ffffff),
      color-mix(in srgb, var(--header-action-color) 3.5%, #f6f8fb)
    ) !important;
  filter: saturate(0.82) contrast(1.03) !important;
}

:root[data-theme="light"] body .header-stable-actions :is(
  #site-alerts-button,
  #site-wishlist-icon,
  #site-compare-icon,
  #site-cart-icon,
  #site-inquiry-icon
) > .badge-count,
:root[data-theme="light"] body .drawer-link .badge-count {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--header-action-color) 68%, #5a6675),
      color-mix(in srgb, var(--header-action-color) 78%, #182234)
    ) !important;
  filter: saturate(0.82) contrast(1.04) !important;
}

:root[data-theme="light"] body .header-search-submit {
  color: #2b557f !important;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: saturate(0.72) !important;
}

:root[data-theme="light"] body .industrial-gallery-action {
  border-color: color-mix(in srgb, var(--gallery-action-color) 27%, #d5dde8) !important;
  background:
    linear-gradient(
      180deg,
      #fbfcfe,
      #f8fbff
    ) !important;
  color: color-mix(in srgb, var(--gallery-action-color) 84%, #172033) !important;
  filter: saturate(0.68) contrast(1.02) !important;
}

:root[data-theme="light"] body .industrial-gallery-action:hover,
:root[data-theme="light"] body .industrial-gallery-action:focus-visible {
  border-color: color-mix(in srgb, var(--gallery-action-color) 38%, #ccd7e4) !important;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--gallery-action-color) 5.5%, #ffffff),
      color-mix(in srgb, var(--gallery-action-color) 2.5%, #f8fbff)
    ) !important;
  filter: saturate(0.78) contrast(1.02) !important;
}

/* Product media actions: match the calmer header icon treatment. */
html[data-theme] body .industrial-gallery-actions {
  gap: 0.28rem !important;
}

html[data-theme] body .industrial-gallery-action {
  width: 2rem !important;
  height: 2rem !important;
  min-width: 2rem !important;
  min-height: 2rem !important;
  border-radius: 999px !important;
  border-color: color-mix(in srgb, var(--gallery-action-color) 20%, var(--line-color)) !important;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--panel-bg-strong) 96%, transparent),
      color-mix(in srgb, var(--panel-bg-strong) 88%, transparent)
    ) !important;
  color: color-mix(in srgb, var(--gallery-action-color) 76%, var(--text-primary)) !important;
  box-shadow:
    0 5px 14px color-mix(in srgb, #000000 10%, transparent),
    inset 0 1px color-mix(in srgb, #ffffff 34%, transparent) !important;
  filter: saturate(0.7) contrast(1.02) !important;
}

html[data-theme] body .industrial-gallery-action svg {
  width: var(--ui-icon-button-glyph, 1.28rem) !important;
  height: var(--ui-icon-button-glyph, 1.28rem) !important;
}

html[data-theme] body .industrial-gallery-action:hover,
html[data-theme] body .industrial-gallery-action:focus-visible {
  color: color-mix(in srgb, var(--gallery-action-color) 88%, var(--text-primary)) !important;
  border-color: color-mix(in srgb, var(--gallery-action-color) 34%, var(--line-color)) !important;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--gallery-action-color) 7%, var(--panel-bg-strong)),
      color-mix(in srgb, var(--gallery-action-color) 3.5%, var(--panel-bg-strong))
    ) !important;
  box-shadow:
    0 6px 15px color-mix(in srgb, #000000 11%, transparent),
    inset 0 1px color-mix(in srgb, #ffffff 38%, transparent) !important;
  filter: saturate(0.78) contrast(1.03) !important;
  transform: translateY(-1px);
}

:root[data-theme="light"] body .industrial-gallery-action {
  border-color: color-mix(in srgb, var(--gallery-action-color) 22%, #d5dde8) !important;
  background:
    linear-gradient(
      180deg,
      #fbfcfe,
      #f7f9fc
    ) !important;
  color: color-mix(in srgb, var(--gallery-action-color) 78%, #182233) !important;
  box-shadow:
    0 5px 12px rgba(18, 29, 45, 0.055),
    inset 0 1px rgba(255, 255, 255, 0.94) !important;
  filter: saturate(0.68) contrast(1.02) !important;
}

:root[data-theme="light"] body .industrial-gallery-action:hover,
:root[data-theme="light"] body .industrial-gallery-action:focus-visible {
  color: color-mix(in srgb, var(--gallery-action-color) 88%, #111827) !important;
  border-color: color-mix(in srgb, var(--gallery-action-color) 34%, #ccd7e4) !important;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--gallery-action-color) 5.5%, #ffffff),
      color-mix(in srgb, var(--gallery-action-color) 2.5%, #f7f9fc)
    ) !important;
  filter: saturate(0.78) contrast(1.02) !important;
}

html[data-theme] body .industrial-gallery-action.is-active,
html[data-theme] body .industrial-gallery-action.is-active:hover,
html[data-theme] body .industrial-gallery-action.is-active:focus-visible {
  color: #ffffff !important;
  border-color: color-mix(in srgb, var(--gallery-action-color) 62%, var(--line-color)) !important;
  background:
    radial-gradient(circle at 30% 18%, color-mix(in srgb, #ffffff 20%, transparent), transparent 44%),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--gallery-action-color) 76%, #f8fafc),
      color-mix(in srgb, var(--gallery-action-color) 84%, #111827)
    ) !important;
  box-shadow:
    0 9px 20px color-mix(in srgb, var(--gallery-action-color) 18%, transparent),
    inset 0 1px color-mix(in srgb, #ffffff 34%, transparent) !important;
  filter: saturate(0.92) contrast(1.03) !important;
  transform: translateY(-1px);
}

/* Seller table trust signal: keep it as a table value, not a standalone card. */
html[data-theme] body #sellers .industrial-seller-performance {
  --seller-performance-color: var(--text-soft);
  display: inline-grid !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  place-items: center !important;
  gap: 0.14rem !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--text-primary) !important;
  text-align: center !important;
}

html[data-theme] body #sellers .industrial-seller-performance--excellent,
html[data-theme] body #sellers .industrial-seller-performance--stable {
  --seller-performance-color: color-mix(in srgb, var(--item-action-inquiry, #246f63) 74%, var(--text-primary));
}

html[data-theme] body #sellers .industrial-seller-performance--watch {
  --seller-performance-color: color-mix(in srgb, var(--item-action-alert, #806437) 76%, var(--text-primary));
}

html[data-theme] body #sellers .industrial-seller-performance--risky {
  --seller-performance-color: color-mix(in srgb, var(--item-action-wishlist, #96323f) 76%, var(--text-primary));
}

html[data-theme] body #sellers .industrial-seller-performance-label,
html[data-theme] body #sellers .industrial-seller-performance small {
  display: block !important;
  color: var(--text-soft) !important;
  font-size: 0.72rem !important;
  font-weight: 850 !important;
  line-height: 1.45 !important;
  white-space: nowrap !important;
}

html[data-theme] body #sellers .industrial-seller-performance strong {
  display: block !important;
  color: color-mix(in srgb, var(--seller-performance-color) 86%, var(--text-primary)) !important;
  font-size: 0.9rem !important;
  font-weight: 950 !important;
  line-height: 1.35 !important;
  white-space: nowrap !important;
}

:root[data-theme="light"] body #sellers .industrial-seller-performance-label,
:root[data-theme="light"] body #sellers .industrial-seller-performance small {
  color: #7a8798 !important;
}

/* Public footer signals: make light-mode social and trust controls feel current. */
:root[data-theme="light"] body .site-footer.site-footer-minimal {
  border-color: #d8e3ef !important;
  background: #ffffff !important;
  box-shadow:
    0 12px 28px rgba(15, 23, 42, 0.055),
    inset 0 1px rgba(255, 255, 255, 0.96) !important;
}

:root[data-theme="light"] body .site-footer-minimal .site-footer-minimal-head,
:root[data-theme="light"] body .site-footer-minimal .site-footer-bottom {
  border-color: #e2e9f2 !important;
}

:root[data-theme="light"] body .site-footer-minimal .site-footer-minimal-actions {
  gap: 0.5rem !important;
}

:root[data-theme="light"] body .site-footer-minimal .site-footer-action {
  min-height: 2.38rem !important;
  padding: 0.54rem 0.82rem !important;
  border-radius: 0.66rem !important;
  border: 1px solid #2f6fb8 !important;
  background: #2f6fb8 !important;
  color: #ffffff !important;
  box-shadow: none !important;
  filter: none !important;
}

:root[data-theme="light"] body .site-footer-minimal .site-footer-action:hover,
:root[data-theme="light"] body .site-footer-minimal .site-footer-action:focus-visible {
  border-color: #285f9f !important;
  background: #285f9f !important;
  box-shadow: 0 7px 16px rgba(47, 111, 184, 0.16) !important;
}

:root[data-theme="light"] body .site-footer-minimal .site-footer-action-secondary {
  border-color: #d8e3ef !important;
  background: #f8fbfe !important;
  color: #5c6b7f !important;
}

:root[data-theme="light"] body .site-footer-minimal .site-footer-action-secondary:hover,
:root[data-theme="light"] body .site-footer-minimal .site-footer-action-secondary:focus-visible {
  border-color: #cbd9e8 !important;
  background: #ffffff !important;
  color: #334155 !important;
  box-shadow: 0 7px 16px rgba(15, 23, 42, 0.06) !important;
}

:root[data-theme="light"] body .site-footer-minimal .site-footer-minimal-signals {
  gap: 0.78rem !important;
}

:root[data-theme="light"] body .site-footer-minimal .site-footer-minimal-signals .footer-title {
  margin-bottom: 0.1rem !important;
  color: #334155 !important;
  font-size: 0.82rem !important;
  font-weight: 950 !important;
}

:root[data-theme="light"] body .site-footer-minimal .site-footer-signal-group {
  gap: 0.42rem !important;
}

:root[data-theme="light"] body .site-footer-minimal .site-footer-signal-label {
  color: #8a97a8 !important;
  font-size: 0.7rem !important;
  font-weight: 900 !important;
  line-height: 1.5 !important;
}

html[data-theme] body .site-footer-minimal .site-footer-social-grid .site-footer-social-icon {
  width: 2rem !important;
  height: 2rem !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-theme] body .site-footer-minimal .site-footer-social-grid .site-footer-social-icon svg {
  width: 100% !important;
  height: 100% !important;
}

html[data-theme] body .site-footer-minimal .site-footer-social-grid .site-footer-social-link:hover,
html[data-theme] body .site-footer-minimal .site-footer-social-grid .site-footer-social-link:focus-visible {
  background: transparent !important;
  box-shadow: none !important;
}

:root[data-theme="light"] body .site-footer-minimal .site-footer-social-grid {
  display: inline-flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  max-width: 100% !important;
  gap: 0.18rem !important;
  padding: 0.26rem 0.34rem !important;
  border: 1px solid #dde7f1 !important;
  border-radius: 0.78rem !important;
  background: #f8fbfe !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.9) !important;
}

:root[data-theme="light"] body .site-footer-minimal .site-footer-social-grid .site-footer-social-link {
  display: inline-grid !important;
  width: 2.5rem !important;
  height: 2.5rem !important;
  min-width: 2.5rem !important;
  place-items: center !important;
  padding: 0 !important;
  border: 1px solid transparent !important;
  border-radius: 0.58rem !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}

:root[data-theme="light"] body .site-footer-minimal .site-footer-social-grid .site-footer-social-icon {
  filter: none !important;
}

:root[data-theme="light"] body .site-footer-minimal .site-footer-social-grid .site-footer-social-link:hover,
:root[data-theme="light"] body .site-footer-minimal .site-footer-social-grid .site-footer-social-link:focus-visible {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: translateY(-1px) !important;
}

:root[data-theme="light"] body .site-footer-minimal .site-footer-social-grid .site-footer-social-link:hover .site-footer-social-icon,
:root[data-theme="light"] body .site-footer-minimal .site-footer-social-grid .site-footer-social-link:focus-visible .site-footer-social-icon {
  filter: none !important;
  transform: scale(1.05) !important;
}

:root[data-theme="light"] body .site-footer-minimal .site-footer-trust-list {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0.42rem !important;
}

:root[data-theme="light"] body .site-footer-minimal .site-footer-trust-item {
  display: grid !important;
  grid-template-columns: 1.56rem minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 0.42rem !important;
  min-height: 2.35rem !important;
  padding: 0.38rem 0.46rem !important;
  border: 1px solid #dde7f1 !important;
  border-radius: 0.62rem !important;
  background: #ffffff !important;
  color: #334155 !important;
  box-shadow: none !important;
}

:root[data-theme="light"] body .site-footer-minimal .site-footer-trust-mark {
  display: inline-grid !important;
  width: 1.42rem !important;
  height: 1.42rem !important;
  place-items: center !important;
  border: 1px solid #d8e5f1 !important;
  border-radius: 0.44rem !important;
  background: #f4f8fc !important;
  color: #315f8f !important;
  font-size: 0.66rem !important;
  font-weight: 950 !important;
  box-shadow: none !important;
}

:root[data-theme="light"] body .site-footer-minimal .site-footer-trust-item strong {
  min-width: 0 !important;
  overflow: hidden !important;
  color: #1f2937 !important;
  font-size: 0.74rem !important;
  font-weight: 900 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

:root[data-theme="light"] body .site-footer-minimal .site-footer-trust-status {
  min-height: 1.32rem !important;
  padding: 0.12rem 0.36rem !important;
  border: 1px solid #e0e8f1 !important;
  border-radius: 999px !important;
  background: #f8fbfe !important;
  color: #7a8797 !important;
  font-size: 0.62rem !important;
  font-weight: 900 !important;
}

:root[data-theme="light"] body .site-footer-minimal .site-footer-trust-status-live {
  border-color: #bddfcd !important;
  background: #eefaf4 !important;
  color: #257653 !important;
}

:root[data-theme="light"] body .site-footer-minimal .site-footer-trust-item:hover,
:root[data-theme="light"] body .site-footer-minimal .site-footer-trust-item:focus-visible {
  border-color: #c8d8ea !important;
  background: #fbfdff !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06) !important;
  transform: translateY(-1px) !important;
}

:root[data-theme="light"] body .site-footer-minimal .site-footer-trust-item-disabled,
:root[data-theme="light"] body .site-footer-minimal .site-footer-social-link-disabled {
  opacity: 0.78 !important;
}

:root[data-theme="light"] body .site-footer-minimal .site-footer-bottom-links a {
  color: #738197 !important;
}

:root[data-theme="light"] body .site-footer-minimal .site-footer-bottom-links a:hover,
:root[data-theme="light"] body .site-footer-minimal .site-footer-bottom-links a:focus-visible {
  color: #2f6fb8 !important;
}

html[data-theme] body .mobile-dock {
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0.2s ease !important;
}

html[data-theme] body .mobile-dock.mobile-dock-hidden {
  pointer-events: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  transform: translateY(calc(100% + 1.5rem)) !important;
}

@media (max-width: 64rem) {
  :root[data-theme="light"] body .site-footer-minimal .site-footer-social-grid {
    width: 100% !important;
    justify-content: space-between !important;
  }

  :root[data-theme="light"] body .site-footer-minimal .site-footer-trust-list {
    grid-template-columns: 1fr !important;
  }
}

/* Product sellers table: formal trust score, designed as data instead of a decorative badge. */
html[data-theme] body #sellers .industrial-seller-performance {
  --seller-performance-color: #7f8ea3;
  --seller-performance-score: 0%;
  display: grid !important;
  width: min(8.2rem, 100%) !important;
  min-width: 7.1rem !important;
  gap: 0.28rem !important;
  place-items: stretch !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--text-primary) !important;
  text-align: start !important;
}

html[data-theme] body #sellers .industrial-seller-performance--excellent {
  --seller-performance-color: #5c9a76;
}

html[data-theme] body #sellers .industrial-seller-performance--stable {
  --seller-performance-color: #528a73;
}

html[data-theme] body #sellers .industrial-seller-performance--watch {
  --seller-performance-color: #a6803e;
}

html[data-theme] body #sellers .industrial-seller-performance--risky {
  --seller-performance-color: #a95863;
}

html[data-theme] body #sellers .industrial-seller-performance-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.42rem;
  min-width: 0;
}

html[data-theme] body #sellers .industrial-seller-performance-line strong {
  color: color-mix(in srgb, var(--seller-performance-color) 78%, var(--text-primary)) !important;
  font-size: 1.05rem !important;
  font-weight: 950 !important;
  line-height: 1;
  white-space: nowrap;
}

html[data-theme] body #sellers .industrial-seller-performance-line span,
html[data-theme] body #sellers .industrial-seller-performance small {
  color: var(--text-soft) !important;
  font-size: 0.66rem !important;
  font-weight: 850 !important;
  line-height: 1.45 !important;
  white-space: nowrap !important;
}

html[data-theme] body #sellers .industrial-seller-performance small {
  overflow: hidden;
  color: color-mix(in srgb, var(--seller-performance-color) 62%, var(--text-soft)) !important;
  text-overflow: ellipsis;
}

html[data-theme] body #sellers .industrial-seller-performance-meter {
  overflow: hidden;
  width: 100%;
  height: 0.2rem;
  border: 0 !important;
  border-radius: 999px;
  background: color-mix(in srgb, var(--line-color) 76%, transparent) !important;
  box-shadow: none !important;
}

html[data-theme] body #sellers .industrial-seller-performance-meter span {
  display: block !important;
  width: var(--seller-performance-score);
  min-width: 0;
  max-width: 100%;
  height: 100%;
  border-radius: inherit;
  background: color-mix(in srgb, var(--seller-performance-color) 78%, var(--text-primary)) !important;
  box-shadow: none !important;
}

html[data-theme] body #sellers .industrial-seller-performance--unknown .industrial-seller-performance-meter span {
  width: 0;
}

:root[data-theme="light"] body #sellers .industrial-seller-performance {
  --seller-performance-color: #6e7f95;
}

:root[data-theme="light"] body #sellers .industrial-seller-performance--excellent {
  --seller-performance-color: #397d57;
}

:root[data-theme="light"] body #sellers .industrial-seller-performance--stable {
  --seller-performance-color: #357762;
}

:root[data-theme="light"] body #sellers .industrial-seller-performance--watch {
  --seller-performance-color: #8a671e;
}

:root[data-theme="light"] body #sellers .industrial-seller-performance--risky {
  --seller-performance-color: #a14f59;
}

@media (max-width: 44rem) {
  html[data-theme] body #sellers .industrial-seller-performance {
    width: 100% !important;
  }
}

/* Product review rating: formal star scale, not bulky text buttons. */
html[data-theme] body #reviews .industrial-review-form fieldset {
  gap: 0.46rem !important;
}

html[data-theme] body #reviews .industrial-rating-selected {
  margin: -0.08rem 0 0;
  color: color-mix(in srgb, var(--item-action-alert, #d69a2d) 64%, var(--text-soft)) !important;
  font-size: 0.72rem;
  font-weight: 880;
  line-height: 1.7;
}

html[data-theme] body #reviews .industrial-rating-input {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.46rem !important;
  max-width: 38rem;
}

html[data-theme] body #reviews .industrial-rating-input label {
  cursor: pointer;
  position: relative;
  min-width: 0;
}

html[data-theme] body #reviews .industrial-rating-input input {
  position: absolute !important;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  opacity: 0;
  pointer-events: auto !important;
}

html[data-theme] body #reviews .industrial-rating-card {
  display: grid !important;
  min-height: 4rem !important;
  align-content: center !important;
  gap: 0.24rem !important;
  padding: 0.55rem 0.58rem !important;
  border: 1px solid color-mix(in srgb, var(--line-color) 86%, transparent) !important;
  border-radius: 0.5rem !important;
  background: color-mix(in srgb, var(--surface-muted) 62%, transparent) !important;
  color: var(--text-primary) !important;
  box-shadow: inset 0 1px color-mix(in srgb, #ffffff 4%, transparent) !important;
  transition:
    border-color 0.16s ease,
    background-color 0.16s ease,
    color 0.16s ease,
    transform 0.16s ease;
}

html[data-theme] body #reviews .industrial-rating-input :is(
  .industrial-rating-stars,
  .industrial-rating-text,
  .industrial-rating-text strong,
  .industrial-rating-text small
) {
  display: block !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: center;
}

html[data-theme] body #reviews .industrial-rating-stars {
  direction: ltr;
  color: color-mix(in srgb, var(--text-soft) 72%, transparent) !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em;
  line-height: 1;
}

html[data-theme] body #reviews .industrial-rating-text strong {
  color: color-mix(in srgb, var(--text-primary) 86%, var(--text-soft)) !important;
  font-size: 0.78rem !important;
  font-weight: 920 !important;
  line-height: 1.55;
}

html[data-theme] body #reviews .industrial-rating-text small {
  color: var(--text-soft) !important;
  font-size: 0.64rem !important;
  font-weight: 760 !important;
  line-height: 1.45;
}

html[data-theme] body #reviews .industrial-rating-input label:hover .industrial-rating-card,
html[data-theme] body #reviews .industrial-rating-input input:focus-visible + .industrial-rating-card {
  border-color: color-mix(in srgb, var(--item-action-alert, #d69a2d) 28%, var(--line-color)) !important;
  background: color-mix(in srgb, var(--item-action-alert, #d69a2d) 5%, var(--surface-muted)) !important;
  transform: translateY(-1px);
}

html[data-theme] body #reviews .industrial-rating-input input:focus-visible + .industrial-rating-card {
  outline: 2px solid color-mix(in srgb, var(--item-action-alert, #d69a2d) 24%, transparent);
  outline-offset: 2px;
}

html[data-theme] body #reviews .industrial-rating-input input:checked + .industrial-rating-card {
  border-color: color-mix(in srgb, var(--item-action-alert, #d69a2d) 44%, var(--line-color)) !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--item-action-alert, #d69a2d) 10%, var(--surface-muted)), color-mix(in srgb, var(--item-action-alert, #d69a2d) 6%, var(--surface-muted))) !important;
  color: color-mix(in srgb, var(--item-action-alert, #d69a2d) 78%, var(--text-primary)) !important;
}

html[data-theme] body #reviews .industrial-rating-input input:checked + .industrial-rating-card .industrial-rating-stars,
html[data-theme] body #reviews .industrial-rating-input input:checked + .industrial-rating-card .industrial-rating-text strong {
  color: color-mix(in srgb, var(--item-action-alert, #d69a2d) 78%, var(--text-primary)) !important;
}

:root[data-theme="light"] body #reviews .industrial-rating-card {
  background: #f8fbfe !important;
}

:root[data-theme="light"] body #reviews .industrial-rating-input input:checked + .industrial-rating-card {
  background: color-mix(in srgb, var(--item-action-alert, #a66d18) 9%, #ffffff) !important;
}

html[data-theme] body #reviews .industrial-review-submit {
  cursor: pointer;
  min-height: 2.7rem !important;
  padding: 0.72rem 1rem !important;
  border-color: color-mix(in srgb, var(--brand-500) 72%, var(--line-color)) !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--brand-500) 92%, #ffffff), var(--brand-500)) !important;
  color: #ffffff !important;
  box-shadow:
    0 12px 24px color-mix(in srgb, var(--brand-500) 22%, transparent),
    inset 0 1px color-mix(in srgb, #ffffff 24%, transparent) !important;
  opacity: 1 !important;
  filter: none !important;
  transition:
    border-color 0.16s ease,
    background-color 0.16s ease,
    box-shadow 0.16s ease,
    transform 0.16s ease;
}

:root[data-theme="light"] body #reviews .industrial-review-submit {
  border-color: color-mix(in srgb, var(--brand-500) 76%, #9ab9e9) !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--brand-500) 88%, #ffffff), #1f5ec7) !important;
  box-shadow:
    0 13px 26px rgba(31, 94, 199, 0.23),
    inset 0 1px rgba(255, 255, 255, 0.28) !important;
}

html[data-theme] body #reviews .industrial-review-submit:not(:disabled):hover,
html[data-theme] body #reviews .industrial-review-submit:not(:disabled):focus-visible {
  border-color: color-mix(in srgb, var(--brand-500) 88%, #ffffff) !important;
  box-shadow:
    0 16px 30px color-mix(in srgb, var(--brand-500) 28%, transparent),
    inset 0 1px color-mix(in srgb, #ffffff 30%, transparent) !important;
  transform: translateY(-1px);
}

html[data-theme] body #reviews .industrial-review-submit:disabled {
  cursor: not-allowed;
  border-color: color-mix(in srgb, var(--line-color) 92%, transparent) !important;
  background: color-mix(in srgb, var(--surface-muted) 88%, var(--panel-bg)) !important;
  color: color-mix(in srgb, var(--text-soft) 82%, var(--text-primary)) !important;
  box-shadow: inset 0 1px color-mix(in srgb, #ffffff 8%, transparent) !important;
  opacity: 0.96 !important;
  filter: none !important;
  transform: none !important;
}

:root[data-theme="light"] body #reviews .industrial-review-submit:disabled {
  border-color: #d2deeb !important;
  background: #f4f8fc !important;
  color: #66758a !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.86) !important;
}

@media (max-width: 48rem) {
  html[data-theme] body #reviews .industrial-rating-input {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  html[data-theme] body #reviews .industrial-rating-input label:first-child {
    grid-column: 1 / -1;
  }
}

/* Product detail navigation: official tab bar, with color used only as a quiet state signal. */
html[data-theme] body .industrial-detail-shell .industrial-tabs {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 0 !important;
  overflow-x: auto;
  padding: 0 0.35rem !important;
  border-color: color-mix(in srgb, var(--line-color) 88%, transparent) !important;
  border-radius: 0.45rem !important;
  background: color-mix(in srgb, var(--panel-bg-strong) 96%, transparent) !important;
  box-shadow: inset 0 -1px color-mix(in srgb, var(--line-color) 72%, transparent) !important;
  scrollbar-width: none;
}

html[data-theme] body .industrial-detail-shell .industrial-tabs::-webkit-scrollbar {
  display: none;
}

html[data-theme] body .industrial-detail-shell .industrial-tabs a {
  --product-tab-color: var(--product-tab-intro, var(--brand-500));
  position: relative;
  display: inline-flex !important;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-height: 2.65rem;
  padding: 0 0.78rem !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--product-tab-nav-text) !important;
  font-size: 0.78rem !important;
  font-weight: 850 !important;
  line-height: 1.4 !important;
  text-decoration: none;
  text-shadow: none !important;
  white-space: nowrap;
  transform: none !important;
}

html[data-theme] body .industrial-detail-shell .industrial-tabs a::before {
  content: "";
  position: absolute;
  inset-inline: 0.62rem;
  bottom: 0;
  height: 2px;
  border-radius: 999px 999px 0 0;
  background: color-mix(in srgb, var(--product-tab-nav-line) 82%, var(--text-primary));
  opacity: 0;
  transform: scaleX(0.54);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
}

html[data-theme] body .industrial-detail-shell .industrial-tabs a::after {
  content: "";
  position: absolute;
  inset-block: 0.72rem;
  inset-inline-end: 0;
  width: 1px;
  background: color-mix(in srgb, var(--line-color) 70%, transparent);
}

html[data-theme] body .industrial-detail-shell .industrial-tabs a:last-child::after {
  display: none;
}

html[data-theme] body .industrial-detail-shell .industrial-tabs a:hover,
html[data-theme] body .industrial-detail-shell .industrial-tabs a:focus-visible,
html[data-theme] body .industrial-detail-shell .industrial-tabs a.is-active {
  border: 0 !important;
  background: color-mix(in srgb, var(--text-primary) 3%, transparent) !important;
  box-shadow: none !important;
  color: var(--product-tab-nav-text-active) !important;
  transform: none !important;
}

html[data-theme] body .industrial-detail-shell .industrial-tabs a:hover::before,
html[data-theme] body .industrial-detail-shell .industrial-tabs a:focus-visible::before,
html[data-theme] body .industrial-detail-shell .industrial-tabs a.is-active::before {
  opacity: 1;
  transform: scaleX(1);
}

html[data-theme] body .industrial-detail-shell .industrial-tabs a:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--product-tab-color) 24%, transparent);
  outline-offset: -2px;
}

:root[data-theme="light"] body .industrial-detail-shell .industrial-tabs {
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow: inset 0 -1px #dbe4ee !important;
}

:root[data-theme="light"] body .industrial-detail-shell .industrial-tabs a {
  color: var(--product-tab-nav-text) !important;
}

:root[data-theme="light"] body .industrial-detail-shell .industrial-tabs a:hover,
:root[data-theme="light"] body .industrial-detail-shell .industrial-tabs a:focus-visible,
:root[data-theme="light"] body .industrial-detail-shell .industrial-tabs a.is-active {
  background: #f4f7fb !important;
  color: var(--product-tab-nav-text-active) !important;
}

@media (max-width: 48rem) {
  html[data-theme] body .industrial-detail-shell .industrial-tabs {
    margin-inline: -0.15rem;
    padding-inline: 0.15rem !important;
  }

  html[data-theme] body .industrial-detail-shell .industrial-tabs a {
    min-height: 2.55rem;
    padding-inline: 0.7rem !important;
    font-size: 0.74rem !important;
  }
}

/* Header counters: zero counts stay hidden; live changes enter and leave softly. */
html[data-theme] body .header-stable-actions #site-alerts-button.header-icon-alerts {
  --header-action-color: var(--ui-action-alert);
  display: inline-grid !important;
  place-items: center !important;
}

html[data-theme] body .header-stable-actions #site-alerts-button.header-icon-alerts .header-chip-icon {
  fill: currentColor !important;
  stroke: none !important;
}

html[data-theme] body :is(.header-stable-actions .header-icon-chip, .drawer-link) > .badge-count[data-count-badge] {
  opacity: 1 !important;
  visibility: visible !important;
  transform: scale(1) !important;
  transform-origin: center !important;
  transition:
    opacity 0.18s ease,
    visibility 0.18s ease,
    transform 0.18s ease !important;
  will-change: opacity, transform;
}

html[data-theme] body :is(.header-stable-actions .header-icon-chip, .drawer-link) > .badge-count[data-count-badge][data-count-empty="true"] {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: scale(0.42) translateY(0.08rem) !important;
}

html[data-theme] body :is(.header-stable-actions .header-icon-chip, .drawer-link) > .badge-count[data-count-badge][data-badge-state="entering"] {
  animation: header-count-badge-enter 0.24s cubic-bezier(0.2, 0.8, 0.2, 1.2) both !important;
}

html[data-theme] body :is(.header-stable-actions .header-icon-chip, .drawer-link) > .badge-count[data-count-badge][data-badge-state="leaving"] {
  visibility: visible !important;
  opacity: 1 !important;
  animation: header-count-badge-leave 0.22s ease forwards !important;
}

html[data-theme] body .header-stable-actions .header-icon-chip[data-count-owner] {
  transform-origin: center !important;
  will-change: opacity, transform;
}

html[data-theme] body .header-stable-actions .header-icon-chip[data-count-owner][data-count-empty="true"]:not([data-count-state="leaving"]) {
  display: none !important;
}

html[data-theme] body .header-stable-actions :is(
  #site-alerts-button,
  #site-wishlist-icon,
  #site-compare-icon,
  #site-cart-icon,
  #site-inquiry-icon
)[data-count-owner][data-count-empty="true"]:not([data-count-state="leaving"]) {
  display: none !important;
}

html[data-theme] body .header-stable-actions #site-alerts-button.header-icon-alerts[data-count-persistent="true"] {
  display: inline-grid !important;
}

html[data-theme] body .header-stable-actions .header-icon-chip[data-count-owner][data-count-state="entering"] {
  animation: header-count-action-enter 0.24s cubic-bezier(0.2, 0.8, 0.2, 1.15) both !important;
}

html[data-theme] body .header-stable-actions .header-icon-chip[data-count-owner][data-count-state="leaving"] {
  pointer-events: none !important;
  animation: header-count-action-leave 0.22s ease forwards !important;
}

@keyframes header-count-badge-enter {
  0% {
    opacity: 0;
    transform: scale(0.34) translateY(0.18rem);
  }
  68% {
    opacity: 1;
    transform: scale(1.14) translateY(-0.02rem);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes header-count-badge-leave {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.42) translateY(0.08rem);
  }
}

@keyframes header-count-action-enter {
  0% {
    opacity: 0;
    transform: scale(0.72) translateY(0.25rem);
  }
  72% {
    opacity: 1;
    transform: scale(1.06) translateY(-0.03rem);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes header-count-action-leave {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.72) translateY(0.16rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme] body :is(.header-stable-actions .header-icon-chip, .drawer-link) > .badge-count[data-count-badge],
  html[data-theme] body .header-stable-actions .header-icon-chip[data-count-owner] {
    transition: none !important;
    animation: none !important;
  }
}

/* Header deep search: compact, ranked, and readable for industrial lookup. */
html[data-theme] body .search-results-live {
  display: grid !important;
  gap: 0.72rem !important;
  width: min(100%, 46rem) !important;
  margin-inline: auto !important;
  padding: 0.78rem !important;
  border-radius: 0.88rem !important;
}

html[data-theme] body .search-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  min-width: 0;
}

html[data-theme] body .search-panel-copy {
  min-width: 0;
}

html[data-theme] body .search-panel-copy .search-group-title {
  margin-bottom: 0.16rem !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

html[data-theme] body .search-panel-actions,
html[data-theme] body .search-panel-counters {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.42rem;
}

html[data-theme] body .search-panel-action-primary,
html[data-theme] body .search-panel-close {
  display: inline-grid;
  min-height: 2.15rem;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--brand-500) 34%, var(--line-color));
  border-radius: 0.58rem;
  background: color-mix(in srgb, var(--brand-500) 10%, var(--surface-2));
  color: color-mix(in srgb, var(--brand-500) 88%, var(--text-primary));
  font-size: 0.76rem;
  font-weight: 900;
  text-decoration: none;
}

html[data-theme] body .search-panel-action-primary {
  padding: 0.36rem 0.72rem;
}

html[data-theme] body .search-panel-close {
  width: 2.15rem;
  padding: 0;
  cursor: pointer;
}

html[data-theme] body .search-panel-close svg {
  width: 1.04rem;
  height: 1.04rem;
  fill: currentColor;
}

html[data-theme] body .search-best-match {
  display: grid;
  gap: 0.12rem;
  padding: 0.72rem 0.82rem;
  border: 1px solid color-mix(in srgb, var(--success) 34%, var(--line-color));
  border-radius: 0.72rem;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--success) 11%, var(--surface-2)), var(--surface-2));
  color: var(--text-primary);
  text-decoration: none;
}

html[data-theme] body .search-best-kicker,
html[data-theme] body .search-card-reason {
  color: color-mix(in srgb, var(--success) 78%, var(--text-primary));
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1.7;
}

html[data-theme] body .search-best-title {
  overflow: hidden;
  color: var(--text-primary);
  font-size: 0.98rem;
  font-weight: 950;
  line-height: 1.7;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-theme] body .search-best-meta,
html[data-theme] body .search-row-side small {
  color: var(--text-soft);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.7;
}

html[data-theme] body .search-results-live .search-result-stack {
  gap: 0.58rem !important;
}

html[data-theme] body .search-results-live .search-result-group {
  display: grid !important;
  gap: 0.46rem !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-theme] body .search-results-live .search-group-header {
  padding-inline: 0.1rem;
}

html[data-theme] body .search-results-live .search-group-header .search-group-title {
  margin: 0 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

html[data-theme] body .search-row-product {
  display: grid !important;
  grid-template-columns: 3.1rem minmax(0, 1fr) auto;
  align-items: center !important;
  gap: 0.72rem !important;
  min-height: 4rem;
  padding: 0.48rem !important;
  border-radius: 0.7rem !important;
}

html[data-theme] body .search-row-media {
  overflow: hidden;
  display: inline-grid;
  width: 3.1rem;
  height: 3.1rem;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--line-color) 84%, transparent);
  border-radius: 0.58rem;
  background: color-mix(in srgb, var(--surface-3) 82%, var(--surface-2));
  color: var(--text-soft);
  font-weight: 950;
}

html[data-theme] body .search-row-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0.18rem;
}

html[data-theme] body .search-row-main {
  min-width: 0;
}

html[data-theme] body .search-row-main strong {
  display: block;
  overflow: hidden;
  color: var(--text-primary);
  font-size: 0.9rem;
  font-weight: 950;
  line-height: 1.7;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-theme] body .search-row-main small {
  overflow: hidden;
  display: block;
  margin: 0 !important;
  color: var(--text-soft);
  font-size: 0.72rem;
  font-weight: 780;
  line-height: 1.7;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-theme] body .search-row-side {
  display: grid;
  justify-items: end;
  gap: 0.16rem;
  min-width: 7rem;
}

html[data-theme] body .search-compact-grid {
  display: grid;
  gap: 0.42rem;
}

html[data-theme] body .search-compact-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  min-width: 0;
  padding: 0.58rem 0.7rem;
  border: 1px solid var(--line-color);
  border-radius: 0.66rem;
  background: color-mix(in srgb, var(--surface-2) 72%, transparent);
  color: var(--text-primary);
  text-decoration: none;
}

html[data-theme] body .search-compact-row span {
  min-width: 0;
}

html[data-theme] body .search-compact-row strong,
html[data-theme] body .search-compact-row small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-theme] body .search-compact-row strong {
  font-size: 0.82rem;
  font-weight: 920;
  line-height: 1.65;
}

html[data-theme] body .search-compact-row small {
  color: var(--text-soft);
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 760;
  line-height: 1.6;
}

html[data-theme] body .search-compact-row em {
  display: inline-grid;
  min-width: 1.8rem;
  min-height: 1.8rem;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand-500) 10%, var(--surface-3));
  color: color-mix(in srgb, var(--brand-500) 82%, var(--text-primary));
  font-style: normal;
  font-size: 0.72rem;
  font-weight: 950;
}

html[data-theme] body .search-card-reason {
  margin: -0.2rem 0 0.25rem;
}

@media (max-width: 44rem) {
  html[data-theme] body .search-results-shell {
    position: absolute !important;
    inset-inline: 0 !important;
    top: calc(100% + 0.62rem) !important;
    bottom: auto !important;
    z-index: 70 !important;
  }

  html[data-theme] body .search-results-live {
    width: 100% !important;
    max-height: min(calc(100dvh - 9.5rem), 32rem) !important;
    overflow-y: auto !important;
  }

  html[data-theme] body .search-panel-head,
  html[data-theme] body .search-row-product {
    align-items: stretch !important;
  }

  html[data-theme] body .search-row-product {
    grid-template-columns: 2.75rem minmax(0, 1fr);
  }

  html[data-theme] body .search-row-side {
    grid-column: 2;
    justify-items: start;
    min-width: 0;
  }

  html[data-theme] body .search-row-media {
    width: 2.75rem;
    height: 2.75rem;
  }
}

/* Storefront theme refresh: calmer surfaces, stronger text contrast, and less "plain white card" product media. */
:root:not([data-theme="light"]) {
  --token-brand-primary: #2f6fb8;
  --token-brand-primary-hover: #3c82d5;
  --token-brand-primary-active: #255c9d;
  --token-accent-primary: #38bdf8;
  --token-accent-hover: #67e8f9;
  --token-accent-soft: #7dd3fc;
  --token-surface-base: #080d14;
  --token-surface-subtle: #0d141f;
  --token-surface-card: #111923;
  --token-surface-elevated: #151f2b;
  --token-border: #243244;
  --token-border-strong: #34455c;
  --token-text-strong: #eef3f8;
  --token-text-medium: #a8b3c3;
  --token-text-muted: #7f8da0;
  --token-info: #38bdf8;
  --ui-bg-app:
    radial-gradient(circle at 82% 0%, rgba(47, 111, 184, 0.16), transparent 30%),
    linear-gradient(180deg, #080d14 0%, #0d141f 58%, #0a111a 100%);
  --ui-control-bg: var(--token-surface-card);
  --ui-control-bg-subtle: color-mix(in srgb, var(--token-brand-primary) 8%, var(--token-surface-subtle));
  --ui-hover-bg: color-mix(in srgb, var(--token-brand-primary) 11%, var(--token-surface-subtle));
  --ui-active-bg: color-mix(in srgb, var(--token-brand-primary) 18%, var(--token-surface-subtle));
  --ui-selected-bg: color-mix(in srgb, var(--token-brand-primary) 18%, var(--token-surface-subtle));
  --shadow-sm: 0 10px 24px rgba(0, 0, 0, 0.22);
  --shadow-md: 0 18px 38px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 26px 58px rgba(0, 0, 0, 0.38);
  --brand-400: color-mix(in srgb, var(--token-brand-primary) 68%, #ffffff);
  --brand-500: var(--token-brand-primary);
  --brand-600: var(--token-brand-primary-hover);
  --brand-700: var(--token-brand-primary-active);
  --brand-800: var(--token-surface-base);
  --accent-gold: var(--token-accent-primary);
  --tech-blue: var(--token-brand-primary);
  --bg-main: var(--token-surface-base);
  --bg-deep: var(--token-surface-base);
  --bg-card: var(--token-surface-card);
  --surface-elevated: var(--token-surface-elevated);
  --surface-muted: var(--token-surface-subtle);
  --text-primary: var(--token-text-strong);
  --text-muted: var(--token-text-medium);
  --text-soft: var(--token-text-muted);
  --line-color: var(--token-border);
  --panel-bg: var(--token-surface-card);
  --panel-bg-strong: var(--token-surface-elevated);
  --link-color: var(--token-brand-primary);
  --focus-ring: rgba(47, 111, 184, 0.34);
  --shadow-brand: var(--shadow-sm);
  --shadow-soft: var(--shadow-sm);
  --bg: var(--bg-main);
  --surface: var(--bg-card);
  --surface-2: var(--surface-muted);
  --surface-3: var(--panel-bg-strong);
  --text: var(--text-primary);
  --border: var(--line-color);
  --primary: var(--brand-500);
  --primary-contrast: #ffffff;
  --success: var(--token-success);
  --warning: var(--token-warning);
  --danger: var(--token-error);
  --info: var(--token-info);
  --selected: var(--ui-selected-bg);
  --hover: var(--ui-hover-bg);
  --active: var(--ui-active-bg);
  --disabled: var(--ui-disabled-bg);
}

:root[data-theme="light"] {
  --token-brand-primary: #2f6fb8;
  --token-brand-primary-hover: #285f9f;
  --token-brand-primary-active: #224f86;
  --token-accent-primary: #0e7490;
  --token-accent-hover: #0891b2;
  --token-accent-soft: #67e8f9;
  --token-surface-base: #f3f6fa;
  --token-surface-subtle: #edf2f7;
  --token-surface-card: #ffffff;
  --token-surface-elevated: #fbfdff;
  --token-border: #d4dde8;
  --token-border-strong: #aebdcc;
  --token-text-strong: #111827;
  --token-text-medium: #475569;
  --token-text-muted: #64748b;
  --token-info: #0e7490;
  --ui-bg-app:
    radial-gradient(circle at 82% 0%, rgba(47, 111, 184, 0.08), transparent 28%),
    linear-gradient(180deg, #f6f8fb 0%, #eef3f8 58%, #f8fafc 100%);
  --ui-control-bg: #ffffff;
  --ui-control-bg-subtle: #f5f8fb;
  --ui-hover-bg: color-mix(in srgb, var(--token-brand-primary) 7%, #ffffff);
  --ui-active-bg: color-mix(in srgb, var(--token-brand-primary) 12%, #ffffff);
  --ui-selected-bg: color-mix(in srgb, var(--token-brand-primary) 12%, #ffffff);
  --shadow-sm: 0 8px 20px rgba(15, 23, 42, 0.055);
  --shadow-md: 0 16px 34px rgba(15, 23, 42, 0.09);
  --shadow-lg: 0 24px 54px rgba(15, 23, 42, 0.12);
  --brand-400: color-mix(in srgb, var(--token-brand-primary) 70%, #ffffff);
  --brand-500: var(--token-brand-primary);
  --brand-600: var(--token-brand-primary-hover);
  --brand-700: var(--token-brand-primary-active);
  --brand-800: #0f172a;
  --accent-gold: var(--token-accent-primary);
  --tech-blue: var(--token-brand-primary);
  --bg-main: var(--token-surface-base);
  --bg-deep: var(--token-surface-base);
  --bg-card: var(--token-surface-card);
  --surface-elevated: var(--token-surface-elevated);
  --surface-muted: var(--token-surface-subtle);
  --text-primary: var(--token-text-strong);
  --text-muted: var(--token-text-medium);
  --text-soft: var(--token-text-muted);
  --line-color: var(--token-border);
  --panel-bg: var(--token-surface-card);
  --panel-bg-strong: var(--token-surface-elevated);
  --link-color: var(--token-brand-primary);
  --focus-ring: rgba(47, 111, 184, 0.26);
  --shadow-brand: var(--shadow-sm);
  --shadow-soft: var(--shadow-sm);
  --bg: var(--bg-main);
  --surface: var(--bg-card);
  --surface-2: var(--surface-muted);
  --surface-3: var(--panel-bg-strong);
  --text: var(--text-primary);
  --border: var(--line-color);
  --primary: var(--brand-500);
  --primary-contrast: #ffffff;
  --success: var(--token-success);
  --warning: var(--token-warning);
  --danger: var(--token-error);
  --info: var(--token-info);
  --selected: var(--ui-selected-bg);
  --hover: var(--ui-hover-bg);
  --active: var(--ui-active-bg);
  --disabled: var(--ui-disabled-bg);
}

html[data-theme] body {
  background-color: var(--token-surface-base) !important;
}

html[data-theme] body.bg-app,
html[data-theme] body .bg-app {
  background: var(--ui-bg-app) !important;
}

html[data-theme] body .bg-orb {
  opacity: 0.22 !important;
}

:root[data-theme="light"] body .bg-orb {
  opacity: 0.14 !important;
}

html[data-theme] body .home-storefront {
  --home-surface: color-mix(in srgb, var(--panel-bg) 96%, transparent);
  --home-surface-strong: color-mix(in srgb, var(--panel-bg-strong) 98%, transparent);
  --home-surface-soft: color-mix(in srgb, var(--brand-500) 7%, var(--panel-bg));
  --home-border: color-mix(in srgb, var(--line-color) 88%, transparent);
  --home-border-strong: color-mix(in srgb, var(--brand-500) 42%, var(--line-color));
  --home-accent: var(--token-accent-primary);
  --home-media-bg:
    linear-gradient(180deg, color-mix(in srgb, var(--panel-bg-strong) 94%, transparent), color-mix(in srgb, var(--surface-muted) 96%, transparent));
  --home-media-grid: rgba(148, 163, 184, 0.075);
  --home-floating-chip-bg: color-mix(in srgb, var(--panel-bg-strong) 82%, transparent);
  --home-floating-chip-border: color-mix(in srgb, var(--line-color) 80%, var(--text-soft));
  --home-floating-chip-text: color-mix(in srgb, var(--text-primary) 90%, var(--text-muted));
  --home-shadow-sm: var(--shadow-sm);
  --home-shadow-md: var(--shadow-md);
}

:root[data-theme="light"] body .home-storefront {
  --home-surface: rgba(255, 255, 255, 0.94);
  --home-surface-strong: #ffffff;
  --home-surface-soft: #f6f9fc;
  --home-border: #d4dde8;
  --home-border-strong: #9fb4cb;
  --home-muted: #475569;
  --home-soft: #64748b;
  --home-media-bg:
    linear-gradient(180deg, #fbfdff 0%, #f2f6fa 100%);
  --home-media-grid: rgba(71, 85, 105, 0.06);
  --home-floating-chip-bg: rgba(255, 255, 255, 0.88);
  --home-floating-chip-border: rgba(148, 163, 184, 0.46);
  --home-floating-chip-text: #334155;
  --home-shadow-sm: var(--shadow-sm);
  --home-shadow-md: var(--shadow-md);
}

html[data-theme] body .home-storefront :is(
  .storefront-service-card,
  .storefront-category-card,
  .storefront-brand-card,
  .storefront-compact-product,
  .storefront-product-card,
  .storefront-process-card,
  .storefront-trust-card,
  .storefront-rfq-panel
) {
  border-color: var(--home-border) !important;
  background: linear-gradient(180deg, var(--home-surface-strong), var(--home-surface)) !important;
  box-shadow: var(--home-shadow-sm) !important;
}

html[data-theme] body .home-storefront :is(
  .storefront-service-card,
  .storefront-category-card,
  .storefront-brand-card,
  .storefront-compact-product,
  .storefront-product-card
):hover,
html[data-theme] body .home-storefront :is(
  .storefront-service-card,
  .storefront-category-card,
  .storefront-brand-card,
  .storefront-compact-product,
  .storefront-product-card
):focus-within {
  border-color: var(--home-border-strong) !important;
  background: linear-gradient(180deg, var(--home-surface-strong), var(--home-surface-soft)) !important;
  box-shadow: var(--home-shadow-md) !important;
}

html[data-theme] body .home-storefront .storefront-product-card,
html[data-theme] body .home-storefront .storefront-product-card.has-database-product {
  border-color: var(--home-border) !important;
  border-radius: 0.5rem !important;
  background: color-mix(in srgb, var(--home-surface-strong) 74%, var(--home-surface)) !important;
  box-shadow: none !important;
}

html[data-theme] body .home-storefront .storefront-product-card:hover,
html[data-theme] body .home-storefront .storefront-product-card:focus-within {
  border-color: var(--home-border-strong) !important;
  background: color-mix(in srgb, var(--home-surface-strong) 86%, var(--home-surface-soft)) !important;
  box-shadow: none !important;
  transform: none !important;
}

html[data-theme] body .home-storefront .storefront-product-media {
  min-height: 11.35rem;
  border-bottom-color: var(--home-border) !important;
  background:
    linear-gradient(90deg, var(--home-media-grid) 1px, transparent 1px),
    linear-gradient(180deg, var(--home-media-grid) 1px, transparent 1px),
    color-mix(in srgb, var(--home-media-bg) 92%, var(--media-a)) !important;
  background-size: 32px 32px, 32px 32px, auto !important;
  color: var(--home-floating-chip-text) !important;
  padding: 0.78rem !important;
}

html[data-theme] body .home-storefront .storefront-product-image {
  padding: 0.9rem !important;
  background: transparent !important;
  filter: none !important;
}

:root:not([data-theme="light"]) body .home-storefront .storefront-product-image {
  filter: none !important;
}

html[data-theme] body .home-storefront .storefront-product-media::before {
  opacity: 0 !important;
}

html[data-theme] body .home-storefront .storefront-product-category,
html[data-theme] body .home-storefront .storefront-product-brand {
  border-color: var(--home-floating-chip-border) !important;
  border-radius: 0.45rem !important;
  background: var(--home-floating-chip-bg) !important;
  color: var(--home-floating-chip-text) !important;
  box-shadow: none !important;
  backdrop-filter: none;
  font-family: var(--font-body, var(--font-sans, inherit)) !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  padding: 0.26rem 0.56rem !important;
}

html[data-theme] body .home-storefront .storefront-product-copy h3,
html[data-theme] body .home-storefront .storefront-section-header h2,
html[data-theme] body .home-storefront .storefront-rfq-panel h2 {
  color: var(--text-primary) !important;
}

html[data-theme] body .home-storefront .storefront-product-copy p {
  color: color-mix(in srgb, var(--text-muted) 86%, var(--text-primary)) !important;
}

html[data-theme] body .home-storefront .storefront-product-body {
  font-family: var(--font-body, var(--font-sans, inherit)) !important;
  gap: 0.72rem !important;
  padding: 0.88rem !important;
}

html[data-theme] body .home-storefront .storefront-product-copy {
  text-align: start !important;
}

html[data-theme] body .home-storefront .storefront-product-copy h3 {
  font-family: inherit !important;
  font-weight: 700 !important;
  text-align: start !important;
}

html[data-theme] body .home-storefront .storefront-product-copy p {
  font-family: inherit !important;
  font-weight: 600 !important;
  text-align: start !important;
}

html[data-theme] body .home-storefront .storefront-pill,
html[data-theme] body .home-storefront .storefront-spec-row span {
  border-color: color-mix(in srgb, var(--line-color) 84%, transparent) !important;
  border-radius: 0.45rem !important;
  background: color-mix(in srgb, var(--surface-muted) 76%, transparent) !important;
  color: color-mix(in srgb, var(--text-muted) 92%, var(--text-primary)) !important;
  font-family: inherit !important;
  min-height: 1.6rem !important;
  padding: 0.22rem 0.55rem !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
}

html[data-theme] body .home-storefront .storefront-pill-info {
  border-color: color-mix(in srgb, var(--info) 32%, var(--line-color)) !important;
  background: color-mix(in srgb, var(--info) 10%, var(--surface-muted)) !important;
  color: color-mix(in srgb, var(--info) 82%, var(--text-primary)) !important;
}

html[data-theme] body .home-storefront .storefront-pill-success {
  border-color: color-mix(in srgb, var(--success) 32%, var(--line-color)) !important;
  background: color-mix(in srgb, var(--success) 10%, var(--surface-muted)) !important;
  color: color-mix(in srgb, var(--success) 82%, var(--text-primary)) !important;
}

html[data-theme] body .home-storefront .storefront-pill-warning {
  border-color: color-mix(in srgb, var(--warning) 34%, var(--line-color)) !important;
  background: color-mix(in srgb, var(--warning) 11%, var(--surface-muted)) !important;
  color: color-mix(in srgb, var(--warning) 82%, var(--text-primary)) !important;
}

html[data-theme] body .home-storefront .storefront-card-action {
  border-color: color-mix(in srgb, var(--brand-500) 88%, var(--line-color)) !important;
  border-radius: 0.45rem !important;
  background: var(--brand-500) !important;
  color: #ffffff !important;
  box-shadow: none !important;
  font-family: inherit !important;
  min-height: 2.2rem !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
}

html[data-theme] body .home-storefront .storefront-card-action:hover,
html[data-theme] body .home-storefront .storefront-card-action:focus-visible {
  border-color: var(--brand-600) !important;
  background: var(--brand-600) !important;
  box-shadow: none !important;
}

html[data-theme] body .home-storefront .storefront-link {
  border-color: color-mix(in srgb, var(--brand-500) 30%, var(--line-color)) !important;
  background: color-mix(in srgb, var(--brand-500) 8%, var(--surface-muted)) !important;
  color: color-mix(in srgb, var(--brand-500) 92%, var(--text-primary)) !important;
}

html[data-theme] body .home-storefront .storefront-link:hover,
html[data-theme] body .home-storefront .storefront-link:focus-visible {
  border-color: color-mix(in srgb, var(--brand-500) 54%, var(--line-color)) !important;
  background: color-mix(in srgb, var(--brand-500) 12%, var(--surface-muted)) !important;
}

:root[data-theme="light"] body .home-storefront .storefront-product-card,
:root[data-theme="light"] body .home-storefront .storefront-product-card.has-database-product {
  border-color: #cbd7e4 !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

:root[data-theme="light"] body .home-storefront .storefront-product-copy p {
  color: #4b5f76 !important;
}

:root[data-theme="light"] body .home-storefront .storefront-pill,
:root[data-theme="light"] body .home-storefront .storefront-spec-row span {
  border-color: #d5dfeb !important;
  background: #f8fafc !important;
  color: #53657a !important;
}

:root[data-theme="light"] body .home-storefront .storefront-brand-showcase {
  --brand-showcase-panel: #ffffff;
  --brand-showcase-panel-raised: #f8fbff;
  --brand-showcase-line: #cbd7e4;
  --brand-showcase-line-strong: #8fb0d4;
  --brand-showcase-grid: rgba(71, 85, 105, 0.075);
  --brand-showcase-text: #0f172a;
  --brand-showcase-muted: #53657a;
}

:root[data-theme="light"] body .home-storefront .storefront-brand-showcase .storefront-brand-slide {
  border-color: var(--brand-showcase-line) !important;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--brand-500) 9%, transparent), transparent 48%),
    linear-gradient(160deg, color-mix(in srgb, var(--home-accent) 7%, var(--brand-showcase-panel-raised)), var(--brand-showcase-panel)) !important;
  color: var(--brand-showcase-text) !important;
}

:root[data-theme="light"] body .home-storefront .storefront-brand-showcase .storefront-brand-slide::after {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0) 34%, rgba(255, 255, 255, 0.42) 64%, rgba(255, 255, 255, 0.74)),
    linear-gradient(90deg, rgba(226, 232, 240, 0.28), rgba(255, 255, 255, 0.02) 48%, rgba(226, 232, 240, 0.24)) !important;
}

:root[data-theme="light"] body .home-storefront .storefront-brand-showcase .storefront-brand-slide:hover,
:root[data-theme="light"] body .home-storefront .storefront-brand-showcase .storefront-brand-slide:focus-visible {
  border-color: var(--brand-showcase-line-strong) !important;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--brand-500) 12%, transparent), transparent 48%),
    linear-gradient(160deg, color-mix(in srgb, var(--home-accent) 9%, var(--brand-showcase-panel-raised)), var(--brand-showcase-panel)) !important;
}

:root[data-theme="light"] body .home-storefront .storefront-brand-showcase .storefront-brand-slide-media,
:root[data-theme="light"] body .home-storefront .storefront-brand-showcase .storefront-brand-slide-media.has-logo {
  background:
    linear-gradient(var(--brand-showcase-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--brand-showcase-grid) 1px, transparent 1px),
    radial-gradient(circle at 50% 44%, color-mix(in srgb, var(--brand-500) 10%, transparent), transparent 58%),
    linear-gradient(160deg, color-mix(in srgb, var(--brand-showcase-panel-raised) 96%, var(--brand-500)), var(--brand-showcase-panel)) !important;
  background-size: 30px 30px, 30px 30px, auto, auto !important;
  color: var(--brand-showcase-text) !important;
}

:root[data-theme="light"] body .home-storefront .storefront-brand-showcase .storefront-brand-slide-letter {
  border-color: rgba(148, 163, 184, 0.34) !important;
  background: rgba(255, 255, 255, 0.74) !important;
  color: var(--brand-showcase-text) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), 0 18px 42px rgba(15, 23, 42, 0.08) !important;
}

:root[data-theme="light"] body .home-storefront .storefront-brand-showcase .storefront-brand-slide-copy strong {
  color: var(--brand-showcase-text) !important;
  text-shadow: none !important;
}

:root[data-theme="light"] body .home-storefront .storefront-brand-showcase .storefront-brand-slide-copy small {
  color: var(--brand-showcase-muted) !important;
  text-shadow: none !important;
}

:root[data-theme="light"] body .home-storefront .storefront-brand-showcase .storefront-brand-nav {
  border-color: rgba(148, 163, 184, 0.4) !important;
  background: rgba(255, 255, 255, 0.82) !important;
  color: #334155 !important;
  box-shadow:
    0 14px 30px rgba(15, 23, 42, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.88) !important;
}

:root[data-theme="light"] body .home-storefront .storefront-brand-showcase .storefront-brand-nav:hover,
:root[data-theme="light"] body .home-storefront .storefront-brand-showcase .storefront-brand-nav:focus-visible {
  border-color: rgba(37, 99, 235, 0.38) !important;
  background: rgba(239, 246, 255, 0.94) !important;
  color: #225aa4 !important;
}

:root[data-theme="light"] body .home-storefront .storefront-brand-showcase .storefront-brand-slide-count {
  border: 1px solid var(--brand-showcase-line) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.86) !important;
  color: var(--brand-showcase-muted) !important;
  padding: 0.22rem 0.52rem !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08) !important;
  backdrop-filter: blur(10px);
}

/* 2026-05-26 mobile-first UX harmonization and light-mode contrast pass. */
html[data-theme],
html[data-theme] body {
  max-width: 100%;
  letter-spacing: 0;
  text-size-adjust: 100%;
}

html[data-theme] body {
  --page-shell-max-width: 116rem;
  --page-work-max-width: 116rem;
  --page-shell-gutter: 1rem;
  font-size: 15.5px;
}

@media (min-width: 48rem) {
  html[data-theme] body {
    --page-shell-gutter: 1.75rem;
    font-size: 16px;
  }
}

@media (min-width: 80rem) {
  html[data-theme] body {
    --page-shell-gutter: 2.5rem;
  }
}

@media (min-width: 100rem) {
  html[data-theme] body {
    --page-shell-gutter: 3rem;
  }
}

html[data-theme] body .public-shell {
  box-sizing: border-box;
  width: min(calc(100% - (var(--page-shell-gutter) * 2)), var(--page-shell-max-width)) !important;
  max-width: var(--page-shell-max-width) !important;
  margin-inline: auto !important;
}

html[data-theme] body :is(.ops-shell, .profile-shell) {
  box-sizing: border-box;
  width: 100% !important;
  max-width: 100% !important;
  margin-inline: auto !important;
}

html[data-theme] body.profile-layout-page,
html[data-theme] body .profile-shell {
  --profile-shell-max-width: var(--page-shell-max-width);
}

html[data-theme] body :is(
  .review-console--queue,
  .catalog-dashboard-shell,
  .product-class-list-page,
  .attribute-option-management-page
) {
  max-width: var(--page-work-max-width) !important;
  margin-inline: auto !important;
}

html[data-theme] body :is(
  .public-shell,
  .home-storefront,
  .ops-main,
  .profile-content,
  .glass-panel,
  .ui-card,
  .ui-panel,
  .ops-panel,
  .ops-page-header,
  .storefront-product-card,
  .storefront-service-card,
  .storefront-category-card,
  .storefront-compact-product,
  .storefront-process-card,
  .storefront-trust-card
) {
  min-width: 0;
}

html[data-theme] body :is(
  .ui-input,
  .ui-select,
  .ui-textarea,
  .field-input,
  .search-input,
  .ops-form input,
  .ops-form select,
  .ops-form textarea
) {
  min-height: 44px !important;
  font-size: 0.93rem !important;
  line-height: 1.55 !important;
}

html[data-theme] body :is(
  .ui-button,
  .ui-button-primary,
  .ui-button-secondary,
  .ui-button-muted,
  .cta-button,
  .ops-button,
  .ops-button-primary,
  .ops-button-secondary,
  .ops-button-muted,
  .storefront-card-action,
  .storefront-link,
  .nav-pill,
  .toggle-chip,
  .ops-auth-link,
  .ops-admin-link,
  .account-sidebar-more-button
) {
  min-height: 44px !important;
  line-height: 1.45 !important;
  white-space: normal;
}

html[data-theme] body :is(
  .icon-chip,
  .mobile-chip,
  .header-icon-chip,
  .header-theme-toggle,
  .header-search-submit,
  .profile-mobile-trigger-icon,
  .cockpit-mobile-trigger-icon,
  .profile-drawer-close,
  .cockpit-drawer-close,
  .ui-modal-close
) {
  min-width: 44px !important;
  min-height: 44px !important;
}

html[data-theme] body .commerce-inline-qty .commerce-qty-btn {
  min-width: 32px !important;
  min-height: 32px !important;
  width: 32px !important;
  height: 32px !important;
}

html[data-theme] body .site-header-shell {
  overflow: visible !important;
}

html[data-theme] body .header-stable-top {
  column-gap: 0.5rem;
  row-gap: 0.65rem;
}

html[data-theme] body .header-stable-actions {
  min-width: 0;
  flex-wrap: nowrap;
}

html[data-theme] body .header-search-row,
html[data-theme] body .header-search-form {
  min-width: 0;
}

html[data-theme] body .header-search-form .search-input {
  min-height: 48px !important;
  height: 48px !important;
  font-size: var(--ops-type-body, 0.86rem) !important;
  line-height: 1.5 !important;
}

html[data-theme] body .header-search-submit {
  width: 44px !important;
  height: 44px !important;
}

html[data-theme] body .header-icon-chip {
  width: 44px !important;
  height: 44px !important;
}

html[data-theme] body .header-chip-icon {
  width: 1.12rem !important;
  height: 1.12rem !important;
}

html[data-theme] body .header-icon-chip .badge-count {
  min-width: 1.14rem !important;
  height: 1.14rem !important;
  font-size: 0.58rem !important;
}

  html[data-theme] body :is(.header-stable-actions .header-icon-chip, .header-search-submit)[aria-label] {
    position: relative;
  }

  html[data-theme] body :is(.header-stable-actions .header-icon-chip, .header-search-submit)[aria-label]::before,
  html[data-theme] body :is(.header-stable-actions .header-icon-chip, .header-search-submit)[aria-label]::after {
    position: absolute;
    left: 50%;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -0.14rem);
    transition:
      opacity var(--motion-fast, 0.15s) var(--ease-standard, ease),
      transform var(--motion-fast, 0.15s) var(--ease-standard, ease);
  }

  html[data-theme] body :is(.header-stable-actions .header-icon-chip, .header-search-submit)[aria-label]::before {
    content: "";
    z-index: 119;
    inset-block-start: calc(100% + 0.28rem);
    border: 0.34rem solid transparent;
    border-block-end-color: var(--tooltip-bg, #11151a);
  }

  html[data-theme] body :is(.header-stable-actions .header-icon-chip, .header-search-submit)[aria-label]::after {
    content: attr(aria-label);
    z-index: 120;
    inset-block-start: calc(100% + 0.92rem);
    inline-size: max-content;
    max-inline-size: min(16rem, calc(100vw - 1.25rem));
    padding: 0.38rem 0.62rem;
    border: 1px solid var(--tooltip-border, color-mix(in srgb, var(--line-color) 64%, transparent));
    border-radius: 0.55rem;
    background: var(--tooltip-bg, #11151a);
    color: var(--tooltip-text, #f8fafc);
    box-shadow: none;
    font-family: var(--font-body, inherit);
    font-size: 0.74rem;
    font-weight: 800;
    line-height: 1.55;
    text-align: center;
    white-space: normal;
  }

  html[data-theme] body :is(.header-stable-actions .header-icon-chip, .header-search-submit)[aria-label]:hover::before,
  html[data-theme] body :is(.header-stable-actions .header-icon-chip, .header-search-submit)[aria-label]:hover::after,
  html[data-theme] body :is(.header-stable-actions .header-icon-chip, .header-search-submit)[aria-label]:focus-visible::before,
  html[data-theme] body :is(.header-stable-actions .header-icon-chip, .header-search-submit)[aria-label]:focus-visible::after {
    opacity: 1;
    transform: translate(-50%, 0);
  }

@media (max-width: 39.99875rem) {
  html[data-theme] body :is(.header-stable-actions .header-icon-chip, .header-search-submit)[aria-label]::before,
  html[data-theme] body :is(.header-stable-actions .header-icon-chip, .header-search-submit)[aria-label]::after {
    display: none !important;
  }

  html[data-theme] body .site-header-shell {
    top: 0.5rem !important;
    margin-bottom: 1rem !important;
    padding: 0.7rem !important;
    border-radius: 0.85rem !important;
  }

  html[data-theme] body .header-stable-top {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.5rem;
  }

  html[data-theme] body .header-brand-group {
    grid-column: 1;
    min-width: 0;
  }

  html[data-theme] body .header-stable-actions {
    grid-column: 2;
    justify-content: end;
    gap: 0.16rem !important;
  }

  html[data-theme] body .header-search-row {
    grid-column: 1 / -1;
    margin-top: 0.25rem !important;
  }

  html[data-theme] body .header-action-group-secondary,
  html[data-theme] body .header-action-group-account {
    display: none !important;
  }

  html[data-theme] body .brand-logo-mark,
  html[data-theme] body .brand-logo-mark-theme {
    width: 2.35rem !important;
    height: 2.35rem !important;
  }
}

html[data-theme] body .ops-page-header {
  padding: 1rem !important;
  border-radius: var(--radius-md) !important;
}

html[data-theme] body .ops-page-header-copy {
  gap: 0.55rem !important;
}

html[data-theme] body :is(.ops-page-header-copy h1, .ops-hero-copy h1) {
  font-size: 1.55rem !important;
  line-height: 1.45 !important;
  letter-spacing: 0 !important;
}

@media (min-width: 48rem) {
  html[data-theme] body :is(.ops-page-header-copy h1, .ops-hero-copy h1) {
    font-size: 1.85rem !important;
  }
}

@media (min-width: 64rem) {
  html[data-theme] body :is(.ops-page-header-copy h1, .ops-hero-copy h1) {
    font-size: 2.05rem !important;
  }
}

html[data-theme] body .ops-page-header-copy p:last-child {
  font-size: 0.94rem;
  line-height: 1.9;
}

@media (max-width: 40rem) {
  html[data-theme] body .ops-page-header-actions {
    align-items: stretch;
    width: 100%;
  }

  html[data-theme] body .ops-page-header-actions > * {
    flex: 1 1 12rem;
    min-width: 0;
  }

  html[data-theme] body .ops-page-header-actions :is(a, button) {
    width: 100%;
  }
}

html[data-theme] body .account-sidebar-header-copy strong {
  font-size: 0.98rem !important;
  line-height: 1.65 !important;
}

html[data-theme] body .account-sidebar-header-copy small {
  font-size: 0.78rem !important;
  line-height: 1.7 !important;
}

html[data-theme] body .account-sidebar-group-title {
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  line-height: 1.65 !important;
}

html[data-theme] body .account-sidebar-item {
  min-height: 2.75rem !important;
  gap: 0.66rem !important;
  padding-inline: 0.68rem !important;
}

html[data-theme] body .account-sidebar-item-label {
  font-size: 0.86rem !important;
  line-height: 1.5 !important;
}

html[data-theme] body .account-sidebar-subitem {
  min-height: 2.25rem !important;
  font-size: 0.82rem !important;
  line-height: 1.55 !important;
}

html[data-theme] body .account-sidebar-status,
html[data-theme] body .account-sidebar-badge {
  min-height: 1.45rem;
  font-size: 0.72rem !important;
  line-height: 1.35 !important;
}

html[data-theme] body .account-sidebar-seller-link {
  min-height: 4.4rem;
}

html[data-theme] body .account-sidebar-seller-copy strong {
  font-size: 0.92rem !important;
  line-height: 1.65 !important;
}

html[data-theme] body .account-sidebar-seller-copy small {
  font-size: 0.78rem !important;
  line-height: 1.75 !important;
}

html[data-theme] body .cockpit-drawer-panel .account-sidebar-header-main {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  justify-items: start;
  text-align: start;
}

html[data-theme] body .cockpit-drawer-panel .account-sidebar-header-copy {
  justify-items: start;
  text-align: start;
}

html[data-theme] body .home-storefront .storefront-section-header {
  align-items: start;
  gap: 0.75rem;
}

html[data-theme] body .home-storefront .storefront-section-header h2,
html[data-theme] body .home-storefront .storefront-rfq-panel h2 {
  font-size: 1.32rem !important;
  line-height: 1.55 !important;
  letter-spacing: 0 !important;
}

@media (min-width: 48rem) {
  html[data-theme] body .home-storefront .storefront-section-header h2,
  html[data-theme] body .home-storefront .storefront-rfq-panel h2 {
    font-size: 1.6rem !important;
  }
}

@media (min-width: 64rem) {
  html[data-theme] body .home-storefront .storefront-section-header h2,
  html[data-theme] body .home-storefront .storefront-rfq-panel h2 {
    font-size: 1.78rem !important;
  }
}

html[data-theme] body .home-storefront :is(
  .storefront-product-copy h3,
  .storefront-process-card strong,
  .storefront-trust-card strong,
  .storefront-service-card strong,
  .storefront-category-card strong,
  .storefront-compact-copy strong
) {
  font-size: 0.96rem !important;
  line-height: 1.65 !important;
  letter-spacing: 0 !important;
}

html[data-theme] body .home-storefront :is(
  .storefront-product-copy p,
  .storefront-process-card p,
  .storefront-trust-card p,
  .storefront-service-card small,
  .storefront-category-card small,
  .storefront-compact-copy small
) {
  font-size: 0.86rem !important;
  line-height: 1.9 !important;
}

@media (max-width: 44rem) {
  html[data-theme] body .home-storefront .storefront-section-header {
    align-items: stretch;
    flex-direction: column;
  }

  html[data-theme] body .home-storefront .storefront-link,
  html[data-theme] body .home-storefront .storefront-card-action {
    width: 100%;
  }

  html[data-theme] body .home-storefront .storefront-price-row {
    align-items: stretch;
    flex-direction: column;
    gap: 0.75rem;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html[data-theme] body .home-storefront .storefront-product-media {
    min-height: 11.5rem !important;
  }
}

html[data-theme] body :is(.ui-table-shell, .ops-table-shell) {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 40rem) {
  html[data-theme] body :is(.ui-table, .ops-table) {
    min-width: 42rem;
  }
}

:root[data-theme="light"] .account-sidebar-seller-default .account-sidebar-seller-link {
  border-color: #cbd7e4 !important;
  background: linear-gradient(180deg, #ffffff, #f8fbff) !important;
  color: #334155 !important;
}

:root[data-theme="light"] .account-sidebar-seller-pending .account-sidebar-seller-link {
  border-color: rgba(47, 111, 184, 0.28) !important;
  background: linear-gradient(180deg, #f8fbff, #edf7ff) !important;
  color: #224f86 !important;
}

:root[data-theme="light"] .account-sidebar-seller-approved .account-sidebar-seller-link {
  border-color: rgba(16, 185, 129, 0.32) !important;
  background: linear-gradient(180deg, #f7fffb, #ecfdf5) !important;
  color: #065f46 !important;
}

:root[data-theme="light"] .account-sidebar-seller-restricted .account-sidebar-seller-link {
  border-color: rgba(239, 68, 68, 0.3) !important;
  background: linear-gradient(180deg, #fffafa, #fef2f2) !important;
  color: #991b1b !important;
}

:root[data-theme="light"] .account-sidebar-seller-link :is(strong, small) {
  color: currentColor !important;
}

:root[data-theme="light"] :is(
  .account-sidebar-status-verified,
  .ui-badge-success,
  .ops-badge-success,
  .ops-soft-badge-success,
  .ops-meta-chip-success,
  .ops-meta span.ops-meta-chip-success,
  .price-chip-success,
  .spec-chip-success,
  .product-class-status-active
) {
  color: #047857 !important;
}

:root[data-theme="light"] :is(
  .account-sidebar-status-incomplete,
  .ui-badge-warning,
  .ops-badge-warning,
  .ops-soft-badge-warning,
  .ops-meta-chip-warning,
  .ops-meta span.ops-meta-chip-warning,
  .price-chip-warning,
  .spec-chip-warning,
  .product-class-status-inactive,
  .ops-meta span.product-class-option-count
) {
  color: #92400e !important;
}

:root[data-theme="light"] :is(
  .account-sidebar-status-pending,
  .account-sidebar-badge-info,
  .ui-badge-info,
  .ops-badge-info,
  .ops-soft-badge-info,
  .ops-meta-chip-info,
  .ops-meta span.ops-meta-chip-info,
  .price-chip-info,
  .spec-chip-info,
  .product-class-code,
  .ops-meta span.product-class-attribute-count
) {
  color: #1d4ed8 !important;
}

/* Keep account footer actions compact and distinct from the main navigation items. */
html[data-theme] body .account-sidebar-footer {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.5rem !important;
  margin-top: 0.45rem !important;
}

html[data-theme] body .account-sidebar-footer .account-sidebar-footer-item {
  justify-content: center !important;
  min-height: 2.45rem !important;
  padding-inline: 0.55rem !important;
  border: 1px solid var(--token-border, var(--line-color)) !important;
  border-radius: 0.75rem !important;
  background: color-mix(
    in srgb,
    var(--token-surface-subtle, var(--surface-2)) 88%,
    transparent
  ) !important;
  color: var(--token-text-medium, var(--text-muted)) !important;
}

html[data-theme] body .account-sidebar-footer .account-sidebar-footer-item:hover,
html[data-theme] body .account-sidebar-footer .account-sidebar-footer-item:focus-visible {
  border-color: color-mix(
    in srgb,
    var(--token-brand-primary, var(--brand-500)) 34%,
    var(--token-border, var(--line-color))
  ) !important;
  background: color-mix(
    in srgb,
    var(--token-brand-primary, var(--brand-500)) 10%,
    var(--token-surface-subtle, var(--surface-2))
  ) !important;
  color: var(--token-text-strong, var(--text-primary)) !important;
}

html[data-theme] body .account-sidebar-footer .account-sidebar-item-label {
  flex: 0 1 auto !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
}

html[data-theme] body .account-sidebar-footer .account-sidebar-item-icon {
  width: 1.38rem !important;
  height: 1.38rem !important;
  border-radius: 0.55rem !important;
}

html[data-theme] body .account-sidebar-footer .account-sidebar-footer-item.is-danger {
  border-color: color-mix(
    in srgb,
    var(--token-error, #ef4444) 32%,
    var(--token-border, var(--line-color))
  ) !important;
  background: color-mix(
    in srgb,
    var(--token-error, #ef4444) 10%,
    var(--token-surface-subtle, var(--surface-2))
  ) !important;
  color: var(--token-error, #ef4444) !important;
}

html[data-theme] body .account-sidebar-footer .account-sidebar-footer-item.is-danger:hover,
html[data-theme] body .account-sidebar-footer .account-sidebar-footer-item.is-danger:focus-visible {
  border-color: color-mix(
    in srgb,
    var(--token-error, #ef4444) 46%,
    var(--token-border, var(--line-color))
  ) !important;
  background: color-mix(
    in srgb,
    var(--token-error, #ef4444) 15%,
    var(--token-surface-subtle, var(--surface-2))
  ) !important;
  color: var(--token-error, #ef4444) !important;
}

html[data-theme] body .account-sidebar-footer .account-sidebar-footer-item.is-danger .account-sidebar-item-icon {
  --account-sidebar-icon-color: var(--token-error, #ef4444);
}

@media (max-width: 22rem) {
  html[data-theme] body .account-sidebar-footer {
    grid-template-columns: 1fr !important;
  }
}

:root[data-theme="light"] :is(
  .account-sidebar-status-restricted,
  .ui-badge-danger,
  .ops-badge-danger,
  .ops-soft-badge-danger,
  .ops-meta-chip-danger,
  .ops-meta span.ops-meta-chip-danger,
  .price-chip-danger,
  .spec-chip-danger
) {
  color: #b91c1c !important;
}

:root[data-theme="light"] body .header-icon-chip:not(.header-icon-wishlist):not(.header-icon-compare) {
  border-color: #cbd7e4 !important;
  background: linear-gradient(180deg, #ffffff, #f6f9fc) !important;
  color: #255c9d !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 8px 18px rgba(15, 23, 42, 0.08) !important;
}

:root[data-theme="light"] body .industrial-product-summary h1 {
  text-shadow: none !important;
}

@supports (-webkit-background-clip: text) {
  :root[data-theme="light"] body .industrial-product-summary h1 {
    background: linear-gradient(135deg, #0f172a, #1a4fd8 52%, #047857) !important;
    -webkit-background-clip: text !important;
    color: transparent !important;
  }
}

html[data-theme] body .home-hero-dot {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 2.75rem !important;
  min-width: 2.75rem !important;
  height: 2.75rem !important;
  min-height: 2.75rem !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: inherit !important;
}

html[data-theme] body .home-hero-dot::before {
  content: "";
  display: block;
  width: 0.72rem;
  height: 0.72rem;
  border: 1px solid var(--home-border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-muted) 84%, transparent);
  transition: width 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

html[data-theme] body .home-hero-dot:hover::before,
html[data-theme] body .home-hero-dot:focus-visible::before {
  border-color: var(--home-border-strong);
  background: color-mix(in srgb, var(--home-brand) 14%, var(--surface-muted));
  box-shadow: 0 0 0 0.18rem color-mix(in srgb, var(--home-brand) 14%, transparent);
}

html[data-theme] body .home-hero-dot.is-active::before {
  width: 2rem;
  border-color: var(--home-brand);
  background: linear-gradient(90deg, var(--home-accent), var(--home-brand));
}

html[data-theme] body .product-directory-price-input {
  min-height: 2.75rem !important;
  padding-block: 0.45rem !important;
  font-size: 0.88rem !important;
  line-height: 1.5 !important;
}

:root:not([data-theme="light"]) body .home-hero-copy-card {
  background-color: #111927 !important;
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 0.92), rgba(11, 18, 32, 0.8)),
    color-mix(in srgb, var(--panel-bg) 88%, transparent) !important;
}

:root:not([data-theme="light"]) body .brand-lockup {
  color: #bfdbfe !important;
}

:root:not([data-theme="light"]) body .home-hero-slide-title {
  color: #f8fafc !important;
}

:root:not([data-theme="light"]) body .home-hero-slide-summary,
:root:not([data-theme="light"]) body .home-hero-point-item {
  color: #dbeafe !important;
}

:root:not([data-theme="light"]) body .home-hero-slide-eyebrow,
:root:not([data-theme="light"]) body .home-hero-slide-index {
  color: #bfdbfe !important;
}

:root:not([data-theme="light"]) body .home-hero-action-secondary,
:root:not([data-theme="light"]) body .home-hero-action-ghost {
  border-color: rgba(191, 219, 254, 0.28) !important;
  background: rgba(15, 23, 42, 0.72) !important;
  color: #e0f2fe !important;
}

:root:not([data-theme="light"]) body .directory-filter {
  border-color: rgba(148, 163, 184, 0.28) !important;
  background-color: #111827 !important;
  background: rgba(15, 23, 42, 0.76) !important;
  color: #dbeafe !important;
}

:root:not([data-theme="light"]) body .directory-filter small {
  background: rgba(96, 165, 250, 0.18) !important;
  color: #bfdbfe !important;
}

:root:not([data-theme="light"]) body .directory-filter:hover,
:root:not([data-theme="light"]) body .directory-filter:focus-visible,
:root:not([data-theme="light"]) body .directory-filter-active {
  border-color: rgba(96, 165, 250, 0.42) !important;
  background-color: #1e3a8a !important;
  background: #1e3a8a !important;
  color: #f8fafc !important;
}

:root:not([data-theme="light"]) body .directory-filter-active :is(span, small) {
  color: #f8fafc !important;
}

:root:not([data-theme="light"]) body .product-directory-filter-panel,
:root:not([data-theme="light"]) body .product-directory-toolbar,
:root:not([data-theme="light"]) body .product-directory-price-range,
:root:not([data-theme="light"]) body .product-directory-facet {
  color: #dbeafe !important;
}

:root:not([data-theme="light"]) body .home-storefront .storefront-service-card {
  border-color: rgba(148, 163, 184, 0.28) !important;
  background-color: #111827 !important;
  background: #111827 !important;
  color: #e5efff !important;
}

:root:not([data-theme="light"]) body .home-storefront .storefront-service-card:hover,
:root:not([data-theme="light"]) body .home-storefront .storefront-service-card:focus-visible {
  border-color: rgba(96, 165, 250, 0.42) !important;
  background-color: #162036 !important;
  background: #162036 !important;
}

:root:not([data-theme="light"]) body .home-storefront .storefront-service-card :is(span, strong) {
  color: #f8fafc !important;
}

:root:not([data-theme="light"]) body .home-storefront .storefront-service-card small {
  color: #cbd5e1 !important;
}

html[data-theme] body .home-storefront .storefront-recommend-rail {
  padding-block-end: 0.85rem !important;
  scrollbar-color: color-mix(in srgb, var(--brand-500) 64%, var(--line-color)) transparent !important;
  scrollbar-width: thin !important;
  -ms-overflow-style: auto !important;
}

html[data-theme] body .home-storefront .storefront-recommend-rail::-webkit-scrollbar {
  display: block !important;
  height: 0.62rem;
}

html[data-theme] body .home-storefront .storefront-recommend-rail::-webkit-scrollbar-track {
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel-bg-strong) 62%, transparent);
}

html[data-theme] body .home-storefront .storefront-recommend-rail::-webkit-scrollbar-thumb {
  border: 2px solid color-mix(in srgb, var(--panel-bg-strong) 82%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand-500) 68%, var(--line-color));
}

html[data-theme] body .home-storefront .storefront-recommend-rail:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--brand-500) 48%, transparent);
  outline-offset: 0.25rem;
}

html[data-theme] body .directory-category-children a {
  min-height: 2.75rem !important;
  align-items: center !important;
  padding-block: 0.58rem !important;
}

:root[data-theme="light"] body .commerce-page-shell :is(
  .commerce-page-hero p,
  .commerce-workspace-summary p
) {
  color: #1d4ed8 !important;
}

:root[data-theme="light"] body .commerce-page-shell :is(
  .commerce-page-hero-inquiry p,
  .commerce-workspace-summary-inquiry p
) {
  color: #047857 !important;
}

html[data-theme] body :is(
  .commerce-page-shell,
  .commerce-modal-card
) .commerce-primary-action-cart:not([aria-disabled="true"]) {
  background-color: #1d4ed8 !important;
  background-image: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
  color: #ffffff !important;
}

html[data-theme] body .commerce-page-shell :is(
  .commerce-page-hero-actions,
  .commerce-summary-actions
) .commerce-primary-action-cart:not([aria-disabled="true"]) {
  background: #1d4ed8 !important;
  color: #ffffff !important;
}

html[data-theme] body :is(
  .commerce-page-shell,
  .commerce-modal-card
) .commerce-primary-action-inquiry:not([aria-disabled="true"]) {
  background-color: #047857 !important;
  background-image: linear-gradient(135deg, #059669, #047857) !important;
  color: #ffffff !important;
}

html[data-theme] body .commerce-page-shell :is(
  .commerce-page-hero-actions,
  .commerce-summary-actions
) .commerce-primary-action-inquiry:not([aria-disabled="true"]) {
  background: #047857 !important;
  color: #ffffff !important;
}

:root:not([data-theme="light"]) body .legal-hero {
  background-color: #111827 !important;
  background-image:
    linear-gradient(135deg, rgba(96, 165, 250, 0.14), transparent 44%),
    linear-gradient(160deg, #0f172a, #111827) !important;
}

:root:not([data-theme="light"]) body .legal-page-privacy .legal-hero {
  background-image:
    linear-gradient(135deg, rgba(16, 185, 129, 0.14), transparent 44%),
    linear-gradient(160deg, #0f172a, #111827) !important;
}

:root:not([data-theme="light"]) body .legal-hero h1 {
  color: #f8fafc !important;
}

:root:not([data-theme="light"]) body .legal-eyebrow,
:root:not([data-theme="light"]) body .legal-meta-chip {
  color: #bfdbfe !important;
}

:root:not([data-theme="light"]) body .legal-hero-lead {
  color: #dbeafe !important;
}

:root:not([data-theme="light"]) body .legal-meta-chip {
  border-color: rgba(148, 163, 184, 0.3) !important;
  background-color: #162036 !important;
  background-image: none !important;
}

html[data-theme] body .site-footer-minimal .footer-links a {
  display: flex !important;
  min-height: 2.75rem !important;
  align-items: center !important;
  padding-block: 0.55rem !important;
  border-radius: 0.55rem !important;
}

:root[data-theme="light"] body .site-footer-minimal .footer-links a {
  color: #1d4ed8 !important;
}

:root[data-theme="light"] body .site-footer-minimal .site-footer-signal-label {
  color: #334155 !important;
}

:root:not([data-theme="light"]) body .site-footer-minimal .footer-links a {
  color: #dbeafe !important;
}

/* Global button finish: match the glassy sidebar icon language across screens. */
html[data-theme] body :is(
  .ui-button,
  .ui-button-primary,
  .ui-button-secondary,
  .ui-button-muted,
  .ui-button-ghost,
  .ui-button-danger,
  .button,
  .button--primary,
  .button--secondary,
  .cta-button,
  .cta-button-secondary,
  .ops-button,
  .ops-button-primary,
  .ops-button-secondary,
  .ops-button-muted,
  .ops-footer-action-link-primary,
  .auth-primary-button,
  .auth-change-phone-button,
  .auth-resend-button,
  .auth-flow-submit,
  .auth-flow-secondary,
  .auth-flow-link,
  .chat-button,
  .pd-solid-button,
  .pd-outline-button,
  .pdr-solid-button,
  .pdr-outline-button,
  .pdq-button,
  .pdq-button--secondary,
  .pds-button,
  .pds-button--primary,
  .pds-button--secondary,
  .storefront-card-action,
  .storefront-link,
  .commerce-header-button,
  .commerce-primary-action,
  .commerce-primary-action-cart,
  .commerce-primary-action-inquiry,
  .checkout-address-add-button,
  .account-sidebar-more-button,
  button[type="submit"]:not([class])
) {
  --glass-button-accent: var(--brand-500);
  --glass-button-fill: color-mix(in srgb, var(--surface-2) 78%, transparent);
  --glass-button-border: color-mix(in srgb, var(--glass-button-accent) 24%, var(--line-color));
  --glass-button-text: var(--text-primary);
  --glass-button-glow: color-mix(in srgb, var(--glass-button-accent) 20%, transparent);
  --glass-button-shadow: 0 14px 28px rgba(2, 6, 23, 0.24);
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  min-height: var(--control-height-md) !important;
  max-width: 100%;
  padding: 0.72rem 1.12rem !important;
  border: 1px solid var(--glass-button-border) !important;
  border-radius: 0.72rem !important;
  background:
    radial-gradient(circle at 82% 14%, var(--glass-button-glow), transparent 36%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.035)),
    var(--glass-button-fill) !important;
  color: var(--glass-button-text) !important;
  box-shadow:
    var(--glass-button-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -12px 18px rgba(0, 0, 0, 0.18) !important;
  font-family: inherit !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  text-decoration: none !important;
  text-align: center !important;
  white-space: normal;
  cursor: pointer;
  backdrop-filter: blur(16px) saturate(1.18);
  -webkit-backdrop-filter: blur(16px) saturate(1.18);
  transition:
    border-color 160ms ease,
    background-color 160ms ease,
    color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease !important;
}

html[data-theme] body :is(
  .ui-button-primary,
  .button--primary,
  .cta-button:not(.cta-button-secondary),
  .ops-button,
  .ops-button-primary,
  .ops-footer-action-link-primary,
  .auth-primary-button,
  .auth-flow-submit,
  .chat-button:not(.chat-button-muted):not(.chat-button-danger),
  .pd-solid-button,
  .pdr-solid-button,
  .pdq-button,
  .pds-button--primary,
  .storefront-card-action,
  .commerce-header-button,
  .commerce-primary-action,
  .commerce-primary-action-cart,
  .commerce-primary-action-inquiry,
  .checkout-address-add-button,
  button[type="submit"]:not([class])
) {
  --glass-button-fill: color-mix(in srgb, var(--glass-button-accent) 62%, rgba(11, 13, 16, 0.72));
  --glass-button-border: color-mix(in srgb, var(--glass-button-accent) 52%, rgba(255, 255, 255, 0.18));
  --glass-button-text: #f8fafc;
  --glass-button-glow: color-mix(in srgb, var(--glass-button-accent) 36%, transparent);
  --glass-button-shadow:
    0 16px 32px color-mix(in srgb, var(--glass-button-accent) 24%, transparent),
    0 10px 24px rgba(2, 6, 23, 0.24);
}

html[data-theme] body :is(
  .ui-button-secondary,
  .button--secondary,
  .cta-button-secondary,
  .ops-button-secondary,
  .auth-flow-secondary,
  .auth-flow-link,
  .pd-outline-button,
  .pdr-outline-button,
  .pdq-button--secondary,
  .pds-button--secondary,
  .storefront-link
) {
  --glass-button-fill: color-mix(in srgb, var(--surface-2) 86%, transparent);
  --glass-button-border: color-mix(in srgb, var(--glass-button-accent) 28%, var(--line-color));
  --glass-button-text: color-mix(in srgb, var(--text-primary) 90%, var(--glass-button-accent));
  --glass-button-glow: color-mix(in srgb, var(--glass-button-accent) 16%, transparent);
  --glass-button-shadow: 0 12px 24px rgba(2, 6, 23, 0.16);
}

html[data-theme] body :is(
  .ui-button-muted,
  .ui-button-ghost,
  .ops-button-muted,
  .auth-change-phone-button,
  .auth-resend-button,
  .chat-button-muted,
  .account-sidebar-more-button
) {
  --glass-button-fill: color-mix(in srgb, var(--surface) 84%, transparent);
  --glass-button-border: color-mix(in srgb, var(--text-soft) 24%, var(--line-color));
  --glass-button-text: var(--text-primary);
  --glass-button-glow: color-mix(in srgb, var(--brand-400) 12%, transparent);
  --glass-button-shadow: 0 10px 22px rgba(2, 6, 23, 0.14);
}

html[data-theme] body :is(.ui-button-danger, .chat-button-danger, .identity-danger-action) {
  --glass-button-accent: var(--danger);
  --glass-button-fill: color-mix(in srgb, var(--danger) 52%, rgba(11, 13, 16, 0.72));
  --glass-button-border: color-mix(in srgb, var(--danger) 48%, rgba(255, 255, 255, 0.16));
  --glass-button-text: #fff;
  --glass-button-glow: color-mix(in srgb, var(--danger) 32%, transparent);
}

html[data-theme] body :is(.cta-button-cart, .commerce-primary-action-cart) {
  --glass-button-accent: #60a5fa;
}

html[data-theme] body :is(.cta-button-inquiry, .commerce-primary-action-inquiry) {
  --glass-button-accent: #10b981;
}

html[data-theme] body :is(.cta-button-wishlist) {
  --glass-button-accent: #fb7185;
}

html[data-theme] body :is(
  .ui-button,
  .ui-button-primary,
  .ui-button-secondary,
  .ui-button-muted,
  .ui-button-ghost,
  .ui-button-danger,
  .button,
  .button--primary,
  .button--secondary,
  .cta-button,
  .cta-button-secondary,
  .ops-button,
  .ops-button-primary,
  .ops-button-secondary,
  .ops-button-muted,
  .ops-footer-action-link-primary,
  .auth-primary-button,
  .auth-change-phone-button,
  .auth-resend-button,
  .auth-flow-submit,
  .auth-flow-secondary,
  .auth-flow-link,
  .chat-button,
  .pd-solid-button,
  .pd-outline-button,
  .pdr-solid-button,
  .pdr-outline-button,
  .pdq-button,
  .pdq-button--secondary,
  .pds-button,
  .pds-button--primary,
  .pds-button--secondary,
  .storefront-card-action,
  .storefront-link,
  .commerce-header-button,
  .commerce-primary-action,
  .commerce-primary-action-cart,
  .commerce-primary-action-inquiry,
  .checkout-address-add-button,
  .account-sidebar-more-button,
  button[type="submit"]:not([class])
):hover,
html[data-theme] body :is(
  .ui-button,
  .ui-button-primary,
  .ui-button-secondary,
  .ui-button-muted,
  .ui-button-ghost,
  .ui-button-danger,
  .button,
  .button--primary,
  .button--secondary,
  .cta-button,
  .cta-button-secondary,
  .ops-button,
  .ops-button-primary,
  .ops-button-secondary,
  .ops-button-muted,
  .ops-footer-action-link-primary,
  .auth-primary-button,
  .auth-change-phone-button,
  .auth-resend-button,
  .auth-flow-submit,
  .auth-flow-secondary,
  .auth-flow-link,
  .chat-button,
  .pd-solid-button,
  .pd-outline-button,
  .pdr-solid-button,
  .pdr-outline-button,
  .pdq-button,
  .pdq-button--secondary,
  .pds-button,
  .pds-button--primary,
  .pds-button--secondary,
  .storefront-card-action,
  .storefront-link,
  .commerce-header-button,
  .commerce-primary-action,
  .commerce-primary-action-cart,
  .commerce-primary-action-inquiry,
  .checkout-address-add-button,
  .account-sidebar-more-button,
  button[type="submit"]:not([class])
):focus-visible {
  border-color: color-mix(in srgb, var(--glass-button-accent) 58%, rgba(255, 255, 255, 0.18)) !important;
  background:
    radial-gradient(circle at 82% 14%, color-mix(in srgb, var(--glass-button-accent) 42%, transparent), transparent 38%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.05)),
    color-mix(in srgb, var(--glass-button-fill) 86%, var(--glass-button-accent) 14%) !important;
  color: var(--glass-button-text) !important;
  box-shadow:
    0 18px 36px color-mix(in srgb, var(--glass-button-accent) 22%, transparent),
    0 12px 26px rgba(2, 6, 23, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -12px 18px rgba(0, 0, 0, 0.16) !important;
  transform: translateY(-1px);
}

:root[data-theme="light"] body :is(
  .ui-button,
  .ui-button-primary,
  .ui-button-secondary,
  .ui-button-muted,
  .ui-button-ghost,
  .ui-button-danger,
  .button,
  .button--primary,
  .button--secondary,
  .cta-button,
  .cta-button-secondary,
  .ops-button,
  .ops-button-primary,
  .ops-button-secondary,
  .ops-button-muted,
  .ops-footer-action-link-primary,
  .auth-primary-button,
  .auth-change-phone-button,
  .auth-resend-button,
  .auth-flow-submit,
  .auth-flow-secondary,
  .auth-flow-link,
  .chat-button,
  .pd-solid-button,
  .pd-outline-button,
  .pdr-solid-button,
  .pdr-outline-button,
  .pdq-button,
  .pdq-button--secondary,
  .pds-button,
  .pds-button--primary,
  .pds-button--secondary,
  .storefront-card-action,
  .storefront-link,
  .commerce-header-button,
  .commerce-primary-action,
  .commerce-primary-action-cart,
  .commerce-primary-action-inquiry,
  .checkout-address-add-button,
  .account-sidebar-more-button,
  button[type="submit"]:not([class])
) {
  --glass-button-fill: color-mix(in srgb, #ffffff 82%, var(--glass-button-accent) 6%);
  --glass-button-border: color-mix(in srgb, var(--glass-button-accent) 26%, #d8e1ec);
  --glass-button-text: color-mix(in srgb, var(--text-primary) 86%, var(--glass-button-accent));
  --glass-button-shadow: 0 12px 24px rgba(15, 23, 42, 0.1);
  box-shadow:
    var(--glass-button-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    inset 0 -12px 18px rgba(15, 23, 42, 0.035) !important;
}

:root[data-theme="light"] body :is(
  .ui-button-primary,
  .button--primary,
  .cta-button:not(.cta-button-secondary),
  .ops-button,
  .ops-button-primary,
  .ops-footer-action-link-primary,
  .auth-primary-button,
  .auth-flow-submit,
  .chat-button:not(.chat-button-muted):not(.chat-button-danger),
  .pd-solid-button,
  .pdr-solid-button,
  .pdq-button,
  .pds-button--primary,
  .storefront-card-action,
  .commerce-header-button,
  .commerce-primary-action,
  .commerce-primary-action-cart,
  .commerce-primary-action-inquiry,
  .checkout-address-add-button,
  button[type="submit"]:not([class])
) {
  --glass-button-fill: color-mix(in srgb, var(--glass-button-accent) 76%, #ffffff 14%);
  --glass-button-border: color-mix(in srgb, var(--glass-button-accent) 58%, #ffffff);
  --glass-button-text: #f8fafc;
  --glass-button-shadow: 0 15px 28px color-mix(in srgb, var(--glass-button-accent) 22%, transparent);
}

html[data-theme] body :is(
  .ui-button:disabled,
  .ui-button-primary:disabled,
  .ui-button-secondary:disabled,
  .ui-button-muted:disabled,
  .ui-button-ghost:disabled,
  .ui-button-danger:disabled,
  .button:disabled,
  .cta-button:disabled,
  .cta-button-secondary:disabled,
  .ops-button:disabled,
  .ops-button-secondary:disabled,
  .ops-button-muted:disabled,
  .auth-primary-button:disabled,
  .auth-change-phone-button:disabled,
  .auth-resend-button:disabled,
  .auth-flow-submit:disabled,
  .auth-flow-secondary:disabled,
  .chat-button:disabled,
  .pd-solid-button:disabled,
  .pd-outline-button:disabled,
  .pdr-solid-button:disabled,
  .pdr-outline-button:disabled,
  .pdq-button:disabled,
  .pdq-button--secondary:disabled,
  .pds-button:disabled,
  .storefront-card-action[aria-disabled="true"],
  .storefront-link[aria-disabled="true"],
  .commerce-primary-action[aria-disabled="true"],
  .commerce-primary-action-cart[aria-disabled="true"],
  .commerce-primary-action-inquiry[aria-disabled="true"],
  .cta-button[aria-disabled="true"],
  .ops-button[aria-disabled="true"],
  .ops-button-secondary[aria-disabled="true"],
  .ops-button-muted[aria-disabled="true"]
) {
  cursor: not-allowed !important;
  border-color: var(--line-color) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)),
    color-mix(in srgb, var(--surface-2) 88%, transparent) !important;
  color: var(--text-soft) !important;
  box-shadow: none !important;
  opacity: 0.64 !important;
  transform: none !important;
}

/* Shadow control principle: button/header/sidebar shadows route through these tokens.
   New sidebar icons should set only --account-sidebar-icon-color, not freehand box-shadows. */
html[data-theme] body {
  --ui-shadow-control-surface: 0 6px 14px rgba(2, 6, 23, 0.12);
  --ui-shadow-control-surface-hover: 0 8px 18px rgba(2, 6, 23, 0.14);
  --ui-shadow-control-accent: 0 8px 18px color-mix(in srgb, var(--glass-button-accent, var(--brand-500)) 14%, transparent);
  --ui-shadow-control-accent-hover: 0 10px 20px color-mix(in srgb, var(--glass-button-accent, var(--brand-500)) 16%, transparent);
  --ui-shadow-control-icon: 0 4px 10px color-mix(in srgb, var(--account-sidebar-icon-color, var(--header-action-color, var(--brand-400))) 8%, transparent);
  --ui-shadow-control-icon-hover: 0 6px 12px color-mix(in srgb, var(--account-sidebar-icon-color, var(--header-action-color, var(--brand-400))) 12%, transparent);
  --ui-shadow-control-badge: 0 0 0 1px color-mix(in srgb, var(--header-action-color, var(--brand-500)) 12%, transparent);
  --ui-shadow-control-inset: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  --ui-shadow-control-inset-strong: inset 0 1px 0 rgba(255, 255, 255, 0.14);
  --ui-shadow-control-inset-bottom: inset 0 -8px 12px rgba(0, 0, 0, 0.1);
}

:root[data-theme="light"] body {
  --ui-shadow-control-surface: 0 5px 12px rgba(15, 23, 42, 0.07);
  --ui-shadow-control-surface-hover: 0 7px 16px rgba(15, 23, 42, 0.09);
  --ui-shadow-control-accent: 0 7px 16px color-mix(in srgb, var(--glass-button-accent, var(--brand-500)) 12%, transparent);
  --ui-shadow-control-accent-hover: 0 8px 18px color-mix(in srgb, var(--glass-button-accent, var(--brand-500)) 14%, transparent);
  --ui-shadow-control-icon: 0 3px 8px color-mix(in srgb, var(--account-sidebar-icon-color, var(--header-action-color, var(--brand-400))) 7%, transparent);
  --ui-shadow-control-icon-hover: 0 5px 10px color-mix(in srgb, var(--account-sidebar-icon-color, var(--header-action-color, var(--brand-400))) 10%, transparent);
  --ui-shadow-control-badge: 0 0 0 1px color-mix(in srgb, var(--header-action-color, var(--brand-500)) 10%, transparent);
  --ui-shadow-control-inset: inset 0 1px 0 rgba(255, 255, 255, 0.78);
  --ui-shadow-control-inset-strong: inset 0 1px 0 rgba(255, 255, 255, 0.86);
  --ui-shadow-control-inset-bottom: inset 0 -8px 12px rgba(15, 23, 42, 0.024);
}

html[data-theme] body :is(
  .ui-button,
  .ui-button-primary,
  .ui-button-secondary,
  .ui-button-muted,
  .ui-button-ghost,
  .ui-button-danger,
  .button,
  .button--primary,
  .button--secondary,
  .cta-button,
  .cta-button-secondary,
  .ops-button,
  .ops-button-primary,
  .ops-button-secondary,
  .ops-button-muted,
  .ops-footer-action-link-primary,
  .auth-primary-button,
  .auth-change-phone-button,
  .auth-resend-button,
  .auth-flow-submit,
  .auth-flow-secondary,
  .auth-flow-link,
  .chat-button,
  .pd-solid-button,
  .pd-outline-button,
  .pdr-solid-button,
  .pdr-outline-button,
  .pdq-button,
  .pdq-button--secondary,
  .pds-button,
  .pds-button--primary,
  .pds-button--secondary,
  .storefront-card-action,
  .storefront-link,
  .commerce-header-button,
  .commerce-primary-action,
  .commerce-primary-action-cart,
  .commerce-primary-action-inquiry,
  .checkout-address-add-button,
  .account-sidebar-more-button,
  button[type="submit"]:not([class])
) {
  --glass-button-shadow: var(--ui-shadow-control-surface);
  --glass-button-accent-shadow: var(--ui-shadow-control-accent);
  --glass-button-hover-shadow: var(--ui-shadow-control-surface-hover);
  box-shadow:
    var(--glass-button-shadow),
    var(--ui-shadow-control-inset),
    var(--ui-shadow-control-inset-bottom) !important;
}

html[data-theme] body :is(
  .ui-button-primary,
  .button--primary,
  .cta-button:not(.cta-button-secondary),
  .ops-button,
  .ops-button-primary,
  .ops-footer-action-link-primary,
  .auth-primary-button,
  .auth-flow-submit,
  .chat-button:not(.chat-button-muted):not(.chat-button-danger),
  .pd-solid-button,
  .pdr-solid-button,
  .pdq-button,
  .pds-button--primary,
  .storefront-card-action,
  .commerce-header-button,
  .commerce-primary-action,
  .commerce-primary-action-cart,
  .commerce-primary-action-inquiry,
  .checkout-address-add-button,
  button[type="submit"]:not([class])
) {
  --glass-button-shadow: var(--ui-shadow-control-accent), var(--ui-shadow-control-surface);
}

html[data-theme] body :is(
  .ui-button:hover,
  .ui-button:focus-visible,
  .ui-button-primary:hover,
  .ui-button-primary:focus-visible,
  .ui-button-secondary:hover,
  .ui-button-secondary:focus-visible,
  .ui-button-muted:hover,
  .ui-button-muted:focus-visible,
  .ui-button-ghost:hover,
  .ui-button-ghost:focus-visible,
  .ui-button-danger:hover,
  .ui-button-danger:focus-visible,
  .button:hover,
  .button:focus-visible,
  .button--primary:hover,
  .button--primary:focus-visible,
  .button--secondary:hover,
  .button--secondary:focus-visible,
  .cta-button:hover,
  .cta-button:focus-visible,
  .cta-button-secondary:hover,
  .cta-button-secondary:focus-visible,
  .ops-button:hover,
  .ops-button:focus-visible,
  .ops-button-primary:hover,
  .ops-button-primary:focus-visible,
  .ops-button-secondary:hover,
  .ops-button-secondary:focus-visible,
  .ops-button-muted:hover,
  .ops-button-muted:focus-visible,
  .ops-footer-action-link-primary:hover,
  .ops-footer-action-link-primary:focus-visible,
  .auth-primary-button:hover,
  .auth-primary-button:focus-visible,
  .auth-change-phone-button:hover,
  .auth-change-phone-button:focus-visible,
  .auth-resend-button:hover,
  .auth-resend-button:focus-visible,
  .auth-flow-submit:hover,
  .auth-flow-submit:focus-visible,
  .auth-flow-secondary:hover,
  .auth-flow-secondary:focus-visible,
  .auth-flow-link:hover,
  .auth-flow-link:focus-visible,
  .chat-button:hover,
  .chat-button:focus-visible,
  .pd-solid-button:hover,
  .pd-solid-button:focus-visible,
  .pd-outline-button:hover,
  .pd-outline-button:focus-visible,
  .pdr-solid-button:hover,
  .pdr-solid-button:focus-visible,
  .pdr-outline-button:hover,
  .pdr-outline-button:focus-visible,
  .pdq-button:hover,
  .pdq-button:focus-visible,
  .pdq-button--secondary:hover,
  .pdq-button--secondary:focus-visible,
  .pds-button:hover,
  .pds-button:focus-visible,
  .pds-button--primary:hover,
  .pds-button--primary:focus-visible,
  .pds-button--secondary:hover,
  .pds-button--secondary:focus-visible,
  .storefront-card-action:hover,
  .storefront-card-action:focus-visible,
  .storefront-link:hover,
  .storefront-link:focus-visible,
  .commerce-header-button:hover,
  .commerce-header-button:focus-visible,
  .commerce-primary-action:hover,
  .commerce-primary-action:focus-visible,
  .commerce-primary-action-cart:hover,
  .commerce-primary-action-cart:focus-visible,
  .commerce-primary-action-inquiry:hover,
  .commerce-primary-action-inquiry:focus-visible,
  .checkout-address-add-button:hover,
  .checkout-address-add-button:focus-visible,
  .account-sidebar-more-button:hover,
  .account-sidebar-more-button:focus-visible,
  button[type="submit"]:not([class]):hover,
  button[type="submit"]:not([class]):focus-visible
) {
  --glass-button-shadow: var(--ui-shadow-control-accent-hover), var(--ui-shadow-control-surface-hover);
  box-shadow:
    var(--glass-button-shadow),
    var(--ui-shadow-control-inset-strong),
    var(--ui-shadow-control-inset-bottom) !important;
}

html[data-theme] body :is(
  .account-sidebar-item,
  .account-sidebar-seller-link,
  .drawer-link
) {
  box-shadow: none !important;
}

html[data-theme] body :is(
  .account-sidebar-item-icon,
  .profile-mobile-trigger-icon,
  .cockpit-mobile-trigger-icon,
  .header-stable-actions .header-icon-chip,
  .mobile-menu-chip,
  .drawer-close-chip,
  .icon-chip,
  .mobile-chip
) {
  box-shadow:
    var(--ui-shadow-control-icon),
    var(--ui-shadow-control-inset) !important;
}

html[data-theme] body :is(
  .account-sidebar-item:hover .account-sidebar-item-icon,
  .account-sidebar-item:focus-visible .account-sidebar-item-icon,
  .account-sidebar-item.is-active .account-sidebar-item-icon,
  .account-sidebar-seller-link:hover .account-sidebar-item-icon,
  .account-sidebar-seller-link:focus-visible .account-sidebar-item-icon,
  .header-stable-actions .header-icon-chip:hover,
  .header-stable-actions .header-icon-chip:focus-visible,
  .header-stable-actions .header-icon-chip[class*="-active"],
  .mobile-menu-chip:hover,
  .mobile-menu-chip:focus-visible,
  .drawer-close-chip:hover,
  .drawer-close-chip:focus-visible,
  .icon-chip:hover,
  .icon-chip:focus-visible,
  .mobile-chip:hover,
  .mobile-chip:focus-visible
) {
  box-shadow:
    var(--ui-shadow-control-icon-hover),
    var(--ui-shadow-control-inset-strong) !important;
}

html[data-theme] body :is(
  .header-icon-chip .badge-count,
  .drawer-link .badge-count
) {
  box-shadow: var(--ui-shadow-control-badge) !important;
}

html[data-theme] body .header-stable-actions :is(
  #site-alerts-button,
  #site-wishlist-icon,
  #site-compare-icon,
  #site-cart-icon,
  #site-inquiry-icon,
  #site-account-chip,
  .header-theme-toggle.header-icon-chip,
  .header-icon-admin.header-icon-chip
),
html[data-theme] body :is(
  .mobile-menu-chip.header-icon-chip,
  .drawer-close-chip.header-icon-chip
) {
  box-shadow:
    var(--ui-shadow-control-icon),
    var(--ui-shadow-control-inset) !important;
}

html[data-theme] body .header-stable-actions :is(
  #site-alerts-button,
  #site-wishlist-icon,
  #site-compare-icon,
  #site-cart-icon,
  #site-inquiry-icon,
  #site-account-chip,
  .header-theme-toggle.header-icon-chip,
  .header-icon-admin.header-icon-chip
):is(:hover, :focus-visible, [class*="-active"]),
html[data-theme] body :is(
  .mobile-menu-chip.header-icon-chip:hover,
  .mobile-menu-chip.header-icon-chip:focus-visible,
  .drawer-close-chip.header-icon-chip:hover,
  .drawer-close-chip.header-icon-chip:focus-visible
) {
  box-shadow:
    var(--ui-shadow-control-icon-hover),
    var(--ui-shadow-control-inset-strong) !important;
}

html[data-theme] body .header-stable-actions :is(
  #site-alerts-button,
  #site-wishlist-icon,
  #site-compare-icon,
  #site-cart-icon,
  #site-inquiry-icon,
  #site-account-chip
) > .badge-count {
  box-shadow: var(--ui-shadow-control-badge) !important;
}

:root[data-theme="light"] body :is(
  .ui-button,
  .ui-button-primary,
  .ui-button-secondary,
  .ui-button-muted,
  .ui-button-ghost,
  .ui-button-danger,
  .button,
  .button--primary,
  .button--secondary,
  .cta-button,
  .cta-button-secondary,
  .ops-button,
  .ops-button-primary,
  .ops-button-secondary,
  .ops-button-muted,
  .ops-footer-action-link-primary,
  .auth-primary-button,
  .auth-change-phone-button,
  .auth-resend-button,
  .auth-flow-submit,
  .auth-flow-secondary,
  .auth-flow-link,
  .chat-button,
  .pd-solid-button,
  .pd-outline-button,
  .pdr-solid-button,
  .pdr-outline-button,
  .pdq-button,
  .pdq-button--secondary,
  .pds-button,
  .pds-button--primary,
  .pds-button--secondary,
  .storefront-card-action,
  .storefront-link,
  .commerce-header-button,
  .commerce-primary-action,
  .commerce-primary-action-cart,
  .commerce-primary-action-inquiry,
  .checkout-address-add-button,
  .account-sidebar-more-button,
  button[type="submit"]:not([class])
) {
  --glass-button-shadow: var(--ui-shadow-control-surface);
  box-shadow:
    var(--glass-button-shadow),
    var(--ui-shadow-control-inset),
    var(--ui-shadow-control-inset-bottom) !important;
}

:root[data-theme="light"] body :is(
  .ui-button-primary,
  .button--primary,
  .cta-button:not(.cta-button-secondary),
  .ops-button,
  .ops-button-primary,
  .ops-footer-action-link-primary,
  .auth-primary-button,
  .auth-flow-submit,
  .chat-button:not(.chat-button-muted):not(.chat-button-danger),
  .pd-solid-button,
  .pdr-solid-button,
  .pdq-button,
  .pds-button--primary,
  .storefront-card-action,
  .commerce-header-button,
  .commerce-primary-action,
  .commerce-primary-action-cart,
  .commerce-primary-action-inquiry,
  .checkout-address-add-button,
  button[type="submit"]:not([class])
) {
  --glass-button-shadow: var(--ui-shadow-control-accent), var(--ui-shadow-control-surface);
}

:root[data-theme="light"] body :is(
  .account-sidebar-item-icon,
  .profile-mobile-trigger-icon,
  .cockpit-mobile-trigger-icon,
  .header-stable-actions .header-icon-chip,
  .mobile-menu-chip,
  .drawer-close-chip,
  .icon-chip,
  .mobile-chip
) {
  box-shadow:
    var(--ui-shadow-control-icon),
    var(--ui-shadow-control-inset) !important;
}

:root[data-theme="light"] body .header-stable-actions :is(
  #site-alerts-button,
  #site-wishlist-icon,
  #site-compare-icon,
  #site-cart-icon,
  #site-inquiry-icon,
  #site-account-chip,
  .header-theme-toggle.header-icon-chip,
  .header-icon-admin.header-icon-chip
),
:root[data-theme="light"] body :is(
  .mobile-menu-chip.header-icon-chip,
  .drawer-close-chip.header-icon-chip
) {
  box-shadow:
    var(--ui-shadow-control-icon),
    var(--ui-shadow-control-inset) !important;
}

:root[data-theme="light"] body .header-stable-actions :is(
  #site-alerts-button,
  #site-wishlist-icon,
  #site-compare-icon,
  #site-cart-icon,
  #site-inquiry-icon,
  #site-account-chip,
  .header-theme-toggle.header-icon-chip,
  .header-icon-admin.header-icon-chip
):is(:hover, :focus-visible, [class*="-active"]),
:root[data-theme="light"] body :is(
  .account-sidebar-item:hover .account-sidebar-item-icon,
  .account-sidebar-item:focus-visible .account-sidebar-item-icon,
  .account-sidebar-item.is-active .account-sidebar-item-icon,
  .mobile-menu-chip.header-icon-chip:hover,
  .mobile-menu-chip.header-icon-chip:focus-visible,
  .drawer-close-chip.header-icon-chip:hover,
  .drawer-close-chip.header-icon-chip:focus-visible
) {
  box-shadow:
    var(--ui-shadow-control-icon-hover),
    var(--ui-shadow-control-inset-strong) !important;
}

:root[data-theme="light"] body :is(
  .header-icon-chip .badge-count,
  .drawer-link .badge-count
),
:root[data-theme="light"] body .header-stable-actions :is(
  #site-alerts-button,
  #site-wishlist-icon,
  #site-compare-icon,
  #site-cart-icon,
  #site-inquiry-icon,
  #site-account-chip
) > .badge-count {
  box-shadow: var(--ui-shadow-control-badge) !important;
}

html[data-theme] body .header-stable-actions .header-icon-chip > .badge-count,
html[data-theme] body .drawer-link > .badge-count {
  box-shadow: var(--ui-shadow-control-badge) !important;
}

:root[data-theme="light"] body :is(
  .mobile-menu-chip.header-icon-chip:not(.header-icon-wishlist):not(.header-icon-compare),
  .drawer-close-chip.header-icon-chip:not(.header-icon-wishlist):not(.header-icon-compare)
) {
  box-shadow:
    var(--ui-shadow-control-icon),
    var(--ui-shadow-control-inset) !important;
}

:root[data-theme="light"] body .header-stable-actions .header-icon-chip > .badge-count,
:root[data-theme="light"] body .drawer-link > .badge-count {
  box-shadow: var(--ui-shadow-control-badge) !important;
}

html[data-theme] body .header-stable-actions :is(
  #site-alerts-button.header-icon-alerts-active,
  #site-wishlist-icon.header-icon-wishlist-active,
  #site-compare-icon.header-icon-compare-active,
  #site-cart-icon.header-icon-cart-active,
  #site-inquiry-icon.header-icon-inquiry-active
) > .badge-count,
html[data-theme] body .header-stable-actions #site-alerts-button.header-icon-alerts-active > .badge-count.badge-count-alerts,
html[data-theme] body .header-stable-actions #site-wishlist-icon.header-icon-wishlist-active > .badge-count.badge-count-wishlist,
html[data-theme] body .header-stable-actions #site-compare-icon.header-icon-compare-active > .badge-count.badge-count-compare,
html[data-theme] body .header-stable-actions #site-cart-icon.header-icon-cart-active > .badge-count.badge-count-cart,
html[data-theme] body .header-stable-actions #site-inquiry-icon.header-icon-inquiry-active > .badge-count.badge-count-inquiry {
  box-shadow: var(--ui-shadow-control-badge) !important;
}

/* Compact glass controls: keep button sizing and glass intensity one step quieter. */
html[data-theme] body {
  --ui-shadow-control-surface: 0 3px 8px rgba(2, 6, 23, 0.08);
  --ui-shadow-control-surface-hover: 0 5px 12px rgba(2, 6, 23, 0.1);
  --ui-shadow-control-accent: 0 5px 12px color-mix(in srgb, var(--glass-button-accent, var(--brand-500)) 9%, transparent);
  --ui-shadow-control-accent-hover: 0 6px 14px color-mix(in srgb, var(--glass-button-accent, var(--brand-500)) 11%, transparent);
  --ui-shadow-control-icon: 0 3px 8px color-mix(in srgb, var(--account-sidebar-icon-color, var(--header-action-color, var(--brand-400))) 6%, transparent);
  --ui-shadow-control-icon-hover: 0 4px 10px color-mix(in srgb, var(--account-sidebar-icon-color, var(--header-action-color, var(--brand-400))) 9%, transparent);
  --ui-shadow-control-inset: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  --ui-shadow-control-inset-strong: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  --ui-shadow-control-inset-bottom: inset 0 -5px 8px rgba(0, 0, 0, 0.06);
  --ui-control-compact-height: 40px;
  --ui-control-compact-padding-y: 0.52rem;
  --ui-control-compact-padding-x: 0.9rem;
  --ui-control-compact-radius: 0.62rem;
  --ui-icon-compact-size: 40px;
  --ui-icon-compact-glyph: 1.34rem;
  --ui-icon-button-glyph: 1.24rem;
  --ui-icon-close-glyph: 1.28rem;
  --ui-theme-spotlight-glyph: 1.56rem;
  --ui-icon-compact-badge: 1rem;
  --ui-sidebar-icon-compact-size: 1.46rem;
  --ui-sidebar-icon-glyph: 1.08rem;
  --ui-button-icon-chip-size: 1.7rem;
  --ui-button-icon-chip-glyph: 1rem;
  --header-action-circle-size: var(--ui-icon-compact-size);
  --header-action-icon-size: var(--ui-icon-compact-glyph);
  --header-action-badge-size: var(--ui-icon-compact-badge);
}

:root[data-theme="light"] body {
  --ui-shadow-control-surface: 0 3px 8px rgba(15, 23, 42, 0.045);
  --ui-shadow-control-surface-hover: 0 4px 10px rgba(15, 23, 42, 0.06);
  --ui-shadow-control-accent: 0 4px 10px color-mix(in srgb, var(--glass-button-accent, var(--brand-500)) 8%, transparent);
  --ui-shadow-control-accent-hover: 0 5px 12px color-mix(in srgb, var(--glass-button-accent, var(--brand-500)) 10%, transparent);
  --ui-shadow-control-icon: 0 2px 7px color-mix(in srgb, var(--account-sidebar-icon-color, var(--header-action-color, var(--brand-400))) 5%, transparent);
  --ui-shadow-control-icon-hover: 0 3px 8px color-mix(in srgb, var(--account-sidebar-icon-color, var(--header-action-color, var(--brand-400))) 7%, transparent);
  --ui-shadow-control-inset: inset 0 1px 0 rgba(255, 255, 255, 0.64);
  --ui-shadow-control-inset-strong: inset 0 1px 0 rgba(255, 255, 255, 0.72);
  --ui-shadow-control-inset-bottom: inset 0 -5px 8px rgba(15, 23, 42, 0.016);
}

html[data-theme] body :is(
  .ui-button,
  .ui-button-primary,
  .ui-button-secondary,
  .ui-button-muted,
  .ui-button-ghost,
  .ui-button-danger,
  .button,
  .button--primary,
  .button--secondary,
  .cta-button,
  .cta-button-secondary,
  .ops-button,
  .ops-button-primary,
  .ops-button-secondary,
  .ops-button-muted,
  .ops-footer-action-link-primary,
  .auth-primary-button,
  .auth-change-phone-button,
  .auth-resend-button,
  .auth-flow-submit,
  .auth-flow-secondary,
  .auth-flow-link,
  .chat-button,
  .pd-solid-button,
  .pd-outline-button,
  .pdr-solid-button,
  .pdr-outline-button,
  .pdq-button,
  .pdq-button--secondary,
  .pds-button,
  .pds-button--primary,
  .pds-button--secondary,
  .storefront-card-action,
  .storefront-link,
  .commerce-header-button,
  .commerce-primary-action,
  .commerce-primary-action-cart,
  .commerce-primary-action-inquiry,
  .checkout-address-add-button,
  .account-sidebar-more-button,
  button[type="submit"]:not([class])
) {
  --glass-button-fill: color-mix(in srgb, var(--surface-2) 92%, transparent);
  --glass-button-border: color-mix(in srgb, var(--glass-button-accent) 18%, var(--line-color));
  --glass-button-glow: color-mix(in srgb, var(--glass-button-accent) 8%, transparent);
  min-height: var(--ui-control-compact-height) !important;
  padding: var(--ui-control-compact-padding-y) var(--ui-control-compact-padding-x) !important;
  border-radius: var(--ui-control-compact-radius) !important;
  background:
    radial-gradient(circle at 82% 14%, var(--glass-button-glow), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.018)),
    var(--glass-button-fill) !important;
  box-shadow:
    var(--glass-button-shadow),
    var(--ui-shadow-control-inset),
    var(--ui-shadow-control-inset-bottom) !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  line-height: 1.32 !important;
  backdrop-filter: blur(8px) saturate(1.04) !important;
  -webkit-backdrop-filter: blur(8px) saturate(1.04) !important;
}

html[data-theme] body :is(
  .ui-button-primary,
  .button--primary,
  .cta-button:not(.cta-button-secondary),
  .ops-button,
  .ops-button-primary,
  .ops-footer-action-link-primary,
  .auth-primary-button,
  .auth-flow-submit,
  .chat-button:not(.chat-button-muted):not(.chat-button-danger),
  .pd-solid-button,
  .pdr-solid-button,
  .pdq-button,
  .pds-button--primary,
  .storefront-card-action,
  .commerce-header-button,
  .commerce-primary-action,
  .commerce-primary-action-cart,
  .commerce-primary-action-inquiry,
  .checkout-address-add-button,
  button[type="submit"]:not([class])
) {
  --glass-button-fill: color-mix(in srgb, var(--glass-button-accent) 56%, rgba(11, 13, 16, 0.78));
  --glass-button-border: color-mix(in srgb, var(--glass-button-accent) 42%, rgba(255, 255, 255, 0.14));
  --glass-button-glow: color-mix(in srgb, var(--glass-button-accent) 16%, transparent);
  --glass-button-shadow: var(--ui-shadow-control-accent), var(--ui-shadow-control-surface);
}

html[data-theme] body :is(
  .ui-button-secondary,
  .button--secondary,
  .cta-button-secondary,
  .ops-button-secondary,
  .auth-flow-secondary,
  .pd-outline-button,
  .pdr-outline-button,
  .pdq-button--secondary,
  .pds-button--secondary,
  .storefront-link
) {
  --glass-button-fill: color-mix(in srgb, var(--surface-2) 94%, transparent);
  --glass-button-border: color-mix(in srgb, var(--glass-button-accent) 20%, var(--line-color));
  --glass-button-glow: color-mix(in srgb, var(--glass-button-accent) 6%, transparent);
}

html[data-theme] body :is(
  .ui-button-muted,
  .ui-button-ghost,
  .ops-button-muted,
  .auth-change-phone-button,
  .auth-resend-button,
  .chat-button-muted,
  .account-sidebar-more-button
) {
  --glass-button-fill: color-mix(in srgb, var(--surface) 90%, transparent);
  --glass-button-border: color-mix(in srgb, var(--text-soft) 18%, var(--line-color));
  --glass-button-glow: color-mix(in srgb, var(--brand-400) 5%, transparent);
}

html[data-theme] body :is(
  .ui-button:hover,
  .ui-button:focus-visible,
  .ui-button-primary:hover,
  .ui-button-primary:focus-visible,
  .ui-button-secondary:hover,
  .ui-button-secondary:focus-visible,
  .ui-button-muted:hover,
  .ui-button-muted:focus-visible,
  .ui-button-ghost:hover,
  .ui-button-ghost:focus-visible,
  .ui-button-danger:hover,
  .ui-button-danger:focus-visible,
  .button:hover,
  .button:focus-visible,
  .button--primary:hover,
  .button--primary:focus-visible,
  .button--secondary:hover,
  .button--secondary:focus-visible,
  .cta-button:hover,
  .cta-button:focus-visible,
  .cta-button-secondary:hover,
  .cta-button-secondary:focus-visible,
  .ops-button:hover,
  .ops-button:focus-visible,
  .ops-button-primary:hover,
  .ops-button-primary:focus-visible,
  .ops-button-secondary:hover,
  .ops-button-secondary:focus-visible,
  .ops-button-muted:hover,
  .ops-button-muted:focus-visible,
  .ops-footer-action-link-primary:hover,
  .ops-footer-action-link-primary:focus-visible,
  .auth-primary-button:hover,
  .auth-primary-button:focus-visible,
  .auth-change-phone-button:hover,
  .auth-change-phone-button:focus-visible,
  .auth-resend-button:hover,
  .auth-resend-button:focus-visible,
  .auth-flow-submit:hover,
  .auth-flow-submit:focus-visible,
  .auth-flow-secondary:hover,
  .auth-flow-secondary:focus-visible,
  .auth-flow-link:hover,
  .auth-flow-link:focus-visible,
  .chat-button:hover,
  .chat-button:focus-visible,
  .pd-solid-button:hover,
  .pd-solid-button:focus-visible,
  .pd-outline-button:hover,
  .pd-outline-button:focus-visible,
  .pdr-solid-button:hover,
  .pdr-solid-button:focus-visible,
  .pdr-outline-button:hover,
  .pdr-outline-button:focus-visible,
  .pdq-button:hover,
  .pdq-button:focus-visible,
  .pdq-button--secondary:hover,
  .pdq-button--secondary:focus-visible,
  .pds-button:hover,
  .pds-button:focus-visible,
  .pds-button--primary:hover,
  .pds-button--primary:focus-visible,
  .pds-button--secondary:hover,
  .pds-button--secondary:focus-visible,
  .storefront-card-action:hover,
  .storefront-card-action:focus-visible,
  .storefront-link:hover,
  .storefront-link:focus-visible,
  .commerce-header-button:hover,
  .commerce-header-button:focus-visible,
  .commerce-primary-action:hover,
  .commerce-primary-action:focus-visible,
  .commerce-primary-action-cart:hover,
  .commerce-primary-action-cart:focus-visible,
  .commerce-primary-action-inquiry:hover,
  .commerce-primary-action-inquiry:focus-visible,
  .checkout-address-add-button:hover,
  .checkout-address-add-button:focus-visible,
  .account-sidebar-more-button:hover,
  .account-sidebar-more-button:focus-visible,
  button[type="submit"]:not([class]):hover,
  button[type="submit"]:not([class]):focus-visible
) {
  border-color: color-mix(in srgb, var(--glass-button-accent) 44%, rgba(255, 255, 255, 0.14)) !important;
  background:
    radial-gradient(circle at 82% 14%, color-mix(in srgb, var(--glass-button-accent) 18%, transparent), transparent 32%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.026)),
    color-mix(in srgb, var(--glass-button-fill) 94%, var(--glass-button-accent) 6%) !important;
  box-shadow:
    var(--ui-shadow-control-accent-hover),
    var(--ui-shadow-control-surface-hover),
    var(--ui-shadow-control-inset-strong),
    var(--ui-shadow-control-inset-bottom) !important;
  transform: translateY(-0.5px);
}

html[data-theme] body :is(
  .header-stable-actions .header-icon-chip,
  .mobile-menu-chip,
  .drawer-close-chip,
  .mobile-menu-chip.header-icon-chip,
  .drawer-close-chip.header-icon-chip,
  .icon-chip,
  .mobile-chip,
  .header-search-submit,
  .header-theme-toggle,
  .profile-drawer-close,
  .cockpit-drawer-close,
  .ui-modal-close,
  .commerce-modal-close,
  .toast-close,
  .seller-offer-modal-close,
  .home-hero-icon-button,
  .storefront-recommend-nav,
  .slider-jalali-nav-button,
  .offer-jalali-nav-button,
  .chat-icon-button,
  .industrial-gallery-action
) {
  --button-icon-accent: var(--header-action-color, var(--glass-button-accent, var(--brand-400)));
  width: var(--ui-icon-compact-size) !important;
  min-width: var(--ui-icon-compact-size) !important;
  max-width: var(--ui-icon-compact-size) !important;
  height: var(--ui-icon-compact-size) !important;
  min-height: var(--ui-icon-compact-size) !important;
  max-height: var(--ui-icon-compact-size) !important;
  padding: 0 !important;
  border-color: color-mix(in srgb, var(--button-icon-accent) 24%, var(--line-color)) !important;
  background:
    radial-gradient(circle at 32% 18%, color-mix(in srgb, var(--button-icon-accent) 18%, #ffffff 6%), transparent 40%),
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--button-icon-accent) 12%, var(--surface-2)),
      color-mix(in srgb, var(--button-icon-accent) 4%, var(--surface-2))
    ) !important;
  color: color-mix(in srgb, var(--button-icon-accent) 82%, #ffffff 18%) !important;
  box-shadow: none !important;
  backdrop-filter: blur(7px) saturate(1.02) !important;
  -webkit-backdrop-filter: blur(7px) saturate(1.02) !important;
}

html[data-theme] body :is(
  .header-stable-actions .header-icon-chip:hover,
  .header-stable-actions .header-icon-chip:focus-visible,
  .header-stable-actions .header-icon-chip[class*="-active"],
  .mobile-menu-chip:hover,
  .mobile-menu-chip:focus-visible,
  .drawer-close-chip:hover,
  .drawer-close-chip:focus-visible,
  .icon-chip:hover,
  .icon-chip:focus-visible,
  .mobile-chip:hover,
  .mobile-chip:focus-visible,
  .header-search-submit:hover,
  .header-search-submit:focus-visible,
  .header-theme-toggle:hover,
  .header-theme-toggle:focus-visible,
  .profile-drawer-close:hover,
  .profile-drawer-close:focus-visible,
  .cockpit-drawer-close:hover,
  .cockpit-drawer-close:focus-visible,
  .ui-modal-close:hover,
  .ui-modal-close:focus-visible,
  .commerce-modal-close:hover,
  .commerce-modal-close:focus-visible,
  .toast-close:hover,
  .toast-close:focus-visible,
  .seller-offer-modal-close:hover,
  .seller-offer-modal-close:focus-visible,
  .home-hero-icon-button:hover,
  .home-hero-icon-button:focus-visible,
  .storefront-recommend-nav:hover,
  .storefront-recommend-nav:focus-visible,
  .slider-jalali-nav-button:hover,
  .slider-jalali-nav-button:focus-visible,
  .offer-jalali-nav-button:hover,
  .offer-jalali-nav-button:focus-visible,
  .chat-icon-button:hover,
  .chat-icon-button:focus-visible,
  .industrial-gallery-action:hover,
  .industrial-gallery-action:focus-visible,
  .industrial-gallery-action.is-active
) {
  border-color: color-mix(in srgb, var(--button-icon-accent) 36%, var(--line-color)) !important;
  background:
    radial-gradient(circle at 30% 18%, color-mix(in srgb, #ffffff 16%, var(--button-icon-accent) 54%), transparent 42%),
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--button-icon-accent) 34%, var(--surface-2)),
      color-mix(in srgb, var(--button-icon-accent) 16%, var(--surface-2))
    ) !important;
  color: #f8fafc !important;
  box-shadow: 0 4px 10px color-mix(in srgb, var(--button-icon-accent) 10%, transparent) !important;
}

html[data-theme] body :is(.header-search-submit, .header-icon-search) {
  --button-icon-accent: #38bdf8;
}

html[data-theme] body :is(.header-theme-toggle, .header-icon-theme, #site-theme-toggle, #site-theme-toggle-legacy) {
  --button-icon-accent: var(--warning);
}

html[data-theme] body :is(
  .profile-drawer-close,
  .cockpit-drawer-close,
  .ui-modal-close,
  .commerce-modal-close,
  .toast-close,
  .seller-offer-modal-close,
  .drawer-close-chip
) {
  --button-icon-accent: var(--danger);
}

html[data-theme] body :is(.header-icon-workboard, .mobile-menu-chip) {
  --button-icon-accent: #a78bfa;
}

html[data-theme] body :is(.home-hero-icon-button, .storefront-recommend-nav, .slider-jalali-nav-button, .offer-jalali-nav-button) {
  --button-icon-accent: #a78bfa;
}

html[data-theme] body .chat-icon-button {
  --button-icon-accent: #38bdf8;
}

html[data-theme] body .industrial-gallery-action-wishlist {
  --button-icon-accent: #fb7185;
}

html[data-theme] body .industrial-gallery-action-compare {
  --button-icon-accent: #38bdf8;
}

html[data-theme] body :is(.header-chip-icon, .header-stable-actions .header-icon-chip .header-chip-icon) {
  width: var(--ui-icon-compact-glyph) !important;
  min-width: var(--ui-icon-compact-glyph) !important;
  max-width: var(--ui-icon-compact-glyph) !important;
  height: var(--ui-icon-compact-glyph) !important;
  min-height: var(--ui-icon-compact-glyph) !important;
  max-height: var(--ui-icon-compact-glyph) !important;
}

html[data-theme] body .drawer-theme-glyph {
  width: var(--ui-theme-spotlight-glyph) !important;
  height: var(--ui-theme-spotlight-glyph) !important;
}

html[data-theme] body :is(.header-icon-chip .badge-count, .drawer-link .badge-count) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: auto !important;
  min-width: var(--ui-icon-compact-badge) !important;
  height: var(--ui-icon-compact-badge) !important;
  min-height: var(--ui-icon-compact-badge) !important;
  max-height: var(--ui-icon-compact-badge) !important;
  padding: 0 0.14rem !important;
  border-radius: 999px !important;
  font-size: 0.52rem !important;
  font-weight: 900 !important;
  font-variant-numeric: tabular-nums !important;
  line-height: 1 !important;
  text-align: center !important;
  box-shadow: var(--ui-shadow-control-badge) !important;
}

html[data-theme] body :is(
  .account-sidebar-item,
  .account-sidebar-seller-link,
  .drawer-link
) {
  min-height: 2.05rem !important;
  padding: 0.42rem 0.7rem !important;
  border-radius: 0.62rem !important;
}

html[data-theme] body :is(
  .account-sidebar-item-icon,
  .profile-mobile-trigger-icon,
  .cockpit-mobile-trigger-icon
) {
  width: var(--ui-sidebar-icon-compact-size) !important;
  min-width: var(--ui-sidebar-icon-compact-size) !important;
  height: var(--ui-sidebar-icon-compact-size) !important;
  min-height: var(--ui-sidebar-icon-compact-size) !important;
  border-radius: 0.48rem !important;
  background:
    radial-gradient(circle at 32% 18%, color-mix(in srgb, var(--account-sidebar-icon-color) 12%, white 4%), transparent 36%),
    color-mix(in srgb, var(--account-sidebar-icon-color) 9%, var(--surface-2)) !important;
}

html[data-theme] body :is(
  .account-sidebar-item-icon svg,
  .profile-mobile-trigger-icon svg,
  .cockpit-mobile-trigger-icon svg
) {
  width: var(--ui-sidebar-icon-glyph) !important;
  height: var(--ui-sidebar-icon-glyph) !important;
}

html[data-theme] body .account-sidebar-more-button svg {
  width: var(--ui-sidebar-icon-glyph) !important;
  height: var(--ui-sidebar-icon-glyph) !important;
}

html[data-theme] body .account-sidebar-disclosure-chevron {
  width: 1.05rem !important;
  height: 1.05rem !important;
}

html[data-theme] body :is(
  .account-sidebar-item:hover .account-sidebar-item-icon,
  .account-sidebar-item:focus-visible .account-sidebar-item-icon,
  .account-sidebar-item.is-active .account-sidebar-item-icon
) {
  background:
    radial-gradient(circle at 30% 18%, color-mix(in srgb, white 18%, var(--account-sidebar-icon-color) 48%), transparent 38%),
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--account-sidebar-icon-color) 54%, var(--surface-2)),
      color-mix(in srgb, var(--account-sidebar-icon-color) 28%, var(--surface-2))
    ) !important;
}

/* Final semantic pass for compact icon-only action buttons. */
html[data-theme][data-theme] body .action-icon-button.action-icon-button.action-icon-button {
  --button-icon-accent: var(--glass-button-accent, var(--info));
  --glass-button-fill: color-mix(in srgb, var(--button-icon-accent) 10%, var(--surface-2)) !important;
  --glass-button-border: color-mix(in srgb, var(--button-icon-accent) 24%, var(--line-color)) !important;
  --glass-button-glow: transparent !important;
  --glass-button-text: color-mix(in srgb, var(--button-icon-accent) 82%, #ffffff 18%) !important;
  display: inline-grid !important;
  place-items: center;
  width: 2.25rem !important;
  height: 2.25rem !important;
  inline-size: 2.25rem !important;
  block-size: 2.25rem !important;
  min-width: 2.25rem !important;
  min-height: 2.25rem !important;
  min-inline-size: 2.25rem !important;
  min-block-size: 2.25rem !important;
  max-width: 2.25rem !important;
  max-height: 2.25rem !important;
  max-inline-size: 2.25rem !important;
  max-block-size: 2.25rem !important;
  flex: 0 0 auto !important;
  gap: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  border-color: var(--glass-button-border) !important;
  background:
    radial-gradient(circle at 32% 18%, color-mix(in srgb, var(--button-icon-accent) 18%, #ffffff 6%), transparent 40%),
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--button-icon-accent) 12%, var(--surface-2)),
      color-mix(in srgb, var(--button-icon-accent) 4%, var(--surface-2))
    ) !important;
  color: var(--glass-button-text) !important;
  box-shadow: none !important;
}

html[data-theme] body .action-icon-button.action-icon-button.action-icon-button svg {
  width: var(--ui-icon-button-glyph) !important;
  height: var(--ui-icon-button-glyph) !important;
  inline-size: var(--ui-icon-button-glyph) !important;
  block-size: var(--ui-icon-button-glyph) !important;
  min-inline-size: var(--ui-icon-button-glyph);
  min-block-size: var(--ui-icon-button-glyph);
  max-inline-size: none;
  max-block-size: none;
  stroke-width: 2.15;
}

html[data-theme] body :is(
  .action-icon-button.action-icon-button.action-icon-button-edit,
  .action-icon-button.action-icon-button[aria-label*="ویرایش"],
  .action-icon-button.action-icon-button[data-action-tooltip*="ویرایش"]
) {
  --glass-button-accent: var(--info) !important;
  --glass-button-fill: color-mix(in srgb, var(--info) 5%, var(--surface-2)) !important;
  --glass-button-border: color-mix(in srgb, var(--info) 20%, var(--line-color)) !important;
  --glass-button-glow: color-mix(in srgb, var(--info) 5%, transparent) !important;
  --glass-button-text: color-mix(in srgb, var(--info) 62%, var(--text-soft)) !important;
  background:
    radial-gradient(circle at 82% 14%, var(--glass-button-glow), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.018)),
    var(--glass-button-fill) !important;
  border-color: var(--glass-button-border) !important;
  color: var(--glass-button-text) !important;
}

html[data-theme] body :is(
  .action-icon-button.action-icon-button.action-icon-button-success,
  .action-icon-button.action-icon-button[aria-label*="فعال کردن"],
  .action-icon-button.action-icon-button[data-action-tooltip*="فعال کردن"]
) {
  --glass-button-accent: var(--success) !important;
  --glass-button-fill: color-mix(in srgb, var(--success) 5%, var(--surface-2)) !important;
  --glass-button-border: color-mix(in srgb, var(--success) 20%, var(--line-color)) !important;
  --glass-button-glow: color-mix(in srgb, var(--success) 5%, transparent) !important;
  --glass-button-text: color-mix(in srgb, var(--success) 62%, var(--text-soft)) !important;
  background:
    radial-gradient(circle at 82% 14%, var(--glass-button-glow), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.018)),
    var(--glass-button-fill) !important;
  border-color: var(--glass-button-border) !important;
  color: var(--glass-button-text) !important;
}

html[data-theme] body :is(
  .action-icon-button.action-icon-button.action-icon-button-warning,
  .action-icon-button.action-icon-button[aria-label*="غیرفعال"],
  .action-icon-button.action-icon-button[data-action-tooltip*="غیرفعال"]
) {
  --glass-button-accent: var(--warning) !important;
  --glass-button-fill: color-mix(in srgb, var(--warning) 5%, var(--surface-2)) !important;
  --glass-button-border: color-mix(in srgb, var(--warning) 22%, var(--line-color)) !important;
  --glass-button-glow: color-mix(in srgb, var(--warning) 5%, transparent) !important;
  --glass-button-text: color-mix(in srgb, var(--warning) 62%, var(--text-soft)) !important;
  background:
    radial-gradient(circle at 82% 14%, var(--glass-button-glow), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.018)),
    var(--glass-button-fill) !important;
  border-color: var(--glass-button-border) !important;
  color: var(--glass-button-text) !important;
}

html[data-theme] body :is(
  .action-icon-button.action-icon-button.action-icon-button-danger,
  .action-icon-button.action-icon-button[aria-label*="حذف"],
  .action-icon-button.action-icon-button[data-action-tooltip*="حذف"],
  .action-icon-button.action-icon-button[aria-label*="پاک کردن"],
  .action-icon-button.action-icon-button[data-action-tooltip*="پاک کردن"]
) {
  --glass-button-accent: var(--danger) !important;
  --glass-button-fill: color-mix(in srgb, var(--danger) 5%, var(--surface-2)) !important;
  --glass-button-border: color-mix(in srgb, var(--danger) 22%, var(--line-color)) !important;
  --glass-button-glow: color-mix(in srgb, var(--danger) 5%, transparent) !important;
  --glass-button-text: color-mix(in srgb, var(--danger) 64%, var(--text-soft)) !important;
  background:
    radial-gradient(circle at 82% 14%, var(--glass-button-glow), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.018)),
    var(--glass-button-fill) !important;
  border-color: var(--glass-button-border) !important;
  color: var(--glass-button-text) !important;
}

/* Quiet semantic pass for badges and compact icon-only actions. */
html[data-theme][data-theme] body {
  --ui-semantic-surface: var(--surface-2, var(--base-surface-subtle, #111827));
  --ui-semantic-border: var(--line-color, var(--base-border, rgba(148, 163, 184, 0.24)));
  --ui-semantic-muted-text: var(--text-soft, var(--base-muted, #94a3b8));
  --ui-semantic-strong-text: var(--text-primary, var(--base-ink, #f8fafc));
  --ui-semantic-brand: var(--primary, var(--brand-500, var(--base-brand, #60a5fa)));
  --ui-semantic-success: var(--success, var(--base-success, #10b981));
  --ui-semantic-warning: var(--warning, var(--accent-gold, var(--base-warm, #f59e0b)));
  --ui-semantic-info: var(--info, var(--base-brand, #60a5fa));
  --ui-semantic-danger: var(--danger, var(--base-danger, #ef4444));
  --ui-semantic-brand-bg: color-mix(in srgb, var(--ui-semantic-brand) 4%, var(--ui-semantic-surface));
  --ui-semantic-brand-border: color-mix(in srgb, var(--ui-semantic-brand) 14%, var(--ui-semantic-border));
  --ui-semantic-brand-text: color-mix(in srgb, var(--ui-semantic-brand) 40%, var(--ui-semantic-strong-text));
  --ui-semantic-success-bg: color-mix(in srgb, var(--ui-semantic-success) 4%, var(--ui-semantic-surface));
  --ui-semantic-success-border: color-mix(in srgb, var(--ui-semantic-success) 14%, var(--ui-semantic-border));
  --ui-semantic-success-text: color-mix(in srgb, var(--ui-semantic-success) 58%, var(--ui-semantic-muted-text));
  --ui-semantic-warning-bg: color-mix(in srgb, var(--ui-semantic-warning) 4%, var(--ui-semantic-surface));
  --ui-semantic-warning-border: color-mix(in srgb, var(--ui-semantic-warning) 16%, var(--ui-semantic-border));
  --ui-semantic-warning-text: color-mix(in srgb, var(--ui-semantic-warning) 56%, var(--ui-semantic-muted-text));
  --ui-semantic-info-bg: color-mix(in srgb, var(--ui-semantic-info) 4%, var(--ui-semantic-surface));
  --ui-semantic-info-border: color-mix(in srgb, var(--ui-semantic-info) 14%, var(--ui-semantic-border));
  --ui-semantic-info-text: color-mix(in srgb, var(--ui-semantic-info) 58%, var(--ui-semantic-muted-text));
  --ui-semantic-danger-bg: color-mix(in srgb, var(--ui-semantic-danger) 4%, var(--ui-semantic-surface));
  --ui-semantic-danger-border: color-mix(in srgb, var(--ui-semantic-danger) 16%, var(--ui-semantic-border));
  --ui-semantic-danger-text: color-mix(in srgb, var(--ui-semantic-danger) 60%, var(--ui-semantic-muted-text));
}

html[data-theme][data-theme] body :is(
  .ui-badge,
  .price-chip,
  .spec-chip,
  .ops-soft-badge,
  .ops-badge,
  .ops-meta span,
  .ops-meta-chip,
  .badge,
  .taxonomy-badge,
  .brand-country-badge,
  .status-chip,
  .review-action-badge,
  .seller-status-chip,
  .industrial-status-chip,
  .account-sidebar-status,
  .account-sidebar-badge,
  .finance-badge--is-muted,
  .finance-badge--muted
) {
  border-color: color-mix(in srgb, var(--ui-semantic-border) 90%, transparent) !important;
  background: color-mix(in srgb, var(--ui-semantic-surface) 96%, transparent) !important;
  color: var(--ui-semantic-muted-text) !important;
  box-shadow: none !important;
}

html[data-theme][data-theme] body :is(
  .taxonomy-badge,
  .category-direct-child-status
) {
  min-height: 1.75rem !important;
  padding: 0.18rem 0.62rem !important;
  border-radius: 999px !important;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: 0 !important;
  align-self: center !important;
}

html[data-theme][data-theme] body :is(
  .taxonomy-inline-actions,
  .category-direct-child-actions,
  .category-direct-children-actions
) .taxonomy-badge {
  width: auto !important;
  min-width: max-content !important;
  justify-self: start !important;
}

html[data-theme][data-theme] body .category-direct-child-status::before {
  width: 0.32rem !important;
  height: 0.32rem !important;
  opacity: 0.45 !important;
}

html[data-theme][data-theme] body :is(
  .ui-badge-strong,
  .ops-badge-strong,
  .ops-soft-badge-strong,
  .ops-meta-chip-strong,
  .ops-meta span.ops-meta-chip-strong,
  .ops-meta span.product-class-type,
  .price-chip-strong,
  .spec-chip-strong
) {
  border-color: var(--ui-semantic-brand-border) !important;
  background: var(--ui-semantic-brand-bg) !important;
  color: var(--ui-semantic-brand-text) !important;
}

html[data-theme][data-theme] body :is(
  .ui-badge-success,
  .ops-badge-success,
  .ops-soft-badge-success,
  .ops-meta-chip-success,
  .ops-meta span.ops-meta-chip-success,
  .price-chip-success,
  .spec-chip-success,
  .product-class-status-active,
  .account-sidebar-status-verified,
  .brand-country-badge-success,
  .taxonomy-badge-success,
  .category-direct-child-status.taxonomy-badge-success,
  .badge--success,
  .finance-badge--is-success,
  .finance-badge--success,
  .status-chip--revised,
  .status-chip--attached,
  .review-action-badge--success,
  .seller-status-chip[data-tone="success"],
  .brand-success,
  :is(.ui-badge, .ops-badge, .ops-soft-badge, .ops-meta-chip, .ops-meta span, .price-chip, .spec-chip, .badge, .taxonomy-badge, .status-chip, .seller-status-chip)[data-tone="success"],
  :is(.ui-badge, .ops-badge, .ops-soft-badge, .ops-meta-chip, .ops-meta span, .price-chip, .spec-chip, .badge, .taxonomy-badge, .status-chip, .seller-status-chip)[data-status="active"]
) {
  border-color: var(--ui-semantic-success-border) !important;
  background: var(--ui-semantic-success-bg) !important;
  color: var(--ui-semantic-success-text) !important;
}

html[data-theme][data-theme] body :is(
  .ui-badge-warning,
  .ops-badge-warning,
  .ops-soft-badge-warning,
  .ops-meta-chip-warning,
  .ops-meta span.ops-meta-chip-warning,
  .price-chip-warning,
  .spec-chip-warning,
  .product-class-status-inactive,
  .ops-meta span.product-class-option-count,
  .account-sidebar-status-incomplete,
  .taxonomy-badge-warning,
  .category-direct-child-status.taxonomy-badge-warning,
  .finance-badge--is-warning,
  .finance-badge--warning,
  .status-chip--draft,
  .status-chip--needs-revision,
  .review-action-badge--warning,
  .seller-status-chip[data-tone="warning"],
  :is(.ui-badge, .ops-badge, .ops-soft-badge, .ops-meta-chip, .ops-meta span, .price-chip, .spec-chip, .badge, .taxonomy-badge, .status-chip, .seller-status-chip)[data-tone="warning"],
  :is(.ui-badge, .ops-badge, .ops-soft-badge, .ops-meta-chip, .ops-meta span, .price-chip, .spec-chip, .badge, .taxonomy-badge, .status-chip, .seller-status-chip)[data-status="inactive"]
) {
  border-color: var(--ui-semantic-warning-border) !important;
  background: var(--ui-semantic-warning-bg) !important;
  color: var(--ui-semantic-warning-text) !important;
}

html[data-theme][data-theme] body :is(
  .ui-badge-info,
  .ops-badge-info,
  .ops-soft-badge-info,
  .ops-meta-chip-info,
  .ops-meta span.ops-meta-chip-info,
  .price-chip-info,
  .spec-chip-info,
  .product-class-code,
  .ops-meta span.product-class-attribute-count,
  .account-sidebar-status-pending,
  .account-sidebar-badge-info,
  .finance-badge--is-info,
  .finance-badge--info,
  .status-chip--submitted,
  .status-chip--queued,
  .status-chip--in-review,
  .review-action-badge--info,
  .seller-status-chip[data-tone="info"],
  :is(.ui-badge, .ops-badge, .ops-soft-badge, .ops-meta-chip, .ops-meta span, .price-chip, .spec-chip, .badge, .taxonomy-badge, .status-chip, .seller-status-chip)[data-tone="info"],
  :is(.ui-badge, .ops-badge, .ops-soft-badge, .ops-meta-chip, .ops-meta span, .price-chip, .spec-chip, .badge, .taxonomy-badge, .status-chip, .seller-status-chip)[data-status="pending"]
) {
  border-color: var(--ui-semantic-info-border) !important;
  background: var(--ui-semantic-info-bg) !important;
  color: var(--ui-semantic-info-text) !important;
}

html[data-theme][data-theme] body :is(
  .ui-badge-danger,
  .ops-badge-danger,
  .ops-soft-badge-danger,
  .ops-meta-chip-danger,
  .ops-meta span.ops-meta-chip-danger,
  .price-chip-danger,
  .spec-chip-danger,
  .account-sidebar-status-restricted,
  .account-sidebar-badge-danger,
  .taxonomy-badge-danger,
  .category-direct-child-status.taxonomy-badge-danger,
  .badge--danger,
  .badge--error,
  .finance-badge--is-danger,
  .finance-badge--danger,
  .finance-badge--is-error,
  .status-chip--rejected,
  .review-action-badge--danger,
  .seller-status-chip[data-tone="danger"],
  :is(.ui-badge, .ops-badge, .ops-soft-badge, .ops-meta-chip, .ops-meta span, .price-chip, .spec-chip, .badge, .taxonomy-badge, .status-chip, .seller-status-chip)[data-tone="danger"],
  :is(.ui-badge, .ops-badge, .ops-soft-badge, .ops-meta-chip, .ops-meta span, .price-chip, .spec-chip, .badge, .taxonomy-badge, .status-chip, .seller-status-chip)[data-status="danger"]
) {
  border-color: var(--ui-semantic-danger-border) !important;
  background: var(--ui-semantic-danger-bg) !important;
  color: var(--ui-semantic-danger-text) !important;
}

html[data-theme][data-theme] body :is(
  .action-icon-button.action-icon-button.action-icon-button-edit,
  .action-icon-button.action-icon-button[aria-label*="ویرایش"],
  .action-icon-button.action-icon-button[data-action-tooltip*="ویرایش"]
) {
  --glass-button-fill: var(--ui-semantic-info-bg) !important;
  --glass-button-border: color-mix(in srgb, var(--ui-semantic-info) 20%, var(--ui-semantic-border)) !important;
  --glass-button-glow: color-mix(in srgb, var(--ui-semantic-info) 5%, transparent) !important;
  --glass-button-text: color-mix(in srgb, var(--ui-semantic-info) 62%, var(--ui-semantic-muted-text)) !important;
}

html[data-theme][data-theme] body :is(
  .action-icon-button.action-icon-button.action-icon-button-success,
  .action-icon-button.action-icon-button[aria-label*="فعال کردن"],
  .action-icon-button.action-icon-button[data-action-tooltip*="فعال کردن"]
) {
  --glass-button-fill: var(--ui-semantic-success-bg) !important;
  --glass-button-border: color-mix(in srgb, var(--ui-semantic-success) 20%, var(--ui-semantic-border)) !important;
  --glass-button-glow: color-mix(in srgb, var(--ui-semantic-success) 5%, transparent) !important;
  --glass-button-text: color-mix(in srgb, var(--ui-semantic-success) 62%, var(--ui-semantic-muted-text)) !important;
}

html[data-theme][data-theme] body :is(
  .action-icon-button.action-icon-button.action-icon-button-warning,
  .action-icon-button.action-icon-button[aria-label*="غیرفعال"],
  .action-icon-button.action-icon-button[data-action-tooltip*="غیرفعال"]
) {
  --glass-button-fill: var(--ui-semantic-warning-bg) !important;
  --glass-button-border: color-mix(in srgb, var(--ui-semantic-warning) 22%, var(--ui-semantic-border)) !important;
  --glass-button-glow: color-mix(in srgb, var(--ui-semantic-warning) 5%, transparent) !important;
  --glass-button-text: color-mix(in srgb, var(--ui-semantic-warning) 62%, var(--ui-semantic-muted-text)) !important;
}

html[data-theme][data-theme] body :is(
  .action-icon-button.action-icon-button.action-icon-button-danger,
  .action-icon-button.action-icon-button[aria-label*="حذف"],
  .action-icon-button.action-icon-button[data-action-tooltip*="حذف"],
  .action-icon-button.action-icon-button[aria-label*="پاک کردن"],
  .action-icon-button.action-icon-button[data-action-tooltip*="پاک کردن"]
) {
  --glass-button-fill: var(--ui-semantic-danger-bg) !important;
  --glass-button-border: color-mix(in srgb, var(--ui-semantic-danger) 22%, var(--ui-semantic-border)) !important;
  --glass-button-glow: color-mix(in srgb, var(--ui-semantic-danger) 5%, transparent) !important;
  --glass-button-text: color-mix(in srgb, var(--ui-semantic-danger) 64%, var(--ui-semantic-muted-text)) !important;
}

html[data-theme][data-theme] body .action-icon-button.action-icon-button.action-icon-button {
  background:
    radial-gradient(circle at 32% 18%, color-mix(in srgb, var(--button-icon-accent) 18%, #ffffff 6%), transparent 40%),
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--button-icon-accent) 12%, var(--surface-2)),
      color-mix(in srgb, var(--button-icon-accent) 4%, var(--surface-2))
    ) !important;
  border-color: var(--glass-button-border) !important;
  color: var(--glass-button-text) !important;
  box-shadow: none !important;
}

html[data-theme][data-theme] body .action-icon-button.action-icon-button.action-icon-button:hover,
html[data-theme][data-theme] body .action-icon-button.action-icon-button.action-icon-button:focus-visible {
  border-color: color-mix(in srgb, var(--button-icon-accent) 36%, var(--line-color)) !important;
  background:
    radial-gradient(circle at 30% 18%, color-mix(in srgb, #ffffff 16%, var(--button-icon-accent) 54%), transparent 42%),
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--button-icon-accent) 34%, var(--surface-2)),
      color-mix(in srgb, var(--button-icon-accent) 16%, var(--surface-2))
    ) !important;
  color: #f8fafc !important;
  box-shadow: 0 4px 10px color-mix(in srgb, var(--button-icon-accent) 10%, transparent) !important;
}

html[data-theme] body :is(
  .ui-button,
  .ui-button-primary,
  .ui-button-secondary,
  .ui-button-muted,
  .ui-button-ghost,
  .ui-button-danger,
  .button,
  .button--primary,
  .button--secondary,
  .cta-button,
  .cta-button-secondary,
  .ops-button,
  .ops-button-primary,
  .ops-button-secondary,
  .ops-button-muted,
  .auth-primary-button,
  .auth-change-phone-button,
  .auth-resend-button,
  .auth-flow-submit,
  .auth-flow-secondary,
  .chat-button,
  .pd-solid-button,
  .pd-outline-button,
  .pdr-solid-button,
  .pdr-outline-button,
  .pdq-button,
  .pdq-button--secondary,
  .pds-button,
  .pds-button--primary,
  .pds-button--secondary,
  .storefront-card-action,
  .commerce-header-button,
  .commerce-primary-action,
  .commerce-primary-action-cart,
  .commerce-primary-action-inquiry,
  .checkout-address-add-button
) > svg:first-child {
  width: var(--ui-button-icon-chip-size) !important;
  min-width: var(--ui-button-icon-chip-size) !important;
  height: var(--ui-button-icon-chip-size) !important;
  min-height: var(--ui-button-icon-chip-size) !important;
  padding: calc((var(--ui-button-icon-chip-size) - var(--ui-button-icon-chip-glyph)) / 2) !important;
  border: 0 !important;
  border-radius: 0.52rem !important;
  background:
    radial-gradient(circle at 32% 18%, color-mix(in srgb, var(--glass-button-accent) 16%, #ffffff 6%), transparent 40%),
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--glass-button-accent) 9%, transparent),
      color-mix(in srgb, var(--glass-button-accent) 4%, transparent)
    ) !important;
  color: color-mix(in srgb, var(--glass-button-accent) 90%, #ffffff 10%) !important;
  box-shadow: none !important;
  flex: 0 0 auto !important;
}

/* Operational typography lock: keep admin/product work screens aligned with the account sidebar scale. */
html[data-theme][data-theme] body {
  --ops-type-meta: 0.74rem;
  --ops-type-control: 0.82rem;
  --ops-type-body: 0.86rem;
  --ops-type-body-strong: 0.92rem;
  --ops-type-section-title: 1.02rem;
  --ops-type-work-title: 1.16rem;
  --ops-type-page-title: 1.28rem;
  --ops-type-page-title-lg: 1.42rem;
}

html[data-theme][data-theme] body :is(.ops-main, .profile-content, .review-console, .review-detail-panel, .review-detail-shell) {
  font-size: var(--ops-type-body) !important;
  line-height: 1.75 !important;
}

html[data-theme][data-theme] body :is(
  .ops-page-header-copy h1,
  .ops-hero-copy h1,
  .review-console--queue .review-console-hero h1
) {
  font-size: var(--ops-type-page-title) !important;
  line-height: 1.55 !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
}

@media (min-width: 64rem) {
  html[data-theme][data-theme] body :is(
    .ops-page-header-copy h1,
    .ops-hero-copy h1,
    .review-console--queue .review-console-hero h1
  ) {
    font-size: var(--ops-type-page-title-lg) !important;
  }
}

html[data-theme][data-theme] body :is(
  .ops-page-header-copy p:last-child,
  .review-detail-copy,
  .review-console .muted,
  .review-detail-panel .muted,
  .review-detail-shell .muted
) {
  font-size: var(--ops-type-body) !important;
  line-height: 1.85 !important;
}

html[data-theme][data-theme] body :is(
  .ops-kicker,
  .ops-panel-kicker,
  .review-console .eyebrow,
  .review-detail-panel .eyebrow,
  .review-detail-shell .eyebrow,
  .review-queue-panel-head .eyebrow,
  .review-detail-snapshot small,
  .review-queue-metric span,
  .review-queue-owner,
  .review-queue-footer
) {
  font-size: var(--ops-type-meta) !important;
  line-height: 1.55 !important;
  letter-spacing: 0 !important;
}

html[data-theme][data-theme] body :is(
  .ops-panel-title,
  .review-queue-panel-head h2,
  .review-console h2,
  .review-detail-panel h2,
  .review-detail-shell h2,
  .product-class-attribute-modal-shell .ui-modal-title,
  .brand-form-modal-panel .ops-panel-title,
  .brand-form-panel-title,
  .category-attribute-dialog h3,
  .category-direct-children h3
) {
  font-size: var(--ops-type-section-title) !important;
  line-height: 1.6 !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
}

html[data-theme][data-theme] body :is(
  .review-detail-title,
  .review-console--queue .review-detail-title,
  .brand-logo-control-title,
  .category-direct-child-title,
  .product-class-attribute-summary-title
) {
  font-size: var(--ops-type-work-title) !important;
  line-height: 1.6 !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
}

html[data-theme][data-theme] body :is(
  .review-queue-title,
  .ops-list-item strong,
  .review-data-card strong,
  .review-detail-snapshot strong,
  .product-class-attribute-title,
  .product-class-option-group-title,
  .category-attribute-summary-title,
  .category-option-group-title,
  .brand-card-title,
  .brand-country-option-title
) {
  font-size: var(--ops-type-body-strong) !important;
  line-height: 1.65 !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

html[data-theme][data-theme] body :is(
  .ops-button.ops-button.ops-button,
  .ops-button-primary.ops-button-primary.ops-button-primary,
  .ops-button-secondary.ops-button-secondary.ops-button-secondary,
  .ops-button-muted.ops-button-muted.ops-button-muted,
  .ops-meta-chip.ops-meta-chip.ops-meta-chip
) {
  font-size: var(--ops-type-control) !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
}

html[data-theme][data-theme] body :is(
  .ops-main,
  .profile-content,
  .review-console,
  .review-detail-panel,
  .review-detail-shell
) :is(
  .button,
  button,
  .review-flow-steps span,
  .review-queue-stat span,
  .review-queue-metric strong,
  .review-queue-path,
  .review-time-chip,
  .review-time-inline,
  .ui-badge,
  .ops-badge,
  .ops-soft-badge,
  .status-chip,
  .badge,
  .taxonomy-badge
) {
  font-size: var(--ops-type-control) !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
}

html[data-theme][data-theme] body :is(.review-queue-stat strong, .ops-stat-card strong, .ops-stat-card em) {
  font-size: 1.06rem !important;
  line-height: 1.25 !important;
  font-weight: 850 !important;
}

html[data-theme][data-theme] body .header-stable-actions :is(
  #site-alerts-button,
  #site-wishlist-icon,
  #site-compare-icon,
  #site-cart-icon,
  #site-inquiry-icon
).header-icon-chip > .badge-count[data-count-badge],
html[data-theme][data-theme] body .drawer-link > .badge-count[data-count-badge] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: auto !important;
  min-width: var(--ui-icon-compact-badge) !important;
  height: var(--ui-icon-compact-badge) !important;
  min-height: var(--ui-icon-compact-badge) !important;
  max-height: var(--ui-icon-compact-badge) !important;
  padding: 0 0.14rem !important;
  border-radius: 999px !important;
  font-size: 0.52rem !important;
  font-weight: 900 !important;
  font-variant-numeric: tabular-nums !important;
  line-height: 1 !important;
  text-align: center !important;
}

/* Product detail reading color: restrained accents so the page has hierarchy without shouting. */
html[data-theme] body .industrial-detail-shell {
  --product-tab-intro: #7ea6cc;
  --product-tab-specs: #82b39d;
  --product-tab-installation: #bba16e;
  --product-tab-documents: #a79ac8;
  --product-tab-sellers: #bf9b76;
  --product-tab-reviews: #bd8796;
  --product-tab-similar: #82a9c5;
  --product-tab-rfq: #84b6a3;
  --product-detail-title-start: #e7f0fb;
  --product-detail-title-mid: #bfd4e8;
  --product-detail-title-end: #cadfd3;
  --product-detail-ink: #e3edf6;
  --product-detail-body: #bac8d8;
  --product-detail-muted: #91a3b7;
  --product-detail-label: #8fa2b8;
  --product-detail-blue: #8db2d7;
  --product-detail-sage: #86b79f;
  --product-detail-amber: #c5a76f;
  --product-detail-rose: #c28a98;
  --product-detail-violet: #aa9dcc;
}

:root[data-theme="light"] body .industrial-detail-shell {
  --product-tab-intro: #426f98;
  --product-tab-specs: #477b66;
  --product-tab-installation: #876e3f;
  --product-tab-documents: #6b6491;
  --product-tab-sellers: #866243;
  --product-tab-reviews: #8a5c67;
  --product-tab-similar: #456f86;
  --product-tab-rfq: #477967;
  --product-detail-title-start: #1f344b;
  --product-detail-title-mid: #2f5d80;
  --product-detail-title-end: #426f5d;
  --product-detail-ink: #1e293b;
  --product-detail-body: #536273;
  --product-detail-muted: #6d7c8d;
  --product-detail-label: #66788c;
  --product-detail-blue: #456f97;
  --product-detail-sage: #4d7f68;
  --product-detail-amber: #8a7244;
  --product-detail-rose: #8c5d69;
  --product-detail-violet: #6e6791;
}

html[data-theme] body .industrial-detail-shell .industrial-detail-hero {
  border-color: color-mix(in srgb, var(--product-detail-blue) 16%, var(--line-color)) !important;
  background:
    radial-gradient(circle at 12% 14%, color-mix(in srgb, var(--product-detail-blue) 9%, transparent), transparent 34%),
    radial-gradient(circle at 86% 8%, color-mix(in srgb, var(--product-detail-sage) 7%, transparent), transparent 32%),
    color-mix(in srgb, var(--panel-bg-strong) 96%, transparent) !important;
}

html[data-theme] body .industrial-detail-shell .industrial-product-summary h1 {
  background: none !important;
  color: var(--product-detail-ink) !important;
  font-size: 2.08rem !important;
  font-weight: 800 !important;
  line-height: 1.42 !important;
  -webkit-text-fill-color: var(--product-detail-ink) !important;
  text-shadow: none !important;
}

@supports (-webkit-background-clip: text) {
  html[data-theme] body .industrial-detail-shell .industrial-product-summary h1 {
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    color: var(--product-detail-ink) !important;
    -webkit-text-fill-color: var(--product-detail-ink) !important;
  }
}

@media (max-width: 44rem) {
  html[data-theme] body .industrial-detail-shell .industrial-product-summary h1 {
    font-size: 1.42rem !important;
    line-height: 1.55 !important;
  }
}

html[data-theme] body .industrial-detail-shell .industrial-product-summary .industrial-card-meta > span:not(.industrial-status-chip) {
  border-color: color-mix(in srgb, var(--product-detail-blue) 34%, var(--line-color)) !important;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--product-detail-blue) 12%, transparent), transparent 64%),
    color-mix(in srgb, var(--surface-muted) 88%, transparent) !important;
  color: color-mix(in srgb, var(--product-detail-blue) 72%, var(--product-detail-ink)) !important;
}

html[data-theme] body .industrial-detail-shell .industrial-status-chip,
html[data-theme] body .industrial-detail-shell .industrial-badge-row span,
html[data-theme] body .industrial-detail-shell .industrial-side-price-panel em {
  border-color: color-mix(in srgb, var(--product-detail-sage) 30%, var(--line-color)) !important;
  background: color-mix(in srgb, var(--product-detail-sage) 9%, var(--surface-muted)) !important;
  color: color-mix(in srgb, var(--product-detail-sage) 66%, var(--product-detail-ink)) !important;
}

html[data-theme] body .industrial-detail-shell .industrial-en-name,
html[data-theme] body .industrial-detail-shell .industrial-fact-grid dt,
html[data-theme] body .industrial-detail-shell .industrial-price-panel span,
html[data-theme] body .industrial-detail-shell .industrial-price-panel small,
html[data-theme] body .industrial-detail-shell .industrial-side-price-panel span,
html[data-theme] body .industrial-detail-shell .industrial-side-price-panel small,
html[data-theme] body .industrial-detail-shell .industrial-seller-head,
html[data-theme] body .industrial-detail-shell .industrial-similar-list-head {
  color: var(--product-detail-label) !important;
}

html[data-theme] body .industrial-detail-shell .industrial-fact-grid dd,
html[data-theme] body .industrial-detail-shell .industrial-spec-table strong,
html[data-theme] body .industrial-detail-shell .industrial-doc-grid strong,
html[data-theme] body .industrial-detail-shell .industrial-variant-list strong,
html[data-theme] body .industrial-detail-shell .industrial-seller-row strong,
html[data-theme] body .industrial-detail-shell .industrial-review-copy strong,
html[data-theme] body .industrial-detail-shell .industrial-review-item strong,
html[data-theme] body .industrial-detail-shell .industrial-review-form-shell h3,
html[data-theme] body .industrial-detail-shell .industrial-review-form legend,
html[data-theme] body .industrial-detail-shell .industrial-review-form label span,
html[data-theme] body .industrial-detail-shell .industrial-section-head h2,
html[data-theme] body .industrial-detail-shell .industrial-two-col h3 {
  color: var(--product-detail-ink) !important;
}

html[data-theme] body .industrial-detail-shell .industrial-price-panel strong,
html[data-theme] body .industrial-detail-shell .industrial-side-price-panel strong,
html[data-theme] body .industrial-detail-shell .industrial-similar-price strong,
html[data-theme] body .industrial-detail-shell .industrial-review-score strong,
html[data-theme] body .industrial-detail-shell .industrial-rating-summary strong,
html[data-theme] body .industrial-detail-shell .industrial-review-item > div span,
html[data-theme] body .industrial-detail-shell .industrial-stars .is-filled {
  color: var(--product-detail-amber) !important;
}

html[data-theme] body .industrial-detail-shell .industrial-rating-summary a,
html[data-theme] body .industrial-detail-shell .industrial-seller-row a,
html[data-theme] body .industrial-detail-shell .industrial-similar-action span {
  color: color-mix(in srgb, var(--product-detail-blue) 70%, var(--product-detail-ink)) !important;
}

html[data-theme] body .industrial-detail-shell .industrial-section p,
html[data-theme] body .industrial-detail-shell .industrial-section li,
html[data-theme] body .industrial-detail-shell .industrial-review-copy p,
html[data-theme] body .industrial-detail-shell .industrial-review-state,
html[data-theme] body .industrial-detail-shell .industrial-review-item p,
html[data-theme] body .industrial-detail-shell .industrial-empty,
html[data-theme] body .industrial-detail-shell .industrial-similar-product small,
html[data-theme] body .industrial-detail-shell .industrial-similar-evidence em,
html[data-theme] body .industrial-detail-shell .industrial-variant-list span,
html[data-theme] body .industrial-detail-shell .industrial-variant-list small {
  color: var(--product-detail-body) !important;
}

html[data-theme] body .industrial-detail-shell .industrial-spec-table span,
html[data-theme] body .industrial-detail-shell .industrial-doc-grid span,
html[data-theme] body .industrial-detail-shell .industrial-side-price-panel em {
  color: var(--product-detail-muted) !important;
}

html[data-theme] body .industrial-detail-shell :is(
  #intro,
  #specs,
  #installation,
  #documents,
  #sellers,
  #reviews,
  #similar-products,
  #rfq
).industrial-section {
  --product-detail-section-accent: var(--product-detail-blue);
  border-color: color-mix(in srgb, var(--product-detail-section-accent) 16%, var(--line-color)) !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--product-detail-section-accent) 5%, transparent), transparent 46%),
    color-mix(in srgb, var(--panel-bg-strong) 94%, transparent) !important;
}

html[data-theme] body .industrial-detail-shell #specs.industrial-section {
  --product-detail-section-accent: var(--product-detail-sage);
}

html[data-theme] body .industrial-detail-shell #installation.industrial-section,
html[data-theme] body .industrial-detail-shell #sellers.industrial-section {
  --product-detail-section-accent: var(--product-detail-amber);
}

html[data-theme] body .industrial-detail-shell #documents.industrial-section {
  --product-detail-section-accent: var(--product-detail-violet);
}

html[data-theme] body .industrial-detail-shell #reviews.industrial-section {
  --product-detail-section-accent: var(--product-detail-rose);
}

html[data-theme] body .industrial-detail-shell #similar-products.industrial-section {
  --product-detail-section-accent: var(--product-detail-blue);
}

html[data-theme] body .industrial-detail-shell #rfq.industrial-section {
  --product-detail-section-accent: var(--product-detail-sage);
}

html[data-theme] body .industrial-detail-shell .industrial-section-head {
  border-bottom-color: color-mix(in srgb, var(--product-detail-section-accent, var(--product-detail-blue)) 14%, var(--line-color)) !important;
}

html[data-theme] body .industrial-detail-shell .industrial-section-head h2,
html[data-theme] body .industrial-detail-shell .industrial-two-col h3,
html[data-theme] body .industrial-detail-shell .industrial-variant-panel-head span,
html[data-theme] body .industrial-detail-shell .industrial-review-copy strong {
  color: color-mix(in srgb, var(--product-detail-section-accent, var(--product-detail-blue)) 18%, var(--product-detail-ink)) !important;
}

html[data-theme] body .industrial-detail-shell :is(
  #intro,
  #specs,
  #installation,
  #documents,
  #sellers,
  #reviews,
  #similar-products,
  #rfq
) :is(
  .industrial-section-head h2,
  .industrial-two-col h3,
  .industrial-variant-panel-head span,
  .industrial-review-copy strong
) {
  color: color-mix(in srgb, var(--product-detail-section-accent, var(--product-detail-blue)) 18%, var(--product-detail-ink)) !important;
}

html[data-theme] body .industrial-detail-shell .industrial-section-head span {
  border-color: color-mix(in srgb, var(--product-tab-color, var(--product-detail-blue)) 24%, var(--line-color)) !important;
  background: color-mix(in srgb, var(--product-tab-color, var(--product-detail-blue)) 8%, transparent) !important;
  color: color-mix(in srgb, var(--product-tab-color, var(--product-detail-blue)) 64%, var(--product-detail-ink)) !important;
}

html[data-theme] body .industrial-detail-shell .industrial-tabs a:hover,
html[data-theme] body .industrial-detail-shell .industrial-tabs a:focus-visible,
html[data-theme] body .industrial-detail-shell .industrial-tabs a.is-active {
  color: color-mix(in srgb, var(--product-tab-color, var(--product-detail-blue)) 42%, var(--product-detail-ink)) !important;
}

html[data-theme] body .industrial-detail-shell .industrial-tabs a::before {
  background: color-mix(in srgb, var(--product-tab-color, var(--product-detail-blue)) 72%, var(--product-detail-ink)) !important;
}

:root[data-theme="light"] body .industrial-detail-shell .industrial-detail-hero,
:root[data-theme="light"] body .industrial-detail-shell :is(
  #intro,
  #specs,
  #installation,
  #documents,
  #sellers,
  #reviews,
  #similar-products,
  #rfq
).industrial-section {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--product-detail-section-accent, var(--product-detail-blue)) 4%, transparent), transparent 48%),
    #ffffff !important;
}

/* Brand index card polish. */
html[data-theme] body .brand-index-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 34rem)) !important;
  justify-content: start;
  align-items: stretch;
  gap: 0.9rem !important;
}

html[data-theme] body .brand-index-card {
  position: relative;
  overflow: hidden;
  grid-template-columns: minmax(8.4rem, 10rem) minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 0.9rem !important;
  min-height: 8.2rem;
  padding: 0.9rem !important;
  border-color: color-mix(in srgb, var(--brand-500) 22%, var(--line-color)) !important;
  border-radius: 0.92rem !important;
  background:
    linear-gradient(135deg, color-mix(in srgb, #38bdf8 8%, transparent), transparent 44%),
    linear-gradient(225deg, color-mix(in srgb, #c4a061 10%, transparent), transparent 42%),
    color-mix(in srgb, var(--surface-2) 88%, transparent) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.2), inset 0 1px rgba(255, 255, 255, 0.035) !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

html[data-theme] body .brand-index-card:hover,
html[data-theme] body .brand-index-card:focus-within {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, #78b7d8 42%, var(--line-color)) !important;
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.26), 0 0 0 1px color-mix(in srgb, #78b7d8 18%, transparent) !important;
}

html[data-theme] body .brand-index-logo {
  position: relative;
  width: 100% !important;
  height: 6rem;
  min-height: 6rem !important;
  padding: 0.42rem;
  border-color: color-mix(in srgb, #7fb3d5 38%, var(--line-color)) !important;
  border-radius: 0.82rem !important;
  background:
    radial-gradient(circle at 34% 24%, color-mix(in srgb, #d8be7a 23%, transparent), transparent 35%),
    linear-gradient(160deg, color-mix(in srgb, #123150 70%, var(--surface-3)), color-mix(in srgb, #0f2d34 76%, var(--surface-2))) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.08), inset 0 -18px 28px rgba(0, 0, 0, 0.2);
}

html[data-theme] body .brand-index-logo-media {
  display: grid;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-height: 0;
  place-items: center;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, #dbeafe 58%, rgba(15, 23, 42, 0.16));
  border-radius: 0.62rem;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(232, 238, 246, 0.94)),
    #f8fafc;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.96),
    inset 0 -12px 24px rgba(15, 23, 42, 0.06),
    0 12px 24px rgba(0, 0, 0, 0.16);
}

html[data-theme] body .brand-index-logo img {
  display: block;
  box-sizing: border-box;
  width: 100% !important;
  height: 100% !important;
  min-width: 0;
  min-height: 0;
  max-width: 100% !important;
  max-height: 100% !important;
  align-self: stretch;
  justify-self: stretch;
  object-fit: contain;
  object-position: center;
  padding: 0.42rem !important;
  filter: drop-shadow(0 1px 1px rgba(15, 23, 42, 0.2));
  transform: none !important;
}

html[data-theme] body .brand-index-logo-fallback {
  display: inline-grid;
  place-items: center;
  width: 3.15rem;
  height: 3.15rem;
  border: 1px solid color-mix(in srgb, #9fc6df 22%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-3) 58%, transparent);
  color: color-mix(in srgb, #f8fafc 92%, #d8be7a);
  font-size: 1.42rem !important;
  line-height: 1;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
}

html[data-theme] body .brand-index-card-body {
  display: grid !important;
  align-content: center !important;
  gap: 0.72rem !important;
}

html[data-theme] body .brand-index-card-head {
  display: grid !important;
  gap: 0.35rem !important;
}

html[data-theme] body .brand-index-title-group {
  display: grid;
  gap: 0.22rem;
  min-width: 0;
}

html[data-theme] body .brand-index-card-head h2 {
  margin: 0 !important;
  color: color-mix(in srgb, #e8eef7 86%, #9fc6df) !important;
  font-size: 0.96rem !important;
  font-weight: 900 !important;
  line-height: 1.55 !important;
  letter-spacing: 0 !important;
  text-align: start;
  unicode-bidi: plaintext;
}

html[data-theme] body .brand-index-card-head h2 a {
  color: inherit;
  text-decoration: none;
}

html[data-theme] body .brand-index-card-head p {
  margin: 0 !important;
  color: color-mix(in srgb, #b5c0cf 82%, #d8be7a) !important;
  font-size: 0.78rem !important;
  font-weight: 760 !important;
  line-height: 1.65 !important;
  text-align: start;
  unicode-bidi: plaintext;
}

html[data-theme] body .brand-index-country,
html[data-theme] body .brand-index-product-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  min-height: 1.75rem;
  padding: 0.22rem 0.62rem;
  border: 1px solid color-mix(in srgb, #9fc6df 23%, var(--line-color));
  border-radius: 999px;
  background: color-mix(in srgb, #18334a 46%, transparent);
  color: color-mix(in srgb, #cbd5e1 88%, #9fc6df);
  font-size: 0.72rem;
  font-weight: 820;
  line-height: 1.35;
  white-space: nowrap;
}

html[data-theme] body .brand-index-product-count {
  border-color: color-mix(in srgb, #6fb8a8 35%, var(--line-color));
  background: color-mix(in srgb, #0f3a36 40%, transparent);
  color: color-mix(in srgb, #cbd5e1 78%, #7ac7b6);
}

html[data-theme] body .brand-index-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.58rem;
  min-width: 0;
}

html[data-theme] body .brand-index-card-foot .industrial-btn {
  width: auto !important;
  min-width: 6.8rem;
  min-height: 2.32rem;
  padding: 0.5rem 0.85rem !important;
  border-color: color-mix(in srgb, #6ea9d1 40%, var(--line-color)) !important;
  border-radius: 0.68rem !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, #276a9b 50%, transparent), color-mix(in srgb, #17324d 72%, transparent)) !important;
  color: #eef5fb !important;
  font-size: 0.78rem !important;
  line-height: 1.35 !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.08), 0 10px 24px rgba(0, 0, 0, 0.18) !important;
}

:root[data-theme="light"] body .brand-index-card {
  border-color: #cbd8e6 !important;
  background:
    linear-gradient(135deg, rgba(42, 123, 172, 0.08), transparent 46%),
    linear-gradient(225deg, rgba(164, 129, 64, 0.1), transparent 42%),
    #ffffff !important;
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.08), inset 0 1px rgba(255, 255, 255, 0.9) !important;
}

:root[data-theme="light"] body .brand-index-card-head h2 {
  color: #243447 !important;
}

:root[data-theme="light"] body .brand-index-card-head p {
  color: #687385 !important;
}

:root[data-theme="light"] body .brand-index-country {
  border-color: #d9c99f;
  background: #fff8e8;
  color: #72592a;
}

:root[data-theme="light"] body .brand-index-product-count {
  border-color: #b8d8d0;
  background: #edf8f5;
  color: #2d6b62;
}

:root[data-theme="light"] body .brand-index-logo {
  border-color: #bfd4e5 !important;
  background:
    radial-gradient(circle at 34% 24%, rgba(164, 129, 64, 0.17), transparent 35%),
    linear-gradient(160deg, #f7fbff, #eaf4f6) !important;
}

:root[data-theme="light"] body .brand-index-logo-media {
  border-color: #d6e4ef;
  background:
    linear-gradient(145deg, #ffffff, #eef5f8),
    #ffffff;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.94),
    inset 0 -12px 24px rgba(15, 23, 42, 0.05),
    0 10px 22px rgba(15, 23, 42, 0.08);
}

:root[data-theme="light"] body .brand-index-logo-fallback {
  border-color: #bdd3e3;
  background: #ffffff;
  color: #315f80;
}

@media (max-width: 560px) {
  html[data-theme] body .brand-index-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html[data-theme] body .brand-index-card {
    grid-template-columns: minmax(6.25rem, 7.1rem) minmax(0, 1fr) !important;
    gap: 0.75rem !important;
    min-height: 0;
    padding: 0.78rem !important;
  }

  html[data-theme] body .brand-index-logo {
    width: 100% !important;
    height: 5.2rem;
    min-height: 5.2rem !important;
  }

  html[data-theme] body .brand-index-card-foot {
    align-items: stretch;
    flex-direction: column;
  }

  html[data-theme] body .brand-index-card-foot .industrial-btn {
    width: 100% !important;
  }
}

/* Header workboard access: dedicated calm color, same counter and anchored-modal pattern. */
html[data-theme] body {
  --ui-action-workboard: #6877c8;
}

:root[data-theme="light"] body {
  --ui-action-workboard: #4968ad;
}

html[data-theme] body .header-stable-actions #site-workboard-button.header-icon-workboard {
  --header-action-color: var(--ui-action-workboard);
  display: inline-grid !important;
  place-items: center !important;
}

html[data-theme] body .header-stable-actions #site-workboard-button.header-icon-workboard .header-chip-icon {
  fill: currentColor !important;
  stroke: none !important;
}

html[data-theme] body .header-stable-actions #site-workboard-button.header-icon-workboard > .badge-count.badge-count-workboard {
  color: #ffffff !important;
  border-color: color-mix(in srgb, #ffffff 88%, transparent) !important;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--ui-action-workboard) 86%, #ffffff),
      color-mix(in srgb, var(--ui-action-workboard) 88%, #111827)
    ) !important;
  box-shadow: var(--ui-shadow-control-badge) !important;
}

html[data-theme] body .header-stable-actions #site-workboard-button.header-icon-workboard-active > .badge-count.badge-count-workboard {
  border-color: color-mix(in srgb, #ffffff 92%, transparent) !important;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--ui-action-workboard) 92%, #ffffff),
      color-mix(in srgb, var(--ui-action-workboard) 92%, #111827)
    ) !important;
}

.workboard-center-anchored-dialog {
  --ui-modal-max-width: min(34rem, calc(100vw - (var(--space-4) * 2))) !important;
}

.workboard-center-anchored-dialog .ui-modal-card {
  border-radius: var(--radius-lg) !important;
}

.workboard-center-anchored-dialog .ui-modal-body {
  padding: 0;
  overflow: hidden;
}

.workboard-center-shell {
  display: grid;
  gap: .72rem;
  padding: .85rem;
}

.workboard-center-quick-stats span {
  border-color: color-mix(in srgb, var(--ui-action-workboard) 20%, var(--line-color));
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--ui-action-workboard) 7%, transparent), transparent 56%),
    color-mix(in srgb, var(--surface-2) 90%, transparent);
}

.workboard-center-list {
  display: grid;
  gap: .55rem;
  max-height: min(42vh, 22rem);
  overflow: auto;
  padding-inline-end: .1rem;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.workboard-center-list::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.workboard-center-item,
.workboard-center-more {
  display: grid;
  gap: .52rem;
  padding: .72rem .78rem;
  border: 1px solid color-mix(in srgb, var(--line-color) 88%, transparent);
  border-radius: var(--radius-md);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--ui-action-workboard) 5%, transparent), transparent 54%),
    color-mix(in srgb, var(--surface-2) 92%, transparent);
  color: var(--text-primary);
  text-decoration: none;
  transition:
    border-color var(--motion-fast) var(--ease-standard),
    background-color var(--motion-fast) var(--ease-standard),
    transform var(--motion-fast) var(--ease-standard);
}

.workboard-center-item:hover,
.workboard-center-item:focus-visible,
.workboard-center-more:hover,
.workboard-center-more:focus-visible {
  border-color: color-mix(in srgb, var(--ui-action-workboard) 34%, var(--line-color));
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--ui-action-workboard) 8%, transparent), transparent 54%),
    color-mix(in srgb, var(--surface-2) 96%, transparent);
  transform: translateY(-1px);
}

.workboard-center-item-copy {
  display: grid;
  gap: .18rem;
  min-width: 0;
}

.workboard-center-item-copy strong {
  overflow: hidden;
  color: var(--text-primary);
  font-size: .86rem;
  line-height: 1.55;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workboard-center-item-copy small {
  overflow: hidden;
  color: var(--text-soft);
  font-size: .72rem;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workboard-center-item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .36rem;
  align-items: center;
  color: var(--text-muted);
  font-size: .72rem;
  font-weight: 800;
}

.workboard-center-pill,
.workboard-center-item-meta time {
  display: inline-flex;
  align-items: center;
  min-height: 1.55rem;
  padding: .2rem .48rem;
  border: 1px solid color-mix(in srgb, var(--line-color) 88%, transparent);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--surface-3) 78%, transparent);
  color: var(--text-muted);
  line-height: 1.3;
}

.workboard-center-pill-priority {
  border-color: color-mix(in srgb, var(--ui-action-workboard) 22%, var(--line-color));
  color: color-mix(in srgb, var(--ui-action-workboard) 80%, var(--text-primary));
}

.workboard-center-priority-high,
.workboard-center-priority-urgent {
  border-color: color-mix(in srgb, var(--warning) 36%, var(--line-color));
  background: color-mix(in srgb, var(--warning) 9%, var(--surface-3));
  color: color-mix(in srgb, var(--warning) 82%, var(--text-primary));
}

.workboard-center-more {
  justify-content: center;
  color: color-mix(in srgb, var(--ui-action-workboard) 82%, var(--text-primary));
  font-size: .78rem;
  font-weight: 900;
  text-align: center;
}

@media (max-width: 560px) {
  .workboard-center-shell {
    padding: .72rem;
  }

  .workboard-center-item-copy strong {
    white-space: normal;
  }

  .workboard-center-item-meta {
    gap: .3rem;
  }
}

/* Header comfort: keep the search action inside the input without collapsing nav. */
@media (min-width: 64rem) {
  html[data-theme] body .site-header-shell[data-site-header] {
    min-height: 0 !important;
    padding-block: .95rem !important;
    padding-inline: 1.2rem !important;
  }

  html[data-theme] body .header-stable-top {
    display: grid !important;
    direction: ltr;
    grid-template-columns:
      minmax(0, 1fr)
      minmax(22rem, 34rem)
      minmax(0, 1fr);
    grid-template-areas:
      "actions search brand"
      "nav nav nav";
    align-items: center !important;
    column-gap: 1.35rem !important;
    row-gap: .62rem !important;
    min-height: 0 !important;
  }

  html[data-theme] body .header-brand-group,
  html[data-theme] body .header-search-row,
  html[data-theme] body .header-stable-actions,
  html[data-theme] body .header-desktop-nav {
    direction: rtl;
  }

  html[data-theme] body .header-brand-group {
    grid-area: brand;
    align-items: center !important;
    justify-self: end;
    width: 100%;
    min-width: 0;
  }

  html[data-theme] body .header-brand-group .brand-lockup {
    justify-content: flex-start;
  }

  html[data-theme] body .header-desktop-nav {
    grid-area: nav;
    display: flex !important;
    width: 100%;
    align-items: center !important;
    justify-content: flex-start;
    justify-self: stretch;
    min-width: 0;
    max-width: 100%;
    gap: .35rem !important;
    overflow: visible;
    white-space: normal;
    padding-top: .12rem;
  }

  html[data-theme] body .header-search-row {
    grid-area: search;
    order: 0 !important;
    width: min(100%, 34rem) !important;
    min-width: 0 !important;
    max-width: 34rem !important;
    margin: 0 auto !important;
    justify-self: center;
    align-self: center;
  }

  html[data-theme] body .header-search-form {
    position: relative !important;
  }

  html[data-theme] body .header-search-form .search-input {
    height: 46px !important;
    min-height: 46px !important;
  }

  html[dir="rtl"][data-theme] body .header-search-form .search-input {
    padding-left: 2.95rem !important;
    padding-right: .95rem !important;
  }

  html[dir="ltr"][data-theme] body .header-search-form .search-input {
    padding-right: 2.95rem !important;
    padding-left: .95rem !important;
  }

  html[data-theme] body .header-search-form .header-search-submit {
    --button-icon-accent: #38bdf8;
    position: absolute !important;
    top: 50% !important;
    width: 2.25rem !important;
    height: 2.25rem !important;
    min-width: 2.25rem !important;
    min-height: 2.25rem !important;
    border: 0 !important;
    background:
      radial-gradient(circle at 32% 18%, color-mix(in srgb, var(--button-icon-accent) 18%, #ffffff 6%), transparent 40%),
      linear-gradient(
        145deg,
        color-mix(in srgb, var(--button-icon-accent) 12%, var(--surface-2)),
        color-mix(in srgb, var(--button-icon-accent) 4%, var(--surface-2))
      ) !important;
    color: color-mix(in srgb, var(--button-icon-accent) 82%, #ffffff 18%) !important;
    box-shadow: none !important;
    margin: 0 !important;
    transform: translateY(-50%) !important;
    z-index: 2;
  }

  html[data-theme] body .header-search-form .header-search-submit:hover,
  html[data-theme] body .header-search-form .header-search-submit:focus-visible {
    border-color: transparent !important;
    background:
      radial-gradient(circle at 30% 18%, color-mix(in srgb, #ffffff 16%, var(--button-icon-accent) 54%), transparent 42%),
      linear-gradient(
        145deg,
        color-mix(in srgb, var(--button-icon-accent) 34%, var(--surface-2)),
        color-mix(in srgb, var(--button-icon-accent) 16%, var(--surface-2))
      ) !important;
    color: #f8fafc !important;
    box-shadow: 0 4px 10px color-mix(in srgb, var(--button-icon-accent) 10%, transparent) !important;
  }

  html[dir="rtl"][data-theme] body .header-search-form .header-search-submit {
    left: .55rem !important;
    right: auto !important;
  }

  html[dir="ltr"][data-theme] body .header-search-form .header-search-submit {
    right: .55rem !important;
    left: auto !important;
  }

  html[data-theme] body .header-stable-actions {
    grid-area: actions;
    justify-self: start;
    justify-content: start;
    gap: .34rem !important;
    min-width: 0;
  }
}

@media (min-width: 64rem) and (max-width: 78rem) {
  html[data-theme] body .header-stable-top {
    grid-template-columns: minmax(0, auto) minmax(16rem, 1fr) minmax(0, auto);
    grid-template-areas:
      "actions search brand"
      "nav nav nav";
    column-gap: .8rem !important;
    row-gap: .58rem !important;
  }

  html[data-theme] body .header-desktop-nav {
    justify-content: flex-start;
  }

  html[data-theme] body .header-search-row {
    width: min(100%, 30rem) !important;
    max-width: 30rem !important;
  }
}

@media (min-width: 90rem) {
  html[data-theme] body .header-stable-top {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(24rem, 36rem)
      minmax(0, 1fr);
  }

  html[data-theme] body .header-search-row {
    width: min(100%, 36rem) !important;
    max-width: 36rem !important;
  }
}

/* 2026-05-29 theme toggle glyph and glow lock */
html[data-theme] body .header-theme-toggle.header-icon-chip,
html[data-theme] body .header-stable-actions .header-theme-toggle.header-icon-chip {
  --header-action-color: #9fb7d4;
  position: relative !important;
  overflow: visible !important;
  color: #d9e7ff !important;
  border-color: color-mix(in srgb, #a9c9ff 34%, var(--line-color)) !important;
  background:
    radial-gradient(circle at 32% 22%, rgba(230, 240, 255, 0.22), transparent 40%),
    radial-gradient(circle at 58% 62%, rgba(96, 165, 250, 0.12), transparent 58%),
    linear-gradient(180deg, rgba(217, 231, 255, 0.1), rgba(217, 231, 255, 0.03)),
    color-mix(in srgb, var(--surface-2) 94%, transparent) !important;
  box-shadow:
    0 0 0 1px rgba(169, 201, 255, 0.1),
    0 0 18px rgba(170, 205, 255, 0.2),
    0 9px 18px rgba(0, 0, 0, 0.12),
    inset 0 1px rgba(245, 249, 255, 0.16),
    inset 0 -10px 18px rgba(40, 65, 105, 0.18) !important;
}

:root[data-theme="light"] body .header-theme-toggle.header-icon-chip,
:root[data-theme="light"] body .header-stable-actions .header-theme-toggle.header-icon-chip {
  --header-action-color: #f59e0b;
  color: #d97706 !important;
  border-color: rgba(245, 158, 11, 0.36) !important;
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 244, 194, 0.95), transparent 38%),
    radial-gradient(circle at 62% 68%, rgba(251, 191, 36, 0.2), transparent 58%),
    linear-gradient(180deg, rgba(255, 253, 245, 0.98), rgba(255, 240, 196, 0.86)) !important;
  box-shadow:
    0 0 0 1px rgba(245, 158, 11, 0.08),
    0 0 20px rgba(245, 158, 11, 0.2),
    0 8px 18px rgba(146, 64, 14, 0.1),
    inset 0 1px rgba(255, 255, 255, 0.96),
    inset 0 -10px 18px rgba(251, 191, 36, 0.2) !important;
}

html[data-theme] body .header-theme-toggle.header-icon-chip .header-theme-glyph,
html[data-theme] body .header-stable-actions .header-theme-toggle.header-icon-chip .header-theme-glyph {
  position: absolute !important;
  inset: 50% auto auto 50% !important;
  width: var(--ui-icon-compact-glyph) !important;
  min-width: var(--ui-icon-compact-glyph) !important;
  max-width: var(--ui-icon-compact-glyph) !important;
  height: var(--ui-icon-compact-glyph) !important;
  min-height: var(--ui-icon-compact-glyph) !important;
  max-height: var(--ui-icon-compact-glyph) !important;
  fill: currentColor !important;
  stroke: none !important;
  pointer-events: none !important;
  transform-origin: center !important;
  transition: opacity .2s ease, transform .22s ease, filter .22s ease, color .22s ease !important;
}

html[data-theme] body .header-theme-toggle.header-icon-chip .header-theme-glyph-moon,
html[data-theme] body .header-stable-actions .header-theme-toggle.header-icon-chip .header-theme-glyph-moon {
  opacity: 1 !important;
  transform: translate(-50%, -50%) scale(1) !important;
  filter:
    drop-shadow(0 0 7px rgba(218, 232, 255, 0.34))
    drop-shadow(0 0 14px rgba(96, 165, 250, 0.2)) !important;
}

html[data-theme] body .header-theme-toggle.header-icon-chip .header-theme-glyph-sun,
html[data-theme] body .header-stable-actions .header-theme-toggle.header-icon-chip .header-theme-glyph-sun {
  opacity: 0 !important;
  transform: translate(-50%, -50%) scale(.64) rotate(18deg) !important;
  filter: none !important;
}

html[data-theme="dark"] body .header-theme-toggle.header-icon-chip:not([data-theme-state]) .header-theme-glyph-moon,
html[data-theme="dark"] body .header-stable-actions .header-theme-toggle.header-icon-chip:not([data-theme-state]) .header-theme-glyph-moon {
  opacity: 0 !important;
  transform: translate(-50%, -50%) scale(.68) rotate(-12deg) !important;
}

html[data-theme="dark"] body .header-theme-toggle.header-icon-chip:not([data-theme-state]) .header-theme-glyph-sun,
html[data-theme="dark"] body .header-stable-actions .header-theme-toggle.header-icon-chip:not([data-theme-state]) .header-theme-glyph-sun {
  opacity: 1 !important;
  transform: translate(-50%, -50%) scale(1) rotate(0deg) !important;
  filter:
    drop-shadow(0 0 8px rgba(255, 214, 102, 0.46))
    drop-shadow(0 0 16px rgba(245, 158, 11, 0.24)) !important;
}

html[data-theme] body .header-theme-toggle.header-icon-chip[data-theme-state="light"] .header-theme-glyph-moon,
html[data-theme] body .header-stable-actions .header-theme-toggle.header-icon-chip[data-theme-state="light"] .header-theme-glyph-moon {
  opacity: 0 !important;
  transform: translate(-50%, -50%) scale(.68) rotate(-12deg) !important;
}

html[data-theme] body .header-theme-toggle.header-icon-chip[data-theme-state="light"] .header-theme-glyph-sun,
html[data-theme] body .header-stable-actions .header-theme-toggle.header-icon-chip[data-theme-state="light"] .header-theme-glyph-sun {
  opacity: 1 !important;
  transform: translate(-50%, -50%) scale(1) rotate(0deg) !important;
  filter:
    drop-shadow(0 0 4px rgba(255, 214, 102, 0.22))
    drop-shadow(0 0 8px rgba(245, 158, 11, 0.1)) !important;
}

html[data-theme] body .drawer-theme-orb {
  color: #d9e7ff !important;
  background:
    radial-gradient(circle at 32% 24%, rgba(230, 240, 255, 0.24), transparent 36%),
    radial-gradient(circle at 62% 66%, rgba(96, 165, 250, 0.12), transparent 58%),
    linear-gradient(160deg, rgba(28, 44, 76, 0.96), rgba(10, 17, 31, 0.98)) !important;
  box-shadow:
    inset 0 1px rgba(245, 249, 255, 0.14),
    inset 0 -12px 18px rgba(20, 34, 62, 0.24),
    0 0 20px rgba(170, 205, 255, 0.18),
    0 12px 26px rgba(0, 0, 0, 0.22) !important;
}

html[data-theme] body .drawer-theme-glyph-moon {
  filter:
    drop-shadow(0 0 8px rgba(218, 232, 255, 0.34))
    drop-shadow(0 0 16px rgba(96, 165, 250, 0.2)) !important;
}

html[data-theme="dark"] body .drawer-theme-spotlight:not([data-theme-state]) .drawer-theme-orb,
html[data-theme] body .drawer-theme-spotlight[data-theme-state="light"] .drawer-theme-orb {
  color: #d97706 !important;
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 244, 194, 0.98), transparent 36%),
    radial-gradient(circle at 62% 68%, rgba(251, 191, 36, 0.24), transparent 58%),
    linear-gradient(160deg, rgba(255, 253, 245, 0.98), rgba(255, 229, 166, 0.94)) !important;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.98),
    inset 0 -12px 18px rgba(245, 158, 11, 0.22),
    0 0 20px rgba(245, 158, 11, 0.22),
    0 12px 26px rgba(146, 64, 14, 0.12) !important;
}

html[data-theme="dark"] body .drawer-theme-spotlight:not([data-theme-state]) .drawer-theme-glyph-sun,
html[data-theme] body .drawer-theme-spotlight[data-theme-state="light"] .drawer-theme-glyph-sun {
  opacity: 1 !important;
  transform: scale(1) !important;
  filter:
    drop-shadow(0 0 8px rgba(255, 214, 102, 0.46))
    drop-shadow(0 0 16px rgba(245, 158, 11, 0.24)) !important;
}

html[data-theme="dark"] body .drawer-theme-spotlight:not([data-theme-state]) .drawer-theme-glyph-moon {
  opacity: 0 !important;
  transform: scale(0.62) translateY(-0.3rem) !important;
}

html[data-theme] body #site-theme-toggle.header-theme-toggle.header-icon-chip,
html[data-theme] body #site-theme-toggle-legacy.header-theme-toggle.header-icon-chip {
  --header-action-color: #9fb7d4;
  color: #d9e7ff !important;
  border-color: color-mix(in srgb, #a9c9ff 34%, var(--line-color)) !important;
  background:
    radial-gradient(circle at 32% 22%, rgba(230, 240, 255, 0.22), transparent 40%),
    radial-gradient(circle at 58% 62%, rgba(96, 165, 250, 0.12), transparent 58%),
    linear-gradient(180deg, rgba(217, 231, 255, 0.1), rgba(217, 231, 255, 0.03)),
    color-mix(in srgb, var(--surface-2) 94%, transparent) !important;
  box-shadow:
    0 0 0 1px rgba(169, 201, 255, 0.1),
    0 0 18px rgba(170, 205, 255, 0.2),
    0 9px 18px rgba(0, 0, 0, 0.12),
    inset 0 1px rgba(245, 249, 255, 0.16),
    inset 0 -10px 18px rgba(40, 65, 105, 0.18) !important;
}

:root[data-theme="light"] body #site-theme-toggle.header-theme-toggle.header-icon-chip,
:root[data-theme="light"] body #site-theme-toggle-legacy.header-theme-toggle.header-icon-chip {
  --header-action-color: #f59e0b;
  color: #d97706 !important;
  border-color: rgba(245, 158, 11, 0.36) !important;
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 244, 194, 0.95), transparent 38%),
    radial-gradient(circle at 62% 68%, rgba(251, 191, 36, 0.2), transparent 58%),
    linear-gradient(180deg, rgba(255, 253, 245, 0.98), rgba(255, 240, 196, 0.86)) !important;
  box-shadow:
    0 0 0 1px rgba(245, 158, 11, 0.08),
    0 0 20px rgba(245, 158, 11, 0.2),
    0 8px 18px rgba(146, 64, 14, 0.1),
    inset 0 1px rgba(255, 255, 255, 0.96),
    inset 0 -10px 18px rgba(251, 191, 36, 0.2) !important;
}

html[data-theme] body #site-theme-toggle .header-theme-glyph-moon,
html[data-theme] body #site-theme-toggle-legacy .header-theme-glyph-moon {
  opacity: 1 !important;
  transform: translate(-50%, -50%) scale(1) !important;
  filter:
    drop-shadow(0 0 7px rgba(218, 232, 255, 0.34))
    drop-shadow(0 0 14px rgba(96, 165, 250, 0.2)) !important;
}

html[data-theme] body #site-theme-toggle .header-theme-glyph-sun,
html[data-theme] body #site-theme-toggle-legacy .header-theme-glyph-sun {
  opacity: 0 !important;
  transform: translate(-50%, -50%) scale(.64) rotate(18deg) !important;
}

html[data-theme="dark"] body #site-theme-toggle:not([data-theme-state]) .header-theme-glyph-moon,
html[data-theme="dark"] body #site-theme-toggle-legacy:not([data-theme-state]) .header-theme-glyph-moon {
  opacity: 0 !important;
  transform: translate(-50%, -50%) scale(.68) rotate(-12deg) !important;
}

html[data-theme="dark"] body #site-theme-toggle:not([data-theme-state]) .header-theme-glyph-sun,
html[data-theme="dark"] body #site-theme-toggle-legacy:not([data-theme-state]) .header-theme-glyph-sun {
  opacity: 1 !important;
  transform: translate(-50%, -50%) scale(1) rotate(0deg) !important;
  filter:
    drop-shadow(0 0 8px rgba(255, 214, 102, 0.46))
    drop-shadow(0 0 16px rgba(245, 158, 11, 0.24)) !important;
}

html[data-theme] body #site-theme-toggle[data-theme-state="light"] .header-theme-glyph-moon,
html[data-theme] body #site-theme-toggle-legacy[data-theme-state="light"] .header-theme-glyph-moon {
  opacity: 0 !important;
  transform: translate(-50%, -50%) scale(.68) rotate(-12deg) !important;
}

html[data-theme] body #site-theme-toggle[data-theme-state="light"] .header-theme-glyph-sun,
html[data-theme] body #site-theme-toggle-legacy[data-theme-state="light"] .header-theme-glyph-sun {
  opacity: 1 !important;
  transform: translate(-50%, -50%) scale(1) rotate(0deg) !important;
  filter:
    drop-shadow(0 0 4px rgba(255, 214, 102, 0.22))
    drop-shadow(0 0 8px rgba(245, 158, 11, 0.1)) !important;
}

/* 2026-05-30 theme toggle glow follows the target theme. */
html[data-theme] body .header-theme-toggle.header-icon-chip[data-theme-state="light"],
html[data-theme="dark"] body .header-theme-toggle.header-icon-chip:not([data-theme-state]),
html[data-theme] body .header-stable-actions .header-theme-toggle.header-icon-chip[data-theme-state="light"],
html[data-theme="dark"] body .header-stable-actions .header-theme-toggle.header-icon-chip:not([data-theme-state]),
html[data-theme] body #site-theme-toggle.header-theme-toggle.header-icon-chip[data-theme-state="light"],
html[data-theme="dark"] body #site-theme-toggle.header-theme-toggle.header-icon-chip:not([data-theme-state]),
html[data-theme] body #site-theme-toggle-legacy.header-theme-toggle.header-icon-chip[data-theme-state="light"],
html[data-theme="dark"] body #site-theme-toggle-legacy.header-theme-toggle.header-icon-chip:not([data-theme-state]) {
  --header-action-color: #f59e0b;
  color: #efb138 !important;
  border-color: rgba(245, 158, 11, 0.28) !important;
  background:
    radial-gradient(circle at 31% 19%, rgba(255, 237, 167, 0.34), transparent 34%),
    radial-gradient(circle at 62% 66%, rgba(251, 191, 36, 0.08), transparent 54%),
    linear-gradient(180deg, rgba(94, 62, 17, 0.2), rgba(32, 24, 12, 0.14)),
    color-mix(in srgb, var(--surface-2) 96%, #f59e0b 4%) !important;
  box-shadow:
    0 0 0 1px rgba(245, 158, 11, 0.08),
    0 0 8px rgba(245, 158, 11, 0.08),
    0 8px 18px rgba(0, 0, 0, 0.13),
    inset 0 1px rgba(255, 246, 219, 0.14),
    inset 0 -9px 16px rgba(245, 158, 11, 0.08) !important;
}

:root[data-theme="light"] body .header-theme-toggle.header-icon-chip[data-theme-state="light"],
:root[data-theme="light"] body .header-stable-actions .header-theme-toggle.header-icon-chip[data-theme-state="light"],
:root[data-theme="light"] body #site-theme-toggle.header-theme-toggle.header-icon-chip[data-theme-state="light"],
:root[data-theme="light"] body #site-theme-toggle-legacy.header-theme-toggle.header-icon-chip[data-theme-state="light"] {
  color: #d97706 !important;
  background:
    radial-gradient(circle at 31% 19%, rgba(255, 247, 205, 0.96), transparent 36%),
    radial-gradient(circle at 62% 66%, rgba(251, 191, 36, 0.22), transparent 58%),
    linear-gradient(180deg, rgba(255, 253, 245, 0.98), rgba(255, 238, 186, 0.88)) !important;
  box-shadow:
    0 0 0 1px rgba(245, 158, 11, 0.1),
    0 0 20px rgba(245, 158, 11, 0.2),
    0 8px 18px rgba(146, 64, 14, 0.1),
    inset 0 1px rgba(255, 255, 255, 0.96),
    inset 0 -10px 18px rgba(251, 191, 36, 0.2) !important;
}

html[data-theme] body .header-theme-toggle.header-icon-chip[data-theme-state="dark"],
:root[data-theme="light"] body .header-theme-toggle.header-icon-chip:not([data-theme-state]),
html[data-theme] body .header-stable-actions .header-theme-toggle.header-icon-chip[data-theme-state="dark"],
:root[data-theme="light"] body .header-stable-actions .header-theme-toggle.header-icon-chip:not([data-theme-state]),
html[data-theme] body #site-theme-toggle.header-theme-toggle.header-icon-chip[data-theme-state="dark"],
:root[data-theme="light"] body #site-theme-toggle.header-theme-toggle.header-icon-chip:not([data-theme-state]),
html[data-theme] body #site-theme-toggle-legacy.header-theme-toggle.header-icon-chip[data-theme-state="dark"],
:root[data-theme="light"] body #site-theme-toggle-legacy.header-theme-toggle.header-icon-chip:not([data-theme-state]) {
  --header-action-color: #8fb6ff;
  color: #d9e7ff !important;
  border-color: color-mix(in srgb, #a9c9ff 34%, var(--line-color)) !important;
  background:
    radial-gradient(circle at 32% 22%, rgba(230, 240, 255, 0.22), transparent 40%),
    radial-gradient(circle at 58% 62%, rgba(96, 165, 250, 0.12), transparent 58%),
    linear-gradient(180deg, rgba(217, 231, 255, 0.1), rgba(217, 231, 255, 0.03)),
    color-mix(in srgb, var(--surface-2) 94%, transparent) !important;
  box-shadow:
    0 0 0 1px rgba(169, 201, 255, 0.1),
    0 0 18px rgba(170, 205, 255, 0.2),
    0 9px 18px rgba(0, 0, 0, 0.12),
    inset 0 1px rgba(245, 249, 255, 0.16),
    inset 0 -10px 18px rgba(40, 65, 105, 0.18) !important;
}

:root[data-theme="light"] body .header-theme-toggle.header-icon-chip[data-theme-state="dark"],
:root[data-theme="light"] body .header-theme-toggle.header-icon-chip:not([data-theme-state]),
:root[data-theme="light"] body .header-stable-actions .header-theme-toggle.header-icon-chip[data-theme-state="dark"],
:root[data-theme="light"] body .header-stable-actions .header-theme-toggle.header-icon-chip:not([data-theme-state]),
:root[data-theme="light"] body #site-theme-toggle.header-theme-toggle.header-icon-chip[data-theme-state="dark"],
:root[data-theme="light"] body #site-theme-toggle.header-theme-toggle.header-icon-chip:not([data-theme-state]),
:root[data-theme="light"] body #site-theme-toggle-legacy.header-theme-toggle.header-icon-chip[data-theme-state="dark"],
:root[data-theme="light"] body #site-theme-toggle-legacy.header-theme-toggle.header-icon-chip:not([data-theme-state]) {
  color: #3f5f85 !important;
  border-color: rgba(96, 165, 250, 0.26) !important;
  background:
    radial-gradient(circle at 32% 22%, rgba(255, 255, 255, 0.9), transparent 38%),
    radial-gradient(circle at 60% 66%, rgba(96, 165, 250, 0.14), transparent 58%),
    linear-gradient(180deg, rgba(248, 252, 255, 0.98), rgba(229, 239, 252, 0.92)) !important;
  box-shadow:
    0 0 0 1px rgba(96, 165, 250, 0.08),
    0 0 18px rgba(96, 165, 250, 0.16),
    0 8px 18px rgba(31, 78, 168, 0.08),
    inset 0 1px rgba(255, 255, 255, 0.96),
    inset 0 -10px 18px rgba(96, 165, 250, 0.14) !important;
}

html[data-theme] body .header-theme-toggle.header-icon-chip[data-theme-state="dark"] .header-theme-glyph-sun,
:root[data-theme="light"] body .header-theme-toggle.header-icon-chip:not([data-theme-state]) .header-theme-glyph-sun,
html[data-theme] body #site-theme-toggle[data-theme-state="dark"] .header-theme-glyph-sun,
:root[data-theme="light"] body #site-theme-toggle:not([data-theme-state]) .header-theme-glyph-sun,
html[data-theme] body #site-theme-toggle-legacy[data-theme-state="dark"] .header-theme-glyph-sun,
:root[data-theme="light"] body #site-theme-toggle-legacy:not([data-theme-state]) .header-theme-glyph-sun {
  opacity: 0 !important;
  transform: translate(-50%, -50%) scale(.64) rotate(18deg) !important;
  filter: none !important;
}

html[data-theme] body .header-theme-toggle.header-icon-chip[data-theme-state="dark"] .header-theme-glyph-moon,
:root[data-theme="light"] body .header-theme-toggle.header-icon-chip:not([data-theme-state]) .header-theme-glyph-moon,
html[data-theme] body #site-theme-toggle[data-theme-state="dark"] .header-theme-glyph-moon,
:root[data-theme="light"] body #site-theme-toggle:not([data-theme-state]) .header-theme-glyph-moon,
html[data-theme] body #site-theme-toggle-legacy[data-theme-state="dark"] .header-theme-glyph-moon,
:root[data-theme="light"] body #site-theme-toggle-legacy:not([data-theme-state]) .header-theme-glyph-moon {
  opacity: 1 !important;
  transform: translate(-50%, -50%) scale(1) !important;
  filter:
    drop-shadow(0 0 7px rgba(218, 232, 255, 0.34))
    drop-shadow(0 0 14px rgba(96, 165, 250, 0.2)) !important;
}

/* 2026-06-02 account sidebar refresh. */
html[data-theme] body.account-shell-active {
  --account-sidebar-bg: color-mix(in srgb, var(--surface-3) 94%, transparent);
  --account-sidebar-card-bg: color-mix(in srgb, var(--surface-2) 88%, transparent);
  --account-sidebar-hover: color-mix(in srgb, var(--brand-500) 7%, var(--surface-2));
  --account-sidebar-active-bg: color-mix(in srgb, var(--brand-500) 12%, var(--surface-2));
  --account-sidebar-border-soft: color-mix(in srgb, var(--line-color) 72%, transparent);
  --account-sidebar-text-soft: color-mix(in srgb, var(--text-muted) 78%, var(--text-soft));
}

:root[data-theme="light"] body.account-shell-active {
  --account-sidebar-bg: rgba(255, 255, 255, 0.96);
  --account-sidebar-card-bg: rgba(248, 250, 252, 0.96);
  --account-sidebar-hover: rgba(26, 79, 216, 0.055);
  --account-sidebar-active-bg: rgba(26, 79, 216, 0.105);
  --account-sidebar-border-soft: rgba(148, 163, 184, 0.24);
  --account-sidebar-text-soft: rgba(71, 85, 105, 0.72);
}

html[data-theme] body.account-shell-active :is(.profile-sidebar-shell, .ops-sidebar-account) {
  padding: 0.72rem !important;
  border-color: var(--account-sidebar-border-soft) !important;
  border-radius: 0.95rem !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--account-sidebar-bg) 98%, white 2%), var(--account-sidebar-bg)) !important;
  box-shadow:
    0 16px 36px rgba(2, 6, 23, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;
}

:root[data-theme="light"] body.account-shell-active :is(.profile-sidebar-shell, .ops-sidebar-account) {
  box-shadow:
    0 14px 30px rgba(15, 23, 42, 0.075),
    inset 0 1px 0 rgba(255, 255, 255, 0.86) !important;
}

html[data-theme] body.account-shell-active .account-sidebar-header-card {
  padding: 0.62rem !important;
  border: 1px solid var(--account-sidebar-border-soft) !important;
  border-radius: 0.78rem !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015)),
    var(--account-sidebar-card-bg) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.075) !important;
}

html[data-theme] body.account-shell-active .account-sidebar-header-main {
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
  justify-items: start !important;
  gap: 0.58rem !important;
  text-align: start !important;
}

html[data-theme] body.account-shell-active .account-sidebar-avatar-stack {
  margin-inline: 0 !important;
}

html[data-theme] body.account-shell-active .account-sidebar-header-main .account-sidebar-avatar {
  width: 2.38rem !important;
  height: 2.38rem !important;
  border: 1px solid var(--account-sidebar-border-soft) !important;
  font-size: 0.78rem !important;
  box-shadow:
    0 7px 16px rgba(2, 6, 23, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

html[data-theme] body.account-shell-active .account-sidebar-header-copy {
  justify-items: start !important;
  gap: 0.08rem !important;
  width: 100% !important;
  min-width: 0 !important;
  text-align: start !important;
}

html[data-theme] body.account-shell-active .account-sidebar-header-copy strong {
  width: 100% !important;
  overflow: hidden !important;
  color: var(--text-primary) !important;
  font-size: 0.86rem !important;
  font-weight: 750 !important;
  line-height: 1.45 !important;
  text-align: start !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-theme] body.account-shell-active .account-sidebar-header-copy small {
  width: 100% !important;
  overflow: hidden !important;
  color: var(--account-sidebar-text-soft) !important;
  font-size: 0.72rem !important;
  line-height: 1.45 !important;
  text-align: start !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-theme] body.account-shell-active .account-sidebar-header-copy :is(strong, small)[dir="ltr"] {
  justify-content: flex-start !important;
  justify-self: start !important;
  text-align: left !important;
}

html[data-theme] body.account-shell-active .account-sidebar-status {
  min-height: 1.1rem !important;
  margin-top: 0.1rem !important;
  padding: 0.08rem 0.42rem !important;
  border: 1px solid currentColor !important;
  font-size: 0.68rem !important;
  line-height: 1.2 !important;
  opacity: 0.92;
}

html[data-theme] body.account-shell-active .account-sidebar-header-cta {
  inset-inline-start: -0.18rem !important;
  inset-block-end: -0.14rem !important;
  width: 1.34rem !important;
  height: 1.34rem !important;
  border-color: var(--account-sidebar-border-soft) !important;
  background: var(--account-sidebar-bg) !important;
  box-shadow: 0 5px 12px rgba(2, 6, 23, 0.16) !important;
}

html[data-theme] body.account-shell-active .account-sidebar-header-cta svg {
  width: 0.72rem !important;
  height: 0.72rem !important;
}

html[data-theme] body.account-shell-active .account-sidebar-nav {
  margin-top: 0.62rem !important;
}

html[data-theme] body.account-shell-active .account-sidebar-group + .account-sidebar-group {
  margin-top: 0.5rem !important;
}

html[data-theme] body.account-shell-active .account-sidebar-group-title {
  margin: 0.48rem 0.42rem 0.24rem !important;
  color: var(--account-sidebar-text-soft) !important;
  font-size: 0.72rem !important;
  font-weight: 750 !important;
  line-height: 1.45 !important;
}

html[data-theme] body.account-shell-active :is(.account-sidebar-list, .account-sidebar-footer) {
  gap: 0.22rem !important;
}

html[data-theme] body.account-shell-active .account-sidebar-item {
  min-height: 2.14rem !important;
  gap: 0.48rem !important;
  padding: 0.34rem 0.48rem !important;
  border: 1px solid transparent !important;
  border-inline-start: 2px solid transparent !important;
  border-radius: 0.58rem !important;
  background: transparent !important;
  color: var(--account-sidebar-text-soft) !important;
  box-shadow: none !important;
}

html[data-theme] body.account-shell-active .account-sidebar-item:hover,
html[data-theme] body.account-shell-active .account-sidebar-item:focus-visible {
  border-color: var(--account-sidebar-border-soft) !important;
  background: var(--account-sidebar-hover) !important;
  color: var(--text-primary) !important;
}

html[data-theme] body.account-shell-active .account-sidebar-item.is-active {
  border-color: color-mix(in srgb, var(--brand-500) 34%, var(--account-sidebar-border-soft)) !important;
  border-inline-start-color: var(--brand-400) !important;
  background: var(--account-sidebar-active-bg) !important;
  color: color-mix(in srgb, var(--brand-400) 74%, var(--text-primary)) !important;
}

html[data-theme] body.account-shell-active .account-sidebar-item-label {
  font-size: 0.8rem !important;
  font-weight: 650 !important;
  line-height: 1.45 !important;
}

html[data-theme] body.account-shell-active .account-sidebar-item-icon {
  width: 1.34rem !important;
  min-width: 1.34rem !important;
  height: 1.34rem !important;
  min-height: 1.34rem !important;
  border-color: color-mix(in srgb, var(--account-sidebar-icon-color) 20%, transparent) !important;
  border-radius: 0.44rem !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)),
    color-mix(in srgb, var(--account-sidebar-icon-color) 8%, var(--surface-2)) !important;
  color: color-mix(in srgb, var(--account-sidebar-icon-color) 78%, var(--text-soft)) !important;
  box-shadow: none !important;
}

html[data-theme] body.account-shell-active .account-sidebar-item-icon svg {
  width: 0.9rem !important;
  height: 0.9rem !important;
}

html[data-theme] body.account-shell-active .account-sidebar-item:hover .account-sidebar-item-icon,
html[data-theme] body.account-shell-active .account-sidebar-item:focus-visible .account-sidebar-item-icon,
html[data-theme] body.account-shell-active .account-sidebar-item.is-active .account-sidebar-item-icon {
  border-color: color-mix(in srgb, var(--account-sidebar-icon-color) 28%, transparent) !important;
  background: color-mix(in srgb, var(--account-sidebar-icon-color) 13%, var(--surface-2)) !important;
  color: var(--account-sidebar-icon-color) !important;
  box-shadow: none !important;
  transform: none !important;
}

html[data-theme] body.account-shell-active .account-sidebar-disclosure-chevron {
  width: 0.9rem !important;
  height: 0.9rem !important;
  color: var(--account-sidebar-text-soft) !important;
}

html[data-theme] body.account-shell-active .account-sidebar-sublist {
  gap: 0.16rem !important;
  margin: 0.16rem 0 0.22rem !important;
  padding-inline-start: 1.8rem !important;
}

html[data-theme] body.account-shell-active .account-sidebar-subitem {
  min-height: 1.82rem !important;
  padding: 0.26rem 0.48rem !important;
  border: 1px solid transparent !important;
  border-radius: 0.5rem !important;
  color: var(--account-sidebar-text-soft) !important;
  font-size: 0.76rem !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
}

html[data-theme] body.account-shell-active .account-sidebar-subitem:hover,
html[data-theme] body.account-shell-active .account-sidebar-subitem:focus-visible,
html[data-theme] body.account-shell-active .account-sidebar-subitem.is-active {
  border-color: var(--account-sidebar-border-soft) !important;
  background: var(--account-sidebar-hover) !important;
  color: var(--text-primary) !important;
}

html[data-theme] body.account-shell-active .account-sidebar-subitem.is-active {
  border-inline-start: 2px solid var(--brand-400) !important;
  background: var(--account-sidebar-active-bg) !important;
  color: color-mix(in srgb, var(--brand-400) 72%, var(--text-primary)) !important;
}

html[data-theme] body.account-shell-active .account-sidebar-badge {
  min-width: 1rem !important;
  height: 1rem !important;
  min-height: 1rem !important;
  padding-inline: 0.28rem !important;
  font-size: 0.68rem !important;
}

html[data-theme] body.account-shell-active .account-sidebar-divider {
  margin: 0.48rem 0 !important;
  background: var(--account-sidebar-border-soft) !important;
}

html[data-theme] body.account-shell-active .account-sidebar-seller {
  margin-top: 0.52rem !important;
}

html[data-theme] body.account-shell-active .account-sidebar-seller-link {
  min-height: auto !important;
  gap: 0.28rem !important;
  padding: 0.56rem 0.62rem !important;
  border: 1px solid var(--account-sidebar-border-soft) !important;
  border-radius: 0.66rem !important;
  background: color-mix(in srgb, var(--success) 6%, var(--surface-2)) !important;
  color: var(--text-primary) !important;
  box-shadow: none !important;
}

html[data-theme] body.account-shell-active .account-sidebar-seller-copy {
  gap: 0.08rem !important;
}

html[data-theme] body.account-shell-active .account-sidebar-seller-copy strong {
  font-size: 0.8rem !important;
  font-weight: 750 !important;
  line-height: 1.45 !important;
}

html[data-theme] body.account-shell-active .account-sidebar-seller-copy small {
  color: var(--account-sidebar-text-soft) !important;
  font-size: 0.7rem !important;
  line-height: 1.55 !important;
}

html[data-theme] body.account-shell-active .account-sidebar-footer {
  margin-top: 0.16rem !important;
}

html[data-theme] body.account-shell-active .account-sidebar-more-affordance,
html[data-theme] body.account-shell-active .account-sidebar-more-affordance.is-floating {
  margin-top: 0.38rem !important;
  padding: 0.48rem 0.2rem 0.14rem !important;
}

html[data-theme] body.account-shell-active .account-sidebar-more-button {
  min-height: 1.88rem !important;
  padding: 0.38rem 0.66rem !important;
  border-radius: 0.56rem !important;
  font-size: 0.74rem !important;
  font-weight: 750 !important;
  box-shadow: none !important;
}

/* 2026-06-03 account sidebar and profile UI polish, aligned to site palette tokens. */
html[data-theme] body.account-shell-active {
  --account-sidebar-bg: var(--panel-bg);
  --account-sidebar-card-bg: var(--surface-3);
  --account-sidebar-row-bg: color-mix(in srgb, var(--surface-2) 82%, var(--panel-bg));
  --account-sidebar-hover: var(--hover);
  --account-sidebar-active-bg: var(--selected);
  --account-sidebar-active-border: color-mix(in srgb, var(--brand-500) 28%, var(--line-color));
  --account-sidebar-active-accent: var(--brand-500);
  --account-sidebar-border-soft: color-mix(in srgb, var(--line-color) 88%, transparent);
  --account-sidebar-text-soft: color-mix(in srgb, var(--text-muted) 84%, var(--text-soft));
  --account-sidebar-text-muted: var(--text-muted);
  --account-sidebar-neutral-icon-surface: color-mix(in srgb, var(--surface-2) 88%, var(--panel-bg));
  --account-sidebar-neutral-icon-border: color-mix(in srgb, var(--line-color) 90%, transparent);
  --account-sidebar-neutral-icon-fg: color-mix(in srgb, var(--text-muted) 88%, var(--text-primary));
  --account-profile-surface: color-mix(in srgb, var(--surface-3) 84%, var(--surface-2));
  --account-profile-panel: color-mix(in srgb, var(--panel-bg) 96%, transparent);
  --account-profile-inset: color-mix(in srgb, var(--surface-2) 78%, #0b0d10 22%);
  --account-profile-border: color-mix(in srgb, var(--line-color) 74%, transparent);
}

:root[data-theme="light"] body.account-shell-active {
  --account-sidebar-bg: var(--panel-bg);
  --account-sidebar-card-bg: var(--surface-3);
  --account-sidebar-row-bg: color-mix(in srgb, #ffffff 76%, var(--surface-2));
  --account-sidebar-hover: var(--hover);
  --account-sidebar-active-bg: var(--selected);
  --account-sidebar-active-border: color-mix(in srgb, var(--brand-500) 24%, var(--line-color));
  --account-sidebar-active-accent: var(--brand-600);
  --account-sidebar-border-soft: color-mix(in srgb, var(--line-color) 92%, transparent);
  --account-sidebar-text-soft: color-mix(in srgb, var(--text-muted) 92%, var(--text-primary));
  --account-sidebar-text-muted: var(--text-muted);
  --account-sidebar-neutral-icon-surface: color-mix(in srgb, var(--surface-2) 74%, #ffffff);
  --account-sidebar-neutral-icon-border: color-mix(in srgb, var(--line-color) 94%, transparent);
  --account-sidebar-neutral-icon-fg: color-mix(in srgb, var(--text-muted) 90%, var(--text-primary));
  --account-profile-surface: #ffffff;
  --account-profile-panel: #ffffff;
  --account-profile-inset: #f8fafc;
  --account-profile-border: rgba(100, 116, 139, 0.2);
}

html[data-theme] body.account-shell-active :is(.profile-sidebar-shell, .profile-drawer-panel, .ops-sidebar-account) {
  border-color: var(--account-sidebar-border-soft) !important;
  background: var(--account-sidebar-bg) !important;
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

:root[data-theme="light"] body.account-shell-active :is(.profile-sidebar-shell, .profile-drawer-panel, .ops-sidebar-account) {
  box-shadow:
    0 12px 28px rgba(15, 23, 42, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.88) !important;
}

html[data-theme] body.account-shell-active .account-sidebar-header-card {
  min-height: 4.62rem !important;
  padding: 0.74rem 0.78rem !important;
  border-color: var(--account-sidebar-border-soft) !important;
  background: var(--account-sidebar-card-bg) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
}

html[data-theme] body.account-shell-active .account-sidebar-header-main {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 2.65rem !important;
  grid-template-areas: "copy avatar" !important;
  align-items: center !important;
  column-gap: 0.72rem !important;
  direction: ltr !important;
  min-width: 0 !important;
  text-align: initial !important;
}

html[data-theme] body.account-shell-active .account-sidebar-avatar-stack {
  grid-area: avatar !important;
  justify-self: end !important;
  margin-inline: 0 !important;
  direction: rtl !important;
}

html[data-theme] body.account-shell-active .account-sidebar-header-main .account-sidebar-avatar {
  width: 2.65rem !important;
  height: 2.65rem !important;
  border-color: color-mix(in srgb, var(--brand-500) 22%, var(--account-sidebar-border-soft)) !important;
  background: color-mix(in srgb, var(--brand-500) 8%, var(--account-sidebar-card-bg)) !important;
  color: var(--account-sidebar-active-accent) !important;
  box-shadow: none !important;
}

html[data-theme] body.account-shell-active .account-sidebar-header-copy {
  grid-area: copy !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-areas:
    "name contact"
    "status contact" !important;
  align-items: center !important;
  column-gap: 0.58rem !important;
  row-gap: 0.16rem !important;
  min-width: 0 !important;
  width: 100% !important;
  direction: rtl !important;
  text-align: start !important;
}

html[data-theme] body.account-shell-active .account-sidebar-header-copy strong {
  grid-area: name !important;
  justify-self: start !important;
  width: auto !important;
  max-width: 7.2rem !important;
  text-align: right !important;
}

html[data-theme] body.account-shell-active .account-sidebar-header-copy strong[dir="ltr"] {
  justify-content: flex-start !important;
  justify-self: start !important;
  text-align: right !important;
}

html[data-theme] body.account-shell-active .account-sidebar-header-copy small {
  grid-area: contact !important;
  align-self: center !important;
  justify-self: end !important;
  width: 100% !important;
  max-width: 7.6rem !important;
}

html[data-theme] body.account-shell-active .account-sidebar-status {
  grid-area: status !important;
  justify-self: start !important;
  margin-top: 0 !important;
}

html[data-theme] body.account-shell-active .account-sidebar-header-cta {
  inset-inline-start: auto !important;
  inset-inline-end: -0.14rem !important;
  inset-block-end: -0.14rem !important;
  width: 1.28rem !important;
  height: 1.28rem !important;
  color: var(--account-sidebar-text-muted) !important;
  border-color: var(--account-sidebar-border-soft) !important;
  background: var(--account-sidebar-neutral-icon-surface) !important;
  box-shadow: none !important;
}

html[data-theme] body.account-shell-active .account-sidebar-header-cta:hover,
html[data-theme] body.account-shell-active .account-sidebar-header-cta:focus-visible {
  color: var(--account-sidebar-active-accent) !important;
  border-color: var(--account-sidebar-active-border) !important;
  background: color-mix(in srgb, var(--brand-500) 7%, var(--account-sidebar-neutral-icon-surface)) !important;
}

html[data-theme] body.account-shell-active .account-sidebar-item {
  border-color: var(--account-sidebar-border-soft) !important;
  background: var(--account-sidebar-row-bg) !important;
  color: var(--account-sidebar-text-soft) !important;
  box-shadow: none !important;
}

html[data-theme] body.account-shell-active .account-sidebar-item:hover,
html[data-theme] body.account-shell-active .account-sidebar-item:focus-visible {
  border-color: var(--account-sidebar-border-soft) !important;
  background: var(--account-sidebar-hover) !important;
  color: var(--text-primary) !important;
}

html[data-theme] body.account-shell-active .account-sidebar-item.is-active {
  border-color: var(--account-sidebar-active-border) !important;
  border-inline-start-color: var(--account-sidebar-active-accent) !important;
  background: var(--account-sidebar-active-bg) !important;
  color: var(--text-primary) !important;
}

html[data-theme] body.account-shell-active .account-sidebar-subitem {
  color: var(--account-sidebar-text-soft) !important;
}

html[data-theme] body.account-shell-active .account-sidebar-subitem:hover,
html[data-theme] body.account-shell-active .account-sidebar-subitem:focus-visible {
  border-color: var(--account-sidebar-border-soft) !important;
  background: var(--account-sidebar-hover) !important;
  color: var(--text-primary) !important;
}

html[data-theme] body.account-shell-active .account-sidebar-subitem.is-active {
  border-color: var(--account-sidebar-active-border) !important;
  border-inline-start-color: var(--account-sidebar-active-accent) !important;
  background: var(--account-sidebar-active-bg) !important;
  color: var(--text-primary) !important;
}

html[data-theme] body.account-shell-active .account-sidebar-item-icon {
  --account-sidebar-icon-surface: color-mix(
    in srgb,
    var(--account-sidebar-icon-color) 13%,
    var(--account-sidebar-neutral-icon-surface)
  ) !important;
  border-color: color-mix(
    in srgb,
    var(--account-sidebar-icon-color) 32%,
    var(--account-sidebar-neutral-icon-border)
  ) !important;
  background:
    radial-gradient(
      circle at 32% 18%,
      color-mix(in srgb, var(--account-sidebar-icon-color) 30%, #ffffff 10%),
      transparent 42%
    ),
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--account-sidebar-icon-color) 16%, var(--account-sidebar-neutral-icon-surface)),
      color-mix(in srgb, var(--account-sidebar-icon-color) 7%, var(--account-sidebar-neutral-icon-surface))
    ) !important;
  color: color-mix(in srgb, var(--account-sidebar-icon-color) 90%, #ffffff 10%) !important;
  box-shadow:
    0 8px 18px color-mix(in srgb, var(--account-sidebar-icon-color) 13%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

html[data-theme] body.account-shell-active .account-sidebar-item:hover .account-sidebar-item-icon,
html[data-theme] body.account-shell-active .account-sidebar-item:focus-visible .account-sidebar-item-icon,
html[data-theme] body.account-shell-active .account-sidebar-item.is-active .account-sidebar-item-icon {
  border-color: color-mix(in srgb, var(--account-sidebar-icon-color) 48%, var(--account-sidebar-neutral-icon-border)) !important;
  background:
    radial-gradient(
      circle at 30% 18%,
      color-mix(in srgb, #ffffff 26%, var(--account-sidebar-icon-color) 74%),
      transparent 44%
    ),
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--account-sidebar-icon-color) 60%, var(--account-sidebar-neutral-icon-surface)),
      color-mix(in srgb, var(--account-sidebar-icon-color) 30%, var(--account-sidebar-neutral-icon-surface))
    ) !important;
  color: #f8fafc !important;
  box-shadow:
    0 10px 22px color-mix(in srgb, var(--account-sidebar-icon-color) 22%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
}

html[data-theme] body.account-shell-active .account-sidebar-item.is-danger .account-sidebar-item-icon,
html[data-theme] body.account-shell-active .account-sidebar-footer-item.is-danger .account-sidebar-item-icon {
  --account-sidebar-icon-color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 36%, var(--account-sidebar-neutral-icon-border)) !important;
}

html[data-theme] body.account-shell-active .account-sidebar-seller-link {
  border-color: var(--account-sidebar-border-soft) !important;
  background: var(--account-sidebar-card-bg) !important;
  box-shadow: none !important;
}

html[data-theme] body.account-shell-active :is(.account-info-page, #account-info-shell) {
  width: min(100%, var(--page-work-max-width, 116rem));
  margin-inline: auto;
}

html[data-theme] body.account-shell-active .account-info-page {
  display: grid;
  gap: 0.9rem;
}

html[data-theme] body.account-shell-active .account-info-intro,
html[data-theme] body.account-shell-active .account-info-card {
  border-color: var(--account-profile-border) !important;
  border-radius: 0.86rem !important;
  background: var(--account-profile-panel) !important;
  box-shadow: 0 10px 24px rgba(2, 6, 23, 0.12) !important;
}

:root[data-theme="light"] body.account-shell-active .account-info-intro,
:root[data-theme="light"] body.account-shell-active .account-info-card {
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.055) !important;
}

html[data-theme] body.account-shell-active .account-info-intro {
  padding: 1rem !important;
}

html[data-theme] body.account-shell-active .account-info-intro .section-title {
  font-size: 1.1rem !important;
  line-height: 1.65 !important;
}

html[data-theme] body.account-shell-active .account-info-intro-copy {
  max-width: 48rem;
  white-space: normal !important;
  overflow-wrap: anywhere;
  font-size: 0.84rem !important;
  line-height: 1.9 !important;
}

html[data-theme] body.account-shell-active .account-info-grid {
  align-items: start;
  gap: 0.9rem !important;
}

html[data-theme] body.account-shell-active .account-info-card {
  padding: 1rem !important;
}

html[data-theme] body.account-shell-active .account-info-card-header {
  gap: 0.7rem !important;
}

html[data-theme] body.account-shell-active .account-info-card .section-title {
  font-size: 1.02rem !important;
  line-height: 1.65 !important;
}

html[data-theme] body.account-shell-active .account-info-card .eyebrow {
  font-size: 0.72rem !important;
  line-height: 1.5 !important;
}

html[data-theme] body.account-shell-active .account-info-status-chip {
  min-height: 1.72rem !important;
  padding: 0.22rem 0.58rem !important;
  border-radius: 0.55rem !important;
  font-size: 0.72rem !important;
}

html[data-theme] body.account-shell-active .account-info-avatar-card {
  padding: 0.78rem !important;
  border-color: var(--account-profile-border) !important;
  border-radius: 0.72rem !important;
  background: var(--account-profile-inset) !important;
}

html[data-theme] body.account-shell-active .account-info-avatar-layout {
  gap: 0.75rem !important;
}

html[data-theme] body.account-shell-active .account-info-avatar-identity {
  min-width: 0;
  gap: 0.72rem !important;
}

html[data-theme] body.account-shell-active .account-info-avatar-shell {
  padding: 0.1rem !important;
  border: 1px solid color-mix(in srgb, var(--account-sidebar-active-accent) 30%, var(--account-profile-border)) !important;
  background: color-mix(in srgb, var(--account-sidebar-active-accent) 10%, var(--account-profile-inset)) !important;
  box-shadow: none !important;
}

html[data-theme] body.account-shell-active .account-info-avatar-frame {
  width: 3.7rem !important;
  height: 3.7rem !important;
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--brand-500) 22%, transparent),
      color-mix(in srgb, var(--brand-400) 12%, transparent)
    ),
    color-mix(in srgb, var(--account-profile-inset) 90%, #ffffff 4%) !important;
}

html[data-theme] body.account-shell-active .account-info-avatar-frame .drawer-user-avatar-fallback {
  color: var(--text-primary) !important;
  font-size: 1.05rem !important;
}

html[data-theme] body.account-shell-active .account-info-avatar-copy {
  min-width: 0;
}

html[data-theme] body.account-shell-active .account-info-name {
  max-width: 100%;
  overflow: hidden;
  font-size: 0.98rem !important;
  line-height: 1.55 !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-theme] body.account-shell-active .account-info-avatar-copy .muted-text {
  font-size: 0.76rem !important;
  line-height: 1.65 !important;
}

html[data-theme] body.account-shell-active .account-info-avatar-actions {
  justify-content: flex-end;
}

html[data-theme] body.account-shell-active .account-info-form {
  gap: 0.78rem !important;
}

html[data-theme] body.account-shell-active .account-info-field {
  gap: 0.34rem !important;
}

html[data-theme] body.account-shell-active .account-info-field > .muted-text {
  color: var(--account-sidebar-text-muted) !important;
  font-size: 0.76rem !important;
  font-weight: 750;
}

html[data-theme] body.account-shell-active #account-info-shell .field-input {
  min-height: 2.42rem;
  padding: 0.52rem 0.7rem;
  border-color: var(--account-profile-border);
  border-radius: 0.62rem;
  background: var(--account-profile-inset);
  color: var(--text-primary);
  font-size: 0.84rem;
  font-weight: 700;
}

html[data-theme] body.account-shell-active #account-info-shell .field-input:focus {
  border-color: var(--account-sidebar-active-border);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--account-sidebar-active-accent) 12%, transparent);
}

html[data-theme] body.account-shell-active #account-info-shell .search-row {
  min-height: 2.7rem;
  padding: 0.6rem 0.68rem;
  border-color: var(--account-profile-border);
  border-radius: 0.68rem;
  background: var(--account-profile-inset);
}

html[data-theme] body.account-shell-active #account-info-shell .search-row strong {
  font-size: 0.84rem;
  line-height: 1.55;
}

html[data-theme] body.account-shell-active #account-info-shell .search-row small {
  color: var(--account-sidebar-text-muted);
  font-size: 0.74rem;
  line-height: 1.7;
}

html[data-theme] body.account-shell-active .account-info-side-card {
  display: grid;
  gap: 0.72rem;
}

html[data-theme] body.account-shell-active .account-info-side-card > .muted-text {
  margin-top: 0 !important;
  font-size: 0.8rem !important;
  line-height: 1.85 !important;
}

html[data-theme] body.account-shell-active .account-info-note-row {
  align-items: flex-start;
}

/* Final quiet pass for colored icon buttons: keep color, remove busy glow and double-border feel. */
html[data-theme][data-theme] body :is(
  .header-icon-chip,
  .mobile-menu-chip,
  .drawer-close-chip,
  .icon-chip,
  .mobile-chip,
  .header-search-submit,
  .header-theme-toggle,
  .profile-drawer-close,
  .cockpit-drawer-close,
  .ui-modal-close,
  .commerce-modal-close,
  .toast-close,
  .seller-offer-modal-close,
  .home-hero-icon-button,
  .storefront-recommend-nav,
  .slider-jalali-nav-button,
  .offer-jalali-nav-button,
  .chat-icon-button,
  .industrial-gallery-action,
  .action-icon-button.action-icon-button.action-icon-button
) {
  --button-icon-accent: var(--header-action-color, var(--glass-button-accent, var(--brand-400)));
  border-color: color-mix(in srgb, var(--button-icon-accent) 24%, var(--line-color)) !important;
  background:
    radial-gradient(circle at 32% 18%, color-mix(in srgb, var(--button-icon-accent) 18%, #ffffff 6%), transparent 40%),
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--button-icon-accent) 12%, var(--surface-2)),
      color-mix(in srgb, var(--button-icon-accent) 4%, var(--surface-2))
    ) !important;
  color: color-mix(in srgb, var(--button-icon-accent) 82%, #ffffff 18%) !important;
  box-shadow: none !important;
}

html[data-theme][data-theme] body :is(.header-search-submit, .header-icon-search, .chat-icon-button) {
  --button-icon-accent: #38bdf8;
}

html[data-theme][data-theme] body :is(.header-theme-toggle, .header-icon-theme, #site-theme-toggle, #site-theme-toggle-legacy) {
  --button-icon-accent: var(--header-action-color, var(--warning));
}

html[data-theme][data-theme] body :is(
  .profile-drawer-close,
  .cockpit-drawer-close,
  .ui-modal-close,
  .commerce-modal-close,
  .toast-close,
  .seller-offer-modal-close,
  .drawer-close-chip
) {
  --button-icon-accent: var(--danger);
}

html[data-theme][data-theme] body :is(.header-icon-workboard, .mobile-menu-chip, .home-hero-icon-button, .storefront-recommend-nav, .slider-jalali-nav-button, .offer-jalali-nav-button) {
  --button-icon-accent: #a78bfa;
}

html[data-theme][data-theme] body .industrial-gallery-action-wishlist {
  --button-icon-accent: #fb7185;
}

html[data-theme][data-theme] body .industrial-gallery-action-compare {
  --button-icon-accent: #38bdf8;
}

html[data-theme][data-theme] body :is(
  .header-icon-chip:hover,
  .header-icon-chip:focus-visible,
  .header-icon-chip[class*="-active"],
  .mobile-menu-chip:hover,
  .mobile-menu-chip:focus-visible,
  .drawer-close-chip:hover,
  .drawer-close-chip:focus-visible,
  .icon-chip:hover,
  .icon-chip:focus-visible,
  .mobile-chip:hover,
  .mobile-chip:focus-visible,
  .header-search-submit:hover,
  .header-search-submit:focus-visible,
  .header-theme-toggle:hover,
  .header-theme-toggle:focus-visible,
  .profile-drawer-close:hover,
  .profile-drawer-close:focus-visible,
  .cockpit-drawer-close:hover,
  .cockpit-drawer-close:focus-visible,
  .ui-modal-close:hover,
  .ui-modal-close:focus-visible,
  .commerce-modal-close:hover,
  .commerce-modal-close:focus-visible,
  .toast-close:hover,
  .toast-close:focus-visible,
  .seller-offer-modal-close:hover,
  .seller-offer-modal-close:focus-visible,
  .home-hero-icon-button:hover,
  .home-hero-icon-button:focus-visible,
  .storefront-recommend-nav:hover,
  .storefront-recommend-nav:focus-visible,
  .slider-jalali-nav-button:hover,
  .slider-jalali-nav-button:focus-visible,
  .offer-jalali-nav-button:hover,
  .offer-jalali-nav-button:focus-visible,
  .chat-icon-button:hover,
  .chat-icon-button:focus-visible,
  .industrial-gallery-action:hover,
  .industrial-gallery-action:focus-visible,
  .industrial-gallery-action.is-active,
  .action-icon-button.action-icon-button.action-icon-button:hover,
  .action-icon-button.action-icon-button.action-icon-button:focus-visible
) {
  border-color: color-mix(in srgb, var(--button-icon-accent) 36%, var(--line-color)) !important;
  background:
    radial-gradient(circle at 30% 18%, color-mix(in srgb, #ffffff 16%, var(--button-icon-accent) 54%), transparent 42%),
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--button-icon-accent) 34%, var(--surface-2)),
      color-mix(in srgb, var(--button-icon-accent) 16%, var(--surface-2))
    ) !important;
  color: #f8fafc !important;
  box-shadow: 0 4px 10px color-mix(in srgb, var(--button-icon-accent) 10%, transparent) !important;
}

html[data-theme][data-theme] body :is(
  .header-theme-toggle.header-icon-chip .header-theme-glyph,
  #site-theme-toggle .header-theme-glyph,
  #site-theme-toggle-legacy .header-theme-glyph
) {
  filter: none !important;
}

html[data-theme][data-theme] body :is(
  #site-theme-toggle.header-theme-toggle.header-icon-chip,
  #site-theme-toggle-legacy.header-theme-toggle.header-icon-chip
) {
  border-color: color-mix(in srgb, var(--button-icon-accent) 24%, var(--line-color)) !important;
  background:
    radial-gradient(circle at 32% 18%, color-mix(in srgb, var(--button-icon-accent) 18%, #ffffff 6%), transparent 40%),
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--button-icon-accent) 12%, var(--surface-2)),
      color-mix(in srgb, var(--button-icon-accent) 4%, var(--surface-2))
    ) !important;
  box-shadow: none !important;
}

html[data-theme][data-theme] body :is(
  #site-theme-toggle.header-theme-toggle.header-icon-chip:hover,
  #site-theme-toggle.header-theme-toggle.header-icon-chip:focus-visible,
  #site-theme-toggle-legacy.header-theme-toggle.header-icon-chip:hover,
  #site-theme-toggle-legacy.header-theme-toggle.header-icon-chip:focus-visible
) {
  border-color: color-mix(in srgb, var(--button-icon-accent) 36%, var(--line-color)) !important;
  background:
    radial-gradient(circle at 30% 18%, color-mix(in srgb, #ffffff 16%, var(--button-icon-accent) 54%), transparent 42%),
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--button-icon-accent) 34%, var(--surface-2)),
      color-mix(in srgb, var(--button-icon-accent) 16%, var(--surface-2))
    ) !important;
  box-shadow: 0 4px 10px color-mix(in srgb, var(--button-icon-accent) 10%, transparent) !important;
}

html[data-theme][data-theme] body :is(
  #site-account-chip.header-icon-chip,
  #site-alerts-button.header-icon-chip,
  #site-workboard-button.header-icon-chip,
  #site-cart-icon.header-icon-chip,
  #site-inquiry-icon.header-icon-chip,
  #site-wishlist-icon.header-icon-chip,
  #site-compare-icon.header-icon-chip,
  .header-icon-admin.header-icon-chip
) {
  border-color: color-mix(in srgb, var(--button-icon-accent) 24%, var(--line-color)) !important;
  background:
    radial-gradient(circle at 32% 18%, color-mix(in srgb, var(--button-icon-accent) 18%, #ffffff 6%), transparent 40%),
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--button-icon-accent) 12%, var(--surface-2)),
      color-mix(in srgb, var(--button-icon-accent) 4%, var(--surface-2))
    ) !important;
  box-shadow: none !important;
}

html[data-theme][data-theme] body :is(
  #site-account-chip.header-icon-chip:hover,
  #site-account-chip.header-icon-chip:focus-visible,
  #site-alerts-button.header-icon-chip:hover,
  #site-alerts-button.header-icon-chip:focus-visible,
  #site-alerts-button.header-icon-chip[class*="-active"],
  #site-workboard-button.header-icon-chip:hover,
  #site-workboard-button.header-icon-chip:focus-visible,
  #site-workboard-button.header-icon-chip[class*="-active"],
  #site-cart-icon.header-icon-chip:hover,
  #site-cart-icon.header-icon-chip:focus-visible,
  #site-cart-icon.header-icon-chip[class*="-active"],
  #site-inquiry-icon.header-icon-chip:hover,
  #site-inquiry-icon.header-icon-chip:focus-visible,
  #site-inquiry-icon.header-icon-chip[class*="-active"],
  #site-wishlist-icon.header-icon-chip:hover,
  #site-wishlist-icon.header-icon-chip:focus-visible,
  #site-wishlist-icon.header-icon-chip[class*="-active"],
  #site-compare-icon.header-icon-chip:hover,
  #site-compare-icon.header-icon-chip:focus-visible,
  #site-compare-icon.header-icon-chip[class*="-active"],
  .header-icon-admin.header-icon-chip:hover,
  .header-icon-admin.header-icon-chip:focus-visible
) {
  border-color: color-mix(in srgb, var(--button-icon-accent) 36%, var(--line-color)) !important;
  background:
    radial-gradient(circle at 30% 18%, color-mix(in srgb, #ffffff 16%, var(--button-icon-accent) 54%), transparent 42%),
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--button-icon-accent) 34%, var(--surface-2)),
      color-mix(in srgb, var(--button-icon-accent) 16%, var(--surface-2))
    ) !important;
  box-shadow: 0 4px 10px color-mix(in srgb, var(--button-icon-accent) 10%, transparent) !important;
}

html[data-theme][data-theme] body :is(
  .ui-button,
  .ui-button-primary,
  .ui-button-secondary,
  .ui-button-muted,
  .ui-button-ghost,
  .ui-button-danger,
  .button,
  .button--primary,
  .button--secondary,
  .cta-button,
  .cta-button-secondary,
  .ops-button,
  .ops-button-primary,
  .ops-button-secondary,
  .ops-button-muted,
  .auth-primary-button,
  .auth-change-phone-button,
  .auth-resend-button,
  .auth-flow-submit,
  .auth-flow-secondary,
  .chat-button,
  .pd-solid-button,
  .pd-outline-button,
  .pdr-solid-button,
  .pdr-outline-button,
  .pdq-button,
  .pdq-button--secondary,
  .pds-button,
  .pds-button--primary,
  .pds-button--secondary,
  .storefront-card-action,
  .commerce-header-button,
  .commerce-primary-action,
  .commerce-primary-action-cart,
  .commerce-primary-action-inquiry,
  .checkout-address-add-button
) > svg:first-child {
  border: 0 !important;
  box-shadow: none !important;
}

html[data-theme][data-theme] body .action-icon-button.action-icon-button.action-icon-button > svg:first-child {
  width: var(--ui-icon-button-glyph) !important;
  height: var(--ui-icon-button-glyph) !important;
  inline-size: var(--ui-icon-button-glyph) !important;
  block-size: var(--ui-icon-button-glyph) !important;
  min-inline-size: var(--ui-icon-button-glyph) !important;
  min-block-size: var(--ui-icon-button-glyph) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* 2026-06-04 no-shadow charter: all UI separation uses borders, color, spacing, and outlines. */
html[data-theme] body {
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --shadow-brand: var(--shadow-sm);
  --shadow-soft: var(--shadow-sm);
  --ui-shadow-panel: none;
  --ui-shadow-floating: none;
  --ui-shadow-focus: none;
  --ui-shadow-danger-focus: none;
  --ui-shadow-control-surface: none;
  --ui-shadow-control-surface-hover: none;
  --ui-shadow-control-accent: none;
  --ui-shadow-control-accent-hover: none;
  --ui-shadow-control-icon: none;
  --ui-shadow-control-icon-hover: none;
  --ui-shadow-control-badge: none;
  --ui-shadow-control-inset: none;
  --ui-shadow-control-inset-strong: none;
  --ui-shadow-control-inset-bottom: none;
}

:root[data-theme="light"] body {
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --ui-shadow-panel: none;
  --ui-shadow-floating: none;
  --ui-shadow-control-badge: none;
}

html[data-theme] body :is(
  .glass-panel,
  .product-card,
  .category-card,
  .ui-card,
  .ui-panel,
  .ui-stat-card,
  .ui-empty-state,
  .ui-topbar,
  .ui-sidebar,
  .ui-footer,
  .ui-drawer-panel,
  .ops-panel,
  .ops-sidebar,
  .ops-sidebar-account,
  .ops-list,
  .profile-sidebar-shell,
  .profile-drawer-panel,
  .cockpit-drawer-panel,
  .account-info-intro,
  .account-info-card,
  .catalog-product-create-panel,
  .catalog-wizard-header,
  .catalog-wizard-main .catalog-product-form-grid,
  .catalog-wizard-side-panel,
  .catalog-wizard-bottom-bar,
  .seller-product-wizard,
  .wizard-step-card,
  .wizard-side-panel,
  .wizard-bottom-bar,
  .wizard-preview-card,
  .wizard-error-summary
) {
  box-shadow: var(--ui-shadow-panel) !important;
}

html[data-theme] body :is(
  .modal-card,
  .ui-modal-card,
  .toast-card,
  .ui-toast,
  .search-results,
  .search-results-shell .search-results,
  .locale-menu-list,
  .catalog-search-menu,
  .product-class-category-menu,
  .variant-gallery-modal-card,
  .desktop-cart-preview-panel
) {
  box-shadow: var(--ui-shadow-floating) !important;
}

html[data-theme] body :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea,
  .catalog-search-trigger,
  .catalog-file-control,
  .catalog-file-thumb,
  .catalog-dynamic-row,
  .catalog-option-stack,
  .catalog-wizard-side-step,
  .ops-list-item,
  .wizard-media-slot-card,
  .wizard-media-slot,
  .wizard-submit-note,
  .product-class-category-control,
  .product-class-category-selection-panel,
  .product-class-attribute-row,
  .product-class-option-row,
  .variant-gallery-modal-thumb,
  .account-sidebar-header-card,
  .account-sidebar-item,
  .account-sidebar-seller-link,
  .account-info-avatar-card,
  .account-info-avatar-shell
) {
  box-shadow: none !important;
}

html[data-theme] body :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea,
  .catalog-search-trigger,
  .catalog-file-control,
  .product-class-category-control
):is(:focus, :focus-visible, :focus-within) {
  box-shadow: var(--ui-shadow-focus) !important;
}

html[data-theme] body :is(
  .has-errors input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  .has-errors select,
  .has-errors textarea,
  .is-invalid input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  .is-invalid select,
  .is-invalid textarea,
  .has-errors .catalog-search-trigger,
  .is-invalid .catalog-search-trigger
) {
  box-shadow: var(--ui-shadow-danger-focus) !important;
}

/* 2026-06-04 mobile site drawer UX pass. */
html[data-theme] body #site-drawer.drawer-panel {
  width: min(24rem, calc(100vw - 1rem)) !important;
  max-width: min(24rem, calc(100vw - 1rem)) !important;
  inset-block: .5rem !important;
  padding: .72rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: .58rem !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  border-radius: 1.05rem 0 0 1.05rem !important;
  border: 1px solid color-mix(in srgb, var(--line-color) 86%, transparent) !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, #05070b), color-mix(in srgb, var(--bg-main) 94%, #05070b)),
    radial-gradient(circle at 92% 0%, color-mix(in srgb, var(--brand-500) 12%, transparent), transparent 34%) !important;
  box-shadow: var(--ui-shadow-floating) !important;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--brand-500) 38%, var(--border)) transparent;
}

html[dir="ltr"][data-theme] body #site-drawer.drawer-panel {
  border-radius: 0 1.05rem 1.05rem 0 !important;
}

html[data-theme] body #site-drawer.drawer-panel[aria-hidden="true"] {
  display: none !important;
}

html[data-theme] body #site-drawer .drawer-header-bar {
  position: sticky;
  top: -.72rem;
  z-index: 3;
  margin: 0 !important;
  padding: .08rem .05rem .56rem !important;
  border-bottom: 1px solid color-mix(in srgb, var(--line-color) 82%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, transparent), color-mix(in srgb, var(--surface) 82%, transparent));
  backdrop-filter: blur(14px);
}

html[data-theme] body #site-drawer .drawer-header-logo {
  width: 2.8rem !important;
  height: 2.8rem !important;
}

html[data-theme] body #site-drawer .drawer-close-chip {
  width: 2.28rem !important;
  height: 2.28rem !important;
  min-width: 2.28rem !important;
  min-height: 2.28rem !important;
  border-color: color-mix(in srgb, var(--line-color) 88%, transparent) !important;
  background: color-mix(in srgb, var(--surface-2) 80%, transparent) !important;
  box-shadow: none !important;
}

html[data-theme] body #site-drawer .drawer-section,
html[data-theme] body #site-drawer .drawer-account-panel {
  display: grid;
  gap: .48rem;
  margin: 0 !important;
  padding: .58rem !important;
  border: 1px solid color-mix(in srgb, var(--line-color) 88%, transparent);
  border-radius: .9rem;
  background: color-mix(in srgb, var(--surface-2) 58%, transparent);
  box-shadow: var(--ui-shadow-panel) !important;
}

html[data-theme] body #site-drawer .drawer-section-title {
  margin: 0 .12rem .05rem;
  color: var(--text-soft);
  font-size: .72rem;
  font-weight: 850;
  line-height: 1.55;
}

html[data-theme] body #site-drawer .drawer-link-grid,
html[data-theme] body #site-drawer .drawer-account-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .38rem;
}

html[data-theme] body #site-drawer .drawer-account-list,
html[data-theme] body #site-drawer .drawer-link-grid-compact {
  grid-template-columns: minmax(0, 1fr);
}

html[data-theme] body #site-drawer .drawer-link,
html[data-theme] body #site-drawer button.drawer-link {
  width: 100%;
  min-height: 2.22rem !important;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: .42rem;
  margin: 0 !important;
  padding: .46rem .6rem !important;
  border: 1px solid color-mix(in srgb, var(--line-color) 90%, transparent) !important;
  border-radius: .62rem !important;
  background: color-mix(in srgb, var(--surface) 72%, transparent) !important;
  color: color-mix(in srgb, var(--text-primary) 86%, var(--text-muted)) !important;
  font-size: .79rem !important;
  font-weight: 760 !important;
  line-height: 1.45;
  text-align: start;
  white-space: normal;
  overflow-wrap: anywhere;
  box-shadow: none !important;
  transition: border-color .16s ease, background-color .16s ease, color .16s ease;
}

html[data-theme] body #site-drawer .drawer-link:hover,
html[data-theme] body #site-drawer .drawer-link:focus-visible,
html[data-theme] body #site-drawer .drawer-link.nav-pill-active {
  border-color: color-mix(in srgb, var(--brand-500) 28%, var(--line-color)) !important;
  background: color-mix(in srgb, var(--brand-500) 12%, var(--surface)) !important;
  color: var(--text-primary) !important;
}

html[data-theme] body #site-drawer .drawer-link .badge-count {
  flex: 0 0 auto;
  min-width: 1.35rem;
  height: 1.35rem;
  padding-inline: .35rem;
  font-size: .68rem;
  box-shadow: var(--ui-shadow-control-badge) !important;
}

html[data-theme] body #site-drawer .drawer-mobile-spotlight {
  display: grid;
  gap: .48rem;
  margin-top: 0 !important;
}

html[data-theme] body #site-drawer .drawer-user-spotlight,
html[data-theme] body #site-drawer .drawer-theme-spotlight {
  min-height: 3.15rem;
  padding: .56rem .62rem !important;
  border: 1px solid color-mix(in srgb, var(--line-color) 88%, transparent) !important;
  border-radius: .88rem !important;
  background: color-mix(in srgb, var(--surface-2) 66%, transparent) !important;
  box-shadow: var(--ui-shadow-panel) !important;
}

html[data-theme] body #site-drawer .drawer-theme-spotlight {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: .58rem;
  align-items: center;
}

html[data-theme] body #site-drawer .drawer-user-copy {
  min-width: 0;
  gap: .08rem;
}

html[data-theme] body #site-drawer .drawer-user-copy strong {
  color: var(--text-primary) !important;
  font-size: .8rem;
  line-height: 1.55;
}

html[data-theme] body #site-drawer .drawer-user-copy small {
  color: var(--text-muted) !important;
  font-size: .7rem;
  line-height: 1.55;
}

html[data-theme] body #site-drawer .drawer-theme-orb,
html[data-theme] body #site-drawer .drawer-user-avatar-shell {
  width: 2.34rem !important;
  height: 2.34rem !important;
  min-width: 2.34rem !important;
  min-height: 2.34rem !important;
  box-shadow: var(--ui-shadow-panel) !important;
}

html[data-theme] body #site-drawer .drawer-user-chip {
  min-height: 1.72rem;
  padding: .22rem .52rem;
  border-radius: .55rem;
  font-size: .7rem;
  box-shadow: none !important;
}

html[data-theme] body #site-drawer .drawer-account-panel {
  gap: .64rem;
}

html[data-theme] body #site-drawer .drawer-account-group {
  display: grid;
  gap: .4rem;
  margin: 0 !important;
  padding: 0;
}

html[data-theme] body #site-drawer .drawer-account-sublist {
  display: grid;
  gap: .34rem;
  margin: .34rem .46rem 0 0;
  padding-inline-start: .45rem;
  border-inline-start: 1px solid color-mix(in srgb, var(--brand-500) 18%, var(--line-color));
}

html[data-theme] body #site-drawer .drawer-account-subitem {
  min-height: 2.05rem !important;
  font-size: .74rem !important;
  color: color-mix(in srgb, var(--text-primary) 74%, var(--text-muted)) !important;
}

:root[data-theme="light"] body #site-drawer.drawer-panel {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(244, 248, 253, .98)),
    radial-gradient(circle at 92% 0%, rgba(26, 79, 216, .07), transparent 34%) !important;
}

:root[data-theme="light"] body #site-drawer .drawer-section,
:root[data-theme="light"] body #site-drawer .drawer-account-panel,
:root[data-theme="light"] body #site-drawer .drawer-user-spotlight,
:root[data-theme="light"] body #site-drawer .drawer-theme-spotlight {
  background: rgba(255, 255, 255, .72) !important;
  border-color: rgba(120, 144, 180, .22) !important;
}

:root[data-theme="light"] body #site-drawer .drawer-link,
:root[data-theme="light"] body #site-drawer button.drawer-link {
  background: rgba(255, 255, 255, .62) !important;
  border-color: rgba(120, 144, 180, .2) !important;
  color: color-mix(in srgb, var(--text-primary) 88%, var(--text-muted)) !important;
}

@media (max-width: 23rem) {
  html[data-theme] body #site-drawer .drawer-link-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@font-face {
  font-family: "Peyda Persian";
  src: url("../fonts/Peyda/PeydaWebFaNum-Regular.08d68e122331.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200D, U+FB50-FDFF, U+FE70-FEFF;
}

@font-face {
  font-family: "Peyda Persian";
  src: url("../fonts/Peyda/PeydaWebFaNum-Medium.ed4307be5244.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200D, U+FB50-FDFF, U+FE70-FEFF;
}

@font-face {
  font-family: "Peyda Persian";
  src: url("../fonts/Peyda/PeydaWebFaNum-SemiBold.b0922af5ffe8.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200D, U+FB50-FDFF, U+FE70-FEFF;
}

@font-face {
  font-family: "Peyda Persian";
  src: url("../fonts/Peyda/PeydaWebFaNum-Bold.41c5ae5438ce.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200D, U+FB50-FDFF, U+FE70-FEFF;
}

@font-face {
  font-family: "Peyda Persian";
  src: url("../fonts/Peyda/PeydaWebFaNum-ExtraBold.d65b3ea6fce7.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200D, U+FB50-FDFF, U+FE70-FEFF;
}

@font-face {
  font-family: "Peyda Persian";
  src: url("../fonts/Peyda/PeydaWebFaNum-Black.f2327480b771.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200D, U+FB50-FDFF, U+FE70-FEFF;
}

html[data-theme] body [data-no-digit-localize] {
  font-family: "Inter", "Peyda Persian", "Segoe UI", Arial, sans-serif !important;
  font-variant-numeric: tabular-nums lining-nums !important;
  font-feature-settings: "tnum" 1, "lnum" 1 !important;
}

/* Keep the mobile header search action inside the input, matching desktop placement. */
@media (max-width: 63.998rem) {
  html[data-theme][data-theme] body .header-search-form {
    position: relative !important;
    min-height: 0 !important;
  }

  html[data-theme][data-theme] body .header-search-form .search-input {
    height: 48px !important;
    min-height: 48px !important;
  }

  html[dir="rtl"][data-theme][data-theme] body .header-search-form .search-input {
    padding-left: 3.05rem !important;
    padding-right: .95rem !important;
  }

  html[dir="ltr"][data-theme][data-theme] body .header-search-form .search-input {
    padding-right: 3.05rem !important;
    padding-left: .95rem !important;
  }

  html[data-theme][data-theme] body .header-search-form .header-search-submit.header-search-submit[aria-label] {
    position: absolute !important;
    inset-block-start: 50% !important;
    width: 2.25rem !important;
    min-width: 2.25rem !important;
    max-width: 2.25rem !important;
    height: 2.25rem !important;
    min-height: 2.25rem !important;
    max-height: 2.25rem !important;
    margin: 0 !important;
    transform: translateY(-50%) !important;
    z-index: 2;
  }

  html[dir="rtl"][data-theme][data-theme] body .header-search-form .header-search-submit.header-search-submit[aria-label] {
    inset-inline-start: .45rem !important;
    inset-inline-end: auto !important;
    left: .45rem !important;
    right: auto !important;
  }

  html[dir="ltr"][data-theme][data-theme] body .header-search-form .header-search-submit.header-search-submit[aria-label] {
    inset-inline-end: .45rem !important;
    inset-inline-start: auto !important;
    right: .45rem !important;
    left: auto !important;
  }
}

html[data-theme] body .add-rfq-modal .add-rfq-submit-action.add-rfq-submit-action:not([aria-disabled="true"]) {
  --glass-button-accent: #60a5fa;
  --glass-button-fill: color-mix(in srgb, #2563eb 64%, rgba(11, 13, 16, 0.76));
  --glass-button-border: color-mix(in srgb, #60a5fa 46%, rgba(255, 255, 255, 0.14));
  --glass-button-glow: color-mix(in srgb, #60a5fa 14%, transparent);
  border-color: var(--glass-button-border) !important;
  background:
    radial-gradient(circle at 82% 14%, var(--glass-button-glow), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.018)),
    var(--glass-button-fill) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}