:root {
  /* ==========================================================================
     Novatellus — design token (handoff design_handoff_ecommerce_nfarm, Parte C)
     I nomi sono quelli gia consumati dal repo e dalle utility primeflex.
     ========================================================================== */

  /* --- Tipografia ------------------------------------------------------- */
  --font-family: Figtree, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif;

  /* --- Raggi ------------------------------------------------------------ */
  --border-radius: 12px;
  --border-radius-sm: 9px;
  --border-radius-md: 16px;
  --border-radius-lg: 20px;

  --content-padding: 1.25rem;
  --inline-spacing: 0.5rem;

  /* --- Testo ------------------------------------------------------------ */
  --text-color: #22352E;
  --text-color-secondary: #7B837C;
  --text-secondary-color: var(--text-color-secondary);
  --text-color-body: #46504A;
  --text-color-body-strong: #2F3B35;
  --text-color-faint: #98A09A;
  --text-color-disabled: #B9C4BC;
  --placeholder-color: #B4B0A6;
  --muted-color: #8A9089;

  /* --- Primario --------------------------------------------------------- */
  --primary-color: #4A8770;
  --primary-color-text: #ffffff;
  --primary-contrast-color: #ffffff;
  --highlight-bg: #F3F8F5;
  --highlight-text-color: #4A8770;
  --primary-50: #F3F8F5;
  --primary-100: #EAF1ED;
  --primary-200: #E6EFE9;
  --primary-300: #CBDDD3;
  --primary-400: #A8C6B6;
  --primary-500: #5B9880;
  --primary-600: #4A8770;
  --primary-700: #3B6E5A;
  --primary-800: #2E5747;
  --primary-900: #22352E;

  /* Verde scuro Novatellus (sidebar, bottoni scuri, toast) */
  --nova-dark: #22352E;
  --nova-dark-hover: #16241E;
  /* Verde chiaro (logo, nav attiva, spunte su fondo scuro) */
  --tertiary-color: #A8D5A0;
  --quaternary-color: #CBDDD3;

  /* --- Superfici -------------------------------------------------------- */
  --surface-a: #ffffff;
  --surface-b: #FBFAF8;
  --surface-c: #F2EFE9;
  --surface-d: #E8E4DD;
  --surface-e: #ffffff;
  --surface-f: #ffffff;
  --surface-0: #ffffff;
  --surface-50: #FBFAF8;
  --surface-100: #F1EEE8;
  --surface-200: #EDE9E2;
  --surface-300: #E3DFD7;
  --surface-400: #C6C2B9;
  --surface-500: #A8A49A;
  --surface-600: #8A9089;
  --surface-700: #6D746E;
  --surface-800: #46504A;
  --surface-900: #22352E;
  --surface-ground: #F5F3F0;
  --surface-section: #FBFAF8;
  --surface-card: #FBFAF8;
  --surface-overlay: #ffffff;
  --surface-border: #EDE9E2;
  --surface-divider: #EFEBE4;
  --surface-neutral: #F4F2EC;
  --surface-input: #F7F5F1;
  /* era #b6d68f: agiva su ogni hover PrimeNG (tabelle, menu). */
  --surface-hover: #EAE7E0;
  --surface-hover-strong: #ECE9E3;

  /* --- Bordi di controllo ----------------------------------------------- */
  --input-border-color: #E3DFD7;
  --input-border-color-focus: #4A8770;
  --checkbox-border-color: #CFCBC2;
  --breadcrumb-separator-color: #C6C2B9;

  /* --- Stati ------------------------------------------------------------ */
  --error-color: #A0574F;
  --nova-danger-text: #A0574F;
  --nova-danger-strong: #8E4A42;
  --nova-danger-border: #C98F87;
  --nova-danger-border-soft: #E7CFCB;
  --nova-danger-bg: #F9EEEC;
  --nova-danger-bg-soft: #FDF7F6;
  --nova-danger-hover: #F6ECEA;
  --warning-color: #C98A3F;
  --success-color: #4A8770;
  --info-color: #4A8770;
  --secondary-color: #46504A;

  /* --- Maschera, focus e ombre ------------------------------------------ */
  --maskbg: rgba(20, 32, 27, 0.52);
  --mask-bg: var(--maskbg);
  --focus-ring: 0 0 0 0.2rem var(--primary-200);
  --shadow-2: 0 4px 14px rgba(34, 53, 46, 0.05);
  --shadow-card: 0 4px 14px rgba(34, 53, 46, 0.05);
  --shadow-card-featured: 0 10px 28px rgba(74, 135, 112, 0.15);
  --shadow-card-hover: 0 14px 34px rgba(34, 53, 46, 0.13);
  --shadow-badge: 0 3px 10px rgba(20, 32, 27, 0.22);
  --shadow-dialog: 0 32px 80px rgba(20, 32, 27, 0.34);
  --shadow-toast: 0 14px 34px rgba(20, 32, 27, 0.32);

  /* Neutral palette */
  --gray-50: #FBFAF8;
  --gray-100: #F1EEE8;
  --gray-200: #EDE9E2;
  --gray-300: #E3DFD7;
  --gray-400: #C6C2B9;
  --gray-500: #A8A49A;
  --gray-600: #8A9089;
  --gray-700: #6D746E;
  --gray-800: #46504A;
  --gray-900: #22352E;
  --bluegray-50: #eef2f4;
  --bluegray-100: #d2dce2;
  --bluegray-200: #b4c3cc;
  --bluegray-300: #95a9b6;
  --bluegray-400: #7892a2;
  --bluegray-500: #5f7789;
  --bluegray-600: #4e6374;
  --bluegray-700: #3e505f;
  --bluegray-800: #2d3c49;
  --bluegray-900: #1f2c3a;

  /* Accent palettes */
  --blue-50: #eef6fb;
  --blue-100: #d2e8f4;
  --blue-200: #b4d8ec;
  --blue-300: #96c9e3;
  --blue-400: #79b9da;
  --blue-500: #5ca9d1;
  --blue-600: #4f91b2;
  --blue-700: #427894;
  --blue-800: #356075;
  --blue-900: #284856;
  --green-50: #F3F8F5;
  --green-100: #EAF1ED;
  --green-200: #E6EFE9;
  --green-300: #CBDDD3;
  --green-400: #A8C6B6;
  --green-500: #4A8770;
  --green-600: #4A8770;
  --green-700: #3B6E5A;
  --green-800: #2E5747;
  --green-900: #22352E;
  --yellow-50: #fefbf3;
  --yellow-100: #faedc4;
  --yellow-200: #f6de95;
  --yellow-300: #f2d066;
  --yellow-400: #eec137;
  --yellow-500: #eab308;
  --yellow-600: #c79807;
  --yellow-700: #a47d06;
  --yellow-800: #816204;
  --yellow-900: #5e4803;
  --cyan-50: #f3fbfd;
  --cyan-100: #c3edf5;
  --cyan-200: #94e0ed;
  --cyan-300: #65d2e4;
  --cyan-400: #35c4dc;
  --cyan-500: #06b6d4;
  --cyan-600: #059bb4;
  --cyan-700: #047f94;
  --cyan-800: #036475;
  --cyan-900: #024955;
  --pink-50: #fef6fa;
  --pink-100: #fad3e7;
  --pink-200: #f7b0d3;
  --pink-300: #f38ec0;
  --pink-400: #f06bac;
  --pink-500: #ec4899;
  --pink-600: #c93d82;
  --pink-700: #a5326b;
  --pink-800: #822854;
  --pink-900: #5e1d3d;
  --indigo-50: #f7f7fe;
  --indigo-100: #dadafc;
  --indigo-200: #bcbdf9;
  --indigo-300: #9ea0f6;
  --indigo-400: #8183f4;
  --indigo-500: #6366f1;
  --indigo-600: #5457cd;
  --indigo-700: #4547a9;
  --indigo-800: #363885;
  --indigo-900: #282960;
  --teal-50: #F3F8F5;
  --teal-100: #EAF1ED;
  --teal-200: #E6EFE9;
  --teal-300: #CBDDD3;
  --teal-400: #A8C6B6;
  --teal-500: #4A8770;
  --teal-600: #4A8770;
  --teal-700: #3B6E5A;
  --teal-800: #2E5747;
  --teal-900: #22352E;
  --orange-50: #fff8f3;
  --orange-100: #feddc7;
  --orange-200: #fcc39b;
  --orange-300: #fba86f;
  --orange-400: #fa8e42;
  --orange-500: #f97316;
  --orange-600: #d46213;
  --orange-700: #ae510f;
  --orange-800: #893f0c;
  --orange-900: #642e09;
  --purple-50: #fbf7ff;
  --purple-100: #ead6fd;
  --purple-200: #dab6fc;
  --purple-300: #c996fa;
  --purple-400: #b975f9;
  --purple-500: #a855f7;
  --purple-600: #8f48d2;
  --purple-700: #763cad;
  --purple-800: #5c2f88;
  --purple-900: #432263;
  --red-50: #FDF7F6;
  --red-100: #F9EEEC;
  --red-200: #F6ECEA;
  --red-300: #E7CFCB;
  --red-400: #C98F87;
  --red-500: #A0574F;
  --red-600: #8E4A42;
  --red-700: #8E4A42;
  --red-800: #6F3A34;
  --red-900: #522B26;

  /* Button semantic tokens (still consumed by app SCSS, not by PrimeNG) */
  --btn-padding-y: 0.7rem;
  --btn-padding-x: 1.25rem;
  --btn-border-radius: 11px;
  --btn-primary: var(--primary-color);
  --btn-primary-hover: var(--primary-600);
  --btn-primary-active: var(--primary-700);
  --btn-primary-focus: var(--primary-300);
  --btn-primary-text: #ffffff;
  --btn-secondary: #F1EEE8;
  --btn-secondary-hover: #EAE7E0;
  --btn-secondary-active: #E3DFD7;
  --btn-secondary-focus: #E6EFE9;
  --btn-secondary-text: var(--text-color);
  --btn-success: #4A8770;
  --btn-success-hover: #3B6E5A;
  --btn-success-active: #2E5747;
  --btn-success-focus: #CBDDD3;
  --btn-success-text: #ffffff;
  --btn-info: #4A8770;
  --btn-info-hover: #3B6E5A;
  --btn-info-active: #2E5747;
  --btn-info-focus: #38bdf8;
  --btn-info-text: #ffffff;
  --btn-warning: #C98A3F;
  --btn-warning-hover: #B0752F;
  --btn-warning-active: #96622A;
  --btn-warning-focus: #fbbf24;
  --btn-warning-text: #1f2937;
  --btn-danger: #A0574F;
  --btn-danger-hover: #8E4A42;
  --btn-danger-active: #6F3A34;
  --btn-danger-focus: #E7CFCB;
  --btn-danger-text: #ffffff;

  /* Launcher semantic tokens */
  --launcher-hero-bg:
    radial-gradient(circle at top right, rgba(6, 182, 212, 0.14), transparent 34%),
    linear-gradient(135deg, var(--bluegray-900), var(--bluegray-800));
  --launcher-hero-text: #f8fafc;
  --launcher-hero-eyebrow: rgba(226, 232, 240, 0.78);
  --launcher-hero-subtitle: rgba(226, 232, 240, 0.86);
  --launcher-hero-panel-bg: rgba(255, 255, 255, 0.08);
  --launcher-hero-panel-border: rgba(255, 255, 255, 0.12);
  --launcher-panel-bg: var(--surface-card);
  --launcher-panel-border: var(--surface-border);
  --launcher-panel-shadow: 0 10px 30px rgba(31, 44, 58, 0.06);
  --launcher-panel-radius: var(--border-radius-lg);
  --launcher-card-bg: var(--surface-card);
  --launcher-card-readonly-bg:
    linear-gradient(180deg, rgba(252, 249, 248, 0.96), rgba(247, 242, 241, 0.96)),
    var(--surface-card);
  --launcher-card-text: var(--text-color);
  --launcher-card-border: var(--surface-border);
  --launcher-card-shadow: 0 10px 30px rgba(31, 44, 58, 0.08);
  --launcher-card-hover-shadow: 0 16px 36px rgba(31, 44, 58, 0.12);
  --launcher-card-hover-border: var(--primary-color);
  --launcher-card-radius: 1rem;
  --launcher-logo-bg: var(--primary-color);
  --launcher-logo-text: var(--primary-color-text);
  --launcher-shortcut-bg: var(--surface-ground);
  --launcher-shortcut-border: var(--surface-border);
  --launcher-status-active-bg: var(--green-100);
  --launcher-status-active-color: var(--green-800);
  --launcher-status-expired-bg: var(--red-100);
  --launcher-status-expired-color: var(--red-800);
  --launcher-status-suspended-bg: var(--yellow-100);
  --launcher-status-suspended-color: var(--yellow-800);
  --launcher-status-activating-bg: var(--blue-100);
  --launcher-status-activating-color: var(--blue-800);
  --launcher-notification-bg: var(--blue-50);
  --launcher-notification-border: var(--blue-100);
  --launcher-notification-warning-bg: var(--yellow-50);
  --launcher-notification-warning-border: var(--yellow-100);
}

.selectable-step .p-steps-item.step-completed .p-steps-number {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: #ffffff;
}

.selectable-step .p-steps-item.step-completed .p-steps-title {
  color: var(--primary-color);
}

.text-muted {
  color: var(--muted-color);
}

.p-drawer.p-drawer-pink,
.p-drawer.p-drawer-pink .p-drawer-header,
.p-drawer.p-drawer-pink .p-drawer-content {
  background: var(--surface-ground);
}

/* ============================================================================
   Novatellus - stili globali dei controlli
   Applicati qui e non per componente: valgono per tutta l'app (vedi §A.6.5).
   ========================================================================== */

/* Animazione di entrata di dialog, toast e card di conferma ordine. */
@keyframes omRise {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.99);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes omFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* --- Input di testo ------------------------------------------------------ */
.p-inputtext {
  height: 44px;
  padding: 0 13px;
  border-radius: 10px;
  border: 1px solid var(--input-border-color);
  background: var(--surface-0);
  color: var(--text-color);
  font-family: var(--font-family);
  font-size: 14.5px;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background-color 0.15s ease;
}

.p-inputtext::placeholder {
  color: var(--placeholder-color);
}

.p-inputtext:enabled:hover {
  border-color: var(--primary-400);
}

.p-inputtext:enabled:focus,
.p-inputtext:focus-visible {
  outline: 0;
  border-color: var(--input-border-color-focus);
  box-shadow: var(--focus-ring);
}

.p-inputtext.ng-invalid.ng-touched,
.p-inputtext.p-invalid {
  border-color: var(--nova-danger-border);
  background: var(--nova-danger-bg-soft);
}

textarea.p-inputtext {
  height: auto;
  min-height: 88px;
  padding: 11px 13px;
  line-height: 1.5;
}

/* --- Select -------------------------------------------------------------- */
.p-select {
  height: 44px;
  border-radius: 10px;
  border: 1px solid var(--input-border-color);
  background: var(--surface-0);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.p-select:not(.p-disabled):hover {
  border-color: var(--primary-400);
}

.p-select:not(.p-disabled).p-focus {
  outline: 0;
  border-color: var(--input-border-color-focus);
  box-shadow: var(--focus-ring);
}

.p-select-label {
  padding: 0 13px;
  display: flex;
  align-items: center;
  font-size: 14.5px;
  color: var(--text-color);
}

.p-select-label.p-placeholder {
  color: var(--placeholder-color);
}

.p-select-overlay,
.p-multiselect-overlay,
.p-autocomplete-overlay {
  border-radius: var(--border-radius);
  border: 1px solid var(--surface-border);
  box-shadow: var(--shadow-card-hover);
}

.p-select-option.p-select-option-selected {
  background: var(--highlight-bg);
  color: var(--highlight-text-color);
}

/* --- Checkbox ------------------------------------------------------------ */
.p-checkbox {
  width: 21px;
  height: 21px;
}

.p-checkbox .p-checkbox-box {
  width: 21px;
  height: 21px;
  border-radius: 6px;
  border: 1.5px solid var(--checkbox-border-color);
  background: var(--surface-0);
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
  border-color: var(--primary-400);
}

.p-checkbox-checked .p-checkbox-box {
  background: var(--primary-color);
  border-color: var(--primary-color);
}

.p-checkbox-checked .p-checkbox-box .p-checkbox-icon {
  color: var(--primary-color-text);
  font-size: 12px;
}

.p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
  outline: 0;
  box-shadow: var(--focus-ring);
}

.p-checkbox.p-invalid > .p-checkbox-box {
  border-color: var(--nova-danger-border);
}

/* --- Radio -------------------------------------------------------------- */
.p-radiobutton,
.p-radiobutton .p-radiobutton-box {
  width: 18px;
  height: 18px;
}

.p-radiobutton .p-radiobutton-box {
  border: 1.5px solid var(--checkbox-border-color);
  background: var(--surface-0);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
  border-color: var(--primary-400);
}

.p-radiobutton-checked .p-radiobutton-box {
  border: 5px solid var(--primary-color);
  background: var(--surface-0);
}

.p-radiobutton-checked .p-radiobutton-box .p-radiobutton-icon {
  display: none;
}

.p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box {
  outline: 0;
  box-shadow: var(--focus-ring);
}

/* --- Bottoni ------------------------------------------------------------ */
.p-button {
  border-radius: 11px;
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 14.5px;
  letter-spacing: 0;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease;
}

.p-button:not(.p-button-outlined):not(.p-button-text):not(.p-button-link) {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--primary-color-text);
}

.p-button:not(.p-button-outlined):not(.p-button-text):not(.p-button-link):not(:disabled):hover {
  background: var(--primary-700);
  border-color: var(--primary-700);
}

.p-button.p-button-outlined {
  background: transparent;
  border-color: var(--primary-300);
  color: var(--primary-color);
}

.p-button.p-button-outlined:not(:disabled):hover {
  background: var(--primary-100);
  border-color: var(--primary-300);
  color: var(--primary-color);
}

.p-button.p-button-text {
  background: transparent;
  border-color: transparent;
  color: var(--primary-color);
}

.p-button.p-button-text:not(:disabled):hover {
  background: var(--primary-100);
  color: var(--primary-color);
}

.p-button.p-button-secondary:not(.p-button-outlined):not(.p-button-text) {
  background: var(--surface-100);
  border-color: #e5e1da;
  color: var(--text-color-body);
}

.p-button.p-button-secondary:not(.p-button-outlined):not(.p-button-text):not(:disabled):hover {
  background: var(--surface-hover);
  border-color: #e5e1da;
  color: var(--text-color-body);
}

.p-button.p-button-secondary.p-button-outlined {
  border-color: var(--surface-300);
  color: var(--text-color-body);
}

.p-button.p-button-secondary.p-button-outlined:not(:disabled):hover {
  background: var(--surface-hover);
  color: var(--text-color-body);
}

.p-button.p-button-danger:not(.p-button-outlined):not(.p-button-text) {
  background: var(--nova-danger-text);
  border-color: var(--nova-danger-text);
}

.p-button.p-button-danger.p-button-outlined,
.p-button.p-button-danger.p-button-text {
  color: var(--nova-danger-text);
  border-color: var(--nova-danger-border);
}

.p-button.p-button-danger.p-button-outlined:not(:disabled):hover,
.p-button.p-button-danger.p-button-text:not(:disabled):hover {
  background: var(--nova-danger-hover);
  color: var(--nova-danger-strong);
}

.p-button:focus-visible {
  outline: 0;
  box-shadow: var(--focus-ring);
}

.p-button:disabled {
  opacity: 0.55;
}

/* --- Badge -------------------------------------------------------------- */
.p-badge {
  background: var(--primary-color);
  color: var(--primary-color-text);
  font-family: var(--font-family);
  font-size: 11px;
  font-weight: 700;
  min-width: 20px;
  height: 20px;
  line-height: 20px;
  border-radius: 999px;
}

/* --- Tag ---------------------------------------------------------------- */
.p-tag {
  border-radius: 999px;
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 11px;
}

/* --- Dialog e maschera --------------------------------------------------- */
.p-dialog-mask {
  background: var(--maskbg);
  backdrop-filter: blur(3px);
  animation: omFade 0.16s ease-out;
}

.p-dialog {
  border-radius: var(--border-radius-lg);
  border: 0;
  background: var(--surface-card);
  box-shadow: var(--shadow-dialog);
  animation: omRise 0.22s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.p-dialog .p-dialog-header {
  background: transparent;
  border: 0;
  color: var(--text-color);
  padding: 24px 26px 0;
}

.p-dialog .p-dialog-title {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.p-dialog .p-dialog-content {
  background: transparent;
  color: var(--text-color);
  padding: 20px 26px 26px;
}

.p-dialog .p-dialog-footer {
  background: transparent;
  border-top: 1px solid var(--surface-divider);
  padding: 18px 26px;
}

.p-dialog-close-button {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  color: var(--text-color-secondary);
}

.p-dialog-close-button:hover {
  background: var(--surface-hover-strong);
  color: var(--text-color);
}

/* --- Toast (design: pill scura centrata in basso) ----------------------- */
.p-toast {
  width: auto;
  max-width: min(92vw, 520px);
}

.p-toast .p-toast-message {
  border-radius: var(--border-radius);
  border: 0;
  background: var(--nova-dark);
  box-shadow: var(--shadow-toast);
  animation: omRise 0.2s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.p-toast .p-toast-message-content {
  padding: 14px 20px;
  gap: 12px;
  align-items: center;
  border: 0;
}

.p-toast .p-toast-message-icon {
  color: var(--tertiary-color);
  font-size: 17px;
}

.p-toast .p-toast-summary,
.p-toast .p-toast-detail {
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  margin: 0;
}

.p-toast .p-toast-detail {
  font-weight: 500;
  opacity: 0.82;
  margin-top: 2px;
}

.p-toast .p-toast-close-button {
  color: rgba(255, 255, 255, 0.7);
  width: 26px;
  height: 26px;
}

.p-toast .p-toast-close-button:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

.p-toast .p-toast-message-error .p-toast-message-icon {
  color: #e8a79f;
}

/* --- Breadcrumb --------------------------------------------------------- */
.p-breadcrumb {
  background: transparent;
  border: 0;
  padding: 0;
}

.p-breadcrumb .p-breadcrumb-item-link,
.p-breadcrumb .p-breadcrumb-item-label {
  font-size: 14.5px;
  color: var(--text-color-secondary);
  transition: color 0.15s ease;
}

.p-breadcrumb .p-breadcrumb-item-link:hover .p-breadcrumb-item-label {
  color: var(--text-color);
}

.p-breadcrumb .p-breadcrumb-item:last-child .p-breadcrumb-item-label {
  color: var(--text-color);
  font-weight: 600;
}

.p-breadcrumb .p-breadcrumb-separator {
  color: var(--breadcrumb-separator-color);
  margin: 0 6px;
}

.p-breadcrumb .p-breadcrumb-separator .p-icon,
.p-breadcrumb .p-breadcrumb-separator svg {
  display: none;
}

.p-breadcrumb .p-breadcrumb-separator::after {
  content: '\203A';
  font-size: 15px;
  line-height: 1;
}

/* --- Divider ------------------------------------------------------------ */
.p-divider.p-divider-horizontal:before {
  border-block-start: 1px solid var(--surface-divider);
}

.p-divider.p-divider-vertical:before {
  border-inline-start: 1px solid var(--surface-divider);
}

/* --- Skeleton ----------------------------------------------------------- */
.p-skeleton {
  background: var(--surface-200);
  border-radius: var(--border-radius);
}

/* --- Popover / Overlay -------------------------------------------------- */
.p-popover {
  border-radius: var(--border-radius-md);
  border: 1px solid var(--surface-border);
  background: var(--surface-overlay);
  box-shadow: var(--shadow-card-hover);
}

.p-popover:after,
.p-popover:before {
  border-bottom-color: var(--surface-overlay);
}

/* --- Stepper pill (configuratore + checkout) ---------------------------- */
/* Il design vuole pill piene invece dei pallini numerati di p-steps. */
.nova-steps .p-steps {
  background: transparent;
}

.nova-steps .p-steps-list {
  display: flex;
  gap: 10px;
  justify-content: flex-start;
}

.nova-steps .p-steps-list:before {
  display: none;
}

.nova-steps .p-steps-item {
  flex: 0 0 auto;
}

.nova-steps .p-steps-item:before {
  display: none;
}

.nova-steps .p-steps-item .p-steps-item-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex-direction: row;
  padding: 8px 16px 8px 11px;
  border-radius: 999px;
  background: #efece6;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}

.nova-steps .p-steps-item .p-steps-item-link:focus-visible {
  outline: 0;
  box-shadow: var(--focus-ring);
}

.nova-steps .p-steps-item .p-steps-item-number {
  width: 21px;
  height: 21px;
  min-width: 21px;
  border-radius: 50%;
  border: 0;
  background: rgba(34, 53, 46, 0.08);
  color: inherit;
  font-size: 11.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nova-steps .p-steps-item .p-steps-item-label {
  margin: 0;
  font-size: 13.5px;
  font-weight: 700;
  color: inherit;
  white-space: nowrap;
}

.nova-steps .p-steps-item:not(.p-steps-item-active) .p-steps-item-link {
  color: var(--muted-color);
}

.nova-steps .p-steps-item.p-steps-item-active .p-steps-item-link {
  background: var(--primary-color);
  color: var(--primary-color-text);
}

.nova-steps .p-steps-item.p-steps-item-active .p-steps-item-number {
  background: rgba(255, 255, 255, 0.22);
  color: var(--primary-color-text);
}

/* Step completati: p-steps (PrimeNG 20) non propaga lo `styleClass` del
   MenuItem sull'<li>, quindi il completamento arriva dal contenitore via
   `data-active-step` (indice dello step corrente): tutti gli item che lo
   precedono sono completati. */
.nova-steps[data-active-step='1'] .p-steps-item:nth-child(-n + 1) .p-steps-item-link,
.nova-steps[data-active-step='2'] .p-steps-item:nth-child(-n + 2) .p-steps-item-link,
.nova-steps[data-active-step='3'] .p-steps-item:nth-child(-n + 3) .p-steps-item-link,
.nova-steps[data-active-step='4'] .p-steps-item:nth-child(-n + 4) .p-steps-item-link,
.nova-steps[data-active-step='5'] .p-steps-item:nth-child(-n + 5) .p-steps-item-link,
.nova-steps .p-steps-item.step-completed .p-steps-item-link {
  background: #dfe8e2;
  color: var(--primary-color);
}

/* Negli step completati il numero e' sostituito da una spunta. */
.nova-steps[data-active-step='1'] .p-steps-item:nth-child(-n + 1) .p-steps-item-number,
.nova-steps[data-active-step='2'] .p-steps-item:nth-child(-n + 2) .p-steps-item-number,
.nova-steps[data-active-step='3'] .p-steps-item:nth-child(-n + 3) .p-steps-item-number,
.nova-steps[data-active-step='4'] .p-steps-item:nth-child(-n + 4) .p-steps-item-number,
.nova-steps[data-active-step='5'] .p-steps-item:nth-child(-n + 5) .p-steps-item-number,
.nova-steps .p-steps-item.step-completed .p-steps-item-number {
  background: rgba(74, 135, 112, 0.16);
  color: transparent;
  position: relative;
}

.nova-steps[data-active-step='1'] .p-steps-item:nth-child(-n + 1) .p-steps-item-number:after,
.nova-steps[data-active-step='2'] .p-steps-item:nth-child(-n + 2) .p-steps-item-number:after,
.nova-steps[data-active-step='3'] .p-steps-item:nth-child(-n + 3) .p-steps-item-number:after,
.nova-steps[data-active-step='4'] .p-steps-item:nth-child(-n + 4) .p-steps-item-number:after,
.nova-steps[data-active-step='5'] .p-steps-item:nth-child(-n + 5) .p-steps-item-number:after,
.nova-steps .p-steps-item.step-completed .p-steps-item-number:after {
  content: '\e909'; /* pi-check */
  font-family: 'primeicons';
  font-size: 10px;
  color: var(--primary-color);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Lo step corrente resta pieno: batte per specificita' le regole
   `data-active-step` qui sopra, che non devono mai toccarlo. */
.nova-steps[data-active-step] .p-steps-item.p-steps-item-active .p-steps-item-link {
  background: var(--primary-color);
  color: var(--primary-color-text);
}

.nova-steps[data-active-step] .p-steps-item.p-steps-item-active .p-steps-item-number {
  background: rgba(255, 255, 255, 0.22);
  color: var(--primary-color-text);
}

.nova-steps[data-active-step] .p-steps-item.p-steps-item-active .p-steps-item-number:after {
  content: none;
}

.nova-steps--center .p-steps-list {
  justify-content: center;
}

/* --- Dialog del configuratore piano ------------------------------------- */
/* Il contenuto porta il proprio layout a due colonne: la dialog fa solo da
   contenitore (nessun header, nessun padding). */
.p-dialog.plan-config-dialog {
  width: calc(100vw - 56px);
  max-width: 1180px;
  margin: 28px 0;
}

.p-dialog.plan-config-dialog .p-dialog-content {
  padding: 0;
  border-radius: var(--border-radius-lg);
  overflow: hidden;
}

/* ============================================================================
   Novatellus - form di checkout
   Classi condivise dai tre step (customer-form, billing-address-step,
   payment-step): stanno qui perche' i componenti figli renderizzano dentro la
   card del checkout e devono condividere misure e stati.
   ========================================================================== */

.checkout-section {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.checkout-section + .checkout-section {
  margin-top: 26px;
}

.checkout-section__text {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.checkout-section__title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-color);
}

.checkout-section__description {
  margin: 0;
  max-width: 68ch;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-color-secondary);
  text-wrap: pretty;
}

/* Nota informativa su superficie neutra. */
.checkout-note {
  padding: 13px 16px;
  border-radius: var(--border-radius);
  background: var(--surface-c);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-color-body);
}

/* --- Griglia dei campi --------------------------------------------------- */
.checkout-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(232px, 100%), 1fr));
  gap: 16px 22px;
}

.checkout-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}

/* Campi che occupano l'intera riga (indirizzo, checkbox, numero carta). */
.checkout-field--full {
  grid-column: 1 / -1;
}

.checkout-field__label {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-color-body);
}

.checkout-field__required {
  color: var(--nova-danger-text);
}

.checkout-field__hint {
  font-size: 11.5px;
  color: var(--text-color-secondary);
}

.checkout-field__error {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--nova-danger-text);
}

/* --- Checkbox con label ------------------------------------------------- */
.checkout-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 11px;
}

.checkout-checkbox__label {
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text-color-body-strong);
  cursor: pointer;
}

/* --- Banner di errore / validazione ------------------------------------- */
.checkout-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border: 1px solid var(--nova-danger-border-soft);
  border-radius: var(--border-radius);
  background: var(--nova-danger-bg);
  color: var(--nova-danger-strong);
  font-size: 13px;
  font-weight: 600;
}

/* --- Footer del form ---------------------------------------------------- */
.checkout-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 4px;
  padding-top: 22px;
  border-top: 1px solid var(--surface-divider);
}

.checkout-footer__back {
  height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--text-color-body);
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.checkout-footer__back:hover {
  background: var(--surface-hover);
}

.checkout-footer__back:focus-visible {
  outline: 0;
  box-shadow: var(--focus-ring);
}

.checkout-footer .p-button.checkout-footer__cta,
.p-button.checkout-footer__cta {
  height: 48px;
  padding: 0 26px;
  border-radius: var(--border-radius);
}

/* --- Card radio dei metodi di pagamento --------------------------------- */
.method-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 12px;
}

.method-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 15px 16px;
  border: 1px solid var(--surface-d);
  border-radius: 14px;
  background: var(--surface-0);
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease;
}

.method-card:hover {
  border-color: var(--primary-400);
}

.method-card--selected {
  border-color: var(--primary-color);
  background: var(--primary-50);
}

.method-card--disabled {
  opacity: 0.6;
  cursor: default;
}

.method-card--disabled:hover {
  border-color: var(--surface-d);
}

.method-card:focus-visible {
  outline: 0;
  box-shadow: var(--focus-ring);
}

.method-card__text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.method-card__name {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text-color);
}

.method-card__description {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-color-secondary);
}

.method-card__soon {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted-color);
  white-space: nowrap;
}

/* --- Card radio degli indirizzi salvati --------------------------------- */
/* Il prototipo non mostrava l'elenco indirizzi: la funzionalita' esistente
   resta, adattata al design (§A.5.2.7). */
.address-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.address-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 16px;
  border: 1px solid var(--surface-d);
  border-radius: 14px;
  background: var(--surface-0);
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease;
}

.address-card:hover {
  border-color: var(--primary-400);
}

.address-card--selected {
  border-color: var(--primary-color);
  background: var(--primary-50);
}

.address-card__main {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}

.address-card__text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  cursor: pointer;
}

.address-card__name {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text-color);
}

.address-card__detail {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-color-secondary);
}

.address-card__actions {
  flex: 0 0 auto;
  display: flex;
  gap: 2px;
}

/* --- Stato vuoto dei metodi di pagamento -------------------------------- */
.checkout-empty-methods {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 40px 30px;
  border: 1px solid var(--surface-border);
  border-radius: var(--border-radius-md);
  background: var(--surface-card);
}

.checkout-empty-methods i {
  font-size: 26px;
  color: var(--text-color-secondary);
}

.checkout-empty-methods__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-color);
}

.checkout-empty-methods__text {
  margin: 0;
  max-width: 46ch;
  text-align: center;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-color-secondary);
}

/* ============================================================================
   Novatellus - elementi condivisi del configuratore
   Stepper numerico, chip bundle, riepilogo capacita' e link testuale: usati da
   piu' step del configuratore (e riusabili altrove), quindi vivono qui invece
   di essere duplicati nei componenti.
   ========================================================================== */

/* --- Link testuale ("Attiva tutti", "Modifica", "Cambia") --------------- */
.config-link {
  border: 0;
  border-radius: var(--border-radius-sm);
  background: transparent;
  padding: 5px 9px;
  color: var(--primary-color);
  font-family: var(--font-family);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.config-link:hover {
  background: var(--primary-100);
}

.config-link:focus-visible {
  outline: 0;
  box-shadow: var(--focus-ring);
}

/* --- Nota informativa su superficie neutra ------------------------------ */
.config-note {
  padding: 13px 16px;
  border-radius: var(--border-radius);
  background: var(--surface-c);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-color-body);
}

/* --- Stepper numerico (- / valore / +) ---------------------------------- */
.stepper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.stepper__button {
  flex: 0 0 auto;
  width: 36px;
  height: 40px;
  border: 1px solid var(--input-border-color);
  border-radius: 10px;
  background: var(--surface-input);
  color: var(--text-color-body);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease;
}

.stepper__button i {
  font-size: 11px;
}

.stepper__button:hover:not(:disabled) {
  background: #edeae4;
}

.stepper__button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.stepper__button:focus-visible {
  outline: 0;
  box-shadow: var(--focus-ring);
}

.stepper__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 40px;
  border: 1px solid var(--input-border-color);
  border-radius: 10px;
  background: var(--surface-0);
  color: var(--text-color);
  font-family: var(--font-family);
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
  /* I bottoni - / + rendono superflue le frecce native. */
  -moz-appearance: textfield;
  appearance: textfield;
}

.stepper__input::-webkit-outer-spin-button,
.stepper__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.stepper__input:focus {
  outline: 0;
  border-color: var(--input-border-color-focus);
  box-shadow: var(--focus-ring);
}

/* --- Chip bundle (sola lettura: il tier e' derivato) -------------------- */
.bundle-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.bundle-chip {
  flex: 1 1 128px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 11px 12px;
  border-radius: 11px;
  background: var(--surface-neutral);
  color: var(--muted-color);
}

.bundle-chip--below {
  background: #eef1ee;
  color: var(--text-color-faint);
}

.bundle-chip--current {
  background: var(--primary-color);
  color: var(--primary-color-text);
}

.bundle-chip__name {
  font-size: 12.5px;
  font-weight: 700;
}

.bundle-chip__range {
  font-size: 11.5px;
  line-height: 1.35;
}

.bundle-chip__price {
  font-size: 12px;
  font-weight: 700;
}

/* --- Riepilogo capacita' ------------------------------------------------ */
.bundle-capacity {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px;
  padding-top: 15px;
  border-top: 1px solid var(--surface-divider);
}

.bundle-capacity__label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted-color);
}

.bundle-capacity__cap {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-color);
}

.bundle-capacity__declared {
  font-size: 11.5px;
  color: var(--text-color-secondary);
}

/* Dentro la card di riepilogo la griglia non porta il divisore superiore. */
.summary-card__band .bundle-capacity {
  padding-top: 0;
  border-top: 0;
}

/* ============================================================================
   Novatellus - pannello bundle e card di riepilogo del configuratore
   Spostati qui dal componente: sono strutture riusabili (il riepilogo serve
   anche allo step 2 e alla vista carrello) e il componente resta sotto il
   budget "anyComponentStyle" di angular.json.
   ========================================================================== */

.bundle-panel {
  display: flex;
  flex-direction: column;
  gap: 17px;
  padding: 19px 21px 21px;
  border-radius: var(--border-radius-md);
  background: var(--surface-0);
  border: 1px solid var(--surface-border);
}

.bundle-panel__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.bundle-panel__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bundle-panel__title {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--text-color);
}

.bundle-panel__reason {
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-color-secondary);
}

.bundle-panel__price {
  flex: 0 0 auto;
  text-align: right;
}

.bundle-panel__amount {
  font-size: 21px;
  font-weight: 800;
  color: var(--text-color);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.bundle-panel__period {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted-color);
}

/* --- Card di riepilogo a fasce ------------------------------------------ */
.summary-card {
  border-radius: var(--border-radius-md);
  background: var(--surface-0);
  border: 1px solid var(--surface-border);
  overflow: hidden;
}

.summary-card__band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 21px;
}

.summary-card__band + .summary-card__band {
  border-top: 1px solid var(--surface-divider);
}

.summary-card__band--column {
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}

.summary-card__band-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.summary-card__label {
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted-color);
}

.summary-card__value {
  margin-top: 4px;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--text-color);
}

.summary-card__empty {
  font-size: 13px;
  color: var(--text-color-secondary);
}

.summary-modules {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.summary-modules__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 13.5px;
  color: var(--text-color);
}

.summary-modules__price {
  font-weight: 700;
  white-space: nowrap;
}

/* ============================================================================
   Novatellus - chip moduli e blocchi di dettaglio del carrello
   Strutture condivise fra riga carrello, riepilogo e conferma d ordine.
   ========================================================================== */

.cart-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cart-chip {
  padding: 6px 11px;
  border-radius: 999px;
  background: var(--primary-100);
  color: var(--primary-700);
  font-size: 12px;
  font-weight: 600;
}

.cart-chip--empty {
  background: var(--surface-c);
  color: var(--muted-color);
}

.cart-detail {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 24px;
  border: 1px solid var(--surface-border);
  border-radius: var(--border-radius-md);
  background: var(--surface-card);
}

.cart-detail__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-color);
}

.cart-detail__rows,
.cart-detail__stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cart-detail__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 13.5px;
}

.cart-detail__name {
  color: var(--text-color);
  font-weight: 600;
}

.cart-detail__value {
  color: var(--text-color);
  font-weight: 700;
  white-space: nowrap;
}

.cart-detail__muted {
  font-size: 13px;
  color: var(--text-color-secondary);
}