/* Sanitary Industrial Professional — shared design system */
:root {
  --surface: #f8f9ff; --surface-dim: #cbdbf5; --surface-bright: #f8f9ff;
  --surface-container-lowest: #ffffff; --surface-container-low: #eff4ff;
  --surface-container: #e5eeff; --surface-container-high: #dce9ff;
  --surface-container-highest: #d3e4fe; --on-surface: #0b1c30;
  --on-surface-variant: #424752; --inverse-surface: #213145;
  --inverse-on-surface: #eaf1ff; --outline: #727783; --outline-variant: #c2c6d4;
  --surface-tint: #055cb9; --primary: #00448c; --on-primary: #ffffff;
  --primary-container: #005bb7; --on-primary-container: #c4d7ff;
  --inverse-primary: #aac7ff; --secondary: #00658d; --on-secondary: #ffffff;
  --secondary-container: #2dbcfe; --on-secondary-container: #004866;
  --tertiary: #005121; --on-tertiary: #ffffff; --tertiary-container: #006c2e;
  --on-tertiary-container: #5df284; --error: #ba1a1a; --on-error: #ffffff;
  --error-container: #ffdad6; --on-error-container: #93000a;
  --action-orange: #f97316; --action-orange-dark: #c2410c;
  --font-family: 'Inter', Arial, sans-serif;
  --display-lg: 48px; --headline-lg: 32px; --headline-lg-mobile: 28px;
  --headline-md: 24px; --body-lg: 18px; --body-md: 16px; --label-md: 14px; --code-sm: 12px;
  --radius-sm: 2px; --radius: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; --radius-full: 9999px;
  --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px;
  --gutter: 24px; --margin-mobile: 16px; --margin-desktop: 64px; --max-width: 1280px;
  --border: 1px solid #e2e8f0; --shadow-hover: 0 4px 12px rgba(0, 0, 0, .05);
}

html, body { font-family: var(--font-family); color: var(--on-surface); background: var(--surface); }
.ds-display-lg { font: 700 var(--display-lg)/56px var(--font-family); letter-spacing: -.02em; }
.ds-headline-lg { font: 600 var(--headline-lg)/40px var(--font-family); letter-spacing: -.01em; }
.ds-headline-md { font: 600 var(--headline-md)/32px var(--font-family); }
.ds-body-lg { font: 400 var(--body-lg)/28px var(--font-family); }
.ds-body-md { font: 400 var(--body-md)/24px var(--font-family); }
.ds-label-md { font: 500 var(--label-md)/20px var(--font-family); letter-spacing: .05em; }
.ds-code-sm, .ds-meta { font: 400 var(--code-sm)/16px var(--font-family); font-variant-numeric: tabular-nums; }
.ds-eyebrow { color: var(--primary); font-size: 11px; line-height: 16px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }

.ds-surface { background: var(--surface-container-lowest); border: var(--border); }
.ds-surface-tonal { background: var(--surface-container-low); }
.ds-card { background: var(--surface-container-lowest); border: var(--border); border-radius: var(--radius); transition: box-shadow .2s, transform .2s; }
.ds-card:hover { box-shadow: var(--shadow-hover); }
.ds-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm); min-height: 40px; border: 0; border-radius: var(--radius); padding: 0 var(--space-md); font: 500 var(--label-md)/20px var(--font-family); cursor: pointer; transition: .2s; }
.ds-btn:hover { transform: translateY(-1px); }
.ds-btn-primary { color: var(--on-primary); background: var(--primary-container); }
.ds-btn-primary:hover { background: var(--primary); }
.ds-btn-quote { color: #fff; background: var(--action-orange); }
.ds-btn-quote:hover { background: var(--action-orange-dark); }
.ds-btn-secondary { color: var(--primary); background: transparent; border: 1px solid var(--primary); }
.ds-btn-secondary:hover { background: var(--surface-container-low); }

.ds-input, .ds-select { width: 100%; min-height: 44px; border: 1px solid var(--outline-variant); border-radius: var(--radius); background: var(--surface-container-lowest); color: var(--on-surface); padding: 0 var(--space-md); outline: 0; font: 400 var(--body-md)/24px var(--font-family); }
.ds-input:focus, .ds-select:focus { border-color: var(--primary-container); box-shadow: 0 0 0 3px rgba(0, 91, 183, .14); }
.ds-quantity { display: inline-flex; align-items: center; border: 1px solid var(--outline-variant); border-radius: var(--radius); overflow: hidden; }
.ds-quantity button { width: 44px; height: 44px; border: 0; color: var(--primary); background: var(--surface-container-low); font-size: 22px; cursor: pointer; }
.ds-quantity input { width: 58px; height: 44px; border: 0; border-inline: 1px solid var(--outline-variant); text-align: center; font-variant-numeric: tabular-nums; outline: 0; }

.ds-badge { display: inline-flex; align-items: center; min-height: 24px; border-radius: var(--radius); padding: 0 8px; background: rgba(45, 190, 254, .16); color: var(--on-secondary-container); font-size: 11px; line-height: 16px; font-weight: 500; }
.ds-badge-eco { background: #dcfce7; color: var(--tertiary); }
.ds-badge-sale { background: #ffedd5; color: var(--action-orange-dark); }
.ds-pack-size { display: inline-flex; padding: 4px 8px; border-radius: var(--radius); background: var(--surface-container-lowest); color: var(--on-surface-variant); font-size: 10px; line-height: 16px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.ds-status { display: inline-flex; align-items: center; gap: 7px; color: var(--on-surface-variant); font-size: 12px; }
.ds-status::before { content: ''; width: 9px; height: 9px; border-radius: var(--radius-full); background: #22c55e; }
.ds-status-low::before { background: #f97316; } .ds-status-backordered::before { background: #ef4444; }

.ds-table-wrap { overflow-x: auto; border: var(--border); border-radius: var(--radius); background: var(--surface-container-lowest); }
.ds-table { width: 100%; border-collapse: collapse; font-size: var(--body-md); font-variant-numeric: tabular-nums; }
.ds-table th, .ds-table td { padding: 12px 16px; border-bottom: var(--border); text-align: left; }
.ds-table th { color: var(--on-surface-variant); background: var(--surface-container-low); font-size: 12px; line-height: 16px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; }
.ds-table tbody tr:nth-child(even) { background: #f8fafc; } .ds-table tbody tr:last-child td { border-bottom: 0; }

@media (max-width: 767px) { .ds-display-lg { font-size: var(--headline-lg-mobile); line-height: 36px; } .ds-headline-lg { font-size: var(--headline-lg-mobile); line-height: 36px; } }