/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme {
  :root, :host {
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
      "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
      "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --spacing: 0.25rem;
    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
  }
}
@layer utilities {
  .collapse {
    visibility: collapse;
  }
  .invisible {
    visibility: hidden;
  }
  .visible {
    visibility: visible;
  }
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
  }
  .absolute {
    position: absolute;
  }
  .fixed {
    position: fixed;
  }
  .relative {
    position: relative;
  }
  .static {
    position: static;
  }
  .sticky {
    position: sticky;
  }
  .row-1 {
    grid-row: 1;
  }
  .row-2 {
    grid-row: 2;
  }
  .row-5 {
    grid-row: 5;
  }
  .row-6 {
    grid-row: 6;
  }
  .row-10 {
    grid-row: 10;
  }
  .row-11 {
    grid-row: 11;
  }
  .row-12 {
    grid-row: 12;
  }
  .container {
    width: 100%;
    @media (width >= 40rem) {
      max-width: 40rem;
    }
    @media (width >= 48rem) {
      max-width: 48rem;
    }
    @media (width >= 64rem) {
      max-width: 64rem;
    }
    @media (width >= 80rem) {
      max-width: 80rem;
    }
    @media (width >= 96rem) {
      max-width: 96rem;
    }
  }
  .m-639 {
    margin: calc(var(--spacing) * 639);
  }
  .m-681 {
    margin: calc(var(--spacing) * 681);
  }
  .block {
    display: block;
  }
  .contents {
    display: contents;
  }
  .flex {
    display: flex;
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }
  .inline {
    display: inline;
  }
  .inline-block {
    display: inline-block;
  }
  .inline-flex {
    display: inline-flex;
  }
  .table {
    display: table;
  }
  .transform {
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  }
  .resize {
    resize: both;
  }
  .justify-around {
    justify-content: space-around;
  }
  .justify-between {
    justify-content: space-between;
  }
  .justify-center {
    justify-content: center;
  }
  .justify-end {
    justify-content: flex-end;
  }
  .justify-evenly {
    justify-content: space-evenly;
  }
  .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .align-baseline {
    vertical-align: baseline;
  }
  .break-words {
    overflow-wrap: break-word;
  }
  .lowercase {
    text-transform: lowercase;
  }
  .italic {
    font-style: italic;
  }
  .underline {
    text-decoration-line: underline;
  }
  .shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }
  .blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .filter {
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
}
:root {
  --hi-focus-ring: #0d4e46;
  --hi-focus-ring-width: 2px;
  --hi-focus-ring-offset: 2px;
  --hi-button-primary-bg: #ffd800;
  --hi-button-primary-hover: #ffea00;
  --hi-button-primary-text: #2b2b2b;
  --hi-button-secondary-bg: #6c757d;
  --hi-button-secondary-hover: #5a6268;
  --hi-button-secondary-text: #ffffff;
  --hi-button-tertiary-bg: transparent;
  --hi-button-tertiary-hover: #ececec;
  --hi-button-tertiary-text: #2b2b2b;
  --hi-button-tertiary-border: #2b2b2b;
  --hi-button-warning-bg: #dc3545;
  --hi-button-warning-hover: #c82333;
  --hi-button-warning-text: #ffffff;
  --hi-button-success-bg: #4e9758;
  --hi-button-success-hover: #3d8540;
  --hi-button-success-text: #ffffff;
  --hi-button-disabled-bg: #eeeeee;
  --hi-button-disabled-text: #909090;
  --hi-button-font-family: MuseoSansRounded-700, 'MuseoSansRounded-700 Fallback', -apple-system, BlinkMacSystemFont,
    'Segoe UI', sans-serif;
  --hi-button-font-size: 15px;
  --hi-button-line-height: 20px;
  --hi-button-padding-x: 24px;
  --hi-button-padding-y: 6px;
  --hi-button-gap: 8px;
  --hi-button-radius: 6px;
  --hi-button-border-width: 2px;
  --hi-button-transition: all 0.2s;
  --hi-text-color-primary: #007bff;
  --hi-text-color-secondary: #6c757d;
  --hi-text-color-muted: #6c757d;
  --hi-text-color-error: #dc3545;
  --hi-text-color-success: #28a745;
  --hi-text-font-family: MuseoSansRounded-300, 'MuseoSansRounded-300 Fallback', -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, sans-serif;
  --hi-text-font-family-heading: MuseoSansRounded-700, 'MuseoSansRounded-700 Fallback', -apple-system, BlinkMacSystemFont,
    'Segoe UI', sans-serif;
  --hi-text-font-family-code: 'Courier New', Courier, monospace;
  --hi-text-color-base: #2b2b2b;
  --hi-text-size-h1: clamp(1.5rem, 4vw, 2rem);
  --hi-text-size-h2: clamp(1.25rem, 3.25vw, 1.625rem);
  --hi-text-size-h3: clamp(1.125rem, 2.75vw, 1.375rem);
  --hi-text-size-h4: clamp(1rem, 2.375vw, 1.1875rem);
  --hi-text-size-h5: clamp(0.9375rem, 2.125vw, 1.0625rem);
  --hi-text-size-h6: clamp(0.875rem, 2vw, 1rem);
  --hi-text-size-body-large: clamp(0.9375rem, 2vw, 1.25rem);
  --hi-text-size-body: 0.875rem;
  --hi-text-margin-body: 0.75rem;
  --hi-text-size-body-small: 0.8125rem;
  --hi-text-size-caption: 0.75rem;
  --hi-text-size-code: 0.875em;
  --hi-text-line-height-heading: 1.2;
  --hi-text-line-height-body: 1.5;
  --hi-text-line-height-tight: 1.25;
  --hi-text-weight-normal: 400;
  --hi-text-weight-medium: 500;
  --hi-text-weight-semibold: 600;
  --hi-text-weight-bold: 700;
  --hi-flex-gap-xs: 0.25rem;
  --hi-flex-gap-sm: 0.5rem;
  --hi-flex-gap-md: 1rem;
  --hi-flex-gap-lg: 1.5rem;
  --hi-flex-gap-xl: 2rem;
  --hi-input-border-color: #d1d5db;
  --hi-input-border-color-hover: #9ca3af;
  --hi-input-border-color-focus: #3b82f6;
  --hi-input-border-color-error: #ef4444;
  --hi-input-border-color-success: #10b981;
  --hi-input-bg: #ffffff;
  --hi-input-bg-disabled: #f3f4f6;
  --hi-input-bg-readonly: #f9fafb;
  --hi-input-text-color: #2b2b2b;
  --hi-input-text-color-placeholder: #9ca3af;
  --hi-input-text-color-disabled: #6b7280;
  --hi-input-padding-sm: 0.375rem 0.625rem;
  --hi-input-padding-md: 0.5rem 0.75rem;
  --hi-input-padding-lg: 0.625rem 1rem;
  --hi-input-font-size-sm: 0.875rem;
  --hi-input-font-size-md: 1rem;
  --hi-input-font-size-lg: 1.125rem;
  --hi-input-line-height-sm: 1.25rem;
  --hi-input-line-height-md: 1.5rem;
  --hi-input-line-height-lg: 1.75rem;
  --hi-input-border-radius: 0.375rem;
  --hi-input-focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
@font-face {
  font-family: 'MuseoSansRounded-300';
  src: url(fonts/MuseoSansRounded-300.woff2) format('woff2'), url(fonts/MuseoSansRounded-300.woff) format('woff');
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'MuseoSansRounded-300 Fallback';
  src: local('Arial'), local('ArialMT');
  ascent-override: 93.958%;
  descent-override: 25.9884%;
  line-gap-override: 0%;
  size-adjust: 100.0447%;
}
@font-face {
  font-family: 'MuseoSansRounded-500 Fallback';
  src: local('Arial'), local('ArialMT');
  ascent-override: 92.3024%;
  descent-override: 25.5304%;
  line-gap-override: 0%;
  size-adjust: 101.8392%;
}
@font-face {
  font-family: 'MuseoSansRounded-700 Fallback';
  src: local('Arial'), local('ArialMT');
  ascent-override: 90.7041%;
  descent-override: 25.0884%;
  line-gap-override: 0%;
  size-adjust: 103.6337%;
}
@font-face {
  font-family: 'MuseoSansRounded-500';
  src: url(fonts/MuseoSansRounded-500.woff2) format('woff2'), url(fonts/MuseoSansRounded-500.woff) format('woff');
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'MuseoSansRounded-700';
  src: url(fonts/MuseoSansRounded-700.woff2) format('woff2'), url(fonts/MuseoSansRounded-700.woff) format('woff');
  font-style: normal;
  font-display: swap;
}
button.hi-ui.tw-btn-base, a.hi-ui.tw-btn-base, .hi-ui.tw-btn-base {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  text-decoration: none !important;
  vertical-align: baseline !important;
  height: -moz-fit-content;
  height: fit-content;
  gap: var(--hi-button-gap);
  font-family: var(--hi-button-font-family);
  font-size: var(--hi-button-font-size);
  line-height: var(--hi-button-line-height);
  text-transform: uppercase;
  border: var(--hi-button-border-width) solid transparent;
  border-radius: var(--hi-button-radius);
  transition: var(--hi-button-transition);
  cursor: pointer;
  font-weight: normal;
  margin: 0;
}
a.hi-ui.tw-btn-base {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  user-select: none !important;
}
.hi-ui.tw-btn-base:focus {
  outline: none !important;
}
.hi-ui.tw-btn-base:focus-visible {
  outline: var(--hi-focus-ring-width) solid var(--hi-focus-ring) !important;
  outline-offset: var(--hi-focus-ring-offset);
}
button.hi-ui.tw-btn-primary, a.hi-ui.tw-btn-primary, .hi-ui.tw-btn-primary {
  background-color: var(--hi-button-primary-bg);
  color: var(--hi-button-primary-text);
  border-color: transparent;
}
button.hi-ui.tw-btn-primary:hover:not(:disabled):not(.tw-btn-disabled), a.hi-ui.tw-btn-primary:hover:not(:disabled):not(.tw-btn-disabled), .hi-ui.tw-btn-primary:hover:not(:disabled):not(.tw-btn-disabled) {
  background-color: var(--hi-button-primary-hover);
}
button.hi-ui.tw-btn-secondary, a.hi-ui.tw-btn-secondary, .hi-ui.tw-btn-secondary {
  background-color: var(--hi-button-secondary-bg);
  color: var(--hi-button-secondary-text);
  border-color: transparent;
}
button.hi-ui.tw-btn-secondary:hover:not(:disabled):not(.tw-btn-disabled), a.hi-ui.tw-btn-secondary:hover:not(:disabled):not(.tw-btn-disabled), .hi-ui.tw-btn-secondary:hover:not(:disabled):not(.tw-btn-disabled) {
  background-color: var(--hi-button-secondary-hover);
}
button.hi-ui.tw-btn-tertiary, a.hi-ui.tw-btn-tertiary, .hi-ui.tw-btn-tertiary {
  background-color: var(--hi-button-tertiary-bg);
  color: var(--hi-button-tertiary-text);
  border: var(--hi-button-border-width) solid var(--hi-button-tertiary-border);
}
button.hi-ui.tw-btn-tertiary:hover:not(:disabled):not(.tw-btn-disabled), a.hi-ui.tw-btn-tertiary:hover:not(:disabled):not(.tw-btn-disabled), .hi-ui.tw-btn-tertiary:hover:not(:disabled):not(.tw-btn-disabled) {
  background-color: var(--hi-button-tertiary-hover);
}
button.hi-ui.tw-btn-warning, a.hi-ui.tw-btn-warning, .hi-ui.tw-btn-warning {
  background-color: var(--hi-button-warning-bg);
  color: var(--hi-button-warning-text);
  border-color: transparent;
}
button.hi-ui.tw-btn-warning:hover:not(:disabled):not(.tw-btn-disabled), a.hi-ui.tw-btn-warning:hover:not(:disabled):not(.tw-btn-disabled), .hi-ui.tw-btn-warning:hover:not(:disabled):not(.tw-btn-disabled) {
  background-color: var(--hi-button-warning-hover);
}
button.hi-ui.tw-btn-success, a.hi-ui.tw-btn-success, .hi-ui.tw-btn-success {
  background-color: var(--hi-button-success-bg);
  color: var(--hi-button-success-text);
  border-color: transparent;
}
button.hi-ui.tw-btn-success:hover:not(:disabled):not(.tw-btn-disabled), a.hi-ui.tw-btn-success:hover:not(:disabled):not(.tw-btn-disabled), .hi-ui.tw-btn-success:hover:not(:disabled):not(.tw-btn-disabled) {
  background-color: var(--hi-button-success-hover);
}
button.hi-ui.tw-btn-size-small, a.hi-ui.tw-btn-size-small, .hi-ui.tw-btn-size-small {
  padding: calc(var(--hi-button-padding-y) * 0.75 + 0.5px) calc(var(--hi-button-padding-x) * 0.75) calc(var(--hi-button-padding-y) * 0.75 - 0.5px);
  font-size: calc(var(--hi-button-font-size) * 0.875);
}
button.hi-ui.tw-btn-size-medium, a.hi-ui.tw-btn-size-medium, .hi-ui.tw-btn-size-medium {
  padding: calc(var(--hi-button-padding-y) * 0.75 + 1px) calc(var(--hi-button-padding-x) * 0.75) calc(var(--hi-button-padding-y) * 0.75 - 1px);
  font-size: calc(var(--hi-button-font-size) * 0.875);
}
button.hi-ui.tw-btn-size-large, a.hi-ui.tw-btn-size-large, .hi-ui.tw-btn-size-large {
  padding: calc(var(--hi-button-padding-y) * 1.25 - 0.5px) calc(var(--hi-button-padding-x) * 1.25) calc(var(--hi-button-padding-y) * 1.25 + 0.5px);
  font-size: calc(var(--hi-button-font-size) * 1.125);
}
button.hi-ui.tw-btn-disabled, a.hi-ui.tw-btn-disabled, .hi-ui.tw-btn-disabled, button.hi-ui:disabled, a.hi-ui:disabled {
  background-color: var(--hi-button-disabled-bg) !important;
  color: var(--hi-button-disabled-text) !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  border-color: transparent !important;
  opacity: 1 !important;
}
button.hi-ui.tw-w-full, a.hi-ui.tw-w-full, .hi-ui.tw-w-full {
  width: 100%;
}
button.hi-ui.tw-w-auto, a.hi-ui.tw-w-auto, .hi-ui.tw-w-auto {
  width: auto;
}
.hi-ui-text {
  margin: 0;
  padding: 0;
  font-family: var(--hi-text-font-family);
  color: var(--hi-text-color-base);
}
.hi-ui-text-heading-1, .hi-ui-text-heading-2, .hi-ui-text-heading-3, .hi-ui-text-heading-4, .hi-ui-text-heading-5, .hi-ui-text-heading-6 {
  font-family: var(--hi-text-font-family-heading);
  font-weight: var(--hi-text-weight-normal);
  line-height: var(--hi-text-line-height-heading);
}
.hi-ui-text-heading-1 {
  font-size: var(--hi-text-size-h1);
  margin-top: 2rem;
  margin-bottom: 1rem;
}
.hi-ui-text-heading-2 {
  font-size: var(--hi-text-size-h2);
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}
.hi-ui-text-heading-3 {
  font-size: var(--hi-text-size-h3);
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}
.hi-ui-text-heading-4 {
  font-size: var(--hi-text-size-h4);
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}
.hi-ui-text-heading-5 {
  font-size: var(--hi-text-size-h5);
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}
.hi-ui-text-heading-6 {
  font-size: var(--hi-text-size-h6);
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}
.hi-ui-text-body-large {
  font-size: var(--hi-text-size-body-large);
  line-height: var(--hi-text-line-height-body);
  margin-bottom: 1rem;
}
.hi-ui-text-body {
  font-size: var(--hi-text-size-body);
  line-height: var(--hi-text-line-height-body);
  margin-bottom: var(--hi-text-margin-body);
}
.hi-ui-text-body-small {
  font-size: var(--hi-text-size-body-small);
  line-height: var(--hi-text-line-height-body);
  margin-bottom: 0.5rem;
}
.hi-ui-text-label {
  font-size: var(--hi-text-size-body-small);
  font-weight: var(--hi-text-weight-medium);
  line-height: var(--hi-text-line-height-tight);
  display: inline-block;
}
.hi-ui-text-caption {
  font-size: var(--hi-text-size-caption);
  line-height: var(--hi-text-line-height-body);
  color: var(--hi-text-color-muted);
}
.hi-ui-text-error {
  font-size: var(--hi-text-size-body-small);
  color: var(--hi-text-color-error);
  line-height: var(--hi-text-line-height-body);
}
.hi-ui-text-success {
  font-size: var(--hi-text-size-body-small);
  color: var(--hi-text-color-success);
  line-height: var(--hi-text-line-height-body);
}
.hi-ui-text-muted {
  color: var(--hi-text-color-muted);
}
.hi-ui-text-inline {
  display: inline;
}
.hi-ui-text-code {
  font-family: var(--hi-text-font-family-code);
  font-size: var(--hi-text-size-code);
  padding: 0.125rem 0.25rem;
  background-color: #f5f5f5;
  border: 1px solid #e0e0e0;
  border-radius: 3px;
}
.hi-ui-text-color-primary {
  color: var(--hi-text-color-primary);
}
.hi-ui-text-color-secondary {
  color: var(--hi-text-color-secondary);
}
.hi-ui-text-color-muted {
  color: var(--hi-text-color-muted);
}
.hi-ui-text-color-error {
  color: var(--hi-text-color-error);
}
.hi-ui-text-color-success {
  color: var(--hi-text-color-success);
}
.hi-ui-text-bold {
  font-family: MuseoSansRounded-700, 'MuseoSansRounded-700 Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
.hi-ui-text-align-left {
  text-align: left;
}
.hi-ui-text-align-center {
  text-align: center;
}
.hi-ui-text-align-right {
  text-align: right;
}
.hi-ui-text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
input.hi-ui-input, textarea.hi-ui-input, .hi-ui-input {
  font-family: var(--hi-text-font-family);
  color: var(--hi-input-text-color);
  background-color: var(--hi-input-bg);
  border: 1px solid var(--hi-input-border-color);
  border-radius: var(--hi-input-border-radius);
  outline: none;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  width: auto;
  display: inline-block;
}
input.hi-ui-input::-moz-placeholder, textarea.hi-ui-input::-moz-placeholder, .hi-ui-input::-moz-placeholder {
  color: var(--hi-input-text-color-placeholder);
  opacity: 1;
}
input.hi-ui-input::placeholder, textarea.hi-ui-input::placeholder, .hi-ui-input::placeholder {
  color: var(--hi-input-text-color-placeholder);
  opacity: 1;
}
input.hi-ui-input:hover:not(:disabled):not(:-moz-read-only), textarea.hi-ui-input:hover:not(:disabled):not(:-moz-read-only), .hi-ui-input:hover:not(:disabled):not(:-moz-read-only) {
  border-color: var(--hi-input-border-color-hover);
}
input.hi-ui-input:hover:not(:disabled):not(:read-only), textarea.hi-ui-input:hover:not(:disabled):not(:read-only), .hi-ui-input:hover:not(:disabled):not(:read-only) {
  border-color: var(--hi-input-border-color-hover);
}
input.hi-ui-input:focus, textarea.hi-ui-input:focus, .hi-ui-input:focus {
  border-color: var(--hi-input-border-color-focus);
  box-shadow: var(--hi-input-focus-ring);
}
input.hi-ui-input-size-sm, textarea.hi-ui-input-size-sm, .hi-ui-input-size-sm {
  padding: var(--hi-input-padding-sm);
  font-size: var(--hi-input-font-size-sm);
  line-height: var(--hi-input-line-height-sm);
}
input.hi-ui-input-size-md, textarea.hi-ui-input-size-md, .hi-ui-input-size-md {
  padding: var(--hi-input-padding-sm);
  font-size: var(--hi-input-font-size-sm);
  line-height: var(--hi-input-line-height-sm);
}
input.hi-ui-input-size-lg, textarea.hi-ui-input-size-lg, .hi-ui-input-size-lg {
  padding: var(--hi-input-padding-lg);
  font-size: var(--hi-input-font-size-lg);
  line-height: var(--hi-input-line-height-lg);
}
input.hi-ui-input-state-error, textarea.hi-ui-input-state-error, .hi-ui-input-state-error {
  border-color: var(--hi-input-border-color-error);
}
input.hi-ui-input-state-error:focus, textarea.hi-ui-input-state-error:focus, .hi-ui-input-state-error:focus {
  border-color: var(--hi-input-border-color-error);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}
input.hi-ui-input-state-success, textarea.hi-ui-input-state-success, .hi-ui-input-state-success {
  border-color: var(--hi-input-border-color-success);
}
input.hi-ui-input-state-success:focus, textarea.hi-ui-input-state-success:focus, .hi-ui-input-state-success:focus {
  border-color: var(--hi-input-border-color-success);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}
input.hi-ui-input-disabled, textarea.hi-ui-input-disabled, .hi-ui-input-disabled, input.hi-ui-input:disabled, textarea.hi-ui-input:disabled, .hi-ui-input:disabled {
  background-color: var(--hi-input-bg-disabled);
  color: var(--hi-input-text-color-disabled);
  cursor: not-allowed;
  opacity: 0.6;
}
input.hi-ui-input:-moz-read-only, textarea.hi-ui-input:-moz-read-only, .hi-ui-input:-moz-read-only {
  background-color: var(--hi-input-bg-readonly);
  cursor: default;
}
input.hi-ui-input-readonly, textarea.hi-ui-input-readonly, .hi-ui-input-readonly, input.hi-ui-input:read-only, textarea.hi-ui-input:read-only, .hi-ui-input:read-only {
  background-color: var(--hi-input-bg-readonly);
  cursor: default;
}
input.hi-ui-input-full-width, textarea.hi-ui-input-full-width, .hi-ui-input-full-width {
  width: 100%;
  display: block;
  box-sizing: border-box;
}
select.hi-ui-select, .hi-ui-select {
  font-family: var(--hi-text-font-family);
  color: var(--hi-input-text-color);
  background-color: var(--hi-input-bg);
  border: 1px solid var(--hi-input-border-color);
  border-radius: var(--hi-input-border-radius);
  outline: none;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  width: auto;
  display: inline-block;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2710%27 height=%276%27 viewBox=%270 0 10 6%27%3E%3Cpath fill=%27%232b2b2b%27 d=%27M1 0L5 4L9 0L10 1L5 6L0 1z%27/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.625rem center;
  background-size: 10px 6px;
}
select.hi-ui-select:hover:not(:disabled), .hi-ui-select:hover:not(:disabled) {
  border-color: var(--hi-input-border-color-hover);
}
select.hi-ui-select:focus, .hi-ui-select:focus {
  border-color: var(--hi-input-border-color-focus);
  box-shadow: var(--hi-input-focus-ring);
}
select.hi-ui-select-size-sm, .hi-ui-select-size-sm {
  padding: var(--hi-input-padding-sm);
  padding-right: 2rem;
  font-size: var(--hi-input-font-size-sm);
  line-height: var(--hi-input-line-height-sm);
}
select.hi-ui-select-size-md, .hi-ui-select-size-md {
  padding: var(--hi-input-padding-sm);
  padding-right: 2rem;
  font-size: var(--hi-input-font-size-sm);
  line-height: var(--hi-input-line-height-sm);
}
select.hi-ui-select-size-lg, .hi-ui-select-size-lg {
  padding: var(--hi-input-padding-lg);
  padding-right: 2.5rem;
  font-size: var(--hi-input-font-size-lg);
  line-height: var(--hi-input-line-height-lg);
}
select.hi-ui-select-state-error, .hi-ui-select-state-error {
  border-color: var(--hi-input-border-color-error);
}
select.hi-ui-select-state-error:focus, .hi-ui-select-state-error:focus {
  border-color: var(--hi-input-border-color-error);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}
select.hi-ui-select-state-success, .hi-ui-select-state-success {
  border-color: var(--hi-input-border-color-success);
}
select.hi-ui-select-state-success:focus, .hi-ui-select-state-success:focus {
  border-color: var(--hi-input-border-color-success);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}
select.hi-ui-select-disabled, .hi-ui-select-disabled, select.hi-ui-select:disabled, .hi-ui-select:disabled {
  background-color: var(--hi-input-bg-disabled);
  color: var(--hi-input-text-color-disabled);
  cursor: not-allowed;
  opacity: 0.6;
}
select.hi-ui-select-full-width, .hi-ui-select-full-width {
  width: 100%;
  display: block;
}
.hi-ui-form-label {
  margin: 0;
}
.hi-ui-form-input {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.hi-ui-form-button {
  width: 100%;
  box-sizing: border-box;
}
@media (min-width: 768px) {
  .hi-ui-form-container {
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: wrap;
    gap: 16px !important;
  }
  .hi-ui-form-label {
    min-width: 120px;
    flex-shrink: 0;
  }
  .hi-ui-form-input {
    max-width: 300px;
    width: auto;
  }
  .hi-ui-form-button {
    width: auto;
  }
  .hi-ui-form-actions {
    flex-shrink: 0;
  }
}
.hi-ui-mobile-force .hi-ui-form-container {
  flex-direction: column !important;
  align-items: flex-start !important;
}
.hi-ui-mobile-force .hi-ui-form-label {
  min-width: auto !important;
}
.hi-ui-mobile-force .hi-ui-form-input {
  width: 100% !important;
  max-width: 100% !important;
}
.hi-ui-mobile-force .hi-ui-form-button {
  width: 100% !important;
}
.hi-ui-flex {
  display: flex;
}
.hi-ui-flex-row {
  flex-direction: row;
}
.hi-ui-flex-column {
  flex-direction: column;
}
.hi-ui-flex-row-reverse {
  flex-direction: row-reverse;
}
.hi-ui-flex-column-reverse {
  flex-direction: column-reverse;
}
.hi-ui-flex-justify-start {
  justify-content: flex-start;
}
.hi-ui-flex-justify-end {
  justify-content: flex-end;
}
.hi-ui-flex-justify-center {
  justify-content: center;
}
.hi-ui-flex-justify-between {
  justify-content: space-between;
}
.hi-ui-flex-justify-around {
  justify-content: space-around;
}
.hi-ui-flex-justify-evenly {
  justify-content: space-evenly;
}
.hi-ui-flex-align-start {
  align-items: flex-start;
}
.hi-ui-flex-align-end {
  align-items: flex-end;
}
.hi-ui-flex-align-center {
  align-items: center;
}
.hi-ui-flex-align-baseline {
  align-items: baseline;
}
.hi-ui-flex-align-stretch {
  align-items: stretch;
}
.hi-ui-flex-gap-xs {
  gap: var(--hi-flex-gap-xs);
}
.hi-ui-flex-gap-sm {
  gap: var(--hi-flex-gap-sm);
}
.hi-ui-flex-gap-md {
  gap: var(--hi-flex-gap-md);
}
.hi-ui-flex-gap-lg {
  gap: var(--hi-flex-gap-lg);
}
.hi-ui-flex-gap-xl {
  gap: var(--hi-flex-gap-xl);
}
.hi-ui-flex-wrap {
  flex-wrap: wrap;
}
a.hi-ui-link, .hi-ui-link {
  color: var(--hi-text-color-base);
  font-family: MuseoSansRounded-700, 'MuseoSansRounded-700 Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  cursor: pointer;
  transition: opacity 0.15s ease-in-out;
}
a.hi-ui-link:hover:not(.hi-ui-link-disabled), .hi-ui-link:hover:not(.hi-ui-link-disabled) {
  opacity: 0.8;
}
a.hi-ui-link:focus-visible, .hi-ui-link:focus-visible {
  outline: var(--hi-focus-ring-width) solid var(--hi-focus-ring);
  outline-offset: var(--hi-focus-ring-offset);
}
a.hi-ui-link-underline, .hi-ui-link-underline {
  text-decoration: underline;
}
a.hi-ui-link-no-underline, .hi-ui-link-no-underline {
  text-decoration: none;
}
a.hi-ui-link-disabled, .hi-ui-link-disabled {
  color: #9ca3af;
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.6;
}
.hi-ui-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.hi-ui-list-style-disc {
  list-style-type: disc;
  padding-left: 1.5rem;
}
.hi-ui-list-style-circle {
  list-style-type: circle;
  padding-left: 1.5rem;
}
.hi-ui-list-style-square {
  list-style-type: square;
  padding-left: 1.5rem;
}
.hi-ui-list-style-decimal {
  list-style-type: decimal;
  padding-left: 1.5rem;
}
.hi-ui-list-style-lower-alpha {
  list-style-type: lower-alpha;
  padding-left: 1.5rem;
}
.hi-ui-list-style-upper-alpha {
  list-style-type: upper-alpha;
  padding-left: 1.5rem;
}
.hi-ui-list-style-lower-roman {
  list-style-type: lower-roman;
  padding-left: 1.5rem;
}
.hi-ui-list-style-upper-roman {
  list-style-type: upper-roman;
  padding-left: 1.5rem;
}
.hi-ui-image {
  display: block;
  max-width: 100%;
  height: auto;
}
.hi-ui-image-icon {
  display: inline-block;
  vertical-align: middle;
}
#hi-ui-page-root ul, #hi-ui-page-root ol {
  margin-top: 1rem;
  margin-bottom: 1rem;
  line-height: 1.6;
  font-size: var(--hi-text-size-body);
}
#hi-ui-page-root ul li, #hi-ui-page-root ol li {
  margin-bottom: 0.5rem;
}
#hi-ui-page-root ul li:last-child, #hi-ui-page-root ol li:last-child {
  margin-bottom: 0;
}
.hi-ui-text-heading-1:first-child, .hi-ui-text-heading-2:first-child, .hi-ui-text-heading-3:first-child, .hi-ui-text-heading-4:first-child, .hi-ui-text-heading-5:first-child, .hi-ui-text-heading-6:first-child {
  margin-top: 0;
}
@media (min-width: 768px) {
  :root {
    --hi-text-size-body: 1rem;
    --hi-text-margin-body: 1rem;
    --hi-text-size-body-small: 0.875rem;
  }
  input.hi-ui-input-size-md, textarea.hi-ui-input-size-md, .hi-ui-input-size-md {
    padding: var(--hi-input-padding-md);
    font-size: var(--hi-input-font-size-md);
    line-height: var(--hi-input-line-height-md);
  }
  button.hi-ui.tw-btn-size-medium, a.hi-ui.tw-btn-size-medium, .hi-ui.tw-btn-size-medium {
    padding: var(--hi-button-padding-y) var(--hi-button-padding-x);
    font-size: var(--hi-button-font-size);
  }
  select.hi-ui-select-size-md, .hi-ui-select-size-md {
    padding: var(--hi-input-padding-md);
    padding-right: 2.25rem;
    font-size: var(--hi-input-font-size-md);
    line-height: var(--hi-input-line-height-md);
  }
}
.hi-ui-page--reset .hi-ui-text {
  font-family: var(--hi-text-font-family);
  color: var(--hi-text-color-base);
}
.hi-ui-page--reset .hi-ui-text-heading-1, .hi-ui-page--reset .hi-ui-text-heading-2, .hi-ui-page--reset .hi-ui-text-heading-3, .hi-ui-page--reset .hi-ui-text-heading-4, .hi-ui-page--reset .hi-ui-text-heading-5, .hi-ui-page--reset .hi-ui-text-heading-6 {
  font-family: var(--hi-text-font-family-heading);
  font-weight: var(--hi-text-weight-normal);
  line-height: var(--hi-text-line-height-heading);
  letter-spacing: normal;
  background: none;
}
.hi-ui-page--reset .hi-ui-text-heading-1 {
  font-size: var(--hi-text-size-h1);
  margin-top: 2rem;
  margin-bottom: 1rem;
}
.hi-ui-page--reset .hi-ui-text-heading-2 {
  font-size: var(--hi-text-size-h2);
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}
.hi-ui-page--reset .hi-ui-text-body {
  font-size: var(--hi-text-size-body);
  line-height: var(--hi-text-line-height-body);
}
.hi-ui-page--reset ul, .hi-ui-page--reset ol {
  font-family: var(--hi-text-font-family);
}
.hi-ui-page--reset .hi-ui-text-error {
  color: var(--hi-text-color-error);
}
.hi-ui-page--reset .hi-ui-text-success {
  color: var(--hi-text-color-success);
}
.hi-ui-page--reset .hi-ui-text-color-error {
  color: var(--hi-text-color-error);
}
.hi-ui-page--reset .hi-ui-text-color-success {
  color: var(--hi-text-color-success);
}
.hi-ui-page--reset input.hi-ui-input, .hi-ui-page--reset textarea.hi-ui-input {
  font-family: var(--hi-text-font-family);
  font-size: var(--hi-input-font-size-sm);
  line-height: var(--hi-input-line-height-sm);
  color: var(--hi-input-text-color);
  background: var(--hi-input-bg);
  border: 1px solid var(--hi-input-border-color);
  border-radius: var(--hi-input-border-radius);
  padding: var(--hi-input-padding-sm);
}
.hi-ui-page--reset input.hi-ui-input-state-error, .hi-ui-page--reset textarea.hi-ui-input-state-error {
  border-color: var(--hi-input-border-color-error);
}
.hi-ui-page--reset input.hi-ui-input-state-success, .hi-ui-page--reset textarea.hi-ui-input-state-success {
  border-color: var(--hi-input-border-color-success);
}
.hi-ui-page--reset select.hi-ui-select {
  font-family: var(--hi-text-font-family);
  font-size: var(--hi-input-font-size-sm);
  line-height: var(--hi-input-line-height-sm);
  color: var(--hi-input-text-color);
  background-color: var(--hi-input-bg);
  border: 1px solid var(--hi-input-border-color);
  border-radius: var(--hi-input-border-radius);
  padding: var(--hi-input-padding-sm);
  padding-right: 2rem;
}
.hi-ui-page--reset select.hi-ui-select-state-error {
  border-color: var(--hi-input-border-color-error);
}
.hi-ui-page--reset select.hi-ui-select-state-success {
  border-color: var(--hi-input-border-color-success);
}
.hi-ui-page--reset a.hi-ui-link {
  color: var(--hi-text-color-base);
  font-family: MuseoSansRounded-700, 'MuseoSansRounded-700 Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 700;
}
.hi-ui-page--reset a.hi-ui-link-underline {
  text-decoration: underline;
}
.hi-ui-page--reset a.hi-ui-link:hover:not(.hi-ui-link-disabled) {
  opacity: 0.8;
  color: var(--hi-text-color-base);
}
#hi-ui-sidebar.hi-ui-sidebar {
  display: block;
  width: 230px;
  background: #d6d6d6;
  text-align: center;
  padding-top: 15px;
  float: left;
  border-top-right-radius: 15px;
}
@media (max-width: 768px) {
  #hi-ui-sidebar.hi-ui-sidebar {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100vh;
    z-index: 999;
    float: none;
    overflow-y: auto;
    background: #fff;
    border-top-right-radius: 0;
    padding: 60px 0 0 0;
    transition: right 0.3s ease;
    box-shadow: none;
    text-align: left;
  }
  #hi-ui-sidebar.hi-ui-sidebar.hi-ui-sidebar-open {
    right: 0;
  }
}
#hi-ui-sidebar .hi-ui-sidebar-logout-mobile {
  display: none;
}
#hi-ui-sidebar .hi-ui-cart-mobile {
  display: none;
}
#hi-ui-sidebar .hi-ui-cart-desktop {
  display: block;
}
#hi-ui-sidebar .hi-ui-cart-button {
  text-align: center;
  margin: 25px auto 0 auto;
}
#hi-ui-sidebar a.hi-ui-cart-button-link, #hi-ui-sidebar .hi-ui-cart-button-link {
  display: block;
  margin: 0 auto;
  transition: opacity 0.2s ease;
  text-decoration: none;
}
#hi-ui-sidebar a.hi-ui-cart-button-link:hover, #hi-ui-sidebar .hi-ui-cart-button-link:hover {
  opacity: 0.8;
}
#hi-ui-sidebar .hi-ui-cart-button-icon {
  display: block;
  width: 205px;
  height: 30px;
  margin: 0 auto;
}
#hi-ui-sidebar .hi-ui-resume-purchase-mobile {
  display: none;
}
#hi-ui-sidebar .hi-ui-resume-purchase-desktop {
  display: block;
}
@keyframes hi-ui-slide-down {
  from {
    max-height: 0;
    opacity: 0;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
  }
  to {
    max-height: 300px;
    opacity: 1;
    margin-top: 8px;
    margin-bottom: 12px;
    padding-top: 15px;
    padding-bottom: 15px;
    overflow: visible;
  }
}
@keyframes hi-ui-slide-up {
  from {
    max-height: 300px;
    opacity: 1;
    margin-top: 8px;
    margin-bottom: 12px;
    padding-top: 15px;
    padding-bottom: 15px;
    overflow: hidden;
  }
  to {
    max-height: 0;
    opacity: 0;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
  }
}
#hi-ui-sidebar .hi-ui-resume-purchase-box {
  background: #fef18f url(images/bg_side_resume.png) repeat-x top;
  border-radius: 8px;
  padding: 15px;
  border: 1px solid #fff7a7;
  width: 173px;
  color: #595224;
  text-shadow: 1px 1px 1px #fff;
  font-weight: 700;
  font-size: 13px;
  margin: 8px auto 12px auto;
  position: relative;
  animation: hi-ui-slide-down 0.4s ease-out forwards;
}
#hi-ui-sidebar .hi-ui-resume-purchase-box.hi-ui-closing {
  animation: hi-ui-slide-up 0.3s ease-in forwards;
}
#hi-ui-sidebar .hi-ui-resume-purchase-close {
  position: absolute;
  top: -5px;
  right: -5px;
}
#hi-ui-sidebar .hi-ui-resume-purchase-close-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: #71682e;
  border-radius: 50%;
  text-decoration: none;
  border: none;
  padding: 0;
  cursor: pointer;
  outline: none;
}
#hi-ui-sidebar .hi-ui-resume-purchase-close-link:hover {
  background: #5a5425;
}
#hi-ui-sidebar .hi-ui-resume-purchase-close-link img {
  width: 12px;
  height: 12px;
}
#hi-ui-sidebar #sideresume.hi-ui-resume-purchase-box .hi-ui-resume-purchase-title {
  font-size: 17px;
  padding: 0 0 5px 0;
  margin: 0;
  text-align: left;
  line-height: 1.2em;
}
#hi-ui-sidebar #sideresume.hi-ui-resume-purchase-box .hi-ui-resume-purchase-message {
  font-size: inherit;
  font-weight: normal;
  text-align: left;
  line-height: 1.2em;
  padding: 0;
  margin: 0;
}
#hi-ui-sidebar .hi-ui-resume-purchase-actions {
  margin-top: 10px;
}
#hi-ui-sidebar .hi-ui-resume-purchase-button, #hi-ui-sidebar #sideresume .hi-ui-resume-purchase-button, #hi-ui-sidebar #sideresume button.hi-ui-resume-purchase-button {
  font-size: 12px;
  display: block;
  background: #fff url(images/bg_btn_sideresume.png) repeat-x top;
  padding: 10px;
  text-decoration: none;
  margin-top: 10px;
  border: 1px solid #f6eb94;
  color: #595224;
  border-radius: 15px;
  box-shadow: 1px 1px 5px #ece28c;
  line-height: 1.6em;
  transition: all 0.2s ease;
  cursor: pointer;
  width: 100%;
  text-align: center;
  font-family: inherit;
  font-weight: normal;
  text-transform: none;
  box-sizing: border-box;
}
#hi-ui-sidebar .hi-ui-resume-purchase-button:hover {
  background: url(images/bg_btn_sideresume.png) 0 -7px;
  box-shadow: 1px 1px 5px #e0d687;
  text-decoration: none;
}
#hi-ui-sidebar .hi-ui-resume-purchase-icon {
  border: none;
  float: left;
  padding: 0 12px 0 5px;
  vertical-align: middle;
}
#hi-ui-sidebar .hi-ui-menu-section-title {
  padding-top: 10px;
  line-height: 2em;
  font-size: 20px;
  margin-top: 0;
  margin-bottom: 0;
  font-weight: normal;
  text-align: center;
}
#hi-ui-sidebar .hi-ui-menu-section-list, #hi-ui-sidebar ul.hi-ui-menu-section-list {
  margin-left: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-self: center;
  gap: 5px;
  padding-left: 0;
  margin: 0;
  width: auto;
}
#hi-ui-sidebar .hi-ui-menu-section:last-child .hi-ui-menu-section-list {
  padding-bottom: 32px;
}
#hi-ui-sidebar .hi-ui-menu-item {
  text-align: left;
  list-style: none;
  margin-bottom: 0;
}
#hi-ui-sidebar ul li a.hi-ui-menu-item-link, #hi-ui-sidebar li a.hi-ui-menu-item-link, #hi-ui-sidebar a.hi-ui-menu-item-link {
  padding-left: 32px;
  width: 205px !important;
  display: flex;
  align-items: center;
  height: 26px;
  text-decoration: none;
  background: #ebebeb url(images/btn_right_list_cropped.png) no-repeat top;
  position: relative;
  box-sizing: border-box;
  color: #2b2b2b;
  overflow: visible;
  padding-right: 0;
  text-overflow: clip;
  white-space: normal;
  line-height: normal;
  font-family: inherit;
}
#hi-ui-sidebar a.hi-ui-menu-item-link::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0);
  transition: background-color 0.2s ease;
  pointer-events: none;
  border-radius: 3px;
}
#hi-ui-sidebar a.hi-ui-menu-item-link:hover {
  opacity: 1;
}
#hi-ui-sidebar a.hi-ui-menu-item-link:hover::before {
  background-color: rgba(255, 255, 255, 0.3);
}
#hi-ui-sidebar .hi-ui-menu-item-text {
  display: inline-block;
  font-family: 'MuseoSansRounded-500', 'MuseoSansRounded-500 Fallback', sans-serif;
  font-weight: normal;
  font-size: 12px;
  position: relative;
  z-index: 1;
}
#hi-ui-sidebar .hi-ui-menu-item-sub .hi-ui-menu-item-text {
  padding-left: 8px;
}
@media (max-width: 768px) {
  #hi-ui-sidebar .hi-ui-sidebar-logout-mobile {
    display: block;
    padding: 32px 16px 16px 16px;
  }
  #hi-ui-sidebar .hi-ui-cart-desktop {
    display: none;
  }
  #hi-ui-sidebar .hi-ui-cart-mobile {
    display: block;
    padding: 0 16px 16px 16px;
  }
  #hi-ui-sidebar .hi-ui-resume-purchase-desktop {
    display: none;
  }
  #hi-ui-sidebar .hi-ui-resume-purchase-mobile {
    display: block;
    padding: 0 16px 16px 16px;
  }
  #hi-ui-sidebar .hi-ui-resume-purchase-box {
    background: #ffd800;
    background-image: none;
    width: 100%;
    margin: 0;
    padding: 16px;
    box-shadow: none;
    border: none;
    border-radius: 8px;
    box-sizing: border-box;
  }
  #hi-ui-sidebar .hi-ui-resume-purchase-close {
    display: none;
  }
  #hi-ui-sidebar .hi-ui-resume-purchase-title {
    font-size: 16px;
    font-weight: bold;
  }
  #hi-ui-sidebar .hi-ui-resume-purchase-message {
    font-size: 14px;
  }
  #hi-ui-sidebar .hi-ui-resume-purchase-button {
    background: #fff;
    background-image: none;
    font-size: 14px;
    padding: 12px 16px;
    min-height: 44px;
    border-radius: 8px;
  }
  #hi-ui-sidebar .hi-ui-resume-purchase-button:hover {
    background: #f9f9f9;
    background-image: none;
  }
  #hi-ui-sidebar .hi-ui-menu-section-title {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #666;
    padding: 16px 16px 8px 16px;
    line-height: 1.2;
    text-align: left;
  }
  #hi-ui-sidebar .hi-ui-menu-section-list, #hi-ui-sidebar ul.hi-ui-menu-section-list {
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    gap: 0;
  }
  #hi-ui-sidebar .hi-ui-menu-section:last-child .hi-ui-menu-section-list {
    padding-bottom: 100px;
  }
  #hi-ui-sidebar .hi-ui-menu-item {
    width: 100%;
    margin: 0;
    padding: 0;
  }
  #hi-ui-sidebar ul li a.hi-ui-menu-item-link, #hi-ui-sidebar li a.hi-ui-menu-item-link, #hi-ui-sidebar a.hi-ui-menu-item-link {
    width: 100% !important;
    height: auto;
    min-height: 44px;
    padding: 12px 16px;
    background: transparent;
    background-image: none;
    border-radius: 0;
    margin: 0;
    font-weight: normal;
    box-shadow: none;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    transition: background-color 0.15s ease;
    box-sizing: border-box;
    color: #2b2b2b;
    overflow: visible;
    padding-right: 16px;
    text-overflow: clip;
    white-space: normal;
    line-height: normal;
    font-family: inherit;
  }
  #hi-ui-sidebar a.hi-ui-menu-item-link::before {
    display: none;
  }
  #hi-ui-sidebar a.hi-ui-menu-item-link:hover {
    background: #f9f9f9;
  }
  #hi-ui-sidebar .hi-ui-menu-item-text {
    font-size: 15px;
    color: #2b2b2b;
  }
  #hi-ui-sidebar .hi-ui-menu-item-sub a.hi-ui-menu-item-link {
    padding-left: 32px;
  }
  #hi-ui-sidebar .hi-ui-menu-item-sub .hi-ui-menu-item-text {
    padding-left: 0;
  }
  #hi-ui-sidebar .hi-ui-menu-item-active a.hi-ui-menu-item-link {
    background: #fffbf0;
    border-left: 3px solid #ffd800;
    padding-left: 13px;
    font-weight: 600;
  }
  #hi-ui-sidebar .hi-ui-menu-item-active.hi-ui-menu-item-sub a.hi-ui-menu-item-link {
    padding-left: 29px;
  }
}
[class*='hi-ui-']:focus:not(:focus-visible) {
  outline: none;
}
@property --tw-rotate-x {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-x {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-y {
  syntax: "*";
  inherits: false;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false;
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-border-style: solid;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
    }
  }
}

/* =============================================================================
   Badge Component Styles
   ============================================================================= */

.hi-ui-badge {
  /* Theme variables with defaults */
  --hi-badge-bg: #e5e7eb;
  --hi-badge-text: #374151;
  --hi-badge-border: transparent;
  --hi-badge-font-family:
    MuseoSansRounded-500, 'MuseoSansRounded-500 Fallback', -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, sans-serif;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25em;
  font-family: var(--hi-badge-font-family);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  vertical-align: baseline;
  background-color: var(--hi-badge-bg);
  color: var(--hi-badge-text);
  border: 1px solid var(--hi-badge-border);
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

/* =============================================================================
   Size Variants
   ============================================================================= */

.hi-ui-badge--sm {
  font-size: 0.625rem; /* 10px */
  padding: 0.125rem 0.375rem; /* 2px 6px */
}

.hi-ui-badge--md {
  font-size: 0.75rem; /* 12px */
  padding: 0.1875rem 0.5rem; /* 3px 8px */
}

.hi-ui-badge--lg {
  font-size: 0.875rem; /* 14px */
  padding: 0.25rem 0.625rem; /* 4px 10px */
}

/* =============================================================================
   Color Variants - Solid (default)
   ============================================================================= */

/* Default - Gray */
.hi-ui-badge--default {
  --hi-badge-bg: #e5e7eb;
  --hi-badge-text: #374151;
  --hi-badge-border: #e5e7eb;
}

/* Success - Green */
.hi-ui-badge--success {
  --hi-badge-bg: #4e9758;
  --hi-badge-text: #ffffff;
  --hi-badge-border: #4e9758;
}

/* Warning - Amber/Orange */
.hi-ui-badge--warning {
  --hi-badge-bg: #f59e0b;
  --hi-badge-text: #ffffff;
  --hi-badge-border: #f59e0b;
}

/* Error - Red */
.hi-ui-badge--error {
  --hi-badge-bg: #dc3545;
  --hi-badge-text: #ffffff;
  --hi-badge-border: #dc3545;
}

/* Info - Teal/Cyan */
.hi-ui-badge--info {
  --hi-badge-bg: #4e8c97;
  --hi-badge-text: #ffffff;
  --hi-badge-border: #4e8c97;
}

/* Neutral - Dark Gray */
.hi-ui-badge--neutral {
  --hi-badge-bg: #6b7280;
  --hi-badge-text: #ffffff;
  --hi-badge-border: #6b7280;
}

/* =============================================================================
   Outlined Variant
   ============================================================================= */

.hi-ui-badge--outlined {
  background-color: transparent;
}

.hi-ui-badge--outlined.hi-ui-badge--default {
  --hi-badge-text: #374151;
  --hi-badge-border: #9ca3af;
}

.hi-ui-badge--outlined.hi-ui-badge--success {
  --hi-badge-text: #3d8540;
  --hi-badge-border: #4e9758;
}

.hi-ui-badge--outlined.hi-ui-badge--warning {
  --hi-badge-text: #b45309;
  --hi-badge-border: #f59e0b;
}

.hi-ui-badge--outlined.hi-ui-badge--error {
  --hi-badge-text: #b91c1c;
  --hi-badge-border: #dc3545;
}

.hi-ui-badge--outlined.hi-ui-badge--info {
  --hi-badge-text: #3a6d76;
  --hi-badge-border: #4e8c97;
}

.hi-ui-badge--outlined.hi-ui-badge--neutral {
  --hi-badge-text: #4b5563;
  --hi-badge-border: #6b7280;
}

/* =============================================================================
   Pill Shape
   ============================================================================= */

.hi-ui-badge--pill {
  border-radius: 9999px;
}

/* =============================================================================
   Icon Styles
   ============================================================================= */

.hi-ui-badge__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hi-ui-badge--sm .hi-ui-badge__icon {
  font-size: 0.625rem;
}

.hi-ui-badge--md .hi-ui-badge__icon {
  font-size: 0.75rem;
}

.hi-ui-badge--lg .hi-ui-badge__icon {
  font-size: 0.875rem;
}

/* SVG icons inside badge */
.hi-ui-badge__icon svg {
  width: 1em;
  height: 1em;
}

/* =============================================================================
   Text Styles
   ============================================================================= */

.hi-ui-badge__text {
  display: inline-block;
}

/* =============================================================================
   High Contrast Mode
   ============================================================================= */

@media (prefers-contrast: high) {
  .hi-ui-badge {
    border-width: 2px;
  }

  .hi-ui-badge--outlined {
    border-width: 2px;
  }
}

/* =============================================================================
   Responsive - Slightly larger touch targets on mobile
   ============================================================================= */

@media (max-width: 768px) {
  .hi-ui-badge--sm {
    padding: 0.1875rem 0.4375rem;
  }

  .hi-ui-badge--md {
    padding: 0.25rem 0.5625rem;
  }

  .hi-ui-badge--lg {
    padding: 0.3125rem 0.6875rem;
  }
}

/* =============================================================================
   Notice Component Styles
   ============================================================================= */

.hi-ui-notice {
  --hi-notice-bg: #eff6ff;
  --hi-notice-text: #1e40af;
  --hi-notice-border: #93c5fd;
  --hi-notice-icon-color: #3b82f6;
  --hi-notice-font-family:
    MuseoSansRounded-500, 'MuseoSansRounded-500 Fallback', -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, sans-serif;

  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  margin-bottom: 1rem; /* Match Text body — each block manages its own bottom spacing */
  font-family: var(--hi-notice-font-family);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--hi-notice-text);
  background-color: var(--hi-notice-bg);
  border: 1px solid var(--hi-notice-border);
  border-radius: 6px;
}

/* =============================================================================
   Variants
   ============================================================================= */

.hi-ui-notice--info {
  --hi-notice-bg: #eff6ff;
  --hi-notice-text: #1e40af;
  --hi-notice-border: #93c5fd;
  --hi-notice-icon-color: #3b82f6;
}

.hi-ui-notice--success {
  --hi-notice-bg: #f0fdf4;
  --hi-notice-text: #166534;
  --hi-notice-border: #86efac;
  --hi-notice-icon-color: #4e9758;
}

.hi-ui-notice--warning {
  --hi-notice-bg: #fffbeb;
  --hi-notice-text: #92400e;
  --hi-notice-border: #fcd34d;
  --hi-notice-icon-color: #f59e0b;
}

.hi-ui-notice--error {
  --hi-notice-bg: #fef2f2;
  --hi-notice-text: #991b1b;
  --hi-notice-border: #fca5a5;
  --hi-notice-icon-color: #dc3545;
}

/* =============================================================================
   Icon
   ============================================================================= */

.hi-ui-notice__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--hi-notice-icon-color);
  margin-top: 0.0625rem;
}

.hi-ui-notice__icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* =============================================================================
   Content
   ============================================================================= */

.hi-ui-notice__content {
  flex: 1;
  min-width: 0;
}

/* Text and Link children inherit the notice's variant color (e.g., success green,
   error red) instead of falling back to their hardcoded base colors. Links remain
   distinguishable via underline + bold weight. Using __content in the selector
   gives enough specificity to override .hi-ui-page--reset a.hi-ui-link (0,2,1). */
.hi-ui-notice .hi-ui-notice__content .hi-ui-text,
.hi-ui-notice .hi-ui-notice__content a.hi-ui-link,
.hi-ui-notice .hi-ui-notice__content .hi-ui-link {
  color: inherit;
}

/* Text children inherit the notice's font-size so they match the container.
   Text body variant (14px) would otherwise override the mobile 13px notice size. */
.hi-ui-notice .hi-ui-notice__content .hi-ui-text {
  font-size: inherit;
}

/* =============================================================================
   Dismiss Button
   ============================================================================= */

.hi-ui-notice__dismiss {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: none;
  background: none;
  color: var(--hi-notice-text);
  cursor: pointer;
  border-radius: 4px;
  opacity: 0.6;
  transition: opacity 0.15s;
}

.hi-ui-notice__dismiss:hover {
  opacity: 1;
}

.hi-ui-notice__dismiss:focus-visible {
  outline: 2px solid var(--hi-notice-icon-color);
  outline-offset: 2px;
  opacity: 1;
}

.hi-ui-notice__dismiss svg {
  width: 1rem;
  height: 1rem;
}

/* =============================================================================
   Responsive
   ============================================================================= */

@media (max-width: 768px) {
  .hi-ui-notice {
    padding: 0.75rem;
    font-size: 0.8125rem;
  }
}

/* =============================================================================
   CopyButton Component Styles
   ============================================================================= */

.hi-ui-copy-button {
  --hi-copy-button-color: #6b7280;
  --hi-copy-button-hover: #374151;
  --hi-copy-button-copied: #4e9758;
  --hi-copy-button-size: 1.75rem;

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--hi-copy-button-size);
  height: var(--hi-copy-button-size);
  padding: 0;
  border: none;
  background: none;
  color: var(--hi-copy-button-color);
  cursor: pointer;
  border-radius: 4px;
  transition:
    color 0.15s,
    background-color 0.15s;
}

.hi-ui-copy-button:hover {
  color: var(--hi-copy-button-hover);
  background-color: #f3f4f6;
}

.hi-ui-copy-button:focus-visible {
  outline: var(--hi-focus-ring-width) solid var(--hi-focus-ring);
  outline-offset: 2px;
}

/* =============================================================================
   Copied State
   ============================================================================= */

.hi-ui-copy-button--copied {
  color: var(--hi-copy-button-copied);
}

.hi-ui-copy-button--copied:hover {
  color: var(--hi-copy-button-copied);
}

/* =============================================================================
   Icon
   ============================================================================= */

.hi-ui-copy-button__icon {
  width: 1rem;
  height: 1rem;
}

/* =============================================================================
   Copied Popup (above the button)
   ============================================================================= */

.hi-ui-copy-button__popup {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: #1a1a1a;
  color: #fff;
  font-size: 12px;
  font-family: MuseoSansRounded-300, 'MuseoSansRounded-300 Fallback', sans-serif;
  white-space: nowrap;
  padding: 4px 8px;
  border-radius: 4px;
  pointer-events: none;
  opacity: 0;
  transition:
    opacity 0.15s,
    transform 0.15s;
}

.hi-ui-copy-button__popup::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: #1a1a1a;
}

.hi-ui-copy-button__popup--show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ===================================================
   Checkbox Component Styles
   =================================================== */

/* Wrapper - acts as clickable label */
.hi-ui-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  font-family: var(--hi-text-font-family);
  color: var(--hi-input-text-color);
  line-height: 1.4;
}

/* Hide native checkbox but keep it accessible */
.hi-ui-checkbox-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Custom checkbox box */
.hi-ui-checkbox-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 2px solid var(--hi-input-border-color);
  border-radius: 4px;
  background-color: var(--hi-input-bg);
  transition:
    background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
}

/* Check mark and dash icons — hidden by default, shown by the `:indeterminate`
   / `:checked` rules below.

   The dash selector MUST stay scoped to `.hi-ui-checkbox-box`. `hi-ui-checkbox-
   indeterminate` names two different things: the icon `<svg>`, and a state
   modifier `Checkbox.tsx` puts on the root `<label>`. Unscoped, this rule
   matched the root as well and `display: none` hid the ENTIRE control — so
   `<Checkbox indeterminate>` rendered nothing at all. Shipped and unnoticed
   because nothing used the prop until 2026-08-21 (`Table` sets `.indeterminate`
   on a raw input rather than going through this atom), and because the atom's
   own test asserted the class was "in the document", which the root satisfied.
   `.hi-ui-checkbox-check` needs no such scoping — no modifier shares its name. */
.hi-ui-checkbox-check,
.hi-ui-checkbox-box .hi-ui-checkbox-indeterminate {
  display: none;
  color: white;
}

/* Hover state */
.hi-ui-checkbox:hover:not(.hi-ui-checkbox-disabled) .hi-ui-checkbox-box {
  border-color: var(--hi-input-border-color-hover);
}

/* Focus state - use focus-visible for keyboard-only focus */
.hi-ui-checkbox-input:focus-visible + .hi-ui-checkbox-box {
  border-color: var(--hi-input-border-color-focus);
  box-shadow: var(--hi-input-focus-ring);
}

/* Checked state */
.hi-ui-checkbox-input:checked + .hi-ui-checkbox-box {
  background-color: var(--hi-table-header-bg, #256957);
  border-color: var(--hi-table-header-bg, #256957);
}

.hi-ui-checkbox-input:checked + .hi-ui-checkbox-box .hi-ui-checkbox-check {
  display: block;
}

/* Indeterminate state */
.hi-ui-checkbox-input:indeterminate + .hi-ui-checkbox-box {
  background-color: var(--hi-table-header-bg, #256957);
  border-color: var(--hi-table-header-bg, #256957);
}

.hi-ui-checkbox-input:indeterminate + .hi-ui-checkbox-box .hi-ui-checkbox-check {
  display: none;
}

.hi-ui-checkbox-input:indeterminate + .hi-ui-checkbox-box .hi-ui-checkbox-indeterminate {
  display: block;
}

/* Size Variants */

/* Small */
.hi-ui-checkbox-size-sm {
  font-size: var(--hi-input-font-size-sm, 0.875rem);
}

.hi-ui-checkbox-size-sm .hi-ui-checkbox-box {
  width: 14px;
  height: 14px;
}

.hi-ui-checkbox-size-sm .hi-ui-checkbox-check,
.hi-ui-checkbox-size-sm .hi-ui-checkbox-indeterminate {
  width: 10px;
  height: 10px;
}

/* Medium (default) */
.hi-ui-checkbox-size-md {
  font-size: var(--hi-input-font-size-sm, 0.875rem);
}

.hi-ui-checkbox-size-md .hi-ui-checkbox-box {
  width: 18px;
  height: 18px;
}

.hi-ui-checkbox-size-md .hi-ui-checkbox-check,
.hi-ui-checkbox-size-md .hi-ui-checkbox-indeterminate {
  width: 12px;
  height: 12px;
}

/* Large */
.hi-ui-checkbox-size-lg {
  font-size: var(--hi-input-font-size-lg, 1rem);
}

.hi-ui-checkbox-size-lg .hi-ui-checkbox-box {
  width: 22px;
  height: 22px;
}

.hi-ui-checkbox-size-lg .hi-ui-checkbox-check,
.hi-ui-checkbox-size-lg .hi-ui-checkbox-indeterminate {
  width: 14px;
  height: 14px;
}

/* Error State */
.hi-ui-checkbox-state-error .hi-ui-checkbox-box {
  border-color: var(--hi-input-border-color-error);
}

.hi-ui-checkbox-state-error .hi-ui-checkbox-input:checked + .hi-ui-checkbox-box,
.hi-ui-checkbox-state-error .hi-ui-checkbox-input:indeterminate + .hi-ui-checkbox-box {
  background-color: var(--hi-input-border-color-error);
  border-color: var(--hi-input-border-color-error);
}

.hi-ui-checkbox-state-error .hi-ui-checkbox-input:focus-visible + .hi-ui-checkbox-box {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* Disabled State */
.hi-ui-checkbox-disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.hi-ui-checkbox-disabled .hi-ui-checkbox-box {
  background-color: var(--hi-input-bg-disabled);
}

.hi-ui-checkbox-disabled .hi-ui-checkbox-input:checked + .hi-ui-checkbox-box,
.hi-ui-checkbox-disabled .hi-ui-checkbox-input:indeterminate + .hi-ui-checkbox-box {
  background-color: var(--hi-table-header-bg, #256957);
  opacity: 0.6;
}

/* Label text */
.hi-ui-checkbox-label {
  flex: 1;
  position: relative;
  top: 1px;
}

/* ===================================================
   DescriptionList Component
   =================================================== */

.hi-ui-description-list {
  --hi-dl-value-color: var(--hi-text-color-primary, #111827);
  --hi-dl-stripe-bg: var(--hi-bg-subtle, #f3f3f3);
  --hi-dl-gap: 0.5rem;
  --hi-dl-row-gap: 0.75rem;
  --hi-dl-font-family: var(--hi-text-font-family, system-ui, sans-serif);

  display: flex;
  flex-direction: column;
  gap: var(--hi-dl-row-gap);
  margin: 0;
  padding: 0;
  font-family: var(--hi-dl-font-family);
}

.hi-ui-description-list__item {
  display: flex;
  margin: 0;
}

.hi-ui-description-list__label {
  font-weight: 500;
  margin: 0;
}

.hi-ui-description-list__value {
  color: var(--hi-dl-value-color);
  margin: 0;
}

/* ===================================================
   Layout Variants
   =================================================== */

/* Stacked: label above value */
.hi-ui-description-list--stacked .hi-ui-description-list__item {
  flex-direction: column;
  gap: 0.25rem;
}

/* Horizontal: label and value side by side */
.hi-ui-description-list--horizontal .hi-ui-description-list__item {
  flex-direction: row;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--hi-dl-gap);
}

.hi-ui-description-list--horizontal .hi-ui-description-list__label {
  flex-shrink: 0;
}

.hi-ui-description-list--horizontal .hi-ui-description-list__value {
  text-align: right;
}

/* Inline: all items flow inline */
.hi-ui-description-list--inline {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1rem;
}

.hi-ui-description-list--inline .hi-ui-description-list__item {
  flex-direction: row;
  align-items: baseline;
  gap: 0.375rem;
}

.hi-ui-description-list--inline .hi-ui-description-list__label::after {
  content: ':';
}

/* Inline reverts to stacked on mobile */
@media (max-width: 768px) {
  .hi-ui-description-list--inline {
    flex-direction: column;
  }

  .hi-ui-description-list--inline .hi-ui-description-list__item {
    flex-direction: column;
    gap: 0.25rem;
  }

  .hi-ui-description-list--inline .hi-ui-description-list__label::after {
    content: none;
  }
}

/* ===================================================
   Size Variants
   =================================================== */

.hi-ui-description-list--sm {
  --hi-dl-row-gap: 0.5rem;
}

.hi-ui-description-list--sm .hi-ui-description-list__label {
  font-size: 0.75rem;
  line-height: 1.4;
}

.hi-ui-description-list--sm .hi-ui-description-list__value {
  font-size: 0.75rem;
  line-height: 1.4;
}

.hi-ui-description-list--md {
  --hi-dl-row-gap: 0.75rem;
}

.hi-ui-description-list--md .hi-ui-description-list__label {
  font-size: 0.875rem;
  line-height: 1.5;
}

.hi-ui-description-list--md .hi-ui-description-list__value {
  font-size: 0.875rem;
  line-height: 1.5;
}

.hi-ui-description-list--lg {
  --hi-dl-row-gap: 1rem;
}

.hi-ui-description-list--lg .hi-ui-description-list__label {
  font-size: 1rem;
  line-height: 1.5;
}

.hi-ui-description-list--lg .hi-ui-description-list__value {
  font-size: 1rem;
  line-height: 1.5;
}

/* ===================================================
   Striped Variant
   =================================================== */

.hi-ui-description-list--striped {
  gap: 0;
}

.hi-ui-description-list--striped .hi-ui-description-list__item {
  padding: 0.5rem 0.75rem;
}

.hi-ui-description-list--striped .hi-ui-description-list__item:nth-child(odd) {
  background-color: var(--hi-dl-stripe-bg);
}

/* ===================================================
   Accessibility
   =================================================== */

@media (prefers-contrast: high) {
  .hi-ui-description-list__label {
    font-weight: 600;
  }

  .hi-ui-description-list--striped .hi-ui-description-list__item:nth-child(odd) {
    border: 1px solid currentColor;
  }
}

/* =============================================================================
   EmptyState Component Styles
   ============================================================================= */

.hi-ui-empty-state {
  --hi-empty-state-bg: #ffffff;
  --hi-empty-state-text: #374151;
  --hi-empty-state-description: #6b7280;
  --hi-empty-state-icon-color: #9ca3af;
  --hi-empty-state-font-family:
    MuseoSansRounded-500, 'MuseoSansRounded-500 Fallback', -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, sans-serif;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3rem 1.5rem;
  font-family: var(--hi-empty-state-font-family);
  background-color: var(--hi-empty-state-bg);
  color: var(--hi-empty-state-text);
  border-radius: 8px;
}

/* =============================================================================
   Icon
   ============================================================================= */

.hi-ui-empty-state__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  color: var(--hi-empty-state-icon-color);
}

.hi-ui-empty-state__icon svg {
  width: 3rem;
  height: 3rem;
}

/* =============================================================================
   Title
   ============================================================================= */

.hi-ui-empty-state__title {
  margin: 0 0 0.5rem;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--hi-empty-state-text);
}

/* =============================================================================
   Description
   ============================================================================= */

.hi-ui-empty-state__description {
  margin: 0 0 1.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--hi-empty-state-description);
  max-width: 28rem;
}

/* =============================================================================
   Action
   ============================================================================= */

.hi-ui-empty-state__action {
  display: flex;
  gap: 0.5rem;
}

/* =============================================================================
   Responsive
   ============================================================================= */

@media (max-width: 768px) {
  .hi-ui-empty-state {
    padding: 2rem 0;
  }

  .hi-ui-empty-state__icon svg {
    width: 2.5rem;
    height: 2.5rem;
  }

  .hi-ui-empty-state__title {
    font-size: 1rem;
  }
}

.hi-ui-gradient-bar {
  background: linear-gradient(to right, #1a355d 0%, #63b770 100%);
  height: 9px;
  width: 100%;
}

.hi-ui-layout-container {
  max-width: var(--hi-layout-max-width, 1170px);
  width: 100%;
  margin: 0 auto;
  padding: 0 16px;
  box-sizing: border-box;
}

/* ===================================================
   Spinner Component Styles
   =================================================== */

.hi-ui-spinner {
  --hi-spinner-color: currentColor;
  --hi-spinner-track-color: rgba(128, 128, 128, 0.2);

  display: inline-block;
  flex-shrink: 0;
  border-radius: 50%;
  border-style: solid;
  border-color: var(--hi-spinner-track-color);
  border-top-color: var(--hi-spinner-color);
  animation: hi-ui-spin 0.8s linear infinite;
}

/* Size variants */
.hi-ui-spinner--small {
  width: 16px;
  height: 16px;
  border-width: 2px;
}

.hi-ui-spinner--medium {
  width: 24px;
  height: 24px;
  border-width: 3px;
}

.hi-ui-spinner--large {
  width: 32px;
  height: 32px;
  border-width: 3px;
}

/* Animation keyframes */
@keyframes hi-ui-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .hi-ui-spinner {
    animation: none;
    /* Show as static indicator instead */
    border-top-color: var(--hi-spinner-color);
    border-right-color: var(--hi-spinner-color);
  }
}

/* =============================================================================
   LoadingOverlay Component Styles
   ============================================================================= */

.hi-ui-loading-overlay {
  position: relative;
}

.hi-ui-loading-overlay__backdrop {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.7);
  z-index: 10;
  border-radius: inherit;
}

/* =============================================================================
   Responsive
   ============================================================================= */

@media (max-width: 768px) {
  .hi-ui-loading-overlay__backdrop .hi-ui-spinner--large {
    width: 24px;
    height: 24px;
  }
}

/* ===================================================
   PriceDisplay Component
   =================================================== */

.hi-ui-price-display {
  --hi-price-color: var(--hi-text-color-primary, #111827);
  --hi-price-original-color: var(--hi-text-color-secondary, #6b7280);
  --hi-price-interval-color: var(--hi-text-color-secondary, #6b7280);
  --hi-price-vat-color: var(--hi-text-color-tertiary, #9ca3af);
  --hi-price-font-family: var(--hi-text-font-family, system-ui, sans-serif);

  display: inline-flex;
  align-items: baseline;
  gap: 0.375rem;
  font-family: var(--hi-price-font-family);
  color: var(--hi-price-color);
}

/* ===================================================
   Current Price
   =================================================== */

.hi-ui-price-display__current {
  display: inline-flex;
  align-items: baseline;
}

.hi-ui-price-display__currency {
  font-family: MuseoSansRounded-700, 'MuseoSansRounded-700 Fallback', sans-serif;
}

.hi-ui-price-display__amount {
  font-family: MuseoSansRounded-700, 'MuseoSansRounded-700 Fallback', sans-serif;
}

.hi-ui-price-display__interval {
  color: var(--hi-price-interval-color);
  font-weight: 400;
  margin-left: 0.125em;
}

/* ===================================================
   Original Price (Discount)
   =================================================== */

.hi-ui-price-display__original {
  display: inline-flex;
  align-items: baseline;
  color: var(--hi-price-original-color);
  text-decoration: line-through;
  font-weight: 400;
}

.hi-ui-price-display__original .hi-ui-price-display__currency,
.hi-ui-price-display__original .hi-ui-price-display__amount {
  font-weight: 400;
}

/* ===================================================
   VAT Text
   =================================================== */

.hi-ui-price-display__vat {
  color: var(--hi-price-vat-color);
  font-weight: 400;
}

/* ===================================================
   Size Variants
   =================================================== */

.hi-ui-price-display--sm {
  font-size: 0.875rem;
  line-height: 1.4;
}

.hi-ui-price-display--sm .hi-ui-price-display__interval,
.hi-ui-price-display--sm .hi-ui-price-display__vat {
  font-size: 0.75rem;
}

.hi-ui-price-display--md {
  font-size: 1.125rem;
  line-height: 1.4;
}

.hi-ui-price-display--md .hi-ui-price-display__interval,
.hi-ui-price-display--md .hi-ui-price-display__vat {
  font-size: 0.875rem;
}

.hi-ui-price-display--lg {
  font-size: 1.5rem;
  line-height: 1.3;
}

.hi-ui-price-display--lg .hi-ui-price-display__interval,
.hi-ui-price-display--lg .hi-ui-price-display__vat {
  font-size: 1rem;
}

.hi-ui-price-display--xl {
  font-size: 2rem;
  line-height: 1.2;
}

.hi-ui-price-display--xl .hi-ui-price-display__interval,
.hi-ui-price-display--xl .hi-ui-price-display__vat {
  font-size: 1.125rem;
}

/* ===================================================
   Accessibility
   =================================================== */

@media (prefers-contrast: high) {
  .hi-ui-price-display__original {
    text-decoration-thickness: 2px;
  }
}

.hi-ui-quantity-selector {
  display: inline-flex;
  align-items: center;
}

.hi-ui-quantity-selector--disabled {
  opacity: 0.4;
  pointer-events: none;
}

.hi-ui-quantity-selector__btn {
  display: inline-block;
  width: 16px;
  height: 16px;
  padding: 0;
  margin-bottom: -1px;
  border: none;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  cursor: pointer;
  transition: opacity 0.2s;
}

.hi-ui-quantity-selector__btn--minus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2716%27 height=%2716%27 viewBox=%270 0 16 16%27 fill=%27none%27%3E %3Ccircle cx=%278%27 cy=%278%27 r=%278%27 fill=%27%23EEEEEE%27/%3E %3Cpath d=%27M3.69141 8.80006C3.69141 9.47139 3.91686 9.84435 4.36775 9.84435H7.16977H8.82843H11.6465C12.0813 9.84435 12.3068 9.47139 12.3068 8.80006V8.4271C12.3068 7.75577 12.0813 7.38281 11.6465 7.38281H8.82843H7.16977H4.36775C3.91686 7.38281 3.69141 7.75577 3.69141 8.4271V8.80006Z%27 fill=%27%23333333%27/%3E %3C/svg%3E");
}

.hi-ui-quantity-selector__btn--minus:hover:not(:disabled) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2716%27 height=%2716%27 viewBox=%270 0 16 16%27 fill=%27none%27%3E %3Ccircle cx=%278%27 cy=%278%27 r=%278%27 fill=%27%23D2D2D2%27/%3E %3Cpath d=%27M3.69141 8.80006C3.69141 9.47139 3.91686 9.84435 4.36775 9.84435H7.16977H8.82843H11.6465C12.0813 9.84435 12.3068 9.47139 12.3068 8.80006V8.4271C12.3068 7.75577 12.0813 7.38281 11.6465 7.38281H8.82843H7.16977H4.36775C3.91686 7.38281 3.69141 7.75577 3.69141 8.4271V8.80006Z%27 fill=%27%23333333%27/%3E %3C/svg%3E");
}

.hi-ui-quantity-selector__btn--plus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2716%27 height=%2716%27 viewBox=%270 0 16 16%27 fill=%27none%27%3E %3Ccircle cx=%278%27 cy=%278%27 r=%278%27 fill=%27%23EEEEEE%27/%3E %3Cpath d=%27M4.36775 8.85797C3.91686 8.85797 3.69141 8.59977 3.69141 8.135V7.8768C3.69141 7.41204 3.91686 7.15383 4.36775 7.15383H7.16977V3.79719C7.16977 3.33242 7.41132 3.07422 7.84612 3.07422H8.16819C8.60298 3.07422 8.82843 3.33242 8.82843 3.79719V7.15383H11.6465C12.0813 7.15383 12.3068 7.41204 12.3068 7.8768V8.135C12.3068 8.59977 12.0813 8.85797 11.6465 8.85797H8.82843V12.1974C8.82843 12.6794 8.60298 12.9204 8.16819 12.9204H7.84612C7.41132 12.9204 7.16977 12.6794 7.16977 12.1974V8.85797H4.36775Z%27 fill=%27%23333333%27/%3E %3C/svg%3E");
}

.hi-ui-quantity-selector__btn--plus:hover:not(:disabled) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2716%27 height=%2716%27 viewBox=%270 0 16 16%27 fill=%27none%27%3E %3Ccircle cx=%278%27 cy=%278%27 r=%278%27 fill=%27%23D2D2D2%27/%3E %3Cpath d=%27M4.36775 8.85797C3.91686 8.85797 3.69141 8.59977 3.69141 8.135V7.8768C3.69141 7.41204 3.91686 7.15383 4.36775 7.15383H7.16977V3.79719C7.16977 3.33242 7.41132 3.07422 7.84612 3.07422H8.16819C8.60298 3.07422 8.82843 3.33242 8.82843 3.79719V7.15383H11.6465C12.0813 7.15383 12.3068 7.41204 12.3068 7.8768V8.135C12.3068 8.59977 12.0813 8.85797 11.6465 8.85797H8.82843V12.1974C8.82843 12.6794 8.60298 12.9204 8.16819 12.9204H7.84612C7.41132 12.9204 7.16977 12.6794 7.16977 12.1974V8.85797H4.36775Z%27 fill=%27%23333333%27/%3E %3C/svg%3E");
}

.hi-ui-quantity-selector__btn--disabled {
  opacity: 0.3;
  cursor: default;
}

.hi-ui-quantity-selector__value {
  padding: 0 8px;
  font-size: 16px;
}

/* =============================================================================
   ProgressBar Component Styles
   ============================================================================= */

.hi-ui-progress-bar {
  --hi-progress-bar-bg: #e5e7eb;
  --hi-progress-bar-fill: #4e8c97;
  --hi-progress-bar-text: #374151;
  --hi-progress-bar-font-family:
    MuseoSansRounded-500, 'MuseoSansRounded-500 Fallback', -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, sans-serif;

  width: 100%;
  font-family: var(--hi-progress-bar-font-family);
}

/* =============================================================================
   Header (Label + Value)
   ============================================================================= */

.hi-ui-progress-bar__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.375rem;
}

.hi-ui-progress-bar__label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--hi-progress-bar-text);
}

.hi-ui-progress-bar__value {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--hi-progress-bar-text);
}

/* =============================================================================
   Track
   ============================================================================= */

.hi-ui-progress-bar__track {
  width: 100%;
  background-color: var(--hi-progress-bar-bg);
  border-radius: 9999px;
  overflow: hidden;
}

/* =============================================================================
   Fill
   ============================================================================= */

.hi-ui-progress-bar__fill {
  height: 100%;
  background-color: var(--hi-progress-bar-fill);
  border-radius: 9999px;
  transition: width 0.3s ease;
}

/* =============================================================================
   Size Variants
   ============================================================================= */

.hi-ui-progress-bar--sm .hi-ui-progress-bar__track {
  height: 0.25rem; /* 4px */
}

.hi-ui-progress-bar--md .hi-ui-progress-bar__track {
  height: 0.5rem; /* 8px */
}

.hi-ui-progress-bar--lg .hi-ui-progress-bar__track {
  height: 0.75rem; /* 12px */
}

/* =============================================================================
   Color Variants
   ============================================================================= */

.hi-ui-progress-bar--default {
  --hi-progress-bar-fill: #4e8c97;
}

.hi-ui-progress-bar--success {
  --hi-progress-bar-fill: #4e9758;
}

.hi-ui-progress-bar--warning {
  --hi-progress-bar-fill: #f59e0b;
}

.hi-ui-progress-bar--error {
  --hi-progress-bar-fill: #dc3545;
}

/* =============================================================================
   Responsive
   ============================================================================= */

@media (max-width: 768px) {
  .hi-ui-progress-bar__label,
  .hi-ui-progress-bar__value {
    font-size: 0.75rem;
  }
}

/* ===================================================
   Radio Component Styles
   =================================================== */

/* Wrapper - acts as clickable label */
.hi-ui-radio {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  font-family: var(--hi-text-font-family);
  color: var(--hi-input-text-color);
  line-height: 1.4;
}

/* Hide native radio but keep it accessible */
.hi-ui-radio-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Custom radio circle */
.hi-ui-radio-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 2px solid var(--hi-input-border-color);
  border-radius: 50%;
  background-color: var(--hi-input-bg);
  transition:
    background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
}

/* Inner dot - hidden by default */
.hi-ui-radio-dot {
  display: none;
  border-radius: 50%;
  background-color: white;
}

/* Hover state */
.hi-ui-radio:hover:not(.hi-ui-radio-disabled) .hi-ui-radio-circle {
  border-color: var(--hi-input-border-color-hover);
}

/* Focus state - use focus-visible for keyboard-only focus */
.hi-ui-radio-input:focus-visible + .hi-ui-radio-circle {
  border-color: var(--hi-input-border-color-focus);
  box-shadow: var(--hi-input-focus-ring);
}

/* Checked state */
.hi-ui-radio-input:checked + .hi-ui-radio-circle {
  background-color: var(--hi-table-header-bg, #256957);
  border-color: var(--hi-table-header-bg, #256957);
}

.hi-ui-radio-input:checked + .hi-ui-radio-circle .hi-ui-radio-dot {
  display: block;
}

/* Size Variants */

/* Small */
.hi-ui-radio-size-sm {
  font-size: var(--hi-input-font-size-sm, 0.875rem);
}

.hi-ui-radio-size-sm .hi-ui-radio-circle {
  width: 14px;
  height: 14px;
}

.hi-ui-radio-size-sm .hi-ui-radio-dot {
  width: 6px;
  height: 6px;
}

/* Medium (default) */
.hi-ui-radio-size-md {
  font-size: var(--hi-input-font-size-sm, 0.875rem);
}

.hi-ui-radio-size-md .hi-ui-radio-circle {
  width: 18px;
  height: 18px;
}

.hi-ui-radio-size-md .hi-ui-radio-dot {
  width: 8px;
  height: 8px;
}

/* Large */
.hi-ui-radio-size-lg {
  font-size: var(--hi-input-font-size-lg, 1rem);
}

.hi-ui-radio-size-lg .hi-ui-radio-circle {
  width: 22px;
  height: 22px;
}

.hi-ui-radio-size-lg .hi-ui-radio-dot {
  width: 10px;
  height: 10px;
}

/* Error State */
.hi-ui-radio-state-error .hi-ui-radio-circle {
  border-color: var(--hi-input-border-color-error);
}

.hi-ui-radio-state-error .hi-ui-radio-input:checked + .hi-ui-radio-circle {
  background-color: var(--hi-input-border-color-error);
  border-color: var(--hi-input-border-color-error);
}

.hi-ui-radio-state-error .hi-ui-radio-input:focus-visible + .hi-ui-radio-circle {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* Disabled State */
.hi-ui-radio-disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.hi-ui-radio-disabled .hi-ui-radio-circle {
  background-color: var(--hi-input-bg-disabled);
}

.hi-ui-radio-disabled .hi-ui-radio-input:checked + .hi-ui-radio-circle {
  background-color: var(--hi-table-header-bg, #256957);
  opacity: 0.6;
}

/* Label text */
.hi-ui-radio-label {
  flex: 1;
}

/* =============================================================================
   Slider Component Styles
   ============================================================================= */

.hi-ui-slider {
  /* Theme variables */
  --hi-slider-track-bg: #e5e7eb;
  --hi-slider-fill-bg: #256957;
  --hi-slider-thumb-bg: #ffffff;
  --hi-slider-thumb-border: #256957;
  --hi-slider-thumb-shadow: rgba(0, 0, 0, 0.1);
  --hi-slider-thumb-focus-ring: rgba(37, 105, 87, 0.3);
  --hi-slider-value-color: #2b2b2b;
  --hi-slider-label-color: #2b2b2b;
  --hi-slider-disabled-opacity: 0.5;
  --hi-slider-font-family:
    MuseoSansRounded-300, 'MuseoSansRounded-300 Fallback', -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, sans-serif;
  --hi-slider-font-family-bold:
    MuseoSansRounded-700, 'MuseoSansRounded-700 Fallback', -apple-system, BlinkMacSystemFont,
    'Segoe UI', sans-serif;

  /* Size variants */
  --hi-slider-track-height-sm: 4px;
  --hi-slider-track-height-md: 6px;
  --hi-slider-track-height-lg: 8px;
  --hi-slider-thumb-size-sm: 16px;
  --hi-slider-thumb-size-md: 20px;
  --hi-slider-thumb-size-lg: 24px;
  --hi-slider-font-size-sm: 12px;
  --hi-slider-font-size-md: 14px;
  --hi-slider-font-size-lg: 16px;

  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  font-family: var(--hi-slider-font-family);
}

/* =============================================================================
   Label
   ============================================================================= */

.hi-ui-slider__label {
  font-family: var(--hi-slider-font-family-bold);
  font-size: var(--hi-slider-font-size-md);
  color: var(--hi-slider-label-color);
  margin: 0;
}

.hi-ui-slider--sm .hi-ui-slider__label {
  font-size: var(--hi-slider-font-size-sm);
}

.hi-ui-slider--lg .hi-ui-slider__label {
  font-size: var(--hi-slider-font-size-lg);
}

/* =============================================================================
   Wrapper (contains track and value display)
   ============================================================================= */

.hi-ui-slider__wrapper {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
}

/* Vertical layouts for above/below value positions */
.hi-ui-slider--value-above .hi-ui-slider__wrapper,
.hi-ui-slider--value-below .hi-ui-slider__wrapper {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

/* Track needs explicit width in column layout since flex: 1 doesn't work */
.hi-ui-slider--value-above .hi-ui-slider__track,
.hi-ui-slider--value-below .hi-ui-slider__track {
  width: 100%;
  flex: none;
}

/* =============================================================================
   Track
   ============================================================================= */

.hi-ui-slider__track {
  position: relative;
  flex: 1;
  height: var(--hi-slider-track-height-md);
  background: var(--hi-slider-track-bg);
  border-radius: calc(var(--hi-slider-track-height-md) / 2);
  cursor: pointer;
  touch-action: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.hi-ui-slider--sm .hi-ui-slider__track {
  height: var(--hi-slider-track-height-sm);
  border-radius: calc(var(--hi-slider-track-height-sm) / 2);
}

.hi-ui-slider--lg .hi-ui-slider__track {
  height: var(--hi-slider-track-height-lg);
  border-radius: calc(var(--hi-slider-track-height-lg) / 2);
}

/* Larger touch target on mobile */
.hi-ui-slider__track::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  bottom: -8px;
}

/* =============================================================================
   Tick Marks
   ============================================================================= */

.hi-ui-slider__ticks {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.hi-ui-slider__tick {
  position: absolute;
  top: 50%;
  width: 2px;
  height: 10px;
  background: var(--hi-slider-track-bg);
  border-radius: 1px;
  transform: translate(-50%, -50%);
}

/* Tick marks on top of fill should be darker */
.hi-ui-slider__tick::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  border-radius: inherit;
}

/* Size variants for ticks */
.hi-ui-slider--sm .hi-ui-slider__tick {
  height: 8px;
}

.hi-ui-slider--lg .hi-ui-slider__tick {
  height: 12px;
  width: 3px;
}

/* =============================================================================
   Fill (progress bar)
   ============================================================================= */

.hi-ui-slider__fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: var(--hi-slider-fill-bg);
  border-radius: inherit;
  pointer-events: none;
  transition: width 0.05s ease-out;
}

/* =============================================================================
   Thumb
   ============================================================================= */

.hi-ui-slider__thumb {
  position: absolute;
  top: 50%;
  width: var(--hi-slider-thumb-size-md);
  height: var(--hi-slider-thumb-size-md);
  background: var(--hi-slider-thumb-bg);
  border: 2px solid var(--hi-slider-thumb-border);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  cursor: grab;
  outline: none;
  box-shadow: 0 2px 4px var(--hi-slider-thumb-shadow);
  transition:
    box-shadow 0.15s ease,
    transform 0.1s ease;
}

.hi-ui-slider--sm .hi-ui-slider__thumb {
  width: var(--hi-slider-thumb-size-sm);
  height: var(--hi-slider-thumb-size-sm);
}

.hi-ui-slider--lg .hi-ui-slider__thumb {
  width: var(--hi-slider-thumb-size-lg);
  height: var(--hi-slider-thumb-size-lg);
}

/* Focus state */
.hi-ui-slider__thumb:focus {
  box-shadow:
    0 2px 4px var(--hi-slider-thumb-shadow),
    0 0 0 3px var(--hi-slider-thumb-focus-ring);
}

/* Hover state */
.hi-ui-slider__thumb:hover {
  transform: translate(-50%, -50%) scale(1.1);
}

/* Active/dragging state */
.hi-ui-slider__thumb:active {
  cursor: grabbing;
  transform: translate(-50%, -50%) scale(1.15);
}

/* =============================================================================
   Value Display
   ============================================================================= */

.hi-ui-slider__value {
  font-family: var(--hi-slider-font-family-bold);
  font-size: var(--hi-slider-font-size-md);
  color: var(--hi-slider-value-color);
  white-space: nowrap;
  min-width: 3ch;
  text-align: center;
}

.hi-ui-slider--sm .hi-ui-slider__value {
  font-size: var(--hi-slider-font-size-sm);
}

.hi-ui-slider--lg .hi-ui-slider__value {
  font-size: var(--hi-slider-font-size-lg);
}

/* Left/right positions */
.hi-ui-slider--value-left .hi-ui-slider__value,
.hi-ui-slider--value-right .hi-ui-slider__value {
  min-width: 4ch;
}

/* =============================================================================
   Disabled State
   ============================================================================= */

.hi-ui-slider--disabled {
  opacity: var(--hi-slider-disabled-opacity);
  pointer-events: none;
}

.hi-ui-slider--disabled .hi-ui-slider__track {
  cursor: not-allowed;
}

.hi-ui-slider--disabled .hi-ui-slider__thumb {
  cursor: not-allowed;
}

/* =============================================================================
   Responsive Adjustments
   ============================================================================= */

@media (max-width: 768px) {
  .hi-ui-slider__wrapper {
    gap: 8px;
  }

  /* Increase touch target size on mobile */
  .hi-ui-slider__track::before {
    top: -12px;
    bottom: -12px;
  }

  /* Slightly larger thumb on mobile for easier touch */
  .hi-ui-slider__thumb {
    width: calc(var(--hi-slider-thumb-size-md) + 4px);
    height: calc(var(--hi-slider-thumb-size-md) + 4px);
  }

  .hi-ui-slider--sm .hi-ui-slider__thumb {
    width: calc(var(--hi-slider-thumb-size-sm) + 4px);
    height: calc(var(--hi-slider-thumb-size-sm) + 4px);
  }

  .hi-ui-slider--lg .hi-ui-slider__thumb {
    width: calc(var(--hi-slider-thumb-size-lg) + 4px);
    height: calc(var(--hi-slider-thumb-size-lg) + 4px);
  }
}

/* =============================================================================
   High Contrast Mode
   ============================================================================= */

@media (prefers-contrast: high) {
  .hi-ui-slider__track {
    border: 1px solid currentColor;
  }

  .hi-ui-slider__thumb {
    border-width: 3px;
  }
}

/* =============================================================================
   Reduced Motion
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
  .hi-ui-slider__fill {
    transition: none;
  }

  .hi-ui-slider__thumb {
    transition: none;
  }
}

/* ===================================================
   Textarea Component Styles
   =================================================== */

/* Base Textarea */
textarea.hi-ui-textarea,
.hi-ui-textarea {
  box-sizing: border-box;
  font-family: var(--hi-text-font-family);
  color: var(--hi-input-text-color);
  background-color: var(--hi-input-bg);
  border: 1px solid var(--hi-input-border-color);
  border-radius: var(--hi-input-border-radius);
  outline: none;
  transition:
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
  width: auto;
  display: inline-block;
  vertical-align: top;
}

/* Placeholder */
textarea.hi-ui-textarea::-moz-placeholder, .hi-ui-textarea::-moz-placeholder {
  color: var(--hi-input-text-color-placeholder);
  opacity: 1;
}
textarea.hi-ui-textarea::placeholder,
.hi-ui-textarea::placeholder {
  color: var(--hi-input-text-color-placeholder);
  opacity: 1;
}

/* Hover State */
textarea.hi-ui-textarea:hover:not(:disabled):not(:-moz-read-only), .hi-ui-textarea:hover:not(:disabled):not(:-moz-read-only) {
  border-color: var(--hi-input-border-color-hover);
}
textarea.hi-ui-textarea:hover:not(:disabled):not(:read-only),
.hi-ui-textarea:hover:not(:disabled):not(:read-only) {
  border-color: var(--hi-input-border-color-hover);
}

/* Focus State */
textarea.hi-ui-textarea:focus,
.hi-ui-textarea:focus {
  border-color: var(--hi-input-border-color-focus);
  box-shadow: var(--hi-input-focus-ring);
}

/* Size Variants */
textarea.hi-ui-textarea-size-sm,
.hi-ui-textarea-size-sm {
  padding: var(--hi-input-padding-sm);
  font-size: var(--hi-input-font-size-sm);
  line-height: var(--hi-input-line-height-sm);
}

textarea.hi-ui-textarea-size-md,
.hi-ui-textarea-size-md {
  padding: var(--hi-input-padding-sm);
  font-size: var(--hi-input-font-size-sm);
  line-height: var(--hi-input-line-height-sm);
}

textarea.hi-ui-textarea-size-lg,
.hi-ui-textarea-size-lg {
  padding: var(--hi-input-padding-lg);
  font-size: var(--hi-input-font-size-lg);
  line-height: var(--hi-input-line-height-lg);
}

/* State Variants */
textarea.hi-ui-textarea-state-error,
.hi-ui-textarea-state-error {
  border-color: var(--hi-input-border-color-error);
}

textarea.hi-ui-textarea-state-error:focus,
.hi-ui-textarea-state-error:focus {
  border-color: var(--hi-input-border-color-error);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

textarea.hi-ui-textarea-state-success,
.hi-ui-textarea-state-success {
  border-color: var(--hi-input-border-color-success);
}

textarea.hi-ui-textarea-state-success:focus,
.hi-ui-textarea-state-success:focus {
  border-color: var(--hi-input-border-color-success);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

/* Disabled State */
textarea.hi-ui-textarea-disabled,
.hi-ui-textarea-disabled,
textarea.hi-ui-textarea:disabled,
.hi-ui-textarea:disabled {
  background-color: var(--hi-input-bg-disabled);
  color: var(--hi-input-text-color-disabled);
  cursor: not-allowed;
  opacity: 0.6;
}

/* Read-only State */
textarea.hi-ui-textarea:-moz-read-only, .hi-ui-textarea:-moz-read-only {
  background-color: var(--hi-input-bg-readonly);
  cursor: default;
}
textarea.hi-ui-textarea-readonly,
.hi-ui-textarea-readonly,
textarea.hi-ui-textarea:read-only,
.hi-ui-textarea:read-only {
  background-color: var(--hi-input-bg-readonly);
  cursor: default;
}

/* Full Width */
textarea.hi-ui-textarea-full-width,
.hi-ui-textarea-full-width {
  width: 100%;
  display: block;
}

/* Resize Variants */
textarea.hi-ui-textarea-resize-none,
.hi-ui-textarea-resize-none {
  resize: none;
}

textarea.hi-ui-textarea-resize-vertical,
.hi-ui-textarea-resize-vertical {
  resize: vertical;
}

textarea.hi-ui-textarea-resize-horizontal,
.hi-ui-textarea-resize-horizontal {
  resize: horizontal;
}

textarea.hi-ui-textarea-resize-both,
.hi-ui-textarea-resize-both {
  resize: both;
}

/* ===================================================
   Toggle Component Styles
   =================================================== */

/* Wrapper - acts as clickable label */
.hi-ui-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  font-family: var(--hi-text-font-family);
  color: var(--hi-input-text-color);
  line-height: 1.4;
}

/* Hide native checkbox but keep it accessible */
.hi-ui-toggle__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Track (the pill-shaped background) */
.hi-ui-toggle__track {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  border-radius: 9999px;
  background-color: var(--hi-input-border-color, #d1d5db);
  transition:
    background-color 0.2s ease-in-out,
    box-shadow 0.15s ease-in-out;
}

/* Thumb (the circular knob) */
.hi-ui-toggle__thumb {
  position: absolute;
  border-radius: 50%;
  background-color: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease-in-out;
}

/* Label text */
.hi-ui-toggle__label {
  flex: 1;
}

/* ===================================================
   Size Variants
   =================================================== */

/* Small */
.hi-ui-toggle--size-sm {
  font-size: var(--hi-input-font-size-sm, 0.875rem);
}

.hi-ui-toggle--size-sm .hi-ui-toggle__track {
  width: 32px;
  height: 18px;
}

.hi-ui-toggle--size-sm .hi-ui-toggle__thumb {
  width: 14px;
  height: 14px;
  left: 2px;
}

.hi-ui-toggle--size-sm .hi-ui-toggle__input:checked + .hi-ui-toggle__track .hi-ui-toggle__thumb {
  transform: translateX(14px);
}

/* Medium (default) */
.hi-ui-toggle--size-md {
  font-size: var(--hi-input-font-size-sm, 0.875rem);
}

.hi-ui-toggle--size-md .hi-ui-toggle__track {
  width: 44px;
  height: 24px;
}

.hi-ui-toggle--size-md .hi-ui-toggle__thumb {
  width: 20px;
  height: 20px;
  left: 2px;
}

.hi-ui-toggle--size-md .hi-ui-toggle__input:checked + .hi-ui-toggle__track .hi-ui-toggle__thumb {
  transform: translateX(20px);
}

/* Large */
.hi-ui-toggle--size-lg {
  font-size: var(--hi-input-font-size-lg, 1rem);
}

.hi-ui-toggle--size-lg .hi-ui-toggle__track {
  width: 56px;
  height: 30px;
}

.hi-ui-toggle--size-lg .hi-ui-toggle__thumb {
  width: 26px;
  height: 26px;
  left: 2px;
}

.hi-ui-toggle--size-lg .hi-ui-toggle__input:checked + .hi-ui-toggle__track .hi-ui-toggle__thumb {
  transform: translateX(24px);
}

/* ===================================================
   States
   =================================================== */

/* Hover state */
.hi-ui-toggle:hover:not(.hi-ui-toggle--disabled) .hi-ui-toggle__track {
  background-color: var(--hi-input-border-color-hover, #9ca3af);
}

.hi-ui-toggle:hover:not(.hi-ui-toggle--disabled)
  .hi-ui-toggle__input:checked
  + .hi-ui-toggle__track {
  background-color: #3d7a45;
}

/* Focus state - use focus-visible for keyboard-only focus */
.hi-ui-toggle__input:focus-visible + .hi-ui-toggle__track {
  box-shadow: var(--hi-input-focus-ring, 0 0 0 3px rgba(78, 151, 88, 0.2));
}

/* Checked state */
.hi-ui-toggle__input:checked + .hi-ui-toggle__track {
  background-color: #4e9758;
}

/* Disabled state */
.hi-ui-toggle--disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.hi-ui-toggle--disabled .hi-ui-toggle__track {
  background-color: var(--hi-input-bg-disabled, #e5e7eb);
}

.hi-ui-toggle--disabled .hi-ui-toggle__input:checked + .hi-ui-toggle__track {
  background-color: #4e9758;
  opacity: 0.6;
}

/* ===================================================
   Accessibility
   =================================================== */

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hi-ui-toggle__track,
  .hi-ui-toggle__thumb {
    transition: none;
  }
}

/* High contrast mode */
@media (prefers-contrast: more) {
  .hi-ui-toggle__track {
    border: 2px solid #000000;
  }

  .hi-ui-toggle__input:checked + .hi-ui-toggle__track {
    background-color: #000000;
  }

  .hi-ui-toggle__input:focus-visible + .hi-ui-toggle__track {
    outline: 3px solid #000000;
    outline-offset: 2px;
    box-shadow: none;
  }
}

/* Tooltip wrapper - inline display to not affect layout. It no longer anchors the
   bubble (that is portaled to <body>), but stays `relative`: host pages may be
   using it as a positioning context, and dropping it is a customer-visible change
   this PR can't browser-verify. */
.hi-ui-tooltip-wrapper {
  position: relative;
  display: inline-flex;
  cursor: help;
}

/* Tooltip bubble.

   Fixed, and portaled to <body> by the component — an `overflow` ancestor
   (a table, a card grid, the presales pods swipe track) clips an absolutely
   positioned bubble, and on a narrow viewport that cropped the popover against
   the left edge. Body-level is also why it can't be a fixed element left in
   place: an ancestor with a transform/filter would capture it again. Coordinates
   come from JS (the trigger's viewport rect); the per-position transforms below
   own the offset and the 8px gap, so nothing here anchors to a parent.

   `--hi-tooltip-shift` is the viewport correction the component measures: the
   bubble adds it, the arrow subtracts it so it keeps pointing at the trigger.

   Typography is pinned rather than inherited for the same reason — at body level
   there is no meaningful parent to inherit from. Museo carries its weight in the
   cut, so `normal` avoids a synthetic bold on legacy hosts.

   The bubble is also a POPOVER (the component promotes it while open), which is
   what lets it paint over a modal — see the block comment in Tooltip.tsx. That
   brings two UA defaults for `[popover]` which must be overridden here, and both
   fail loudly if they are ever removed:

   - `display: none` on a closed popover. The component measures the bubble to
     decide which side to hang off and how far to shift it, and a display:none
     element measures as zero — so the bubble stays displayed at all times and
     `opacity`/`visibility` keep doing the showing and hiding, exactly as before.
   - `inset: 0; margin: auto`, which centres a popover in the viewport. Left in
     place it parks every tooltip in the middle of the screen rather than on its
     trigger (measured: 560,329 instead of 300,100).
   - `overflow: auto`, which puts SCROLLBARS on the bubble. The arrow below is
     positioned outside the bubble's box on purpose, so scrollable overflow is
     exactly what `auto` finds there.
   - `border: solid`, i.e. a 3px border in `currentColor` — white on the dark
     bubble, and it grew the box from 274x55 to 280x61.

   The list is what a full computed-style diff between a popover and a plain
   element found; if another property ever looks wrong here, run that diff rather
   than overriding one property at a time. */
.hi-ui-tooltip {
  --hi-tooltip-shift: 0px;

  position: fixed;
  inset: auto;
  z-index: 1100; /* over TopNav (1001) / MainNav (1000), which it now shares a stacking context with */
  display: block;
  overflow: visible;
  margin: 0;
  padding: 8px 12px;
  border: none;
  font-family: var(--hi-text-font-family);
  font-size: 14px;
  font-weight: normal;
  line-height: 1.4;
  color: #ffffff;
  background-color: #333333;
  border-radius: 4px;
  width: -moz-max-content;
  width: max-content;
  max-width: 250px;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.15s ease,
    visibility 0.15s ease;
}

.hi-ui-tooltip--visible {
  opacity: 1;
  visibility: visible;
}

/* Arrow */
.hi-ui-tooltip__arrow {
  position: absolute;
  width: 0;
  height: 0;
  border: 6px solid transparent;
}

/* Light variant — dark-on-white bubble (legacy-style hover popovers). The
   outline is a drop-shadow filter rather than a border so it follows the
   combined shape of the bubble AND its arrow child (a border would edge only the
   rectangle, leaving the arrow borderless); the per-position rules below colour
   the triangle white so it's part of that shape. */
.hi-ui-tooltip--light {
  color: #2b2b2b;
  background-color: #ffffff;
  filter: drop-shadow(0 0 0.6px rgba(0, 0, 0, 0.38)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.14));
}

.hi-ui-tooltip--light.hi-ui-tooltip--top .hi-ui-tooltip__arrow {
  border-top-color: #ffffff;
}

.hi-ui-tooltip--light.hi-ui-tooltip--bottom .hi-ui-tooltip__arrow {
  border-bottom-color: #ffffff;
}

.hi-ui-tooltip--light.hi-ui-tooltip--left .hi-ui-tooltip__arrow {
  border-left-color: #ffffff;
}

.hi-ui-tooltip--light.hi-ui-tooltip--right .hi-ui-tooltip__arrow {
  border-right-color: #ffffff;
}

/* Positions. `left`/`top` are the anchor point on the trigger, set inline by the
   component; each transform pulls the bubble off that point and clear of the
   trigger by 8px. */

/* Position: Top (default) */
.hi-ui-tooltip--top {
  transform: translate(calc(-50% + var(--hi-tooltip-shift)), calc(-100% - 8px));
}

.hi-ui-tooltip--top .hi-ui-tooltip__arrow {
  top: 100%;
  left: 50%;
  transform: translateX(calc(-50% - var(--hi-tooltip-shift)));
  border-top-color: #333333;
  border-bottom: 0;
}

/* Position: Bottom */
.hi-ui-tooltip--bottom {
  transform: translate(calc(-50% + var(--hi-tooltip-shift)), 8px);
}

.hi-ui-tooltip--bottom .hi-ui-tooltip__arrow {
  bottom: 100%;
  left: 50%;
  transform: translateX(calc(-50% - var(--hi-tooltip-shift)));
  border-bottom-color: #333333;
  border-top: 0;
}

/* Position: Left */
.hi-ui-tooltip--left {
  transform: translate(calc(-100% - 8px), -50%);
}

.hi-ui-tooltip--left .hi-ui-tooltip__arrow {
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  border-left-color: #333333;
  border-right: 0;
}

/* Position: Right */
.hi-ui-tooltip--right {
  transform: translate(8px, -50%);
}

.hi-ui-tooltip--right .hi-ui-tooltip__arrow {
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  border-right-color: #333333;
  border-left: 0;
}

/* Accordion container */
.hi-ui-accordion {
  width: 100%;
}

/* Accordion group */
.hi-ui-accordion-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Individual accordion item */
.hi-ui-accordion__item {
  border-bottom: 1px solid #e5e7eb;
}

.hi-ui-accordion__item:last-child {
  border-bottom: none;
}

/* Trigger button */
.hi-ui-accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 48px;
  padding: 12px 0;
  background: none;
  border: none;
  cursor: pointer;
  /* Native <button> does not inherit font-family — pin it to the DS font so the
     trigger label renders in Museo rather than the UA default (Arial). */
  font-family: var(--hi-text-font-family);
  font-size: 16px;
  font-weight: 500;
  color: #1f2937;
  text-align: left;
}

.hi-ui-accordion__trigger:focus-visible {
  outline: var(--hi-focus-ring-width) solid var(--hi-focus-ring);
  outline-offset: 2px;
}

.hi-ui-accordion__item--disabled .hi-ui-accordion__trigger {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Label */
.hi-ui-accordion__label {
  flex: 1;
  padding-right: 12px;
}

/* Chevron icon */
.hi-ui-accordion__chevron {
  flex-shrink: 0;
  color: #6b7280;
  transition: transform 0.2s ease-out;
}

.hi-ui-accordion__item--expanded .hi-ui-accordion__chevron {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .hi-ui-accordion__chevron {
    transition: none;
  }
}

/* Panel - CSS grid animation. `visibility: hidden` removes the collapsed
   content from the accessibility tree and tab order (the 0fr collapse alone
   only hides it visually, so screen-reader browse mode could walk into
   "closed" panels while the trigger says aria-expanded="false"). Visibility
   transitions discretely — it flips at the END of the close animation and
   instantly on open — so the motion is unaffected. */
.hi-ui-accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  visibility: hidden;
  transition:
    grid-template-rows 0.2s ease,
    visibility 0.2s;
}

.hi-ui-accordion__item--expanded .hi-ui-accordion__panel {
  grid-template-rows: 1fr;
  visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
  .hi-ui-accordion__panel {
    transition: none;
  }
}

/* Content wrapper - needed for grid animation */
.hi-ui-accordion__content {
  min-height: 0;
  overflow: hidden;
}

.hi-ui-accordion__item--expanded .hi-ui-accordion__content {
  padding-bottom: 16px;
}

/* Content text styling */
.hi-ui-accordion__content {
  font-family: var(--hi-text-font-family);
  font-size: 14px;
  line-height: 1.5;
  color: #4b5563;
}

/* When the open content also toggles the item (toggleOnContentClick). */
.hi-ui-accordion__content--clickable {
  cursor: pointer;
}

/* Two-bar arrow icon (legacy presales FAQ chevron). Two short bars form a
   chevron; the rotation flips with the item's expanded state. Independent of
   the animation variant. */
.hi-ui-accordion__arrow {
  position: relative;
  flex-shrink: 0;
  align-self: center;
  width: 14px;
  height: 14px;
  color: #6b7280;
}

.hi-ui-accordion__arrow::before,
.hi-ui-accordion__arrow::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 6px;
  width: 3px;
  height: 9px;
  background-color: currentColor;
  transition: transform 0.25s ease-in-out;
}

/* Collapsed: chevron points down. */
.hi-ui-accordion__arrow::before {
  transform: translate(2px, 0) rotate(45deg);
}

.hi-ui-accordion__arrow::after {
  transform: translate(-2px, 0) rotate(-45deg);
}

/* Expanded: chevron points up. */
.hi-ui-accordion__item--expanded .hi-ui-accordion__arrow::before {
  transform: translate(-2px, 0) rotate(45deg);
}

.hi-ui-accordion__item--expanded .hi-ui-accordion__arrow::after {
  transform: translate(2px, 0) rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
  .hi-ui-accordion__arrow::before,
  .hi-ui-accordion__arrow::after {
    transition: none;
  }
}

/* ── slide-fade variant ──────────────────────────────────────────────────────
   Legacy presales FAQ motion: the panel animates max-height + opacity + a small
   translateY slide (instead of the default grid-rows collapse), and each item
   flips in on mount. Opt-in via `animation="slide-fade"`. */
.hi-ui-accordion--slide-fade .hi-ui-accordion__panel {
  display: block;
  transition: none;
  /* The a11y hiding lives on __content in this variant (the panel has no
     transition, so hiding here would cut the close animation short). */
  visibility: visible;
}

/* Collapsed content is hidden from the accessibility tree too (see the
   default panel rule); the existing `all` transition carries visibility, so
   it flips after the close animation and instantly on open. */
.hi-ui-accordion--slide-fade .hi-ui-accordion__content {
  max-height: 0;
  opacity: 0;
  transform: translateY(50%);
  visibility: hidden;
  transition: all 0.25s ease-in-out;
}

.hi-ui-accordion--slide-fade .hi-ui-accordion__item--expanded .hi-ui-accordion__content {
  /* Capped height (legacy hack) — large enough for any FAQ answer. */
  max-height: 800px;
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

.hi-ui-accordion--slide-fade .hi-ui-accordion__item {
  animation: hi-ui-accordion-flipdown 0.5s ease both;
}

@keyframes hi-ui-accordion-flipdown {
  0% {
    opacity: 0;
    transform-origin: top center;
    transform: rotateX(-90deg);
  }
  5% {
    opacity: 1;
  }
  80% {
    transform: rotateX(8deg);
  }
  83% {
    transform: rotateX(6deg);
  }
  92% {
    transform: rotateX(-3deg);
  }
  100% {
    transform-origin: top center;
    transform: rotateX(0deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hi-ui-accordion--slide-fade .hi-ui-accordion__content {
    transition: none;
  }

  .hi-ui-accordion--slide-fade .hi-ui-accordion__item {
    animation: none;
  }
}

/* AccountButton styles - CSS-only hover dropdown */

#hi-ui-topnav .hi-ui-account-button {
  display: inline-block;
  position: relative;
}

/* AccountButton specific styling - applies to both login button and account dropdown button */
#hi-ui-topnav .hi-ui-account-button .tw-btn-base,
#hi-ui-topnav .hi-ui-topnav-right > .tw-btn-base.tw-btn-success {
  font-size: 11px !important;
  line-height: 1 !important;
  border-radius: 5px;
  padding: 7px 5px 6px 8px !important;
  height: 28px !important;
  gap: 8px;
  color: #ffffff !important;
}

/* Ensure login button text and icon are white - override legacy page styles */
#hi-ui-topnav .hi-ui-account-button .tw-btn-base *,
#hi-ui-topnav .hi-ui-topnav-right > .tw-btn-base.tw-btn-success,
#hi-ui-topnav .hi-ui-topnav-right > .tw-btn-base.tw-btn-success * {
  color: #ffffff !important;
  fill: #ffffff !important;
}

/* Override legacy _shared.css button styles (cpanel/mwp pages) */
#hi-ui-topnav .hi-ui-account-button .tw-btn-base {
  box-shadow: none !important;
  top: auto !important;
  position: relative !important;
}

#hi-ui-topnav .hi-ui-account-button .tw-btn-base:active {
  box-shadow: none !important;
  top: auto !important;
}

#hi-ui-topnav .hi-ui-account-button .tw-btn-base svg,
#hi-ui-topnav .hi-ui-account-button .tw-btn-base img {
  width: 13px !important;
  height: 13px !important;
  margin-left: 0 !important;
  position: relative !important;
  top: -1px !important;
}

/* Button hover state - applies when hovering button OR when hovering the parent container (which includes the dropdown) */
#hi-ui-topnav .hi-ui-account-button .tw-btn-base:hover,
#hi-ui-topnav .hi-ui-account-button:hover .tw-btn-base,
#hi-ui-topnav .hi-ui-topnav-right > .tw-btn-base.tw-btn-success:hover {
  background-color: #0d4e46 !important;
}

/* Dropdown menu - hidden by default */
#hi-ui-topnav .hi-ui-account-button-menu {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  top: 100%;
  right: 0;
  background: #0d4e46;
  border-radius: 6px;
  margin-top: 2px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0.2s;
  z-index: 1000;
}

/* Show dropdown on hover or when keyboard-opened */
#hi-ui-topnav .hi-ui-account-button:hover .hi-ui-account-button-menu,
#hi-ui-topnav .hi-ui-account-button-menu-keyboard-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Dropdown links - use ID selector for highest precedence over page content styles */
#hi-ui-topnav .hi-ui-account-button-link {
  display: flex;
  align-items: center;
  padding: 9px 10px;
  color: #ffffff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 400;
  font-family: 'MuseoSansRounded-700', 'MuseoSansRounded-700 Fallback', sans-serif;
  transition: background-color 0.15s ease;
  text-transform: uppercase;
  white-space: nowrap;
}

#hi-ui-topnav .hi-ui-account-button-link:hover {
  text-decoration: none;
}

#hi-ui-topnav .hi-ui-account-button-link:last-child {
  border-bottom: none;
}

#hi-ui-topnav .hi-ui-account-button-link:first-child {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

#hi-ui-topnav .hi-ui-account-button-link:last-child {
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

/* Breadcrumbs Component Styles */

#hi-ui-breadcrumbs.hi-ui-breadcrumbs {
  padding: 0;
  margin: 0;
}

/* Ensure the list wraps properly */
#hi-ui-breadcrumbs ol {
  flex-wrap: wrap;
  margin: 0;
}

/* Keep each breadcrumb item's text together */
#hi-ui-breadcrumbs .hi-ui-list-item {
  white-space: nowrap;
  margin: 0;
}

#hi-ui-breadcrumbs a.hi-ui-link,
#hi-ui-breadcrumbs .hi-ui-text {
  font-family:
    MuseoSansRounded-300,
    'MuseoSansRounded-300 Fallback',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    sans-serif;
  font-size: 12px;
  font-weight: normal;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}

#hi-ui-breadcrumbs a.hi-ui-link {
  text-decoration: underline;
}

#hi-ui-breadcrumbs a.hi-ui-link:hover {
  text-decoration: none;
  opacity: 1;
}

/* Card container */
.hi-ui-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
  background-color: #ffffff;
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}

/* Variants */
.hi-ui-card--default {
  border: 1px solid #e5e7eb;
}

.hi-ui-card--elevated {
  border: none;
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.hi-ui-card--outlined {
  border: 2px solid #d1d5db;
}

.hi-ui-card--surface {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
}

/* Interactive states */
.hi-ui-card--interactive {
  cursor: pointer;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

.hi-ui-card--interactive:hover {
  transform: translateY(-2px);
}

.hi-ui-card--interactive.hi-ui-card--default:hover {
  border-color: #d1d5db;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.hi-ui-card--interactive.hi-ui-card--elevated:hover {
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

.hi-ui-card--interactive.hi-ui-card--outlined:hover {
  border-color: #9ca3af;
}

.hi-ui-card--interactive:focus-visible {
  outline: var(--hi-focus-ring-width) solid var(--hi-focus-ring);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .hi-ui-card--interactive {
    transition: none;
  }

  .hi-ui-card--interactive:hover {
    transform: none;
  }
}

/* Cover image */
.hi-ui-card__cover {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  flex-shrink: 0;
}

.hi-ui-card__cover-image {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* Header */
.hi-ui-card__header {
  flex-shrink: 0;
}

/* Body */
.hi-ui-card__body {
  flex: 1;
}

/* Footer */
.hi-ui-card__footer {
  flex-shrink: 0;
}

/* Padding variants - applied to header, body, footer */
.hi-ui-card--padding-none .hi-ui-card__header,
.hi-ui-card--padding-none .hi-ui-card__body,
.hi-ui-card--padding-none .hi-ui-card__footer {
  padding: 0;
}

.hi-ui-card--padding-sm .hi-ui-card__header,
.hi-ui-card--padding-sm .hi-ui-card__body,
.hi-ui-card--padding-sm .hi-ui-card__footer {
  padding: 12px;
}

.hi-ui-card--padding-md .hi-ui-card__header,
.hi-ui-card--padding-md .hi-ui-card__body,
.hi-ui-card--padding-md .hi-ui-card__footer {
  padding: 24px;
}

@media (max-width: 768px) {
  .hi-ui-card--padding-md .hi-ui-card__header,
  .hi-ui-card--padding-md .hi-ui-card__body,
  .hi-ui-card--padding-md .hi-ui-card__footer {
    padding: 16px;
  }
}

.hi-ui-card--padding-lg .hi-ui-card__header,
.hi-ui-card--padding-lg .hi-ui-card__body,
.hi-ui-card--padding-lg .hi-ui-card__footer {
  padding: 24px;
}

/* Header border - only when there's content after it */
.hi-ui-card__header:not(:last-child) {
  border-bottom: 1px solid #f3f4f6;
}

/* Footer border - only when there's content before it */
.hi-ui-card__footer:not(:first-child) {
  border-top: 1px solid #f3f4f6;
}

/* Title row */
.hi-ui-card__title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.hi-ui-card__title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: #1f2937;
}

.hi-ui-card__title-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Actions container */
.hi-ui-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hi-ui-card__actions--start {
  justify-content: flex-start;
}

.hi-ui-card__actions--center {
  justify-content: center;
}

.hi-ui-card__actions--end {
  justify-content: flex-end;
}

.hi-ui-card__actions--between {
  justify-content: space-between;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .hi-ui-card__title-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .hi-ui-card__actions {
    width: 100%;
  }

  .hi-ui-card__actions--end,
  .hi-ui-card__actions--between {
    flex-direction: column;
  }

  .hi-ui-card__actions--end > *,
  .hi-ui-card__actions--between > * {
    width: 100%;
  }
}

/* High contrast mode */
@media (prefers-contrast: more) {
  .hi-ui-card--default,
  .hi-ui-card--outlined {
    border-width: 2px;
    border-color: #000000;
  }

  .hi-ui-card--elevated {
    border: 2px solid #000000;
    box-shadow: none;
  }

  .hi-ui-card--interactive:focus-visible {
    outline-width: 3px;
  }

  .hi-ui-card__header {
    border-bottom-color: #000000;
  }

  .hi-ui-card__footer {
    border-top-color: #000000;
  }
}

/* ===================================================
   CardSelector Component Styles
   =================================================== */

/* CSS Custom Properties */
:root {
  --hi-cs-bg: #ffffff;
  --hi-cs-border-color: #d1d5db;
  --hi-cs-border-color-hover: #9ca3af;
  --hi-cs-border-color-selected: #256957;
  --hi-cs-border-color-focus: #3b82f6;
  --hi-cs-border-radius: 8px;
  --hi-cs-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  --hi-cs-shadow-hover: 0 4px 6px rgba(0, 0, 0, 0.07);
  --hi-cs-text-color: #2b2b2b;
  --hi-cs-text-color-muted: #6b7280;
  --hi-cs-font-family: var(
    --hi-text-font-family,
    MuseoSansRounded-300,
    'MuseoSansRounded-300 Fallback',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    sans-serif
  );
}

/* Fieldset wrapper (optional) */
.hi-ui-card-selector__fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

.hi-ui-card-selector__legend {
  font-family: var(--hi-cs-font-family);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--hi-cs-text-color);
  margin-bottom: 0.75rem;
  padding: 0;
}

.hi-ui-card-selector__legend--hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Grid container */
.hi-ui-card-selector {
  display: grid;
  gap: 0.75rem;
  font-family: var(--hi-cs-font-family);
}

/* Column variants */
.hi-ui-card-selector--cols-1 {
  grid-template-columns: 1fr;
}

.hi-ui-card-selector--cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

.hi-ui-card-selector--cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.hi-ui-card-selector--cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

/* Mobile responsive - stack on small screens */
@media (max-width: 768px) {
  .hi-ui-card-selector--cols-2,
  .hi-ui-card-selector--cols-3,
  .hi-ui-card-selector--cols-4 {
    grid-template-columns: 1fr;
  }
}

/* Individual card */
.hi-ui-card-selector__card {
  position: relative;
  background: var(--hi-cs-bg);
  border: 2px solid var(--hi-cs-border-color);
  border-radius: var(--hi-cs-border-radius);
  box-shadow: var(--hi-cs-shadow);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background-color 0.15s ease;
}

.hi-ui-card-selector__card:hover:not(.hi-ui-card-selector__card--disabled) {
  border-color: var(--hi-cs-border-color-hover);
  box-shadow: var(--hi-cs-shadow-hover);
}

/* Selected state */
.hi-ui-card-selector__card--selected {
  border-color: var(--hi-cs-border-color-selected);
  background-color: rgba(37, 105, 87, 0.03);
}

.hi-ui-card-selector__card--selected:hover:not(.hi-ui-card-selector__card--disabled) {
  border-color: var(--hi-cs-border-color-selected);
}

/* Disabled state */
.hi-ui-card-selector__card--disabled {
  cursor: not-allowed;
  opacity: 0.5;
  background-color: #f9fafb;
}

.hi-ui-card-selector--disabled .hi-ui-card-selector__card {
  cursor: not-allowed;
  opacity: 0.5;
  background-color: #f9fafb;
}

/* Style the Radio/Checkbox inside the card */
.hi-ui-card-selector__card .hi-ui-radio,
.hi-ui-card-selector__card .hi-ui-checkbox {
  display: flex;
  width: 100%;
  padding: 1rem;
  box-sizing: border-box;
  cursor: pointer;
}

.hi-ui-card-selector__card--disabled .hi-ui-radio,
.hi-ui-card-selector__card--disabled .hi-ui-checkbox {
  cursor: not-allowed;
}

/* Override the label flex to allow content to grow */
.hi-ui-card-selector__card .hi-ui-radio-label,
.hi-ui-card-selector__card .hi-ui-checkbox-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

/* Focus state on card when input is focused */
.hi-ui-card-selector__card:has(.hi-ui-radio-input:focus-visible),
.hi-ui-card-selector__card:has(.hi-ui-checkbox-input:focus-visible) {
  outline: 2px solid var(--hi-cs-border-color-focus);
  outline-offset: 2px;
}

/* Content area */
.hi-ui-card-selector__content {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
  min-width: 0;
}

/* Icon */
.hi-ui-card-selector__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--hi-cs-text-color);
}

.hi-ui-card-selector__icon svg {
  width: 100%;
  height: 100%;
}

/* Text container */
.hi-ui-card-selector__text {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

/* Label */
.hi-ui-card-selector__label {
  font-weight: 500;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--hi-cs-text-color);
}

/* Description */
.hi-ui-card-selector__description {
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--hi-cs-text-color-muted);
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* ===================================================
   Size Variants
   =================================================== */

/* Small */
.hi-ui-card-selector--sm .hi-ui-card-selector__card .hi-ui-radio,
.hi-ui-card-selector--sm .hi-ui-card-selector__card .hi-ui-checkbox {
  padding: 0.75rem;
}

.hi-ui-card-selector--sm .hi-ui-card-selector__content {
  gap: 0.5rem;
}

.hi-ui-card-selector--sm .hi-ui-card-selector__icon {
  width: 20px;
  height: 20px;
}

.hi-ui-card-selector--sm .hi-ui-card-selector__label {
  font-size: 0.875rem;
}

.hi-ui-card-selector--sm .hi-ui-card-selector__description {
  font-size: 0.75rem;
}

/* Large */
.hi-ui-card-selector--lg .hi-ui-card-selector__card .hi-ui-radio,
.hi-ui-card-selector--lg .hi-ui-card-selector__card .hi-ui-checkbox {
  padding: 1.25rem;
}

.hi-ui-card-selector--lg .hi-ui-card-selector__content {
  gap: 1rem;
}

.hi-ui-card-selector--lg .hi-ui-card-selector__icon {
  width: 32px;
  height: 32px;
}

.hi-ui-card-selector--lg .hi-ui-card-selector__label {
  font-size: 1rem;
}

.hi-ui-card-selector--lg .hi-ui-card-selector__description {
  font-size: 0.875rem;
}

/* ===================================================
   Accessibility
   =================================================== */

/* High contrast mode */
@media (prefers-contrast: more) {
  .hi-ui-card-selector__card {
    border-width: 3px;
  }

  .hi-ui-card-selector__card--selected {
    border-color: #000000;
    background-color: #e5e5e5;
  }

  .hi-ui-card-selector__card:has(.hi-ui-radio-input:focus-visible),
  .hi-ui-card-selector__card:has(.hi-ui-checkbox-input:focus-visible) {
    outline-width: 3px;
    outline-color: #000000;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hi-ui-card-selector__card {
    transition: none;
  }
}

/* Body scroll lock when modal is open */
body.hi-ui-modal-open {
  overflow: hidden;
}

/* Native dialog reset and base styles */
.hi-ui-modal {
  border: none;
  padding: 0;
  max-width: none;
  max-height: 90vh;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  outline: none;
  box-sizing: border-box;
  animation: hi-ui-modal-in 0.3s ease forwards;
}

.hi-ui-modal--closing {
  animation: hi-ui-modal-out 0.3s ease forwards;
}

/* Native backdrop */
.hi-ui-modal::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
  animation: hi-ui-modal-backdrop-in 0.3s ease forwards;
}

.hi-ui-modal--closing::backdrop {
  animation: hi-ui-modal-backdrop-out 0.3s ease forwards;
}

/* Animations */
@keyframes hi-ui-modal-in {
  from {
    transform: scale(0.95);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes hi-ui-modal-out {
  from {
    transform: scale(1);
    opacity: 1;
  }
  to {
    transform: scale(0.95);
    opacity: 0;
  }
}

@keyframes hi-ui-modal-backdrop-in {
  from {
    background-color: rgba(0, 0, 0, 0);
  }
  to {
    background-color: rgba(0, 0, 0, 0.5);
  }
}

@keyframes hi-ui-modal-backdrop-out {
  from {
    background-color: rgba(0, 0, 0, 0.5);
  }
  to {
    background-color: rgba(0, 0, 0, 0);
  }
}

/* Size variants */
.hi-ui-modal--small {
  width: 400px;
  max-width: calc(100vw - 32px);
}

.hi-ui-modal--medium {
  width: 600px;
  max-width: calc(100vw - 32px);
}

.hi-ui-modal--large {
  width: 850px;
  max-width: calc(100vw - 32px);
}

/* Close button */
.hi-ui-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  color: #2b2b2b;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
  padding: 0;
}

.hi-ui-modal__close:hover {
  background-color: #f3f4f6;
  color: #374151;
}

.hi-ui-modal__close:focus-visible {
  outline: var(--hi-focus-ring-width) solid var(--hi-focus-ring);
  outline-offset: var(--hi-focus-ring-offset);
}

/* Title */
.hi-ui-modal__title {
  margin: 0;
  padding: 32px 48px 0 20px;
  font-family: 'MuseoSansRounded-700', 'MuseoSansRounded-700 Fallback', sans-serif;
  font-size: 1.25rem;
  color: #111827;
  line-height: 1.4;
}

/* Body */
.hi-ui-modal__body {
  /* flex-basis auto (not 0) + min-height:0 so the body sizes to its content in
     WebKit - a flex column with only max-height would otherwise collapse the
     body to ~0 height in Safari. Shrinks and scrolls when content exceeds 90vh. */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 20px;
  box-sizing: border-box;
  /* Raw text children (e.g. ConfirmationDialog's message) would otherwise fall back
     to the browser default serif — the title already sets a font, so match it for the
     body. Component-styled content (Text, Input…) sets its own font and is unaffected. */
  font-family: var(--hi-text-font-family);
}

/* When there's a title, reduce top padding on body */
.hi-ui-modal__title + .hi-ui-modal__body {
  padding-top: 16px;
}

/* Footer */
.hi-ui-modal__footer {
  padding: 16px 20px;
  border-top: 1px solid #e5e7eb;
  display: flex;
  justify-content: flex-start;
  gap: 12px;
}

/* Responsive: Medium and Large go full-screen on mobile */
@media (max-width: 768px) {
  .hi-ui-modal--medium,
  .hi-ui-modal--large {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    border-radius: 0;
  }

  .hi-ui-modal--medium .hi-ui-modal__body,
  .hi-ui-modal--large .hi-ui-modal__body {
    flex: 1;
  }

  /* Small modals stay centered but have some padding */
  .hi-ui-modal--small {
    width: calc(100vw - 32px);
    max-width: 400px;
  }

  /* Footer buttons stack full-width on mobile */
  .hi-ui-modal__footer {
    flex-direction: column;
  }

  .hi-ui-modal__footer > *,
  .hi-ui-modal__footer > * > * {
    width: 100%;
  }

  /* Reverse order so primary action is on top */
  .hi-ui-modal__footer > * {
    display: flex;
    flex-direction: column-reverse;
    gap: 12px;
  }
}

/* =============================================================================
   ConfirmationDialog Component Styles
   ============================================================================= */

.hi-ui-confirmation-dialog .hi-ui-modal__body {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: #4b5563;
}

/* ===================================================
   FeatureCard Component
   =================================================== */

.hi-ui-feature-card {
  --hi-fc-bg: var(--hi-bg-primary, #ffffff);
  --hi-fc-border-color: var(--hi-border-color, #e5e7eb);
  --hi-fc-border-radius: 0.5rem;
  --hi-fc-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  --hi-fc-title-color: var(--hi-text-color-primary, #111827);
  --hi-fc-subtitle-color: var(--hi-text-color-secondary, #6b7280);
  --hi-fc-feature-color: var(--hi-text-color-primary, #111827);
  --hi-fc-included-color: var(--hi-color-success, #059669);
  --hi-fc-excluded-color: var(--hi-text-color-tertiary, #9ca3af);
  --hi-fc-highlight-color: var(--hi-color-primary, #4e8c97);
  --hi-fc-badge-bg: var(--hi-color-primary, #4e8c97);
  --hi-fc-badge-color: #ffffff;
  --hi-fc-font-family: var(--hi-text-font-family, system-ui, sans-serif);

  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--hi-fc-bg);
  border: 1px solid var(--hi-fc-border-color);
  border-radius: var(--hi-fc-border-radius);
  box-shadow: var(--hi-fc-shadow);
  font-family: var(--hi-fc-font-family);
}

/* Cards with badges need top margin for the badge to show */
.hi-ui-feature-card:has(.hi-ui-feature-card__badge) {
  margin-top: 0.875rem;
}

/* ===================================================
   Badge
   =================================================== */

.hi-ui-feature-card__badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  background: var(--hi-fc-badge-bg);
  color: var(--hi-fc-badge-color);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  white-space: nowrap;
}

/* ===================================================
   Header
   =================================================== */

.hi-ui-feature-card__header {
  padding: 1.5rem 1.5rem 0.5rem;
  text-align: center;
}

.hi-ui-feature-card__badge + .hi-ui-feature-card__header {
  padding-top: 2rem;
}

.hi-ui-feature-card__title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--hi-fc-title-color);
  line-height: 1.3;
}

.hi-ui-feature-card__subtitle {
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
  color: var(--hi-fc-subtitle-color);
  line-height: 1.4;
}

.hi-ui-feature-card__price {
  margin-top: 1rem;
}

/* ===================================================
   Features List
   =================================================== */

.hi-ui-feature-card__features {
  flex: 1;
  list-style: none;
  margin: 0;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--hi-fc-border-color);
  border-bottom: 1px solid var(--hi-fc-border-color);
}

.hi-ui-feature-card__feature {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.25rem 0;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--hi-fc-feature-color);
}

.hi-ui-feature-card__feature--excluded {
  color: var(--hi-fc-excluded-color);
}

.hi-ui-feature-card__feature--excluded .hi-ui-feature-card__feature-text {
  text-decoration: line-through;
}

.hi-ui-feature-card__feature-icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hi-ui-feature-card__feature-icon svg {
  width: 1rem;
  height: 1rem;
}

.hi-ui-feature-card__feature--included .hi-ui-feature-card__feature-icon {
  color: var(--hi-fc-included-color);
}

.hi-ui-feature-card__feature--excluded .hi-ui-feature-card__feature-icon {
  color: var(--hi-fc-excluded-color);
}

.hi-ui-feature-card__feature-text {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.hi-ui-feature-card__feature-info {
  display: inline-flex;
  align-items: center;
  color: var(--hi-fc-subtitle-color);
  cursor: help;
}

.hi-ui-feature-card__feature-info svg {
  width: 0.875rem;
  height: 0.875rem;
}

/* ===================================================
   Actions Footer
   =================================================== */

.hi-ui-feature-card__actions {
  padding: 0.5rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* ===================================================
   Highlighted Variant
   =================================================== */

.hi-ui-feature-card--highlighted {
  border-color: var(--hi-fc-highlight-color);
  border-width: 2px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* ===================================================
   Disabled State
   =================================================== */

.hi-ui-feature-card--disabled {
  opacity: 0.6;
  pointer-events: none;
}

/* ===================================================
   Accessibility
   =================================================== */

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

@media (prefers-contrast: high) {
  .hi-ui-feature-card {
    border-width: 2px;
  }

  .hi-ui-feature-card--highlighted {
    border-width: 3px;
  }

  .hi-ui-feature-card__feature--excluded .hi-ui-feature-card__feature-text {
    text-decoration-thickness: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hi-ui-feature-card,
  .hi-ui-feature-card * {
    transition: none !important;
  }
}

/* ===================================================
   Mobile Responsive
   =================================================== */

@media (max-width: 768px) {
  .hi-ui-feature-card__header {
    padding: 1.25rem 1rem 0.75rem;
  }

  .hi-ui-feature-card__badge + .hi-ui-feature-card__header {
    padding-top: 1.75rem;
  }

  .hi-ui-feature-card__title {
    font-size: 1.125rem;
  }

  .hi-ui-feature-card__features {
    padding: 0.75rem 1rem;
  }

  .hi-ui-feature-card__feature {
    padding: 0.375rem 0;
    font-size: 0.8125rem;
  }

  .hi-ui-feature-card__actions {
    padding: 0.75rem 1rem 1.25rem;
  }
}

/* ===================================================
   FilterableSelect Component Styles
   =================================================== */

/* CSS Custom Properties */
:root {
  --hi-fs-bg: var(--hi-input-bg, #ffffff);
  --hi-fs-border-color: var(--hi-input-border-color, #d1d5db);
  --hi-fs-border-color-hover: var(--hi-input-border-color-hover, #9ca3af);
  --hi-fs-border-color-focus: var(--hi-input-border-color-focus, #3b82f6);
  --hi-fs-border-color-error: var(--hi-input-border-color-error, #ef4444);
  --hi-fs-border-color-success: var(--hi-input-border-color-success, #10b981);
  --hi-fs-border-radius: var(--hi-input-border-radius, 0.375rem);
  --hi-fs-text-color: var(--hi-input-text-color, #2b2b2b);
  --hi-fs-text-color-placeholder: var(--hi-input-text-color-placeholder, #9ca3af);
  --hi-fs-text-color-disabled: var(--hi-input-text-color-disabled, #6b7280);
  --hi-fs-bg-disabled: var(--hi-input-bg-disabled, #f3f4f6);
  --hi-fs-focus-ring: var(--hi-input-focus-ring, 0 0 0 3px rgba(59, 130, 246, 0.1));
  --hi-fs-font-family: var(
    --hi-text-font-family,
    MuseoSansRounded-300,
    'MuseoSansRounded-300 Fallback',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    sans-serif
  );
  --hi-fs-dropdown-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  --hi-fs-dropdown-max-height: 240px;
  --hi-fs-option-bg-hover: #f3f4f6;
  --hi-fs-option-bg-selected: rgba(37, 105, 87, 0.06);
  --hi-fs-option-bg-highlighted: #e5e7eb;
  --hi-fs-group-header-color: #6b7280;
  --hi-fs-z-index: 1000;
}

/* ===================================================
   Container
   =================================================== */

.hi-ui-filterable-select {
  position: relative;
  display: inline-block;
  max-width: 100%;
  font-family: var(--hi-fs-font-family);
}

.hi-ui-filterable-select--full-width {
  width: 100%;
  display: block;
}

/* Hidden sizer — contains all option labels to set natural width */
.hi-ui-filterable-select__sizer {
  display: flex;
  flex-direction: column;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
  padding: 0 2rem 0 0.625rem;
}

/* ===================================================
   Trigger Button
   =================================================== */

.hi-ui-filterable-select__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: var(--hi-fs-bg);
  border: 1px solid var(--hi-fs-border-color);
  border-radius: var(--hi-fs-border-radius);
  cursor: pointer;
  text-align: left;
  font-family: var(--hi-fs-font-family);
  color: var(--hi-fs-text-color);
  transition:
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
}

.hi-ui-filterable-select__trigger:hover:not(:disabled) {
  border-color: var(--hi-fs-border-color-hover);
}

.hi-ui-filterable-select__trigger:focus-visible {
  border-color: var(--hi-fs-border-color-focus);
  box-shadow: var(--hi-fs-focus-ring);
  outline: none;
}

/* Placeholder text */
.hi-ui-filterable-select__trigger-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Placeholder uses same text colour as native select default option */

/* Icons area */
.hi-ui-filterable-select__trigger-icons {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
  margin-left: 0.5rem;
}

/* Arrow icon */
.hi-ui-filterable-select__arrow {
  display: flex;
  align-items: center;
  color: var(--hi-fs-text-color);
  transition: transform 0.15s ease;
}

.hi-ui-filterable-select--open .hi-ui-filterable-select__arrow {
  transform: rotate(180deg);
}

/* Clear button */
.hi-ui-filterable-select__clear-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  border-radius: 2px;
  color: var(--hi-fs-text-color);
  cursor: pointer;
}

.hi-ui-filterable-select__clear-btn:focus-visible {
  outline: 2px solid var(--hi-fs-border-color-focus);
  outline-offset: 1px;
}

/* ===================================================
   Size Variants — match Select/Input atom sizing
   =================================================== */

/* Small */
.hi-ui-filterable-select--sm .hi-ui-filterable-select__trigger {
  padding: var(--hi-input-padding-sm, 0.375rem 0.625rem);
  font-size: var(--hi-input-font-size-sm, 0.875rem);
  line-height: var(--hi-input-line-height-sm, 1.25rem);
}

/* Medium (mobile-first: uses sm sizing, like Input/Select atoms) */
.hi-ui-filterable-select--md .hi-ui-filterable-select__trigger {
  padding: var(--hi-input-padding-sm, 0.375rem 0.625rem);
  font-size: var(--hi-input-font-size-sm, 0.875rem);
  line-height: var(--hi-input-line-height-sm, 1.25rem);
}

/* Medium — desktop: scale up to md values */
@media (min-width: 768px) {
  .hi-ui-filterable-select--md .hi-ui-filterable-select__trigger {
    padding: var(--hi-input-padding-md, 0.5rem 0.75rem);
    font-size: var(--hi-input-font-size-md, 1rem);
    line-height: var(--hi-input-line-height-md, 1.5rem);
  }
}

/* Large */
.hi-ui-filterable-select--lg .hi-ui-filterable-select__trigger {
  padding: var(--hi-input-padding-lg, 0.625rem 1rem);
  font-size: var(--hi-input-font-size-lg, 1.125rem);
  line-height: var(--hi-input-line-height-lg, 1.75rem);
}

/* ===================================================
   State Variants
   =================================================== */

.hi-ui-filterable-select--state-error .hi-ui-filterable-select__trigger {
  border-color: var(--hi-fs-border-color-error);
}

.hi-ui-filterable-select--state-error .hi-ui-filterable-select__trigger:focus-visible {
  border-color: var(--hi-fs-border-color-error);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.hi-ui-filterable-select--state-success .hi-ui-filterable-select__trigger {
  border-color: var(--hi-fs-border-color-success);
}

.hi-ui-filterable-select--state-success .hi-ui-filterable-select__trigger:focus-visible {
  border-color: var(--hi-fs-border-color-success);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

/* Disabled */
.hi-ui-filterable-select--disabled .hi-ui-filterable-select__trigger {
  background-color: var(--hi-fs-bg-disabled);
  color: var(--hi-fs-text-color-disabled);
  cursor: not-allowed;
  opacity: 0.6;
}

/* ===================================================
   Dropdown
   =================================================== */

.hi-ui-filterable-select__dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: var(--hi-fs-z-index);
  background: var(--hi-fs-bg);
  border: 1px solid var(--hi-fs-border-color);
  border-radius: var(--hi-fs-border-radius);
  box-shadow: var(--hi-fs-dropdown-shadow);
  overflow: hidden;
}

/* Search container */
.hi-ui-filterable-select__search-container {
  padding: 0.5rem;
  border-bottom: 1px solid #e5e7eb;
}

.hi-ui-filterable-select__search {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--hi-fs-font-family);
  font-size: var(--hi-input-font-size-sm, 0.875rem);
  line-height: var(--hi-input-line-height-sm, 1.25rem);
  padding: var(--hi-input-padding-sm, 0.375rem 0.625rem);
  color: var(--hi-fs-text-color);
  background: var(--hi-fs-bg);
  border: 1px solid var(--hi-fs-border-color);
  border-radius: var(--hi-fs-border-radius);
  outline: none;
  transition:
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
}

.hi-ui-filterable-select__search::-moz-placeholder {
  color: var(--hi-fs-text-color-placeholder);
  opacity: 1;
}

.hi-ui-filterable-select__search::placeholder {
  color: var(--hi-fs-text-color-placeholder);
  opacity: 1;
}

.hi-ui-filterable-select__search:focus {
  border-color: var(--hi-fs-border-color-focus);
  box-shadow: var(--hi-fs-focus-ring);
}

/* Remove webkit search cancel button for consistent styling */
.hi-ui-filterable-select__search::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

/* Listbox */
.hi-ui-filterable-select__listbox {
  max-height: var(--hi-fs-dropdown-max-height);
  overflow-y: auto;
  padding: 0.25rem 0;
}

/* ===================================================
   Options
   =================================================== */

.hi-ui-filterable-select__option {
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  font-size: inherit;
  line-height: 1.4;
  color: var(--hi-fs-text-color);
  min-height: 32px;
  display: flex;
  align-items: center;
}

.hi-ui-filterable-select__option--highlighted {
  background-color: var(--hi-fs-option-bg-highlighted);
}

.hi-ui-filterable-select__option--selected {
  background-color: var(--hi-fs-option-bg-selected);
  font-weight: 500;
}

.hi-ui-filterable-select__option--selected.hi-ui-filterable-select__option--highlighted {
  background-color: var(--hi-fs-option-bg-highlighted);
}

.hi-ui-filterable-select__option--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Group header */
.hi-ui-filterable-select__group-header {
  padding: 0.5rem 0.75rem 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--hi-fs-group-header-color);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

/* No results */
.hi-ui-filterable-select__no-results {
  padding: 0.75rem;
  text-align: center;
  color: var(--hi-fs-text-color-placeholder);
  font-style: italic;
}

/* Screen reader only — visually hidden live region */
.hi-ui-filterable-select__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===================================================
   Mobile Responsive
   =================================================== */

@media (max-width: 768px) {
  /* Touch targets on mobile */
  .hi-ui-filterable-select__option {
    min-height: 32px;
    padding: 0.625rem 0.75rem;
  }

  /* Limit dropdown height to viewport on small screens */
  .hi-ui-filterable-select__listbox {
    max-height: 50vh;
  }

  /* Prevent iOS auto-zoom on input focus */
  .hi-ui-filterable-select__search {
    font-size: 16px;
  }
}

/* ===================================================
   Accessibility
   =================================================== */

/* High contrast mode */
@media (prefers-contrast: more) {
  .hi-ui-filterable-select__trigger {
    border-width: 2px;
  }

  .hi-ui-filterable-select__option--highlighted {
    outline: 2px solid #000000;
    outline-offset: -2px;
  }

  .hi-ui-filterable-select__option--selected {
    background-color: #e5e5e5;
  }

  .hi-ui-filterable-select__dropdown {
    border-width: 2px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hi-ui-filterable-select__trigger,
  .hi-ui-filterable-select__arrow,
  .hi-ui-filterable-select__search {
    transition: none;
  }
}

/* ===================================================
   Form Component Styles
   =================================================== */

/* Base */
.hi-ui-form {
  display: block;
}

/* Fieldset reset - remove default fieldset styling */
.hi-ui-form-fieldset {
  border: none;
  margin: 0;
  padding: 0;
  min-width: 0;
}

/* Submitting state */
.hi-ui-form-submitting {
  opacity: 0.7;
  pointer-events: none;
}

/* Error summary spacing */
.hi-ui-form-error-summary {
  margin-bottom: 1rem;
}

/* ===================================================
   FormField Component Styles
   =================================================== */

/* Base */
.hi-ui-form-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Full width */
.hi-ui-form-field-full-width {
  width: 100%;
}

.hi-ui-form-field-full-width .hi-ui-form-field-control > * {
  width: 100%;
}

/* Label */
.hi-ui-form-field-label {
  display: block;
}

/* Required asterisk */
.hi-ui-form-field-required {
  color: var(--hi-color-error, #ef4444);
}

/* Screen reader only label */
.hi-ui-form-field-label-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Control wrapper */
.hi-ui-form-field-control {
  display: flex;
  flex-direction: column;
}

/* Message area */

.hi-ui-form-field-error,
.hi-ui-form-field-success,
.hi-ui-form-field-helper {
  display: block;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

/* Label position: top (default vertical layout) */
.hi-ui-form-field-label-top {
  flex-direction: column;
}

/* Label position: left (horizontal layout on desktop, vertical on mobile) */
@media (min-width: 768px) {
  .hi-ui-form-field-label-left {
    flex-direction: row;
    align-items: center;
    gap: 1rem;
  }

  .hi-ui-form-field-label-left .hi-ui-form-field-label {
    min-width: 120px;
    flex-shrink: 0;
  }

  .hi-ui-form-field-label-left .hi-ui-form-field-control {
    flex: 1;
  }
}

/* Label position: hidden */
.hi-ui-form-field-label-hidden {
  /* No visual changes needed, label is sr-only */
}

/* =============================================================================
   InlineEdit Component Styles
   ============================================================================= */

.hi-ui-inline-edit {
  --hi-inline-edit-text: #374151;
  --hi-inline-edit-border: #d1d5db;
  --hi-inline-edit-focus: #4e8c97;
  --hi-inline-edit-placeholder: #9ca3af;
  --hi-inline-edit-font-family:
    MuseoSansRounded-500, 'MuseoSansRounded-500 Fallback', -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, sans-serif;
  --hi-inline-edit-height: 2rem;

  display: inline-flex;
  font-family: var(--hi-inline-edit-font-family);
  height: var(--hi-inline-edit-height);
}

/* =============================================================================
   Display Mode
   ============================================================================= */

.hi-ui-inline-edit__display {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  height: 100%;
}

.hi-ui-inline-edit__value {
  font-size: 0.875rem;
  color: var(--hi-inline-edit-text);
  line-height: 1;
}

.hi-ui-inline-edit__placeholder {
  color: var(--hi-inline-edit-placeholder);
  font-style: italic;
}

.hi-ui-inline-edit__edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: none;
  background: none;
  color: #6b7280;
  cursor: pointer;
  border-radius: 4px;
  transition:
    color 0.15s,
    background-color 0.15s;
}

.hi-ui-inline-edit__edit:hover {
  color: var(--hi-inline-edit-focus);
  background-color: #f3f4f6;
}

.hi-ui-inline-edit__edit:focus-visible {
  outline: 2px solid var(--hi-inline-edit-focus);
  outline-offset: 2px;
}

.hi-ui-inline-edit__edit svg {
  width: 0.875rem;
  height: 0.875rem;
}

/* =============================================================================
   Edit Mode
   ============================================================================= */

.hi-ui-inline-edit__form {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  height: 100%;
}

.hi-ui-inline-edit__input {
  font-family: inherit;
  font-size: 0.875rem;
  padding: 0 0.5rem;
  border: 1px solid var(--hi-inline-edit-border);
  border-radius: 4px;
  color: var(--hi-inline-edit-text);
  outline: none;
  min-width: 8rem;
  height: 100%;
  box-sizing: border-box;
}

.hi-ui-inline-edit__input:focus {
  border-color: var(--hi-inline-edit-focus);
  box-shadow: 0 0 0 2px rgba(78, 140, 151, 0.2);
}

.hi-ui-inline-edit__save,
.hi-ui-inline-edit__cancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 4px;
  transition:
    color 0.15s,
    background-color 0.15s;
}

.hi-ui-inline-edit__save {
  color: #4e9758;
}

.hi-ui-inline-edit__save:hover {
  background-color: #f0fdf4;
}

.hi-ui-inline-edit__cancel {
  color: #dc3545;
}

.hi-ui-inline-edit__cancel:hover {
  background-color: #fef2f2;
}

.hi-ui-inline-edit__save:focus-visible,
.hi-ui-inline-edit__cancel:focus-visible {
  outline: 2px solid var(--hi-inline-edit-focus);
  outline-offset: 2px;
}

.hi-ui-inline-edit__save svg,
.hi-ui-inline-edit__cancel svg {
  width: 0.875rem;
  height: 0.875rem;
}

/* =============================================================================
   Disabled
   ============================================================================= */

.hi-ui-inline-edit--disabled .hi-ui-inline-edit__value {
  opacity: 0.6;
}

/* =============================================================================
   Responsive
   ============================================================================= */

@media (max-width: 768px) {
  .hi-ui-inline-edit__input {
    min-width: 6rem;
  }
}

#hi-ui-mainnav .hi-ui-mainnav-item {
  position: relative;
  display: inline-block;
  line-height: 21px;
  height: 21px;
}

#hi-ui-mainnav .hi-ui-mainnav-item__link {
  position: relative;
  display: inline-block;
  font-size: clamp(15px, 1.4vw, 17.5px);
  white-space: nowrap;
  font-family:
    MuseoSansRounded-300,
    'MuseoSansRounded-300 Fallback',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    sans-serif;
  font-weight: normal;
  color: #000000;
  text-decoration: none;
  transition: color 200ms ease-in-out;
}

#hi-ui-mainnav .hi-ui-mainnav-item__link:hover,
#hi-ui-mainnav .hi-ui-mainnav-item__link:focus-visible {
  opacity: 1;
}

#hi-ui-mainnav .hi-ui-mainnav-item__sale-badge {
  position: absolute;
  bottom: 22px;
  left: 0px;
  pointer-events: none;
  display: flex;
  align-items: center;
}

#hi-ui-mainnav .hi-ui-mainnav-item__underline {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 5px;
  background-color: #beccc0;
  opacity: 0;
  transition: opacity 200ms ease-in-out;
}

/* `:has(:focus-visible)` rather than `:focus-within`: the underline is a focus
   affordance for keyboard users, but :focus-within also matched a mouse click,
   so after a client-side navigation the clicked item kept its underline on the
   new page — competing with the genuine `.active` underline. */
#hi-ui-mainnav .hi-ui-mainnav-item.active .hi-ui-mainnav-item__underline,
#hi-ui-mainnav .hi-ui-mainnav-item:hover .hi-ui-mainnav-item__underline,
#hi-ui-mainnav .hi-ui-mainnav-item:has(:focus-visible) .hi-ui-mainnav-item__underline {
  opacity: 1;
}

#hi-ui-mainnav .hi-ui-mainnav-mobile-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 76px;
  padding: 8px 4px;
  box-sizing: border-box;
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: none;
  color: #3c3c3b;
  transition:
    background-color 200ms ease-in-out,
    color 200ms ease-in-out;
}

#hi-ui-mainnav .hi-ui-mainnav-mobile-item:focus {
  outline: none;
}

/* Inset offset (not the shared +2px): the item is a full-width row in the mobile
   menu, so an outset ring would be clipped by its neighbours. */
#hi-ui-mainnav .hi-ui-mainnav-mobile-item:focus-visible {
  outline: var(--hi-focus-ring-width) solid var(--hi-focus-ring);
  outline-offset: -2px;
}

#hi-ui-mainnav .hi-ui-mainnav-mobile-item:hover {
  background: none;
  opacity: 0.8;
}

#hi-ui-mainnav .hi-ui-mainnav-mobile-item:active {
  background: none;
}

/* Override legacy _shared.css button styles (cpanel/mwp pages) */
#hi-ui-mainnav button.hi-ui-mainnav-mobile-item {
  box-shadow: none !important;
  top: auto !important;
  position: relative !important;
}

#hi-ui-mainnav button.hi-ui-mainnav-mobile-item:active {
  box-shadow: none !important;
  top: auto !important;
}

#hi-ui-mainnav button.hi-ui-mainnav-mobile-item svg {
  width: auto !important;
  height: 36px !important;
  margin-left: 0 !important;
  vertical-align: baseline !important;
  fill: #3c3c3b !important;
}

#hi-ui-mainnav .hi-ui-mainnav-mobile-item.active {
  background-color: #f5f5f5;
}

#hi-ui-mainnav .hi-ui-mainnav-mobile-item.active:hover,
#hi-ui-mainnav .hi-ui-mainnav-mobile-item.active:active {
  background-color: #f5f5f5;
}

#hi-ui-mainnav .hi-ui-mainnav-mobile-item__icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

#hi-ui-mainnav .hi-ui-mainnav-mobile-item__icon svg {
  width: auto;
  height: 36px;
}

#hi-ui-mainnav .hi-ui-mainnav-mobile-item__icon img {
  width: 50px;
  height: 50px;
  display: block;
}

#hi-ui-mainnav .hi-ui-mainnav-mobile-item__label {
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
  text-transform: uppercase;
}

/**
 * Pagination Component Styles
 * Responsive pagination with page numbers, prev/next, and page size selector
 */

/* CSS Custom Properties for theming */
.hi-ui-pagination {
  --hi-pagination-gap: 16px;
  --hi-pagination-pages-gap: 4px;
  --hi-pagination-font-family: 'MuseoSansRounded-300', 'MuseoSansRounded-300 Fallback', sans-serif;
}

/* Main container */
.hi-ui.hi-ui-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--hi-pagination-gap);
  padding: 16px 0;
  font-family: var(--hi-pagination-font-family);
}

/* Info section - "Showing X-Y of Z items" */
.hi-ui-pagination-info {
  flex-shrink: 0;
}

/* Controls section - prev/next and page numbers */
.hi-ui-pagination-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Page numbers group */
.hi-ui-pagination-pages {
  display: flex;
  align-items: center;
  gap: var(--hi-pagination-pages-gap);
}

/* Page number buttons */
.hi-ui-pagination-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: #256957;
  font-family: var(--hi-pagination-font-family);
  font-size: 14px;
  font-weight: normal;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}

.hi-ui-pagination-page-btn:hover {
  background-color: rgba(37, 105, 87, 0.1);
}

.hi-ui-pagination-page-btn:focus-visible {
  outline: var(--hi-focus-ring-width) solid var(--hi-focus-ring);
  outline-offset: var(--hi-focus-ring-offset);
}

.hi-ui-pagination-page-btn-current {
  background-color: #256957;
  color: #ffffff;
}

.hi-ui-pagination-page-btn-current:hover {
  background-color: #1e5446;
}

/* Page size selector section */
.hi-ui-pagination-page-size {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.hi-ui-pagination-page-size .hi-ui-select {
  width: auto;
  min-width: 70px;
}

/* Mobile Styles */
@media (max-width: 768px) {
  .hi-ui.hi-ui-pagination {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .hi-ui-pagination-info {
    text-align: center;
    order: 1;
  }

  .hi-ui-pagination-controls {
    justify-content: center;
    order: 2;
  }

  /* Simplify page numbers on mobile - hide middle pages */
  .hi-ui-pagination-pages {
    display: none;
  }

  .hi-ui-pagination-page-size {
    justify-content: center;
    order: 3;
  }
}

/* =============================================================================
   PaymentMethodSelector Component Styles
   ============================================================================= */

.hi-ui-payment-method-selector {
  --hi-pms-border: #d1d5db;
  --hi-pms-border-selected: #4e8c97;
  --hi-pms-bg: #ffffff;
  --hi-pms-bg-selected: #f0f9fa;
  --hi-pms-text: #374151;
  --hi-pms-text-secondary: #6b7280;
  --hi-pms-accent: #4e8c97;
  --hi-pms-font-family:
    MuseoSansRounded-500, 'MuseoSansRounded-500 Fallback', -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, sans-serif;

  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-family: var(--hi-pms-font-family);
}

/* =============================================================================
   Option
   ============================================================================= */

.hi-ui-payment-method-selector__option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--hi-pms-border);
  border-radius: 6px;
  background-color: var(--hi-pms-bg);
  cursor: pointer;
  transition:
    border-color 0.15s,
    background-color 0.15s;
}

.hi-ui-payment-method-selector__option:hover {
  border-color: var(--hi-pms-accent);
}

.hi-ui-payment-method-selector__option--selected {
  border-color: var(--hi-pms-border-selected);
  background-color: var(--hi-pms-bg-selected);
}

/* =============================================================================
   Radio
   ============================================================================= */

.hi-ui-payment-method-selector__radio {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.hi-ui-payment-method-selector__indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  border: 2px solid var(--hi-pms-border);
  border-radius: 50%;
  transition: border-color 0.15s;
}

.hi-ui-payment-method-selector__option--selected .hi-ui-payment-method-selector__indicator {
  border-color: var(--hi-pms-accent);
}

.hi-ui-payment-method-selector__option--selected .hi-ui-payment-method-selector__indicator::after {
  content: '';
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: var(--hi-pms-accent);
}

.hi-ui-payment-method-selector__radio:focus-visible + .hi-ui-payment-method-selector__indicator {
  outline: 2px solid var(--hi-pms-accent);
  outline-offset: 2px;
}

/* =============================================================================
   Details
   ============================================================================= */

.hi-ui-payment-method-selector__details {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  min-width: 0;
}

.hi-ui-payment-method-selector__type {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--hi-pms-text);
}

.hi-ui-payment-method-selector__number {
  font-size: 0.875rem;
  color: var(--hi-pms-text);
  letter-spacing: 0.025em;
}

.hi-ui-payment-method-selector__expiry {
  font-size: 0.75rem;
  color: var(--hi-pms-text-secondary);
}

/* =============================================================================
   Default Badge
   ============================================================================= */

.hi-ui-payment-method-selector__default {
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  color: var(--hi-pms-accent);
  background-color: rgba(78, 140, 151, 0.1);
  padding: 0.125rem 0.375rem;
  border-radius: 4px;
  flex-shrink: 0;
}

/* =============================================================================
   Add New Button
   ============================================================================= */

.hi-ui-payment-method-selector__add-new {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border: 1px dashed var(--hi-pms-border);
  border-radius: 6px;
  background: none;
  color: var(--hi-pms-accent);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition:
    border-color 0.15s,
    background-color 0.15s;
}

.hi-ui-payment-method-selector__add-new:hover {
  border-color: var(--hi-pms-accent);
  background-color: var(--hi-pms-bg-selected);
}

.hi-ui-payment-method-selector__add-new:focus-visible {
  outline: 2px solid var(--hi-pms-accent);
  outline-offset: 2px;
}

.hi-ui-payment-method-selector__add-new svg {
  width: 1rem;
  height: 1rem;
}

/* =============================================================================
   Responsive
   ============================================================================= */

@media (max-width: 768px) {
  .hi-ui-payment-method-selector__details {
    flex-wrap: wrap;
    gap: 0.25rem;
  }

  .hi-ui-payment-method-selector__expiry {
    width: 100%;
    padding-left: 0;
  }
}

/* ===================================================
   Stepper Component Styles
   =================================================== */

/* Screen reader only - visually hidden but accessible */
.hi-ui-stepper .hi-ui-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* CSS Variables for customization */
.hi-ui-stepper {
  --hi-stepper-completed-bg: #256957;
  --hi-stepper-completed-text: #ffffff;
  --hi-stepper-current-bg: #256957;
  --hi-stepper-current-text: #ffffff;
  --hi-stepper-pending-bg: #e5e7eb;
  --hi-stepper-pending-text: #9ca3af;
  --hi-stepper-connector-completed: #256957;
  --hi-stepper-connector-pending: #e5e7eb;
  --hi-stepper-label-color: #2b2b2b;
  --hi-stepper-label-muted: #6b7280;
  --hi-stepper-font-family:
    MuseoSansRounded-300, 'MuseoSansRounded-300 Fallback', -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, sans-serif;
  --hi-stepper-font-family-bold:
    MuseoSansRounded-700, 'MuseoSansRounded-700 Fallback', -apple-system, BlinkMacSystemFont,
    'Segoe UI', sans-serif;

  /* Size variants */
  --hi-stepper-size-sm: 24px;
  --hi-stepper-size-md: 32px;
  --hi-stepper-size-lg: 40px;
  --hi-stepper-font-size-sm: 12px;
  --hi-stepper-font-size-md: 14px;
  --hi-stepper-font-size-lg: 16px;
}

/* Container */
.hi-ui-stepper {
  width: 100%;
}

/* ===================================================
   Default Variant (Horizontal)
   =================================================== */

.hi-ui-stepper--default .hi-ui-stepper__list {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  list-style: none;
  padding: 0;
  margin: 0;
}

.hi-ui-stepper--default .hi-ui-stepper__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  position: relative;
  min-width: 0;
}

/* First item doesn't get flex to prevent uneven spacing */
.hi-ui-stepper--default .hi-ui-stepper__item:first-child,
.hi-ui-stepper--default .hi-ui-stepper__item:last-child {
  flex: 0 0 auto;
}

/* Connector line */
.hi-ui-stepper--default .hi-ui-stepper__connector {
  position: absolute;
  top: calc(var(--hi-stepper-size-md) / 2);
  right: calc(50% + var(--hi-stepper-size-md) / 2 + 8px);
  left: calc(-50% + var(--hi-stepper-size-md) / 2 + 8px);
  height: 2px;
  background-color: var(--hi-stepper-connector-pending);
  transform: translateY(-50%);
}

.hi-ui-stepper--default .hi-ui-stepper__connector--completed {
  background-color: var(--hi-stepper-connector-completed);
}

/* Size-specific connector positioning */
.hi-ui-stepper--sm .hi-ui-stepper__connector {
  top: calc(var(--hi-stepper-size-sm) / 2);
  right: calc(50% + var(--hi-stepper-size-sm) / 2 + 6px);
  left: calc(-50% + var(--hi-stepper-size-sm) / 2 + 6px);
}

.hi-ui-stepper--lg .hi-ui-stepper__connector {
  top: calc(var(--hi-stepper-size-lg) / 2);
  right: calc(50% + var(--hi-stepper-size-lg) / 2 + 10px);
  left: calc(-50% + var(--hi-stepper-size-lg) / 2 + 10px);
}

/* ===================================================
   Step Indicator (Circle)
   =================================================== */

.hi-ui-stepper__indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--hi-stepper-size-md);
  height: var(--hi-stepper-size-md);
  border-radius: 50%;
  font-family: var(--hi-stepper-font-family-bold);
  font-size: var(--hi-stepper-font-size-md);
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    transform 0.15s ease;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

/* Size variants for indicator */
.hi-ui-stepper--sm .hi-ui-stepper__indicator {
  width: var(--hi-stepper-size-sm);
  height: var(--hi-stepper-size-sm);
  font-size: var(--hi-stepper-font-size-sm);
}

.hi-ui-stepper--lg .hi-ui-stepper__indicator {
  width: var(--hi-stepper-size-lg);
  height: var(--hi-stepper-size-lg);
  font-size: var(--hi-stepper-font-size-lg);
}

/* State colors */
.hi-ui-stepper__item--completed .hi-ui-stepper__indicator {
  background-color: var(--hi-stepper-completed-bg);
  color: var(--hi-stepper-completed-text);
}

.hi-ui-stepper__item--current .hi-ui-stepper__indicator {
  background-color: var(--hi-stepper-current-bg);
  color: var(--hi-stepper-current-text);
}

.hi-ui-stepper__item--pending .hi-ui-stepper__indicator {
  background-color: var(--hi-stepper-pending-bg);
  color: var(--hi-stepper-pending-text);
}

/* Clickable indicator */
.hi-ui-stepper__indicator--clickable {
  cursor: pointer;
}

.hi-ui-stepper__indicator--clickable:hover {
  transform: scale(1.1);
}

.hi-ui-stepper__indicator--clickable:focus-visible {
  outline: 2px solid var(--hi-stepper-current-bg);
  outline-offset: 2px;
}

/* Disabled state */
.hi-ui-stepper__item--disabled .hi-ui-stepper__indicator {
  opacity: 0.5;
  cursor: not-allowed;
}

.hi-ui-stepper__item--disabled .hi-ui-stepper__indicator--clickable {
  cursor: not-allowed;
}

.hi-ui-stepper__item--disabled .hi-ui-stepper__indicator--clickable:hover {
  transform: none;
}

/* ===================================================
   Indicator Content (Number, Checkmark, Icon)
   =================================================== */

.hi-ui-stepper__number {
  line-height: 1;
}

.hi-ui-stepper__checkmark {
  width: 60%;
  height: 60%;
}

.hi-ui-stepper__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60%;
  height: 60%;
}

.hi-ui-stepper__icon svg {
  width: 100%;
  height: 100%;
}

.hi-ui-stepper__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: currentColor;
}

/* ===================================================
   Step Content (Label & Description)
   =================================================== */

.hi-ui-stepper__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 8px;
  text-align: center;
  max-width: 120px;
}

.hi-ui-stepper__label {
  font-family: var(--hi-stepper-font-family);
  font-size: 14px;
  color: var(--hi-stepper-label-color);
  line-height: 1.3;
}

.hi-ui-stepper__item--current .hi-ui-stepper__label {
  font-family: var(--hi-stepper-font-family-bold);
}

.hi-ui-stepper__item--pending .hi-ui-stepper__label {
  color: var(--hi-stepper-label-muted);
}

.hi-ui-stepper__item--disabled .hi-ui-stepper__label {
  opacity: 0.5;
}

.hi-ui-stepper__description {
  font-family: var(--hi-stepper-font-family);
  font-size: 12px;
  color: var(--hi-stepper-label-muted);
  margin-top: 4px;
  line-height: 1.3;
}

/* ===================================================
   Compact Variant (Numbers only, no labels)
   =================================================== */

.hi-ui-stepper--compact .hi-ui-stepper__content {
  display: none;
}

.hi-ui-stepper--compact .hi-ui-stepper__list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;
}

.hi-ui-stepper--compact .hi-ui-stepper__item {
  display: flex;
  align-items: center;
  position: relative;
}

.hi-ui-stepper--compact .hi-ui-stepper__connector {
  position: static;
  width: 24px;
  height: 2px;
  transform: none;
  flex-shrink: 0;
}

/* ===================================================
   Vertical Variant
   =================================================== */

.hi-ui-stepper--vertical .hi-ui-stepper__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;
}

.hi-ui-stepper--vertical .hi-ui-stepper__item {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  position: relative;
  padding-bottom: 24px;
}

.hi-ui-stepper--vertical .hi-ui-stepper__item:last-child {
  padding-bottom: 0;
}

.hi-ui-stepper--vertical .hi-ui-stepper__connector {
  position: absolute;
  top: calc(var(--hi-stepper-size-md) + 4px);
  left: calc(var(--hi-stepper-size-md) / 2);
  width: 2px;
  height: calc(100% - var(--hi-stepper-size-md) - 4px);
  transform: translateX(-50%);
}

/* Size-specific vertical connector */
.hi-ui-stepper--vertical.hi-ui-stepper--sm .hi-ui-stepper__connector {
  top: calc(var(--hi-stepper-size-sm) + 4px);
  left: calc(var(--hi-stepper-size-sm) / 2);
  height: calc(100% - var(--hi-stepper-size-sm) - 4px);
}

.hi-ui-stepper--vertical.hi-ui-stepper--lg .hi-ui-stepper__connector {
  top: calc(var(--hi-stepper-size-lg) + 4px);
  left: calc(var(--hi-stepper-size-lg) / 2);
  height: calc(100% - var(--hi-stepper-size-lg) - 4px);
}

.hi-ui-stepper--vertical .hi-ui-stepper__content {
  align-items: flex-start;
  text-align: left;
  margin-top: 0;
  margin-left: 12px;
  max-width: none;
}

.hi-ui-stepper--vertical .hi-ui-stepper__label {
  padding-top: 4px;
}

.hi-ui-stepper--vertical.hi-ui-stepper--sm .hi-ui-stepper__label {
  padding-top: 2px;
}

.hi-ui-stepper--vertical.hi-ui-stepper--lg .hi-ui-stepper__label {
  padding-top: 8px;
}

/* ===================================================
   Mobile Responsive
   =================================================== */

@media (max-width: 768px) {
  /* Default variant hides labels on mobile */
  .hi-ui-stepper--default .hi-ui-stepper__content {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* Reduce connector gap on mobile */
  .hi-ui-stepper--default .hi-ui-stepper__connector {
    right: calc(50% + var(--hi-stepper-size-md) / 2 + 4px);
    left: calc(-50% + var(--hi-stepper-size-md) / 2 + 4px);
  }

  .hi-ui-stepper--default.hi-ui-stepper--sm .hi-ui-stepper__connector {
    right: calc(50% + var(--hi-stepper-size-sm) / 2 + 4px);
    left: calc(-50% + var(--hi-stepper-size-sm) / 2 + 4px);
  }

  .hi-ui-stepper--default.hi-ui-stepper--lg .hi-ui-stepper__connector {
    right: calc(50% + var(--hi-stepper-size-lg) / 2 + 4px);
    left: calc(-50% + var(--hi-stepper-size-lg) / 2 + 4px);
  }

  /* Vertical variant keeps labels visible */
  .hi-ui-stepper--vertical .hi-ui-stepper__content {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    margin-left: 12px;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }
}

#hi-ui-mainnav .hi-ui-subnav-item {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: clamp(8px, 1.2vw, 16px);
  padding: clamp(12px, 1.5vw, 20px);
  text-decoration: none;
  color: #333333;
  border-radius: 8px;
  cursor: pointer;
}

#hi-ui-mainnav .hi-ui-subnav-item__icon-container {
  width: clamp(60px, 7vw, 90px);
  height: clamp(70px, 8vw, 104px);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

#hi-ui-mainnav .hi-ui-subnav-item__icon {
  width: 100%;
  height: 100%;
  display: block;
  opacity: 1;
  -o-object-fit: contain;
     object-fit: contain;
}

#hi-ui-mainnav .hi-ui-subnav-item__content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  padding-top: 8px;
}

#hi-ui-mainnav .hi-ui-subnav-item__label {
  position: relative;
  font-size: clamp(13px, 1.2vw, 15px);
  font-weight: normal;
  font-family:
    MuseoSansRounded-500,
    'MuseoSansRounded-500 Fallback',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    sans-serif;
  line-height: 1.3;
  text-decoration: none;
}

#hi-ui-mainnav .hi-ui-subnav-item__sale-badge {
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: 4px;
  height: 18px;
  width: auto;
  display: block;
  pointer-events: none;
}

#hi-ui-mainnav .hi-ui-subnav-item:hover,
#hi-ui-mainnav .hi-ui-subnav-item:focus-visible {
  opacity: 1;
}

/* :focus-visible, so the underline is a keyboard affordance only — on :focus it
   survived a client-side navigation and left the clicked item underlined. */
#hi-ui-mainnav .hi-ui-subnav-item:hover .hi-ui-subnav-item__label span,
#hi-ui-mainnav .hi-ui-subnav-item:focus-visible .hi-ui-subnav-item__label span {
  text-decoration: underline;
}

#hi-ui-mainnav .hi-ui-subnav-item__separator {
  width: 100%;
  height: 1px;
  background-color: #ededed;
}

#hi-ui-mainnav .hi-ui-subnav-item__description {
  font-size: clamp(13px, 1.2vw, 15px);
  font-family:
    MuseoSansRounded-300,
    'MuseoSansRounded-300 Fallback',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    sans-serif;
  font-weight: normal;
  color: #777777;
  line-height: 1.5;
}

.hi-ui-table-filter,
.hi-ui-table-filter * {
  box-sizing: border-box;
}

.hi-ui-table-filter {
  --tf-green: #245145;
  --tf-line: #dddddd;
  --tf-text: #454545;
  --tf-muted: #757581;
  --tf-ease: 0.18s cubic-bezier(0.22, 1, 0.36, 1);

  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: var(
    --hi-text-font-family,
    'MuseoSansRounded-300',
    'MuseoSansRounded-300 Fallback',
    sans-serif
  );
}

.hi-ui-table-filter__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

/* Anchors the absolute popover panel. */
.hi-ui-table-filter__group {
  position: relative;
}

.hi-ui-table-filter__button {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid var(--tf-line);
  border-radius: 50px;
  background: #fff;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  font-size: 14px;
  color: var(--tf-text);
  white-space: nowrap;
  transition:
    border-color var(--tf-ease),
    color var(--tf-ease);
}
.hi-ui-table-filter__button:hover {
  border-color: var(--tf-green);
}
.hi-ui-table-filter__button[aria-expanded='true'],
.hi-ui-table-filter__button[data-active='1'] {
  border-color: var(--tf-green);
  color: var(--tf-green);
  font-weight: 700;
}

/* CSS chevron (hi-ui has no caret icon). */
.hi-ui-table-filter__chev {
  width: 7px;
  height: 7px;
  flex: none;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

/* Left-anchored popover panel, opening below the trigger. */
.hi-ui-table-filter__pop {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 30;
  min-width: 236px;
  padding: 8px;
  background: #fff;
  border: 1px solid #d8d8e2;
  border-radius: 10px;
  box-shadow: 0 10px 26px rgba(27, 27, 60, 0.13);
}

.hi-ui-table-filter__opts {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Each option is a hi-ui Checkbox/Radio whose label spans the whole row, so the
   entire row is one tap target. The count sits right-aligned inside the label. */
.hi-ui-table-filter__opt {
  width: 100%;
  padding: 8px 10px;
  border-radius: 7px;
  transition: background var(--tf-ease);
}
.hi-ui-table-filter__opt:hover {
  background: #ecf3f1;
}
/* Let the label content fill the row so the count can align hard-right. */
.hi-ui-table-filter__opt .hi-ui-checkbox-label,
.hi-ui-table-filter__opt .hi-ui-radio-label {
  flex: 1;
  min-width: 0;
}
.hi-ui-table-filter__opt-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.hi-ui-table-filter__n {
  flex: none;
  font-size: 12px;
  font-weight: 500;
  color: var(--tf-muted);
  font-variant-numeric: tabular-nums;
}

.hi-ui-table-filter__summary {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0;
  font-size: 14px;
  color: var(--tf-muted);
}
.hi-ui-table-filter__summary b {
  color: #242424;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.hi-ui-table-filter__clear {
  padding: 4px;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--tf-green);
  text-decoration: underline;
  cursor: pointer;
}

/* Bottom-sheet chrome + backdrop show in card mode; hidden on desktop. */
.hi-ui-table-filter__grab,
.hi-ui-table-filter__pop-head,
.hi-ui-table-filter__pop-foot,
.hi-ui-table-filter__scrim {
  display: none;
}

.hi-ui-table-filter__button:focus-visible,
.hi-ui-table-filter__clear:focus-visible,
.hi-ui-table-filter__close:focus-visible,
.hi-ui-table-filter__apply:focus-visible {
  outline: 2px solid #e22161;
  outline-offset: 2px;
}

/* ---- card mode: the popover becomes a bottom sheet with a Show/Close chrome.
   Breakpoint matches the Table's card-view switch (1024px) so the filter and
   the table change presentation together — no floating popover over cards. */
@media (max-width: 1024px) {
  /* The bar scrolls sideways instead of wrapping. */
  .hi-ui-table-filter__bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .hi-ui-table-filter__bar::-webkit-scrollbar {
    display: none;
  }

  .hi-ui-table-filter__pop {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-height: 84%;
    padding: 0;
    border: 0;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -6px 26px rgba(27, 27, 60, 0.18);
    animation: hi-ui-table-filter-rise 0.22s cubic-bezier(0.22, 1, 0.36, 1);
    padding-bottom: env(safe-area-inset-bottom);
  }

  .hi-ui-table-filter__grab {
    display: block;
    width: 38px;
    height: 4px;
    margin: 9px auto 2px;
    border-radius: 4px;
    background: #dddddd;
  }

  .hi-ui-table-filter__pop-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 8px 8px 18px;
    border-bottom: 1px solid #e9e9ef;
  }
  .hi-ui-table-filter__pop-title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #242424;
  }
  .hi-ui-table-filter__close {
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: none;
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 24px;
    line-height: 1;
    color: var(--tf-muted);
  }

  /* Options fill the remaining height and scroll; bigger touch targets. */
  .hi-ui-table-filter__opts {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 8px;
    -webkit-overflow-scrolling: touch;
  }
  .hi-ui-table-filter__opt {
    min-height: 52px;
    font-size: 15px;
  }

  .hi-ui-table-filter__pop-foot {
    display: block;
    padding: 10px 16px 16px;
    border-top: 1px solid #e9e9ef;
  }
  .hi-ui-table-filter__apply {
    width: 100%;
    min-height: 48px;
    border: 0;
    border-radius: 50px;
    background: var(--tf-green);
    color: #fff;
    font-family: inherit;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
  }

  .hi-ui-table-filter__scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(20, 20, 40, 0.4);
    animation: hi-ui-table-filter-fade 0.2s ease;
  }
}

@keyframes hi-ui-table-filter-fade {
  from {
    opacity: 0;
  }
}
@keyframes hi-ui-table-filter-rise {
  from {
    transform: translateY(100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hi-ui-table-filter__button,
  .hi-ui-table-filter__opt {
    transition: none;
  }
  .hi-ui-table-filter__pop,
  .hi-ui-table-filter__scrim {
    animation: none;
  }
}

/**
 * Table Component Styles
 * Responsive table with desktop table view and mobile card view
 */

/* Screen reader only - visually hidden but accessible */
.hi-ui-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Toolbar slot rendered above the table (filters, bulk actions, …). */
.hi-ui-table-toolbar {
  margin-bottom: 16px;
}

/* CSS Custom Properties for theming */
.hi-ui-table {
  --hi-table-header-bg: #256957;
  --hi-table-header-color: #ffffff;
  --hi-table-row-border: #eeeeee;
  --hi-table-text-color: #2b2b2b;
  --hi-table-cell-padding: 13px 12px;
  --hi-table-header-padding: 14px 12px;
  --hi-table-font-family: 'MuseoSansRounded-300', 'MuseoSansRounded-300 Fallback', sans-serif;
  --hi-table-header-font-family:
    'MuseoSansRounded-700', 'MuseoSansRounded-700 Fallback', sans-serif;
  --hi-table-header-font-size: 14px;
  --hi-table-cell-font-size: 16px;
  --hi-table-card-gap: 16px;
  --hi-table-card-padding: 16px;
  --hi-table-card-border-radius: 8px;
  --hi-table-card-bg: #ffffff;
  --hi-table-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Desktop Table View */
.hi-ui.hi-ui-table .hi-ui-table-desktop {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

/* Grid layout mode */
.hi-ui.hi-ui-table .hi-ui-table-grid {
  display: grid;
}

.hi-ui.hi-ui-table .hi-ui-table-grid thead,
.hi-ui.hi-ui-table .hi-ui-table-grid tbody,
.hi-ui.hi-ui-table .hi-ui-table-grid tr {
  display: contents;
}

.hi-ui.hi-ui-table .hi-ui-table-grid .hi-ui-table-header-cell {
  background: var(--hi-table-header-bg);
  color: var(--hi-table-header-color);
}

.hi-ui.hi-ui-table .hi-ui-table-grid .hi-ui-table-header-cell,
.hi-ui.hi-ui-table .hi-ui-table-grid .hi-ui-table-cell {
  display: flex;
  align-items: center;
}

/* Header Row */
.hi-ui.hi-ui-table .hi-ui-table-header {
  background: var(--hi-table-header-bg);
  color: var(--hi-table-header-color);
  text-transform: uppercase;
}

/* Header Cell */
.hi-ui.hi-ui-table .hi-ui-table-header-cell {
  padding: var(--hi-table-header-padding);
  font-family: var(--hi-table-header-font-family);
  font-size: var(--hi-table-header-font-size);
  font-weight: normal;
  color: inherit;
  vertical-align: middle;
}

.hi-ui.hi-ui-table .hi-ui-table-header-cell:first-child {
  border-top-left-radius: 4px;
}

.hi-ui.hi-ui-table .hi-ui-table-header-cell:last-child {
  border-top-right-radius: 4px;
}

/* Header content wrapper for flexbox alignment */
.hi-ui-table-header-content {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.hi-ui-table-header-sortable {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.hi-ui-table-header-sortable:hover {
  background: rgba(255, 255, 255, 0.1);
}

.hi-ui-table-header-sortable:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.7);
  outline-offset: -2px;
}

/* Sort Icons */
.hi-ui-table-sort-icon {
  display: inline-flex;
  flex-direction: column;
}

.hi-ui-table-sort-arrow {
  opacity: 0.3;
  transition:
    opacity 0.15s ease,
    transform 0.15s ease;
}

.hi-ui-table-sort-arrow-up {
  margin-bottom: -6px;
}

.hi-ui-table-sort-arrow.hi-ui-table-sort-active {
  opacity: 1;
  transform: scale(1.3);
}

/* Cell */
.hi-ui.hi-ui-table .hi-ui-table-cell {
  padding: var(--hi-table-cell-padding);
  border-bottom: 1px solid var(--hi-table-row-border);
  font-family: var(--hi-table-font-family);
  font-size: var(--hi-table-cell-font-size);
  color: var(--hi-table-text-color);
  line-height: 24px;
  vertical-align: middle;
}

.hi-ui.hi-ui-table .hi-ui-table-row:last-child .hi-ui-table-cell {
  border-bottom: none;
}

/* Clickable Row */
.hi-ui.hi-ui-table .hi-ui-table-row-clickable:hover {
  background-color: rgba(0, 0, 0, 0.04);
}

/* Loading State */
.hi-ui-table-loading-cell {
  padding: var(--hi-table-cell-padding);
}

/* Empty State */
.hi-ui-table-empty-cell {
  padding: var(--hi-table-cell-padding);
  text-align: center;
  color: #666;
}

/* Selection Checkbox Column */
.hi-ui-table-select-cell {
  width: 48px;
  text-align: center;
}

.hi-ui-table-checkbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--hi-table-header-bg);
}

.hi-ui-table-checkbox:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

.hi-ui-table-checkbox:focus-visible {
  outline: 2px solid var(--hi-table-header-bg);
  outline-offset: 2px;
}

/* Selected Row */
.hi-ui.hi-ui-table .hi-ui-table-row-selected {
  background-color: rgba(37, 105, 87, 0.08);
}

.hi-ui.hi-ui-table .hi-ui-table-row-selected:hover {
  background-color: rgba(37, 105, 87, 0.12);
}

/* Sticky Header Container */
.hi-ui-table-scroll-container {
  overflow-y: auto;
  border-radius: 4px;
}

.hi-ui-table-thead-sticky {
  position: sticky;
  top: 0;
  z-index: 1;
}

/* Add shadow to header when scrolled (via JS class) */
.hi-ui-table-scroll-container.hi-ui-table-scrolled .hi-ui-table-thead-sticky {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Mobile Card View - Hidden by default */
.hi-ui-table-mobile {
  display: none;
}

/* Mobile Sort Bar - Hidden by default */
.hi-ui-table-mobile-sort {
  display: none;
}

/* Mobile Styles */
@media (max-width: 1024px) {
  .hi-ui-table-desktop,
  .hi-ui.hi-ui-table .hi-ui-table-grid {
    display: none;
  }

  .hi-ui-table-mobile {
    display: flex;
    flex-direction: column;
    gap: var(--hi-table-card-gap);
  }

  .hi-ui-table-mobile [role='list'] {
    display: flex;
    flex-direction: column;
    gap: var(--hi-table-card-gap);
  }

  /* Mobile Sort Bar */
  .hi-ui-table-mobile-sort {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
  }

  .hi-ui-table-mobile-sort-label {
    font-family: var(--hi-table-header-font-family);
    font-size: 13px;
    color: #666;
    text-transform: uppercase;
    flex-shrink: 0;
  }

  .hi-ui-table-mobile-sort-select {
    flex: 1;
  }

  .hi-ui-table-mobile-sort-direction {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff;
    font-size: 18px;
    color: var(--hi-table-text-color);
    cursor: pointer;
    flex-shrink: 0;
  }

  .hi-ui-table-mobile-sort-direction:hover {
    background: #f5f5f5;
  }

  .hi-ui-table-mobile-sort-direction:focus-visible {
    outline: 2px solid var(--hi-table-header-bg);
    outline-offset: 1px;
  }

  /* Card */
  .hi-ui-table-card {
    background: var(--hi-table-card-bg);
    border-radius: var(--hi-table-card-border-radius);
    box-shadow: var(--hi-table-card-shadow);
    padding: var(--hi-table-card-padding);
    border: 1px solid var(--hi-table-row-border);
  }

  /* Card Row - inline label/value pairs */
  .hi-ui-table-card-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 8px 0;
    border-bottom: 1px solid var(--hi-table-row-border);
    gap: 16px;
  }

  .hi-ui-table-card-row:last-child {
    border-bottom: none;
  }

  .hi-ui-table-card-label {
    font-family: var(--hi-table-header-font-family);
    font-size: 13px;
    color: #666;
    text-transform: uppercase;
    flex-shrink: 0;
  }

  .hi-ui-table-card-value {
    font-family: var(--hi-table-font-family);
    font-size: 15px;
    color: var(--hi-table-text-color);
    text-align: right;
    word-break: break-word;
  }

  /* Loading Card */
  .hi-ui-table-loading-card {
    background: var(--hi-table-card-bg);
    border-radius: var(--hi-table-card-border-radius);
    padding: var(--hi-table-card-padding);
    border: 1px solid var(--hi-table-row-border);
  }

  /* Empty Card */
  .hi-ui-table-empty-card {
    background: var(--hi-table-card-bg);
    border-radius: var(--hi-table-card-border-radius);
    padding: var(--hi-table-card-padding);
    border: 1px solid var(--hi-table-row-border);
    text-align: center;
    color: #666;
  }

  /* Hide columns marked as hideOnMobile */
  .hi-ui-table-hide-mobile {
    display: none;
  }

  /* Card Selection */
  .hi-ui-table-card-select {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 12px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--hi-table-row-border);
  }

  .hi-ui-table-card-select-label {
    font-family: var(--hi-table-header-font-family);
    font-size: 13px;
    color: #666;
    text-transform: uppercase;
    cursor: pointer;
  }

  .hi-ui-table-card-selected {
    background-color: rgba(37, 105, 87, 0.08);
    border-color: var(--hi-table-header-bg);
  }

  .hi-ui-table-card-clickable:hover {
    background-color: rgba(0, 0, 0, 0.04);
  }
}

/* ===================================================
   Tabs Component Styles
   =================================================== */

/* CSS Variables for customization */
.hi-ui-tabs {
  --hi-tabs-border-color: #e5e7eb;
  --hi-tabs-active-color: #256957;
  --hi-tabs-active-text: #2b2b2b;
  --hi-tabs-text-color: #6b7280;
  --hi-tabs-hover-bg: rgba(0, 0, 0, 0.04);
  --hi-tabs-disabled-opacity: 0.5;
  --hi-tabs-font-family:
    MuseoSansRounded-300, 'MuseoSansRounded-300 Fallback', -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, sans-serif;
  --hi-tabs-font-family-active:
    MuseoSansRounded-700, 'MuseoSansRounded-700 Fallback', -apple-system, BlinkMacSystemFont,
    'Segoe UI', sans-serif;
  --hi-tabs-gap: 0.5rem;
  --hi-tabs-panel-padding: 1rem 0;
}

/* Container */
.hi-ui-tabs {
  width: 100%;
}

/* Tab list - scrollable when overflowing */
.hi-ui-tabs__list {
  display: flex;
  gap: var(--hi-tabs-gap);
  overflow-x: auto;
  overflow-y: hidden;
}

/* Base tab button */
.hi-ui-tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  font-family: var(--hi-tabs-font-family);
  font-size: 0.9375rem;
  line-height: 1.25;
  color: var(--hi-tabs-text-color);
  background: transparent;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition:
    color 0.15s ease,
    background-color 0.15s ease,
    border-color 0.15s ease;
  flex-shrink: 0;
}

.hi-ui-tabs__tab:focus-visible {
  outline: 2px solid var(--hi-tabs-active-color);
  outline-offset: 2px;
}

/* Tab icon */
.hi-ui-tabs__tab-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
}

.hi-ui-tabs__tab-icon svg {
  width: 100%;
  height: 100%;
}

/* When mobileIcons is set, hide icons on desktop — they only show on mobile */
.hi-ui-tabs--mobile-icons .hi-ui-tabs__tab-icon {
  display: none;
}

/* Disabled state */
.hi-ui-tabs__tab--disabled {
  opacity: var(--hi-tabs-disabled-opacity);
  cursor: not-allowed;
}

/* Panel */
.hi-ui-tabs__panel {
  padding: var(--hi-tabs-panel-padding);
  animation: hi-tabs-fade-in 0.2s ease-out;
}

@keyframes hi-tabs-fade-in {
  from {
    opacity: 0.7;
  }
  to {
    opacity: 1;
  }
}

.hi-ui-tabs__panel:focus {
  outline: none;
}

.hi-ui-tabs__panel-title {
  display: none;
}

/* ===================================================
   Sliding Indicator (for default and underline variants)
   =================================================== */

.hi-ui-tabs__indicator {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background-color: var(--hi-tabs-active-color);
  transition:
    transform 0.2s ease-out,
    width 0.2s ease-out;
  pointer-events: none;
}

/* ===================================================
   Default Variant
   =================================================== */

.hi-ui-tabs--default .hi-ui-tabs__list {
  position: relative;
  border-bottom: 1px solid var(--hi-tabs-border-color);
}

.hi-ui-tabs--default .hi-ui-tabs__tab {
  position: relative;
  margin-bottom: -1px;
}

.hi-ui-tabs--default .hi-ui-tabs__tab:hover:not(.hi-ui-tabs__tab--disabled) {
  color: var(--hi-tabs-active-text);
  background-color: var(--hi-tabs-hover-bg);
}

.hi-ui-tabs--default .hi-ui-tabs__tab--active {
  color: var(--hi-tabs-active-text);
  font-family: var(--hi-tabs-font-family-active);
}

/* ===================================================
   Pills Variant
   =================================================== */

.hi-ui-tabs--pills .hi-ui-tabs__list {
  position: relative;
  gap: 0.25rem;
}

.hi-ui-tabs--pills .hi-ui-tabs__tab {
  position: relative;
  z-index: 1;
  border-radius: 9999px;
  padding: 0.5rem 1rem;
}

.hi-ui-tabs--pills
  .hi-ui-tabs__tab:hover:not(.hi-ui-tabs__tab--disabled):not(.hi-ui-tabs__tab--active) {
  background-color: var(--hi-tabs-hover-bg);
}

.hi-ui-tabs--pills .hi-ui-tabs__tab--active {
  color: #ffffff;
  font-family: var(--hi-tabs-font-family-active);
  background-color: transparent;
}

.hi-ui-tabs--pills .hi-ui-tabs__indicator {
  height: 100%;
  top: 0;
  bottom: auto;
  border-radius: 9999px;
  background-color: var(--hi-tabs-active-color);
  z-index: 0;
}

/* ===================================================
   Underline Variant
   =================================================== */

.hi-ui-tabs--underline .hi-ui-tabs__list {
  position: relative;
  padding-bottom: 6px;
}

.hi-ui-tabs--underline .hi-ui-tabs__tab {
  padding: 0.5rem 0;
  margin-right: 1.5rem;
}

.hi-ui-tabs--underline .hi-ui-tabs__tab:last-of-type {
  margin-right: 0;
}

.hi-ui-tabs--underline .hi-ui-tabs__tab:hover:not(.hi-ui-tabs__tab--disabled) {
  color: var(--hi-tabs-active-text);
}

.hi-ui-tabs--underline .hi-ui-tabs__tab--active {
  color: var(--hi-tabs-active-text);
  font-family: var(--hi-tabs-font-family-active);
}

.hi-ui-tabs--underline .hi-ui-tabs__indicator {
  bottom: 0;
}

/* ===================================================
   Mobile Responsive
   =================================================== */

@media (max-width: 768px) {
  .hi-ui-tabs__tab {
    padding: 0.625rem 0.75rem;
    font-size: 0.875rem;
  }

  .hi-ui-tabs--pills .hi-ui-tabs__tab {
    padding: 0.5rem 0.875rem;
  }

  .hi-ui-tabs--underline .hi-ui-tabs__tab {
    margin-right: 1rem;
  }

  /* Hide scrollbar on mobile for cleaner touch scrolling */
  .hi-ui-tabs__list {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
  }

  .hi-ui-tabs__list::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
  }

  /* Mobile icons mode: full width, equally spaced */
  .hi-ui-tabs--mobile-icons .hi-ui-tabs__list {
    display: flex;
    width: 100%;
  }

  .hi-ui-tabs--mobile-icons .hi-ui-tabs__tab {
    flex: 1;
    justify-content: center;
  }

  .hi-ui-tabs--mobile-icons .hi-ui-tabs__tab-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .hi-ui-tabs--mobile-icons .hi-ui-tabs__tab-icon {
    display: flex;
    width: 1.5rem;
    height: 1.5rem;
  }

  .hi-ui-tabs__panel-title {
    display: block;
    font-family: MuseoSansRounded-700, 'MuseoSansRounded-700 Fallback', sans-serif;
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
  }
}

/* TopNavLink styles - no underline by default, underline on hover */
/* Use ID selector for highest precedence over page content styles */
#hi-ui-topnav a.hi-ui-topnav-link {
  font-family: 'MuseoSansRounded-300', 'MuseoSansRounded-300 Fallback', sans-serif;
  font-size: 11px;
  color: #3c3c3b;
  text-decoration: none;
  transition: -webkit-text-decoration 0.2s ease;
  transition: text-decoration 0.2s ease;
  transition: text-decoration 0.2s ease, -webkit-text-decoration 0.2s ease;
  font-weight: normal;
  /* Pin line-height so the item is host-independent — otherwise it inherits the
     host body's line-height (1.5 in the presales Next app → 16.5px, vs the
     legacy site's 1.43 → 15.7px), which shifts vertical centring in the bar. */
  line-height: 16px;
}

#hi-ui-topnav a.hi-ui-topnav-link:hover {
  text-decoration: underline;
  opacity: 1;
}

.hi-ui-contact-form-modal .hi-ui-form-field {
  padding-top: 12px;
}

.hi-ui-contact-form-modal__pair-row > * {
  flex: 1;
  min-width: 0;
}

@media (max-width: 768px) {
  .hi-ui-contact-form-modal__pair-row {
    flex-direction: column;
    gap: 0;
  }
}

#hi-ui-footer .hi-ui-footer-section {
  display: flex;
  flex-direction: column;
}

#hi-ui-footer .hi-ui-footer-section__title {
  margin-bottom: 16px;
  text-transform: uppercase;
  font-family: 'MuseoSansRounded-500', 'MuseoSansRounded-500 Fallback', sans-serif;
  font-weight: normal;
  font-size: 17.5px;
}

#hi-ui-footer .hi-ui-footer-section__list {
  margin: 0;
  padding: 0;
}

#hi-ui-footer .hi-ui-footer-section__list .hi-ui-list-item {
  margin-bottom: 12px;
  font-size: 16px;
  line-height: 17.5px;
}

#hi-ui-footer .hi-ui-footer-section__list .hi-ui-list-item a.hi-ui-link {
  font-family: 'MuseoSansRounded-300', 'MuseoSansRounded-300 Fallback', sans-serif;
  font-weight: normal;
  font-size: 17.5px;
  text-decoration: none;
}

#hi-ui-footer .hi-ui-footer-section__list .hi-ui-list-item a.hi-ui-link:hover {
  text-decoration: underline;
  opacity: 1;
}

/* Mobile styles */
@media (max-width: 768px) {
  #hi-ui-footer .hi-ui-footer-section__title {
    margin-bottom: 12px;
    font-size: 15px;
  }

  #hi-ui-footer .hi-ui-footer-section__list .hi-ui-list-item {
    margin-bottom: 8px;
    font-size: 15px;
    line-height: 15px;
  }

  #hi-ui-footer .hi-ui-footer-section__list .hi-ui-list-item a.hi-ui-link {
    font-size: 15px;
  }
}

#hi-ui-footer.hi-ui-footer {
  background-color: #f8f8f8;
  padding-bottom: 24px;
  max-width: 100%;
}

/* Main content area - 4 equal columns */
#hi-ui-footer .hi-ui-footer__content {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 24px;
  margin-bottom: 40px;
  padding-top: 64px;
}

/* Logo */
#hi-ui-footer .hi-ui-footer__logo img {
  width: 150px;
  height: auto;
}

/* Link sections container - each section is a column */
#hi-ui-footer .hi-ui-footer__sections {
  display: contents;
}

/* Social area */
#hi-ui-footer .hi-ui-footer__social {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

#hi-ui-footer .hi-ui-footer__social-icons {
  display: flex;
  gap: 8px;
  line-height: normal;
}

#hi-ui-footer .hi-ui-footer__social-icons a {
  font-size: 10px;
}

#hi-ui-footer a.hi-ui-footer__social-link {
  color: #3c3c3b;
  transition: color 0.2s ease;
  text-decoration: none;
}

#hi-ui-footer a.hi-ui-footer__social-link:hover {
  color: #63b770;
  opacity: 1;
}

/* Legal section */
#hi-ui-footer .hi-ui-footer__legal {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-top: 24px;
  border-top: 1px solid #e5e5e5;
  font-size: 14px !important;
  font-weight: normal !important;
}

#hi-ui-footer .hi-ui-footer__legal-left {
  display: flex;
  flex-direction: column;
}

#hi-ui-footer .hi-ui-footer__copyright {
  color: #3c3c3b;
}

/* Override Text component rem-based font-size for pages with non-standard root font-size */
#hi-ui-footer .hi-ui-footer__legal .hi-ui-text,
#hi-ui-footer .hi-ui-footer__legal .hi-ui-text-body-small {
  font-size: 14px !important;
  font-weight: normal !important;
}

#hi-ui-footer .hi-ui-footer__legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

#hi-ui-footer .hi-ui-footer__legal-separator {
  width: 6px;
  text-align: center;
}

#hi-ui-footer .hi-ui-footer__legal-links a.hi-ui-link {
  color: #63b770;
  font-size: 14px;
  font-family: 'MuseoSansRounded-300', 'MuseoSansRounded-300 Fallback', sans-serif;
  font-weight: normal;
  line-height: 21px;
  text-decoration: none;
}

#hi-ui-footer .hi-ui-footer__legal-links a.hi-ui-link:hover {
  text-decoration: underline;
  opacity: 1;
}

#hi-ui-footer .hi-ui-footer__legal-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

/* Mobile styles */
@media (max-width: 768px) {
  #hi-ui-footer .hi-ui-footer__content {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding-top: 32px;
    margin-bottom: 24px;
  }

  #hi-ui-footer .hi-ui-footer__logo {
    display: none;
  }

  #hi-ui-footer .hi-ui-footer__social {
    grid-column: 1 / -1;
  }

  #hi-ui-footer .hi-ui-footer__legal {
    flex-direction: column;
    gap: 16px;
    padding-top: 16px;
  }

  #hi-ui-footer .hi-ui-footer__legal-links {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding-top: 12px;
  }

  #hi-ui-footer .hi-ui-footer__legal-separator {
    display: none;
  }

  #hi-ui-footer .hi-ui-footer__legal-right {
    align-items: flex-start;
    gap: 4px;
  }

  #hi-ui-footer .hi-ui-footer__social {
    align-items: center;
    gap: 8px;
  }
}

#hi-ui-mainnav.hi-ui-mainnav-wrapper {
  position: relative;
}

#hi-ui-mainnav .hi-ui-mainnav {
  position: relative;
  display: flex;
  align-items: center;
  height: 80px;
  box-sizing: border-box;
  background-color: #ffffff;
  border-bottom: 1px solid #e7e7e7;
}

#hi-ui-mainnav .hi-ui-mainnav__content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#hi-ui-mainnav .hi-ui-mainnav__logo {
  display: flex;
  align-items: center;
  margin-right: clamp(16px, 2vw, 24px);
}

#hi-ui-mainnav .hi-ui-mainnav__logo img {
  width: clamp(136px, 15vw, 200px);
  height: clamp(32px, 3.6vw, 48px);
}

#hi-ui-mainnav .hi-ui-mainnav__items {
  display: flex;
  align-items: stretch;
  gap: clamp(12px, 2vw, 24px);
}

#hi-ui-mainnav .hi-ui-mainnav__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: #ffffff;
  border-top: 1px solid #e7e7e7;
  border-bottom: 1px solid #e7e7e7;
  z-index: 1000;
}

#hi-ui-mainnav .hi-ui-mainnav__subnav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(8px, 1.2vw, 16px);
  height: clamp(140px, 14vw, 180px);
  align-content: center;
}

/* Mobile Navigation Bar - Hidden on desktop */
#hi-ui-mainnav .hi-ui-mainnav-mobile {
  display: none;
}

/* Mobile Menu Panel */
#hi-ui-mainnav .hi-ui-mainnav-mobile-menu {
  display: none;
}

/* Responsive: show mobile nav, hide desktop nav */
@media (max-width: 768px) {
  #hi-ui-mainnav.hi-ui-mainnav-wrapper {
    min-height: 67px;
  }

  /* When isMobileFixed=false: mobile nav scrolls with the page, no space reservation */
  #hi-ui-mainnav.hi-ui-mainnav-wrapper--mobile-scroll {
    min-height: 0;
  }

  #hi-ui-mainnav .hi-ui-mainnav {
    display: none;
  }

  #hi-ui-mainnav .hi-ui-mainnav-mobile {
    display: flex;
    justify-content: space-between;
    padding: 0 14px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: #ffffff;
    border-bottom: 1px solid #e7e7e7;
    z-index: 1000;
  }

  #hi-ui-mainnav .hi-ui-mainnav-mobile__group {
    display: flex;
    gap: 8px;
  }

  #hi-ui-mainnav.hi-ui-mainnav-wrapper--mobile-scroll .hi-ui-mainnav-mobile {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
  }

  #hi-ui-mainnav .hi-ui-mainnav-mobile-menu {
    display: block;
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100vh;
    background-color: #ffffff;
    z-index: 999;
    overflow-y: auto;
    padding-bottom: 80px;
    transition: right 0.3s ease;
  }

  #hi-ui-mainnav .hi-ui-mainnav-mobile-menu--open {
    right: 0;
  }

  #hi-ui-mainnav .hi-ui-mainnav-mobile-menu__content {
    padding-top: 76px;
  }

  #hi-ui-mainnav a.hi-ui-mainnav-mobile-menu__item {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 44px;
    padding: 12px 16px;
    font-size: 15px;
    color: #2b2b2b;
    font-family: 'MuseoSansRounded-500', 'MuseoSansRounded-500 Fallback', sans-serif;
    font-weight: normal;
    background: transparent;
    border-bottom: 1px solid #f0f0f0;
    text-decoration: none;
    transition: background-color 0.15s ease;
    box-sizing: border-box;
    line-height: normal;
  }

  #hi-ui-mainnav a.hi-ui-mainnav-mobile-menu__item:hover {
    background: #f9f9f9;
  }

  #hi-ui-mainnav .hi-ui-mainnav-mobile-menu__sale-badge {
    margin-left: 8px;
  }
}

/* Badge used on nav items (SALE, NEW, etc.) — background-color set inline per item */
#hi-ui-mainnav .hi-ui-nav-badge {
  color: #fff;
  font-family: MuseoSansRounded-300, 'MuseoSansRounded-300 Fallback', sans-serif;
  font-size: 12px;
  line-height: 17px;
  text-transform: uppercase;
  text-align: center;
  padding: 2px 5px 0;
  border-radius: 3px;
  display: inline-block;
}

/* TopNav organism styles */

.hi-ui-topnav {
  background: #f8f8f8;
  border-bottom: 1px solid #ededed;
  height: 48px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1001;
  /* Contain the slide-out states below. Whichever of the two right-hand groups
     is hidden sits at `translateX(20px)` — parked outside the bar, invisible and
     inert, but still counted in scrollable overflow, which gave every page a 4px
     horizontal overflow at any viewport narrow enough for the 1170px container to
     be fluid (769–1201px). `clip` rather than `hidden` on purpose: `hidden` would
     force the other axis to a scroll container and cut off the account dropdown,
     whereas `overflow-x: clip` leaves `overflow-y` genuinely visible. The bar is
     viewport-wide, so the clip edge IS the viewport edge — nothing legitimate can
     sit beyond it. */
  overflow-x: clip;
}

/* Hide on mobile (<768px) */
@media (max-width: 768px) {
  .hi-ui-topnav {
    display: none;
  }
}

/* Left side: Search bar */
.hi-ui-topnav-left {
  flex: 0 1 auto;
}

/* Right side container - houses both search controls and nav links */
.hi-ui-topnav-right-container {
  position: relative;
  flex: 0 1 auto;
  display: flex;
  align-items: center;
}

/* Both search controls and nav links */
.hi-ui-topnav-right {
  white-space: nowrap;
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

/* Search controls - hidden by default, slides in from right when visible */
.hi-ui-topnav-search-controls {
  position: absolute;
  right: 0;
  opacity: 0;
  transform: translateX(20px);
  pointer-events: none;
}

.hi-ui-topnav-search-controls.visible {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

/* Nav links - visible by default, slides out to right when hidden */
.hi-ui-topnav-links {
  opacity: 1;
  transform: translateX(0);
}

.hi-ui-topnav-links:not(.visible) {
  opacity: 0;
  transform: translateX(20px);
  pointer-events: none;
}

/* TopNav search - override rem-based gap with fixed pixels for consistent spacing */
/* Pages with non-standard root font-size (e.g. login) cause rem gap to differ */
.hi-ui-topnav-search {
  gap: 16px !important;
}

/* TopNav search input - override legacy page styles */
/* Using fixed pixel values to avoid rem unit issues on pages with non-standard root font-size */
.hi-ui-topnav-search .hi-ui-input {
  flex: 1;
  min-width: 240px;
  box-sizing: border-box;
  padding: 6px !important;
  font-size: 16px !important;
  line-height: 20px !important;
}

/* Override legacy _shared.css box-shadow and active shift on TopNav buttons */
.hi-ui-topnav .tw-btn-base {
  box-shadow: none !important;
  position: static !important;
  top: auto !important;
}

/* Section sub-navigation (legacy `.subpages`): a dark-green bar of white links
   under the MainNav. Desktop is a horizontal row; below 768 it collapses behind
   a hamburger into a full-width dropdown panel. An item with children is a
   dropdown (legacy `li.dropdown`), revealed on hover/focus on desktop and nested
   in the panel on mobile. ID-scoped (like MainNav) so the skin wins over the
   shared atom defaults. */
#hi-ui-section-nav.hi-ui-section-nav {
  background-color: #0d4e46;
  /* The one dark surface in the chrome. The shared ring colour IS this bar's
     background, so it would be invisible here — re-declaring the token flips
     every ring inside the bar and its dropdown (#04332d) to white, which sits
     at 9.6:1 against both. Custom properties inherit, so nothing below needs
     to know it was overridden. */
  --hi-focus-ring: #ffffff;
  /* The bar pins to the top once the (non-sticky) MainNav scrolls past it
     (legacy `.subpages { position: sticky; top: 0; z-index: 900 }`). */
  position: sticky;
  top: 0;
  z-index: 900;
}

#hi-ui-section-nav .hi-ui-section-nav__bar {
  position: relative;
}

/* Toggle is desktop-hidden; only the row of links shows. */
#hi-ui-section-nav .hi-ui-section-nav__toggle {
  display: none;
}

#hi-ui-section-nav .hi-ui-section-nav__menu {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

#hi-ui-section-nav .hi-ui-section-nav__item {
  margin: 0;
  padding: 0;
}

#hi-ui-section-nav .hi-ui-section-nav__item--dropdown {
  position: relative;
}

/* White links in the light text cut (legacy inherits it; the id overrides the
   shared `a.hi-ui-link` colour, its MuseoSansRounded-700 family, and its :hover
   opacity fade — legacy underlines, it doesn't dim). A transparent 3px bottom
   border reserves space so the hover/active underline doesn't shift the row. The
   dropdown trigger is a <button> reset to match the links exactly. */
#hi-ui-section-nav .hi-ui-section-nav__link {
  display: block;
  /* 12/7 vertical (not a flat 10) nudges the text slightly lower. With the 23px
     line-box and the 3px transparent underline border, the bar is exactly 45px
     (pinned line-height keeps it deterministic, not font-metric-dependent). No
     horizontal padding: legacy spaces links via margin-left (below) so the first
     link's text aligns to the container edge and the hover underline hugs the text. */
  padding: 12px 0 7px;
  margin-left: 20px;
  color: #ffffff;
  font-family: var(--hi-text-font-family);
  font-size: 15px;
  line-height: 23px;
  border-bottom: 3px solid transparent;
}

/* First link sits close to the container edge (legacy 5px), not a full 20px gap. */
#hi-ui-section-nav .hi-ui-section-nav__item:first-child .hi-ui-section-nav__link {
  margin-left: 5px;
}

#hi-ui-section-nav .hi-ui-section-nav__trigger {
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  font: inherit;
  font-family: var(--hi-text-font-family);
  font-size: 15px;
}

#hi-ui-section-nav .hi-ui-section-nav__link:hover {
  opacity: 1;
}

/* Only leaf links (anchors) underline on hover; the dropdown trigger (a button)
   opens the panel instead — legacy `.menu .dropdown a:hover { border-bottom: 0 }`. */
#hi-ui-section-nav a.hi-ui-section-nav__link:hover {
  border-bottom-color: #ffffff;
}

/* Only leaf links carry the active underline. The dropdown trigger (a button)
   never underlines — neither on hover nor when a child page is active — it just
   opens the panel (legacy keeps the trigger borderless). */
#hi-ui-section-nav a.hi-ui-section-nav__link--active {
  border-bottom-color: #ffffff;
}

/* Desktop dropdown panel (legacy `.menu .dropdown ul`): hidden until the item is
   hovered or focused within, then an absolutely-positioned darker panel. */
#hi-ui-section-nav .hi-ui-section-nav__dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  min-width: 230px;
  margin: 0;
  padding: 12px 21px;
  list-style: none;
  background-color: #04332d;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* `:has(:focus-visible)` rather than `:focus-within`: mouse users open this by
   hovering, and :focus-within also matched the click, so with client-side
   navigation the panel stayed open over the page the click had just loaded —
   focus never left the link, because the document never reloaded. Keyboard
   users still open it by tabbing in. */
#hi-ui-section-nav .hi-ui-section-nav__item--dropdown:hover .hi-ui-section-nav__dropdown,
#hi-ui-section-nav
  .hi-ui-section-nav__item--dropdown:has(:focus-visible)
  .hi-ui-section-nav__dropdown {
  display: block;
}

#hi-ui-section-nav .hi-ui-section-nav__dropdown-item {
  margin: 0;
  padding: 0;
}

#hi-ui-section-nav .hi-ui-section-nav__dropdown-link {
  display: block;
  padding: 13px 0 10px;
  color: #ffffff;
  font-family: var(--hi-text-font-family);
  font-size: 15px;
}

/* Dropdown children never underline (legacy `.menu .dropdown a:hover`
   borderless); just hold full opacity over the shared Link :hover fade. */
#hi-ui-section-nav .hi-ui-section-nav__dropdown-link:hover,
#hi-ui-section-nav .hi-ui-section-nav__dropdown-link--active {
  opacity: 1;
}

/* Optional "View Basket" button (legacy `.subpages_right .view-basket`): pinned
   to the bar's right, shown only below 1024 — desktop hands off to the page's own
   basket UI. White-outline transparent button on the green bar. */
#hi-ui-section-nav .hi-ui-section-nav__basket {
  display: none;
}

@media (max-width: 1023px) {
  #hi-ui-section-nav .hi-ui-section-nav__basket {
    display: block;
    position: absolute;
    top: 5px;
    right: 0;
    padding: 8px 16px 6px;
    background: transparent;
    color: #ffffff;
    border: 2px solid #ffffff;
    border-radius: 6px;
    font-family: var(--hi-text-font-family-heading);
    font-size: 15px;
    line-height: 18px;
    text-transform: uppercase;
    cursor: pointer;
  }

  #hi-ui-section-nav .hi-ui-section-nav__basket:hover {
    background: transparent;
  }
}

/* Optional duration/price toggle (legacy `.subpages .switch-wrap`): a labelled
   two-state switch pinned to the bar's right, shown at ALL widths (a primary
   price control, unlike the basket button which is a <1024-only hand-off). The
   switch itself is legacy's transparent white-bordered pill with a sliding white
   knob; the flanking option labels + optional prefix ("Prices | ") are white. */
#hi-ui-section-nav .hi-ui-section-nav__switch-wrap {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  color: #ffffff;
  font-family: var(--hi-text-font-family);
  font-size: 14px;
}

#hi-ui-section-nav .hi-ui-section-nav__switch-title {
  font-family: 'MuseoSansRounded-500', 'MuseoSansRounded-500 Fallback', sans-serif;
  font-weight: 500;
  margin-right: 5px;
}

#hi-ui-section-nav .hi-ui-section-nav__switch-option {
  /* Legacy option labels are 12px — smaller than the 14px "Prices |" prefix. */
  font-size: 12px;
  white-space: nowrap;
}

#hi-ui-section-nav .hi-ui-section-nav__switch {
  position: relative;
  flex-shrink: 0;
  width: 40px;
  height: 24px;
  margin: 0 4px;
  padding: 0;
  background: transparent;
  border: 2px solid #ffffff;
  border-radius: 40px;
  box-shadow: inset 0 0 4px 0 rgba(0, 0, 0, 0.11);
  cursor: pointer;
}

/* Knob slides 1px→17px between the off (left) and on (right) states, matching
   legacy `.switcher.left/right::after` translateX. */
#hi-ui-section-nav .hi-ui-section-nav__switch-knob {
  position: absolute;
  top: 50%;
  left: 0;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  border-radius: 50%;
  background-color: #ffffff;
  transform: translateX(1px);
  transition: transform 0.2s ease-out;
}

#hi-ui-section-nav .hi-ui-section-nav__switch--on .hi-ui-section-nav__switch-knob {
  transform: translateX(17px);
}

/* Below 768: hamburger reveals a full-width dark dropdown of stacked links, with
   any dropdown's children nested + indented (legacy mobile pattern). */
@media (max-width: 767px) {
  #hi-ui-section-nav .hi-ui-section-nav__toggle {
    display: flex;
    align-items: center;
    /* Match the desktop bar height exactly (the desktop link computes to 45px:
       12/7 padding + a 23px line-box + the 3px transparent underline border). */
    min-height: 45px;
    /* Nudge the bars a few px off the container's left edge. */
    padding: 0 0 0 4px;
    background: none;
    border: none;
    color: #ffffff;
    cursor: pointer;
  }

  /* Legacy's `.navicon`: a 22×2 middle bar with two pseudo-element bars 8px above
     and below — three square-ended white lines. `transition: all` drives the
     morph to an X when the button is open (below). */
  #hi-ui-section-nav .hi-ui-section-nav__hamburger,
  #hi-ui-section-nav .hi-ui-section-nav__hamburger::before,
  #hi-ui-section-nav .hi-ui-section-nav__hamburger::after {
    display: block;
    width: 22px;
    height: 2px;
    background-color: #ffffff;
    transition: all 0.2s ease-out;
  }

  #hi-ui-section-nav .hi-ui-section-nav__hamburger {
    position: relative;
  }

  #hi-ui-section-nav .hi-ui-section-nav__hamburger::before,
  #hi-ui-section-nav .hi-ui-section-nav__hamburger::after {
    content: '';
    position: absolute;
    left: 0;
  }

  #hi-ui-section-nav .hi-ui-section-nav__hamburger::before {
    top: -8px;
  }

  #hi-ui-section-nav .hi-ui-section-nav__hamburger::after {
    top: 8px;
  }

  /* Open: middle bar fades out, outer bars meet at centre and cross into an X
     (legacy `.menu-btn:checked ~ .menu-icon .navicon`). */
  #hi-ui-section-nav
    .hi-ui-section-nav__toggle[aria-expanded='true']
    .hi-ui-section-nav__hamburger {
    background-color: transparent;
  }

  #hi-ui-section-nav
    .hi-ui-section-nav__toggle[aria-expanded='true']
    .hi-ui-section-nav__hamburger::before {
    top: 0;
    transform: rotate(-45deg);
  }

  #hi-ui-section-nav
    .hi-ui-section-nav__toggle[aria-expanded='true']
    .hi-ui-section-nav__hamburger::after {
    top: 0;
    transform: rotate(45deg);
  }

  #hi-ui-section-nav .hi-ui-section-nav__menu {
    /* Break out of the LayoutContainer gutter for a full-width panel. */
    margin: 0 -16px;
    display: none;
    flex-direction: column;
    background-color: #04342e;
  }

  /* Open: drop out of flow and fill the screen below the 45px bar (legacy
     `.menu-btn:checked ~ .menu { position: absolute; top: 45px; min-height: 100vh }`),
     overlaying the page. Background scroll is locked in JS so nothing scrolls
     behind it — improving on legacy, where the page still scrolled. */
  #hi-ui-section-nav .hi-ui-section-nav__menu--open {
    display: flex;
    position: absolute;
    top: 45px;
    left: 0;
    right: 0;
    min-height: 100vh;
    z-index: 900;
  }

  #hi-ui-section-nav .hi-ui-section-nav__link,
  #hi-ui-section-nav .hi-ui-section-nav__trigger {
    width: 100%;
    padding: 10px 20px 10px 15px;
    /* Zero the desktop bar's link-spacing margins (20px, 5px on the first item)
       — left over in the stacked panel they pushed every parent except the
       first to the children's indent column, erasing the hierarchy. */
    margin-left: 0;
    text-align: left;
    border-bottom: none;
  }

  /* The desktop first-item margin rule is more specific (it carries the
     :first-child chain), so it needs its own zero here. */
  #hi-ui-section-nav .hi-ui-section-nav__item:first-child .hi-ui-section-nav__link {
    margin-left: 0;
  }

  #hi-ui-section-nav a.hi-ui-section-nav__link:hover {
    border-bottom: none;
  }

  /* The dropdown block carries a divider rule (legacy
     `.subpages_left .menu .dropdown { border-bottom: 1px #146056 solid }`). */
  #hi-ui-section-nav .hi-ui-section-nav__item--dropdown {
    border-bottom: 1px solid #146056;
  }

  /* Active dropdown trigger (its current page lives in the panel): the heading
     goes museo-700 to mark the active section on mobile. */
  #hi-ui-section-nav .hi-ui-section-nav__trigger.hi-ui-section-nav__link--active {
    font-family: var(--hi-text-font-family-heading);
  }

  /* Dropdown children: always shown, nested + indented under the parent. */
  #hi-ui-section-nav .hi-ui-section-nav__dropdown {
    display: block;
    position: static;
    min-width: 0;
    padding: 0 0 10px 20px;
    background: none;
    box-shadow: none;
  }

  #hi-ui-section-nav .hi-ui-section-nav__dropdown-link {
    padding: 10px 20px 10px 15px;
  }
}

/**
 * Page Component Styles
 * Full page layout with TopNav, MainNav, content area with sidebar, and Footer
 */

/* Reset body margin when Page component is used */
body:has(.hi-ui-page) {
  margin: 0;
}

.hi-ui-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #e6e6e6;
}

/* The sticky-footer chain, and the reason it has to keep going.
   `.hi-ui-page` is a `min-height: 100vh` column, so on a page whose content is
   shorter than the viewport there is leftover height to place, and `flex: 1`
   hands it to this container — the standard sticky footer. But the slack has to
   reach the content: a container that grows while its own child stays at
   content height just relocates the emptiness to a gap between the last content
   and the footer. So the container is a column too, and passes the growth on.

   `--full-width` is always applied alongside the base class, so it only resets
   what differs; it inherits the flex behaviour above. Its child is the host
   app's own content root, which hi-ui can't safely target — the app decides
   which of its elements takes the slack (in presales, `<main>` — see
   apps/presales/app/globals.css). */
.hi-ui-page__container {
  display: flex;
  flex: 1;
  flex-direction: column;
  margin-top: 15px;
}

.hi-ui-page__container--full-width {
  margin-top: 0;
}

/* `flex: 1 0 auto` rather than `1`: basis `auto` keeps the row's natural height
   as its floor, so on a tall page this adds nothing, and growth is the only
   effect. The row already stretches its children (Flex defaults to
   `align-items: stretch`), so the content card and sidebar follow it down. */
.hi-ui-page__layout {
  flex: 1 0 auto;
  gap: 0;
}

.hi-ui-page__content {
  min-width: 0; /* Prevent content from overflowing */
  padding: 32px;
  background-color: #ffffff;
  border-top-left-radius: 15px;
}

.hi-ui-page__breadcrumbs {
  margin-bottom: 15px;
}

@media (max-width: 768px) {
  .hi-ui-page {
    background-color: #ffffff;
  }

  .hi-ui-page__content {
    padding: 0 0 2rem 0;
  }
}


/*# sourceMappingURL=index.css.map*/